feat(react): enable support for CSS Modules and emitting *.css files in bundle

.changeset/config.json

@@ -6,5 +6,5 @@
   "access": "public",
   "baseBranch": "main",
   "updateInternalDependencies": "patch",
-  "ignore": ["docs", "example-*", "codesandbox", "rollup-plugin-import-css"]
+  "ignore": ["docs", "example-*", "codesandbox"]
 }

.changeset/dry-trainers-protect.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': major
+---
+
+Update Primer React to emit *.css files that are imported by emitted *.js files for styling

.github/workflows/consumer_test.yml

@@ -22,7 +22,7 @@ jobs:
       - name: Install dependencies
         run: npm ci
       - name: Build @primer/react
-        run: npm run build -w @primer/react
+        run: npm run build -w rollup-plugin-import-css -w @primer/react
       # Output the artifact as a tarball in `consumer-test`. Write the
       # information for this package in `consumer-test/pack.json` so we can read
       # from it later to install the package

package.json

@@ -2,13 +2,14 @@
   "name": "primer",
   "private": true,
   "workspaces": [
+    "packages/rollup-plugin-import-css",
     "packages/*",
     "docs",
     "examples/*"
   ],
   "scripts": {
     "setup": "./script/setup",
-    "build": "npm run build -w @primer/react",
+    "build": "npm run build -w rollup-plugin-import-css -w @primer/react",
     "clean": "npm run clean -ws --if-present",
     "clean:all": "npm run clean && rimraf node_modules docs/node_modules packages/*/node_modules examples/*/node_modules",
     "format": "prettier --cache --write '**/*.{js,css,md,mdx,ts,tsx,yml}'",

packages/react/package.json

@@ -38,7 +38,10 @@
     "./lib-esm/internal/*": null
   },
   "typings": "lib/index.d.ts",
-  "sideEffects": false,
+  "sideEffects": [
+    "lib-esm/**/*.css",
+    "lib/**/*.css"
+  ],
   "scripts": {
     "build": "./script/build",
     "clean": "rimraf dist lib lib-esm css",
@@ -199,7 +202,9 @@
     "mdast-util-to-string": "4.0.0",
     "micromark-extension-frontmatter": "2.0.0",
     "micromark-extension-mdxjs": "3.0.0",
+    "postcss-custom-properties-fallback": "1.0.2",
     "postcss-preset-env": "9.5.14",
+    "postcss-preset-primer": "^0.0.0",
     "react": "18.3.1",
     "react-dnd": "14.0.4",
     "react-dnd-html5-backend": "14.0.2",
@@ -208,6 +213,7 @@
     "recast": "0.23.7",
     "rimraf": "5.0.5",
     "rollup": "4.9.6",
+    "rollup-plugin-import-css": "^0.0.0",
     "rollup-plugin-postcss": "4.0.2",
     "rollup-plugin-visualizer": "5.9.2",
     "semver": "7.6.2",

packages/react/postcss.config.mjs

@@ -0,0 +1,8 @@
+import postcssPresetPrimer from 'postcss-preset-primer'
+
+/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: [postcssPresetPrimer()],
+}
+
+export default config

packages/react/rollup.config.js → packages/react/rollup.config.mjs

@@ -1,13 +1,21 @@
+import fs from 'node:fs'
+import path from 'node:path'
+import {fileURLToPath} from 'node:url'
 import commonjs from '@rollup/plugin-commonjs'
 import resolve from '@rollup/plugin-node-resolve'
 import babel from '@rollup/plugin-babel'
 import replace from '@rollup/plugin-replace'
 import terser from '@rollup/plugin-terser'
 import glob from 'fast-glob'
+import customPropertiesFallback from 'postcss-custom-properties-fallback'
 import {visualizer} from 'rollup-plugin-visualizer'
+import {importCSS} from 'rollup-plugin-import-css'
 import postcss from 'rollup-plugin-postcss'
+import postssPresetPrimer from 'postcss-preset-primer'
 import MagicString from 'magic-string'
-import packageJson from './package.json'
+import packageJson from './package.json' assert {type: 'json'}
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
 
 const input = new Set([
   // "exports"
@@ -80,6 +88,50 @@ function createPackageRegex(name) {
   return new RegExp(`^${name}(/.*)?`)
 }
 
+const postcssPlugins = [
+  postssPresetPrimer(),
+  customPropertiesFallback({
+    importFrom: [
+      () => {
+        let customProperties = {}
+        const filePaths = glob.sync(['fallbacks/**/*.json', 'docs/functional/themes/light.json'], {
+          cwd: path.join(__dirname, '../../node_modules/@primer/primitives/dist/'),
+          ignore: ['fallbacks/color-fallbacks.json'],
+        })
+
+        for (const filePath of filePaths) {
+          const fileData = fs.readFileSync(
+            path.join(__dirname, '../../node_modules/@primer/primitives/dist/', filePath),
+            'utf8',
+          )
+
+          const jsonData = JSON.parse(fileData)
+          let result = {}
+
+          if (filePath === 'docs/functional/themes/light.json') {
+            for (const variable of Object.keys(jsonData)) {
+              result[`--${variable}`] = jsonData[variable].value
+            }
+          } else {
+            result = jsonData
+          }
+
+          customProperties = {
+            ...customProperties,
+            ...result,
+          }
+        }
+
+        return {customProperties}
+      },
+    ],
+  }),
+]
+
+const postcssModulesOptions = {
+  generateScopedName: 'prc-[folder]-[local]-[hash:base64:5]',
+}
+
 const baseConfig = {
   input: Array.from(input),
   plugins: [
@@ -121,12 +173,12 @@ const baseConfig = {
     commonjs({
       extensions,
     }),
-    postcss({
-      extract: 'components.css',
-      autoModules: false,
-      modules: {generateScopedName: 'prc_[local]_[hash:base64:5]'},
-      // plugins are defined in postcss.config.js
+    importCSS({
+      modulesRoot: 'src',
+      postcssPlugins,
+      postcssModulesOptions,
     }),
+
     /**
      * This custom rollup plugin allows us to preserve directives in source
      * code, such as "use client", in order to support React Server Components.
@@ -269,7 +321,52 @@ export default [
         'process.env.NODE_ENV': JSON.stringify('production'),
         preventAssignment: true,
       }),
-      ...baseConfig.plugins,
+      babel({
+        extensions,
+        exclude: /node_modules/,
+        babelHelpers: 'inline',
+        babelrc: false,
+        configFile: false,
+        presets: [
+          '@babel/preset-typescript',
+          [
+            '@babel/preset-react',
+            {
+              modules: false,
+            },
+          ],
+        ],
+        plugins: [
+          'macros',
+          'add-react-displayname',
+          'dev-expression',
+          'babel-plugin-styled-components',
+          '@babel/plugin-proposal-nullish-coalescing-operator',
+          '@babel/plugin-proposal-optional-chaining',
+          [
+            'babel-plugin-transform-replace-expressions',
+            {
+              replace: {
+                __DEV__: "process.env.NODE_ENV !== 'production'",
+              },
+            },
+          ],
+        ],
+      }),
+      resolve({
+        extensions,
+      }),
+      commonjs({
+        extensions,
+      }),
+      // PostCSS plugins are defined in postcss.config.js
+      postcss({
+        extract: 'components.css',
+        autoModules: false,
+        modules: {
+          generateScopedName: 'prc_[local]_[hash:base64:5]',
+        },
+      }),
       terser(),
       visualizer({sourcemap: true}),
     ],