feat: add postcss-plugin

apps/nextjs-example/app/layout.tsx

@@ -8,6 +8,7 @@
  */
 
 import './globals.css';
+import './stylex.css';
 import { globalTokens as $ } from '@/app/globalTokens.stylex';
 import * as stylex from '@stylexjs/stylex';
 

apps/nextjs-example/app/stylex.css

@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ *
+ */
+
+/**
+ * The @stylex directive is used by the @stylexjs/postcss-plugin.
+ * It is automatically replaced with generated CSS during builds.
+ */
+@stylex;

apps/nextjs-example/.babelrc.js → apps/nextjs-example/babel.config.js

@@ -1,3 +1,11 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ *
+ */
 const path = require('path');
 module.exports = {
   presets: ['next/babel'],
@@ -8,6 +16,7 @@ module.exports = {
       // https://stylexjs.com/docs/api/configuration/babel-plugin/
       {
         dev: process.env.NODE_ENV === 'development',
+        runtimeInjection: false,
         genConditionalClasses: true,
         treeshakeCompensation: true,
         aliases: {

apps/nextjs-example/next.config.js

@@ -8,17 +8,7 @@
  */
 
 /** @type {import('next').NextConfig} */
-const path = require('path');
-const stylexPlugin = require('@stylexjs/nextjs-plugin');
-const babelrc = require('./.babelrc.js');
-const plugins = babelrc.plugins;
-const [_name, options] = plugins.find(
-  (plugin) => Array.isArray(plugin) && plugin[0] === '@stylexjs/babel-plugin',
-);
-const rootDir = options.unstable_moduleResolution.rootDir ?? __dirname;
-const aliases = options.aliases ?? undefined;
-const useCSSLayers = options.useCSSLayers ?? undefined;
 
-module.exports = stylexPlugin({ rootDir, aliases, useCSSLayers })({
+module.exports = {
   transpilePackages: ['@stylexjs/open-props'],
-});
+};

apps/nextjs-example/package.json

@@ -4,8 +4,6 @@
   "private": true,
   "scripts": {
     "clean": "rimraf .next",
-    "predev": "npm run clean",
-    "prebuild": "npm run clean",
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
@@ -20,9 +18,8 @@
     "next": "14.0.1"
   },
   "devDependencies": {
-    "@stylexjs/babel-plugin": "^0.7.5",
     "@stylexjs/eslint-plugin": "^0.7.5",
-    "@stylexjs/nextjs-plugin": "^0.7.5",
+    "@stylexjs/postcss-plugin": "^0.9.3",
     "@types/node": "^22.7.6",
     "@types/react": "^18.3.11",
     "@types/react-dom": "^18.3.1",

apps/nextjs-example/postcss.config.js

@@ -0,0 +1,23 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ *
+ */
+
+module.exports = {
+  plugins: {
+    '@stylexjs/postcss-plugin': {
+      include: [
+        'app/**/*.{js,jsx,ts,tsx}',
+        'components/**/*.{js,jsx,ts,tsx}',
+        // TODO: Figure out a better way to write this
+        './node_modules/@stylexjs/open-props/lib/**/*.{js,jsx,ts,tsx}',
+      ],
+      useCSSLayers: true,
+    },
+    autoprefixer: {},
+  },
+};