feat(rollup-plugin): add support for css files to plugin (#7294)

Co-authored-by: Copilot <[email protected]>

Author: joshblack

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

@@ -2,6 +2,10 @@
 
 exports[`postcss-preset-primer > css nesting 1`] = `".selector[data-active]{color:var(--fgColor-active)}"`;
 
+exports[`postcss-preset-primer > mixins > @mixin activeIndicatorLine 1`] = `".selector{background:var(--borderColor-accent-emphasis,var(--color-accent-emphasis));border-radius:var(--borderRadius-medium,.375rem);content:"";height:calc(100% - var(--base-size-8,.5rem));left:calc(var(--base-size-8,.5rem)*-1);position:absolute;top:var(--base-size-4,.25rem);width:var(--base-size-4,.25rem)}"`;
+
+exports[`postcss-preset-primer > mixins > @mixin buttonReset 1`] = `".selector{align-items:center;appearance:none;background:none;border:0;color:inherit;cursor:pointer;display:inline-flex;font:inherit;margin:0;padding:0;text-align:start}.selector::-moz-focus-inner{border:0}"`;
+
 exports[`postcss-preset-primer > mixins > @mixin focusOutline 1`] = `".selector{box-shadow:none;outline:2px solid var(--focus-outlineColor,var(--color-accent-fg));outline-offset:-2px}"`;
 
 exports[`postcss-preset-primer > mixins > @mixin focusOutlineOnEmphasis 1`] = `".selector{box-shadow:inset 0 0 0 3px var(--fgColor-onEmphasis,var(--color-fg-on-emphasis));outline:2px solid var(--focus-outlineColor,var(--color-accent-fg));outline-offset:-2px}"`;

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

@@ -37,6 +37,15 @@ describe('postcss-preset-primer', () => {
   })
 
   describe('mixins', () => {
+    test('@mixin activeIndicatorLine', async () => {
+      const result = await process(`
+        .selector {
+          @mixin activeIndicatorLine;
+        }
+      `)
+      expect(result).toMatchSnapshot()
+    })
+
     test('@mixin focusOutline', async () => {
       const result = await process(`
         .selector {
@@ -54,5 +63,14 @@ describe('postcss-preset-primer', () => {
       `)
       expect(result).toMatchSnapshot()
     })
+
+    test('@mixin buttonReset', async () => {
+      const result = await process(`
+        .selector {
+          @mixin buttonReset;
+        }
+      `)
+      expect(result).toMatchSnapshot()
+    })
   })
 })

packages/rollup-plugin-import-css/src/index.ts

@@ -1,4 +1,5 @@
 import type {Plugin} from 'rollup'
+import fs from 'node:fs/promises'
 import path from 'node:path'
 import {createHash} from 'node:crypto'
 import postcss from 'postcss'
@@ -40,18 +41,33 @@ export function importCSS(options: ImportCSSOptions): Plugin {
         return {
           id: source,
           external: true,
+          moduleSideEffects: true,
         }
       }
+
+      if (source.endsWith('.css')) {
+        const id = path.resolve(path.dirname(importer), source)
+        return path.format({
+          dir: path.dirname(id),
+          base: `${path.basename(id)}.js`,
+        })
+      }
     },
-    async transform(code, id) {
-      if (!id.endsWith('.css')) {
+    async load(id) {
+      if (id.endsWith('.css.js')) {
+        return ''
+      }
+    },
+    async transform(_code, id) {
+      if (!id.endsWith('.css.js')) {
         return
       }
 
+      const sourceId = path.join(path.dirname(id), path.basename(id, '.js'))
+      const code = await fs.readFile(sourceId, 'utf8')
       const hash = getSourceHash(code)
-      const relativePath = path.relative(rootDirectory, id)
-      const name = path.basename(relativePath, '.module.css')
-
+      const relativePath = path.relative(rootDirectory, sourceId)
+      const name = path.basename(relativePath, relativePath.endsWith('.module.css') ? '.module.css' : '.css')
       const fileName = path.join(
         path.dirname(relativePath),
         path.format({
@@ -66,7 +82,7 @@ export function importCSS(options: ImportCSSOptions): Plugin {
       // the classes is used, then the associated styles for those classes is
       // also included
 
-      let cssModuleClasses = null
+      let cssModuleClasses: {[name: string]: string} | null = null
       const result = await postcss([
         ...postcssPlugins,
         postcssModules({
@@ -108,8 +124,12 @@ export function importCSS(options: ImportCSSOptions): Plugin {
       return {
         code: `
           import '${cssSource}';
-          export default ${JSON.stringify(cssModuleClasses)}
+          ${
+            // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+            cssModuleClasses !== null ? `export default ${JSON.stringify(cssModuleClasses)}` : ''
+          }
         `,
+        moduleSideEffects: 'no-treeshake',
       }
     },
   }