stylex-webpack 0.3.1 → 0.3.2

package/README.md

@@ -1,31 +1,29 @@
 # stylex-webpack
 
-[First introduced at React Conf 2020 by Frank Yan](https://www.youtube.com/watch?v=9JZHodNR184), [stylex](https://stylexjs.com/) is a framework agnostic CSS-in-JS system with near-zero runtime, ahead-of-time compiler, atomic CSS extraction that powers [Facebook.com](https://www.facebook.com).
-
-`stylex-webpack` is an alternative webpack plugin and loader for stylex.
+[First introduced by Frank Yan at React Conf 2020](https://www.youtube.com/watch?v=9JZHodNR184), [StyleX](https://stylexjs.com/) framework agnostic CSS-in-JS system with near-zero runtime, ahead-of-time compiler, atomic CSS extraction that powers Facebook and Instagram.
 
 ## Motivation
 
-stylex provides a CSS-in-JS compiler, which means you will write your CSS in your JavaScript/JSX/TSX. But unlike other CSS-in-JS solutions that collect and process styles inside the browser, stylex will read your source code, collect your style and transform your JS/JSX/TSX, stripping runtime calls as much as possible (making the value of `className` a static string literal), and output CSS elsewhere.
+stylex offers a CSS-in-JS compiler, allowing you to write CSS in your JavaScript/JSX/TSX. However, unlike other CSS-in-JS solutions that gather and process styles within the browser, stylex will read your source code, collect your style and transform your JS/JSX/TSX, stripping runtime calls as much as possible (making the value of `className` a static string literal), and output CSS elsewhere.
 
-stylex does provide a webpack plugin. Under the hood, it will traverse through the source code, collect styles, and emit a new CSS asset during the webpack compilation. However, it has some limitations:
+StyleX does provide a webpack plugin. Under the hood, it will traverse through the source code, collect styles, and emit a new CSS asset during the webpack compilation. However, it does come with some limitations:
 
-- stylex's official Next.js setup requires a `.babelrc` file, which disables Next.js' built-in SWC compiler.
-- stylex's official Next.js plugin requires a CSS asset to pre-exist so that it can append the extracted CSS to it.
+- StyleX's official Next.js setup requires a `.babelrc` file, which disables Next.js' built-in SWC compiler.
+- StyleX's official Next.js plugin requires a CSS asset to pre-exist so that it can append the extracted CSS to it.
 
-I start this project as a Proof of Concept, to see if it is possible to make a webpack plugin for ststylex that doesn't disable Next.js' SWC compiler. I have already made [a similar webpack plugin for style9](https://github.com/sukkaw/style9-webpack), which is also an AoT atomic CSS-in-JS system that is inspired by stylex.
+I start this project as a Proof of Concept, to see if it is possible to make a webpack plugin for ststylex that doesn't disable Next.js' SWC compiler. I have already made [a similar webpack plugin for style9](https://github.com/sukkaw/style9-webpack), which is also an AoT atomic CSS-in-JS system that is inspired by StyleX.
 
-Unlike stylex's official webpack plugin, `stylex-webpack` requires you have setup `css-loader` and `MiniCssExtractPlugin` in your webpack configuration, just like your normal CSS based webpack project. `stylex-webpack`'s built-in loader will generate a virtual CSS import containing a dummy CSS rule. This allows the `MiniCssExtractPlugin` to collect those virtual CSS imports and emit a CSS asset, which `stylex-webpack` will later inject the actual extracted CSS into.
+Unlike stylex's official webpack plugin, `stylex-webpack` requires you have setup `css-loader` and `MiniCssExtractPlugin` in your webpack configuration, just like your normal CSS based webpack project. `stylex-webpack`'s built-in loader will generate a virtual CSS import containing a dummy CSS rule. This allows the `MiniCssExtractPlugin` to collect those virtual CSS imports and emit a CSS asset, which `stylex-webpack` will later inject the actual extracted CSS into at the `processAssets` stage.
 
 ## Installation
 
 ```sh
 # npm
-npm i style9-webpack
+npm i stylex-webpack
 # Yarn
-yarn add style9-webpack
+yarn add stylex-webpack
 # pnpm
-pnpm add style9-webpack
+pnpm add stylex-webpack
 ```
 
 ## Usage
@@ -66,7 +64,7 @@ module.exports = {
 // next.config.js
 const { withStyleX } = require('stylex-webpack/next');
 
-module.exports = withStyle9({
+module.exports = withStyleX({
   // stylex-webpack options goes here, see the following section for more details
 })({
   // Your Next.js config goes here.

package/dist/index.js

@@ -128,16 +128,20 @@ class StyleXPlugin {
                     }
                 }
                 // Let's find the css file that belongs to the stylex chunk
-                const cssAssetDetails = Object.entries(assets).find(([assetName])=>stylexChunk.files.has(assetName) && assetName.endsWith('.css'));
-                if (!cssAssetDetails) {
+                const cssAssetDetails = Object.entries(assets).filter(([assetName])=>stylexChunk.files.has(assetName) && assetName.endsWith('.css'));
+                if (cssAssetDetails.length === 0) {
                     return;
                 }
+                if (cssAssetDetails.length > 1) {
+                    console.warn('[stylex-webpack] Multiple CSS assets found for the stylex chunk. This should not happen. Please report this issue.');
+                }
+                const stylexAsset = cssAssetDetails[0];
                 const stylexCSS = getStyleXRules(this.stylexRules, this.useCSSLayers);
                 if (stylexCSS == null) {
                     return;
                 }
                 const finalCss = await this.transformCss(stylexCSS);
-                compilation.updateAsset(cssAssetDetails[0], (source)=>new ConcatSource(source, new RawSource(finalCss)));
+                compilation.updateAsset(stylexAsset[0], (source)=>new ConcatSource(source, new RawSource(finalCss)));
             });
         });
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stylex-webpack",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "description": "The another Webpack Plugin for Facebook's StyleX",
   "homepage": "https://github.com/SukkaW/style9-webpack#readme",
   "repository": {