feat: rollup plugin support generate file with pattern

facebook · Dec 18, 2024 · 347e9c7 · 347e9c7
1 parent db00997
commit 347e9c7
Show file tree

Hide file tree

Showing 2 changed files with 85 additions and 3 deletions.
diff --git a/packages/rollup-plugin/__tests__/index-test.js b/packages/rollup-plugin/__tests__/index-test.js
@@ -59,7 +59,7 @@ describe('rollup-plugin-stylex', () => {
       }
     }
 
-    return { css, js };
+    return { css, js, output };
   }
 
   it('extracts CSS and removes stylex.inject calls', async () => {
@@ -322,4 +322,76 @@ describe('rollup-plugin-stylex', () => {
       `);
     });
   });
+  it('output filename match pattern', async () => {
+    const { output } = await runStylex({ fileName: 'stylex.[hash].css' });
+    const css = output.find(
+      (chunkOrAsset) =>
+        chunkOrAsset.type === 'asset' &&
+        /^stylex.[0-9a-f]{8}\.css$/.test(chunkOrAsset.fileName),
+    );
+    expect(css.source).toMatchInlineSnapshot(`
+      "@layer priority1 {
+        @keyframes xgnty7z-B {
+          0% {
+            opacity: .25;
+          }
+
+          100% {
+            opacity: 1;
+          }
+        }
+      }
+
+      @layer priority2 {
+        .x1oz5o6v:hover {
+          background: red;
+        }
+      }
+
+      @layer priority3 {
+        .xeuoslp {
+          animation-name: xgnty7z-B;
+        }
+
+        .xu4yf9m {
+          border-start-start-radius: 7.5px;
+        }
+
+        .x1lliihq {
+          display: block;
+        }
+
+        .x78zum5 {
+          display: flex;
+        }
+
+        .xt0psk2 {
+          display: inline;
+        }
+
+        .x1hm9lzh {
+          margin-inline-start: 10px;
+        }
+      }
+
+      @layer priority4 {
+        .x1egiwwb {
+          height: 500px;
+        }
+
+        .xlrshdv {
+          margin-top: 99px;
+        }
+
+        .xh8yej3 {
+          width: 100%;
+        }
+
+        .x3hqpx7 {
+          width: 50%;
+        }
+      }
+      "
+    `);
+  });
 });
diff --git a/packages/rollup-plugin/src/index.js b/packages/rollup-plugin/src/index.js
@@ -24,6 +24,7 @@ import type {
 } from 'rollup';
 import browserslist from 'browserslist';
 import { browserslistToTargets } from 'lightningcss';
+import crypto from 'crypto';
 
 const IS_DEV_ENV =
   process.env.NODE_ENV === 'development' ||
@@ -44,6 +45,15 @@ export type PluginOptions = $ReadOnly<{
   ...
 }>;
 
+function replaceFileName(original: string) {
+  const hash = crypto
+    .createHash('sha256')
+    .update(crypto.randomBytes(16))
+    .digest('hex')
+    .slice(0, 8);
+  return original.replace(/\[hash\]/g, hash);
+}
+
 export default function stylexPlugin({
   dev = IS_DEV_ENV,
   unstable_moduleResolution = { type: 'commonJS', rootDir: process.cwd() },
@@ -72,7 +82,7 @@ export default function stylexPlugin({
         const { code } = transform({
           targets: browserslistToTargets(browserslist('>= 1%')),
           ...lightningcssOptions,
-          filename: fileName,
+          filename: 'stylex.css',
           code: Buffer.from(collectedCSS),
         });
 
@@ -82,7 +92,7 @@ export default function stylexPlugin({
         // This is the intended API, but Flow doesn't support this pattern.
         // $FlowExpectedError[object-this-reference]
         this.emitFile({
-          fileName,
+          fileName: replaceFileName(fileName),
           source: processedCSS,
           type: 'asset',
         });