@stylexjs/unplugin 0.17.3 → 0.17.5

package/lib/es/index.mjs

@@ -39,6 +39,60 @@ function processCollectedRulesToCSS(rules, options) {
   });
   return code.toString();
 }
+function getAssetBaseName(asset) {
+  if (asset?.name && typeof asset.name === 'string') return asset.name;
+  const fallback = asset?.fileName ? path.basename(asset.fileName) : 'stylex.css';
+  const match = /^(.*?)(-[a-z0-9]{8,})?\.css$/i.exec(fallback);
+  if (match) return `${match[1]}.css`;
+  return fallback || 'stylex.css';
+}
+function replaceBundleReferences(bundle, oldFileName, newFileName) {
+  for (const item of Object.values(bundle)) {
+    if (!item) continue;
+    if (item.type === 'chunk') {
+      if (typeof item.code === 'string' && item.code.includes(oldFileName)) {
+        item.code = item.code.split(oldFileName).join(newFileName);
+      }
+      const importedCss = item.viteMetadata?.importedCss;
+      if (importedCss instanceof Set && importedCss.has(oldFileName)) {
+        importedCss.delete(oldFileName);
+        importedCss.add(newFileName);
+      } else if (Array.isArray(importedCss)) {
+        const next = importedCss.map(name => name === oldFileName ? newFileName : name);
+        item.viteMetadata.importedCss = next;
+      }
+    } else if (item.type === 'asset' && typeof item.source === 'string') {
+      if (item.source.includes(oldFileName)) {
+        item.source = item.source.split(oldFileName).join(newFileName);
+      }
+    }
+  }
+}
+function replaceCssAssetWithHashedCopy(ctx, bundle, asset, nextSource) {
+  const baseName = getAssetBaseName(asset);
+  const referenceId = ctx.emitFile({
+    type: 'asset',
+    name: baseName,
+    source: nextSource
+  });
+  const nextFileName = ctx.getFileName(referenceId);
+  const oldFileName = asset.fileName;
+  if (!nextFileName || !oldFileName || nextFileName === oldFileName) {
+    asset.source = nextSource;
+    return;
+  }
+  replaceBundleReferences(bundle, oldFileName, nextFileName);
+  const emitted = bundle[nextFileName];
+  if (emitted && emitted !== asset) {
+    delete bundle[nextFileName];
+  }
+  asset.fileName = nextFileName;
+  asset.source = nextSource;
+  if (bundle[oldFileName] === asset) {
+    delete bundle[oldFileName];
+  }
+  bundle[nextFileName] = asset;
+}
 function readJSON(file) {
   try {
     const content = fs.readFileSync(file, 'utf8');
@@ -360,7 +414,8 @@ const unpluginInstance = createUnplugin((userOptions = {}, metaOptions) => {
       const target = pickCssAssetFromRollupBundle(bundle, cssInjectionTarget);
       if (target) {
         const current = typeof target.source === 'string' ? target.source : target.source?.toString() || '';
-        target.source = current ? current + '\n' + css : css;
+        const nextSource = current ? current + '\n' + css : css;
+        replaceCssAssetWithHashedCopy(this, bundle, target, nextSource);
       } else {}
     },
     vite: devMode === 'off' ? undefined : {

package/lib/index.d.ts

@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
 import { type UnpluginInstance } from 'unplugin';
 import type { Options as StyleXOptions } from '@stylexjs/babel-plugin';
 import type { TransformOptions as LightningcssOptions } from 'lightningcss';

package/lib/index.js

@@ -45,6 +45,60 @@ function processCollectedRulesToCSS(rules, options) {
   });
   return code.toString();
 }
+function getAssetBaseName(asset) {
+  if (asset?.name && typeof asset.name === 'string') return asset.name;
+  const fallback = asset?.fileName ? _nodePath.default.basename(asset.fileName) : 'stylex.css';
+  const match = /^(.*?)(-[a-z0-9]{8,})?\.css$/i.exec(fallback);
+  if (match) return `${match[1]}.css`;
+  return fallback || 'stylex.css';
+}
+function replaceBundleReferences(bundle, oldFileName, newFileName) {
+  for (const item of Object.values(bundle)) {
+    if (!item) continue;
+    if (item.type === 'chunk') {
+      if (typeof item.code === 'string' && item.code.includes(oldFileName)) {
+        item.code = item.code.split(oldFileName).join(newFileName);
+      }
+      const importedCss = item.viteMetadata?.importedCss;
+      if (importedCss instanceof Set && importedCss.has(oldFileName)) {
+        importedCss.delete(oldFileName);
+        importedCss.add(newFileName);
+      } else if (Array.isArray(importedCss)) {
+        const next = importedCss.map(name => name === oldFileName ? newFileName : name);
+        item.viteMetadata.importedCss = next;
+      }
+    } else if (item.type === 'asset' && typeof item.source === 'string') {
+      if (item.source.includes(oldFileName)) {
+        item.source = item.source.split(oldFileName).join(newFileName);
+      }
+    }
+  }
+}
+function replaceCssAssetWithHashedCopy(ctx, bundle, asset, nextSource) {
+  const baseName = getAssetBaseName(asset);
+  const referenceId = ctx.emitFile({
+    type: 'asset',
+    name: baseName,
+    source: nextSource
+  });
+  const nextFileName = ctx.getFileName(referenceId);
+  const oldFileName = asset.fileName;
+  if (!nextFileName || !oldFileName || nextFileName === oldFileName) {
+    asset.source = nextSource;
+    return;
+  }
+  replaceBundleReferences(bundle, oldFileName, nextFileName);
+  const emitted = bundle[nextFileName];
+  if (emitted && emitted !== asset) {
+    delete bundle[nextFileName];
+  }
+  asset.fileName = nextFileName;
+  asset.source = nextSource;
+  if (bundle[oldFileName] === asset) {
+    delete bundle[oldFileName];
+  }
+  bundle[nextFileName] = asset;
+}
 function readJSON(file) {
   try {
     const content = _nodeFs.default.readFileSync(file, 'utf8');
@@ -366,7 +420,8 @@ const unpluginInstance = (0, _unplugin.createUnplugin)((userOptions = {}, metaOp
       const target = pickCssAssetFromRollupBundle(bundle, cssInjectionTarget);
       if (target) {
         const current = typeof target.source === 'string' ? target.source : target.source?.toString() || '';
-        target.source = current ? current + '\n' + css : css;
+        const nextSource = current ? current + '\n' + css : css;
+        replaceCssAssetWithHashedCopy(this, bundle, target, nextSource);
       } else {}
     },
     vite: devMode === 'off' ? undefined : {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stylexjs/unplugin",
-  "version": "0.17.3",
+  "version": "0.17.5",
   "private": false,
   "description": "Universal bundler plugin for StyleX using unplugin",
   "license": "MIT",
@@ -35,7 +35,7 @@
     "@babel/plugin-syntax-flow": "^7.26.0",
     "@babel/plugin-syntax-jsx": "^7.25.9",
     "@babel/plugin-syntax-typescript": "^7.25.9",
-    "@stylexjs/babel-plugin": "0.17.3",
+    "@stylexjs/babel-plugin": "0.17.5",
     "browserslist": "^4.24.0",
     "lightningcss": "^1.29.1"
   },