Merge a76951e into 04eac62

.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,6 +202,7 @@
     "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",
     "react": "18.3.1",
     "react-dnd": "14.0.4",
@@ -208,6 +212,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/rollup.config.js → packages/react/rollup.config.mjs

@@ -1,13 +1,19 @@
+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 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 +86,49 @@ function createPackageRegex(name) {
   return new RegExp(`^${name}(/.*)?`)
 }
 
+const postcssPlugins = [
+  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 +170,6 @@ const baseConfig = {
     commonjs({
       extensions,
     }),
-    postcss({
-      extract: 'components.css',
-      autoModules: false,
-      modules: {generateScopedName: 'prc_[local]_[hash:base64:5]'},
-      // plugins are defined in postcss.config.js
-    }),
     /**
      * This custom rollup plugin allows us to preserve directives in source
      * code, such as "use client", in order to support React Server Components.
@@ -235,6 +278,14 @@ export default [
   // ESM
   {
     ...baseConfig,
+    plugins: [
+      ...baseConfig.plugins,
+      importCSS({
+        modulesRoot: 'src',
+        postcssPlugins,
+        postcssModulesOptions,
+      }),
+    ],
     external: dependencies.map(createPackageRegex),
     output: {
       interop: 'auto',
@@ -248,6 +299,14 @@ export default [
   // CommonJS
   {
     ...baseConfig,
+    plugins: [
+      ...baseConfig.plugins,
+      importCSS({
+        modulesRoot: 'src',
+        postcssPlugins,
+        postcssModulesOptions,
+      }),
+    ],
     external: dependencies.filter(name => !ESM_ONLY.has(name)).map(createPackageRegex),
     output: {
       interop: 'auto',
@@ -270,6 +329,14 @@ export default [
         preventAssignment: true,
       }),
       ...baseConfig.plugins,
+      // 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}),
     ],

packages/react/script/build

@@ -9,7 +9,7 @@ npm run clean
 npm run build:precompile-color-schemes
 
 # Bundle
-npx rollup -c --bundleConfigAsCjs
+npx rollup -c
 
 # Type check
 npx tsc --project tsconfig.build.json

packages/react/script/get-export-sizes.js

@@ -63,6 +63,17 @@ async function main() {
           commonjs({
             include: /node_modules/,
           }),
+          {
+            name: 'empty-css-modules',
+            transform(_code, id) {
+              if (!id.endsWith('.css')) {
+                return
+              }
+              return {
+                code: `export default {}`,
+              }
+            },
+          },
           virtual({
             __entrypoint__: `export { ${identifier} } from '${filepath}';`,
           }),

packages/react/src/__tests__/exports.test.ts

@@ -164,7 +164,7 @@ async function setup(): Promise<Project> {
           }
 
           const extension = path.extname(source)
-          if (extension !== '' && extensions.includes(extension)) {
+          if (extension !== '' && !extensions.includes(extension)) {
             return null
           }