feat: add postcss-plugin (#781)

* feat: add postcss-plugin
* fix postcss-plugin readme text
* remove .ts, .tsx from node_modules @stylexjs/open-props globs in postcss.config.js
* do not rely on internal exports path
* fix: remove redundant @layer stylex

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,15 @@
+/**
+ * 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,57 @@
+/**
+ * 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 fs = require('fs');
+const path = require('path');
+
+const projectRoot = __dirname;
+const monorepoRoot = path.join(projectRoot, '../../');
+
+function getPackageIncludePaths(packageName, nodeModulePaths) {
+  let packagePath = null;
+
+  for (const nodeModulePath of nodeModulePaths) {
+    const packageJsonPath = path.resolve(
+      nodeModulePath,
+      packageName,
+      'package.json',
+    );
+    if (fs.existsSync(packageJsonPath)) {
+      packagePath = path.dirname(packageJsonPath);
+      break;
+    }
+  }
+  if (!packagePath) {
+    throw new Error(`Could not find package ${packageName}`);
+  }
+
+  return [
+    path.join(packagePath, '**/*.{js,mjs}'),
+    '!' + path.join(packagePath, 'node_modules/**/*.{js,mjs}'),
+  ];
+}
+
+const openPropsIncludePaths = getPackageIncludePaths('@stylexjs/open-props', [
+  path.join(projectRoot, 'node_modules'),
+  path.join(monorepoRoot, 'node_modules'),
+]);
+
+module.exports = {
+  plugins: {
+    '@stylexjs/postcss-plugin': {
+      include: [
+        'app/**/*.{js,jsx,ts,tsx}',
+        'components/**/*.{js,jsx,ts,tsx}',
+        ...openPropsIncludePaths,
+      ],
+      useCSSLayers: true,
+    },
+    autoprefixer: {},
+  },
+};