@stylexswc/webpack-plugin 0.17.1 → 0.18.0-rc.1
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.
- package/README.md +66 -10
- package/dist/index.d.ts +6 -26
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +74 -182
- package/dist/stylex.css +10 -0
- package/package.json +31 -31
- package/dist/constants.d.ts +0 -12
- package/dist/constants.d.ts.map +0 -1
- package/dist/constants.js +0 -14
- package/dist/shared.d.ts +0 -2
- package/dist/shared.d.ts.map +0 -1
- package/dist/shared.js +0 -15
- package/dist/stylex-loader.d.ts +0 -5
- package/dist/stylex-loader.d.ts.map +0 -1
- package/dist/stylex-loader.js +0 -77
- package/dist/stylex-virtual-css-loader.d.ts +0 -4
- package/dist/stylex-virtual-css-loader.d.ts.map +0 -1
- package/dist/stylex-virtual-css-loader.js +0 -41
- package/dist/stylex.virtual.css +0 -9
- package/dist/types.d.ts +0 -100
- package/dist/types.d.ts.map +0 -1
- package/dist/types.js +0 -2
- package/dist/utils.d.ts +0 -7
- package/dist/utils.d.ts.map +0 -1
- package/dist/utils.js +0 -24
package/README.md
CHANGED
|
@@ -10,13 +10,14 @@ with
|
|
|
10
10
|
a Rust implementation of the StyleX transform, instead of the official Babel
|
|
11
11
|
plugin. Your StyleX code stays exactly the same — only the build step changes,
|
|
12
12
|
with per-file transforms 2x to 5x faster than Babel
|
|
13
|
-
([performance](https://github.com/Dwlad90/stylex-swc-plugin#performance)).
|
|
14
|
-
|
|
15
|
-
|
|
13
|
+
([performance](https://github.com/Dwlad90/stylex-swc-plugin#performance)). The
|
|
14
|
+
plugin transforms your source files, collects the generated rules, and extracts
|
|
15
|
+
them into a dedicated CSS chunk.
|
|
16
16
|
|
|
17
17
|
This is a community project and is not affiliated with Meta. It tracks the
|
|
18
18
|
official StyleX releases
|
|
19
19
|
<!-- stylex-compatibility:start -->(currently compatible with StyleX v0.19.0)<!-- stylex-compatibility:end -->
|
|
20
|
+
|
|
20
21
|
and requires Node.js 20 or newer. For Next.js projects, use
|
|
21
22
|
[`@stylexswc/nextjs-plugin`](https://www.npmjs.com/package/@stylexswc/nextjs-plugin)
|
|
22
23
|
instead — it wires this plugin into the Next.js build for you.
|
|
@@ -63,6 +64,38 @@ const config = (env, argv) => ({
|
|
|
63
64
|
module.exports = config;
|
|
64
65
|
```
|
|
65
66
|
|
|
67
|
+
Then import the carrier stylesheet **once** at the entry point of your app (e.g.
|
|
68
|
+
`index.js`, `App.tsx`):
|
|
69
|
+
|
|
70
|
+
```js
|
|
71
|
+
import '@stylexswc/webpack-plugin/stylex.css';
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
The plugin replaces this asset's content with the extracted StyleX CSS during
|
|
75
|
+
the build. Like a regular CSS file, it must flow through your CSS pipeline, so a
|
|
76
|
+
`css-loader` + `MiniCssExtractPlugin.loader` rule (or webpack's built-in CSS
|
|
77
|
+
support) has to cover `.css` files.
|
|
78
|
+
|
|
79
|
+
The carrier import is a **recommendation, not a hard requirement**. The plugin
|
|
80
|
+
also appends tiny per-module CSS imports to every StyleX module, so any part of
|
|
81
|
+
the bundle that renders a StyleX component pulls the stylesheet in on its own —
|
|
82
|
+
most builds emit correct CSS even without the carrier. What the carrier adds is
|
|
83
|
+
a guarantee that doesn't depend on your module graph: the stylesheet is always
|
|
84
|
+
present and loaded with the entrypoint. That matters when something consumes
|
|
85
|
+
StyleX **output** without rendering a StyleX **component** — plain CSS reading
|
|
86
|
+
`defineVars` custom properties (`var(--x…)`), or injected markup carrying
|
|
87
|
+
StyleX class names. If styles would actually be lost (no CSS asset exists to
|
|
88
|
+
receive them at all), the plugin raises a compilation warning; it stays silent
|
|
89
|
+
as long as the output is correct, carrier or not.
|
|
90
|
+
|
|
91
|
+
> [!IMPORTANT] **Migrating from 0.17.x**: version 0.18.0 reworks the CSS
|
|
92
|
+
> extraction architecture. The CSS is no longer injected through
|
|
93
|
+
> auto-generated `stylex.virtual.css` imports — add the
|
|
94
|
+
> `import '@stylexswc/webpack-plugin/stylex.css';` carrier import to your app
|
|
95
|
+
> entrypoint (recommended; see above for when you can skip it). Paths embedded
|
|
96
|
+
> in module identifiers are now relative to `compiler.context`, which changes
|
|
97
|
+
> chunk hashes once and makes builds reproducible across machines.
|
|
98
|
+
|
|
66
99
|
## Plugin Options
|
|
67
100
|
|
|
68
101
|
### Basic Options
|
|
@@ -75,8 +108,7 @@ module.exports = config;
|
|
|
75
108
|
the standard options, see the
|
|
76
109
|
[official StyleX documentation](https://stylexjs.com/docs/api/configuration/babel-plugin/).
|
|
77
110
|
|
|
78
|
-
> [!NOTE]
|
|
79
|
-
> The `include` and `exclude` options are exclusive to the Rust compiler
|
|
111
|
+
> [!NOTE] The `include` and `exclude` options are exclusive to the Rust compiler
|
|
80
112
|
> and are not available in the official StyleX Babel plugin.
|
|
81
113
|
|
|
82
114
|
##### `rsOptions.include`
|
|
@@ -175,6 +207,30 @@ new StylexPlugin({
|
|
|
175
207
|
});
|
|
176
208
|
```
|
|
177
209
|
|
|
210
|
+
#### `carrierCss`
|
|
211
|
+
|
|
212
|
+
Path to a custom carrier stylesheet that receives the extracted StyleX CSS — the
|
|
213
|
+
file you import once at your app entrypoint. Absolute, or relative to
|
|
214
|
+
`compiler.context`. Replaces the default `@stylexswc/webpack-plugin/stylex.css`
|
|
215
|
+
carrier: useful when another file named `stylex.css` in your project would
|
|
216
|
+
collide with the default filename pattern, or when you want the carrier to live
|
|
217
|
+
in your own source tree.
|
|
218
|
+
|
|
219
|
+
```js
|
|
220
|
+
new StylexPlugin({
|
|
221
|
+
carrierCss: './src/styles/stylex-carrier.css',
|
|
222
|
+
});
|
|
223
|
+
```
|
|
224
|
+
|
|
225
|
+
```js
|
|
226
|
+
// src/index.js
|
|
227
|
+
import './styles/stylex-carrier.css';
|
|
228
|
+
```
|
|
229
|
+
|
|
230
|
+
If styles get extracted but no CSS asset is emitted to receive them (e.g. a
|
|
231
|
+
custom `cacheGroup` renamed the chunk), the plugin raises a compilation
|
|
232
|
+
warning instead of silently dropping the CSS.
|
|
233
|
+
|
|
178
234
|
### Advanced Options
|
|
179
235
|
|
|
180
236
|
#### `transformCss`
|
|
@@ -202,17 +258,17 @@ new StylexPlugin({
|
|
|
202
258
|
|
|
203
259
|
- Type: `CacheGroupOptions` (webpack cache group configuration)
|
|
204
260
|
- Optional
|
|
205
|
-
- Description:
|
|
261
|
+
- Description: Extends the default webpack cache group used for StyleX CSS
|
|
206
262
|
extraction. By default the plugin creates a dedicated cache group named
|
|
207
|
-
`
|
|
208
|
-
options.
|
|
263
|
+
`_stylex-webpack-generated`. Use this to customize chunk naming, priority, or
|
|
264
|
+
other split chunks options. Omitted fields retain the required defaults.
|
|
209
265
|
|
|
210
266
|
Default cache group configuration:
|
|
211
267
|
|
|
212
268
|
```js
|
|
213
269
|
{
|
|
214
|
-
name: '
|
|
215
|
-
test:
|
|
270
|
+
name: '_stylex-webpack-generated',
|
|
271
|
+
test: /<packaged carrier path>|stylex-virtual\.css/,
|
|
216
272
|
type: 'css/mini-extract',
|
|
217
273
|
chunks: 'all',
|
|
218
274
|
enforce: true,
|
package/dist/index.d.ts
CHANGED
|
@@ -1,30 +1,10 @@
|
|
|
1
|
-
import { DEFAULT_STYLEX_PACKAGES,
|
|
2
|
-
import type { TransformedOptions } from '@stylexswc/rs-compiler';
|
|
1
|
+
import { DEFAULT_STYLEX_PACKAGES, StyleXPluginCore, VIRTUAL_CSS_PATTERN, buildVirtualCssPattern, stylexLoaderPath, stylexVirtualCssLoaderPath } from '@stylexswc/plugin-shared';
|
|
3
2
|
import type webpack from 'webpack';
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
declare const stylexLoaderPath: string;
|
|
7
|
-
declare const stylexVirtualLoaderPath: string;
|
|
8
|
-
export type RegisterStyleXRules = (_resourcePath: string, _stylexRules: StyleXRule[]) => void;
|
|
9
|
-
export default class StyleXPlugin {
|
|
10
|
-
stylexRules: Map<string, readonly StyleXRule[]>;
|
|
11
|
-
transformedOptions: TransformedOptions;
|
|
12
|
-
loaderOption: StyleXWebpackLoaderOptions;
|
|
13
|
-
cacheGroup?: CacheGroupOptions;
|
|
14
|
-
transformCss: CSSTransformer;
|
|
15
|
-
loaderOrder: StyleXPluginOption['loaderOrder'];
|
|
16
|
-
stylexPackages: string[];
|
|
17
|
-
constructor({ stylexImports, useCSSLayers, rsOptions, nextjsMode, transformCss, extractCSS, loaderOrder, cacheGroup, stylexPackages, }?: StyleXPluginOption);
|
|
18
|
-
/**
|
|
19
|
-
* Excludes node_modules by default, matching the rspack plugin, so
|
|
20
|
-
* unrelated dependencies whose source happens to mention a StyleX import
|
|
21
|
-
* string aren't parsed and transformed unless explicitly allowlisted.
|
|
22
|
-
*/
|
|
23
|
-
shouldProcessFile(resourcePath: string): boolean;
|
|
3
|
+
export declare const STYLEX_CHUNK_NAME = "_stylex-webpack-generated";
|
|
4
|
+
export default class StyleXPlugin extends StyleXPluginCore {
|
|
24
5
|
apply(compiler: webpack.Compiler): void;
|
|
25
6
|
}
|
|
26
|
-
export {
|
|
27
|
-
export {
|
|
28
|
-
export {
|
|
29
|
-
export type { StyleXPluginOption, CacheGroupOptions } from './types';
|
|
7
|
+
export { StyleXPlugin, VIRTUAL_CSS_PATTERN, DEFAULT_STYLEX_PACKAGES, buildVirtualCssPattern };
|
|
8
|
+
export { stylexLoaderPath as loader, stylexVirtualCssLoaderPath as virtualLoader };
|
|
9
|
+
export type { CacheGroupOptions, RegisterStyleXRules, StyleXPluginOption, } from '@stylexswc/plugin-shared';
|
|
30
10
|
//# sourceMappingURL=index.d.ts.map
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAEA,OAAO,EACL,uBAAuB,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAEA,OAAO,EACL,uBAAuB,EAGvB,gBAAgB,EAChB,mBAAmB,EAEnB,sBAAsB,EACtB,gBAAgB,EAChB,0BAA0B,EAC3B,MAAM,0BAA0B,CAAC;AAElC,OAAO,KAAK,OAAO,MAAM,SAAS,CAAC;AAEnC,eAAO,MAAM,iBAAiB,8BAA8B,CAAC;AAK7D,MAAM,CAAC,OAAO,OAAO,YAAa,SAAQ,gBAAgB;IACxD,KAAK,CAAC,QAAQ,EAAE,OAAO,CAAC,QAAQ;CA2GjC;AAED,OAAO,EAAE,YAAY,EAAE,mBAAmB,EAAE,uBAAuB,EAAE,sBAAsB,EAAE,CAAC;AAI9F,OAAO,EAAE,gBAAgB,IAAI,MAAM,EAAE,0BAA0B,IAAI,aAAa,EAAE,CAAC;AAEnF,YAAY,EACV,iBAAiB,EACjB,mBAAmB,EACnB,kBAAkB,GACnB,MAAM,0BAA0B,CAAC"}
|
package/dist/index.js
CHANGED
|
@@ -3,226 +3,118 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
3
3
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
4
|
};
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
exports.virtualLoader = exports.loader = exports.
|
|
7
|
-
const babel_plugin_1 = __importDefault(require("@stylexjs/babel-plugin"));
|
|
6
|
+
exports.virtualLoader = exports.loader = exports.buildVirtualCssPattern = exports.DEFAULT_STYLEX_PACKAGES = exports.VIRTUAL_CSS_PATTERN = exports.StyleXPlugin = exports.STYLEX_CHUNK_NAME = void 0;
|
|
8
7
|
const path_1 = __importDefault(require("path"));
|
|
9
|
-
const
|
|
10
|
-
Object.defineProperty(exports, "DEFAULT_STYLEX_PACKAGES", { enumerable: true, get: function () { return
|
|
11
|
-
Object.defineProperty(exports, "
|
|
12
|
-
Object.defineProperty(exports, "
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
catch (error) {
|
|
20
|
-
const isModuleNotFound = error instanceof Error && 'code' in error && error.code === 'MODULE_NOT_FOUND';
|
|
21
|
-
if (!isModuleNotFound) {
|
|
22
|
-
throw error;
|
|
23
|
-
}
|
|
24
|
-
// Loaders resolve as `.ts` only when the plugin runs from source (e.g. vitest);
|
|
25
|
-
// published dist builds always resolve above
|
|
26
|
-
return require.resolve(`./${loaderName}.ts`);
|
|
27
|
-
}
|
|
28
|
-
}
|
|
29
|
-
const stylexLoaderPath = resolveLoaderPath('stylex-loader');
|
|
30
|
-
exports.loader = stylexLoaderPath;
|
|
31
|
-
const stylexVirtualLoaderPath = resolveLoaderPath('stylex-virtual-css-loader');
|
|
32
|
-
exports.virtualLoader = stylexVirtualLoaderPath;
|
|
33
|
-
const getStyleXRules = (stylexRules, transformedOptions) => {
|
|
34
|
-
if (stylexRules.size === 0) {
|
|
35
|
-
return null;
|
|
36
|
-
}
|
|
37
|
-
// Take styles for the modules that were included in the last compilation.
|
|
38
|
-
const allRules = Array.from(stylexRules.values()).flat();
|
|
39
|
-
return babel_plugin_1.default.processStylexRules(allRules, transformedOptions);
|
|
40
|
-
};
|
|
41
|
-
const identityTransform = css => css;
|
|
42
|
-
class StyleXPlugin {
|
|
43
|
-
stylexRules = new Map();
|
|
44
|
-
transformedOptions;
|
|
45
|
-
loaderOption;
|
|
46
|
-
cacheGroup;
|
|
47
|
-
transformCss;
|
|
48
|
-
loaderOrder;
|
|
49
|
-
stylexPackages;
|
|
50
|
-
constructor({ stylexImports = ['stylex', '@stylexjs/stylex'], useCSSLayers = false, rsOptions = {}, nextjsMode = false, transformCss = identityTransform, extractCSS = true, loaderOrder = 'first', cacheGroup, stylexPackages = constants_1.DEFAULT_STYLEX_PACKAGES, } = {}) {
|
|
51
|
-
this.transformedOptions = {
|
|
52
|
-
useLayers: useCSSLayers,
|
|
53
|
-
legacyDisableLayers: rsOptions.legacyDisableLayers,
|
|
54
|
-
enableLTRRTLComments: rsOptions.enableLTRRTLComments,
|
|
55
|
-
};
|
|
56
|
-
this.loaderOption = {
|
|
57
|
-
stylexImports,
|
|
58
|
-
rsOptions: {
|
|
59
|
-
dev: constants_1.IS_DEV_ENV,
|
|
60
|
-
enableFontSizePxToRem: true,
|
|
61
|
-
runtimeInjection: false,
|
|
62
|
-
treeshakeCompensation: true,
|
|
63
|
-
importSources: stylexImports,
|
|
64
|
-
injectStylexSideEffects: loaderOrder !== 'last',
|
|
65
|
-
...rsOptions,
|
|
66
|
-
},
|
|
67
|
-
nextjsMode,
|
|
68
|
-
extractCSS,
|
|
69
|
-
};
|
|
70
|
-
this.transformCss = transformCss;
|
|
71
|
-
this.loaderOrder = loaderOrder;
|
|
72
|
-
this.cacheGroup = cacheGroup;
|
|
73
|
-
this.stylexPackages = stylexPackages;
|
|
74
|
-
}
|
|
75
|
-
/**
|
|
76
|
-
* Excludes node_modules by default, matching the rspack plugin, so
|
|
77
|
-
* unrelated dependencies whose source happens to mention a StyleX import
|
|
78
|
-
* string aren't parsed and transformed unless explicitly allowlisted.
|
|
79
|
-
*/
|
|
80
|
-
shouldProcessFile(resourcePath) {
|
|
81
|
-
if (!resourcePath) {
|
|
82
|
-
return false;
|
|
83
|
-
}
|
|
84
|
-
const nodeModulesSegment = `${path_1.default.sep}node_modules${path_1.default.sep}`;
|
|
85
|
-
if (resourcePath.includes(nodeModulesSegment)) {
|
|
86
|
-
if (!(0, shared_1.isAllowlistedPackage)(resourcePath, this.stylexPackages)) {
|
|
87
|
-
return false;
|
|
88
|
-
}
|
|
89
|
-
}
|
|
90
|
-
return (0, rs_compiler_1.shouldTransformFile)(resourcePath, this.loaderOption.rsOptions?.include, this.loaderOption.rsOptions?.exclude);
|
|
91
|
-
}
|
|
8
|
+
const plugin_shared_1 = require("@stylexswc/plugin-shared");
|
|
9
|
+
Object.defineProperty(exports, "DEFAULT_STYLEX_PACKAGES", { enumerable: true, get: function () { return plugin_shared_1.DEFAULT_STYLEX_PACKAGES; } });
|
|
10
|
+
Object.defineProperty(exports, "VIRTUAL_CSS_PATTERN", { enumerable: true, get: function () { return plugin_shared_1.VIRTUAL_CSS_PATTERN; } });
|
|
11
|
+
Object.defineProperty(exports, "buildVirtualCssPattern", { enumerable: true, get: function () { return plugin_shared_1.buildVirtualCssPattern; } });
|
|
12
|
+
Object.defineProperty(exports, "loader", { enumerable: true, get: function () { return plugin_shared_1.stylexLoaderPath; } });
|
|
13
|
+
Object.defineProperty(exports, "virtualLoader", { enumerable: true, get: function () { return plugin_shared_1.stylexVirtualCssLoaderPath; } });
|
|
14
|
+
exports.STYLEX_CHUNK_NAME = '_stylex-webpack-generated';
|
|
15
|
+
const PACKAGE_NAME = '@stylexswc/webpack-plugin';
|
|
16
|
+
const DEFAULT_CARRIER_PATH = require.resolve('./stylex.css');
|
|
17
|
+
class StyleXPlugin extends plugin_shared_1.StyleXPluginCore {
|
|
92
18
|
apply(compiler) {
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
compiler.
|
|
101
|
-
|
|
102
|
-
name: constants_1.STYLEX_CHUNK_NAME,
|
|
103
|
-
test: constants_1.VIRTUAL_CSS_PATTERN,
|
|
104
|
-
type: 'css/mini-extract',
|
|
105
|
-
chunks: 'all',
|
|
106
|
-
enforce: true,
|
|
107
|
-
};
|
|
108
|
-
// stylex-loader adds virtual css import (which triggers virtual-loader)
|
|
109
|
-
// This prevents "stylex.virtual.css" files from being tree shaken by forcing
|
|
110
|
-
// "sideEffects" setting.
|
|
111
|
-
compiler.hooks.normalModuleFactory.tap(constants_1.PLUGIN_NAME, nmf => {
|
|
112
|
-
nmf.hooks.createModule.tap(constants_1.PLUGIN_NAME, createData => {
|
|
19
|
+
this.resolveCarrier(compiler.context, DEFAULT_CARRIER_PATH);
|
|
20
|
+
const chunkName = this.getChunkName(exports.STYLEX_CHUNK_NAME);
|
|
21
|
+
this.assertAndInstallCacheGroup(compiler.options.optimization, PACKAGE_NAME, chunkName);
|
|
22
|
+
this.resolveDevOption(compiler.options.mode);
|
|
23
|
+
const carrierPattern = this.getCarrierPattern();
|
|
24
|
+
// The carrier stylesheet has no imports of its own, so force
|
|
25
|
+
// "sideEffects" to keep it from being tree shaken out of the graph.
|
|
26
|
+
compiler.hooks.normalModuleFactory.tap(plugin_shared_1.PLUGIN_NAME, nmf => {
|
|
27
|
+
nmf.hooks.createModule.tap(plugin_shared_1.PLUGIN_NAME, createData => {
|
|
113
28
|
const modPath = createData.matchResource ?? createData.resourceResolveData?.path;
|
|
114
|
-
if (modPath ===
|
|
29
|
+
if (typeof modPath === 'string' && carrierPattern.test(modPath)) {
|
|
115
30
|
createData.settings ??= {};
|
|
116
31
|
createData.settings.sideEffects = true;
|
|
117
32
|
}
|
|
118
33
|
});
|
|
119
34
|
});
|
|
120
35
|
const { Compilation, NormalModule, sources } = compiler.webpack;
|
|
121
|
-
const { RawSource
|
|
122
|
-
compiler.hooks.make.tap(
|
|
36
|
+
const { RawSource } = sources;
|
|
37
|
+
compiler.hooks.make.tap(plugin_shared_1.PLUGIN_NAME, compilation => {
|
|
38
|
+
// Plugin options change the generated CSS without any module changing;
|
|
39
|
+
// mix them into chunk hashes so long-term caching notices.
|
|
40
|
+
compilation.hooks.chunkHash.tap(plugin_shared_1.PLUGIN_NAME, (_chunk, hash) => {
|
|
41
|
+
hash.update(this.buildChunkHashMeta(PACKAGE_NAME));
|
|
42
|
+
});
|
|
123
43
|
// Apply loader to JS modules.
|
|
124
|
-
NormalModule.getCompilationHooks(compilation).loader.tap(
|
|
125
|
-
|
|
126
|
-
|
|
44
|
+
NormalModule.getCompilationHooks(compilation).loader.tap(plugin_shared_1.PLUGIN_NAME, (_loaderContext, mod) => {
|
|
45
|
+
// `resource`/`matchResource` may carry a resource query
|
|
46
|
+
// (`Button.tsx?raw`) that would defeat the extension checks below
|
|
47
|
+
const modResource = (mod.matchResource || mod.resource).split('?', 1)[0] ?? '';
|
|
48
|
+
const extname = path_1.default.extname(modResource);
|
|
49
|
+
if (plugin_shared_1.INCLUDE_REGEXP.test(extname)) {
|
|
127
50
|
// Add path filtering check, including the node_modules allowlist
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
return; // Skip adding loader if filtered out
|
|
131
|
-
}
|
|
132
|
-
else {
|
|
133
|
-
this.loaderOption.rsOptions.include = undefined;
|
|
134
|
-
this.loaderOption.rsOptions.exclude = undefined;
|
|
51
|
+
if (!this.shouldProcessFile(mod.resource.split('?', 1)[0] ?? '')) {
|
|
52
|
+
return;
|
|
135
53
|
}
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
this.stylexRules.set(resourcePath, stylexRules);
|
|
139
|
-
},
|
|
140
|
-
};
|
|
54
|
+
// Webpack runs loaders in reverse order, so `push` makes the
|
|
55
|
+
// stylex-loader run before anything else ('first').
|
|
141
56
|
const insertMethod = this.loaderOrder === 'last' ? 'unshift' : 'push';
|
|
142
57
|
mod.loaders[insertMethod]({
|
|
143
|
-
loader: stylexLoaderPath,
|
|
58
|
+
loader: plugin_shared_1.stylexLoaderPath,
|
|
144
59
|
options: this.loaderOption,
|
|
145
60
|
ident: null,
|
|
146
61
|
type: null,
|
|
147
62
|
});
|
|
148
63
|
}
|
|
149
|
-
if (
|
|
64
|
+
else if (plugin_shared_1.VIRTUAL_STYLEX_CSS_DUMMY_IMPORT_PATTERN.test(modResource)) {
|
|
150
65
|
mod.loaders.push({
|
|
151
|
-
loader:
|
|
66
|
+
loader: plugin_shared_1.stylexVirtualCssLoaderPath,
|
|
152
67
|
options: {},
|
|
153
68
|
ident: null,
|
|
154
69
|
type: null,
|
|
155
70
|
});
|
|
156
71
|
}
|
|
157
72
|
});
|
|
73
|
+
// webpack rule transport: buildInfo written by the stylex-loader is
|
|
74
|
+
// restored from the filesystem cache together with the module, so this
|
|
75
|
+
// also sees rules of modules whose loaders didn't re-run.
|
|
76
|
+
compilation.hooks.finishModules.tap(plugin_shared_1.PLUGIN_NAME, modules => {
|
|
77
|
+
this.collectFromBuildInfo(modules);
|
|
78
|
+
this.publishNextjsRegistry(compiler.context, compiler.name);
|
|
79
|
+
});
|
|
158
80
|
compilation.hooks.processAssets.tapPromise({
|
|
159
|
-
name:
|
|
81
|
+
name: plugin_shared_1.PLUGIN_NAME,
|
|
160
82
|
stage: Compilation.PROCESS_ASSETS_STAGE_PRE_PROCESS,
|
|
161
83
|
}, async (assets) => {
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
?.split('?')
|
|
180
|
-
.pop();
|
|
181
|
-
if (!stringifiedStylexRule) {
|
|
182
|
-
continue;
|
|
183
|
-
}
|
|
184
|
-
const params = new URLSearchParams(stringifiedStylexRule);
|
|
185
|
-
const stylex = params.get('stylex');
|
|
186
|
-
if (stylex != null) {
|
|
187
|
-
this.stylexRules.set(cssModule.identifier(), JSON.parse(stylex));
|
|
188
|
-
}
|
|
189
|
-
}
|
|
190
|
-
}
|
|
191
|
-
}
|
|
192
|
-
// Let's find the css file that belongs to the stylex chunk
|
|
193
|
-
const cssAssetDetails = Object.entries(assets).filter(([assetName]) => stylexChunk.files.has(assetName) && assetName.endsWith('.css'));
|
|
194
|
-
if (cssAssetDetails.length === 0) {
|
|
195
|
-
return;
|
|
196
|
-
}
|
|
197
|
-
if (cssAssetDetails.length > 1) {
|
|
198
|
-
console.warn('[stylex-webpack] Multiple CSS assets found for the stylex chunk. This should not happen. Please report this issue.');
|
|
199
|
-
}
|
|
200
|
-
const stylexAsset = cssAssetDetails[0];
|
|
201
|
-
const stylexCSS = getStyleXRules(this.stylexRules, this.transformedOptions);
|
|
202
|
-
if (stylexCSS == null) {
|
|
203
|
-
return;
|
|
204
|
-
}
|
|
205
|
-
const cssAsset = stylexAsset?.[0];
|
|
206
|
-
const finalCss = await this.transformCss(stylexCSS, cssAsset);
|
|
207
|
-
if (cssAsset) {
|
|
208
|
-
compilation.updateAsset(cssAsset, source => new ConcatSource(source, new RawSource(finalCss)));
|
|
209
|
-
}
|
|
84
|
+
this.mergeNextjsRegistry(compiler.context, compiler.name);
|
|
85
|
+
await this.finalizeStylexAsset({
|
|
86
|
+
assets,
|
|
87
|
+
chunkName,
|
|
88
|
+
compilerName: compiler.name,
|
|
89
|
+
carrierHint: this.carrierCss
|
|
90
|
+
? `import '${this.carrierCss}'`
|
|
91
|
+
: `import '${PACKAGE_NAME}/stylex.css'`,
|
|
92
|
+
getNamedChunk: name => compilation.namedChunks.get(name),
|
|
93
|
+
createSource: css => new RawSource(css),
|
|
94
|
+
updateAsset: (name, source) => compilation.updateAsset(name, () => source, {
|
|
95
|
+
minimized: false,
|
|
96
|
+
}),
|
|
97
|
+
// compilation warnings surface in stats and the dev overlay,
|
|
98
|
+
// unlike the infrastructure logger
|
|
99
|
+
warn: message => compilation.warnings.push(new compiler.webpack.WebpackError(`${PACKAGE_NAME}: ${message}`)),
|
|
100
|
+
});
|
|
210
101
|
});
|
|
211
102
|
});
|
|
212
103
|
}
|
|
213
104
|
}
|
|
214
105
|
exports.default = StyleXPlugin;
|
|
215
|
-
|
|
216
|
-
Object.defineProperty(exports, "isAllowlistedPackage", { enumerable: true, get: function () { return shared_2.isAllowlistedPackage; } });
|
|
106
|
+
exports.StyleXPlugin = StyleXPlugin;
|
|
217
107
|
// Skipped when `module.exports` is an ES module namespace (frozen, cannot be
|
|
218
108
|
// reassigned) — the ESM exports above provide the same surface there
|
|
219
109
|
if (typeof module !== 'undefined' &&
|
|
220
110
|
Object.prototype.toString.call(module.exports) !== '[object Module]') {
|
|
221
111
|
module.exports = StyleXPlugin;
|
|
222
112
|
module.exports.default = StyleXPlugin;
|
|
223
|
-
module.exports.
|
|
224
|
-
module.exports.
|
|
225
|
-
module.exports.
|
|
226
|
-
module.exports.
|
|
227
|
-
module.exports.
|
|
113
|
+
module.exports.StyleXPlugin = StyleXPlugin;
|
|
114
|
+
module.exports.loader = plugin_shared_1.stylexLoaderPath;
|
|
115
|
+
module.exports.virtualLoader = plugin_shared_1.stylexVirtualCssLoaderPath;
|
|
116
|
+
module.exports.VIRTUAL_CSS_PATTERN = plugin_shared_1.VIRTUAL_CSS_PATTERN;
|
|
117
|
+
module.exports.STYLEX_CHUNK_NAME = exports.STYLEX_CHUNK_NAME;
|
|
118
|
+
module.exports.DEFAULT_STYLEX_PACKAGES = plugin_shared_1.DEFAULT_STYLEX_PACKAGES;
|
|
119
|
+
module.exports.buildVirtualCssPattern = plugin_shared_1.buildVirtualCssPattern;
|
|
228
120
|
}
|
package/dist/stylex.css
ADDED
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* StyleX carrier stylesheet - @stylexswc/webpack-plugin
|
|
3
|
+
*
|
|
4
|
+
* Import this file once at your application entrypoint:
|
|
5
|
+
*
|
|
6
|
+
* import '@stylexswc/webpack-plugin/stylex.css';
|
|
7
|
+
*
|
|
8
|
+
* During the build the plugin replaces the emitted asset content with the
|
|
9
|
+
* extracted StyleX CSS.
|
|
10
|
+
*/
|
package/package.json
CHANGED
|
@@ -1,50 +1,40 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@stylexswc/webpack-plugin",
|
|
3
3
|
"description": "StyleX plugin for webpack powered by a Rust NAPI-RS/SWC compiler. Fast StyleX transforms and CSS extraction without Babel.",
|
|
4
|
-
"version": "0.
|
|
5
|
-
"
|
|
6
|
-
"license": "MIT",
|
|
7
|
-
"sideEffects": false,
|
|
8
|
-
"exports": {
|
|
9
|
-
".": {
|
|
10
|
-
"types": "./dist/index.d.ts",
|
|
11
|
-
"import": "./dist/index.js",
|
|
12
|
-
"require": "./dist/index.js"
|
|
13
|
-
},
|
|
14
|
-
"./shared": {
|
|
15
|
-
"types": "./dist/shared.d.ts",
|
|
16
|
-
"import": "./dist/shared.js",
|
|
17
|
-
"require": "./dist/shared.js"
|
|
18
|
-
},
|
|
19
|
-
"./package.json": "./package.json"
|
|
20
|
-
},
|
|
21
|
-
"files": [
|
|
22
|
-
"dist"
|
|
23
|
-
],
|
|
24
|
-
"publishConfig": {
|
|
25
|
-
"registry": "https://registry.npmjs.org/",
|
|
26
|
-
"access": "public"
|
|
27
|
-
},
|
|
4
|
+
"version": "0.18.0-rc.1",
|
|
5
|
+
"bugs": "https://github.com/Dwlad90/stylex-swc-plugin/issues",
|
|
28
6
|
"config": {
|
|
29
7
|
"scripty": {
|
|
30
8
|
"path": "../../scripts/packages"
|
|
31
9
|
}
|
|
32
10
|
},
|
|
33
11
|
"dependencies": {
|
|
34
|
-
"@
|
|
35
|
-
"@stylexswc/rs-compiler": "0.17.1",
|
|
36
|
-
"loader-utils": "^3.3.1"
|
|
12
|
+
"@stylexswc/plugin-shared": "0.18.0-rc.1"
|
|
37
13
|
},
|
|
38
14
|
"devDependencies": {
|
|
39
|
-
"@
|
|
40
|
-
"@
|
|
41
|
-
"@
|
|
15
|
+
"@stylexjs/babel-plugin": "^0.19.0",
|
|
16
|
+
"@stylexjs/stylex": "^0.19.0",
|
|
17
|
+
"@stylexswc/eslint-config": "0.18.0-rc.1",
|
|
18
|
+
"@stylexswc/typescript-config": "0.18.0-rc.1",
|
|
42
19
|
"@types/node": "^26.1.0",
|
|
20
|
+
"css-loader": "^7.1.2",
|
|
21
|
+
"memfs": "^4.17.0",
|
|
43
22
|
"mini-css-extract-plugin": "^2.10.2",
|
|
44
23
|
"vitest": "^4.1.9",
|
|
45
24
|
"webpack": "^5.108.3"
|
|
46
25
|
},
|
|
47
|
-
"
|
|
26
|
+
"exports": {
|
|
27
|
+
".": {
|
|
28
|
+
"types": "./dist/index.d.ts",
|
|
29
|
+
"import": "./dist/index.js",
|
|
30
|
+
"require": "./dist/index.js"
|
|
31
|
+
},
|
|
32
|
+
"./stylex.css": "./dist/stylex.css",
|
|
33
|
+
"./package.json": "./package.json"
|
|
34
|
+
},
|
|
35
|
+
"files": [
|
|
36
|
+
"dist"
|
|
37
|
+
],
|
|
48
38
|
"homepage": "https://github.com/Dwlad90/stylex-swc-plugin/tree/develop/packages/webpack-plugin#readme",
|
|
49
39
|
"keywords": [
|
|
50
40
|
"atomic-css",
|
|
@@ -58,12 +48,21 @@
|
|
|
58
48
|
"webpack",
|
|
59
49
|
"webpack-plugin"
|
|
60
50
|
],
|
|
51
|
+
"license": "MIT",
|
|
61
52
|
"main": "dist/index.js",
|
|
53
|
+
"private": false,
|
|
54
|
+
"publishConfig": {
|
|
55
|
+
"registry": "https://registry.npmjs.org/",
|
|
56
|
+
"access": "public"
|
|
57
|
+
},
|
|
62
58
|
"repository": {
|
|
63
59
|
"type": "git",
|
|
64
60
|
"url": "git+https://github.com/Dwlad90/stylex-swc-plugin.git",
|
|
65
61
|
"directory": "packages/webpack-plugin"
|
|
66
62
|
},
|
|
63
|
+
"sideEffects": [
|
|
64
|
+
"**/*.css"
|
|
65
|
+
],
|
|
67
66
|
"scripts": {
|
|
68
67
|
"build": "scripty --ts",
|
|
69
68
|
"check:artifacts": "scripty",
|
|
@@ -71,6 +70,7 @@
|
|
|
71
70
|
"lint": "eslint . --color",
|
|
72
71
|
"lint:check": "eslint . --color --format json --output-file dist/eslint_report.json",
|
|
73
72
|
"postbuild": "pnpm run check:artifacts",
|
|
73
|
+
"prebuild": "pnpm run clean",
|
|
74
74
|
"precommit": "lint-staged",
|
|
75
75
|
"prepush": "lint-prepush",
|
|
76
76
|
"test": "vitest run",
|
package/dist/constants.d.ts
DELETED
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
export declare const PLUGIN_NAME = "stylex";
|
|
2
|
-
export declare const VIRTUAL_CSS_PATH: string;
|
|
3
|
-
export declare const VIRTUAL_CSS_PATTERN: RegExp;
|
|
4
|
-
export declare const STYLEX_CHUNK_NAME = "_stylex-webpack-generated";
|
|
5
|
-
export declare const INCLUDE_REGEXP: RegExp;
|
|
6
|
-
export declare const IS_DEV_ENV: boolean;
|
|
7
|
-
/**
|
|
8
|
-
* node_modules packages that ship untransformed StyleX source and must go
|
|
9
|
-
* through the stylex-loader even though node_modules is excluded by default
|
|
10
|
-
*/
|
|
11
|
-
export declare const DEFAULT_STYLEX_PACKAGES: string[];
|
|
12
|
-
//# sourceMappingURL=constants.d.ts.map
|
package/dist/constants.d.ts.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../src/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,WAAW,WAAW,CAAC;AACpC,eAAO,MAAM,gBAAgB,QAA0C,CAAC;AACxE,eAAO,MAAM,mBAAmB,QAAyB,CAAC;AAC1D,eAAO,MAAM,iBAAiB,8BAA8B,CAAC;AAC7D,eAAO,MAAM,cAAc,QAAoB,CAAC;AAChD,eAAO,MAAM,UAAU,SAAyC,CAAC;AACjE;;;GAGG;AACH,eAAO,MAAM,uBAAuB,UAAiB,CAAC"}
|
package/dist/constants.js
DELETED
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.DEFAULT_STYLEX_PACKAGES = exports.IS_DEV_ENV = exports.INCLUDE_REGEXP = exports.STYLEX_CHUNK_NAME = exports.VIRTUAL_CSS_PATTERN = exports.VIRTUAL_CSS_PATH = exports.PLUGIN_NAME = void 0;
|
|
4
|
-
exports.PLUGIN_NAME = 'stylex';
|
|
5
|
-
exports.VIRTUAL_CSS_PATH = require.resolve('./stylex.virtual.css');
|
|
6
|
-
exports.VIRTUAL_CSS_PATTERN = /stylex\.virtual\.css/;
|
|
7
|
-
exports.STYLEX_CHUNK_NAME = '_stylex-webpack-generated';
|
|
8
|
-
exports.INCLUDE_REGEXP = /\.[cm]?[jt]sx?$/;
|
|
9
|
-
exports.IS_DEV_ENV = process.env.NODE_ENV === 'development';
|
|
10
|
-
/**
|
|
11
|
-
* node_modules packages that ship untransformed StyleX source and must go
|
|
12
|
-
* through the stylex-loader even though node_modules is excluded by default
|
|
13
|
-
*/
|
|
14
|
-
exports.DEFAULT_STYLEX_PACKAGES = ['@stylexjs/'];
|
package/dist/shared.d.ts
DELETED
package/dist/shared.d.ts.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"shared.d.ts","sourceRoot":"","sources":["../src/shared.ts"],"names":[],"mappings":"AAEA,wBAAgB,oBAAoB,CAAC,YAAY,EAAE,MAAM,EAAE,cAAc,EAAE,MAAM,EAAE,WAYlF"}
|
package/dist/shared.js
DELETED
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
-
};
|
|
5
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
exports.isAllowlistedPackage = isAllowlistedPackage;
|
|
7
|
-
const path_1 = __importDefault(require("path"));
|
|
8
|
-
function isAllowlistedPackage(resourcePath, stylexPackages) {
|
|
9
|
-
const nodeModulesSegment = `${path_1.default.sep}node_modules${path_1.default.sep}`;
|
|
10
|
-
const nodeModulesEntries = path_1.default.normalize(resourcePath).split(nodeModulesSegment).slice(1);
|
|
11
|
-
return stylexPackages.some(packageName => {
|
|
12
|
-
const normalizedPackageName = path_1.default.normalize(packageName).replace(/[\\/]$/, '');
|
|
13
|
-
return nodeModulesEntries.some(entry => entry === normalizedPackageName || entry.startsWith(`${normalizedPackageName}${path_1.default.sep}`));
|
|
14
|
-
});
|
|
15
|
-
}
|
package/dist/stylex-loader.d.ts
DELETED
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
import { LoaderInterpolateOption } from 'loader-utils';
|
|
2
|
-
import type { InputCode, SourceMap, StyleXWebpackLoaderOptions } from './types';
|
|
3
|
-
import type { LoaderContext } from 'webpack';
|
|
4
|
-
export default function stylexLoader(this: LoaderContext<LoaderInterpolateOption & StyleXWebpackLoaderOptions>, inputCode: InputCode, inputSourceMap: SourceMap): Promise<void>;
|
|
5
|
-
//# sourceMappingURL=stylex-loader.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"stylex-loader.d.ts","sourceRoot":"","sources":["../src/stylex-loader.ts"],"names":[],"mappings":"AACA,OAAoB,EAAE,uBAAuB,EAAE,MAAM,cAAc,CAAC;AAGpE,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,0BAA0B,EAAE,MAAM,SAAS,CAAC;AAChF,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAI7C,wBAA8B,YAAY,CACxC,IAAI,EAAE,aAAa,CAAC,uBAAuB,GAAG,0BAA0B,CAAC,EACzE,SAAS,EAAE,SAAS,EACpB,cAAc,EAAE,SAAS,iBA2G1B"}
|
package/dist/stylex-loader.js
DELETED
|
@@ -1,77 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
-
};
|
|
5
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
exports.default = stylexLoader;
|
|
7
|
-
const constants_1 = require("./constants");
|
|
8
|
-
const loader_utils_1 = __importDefault(require("loader-utils"));
|
|
9
|
-
const utils_1 = require("./utils");
|
|
10
|
-
const skipWarnRegex = /empty|client-only/;
|
|
11
|
-
async function stylexLoader(inputCode, inputSourceMap) {
|
|
12
|
-
const callback = this.async();
|
|
13
|
-
const { stylexImports, rsOptions, nextjsMode, extractCSS = true } = this.getOptions();
|
|
14
|
-
const logger = this._compiler?.getInfrastructureLogger(constants_1.PLUGIN_NAME);
|
|
15
|
-
if (!inputCode) {
|
|
16
|
-
if (!skipWarnRegex.test(this.resourcePath)) {
|
|
17
|
-
logger?.warn(`@stylexswc/webpack-plugin: inputCode is empty for resource ${this.resourcePath}`);
|
|
18
|
-
}
|
|
19
|
-
return callback(null, inputCode, inputSourceMap);
|
|
20
|
-
}
|
|
21
|
-
const stringifiedInputCode = typeof inputCode === 'string' ? inputCode : inputCode.toString();
|
|
22
|
-
// bail out early if the input doesn't contain stylex imports
|
|
23
|
-
if (!stylexImports?.some(importName => typeof importName === 'string'
|
|
24
|
-
? stringifiedInputCode.includes(importName)
|
|
25
|
-
: stringifiedInputCode.includes(importName.as) ||
|
|
26
|
-
stringifiedInputCode.includes(importName.from))) {
|
|
27
|
-
return callback(null, stringifiedInputCode, inputSourceMap);
|
|
28
|
-
}
|
|
29
|
-
if (!(0, utils_1.isSupplementedLoaderContext)(this)) {
|
|
30
|
-
return callback(new Error('stylex-loader: loader context is not SupplementedLoaderContext!'));
|
|
31
|
-
}
|
|
32
|
-
try {
|
|
33
|
-
const { code, map, metadata } = (0, utils_1.generateStyleXOutput)(this.resourcePath, stringifiedInputCode, rsOptions, inputSourceMap);
|
|
34
|
-
let parsedMap = undefined;
|
|
35
|
-
if (map) {
|
|
36
|
-
try {
|
|
37
|
-
parsedMap = typeof map === 'string' ? JSON.parse(map) : map;
|
|
38
|
-
}
|
|
39
|
-
catch (error) {
|
|
40
|
-
logger?.warn(`@stylexswc/webpack-plugin: failed to parse map for resource ${this.resourcePath}: ${error.message}`);
|
|
41
|
-
}
|
|
42
|
-
}
|
|
43
|
-
// If metadata.stylex doesn't exist at all, we only need to return the transformed code
|
|
44
|
-
if (!extractCSS ||
|
|
45
|
-
!metadata ||
|
|
46
|
-
!('stylex' in metadata) ||
|
|
47
|
-
metadata.stylex == null ||
|
|
48
|
-
!metadata.stylex.length) {
|
|
49
|
-
if (extractCSS)
|
|
50
|
-
logger?.debug(`No stylex styles generated from ${this.resourcePath}`);
|
|
51
|
-
return callback(null, code, parsedMap);
|
|
52
|
-
}
|
|
53
|
-
logger?.debug(`Read stylex styles from ${this.resourcePath}:`, metadata.stylex);
|
|
54
|
-
this.StyleXWebpackContextKey.registerStyleXRules(this.resourcePath, metadata.stylex);
|
|
55
|
-
const serializedStyleXRules = JSON.stringify(metadata.stylex);
|
|
56
|
-
const urlParams = new URLSearchParams({
|
|
57
|
-
from: this.resourcePath,
|
|
58
|
-
stylex: serializedStyleXRules,
|
|
59
|
-
});
|
|
60
|
-
if (!nextjsMode) {
|
|
61
|
-
// Normal webpack mode
|
|
62
|
-
// We generate a virtual css file that looks like it is relative to the source
|
|
63
|
-
const virtualFileName = loader_utils_1.default.interpolateName(this, '[path][name].[hash:base64:8].stylex.virtual.css', { content: serializedStyleXRules });
|
|
64
|
-
const virtualCssRequest = (0, utils_1.stringifyRequest)(this, `${virtualFileName}!=!${constants_1.VIRTUAL_CSS_PATH}?${urlParams.toString()}`);
|
|
65
|
-
const postfix = `\nimport ${virtualCssRequest};`;
|
|
66
|
-
return callback(null, code + postfix, parsedMap);
|
|
67
|
-
}
|
|
68
|
-
// Next.js App Router doesn't support inline matchResource and inline loaders
|
|
69
|
-
// So we adapt Next.js' "external" css import approach instead
|
|
70
|
-
const virtualCssRequest = (0, utils_1.stringifyRequest)(this, `${constants_1.VIRTUAL_CSS_PATH}?${urlParams.toString()}`);
|
|
71
|
-
const postfix = `\nimport ${virtualCssRequest};`;
|
|
72
|
-
return callback(null, code + postfix, parsedMap);
|
|
73
|
-
}
|
|
74
|
-
catch (error) {
|
|
75
|
-
return callback(error);
|
|
76
|
-
}
|
|
77
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"stylex-virtual-css-loader.d.ts","sourceRoot":"","sources":["../src/stylex-virtual-css-loader.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,OAAO,MAAM,SAAS,CAAC;AACnC,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAE/C,MAAM,CAAC,OAAO,WACZ,IAAI,EAAE,OAAO,CAAC,aAAa,CAAC,OAAO,CAAC,EACpC,SAAS,EAAE,SAAS,EACpB,cAAc,CAAC,EAAE,SAAS,QA4C3B"}
|
|
@@ -1,41 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.default = default_1;
|
|
4
|
-
const loader_utils_1 = require("loader-utils");
|
|
5
|
-
function default_1(inputCode, inputSourceMap) {
|
|
6
|
-
const callback = this.async();
|
|
7
|
-
const data = new URLSearchParams(this.resourceQuery.slice(1));
|
|
8
|
-
try {
|
|
9
|
-
const stylex = data.get('stylex');
|
|
10
|
-
if (stylex == null) {
|
|
11
|
-
callback(null, inputCode, inputSourceMap);
|
|
12
|
-
return;
|
|
13
|
-
}
|
|
14
|
-
const isProd = this._compiler?.options.mode === 'production';
|
|
15
|
-
// If we got stylex in the virtual css import, we need to disable the cache
|
|
16
|
-
// to fix HMR and Next.js navigation
|
|
17
|
-
this.cacheable(isProd);
|
|
18
|
-
if (isProd) {
|
|
19
|
-
// In production, we don't need to generate dummy css
|
|
20
|
-
return callback(null, '');
|
|
21
|
-
}
|
|
22
|
-
// https://github.com/webpack/loader-utils?tab=readme-ov-file#interpolatename
|
|
23
|
-
const hash = (0, loader_utils_1.getHashDigest)(Buffer.from(stylex), 'xxhash64', 'base62', 32);
|
|
24
|
-
const css = `
|
|
25
|
-
/*
|
|
26
|
-
* Temporary CSS placeholder - @stylexswc/webpack-plugin
|
|
27
|
-
* This will be replaced with actual CSS during asset injection
|
|
28
|
-
*
|
|
29
|
-
* StyleX Bundle ID: ${hash}
|
|
30
|
-
* Generated Rules:
|
|
31
|
-
* ${JSON.stringify(JSON.parse(stylex), null, 4)}
|
|
32
|
-
*
|
|
33
|
-
* Note: This content is for development reference only
|
|
34
|
-
*/
|
|
35
|
-
`;
|
|
36
|
-
callback(null, css);
|
|
37
|
-
}
|
|
38
|
-
catch (e) {
|
|
39
|
-
callback(e);
|
|
40
|
-
}
|
|
41
|
-
}
|
package/dist/stylex.virtual.css
DELETED
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
/*
|
|
2
|
-
* Virtual placeholder file for StyleX CSS extraction
|
|
3
|
-
*
|
|
4
|
-
* Webpack requires physical files on disk for virtual sources.
|
|
5
|
-
* This empty file serves as the target for extracted CSS.
|
|
6
|
-
*
|
|
7
|
-
* Note: Filename "stylex.virtual.css" is intentionally chosen
|
|
8
|
-
* to avoid conflicts with other loaders.
|
|
9
|
-
*/
|
package/dist/types.d.ts
DELETED
|
@@ -1,100 +0,0 @@
|
|
|
1
|
-
import type { StyleXOptions, UseLayersType } from '@stylexswc/rs-compiler';
|
|
2
|
-
import type { LoaderContext } from 'webpack';
|
|
3
|
-
import type webpack from 'webpack';
|
|
4
|
-
import type { RegisterStyleXRules } from '.';
|
|
5
|
-
export type CacheGroupOptions = NonNullable<Exclude<Exclude<webpack.Configuration['optimization'], undefined>['splitChunks'], undefined | false>['cacheGroups']>[string];
|
|
6
|
-
type AsyncFnParams = Parameters<ReturnType<LoaderContext<unknown>['async']>>;
|
|
7
|
-
export type InputCode = AsyncFnParams['1'];
|
|
8
|
-
export type SourceMap = AsyncFnParams['2'];
|
|
9
|
-
export type CSSTransformer = (_css: string, _filePath: string | undefined) => string | Buffer | Promise<string | Buffer>;
|
|
10
|
-
export interface StyleXPluginOption {
|
|
11
|
-
/**
|
|
12
|
-
* stylex options passed to stylex babel plugin
|
|
13
|
-
*
|
|
14
|
-
* @see https://stylexjs.com/docs/api/configuration/babel-plugin/
|
|
15
|
-
*/
|
|
16
|
-
rsOptions?: Partial<StyleXOptions>;
|
|
17
|
-
/**
|
|
18
|
-
* Specify where stylex will be imported from
|
|
19
|
-
*
|
|
20
|
-
* @default ['stylex', '@stylexjs/stylex']
|
|
21
|
-
*/
|
|
22
|
-
stylexImports?: StyleXOptions['importSources'];
|
|
23
|
-
/**
|
|
24
|
-
* Whether to use CSS layers
|
|
25
|
-
*
|
|
26
|
-
* @default false
|
|
27
|
-
*/
|
|
28
|
-
useCSSLayers?: UseLayersType;
|
|
29
|
-
/**
|
|
30
|
-
* Next.js Mode
|
|
31
|
-
*
|
|
32
|
-
* @default false
|
|
33
|
-
*/
|
|
34
|
-
nextjsMode?: boolean;
|
|
35
|
-
/**
|
|
36
|
-
* Enable other CSS transformation
|
|
37
|
-
*
|
|
38
|
-
* Since @stylexswc/webpack-plugin only inject CSS after all loaders, you can not use postcss-loader.
|
|
39
|
-
* With this you can incovate `postcss()` here.
|
|
40
|
-
*/
|
|
41
|
-
transformCss?: CSSTransformer;
|
|
42
|
-
/**
|
|
43
|
-
* Whether to extract CSS
|
|
44
|
-
*
|
|
45
|
-
* @default true
|
|
46
|
-
*/
|
|
47
|
-
extractCSS?: boolean;
|
|
48
|
-
/**
|
|
49
|
-
* Loader execution order
|
|
50
|
-
*
|
|
51
|
-
* Determines when the StyleX transformation is applied relative to other webpack loaders:
|
|
52
|
-
* - 'first': StyleX processes source code before any other loaders (recommended)
|
|
53
|
-
* - 'last': StyleX processes after all other loaders have run
|
|
54
|
-
*
|
|
55
|
-
* @default 'first'
|
|
56
|
-
*/
|
|
57
|
-
loaderOrder?: 'first' | 'last';
|
|
58
|
-
/**
|
|
59
|
-
* Customizes the cache group configuration for extracted CSS chunks.
|
|
60
|
-
*
|
|
61
|
-
* Allows you to override or extend the default webpack `splitChunks.cacheGroups` settings
|
|
62
|
-
* for CSS generated by StyleX. This can be used to control how CSS is split into separate
|
|
63
|
-
* files, optimize caching, or group styles according to your application's needs.
|
|
64
|
-
*
|
|
65
|
-
* @see https://webpack.js.org/plugins/split-chunks-plugin/#splitchunkscachegroups
|
|
66
|
-
*/
|
|
67
|
-
cacheGroup?: CacheGroupOptions;
|
|
68
|
-
/**
|
|
69
|
-
* node_modules packages that must be processed by the stylex-loader.
|
|
70
|
-
*
|
|
71
|
-
* By default, node_modules is excluded even if a module imports StyleX, so
|
|
72
|
-
* only source that ships already-untransformed StyleX (e.g. component
|
|
73
|
-
* libraries) needs to opt in here. List path fragments (e.g. '@stylexjs/',
|
|
74
|
-
* 'my-design-system') for packages that ship untransformed StyleX source.
|
|
75
|
-
*
|
|
76
|
-
* @default ['@stylexjs/']
|
|
77
|
-
*/
|
|
78
|
-
stylexPackages?: string[];
|
|
79
|
-
}
|
|
80
|
-
export type StyleXWebpackLoaderOptions = {
|
|
81
|
-
stylexImports: StyleXOptions['importSources'];
|
|
82
|
-
rsOptions: Partial<StyleXOptions>;
|
|
83
|
-
nextjsMode: boolean;
|
|
84
|
-
extractCSS?: boolean;
|
|
85
|
-
};
|
|
86
|
-
export type SupplementedLoaderContext<Options = unknown> = webpack.LoaderContext<Options> & {
|
|
87
|
-
StyleXWebpackContextKey: {
|
|
88
|
-
registerStyleXRules: RegisterStyleXRules;
|
|
89
|
-
};
|
|
90
|
-
};
|
|
91
|
-
export type SWCPluginRule = {
|
|
92
|
-
class_name: string;
|
|
93
|
-
style: {
|
|
94
|
-
ltr: string;
|
|
95
|
-
rtl?: null | string;
|
|
96
|
-
};
|
|
97
|
-
priority: number;
|
|
98
|
-
};
|
|
99
|
-
export {};
|
|
100
|
-
//# sourceMappingURL=types.d.ts.map
|
package/dist/types.d.ts.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAC3E,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAC7C,OAAO,KAAK,OAAO,MAAM,SAAS,CAAC;AACnC,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,GAAG,CAAC;AAE7C,MAAM,MAAM,iBAAiB,GAAG,WAAW,CACzC,OAAO,CACL,OAAO,CAAC,OAAO,CAAC,aAAa,CAAC,cAAc,CAAC,EAAE,SAAS,CAAC,CAAC,aAAa,CAAC,EACxE,SAAS,GAAG,KAAK,CAClB,CAAC,aAAa,CAAC,CACjB,CAAC,MAAM,CAAC,CAAC;AAEV,KAAK,aAAa,GAAG,UAAU,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;AAE7E,MAAM,MAAM,SAAS,GAAG,aAAa,CAAC,GAAG,CAAC,CAAC;AAC3C,MAAM,MAAM,SAAS,GAAG,aAAa,CAAC,GAAG,CAAC,CAAC;AAE3C,MAAM,MAAM,cAAc,GAAG,CAC3B,IAAI,EAAE,MAAM,EACZ,SAAS,EAAE,MAAM,GAAG,SAAS,KAC1B,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC,MAAM,GAAG,MAAM,CAAC,CAAC;AAEhD,MAAM,WAAW,kBAAkB;IACjC;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,CAAC;IACnC;;;;OAIG;IACH,aAAa,CAAC,EAAE,aAAa,CAAC,eAAe,CAAC,CAAC;IAC/C;;;;OAIG;IACH,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,cAAc,CAAC;IAE9B;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;;;;;OAQG;IACH,WAAW,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC/B;;;;;;;;OAQG;IACH,UAAU,CAAC,EAAE,iBAAiB,CAAC;IAE/B;;;;;;;;;OASG;IACH,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;CAC3B;AACD,MAAM,MAAM,0BAA0B,GAAG;IACvC,aAAa,EAAE,aAAa,CAAC,eAAe,CAAC,CAAC;IAC9C,SAAS,EAAE,OAAO,CAAC,aAAa,CAAC,CAAC;IAClC,UAAU,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,yBAAyB,CAAC,OAAO,GAAG,OAAO,IAAI,OAAO,CAAC,aAAa,CAAC,OAAO,CAAC,GAAG;IAC1F,uBAAuB,EAAE;QACvB,mBAAmB,EAAE,mBAAmB,CAAC;KAC1C,CAAC;CACH,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,GAAG,CAAC,EAAE,IAAI,GAAG,MAAM,CAAA;KAAE,CAAC;IAC5C,QAAQ,EAAE,MAAM,CAAC;CAClB,CAAC"}
|
package/dist/types.js
DELETED
package/dist/utils.d.ts
DELETED
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
import type webpack from 'webpack';
|
|
2
|
-
import type { SourceMap, SupplementedLoaderContext } from './types';
|
|
3
|
-
import type { StyleXOptions, StyleXTransformResult } from '@stylexswc/rs-compiler';
|
|
4
|
-
export declare function stringifyRequest(loaderContext: webpack.LoaderContext<unknown>, request: string): string;
|
|
5
|
-
export declare const isSupplementedLoaderContext: <T>(context: webpack.LoaderContext<T>) => context is SupplementedLoaderContext<T>;
|
|
6
|
-
export declare function generateStyleXOutput(resourcePath: string, inputSource: string, rsOptions: Partial<StyleXOptions>, inputSourceMap?: SourceMap): StyleXTransformResult;
|
|
7
|
-
//# sourceMappingURL=utils.d.ts.map
|
package/dist/utils.d.ts.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,OAAO,MAAM,SAAS,CAAC;AACnC,OAAO,KAAK,EAAE,SAAS,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAC;AACpE,OAAO,KAAK,EAAE,aAAa,EAAE,qBAAqB,EAAE,MAAM,wBAAwB,CAAC;AAEnF,wBAAgB,gBAAgB,CAAC,aAAa,EAAE,OAAO,CAAC,aAAa,CAAC,OAAO,CAAC,EAAE,OAAO,EAAE,MAAM,UAI9F;AAED,eAAO,MAAM,2BAA2B,GAAI,CAAC,EAC3C,SAAS,OAAO,CAAC,aAAa,CAAC,CAAC,CAAC,KAChC,OAAO,IAAI,yBAAyB,CAAC,CAAC,CAExC,CAAC;AAEF,wBAAgB,oBAAoB,CAClC,YAAY,EAAE,MAAM,EACpB,WAAW,EAAE,MAAM,EACnB,SAAS,EAAE,OAAO,CAAC,aAAa,CAAC,EACjC,cAAc,CAAC,EAAE,SAAS,GACzB,qBAAqB,CAYvB"}
|
package/dist/utils.js
DELETED
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.isSupplementedLoaderContext = void 0;
|
|
4
|
-
exports.stringifyRequest = stringifyRequest;
|
|
5
|
-
exports.generateStyleXOutput = generateStyleXOutput;
|
|
6
|
-
const rs_compiler_1 = require("@stylexswc/rs-compiler");
|
|
7
|
-
function stringifyRequest(loaderContext, request) {
|
|
8
|
-
return JSON.stringify(loaderContext.utils.contextify(loaderContext.context || loaderContext.rootContext, request));
|
|
9
|
-
}
|
|
10
|
-
const isSupplementedLoaderContext = (context) => {
|
|
11
|
-
return Object.prototype.hasOwnProperty.call(context, 'StyleXWebpackContextKey');
|
|
12
|
-
};
|
|
13
|
-
exports.isSupplementedLoaderContext = isSupplementedLoaderContext;
|
|
14
|
-
function generateStyleXOutput(resourcePath, inputSource, rsOptions, inputSourceMap) {
|
|
15
|
-
const options = (0, rs_compiler_1.normalizeRsOptions)(rsOptions ?? {});
|
|
16
|
-
// Forward the previous loader's source map so debug source-map annotations
|
|
17
|
-
// and the emitted map resolve to the original authored file instead of the
|
|
18
|
-
// (possibly already transformed) loader input.
|
|
19
|
-
if (inputSourceMap != null && options.inputSourceMap === undefined) {
|
|
20
|
-
options.inputSourceMap =
|
|
21
|
-
typeof inputSourceMap === 'string' ? inputSourceMap : JSON.stringify(inputSourceMap);
|
|
22
|
-
}
|
|
23
|
-
return (0, rs_compiler_1.transform)(resourcePath, inputSource, options);
|
|
24
|
-
}
|