feat(postcss): add support for mixins to postcss-preset-primer (prime…

…r#4856)

* feat(postcss): add support for mixins to postcss-preset-primer

* chore(deps): add @types/postcss-mixins

* fix: update order of plugins so that mixins can be transformed

---------

Co-authored-by: Josh Black <[email protected]>

jest.config.js

@@ -6,7 +6,7 @@
  * @type {import('jest').Config}
  */
 const config = {
-  projects: ['<rootDir>/packages/react'],
+  projects: ['<rootDir>/packages/react', '<rootDir>/packages/postcss-preset-primer'],
   watchPlugins: ['jest-watch-typeahead/filename', 'jest-watch-typeahead/testname'],
 }
 

packages/postcss-preset-primer/config/transform/jsTransform.js

@@ -0,0 +1,18 @@
+import babelJest from 'babel-jest'
+
+const babelOptions = {
+  presets: [
+    [
+      '@babel/preset-env',
+      {
+        targets: {
+          node: 'current',
+        },
+      },
+    ],
+    '@babel/preset-typescript',
+  ],
+  plugins: ['babel-plugin-transform-import-meta'],
+}
+
+export default babelJest.createTransformer(babelOptions)

packages/postcss-preset-primer/jest.config.cjs

@@ -0,0 +1,18 @@
+/* eslint-disable github/unescaped-html-literal */
+
+'use strict'
+
+/**
+ * @type {import('jest').Config}
+ */
+const config = {
+  setupFiles: [],
+  setupFilesAfterEnv: [],
+  testMatch: ['<rootDir>/**/*.test.[jt]s?(x)', '!**/*.types.test.[jt]s?(x)'],
+  transform: {
+    '^.+\\.(js|ts|tsx)$': require.resolve('./config/transform/jsTransform.js'),
+  },
+  transformIgnorePatterns: [],
+}
+
+module.exports = config

packages/postcss-preset-primer/package.json

@@ -8,6 +8,9 @@
     "type-check": "tsc --noEmit"
   },
   "browserslist": "extends @github/browserslist-config",
+  "peerDependencies": {
+    "postcss": "^8.4.41"
+  },
   "dependencies": {
     "@csstools/postcss-global-data": "^2.1.1",
     "@github/browserslist-config": "^1.0.0",
@@ -16,6 +19,14 @@
     "postcss-preset-env": "^10.0.0"
   },
   "devDependencies": {
-    "typescript": "5.5.3"
+    "@babel/core": "^7.25.2",
+    "@babel/preset-env": "^7.25.3",
+    "@babel/preset-typescript": "^7.24.7",
+    "@types/postcss-mixins": "9.0.5",
+    "babel-jest": "^29.7.0",
+    "babel-plugin-transform-import-meta": "^2.2.1",
+    "postcss": "^8.4.41",
+    "postcss-mixins": "^10.0.1",
+    "typescript": "^5.5.3"
   }
-}
+}

packages/postcss-preset-primer/src/__tests__/__snapshots__/preset.test.ts.snap

@@ -0,0 +1,29 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`postcss-preset-primer css nesting 1`] = `
+"
+        .selector[data-active] {
+          color: var(--fgColor-active);
+        }
+    "
+`;
+
+exports[`postcss-preset-primer mixins @mixin focusOutline 1`] = `
+"
+        .selector {
+          outline: 2px solid var(--focus-outlineColor);
+          outline-offset: -2px;
+          box-shadow: none;
+        }
+      "
+`;
+
+exports[`postcss-preset-primer mixins @mixin focusOutlineOnEmphasis 1`] = `
+"
+        .selector {
+          outline: 2px solid var(--focus-outlineColor);
+          outline-offset: -2px;
+          box-shadow: inset 0 0 0 3px var(--fgColor-onEmphasis);
+        }
+      "
+`;

packages/postcss-preset-primer/src/__tests__/preset.test.ts

@@ -0,0 +1,61 @@
+/**
+ * @jest-environment node
+ */
+
+import postcss from 'postcss'
+import preset from '../'
+
+async function process(input: string): Promise<string> {
+  try {
+    const result = await postcss([preset()]).process(input, {
+      from: undefined,
+    })
+    return result.css.toString()
+  } catch (error) {
+    // Note: it seems like Jest cannot serialize errors thrown by postcss. As a
+    // result, we remove problematic fields before throwing the error
+    if (error instanceof postcss.CssSyntaxError) {
+      // @ts-expect-error it seems the type for this is incorrect and this field
+      // does exist and is causing the circular reference issue
+      if (error.postcssNode) {
+        // @ts-expect-error it seems the type for this is incorrect and this field
+        // does exist and is causing the circular reference issue
+        delete error.postcssNode
+      }
+    }
+    throw error
+  }
+}
+
+describe('postcss-preset-primer', () => {
+  test('css nesting', async () => {
+    const result = await process(`
+      .selector {
+        &[data-active] {
+          color: var(--fgColor-active);
+        }
+      }
+    `)
+    expect(result).toMatchSnapshot()
+  })
+
+  describe('mixins', () => {
+    test('@mixin focusOutline', async () => {
+      const result = await process(`
+        .selector {
+          @mixin focusOutline;
+        }
+      `)
+      expect(result).toMatchSnapshot()
+    })
+
+    test('@mixin focusOutlineOnEmphasis', async () => {
+      const result = await process(`
+        .selector {
+          @mixin focusOutlineOnEmphasis;
+        }
+      `)
+      expect(result).toMatchSnapshot()
+    })
+  })
+})

packages/postcss-preset-primer/src/index.js

@@ -4,6 +4,7 @@ import {fileURLToPath} from 'node:url'
 import {globSync} from 'glob'
 import postcssGlobalData from '@csstools/postcss-global-data'
 import postcssPresetEnv from 'postcss-preset-env'
+import postcssMixins from 'postcss-mixins'
 // @ts-ignore
 import browsers from '@github/browserslist-config'
 
@@ -63,6 +64,9 @@ const postcssPresetPrimer = () => {
           return path.join(primitivesPath, file)
         }),
       }),
+      postcssMixins({
+        mixinsDir: path.join(path.dirname(filepath), 'mixins'),
+      }),
       ...plugins,
     ],
   }

packages/postcss-preset-primer/src/mixins/focusOutline.css

@@ -0,0 +1,5 @@
+@define-mixin focusOutline $outlineOffset: -2px, $outlineColor: var(--focus-outlineColor) {
+  outline: 2px solid $outlineColor;
+  outline-offset: $outlineOffset;
+  box-shadow: none;
+}

packages/postcss-preset-primer/src/mixins/focusOutlineOnEmphasis.css

@@ -0,0 +1,6 @@
+/* outline with fg box-shadow for buttons */
+@define-mixin focusOutlineOnEmphasis $outlineOffset: -2px, $outlineColor: var(--focus-outlineColor) {
+  outline: 2px solid $outlineColor;
+  outline-offset: $outlineOffset;
+  box-shadow: inset 0 0 0 3px var(--fgColor-onEmphasis);
+}