stylex-webpack 0.4.5 → 0.4.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/index.js +50 -56
  2. package/dist/stylex-loader.js +7 -1
  3. package/package.json +4 -3
package/dist/index.js CHANGED
@@ -5,7 +5,7 @@ var path = require('node:path');
5
5
  var process = require('node:process');
6
6
  var identity = require('foxts/identity');
7
7
 
8
- var version = "0.4.5";
8
+ var version = "0.4.7";
9
9
 
10
10
  const PLUGIN_NAME = 'stylex';
11
11
  const VIRTUAL_ENTRYPOINT_CSS_PATH = require.resolve('./stylex.css');
@@ -120,11 +120,37 @@ class StyleXPlugin {
120
120
  });
121
121
  }
122
122
  });
123
- compilation.hooks.processAssets.tapPromise({
124
- name: PLUGIN_NAME,
125
- stage: Compilation.PROCESS_ASSETS_STAGE_PRE_PROCESS
126
- }, async (assets)=>{
127
- compilation.modules.forEach((mod)=>{
123
+ /**
124
+ * Next.js call webpack compiler through "runCompiler": https://github.com/vercel/next.js/blob/c0c75e4aaa8ece2c9e789e2e3f150d7487b60bbc/packages/next/src/build/compiler.ts#L39
125
+ *
126
+ * The "runCompiler" funtion is invoked by "webpackBuildImpl" function: https://github.com/vercel/next.js/blob/ad6907a8a37e930639af071203f4ce49a5d69ee5/packages/next/src/build/webpack-build/impl.ts#L203
127
+ *
128
+ * The "webpackBuildImpl" function accepts "compilerName" parameter, and is invoked by "webpackBuild" function: https://github.com/vercel/next.js/blob/c0c75e4aaa8ece2c9e789e2e3f150d7487b60bbc/packages/next/src/build/webpack-build/index.ts#L124
129
+ * When build worker is enabled, the "compilerName" parameter is set to either "client", "server" or "edge-server". If build worker is disabled,
130
+ * the "compilerName" parameter is always "null".
131
+ *
132
+ * When build worker is disabled, the multi-stage build is managed by "webpackBuildImpl" function itself: https://github.com/vercel/next.js/blob/ad6907a8a37e930639af071203f4ce49a5d69ee5/packages/next/src/build/webpack-build/impl.ts#L203
133
+ * It will first run "server" compiler, then "edge-server" compiler, and finally "client" compiler.
134
+ *
135
+ * The "webpackBuildImpl" function is invoked by "webpackBuild" function: https://github.com/vercel/next.js/blob/c0c75e4aaa8ece2c9e789e2e3f150d7487b60bbc/packages/next/src/build/webpack-build/index.ts#L124
136
+ *
137
+ * If build worker is enabled, the multi-stage build is managed by the build entrypoint, and the "client", "server" and "edge-server" compilerName
138
+ * is passed to "webpackBuildImpl" through "webpackBuild" function:
139
+ * https://github.com/vercel/next.js/blob/c0c75e4aaa8ece2c9e789e2e3f150d7487b60bbc/packages/next/src/build/index.ts#L905
140
+ * https://github.com/vercel/next.js/blob/c0c75e4aaa8ece2c9e789e2e3f150d7487b60bbc/packages/next/src/build/index.ts#L1796
141
+ *
142
+ * Note that, if a custom webpack config is provided, Next.js will always disable build worker: https://github.com/vercel/next.js/blob/c0c75e4aaa8ece2c9e789e2e3f150d7487b60bbc/packages/next/src/build/index.ts#L1723
143
+ * We will not take that as an assumption. We already overwrite "nextConfig.experimental.webpackBuildWorker" to false in the Next.js plugin.
144
+ *
145
+ * Now all compiler instances are running in the same process, we can use a global variable to track stylex rules from different compilers.
146
+ *
147
+ * Back to "runCompiler". "runCompiler" accepts webpack configurations which is created by "getBaseWebpackConfig" function: https://github.com/vercel/next.js/blob/ad6907a8a37e930639af071203f4ce49a5d69ee5/packages/next/src/build/webpack-build/impl.ts#L128
148
+ *
149
+ * Inside "getBaseWebpackConfig" function, there is a "buildConfiguration" function: https://github.com/vercel/next.js/blob/ad6907a8a37e930639af071203f4ce49a5d69ee5/packages/next/src/build/webpack-config.ts#L2464
150
+ * Inside "buildConfiguration" function there is a curried "base" function: https://github.com/vercel/next.js/blob/c0c75e4aaa8ece2c9e789e2e3f150d7487b60bbc/packages/next/src/build/webpack/config/index.ts#L73
151
+ * Inside the "base" function, the compiler name is attached to the webpack configuration: https://github.com/vercel/next.js/blob/c0c75e4aaa8ece2c9e789e2e3f150d7487b60bbc/packages/next/src/build/webpack/config/blocks/base.ts#L24
152
+ */ compilation.hooks.finishModules.tap(PLUGIN_NAME, (modules)=>{
153
+ for (const mod of modules){
128
154
  if (mod.buildInfo && BUILD_INFO_STYLEX_KEY in mod.buildInfo) {
129
155
  const stylexBuildInfo = mod.buildInfo[BUILD_INFO_STYLEX_KEY];
130
156
  if (typeof stylexBuildInfo === 'object' && stylexBuildInfo != null && 'resourcePath' in stylexBuildInfo && 'stylexRules' in stylexBuildInfo && typeof stylexBuildInfo.resourcePath === 'string') {
@@ -132,58 +158,26 @@ class StyleXPlugin {
132
158
  this.stylexRules.set(stylexBuildInfo.resourcePath, stylexBuildInfo.stylexRules);
133
159
  }
134
160
  }
135
- });
161
+ }
136
162
  if (this.loaderOption.nextjsMode && this.loaderOption.nextjsAppRouterMode && isNextJsCompilerName(compiler.name)) {
137
- /**
138
- * Next.js call webpack compiler through "runCompiler": https://github.com/vercel/next.js/blob/c0c75e4aaa8ece2c9e789e2e3f150d7487b60bbc/packages/next/src/build/compiler.ts#L39
139
- *
140
- * The "runCompiler" funtion is invoked by "webpackBuildImpl" function: https://github.com/vercel/next.js/blob/ad6907a8a37e930639af071203f4ce49a5d69ee5/packages/next/src/build/webpack-build/impl.ts#L203
141
- *
142
- * The "webpackBuildImpl" function accepts "compilerName" parameter, and is invoked by "webpackBuild" function: https://github.com/vercel/next.js/blob/c0c75e4aaa8ece2c9e789e2e3f150d7487b60bbc/packages/next/src/build/webpack-build/index.ts#L124
143
- * When build worker is enabled, the "compilerName" parameter is set to either "client", "server" or "edge-server". If build worker is disabled,
144
- * the "compilerName" parameter is always "null".
145
- *
146
- * When build worker is disabled, the multi-stage build is managed by "webpackBuildImpl" function itself: https://github.com/vercel/next.js/blob/ad6907a8a37e930639af071203f4ce49a5d69ee5/packages/next/src/build/webpack-build/impl.ts#L203
147
- * It will first run "server" compiler, then "edge-server" compiler, and finally "client" compiler.
148
- *
149
- * The "webpackBuildImpl" function is invoked by "webpackBuild" function: https://github.com/vercel/next.js/blob/c0c75e4aaa8ece2c9e789e2e3f150d7487b60bbc/packages/next/src/build/webpack-build/index.ts#L124
150
- *
151
- * If build worker is enabled, the multi-stage build is managed by the build entrypoint, and the "client", "server" and "edge-server" compilerName
152
- * is passed to "webpackBuildImpl" through "webpackBuild" function:
153
- * https://github.com/vercel/next.js/blob/c0c75e4aaa8ece2c9e789e2e3f150d7487b60bbc/packages/next/src/build/index.ts#L905
154
- * https://github.com/vercel/next.js/blob/c0c75e4aaa8ece2c9e789e2e3f150d7487b60bbc/packages/next/src/build/index.ts#L1796
155
- *
156
- * Note that, if a custom webpack config is provided, Next.js will always disable build worker: https://github.com/vercel/next.js/blob/c0c75e4aaa8ece2c9e789e2e3f150d7487b60bbc/packages/next/src/build/index.ts#L1723
157
- * We will not take that as an assumption. We already overwrite "nextConfig.experimental.webpackBuildWorker" to false in the Next.js plugin.
158
- *
159
- * Now all compiler instances are running in the same process, we can use a global variable to track stylex rules from different compilers.
160
- *
161
- * Back to "runCompiler". "runCompiler" accepts webpack configurations which is created by "getBaseWebpackConfig" function: https://github.com/vercel/next.js/blob/ad6907a8a37e930639af071203f4ce49a5d69ee5/packages/next/src/build/webpack-build/impl.ts#L128
162
- *
163
- * Inside "getBaseWebpackConfig" function, there is a "buildConfiguration" function: https://github.com/vercel/next.js/blob/ad6907a8a37e930639af071203f4ce49a5d69ee5/packages/next/src/build/webpack-config.ts#L2464
164
- * Inside "buildConfiguration" function there is a curried "base" function: https://github.com/vercel/next.js/blob/c0c75e4aaa8ece2c9e789e2e3f150d7487b60bbc/packages/next/src/build/webpack/config/index.ts#L73
165
- * Inside the "base" function, the compiler name is attached to the webpack configuration: https://github.com/vercel/next.js/blob/c0c75e4aaa8ece2c9e789e2e3f150d7487b60bbc/packages/next/src/build/webpack/config/blocks/base.ts#L24
166
- */ if (compiler.name === NEXTJS_COMPILER_NAMES.server || compiler.name === NEXTJS_COMPILER_NAMES.edgeServer) {
167
- var _globalThis;
168
- ((_globalThis = globalThis).__stylex_nextjs_global_registry__ ?? (_globalThis.__stylex_nextjs_global_registry__ = new Map())).set(compiler.name, this.stylexRules);
169
- // we don't need to do anything more in server/edge compiler, no CSS generation is needed
170
- return;
171
- }
172
- // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- type safe
173
- if (compiler.name === NEXTJS_COMPILER_NAMES.client) {
174
- const globalRegistry = globalThis.__stylex_nextjs_global_registry__;
175
- if (globalRegistry != null) {
176
- // now we merge all collected rules from other compilers
177
- globalRegistry.forEach((rules)=>{
178
- rules.forEach((rule, resourcePath)=>{
179
- if (!this.stylexRules.has(resourcePath)) {
180
- this.stylexRules.set(resourcePath, rule);
181
- }
182
- });
163
+ var _globalThis;
164
+ (_globalThis = globalThis).__stylex_nextjs_global_registry__ ?? (_globalThis.__stylex_nextjs_global_registry__ = new Map());
165
+ globalThis.__stylex_nextjs_global_registry__.set(compiler.name, this.stylexRules);
166
+ }
167
+ });
168
+ compilation.hooks.processAssets.tapPromise({
169
+ name: PLUGIN_NAME,
170
+ stage: Compilation.PROCESS_ASSETS_STAGE_PRE_PROCESS
171
+ }, async (assets)=>{
172
+ if (this.loaderOption.nextjsMode && this.loaderOption.nextjsAppRouterMode && compiler.name === NEXTJS_COMPILER_NAMES.client) {
173
+ const globalRegistry = globalThis.__stylex_nextjs_global_registry__;
174
+ if (globalRegistry != null) {
175
+ // now we merge all collected rules from other compilers
176
+ globalRegistry.forEach((rules)=>{
177
+ rules.forEach((rule, resourcePath)=>{
178
+ this.stylexRules.set(resourcePath, rule);
183
179
  });
184
- }
185
- } else {
186
- compiler.name;
180
+ });
187
181
  }
188
182
  }
189
183
  const stylexCSS = getStyleXRules(this.stylexRules, this.useCSSLayers);
package/dist/stylex-loader.js CHANGED
@@ -4,6 +4,7 @@ var core = require('@babel/core');
4
4
  var stylexBabelPlugin = require('@stylexjs/babel-plugin');
5
5
  var guard = require('foxts/guard');
6
6
 
7
+ const LOADER_TRANSFORMED_FLAG = '/* [stylex-webpack] stylex-loader transformed */';
7
8
  require.resolve('./stylex.css');
8
9
  const VIRTUAL_STYLEX_CSS_DUMMY_IMPORT_PATH = require.resolve('./stylex-virtual.css');
9
10
  const BUILD_INFO_STYLEX_KEY = '~stylex_webpack_stylex_rules';
@@ -15,6 +16,11 @@ function stringifyRequest(loaderContext, request) {
15
16
  const PLUGIN_NAME = 'stylex';
16
17
  async function stylexLoader(inputCode, inputSourceMap) {
17
18
  const callback = this.async();
19
+ // bail out early if already transformed
20
+ // for some reason, a module might be passed to stylex-loader more than once, happened with Next.js App Router
21
+ if (inputCode.includes(LOADER_TRANSFORMED_FLAG)) {
22
+ return callback(null, inputCode, inputSourceMap);
23
+ }
18
24
  const { stylexImports, stylexOption } = this.getOptions();
19
25
  // bail out early if the input doesn't contain stylex imports
20
26
  if (!stylexImports.some((importName)=>inputCode.includes(importName))) {
@@ -56,7 +62,7 @@ async function stylexLoader(inputCode, inputSourceMap) {
56
62
  stylex: JSON.stringify(metadata.stylex) // color: #fff is not url safe, let's get through JSON.stringify
57
63
  });
58
64
  const virtualCssRequest = stringifyRequest(this, `${VIRTUAL_STYLEX_CSS_DUMMY_IMPORT_PATH}?${urlParams.toString()}`);
59
- const postfix = `\nimport ${virtualCssRequest};`;
65
+ const postfix = `\nimport ${virtualCssRequest};\n${LOADER_TRANSFORMED_FLAG}`;
60
66
  return callback(null, code + postfix, map ?? undefined);
61
67
  } catch (error) {
62
68
  return callback(error);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "stylex-webpack",
3
- "version": "0.4.5",
3
+ "version": "0.4.7",
4
4
  "description": "The another Webpack Plugin for Facebook's StyleX",
5
5
  "homepage": "https://github.com/SukkaW/style9-webpack#readme",
6
6
  "repository": {
@@ -60,7 +60,7 @@
60
60
  "@eslint-sukka/node": "^8.0.2",
61
61
  "@rollup/plugin-json": "^6.1.0",
62
62
  "@swc-node/register": "^1.11.1",
63
- "@swc/core": "^1.15.0",
63
+ "@swc/core": "^1.15.1",
64
64
  "@types/babel__core": "^7.20.5",
65
65
  "@types/loader-utils": "^3.0.0",
66
66
  "@types/mocha": "^10.0.10",
@@ -79,7 +79,7 @@
79
79
  "next": "^15.5.6",
80
80
  "postcss": "^8.5.6",
81
81
  "premove": "^4.0.0",
82
- "rollup": "^4.52.5",
82
+ "rollup": "^4.53.1",
83
83
  "rollup-plugin-copy": "^3.5.0",
84
84
  "rollup-plugin-dts": "^6.2.3",
85
85
  "rollup-plugin-swc3": "^0.12.1",
@@ -96,6 +96,7 @@
96
96
  "eslint>chalk": "npm:picocolors@^1.1.1"
97
97
  },
98
98
  "onlyBuiltDependencies": [
99
+ "@swc/core",
99
100
  "oxc-resolver"
100
101
  ]
101
102
  }