@stylexswc/webpack-plugin 0.11.1 → 0.11.2-rc.2
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 +95 -4
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +10 -0
- package/dist/stylex-loader.d.ts +4 -2
- package/dist/stylex-loader.d.ts.map +1 -1
- package/dist/stylex-virtual-css-loader.d.ts.map +1 -1
- package/dist/stylex-virtual-css-loader.js +0 -1
- package/dist/types.d.ts.map +1 -1
- package/package.json +9 -9
package/README.md
CHANGED
|
@@ -64,10 +64,27 @@ module.exports = config;
|
|
|
64
64
|
|
|
65
65
|
- Type: `Partial<StyleXOptions>`
|
|
66
66
|
- Optional
|
|
67
|
-
- Description: StyleX compiler options that will be passed to the NAPI-RS
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
67
|
+
- Description: StyleX compiler options that will be passed to the NAPI-RS compiler.
|
|
68
|
+
For standard StyleX options, see the [official StyleX documentation](https://stylexjs.com/docs/api/configuration/babel-plugin/).
|
|
69
|
+
|
|
70
|
+
> [!NOTE]
|
|
71
|
+
> **New Features:** The `include` and `exclude` options are exclusive to this NAPI-RS compiler implementation and are not available in the official StyleX Babel plugin.
|
|
72
|
+
|
|
73
|
+
##### `rsOptions.include`
|
|
74
|
+
|
|
75
|
+
- Type: `(string | RegExp)[]`
|
|
76
|
+
- Optional
|
|
77
|
+
- Description: **RS-compiler Only** An array of glob patterns or regular expressions to include specific files for StyleX transformation.
|
|
78
|
+
When specified, only files matching at least one of these patterns will be transformed.
|
|
79
|
+
Patterns are matched against paths relative to the current working directory.
|
|
80
|
+
|
|
81
|
+
##### `rsOptions.exclude`
|
|
82
|
+
|
|
83
|
+
- Type: `(string | RegExp)[]`
|
|
84
|
+
- Optional
|
|
85
|
+
- Description: **RS-compiler Only** An array of glob patterns or regular expressions to exclude specific files from StyleX transformation.
|
|
86
|
+
Files matching any of these patterns will not be transformed, even if they match an `include` pattern.
|
|
87
|
+
Patterns are matched against paths relative to the current working directory.
|
|
71
88
|
|
|
72
89
|
#### `stylexImports`
|
|
73
90
|
|
|
@@ -116,6 +133,10 @@ module.exports = {
|
|
|
116
133
|
new StylexPlugin({
|
|
117
134
|
rsOptions: {
|
|
118
135
|
dev: process.env.NODE_ENV !== 'production',
|
|
136
|
+
// Include only specific directories
|
|
137
|
+
include: ['src/**/*.{ts,tsx}', 'components/**/*.{ts,tsx}'],
|
|
138
|
+
// Exclude test files and stories
|
|
139
|
+
exclude: ['**/*.test.*', '**/*.stories.*', '**/__tests__/**'],
|
|
119
140
|
},
|
|
120
141
|
stylexImports: ['@stylexjs/stylex', { from: './theme', as: 'tokens' }],
|
|
121
142
|
useCSSLayers: true,
|
|
@@ -130,6 +151,76 @@ module.exports = {
|
|
|
130
151
|
};
|
|
131
152
|
```
|
|
132
153
|
|
|
154
|
+
#### Path Filtering Examples
|
|
155
|
+
|
|
156
|
+
**Include only specific directories:**
|
|
157
|
+
|
|
158
|
+
```javascript
|
|
159
|
+
new StylexPlugin({
|
|
160
|
+
rsOptions: {
|
|
161
|
+
include: ['src/**/*.tsx', 'app/**/*.tsx'],
|
|
162
|
+
},
|
|
163
|
+
})
|
|
164
|
+
```
|
|
165
|
+
|
|
166
|
+
**Exclude test and build files:**
|
|
167
|
+
|
|
168
|
+
```javascript
|
|
169
|
+
new StylexPlugin({
|
|
170
|
+
rsOptions: {
|
|
171
|
+
exclude: ['**/*.test.*', '**/*.spec.*', '**/dist/**', '**/node_modules/**'],
|
|
172
|
+
},
|
|
173
|
+
})
|
|
174
|
+
```
|
|
175
|
+
|
|
176
|
+
**Using regular expressions:**
|
|
177
|
+
|
|
178
|
+
```javascript
|
|
179
|
+
new StylexPlugin({
|
|
180
|
+
rsOptions: {
|
|
181
|
+
include: [/src\/.*\.tsx$/],
|
|
182
|
+
exclude: [/\.test\./, /\.stories\./],
|
|
183
|
+
},
|
|
184
|
+
})
|
|
185
|
+
```
|
|
186
|
+
|
|
187
|
+
**Combined include and exclude (exclude takes precedence):**
|
|
188
|
+
|
|
189
|
+
```javascript
|
|
190
|
+
new StylexPlugin({
|
|
191
|
+
rsOptions: {
|
|
192
|
+
include: ['src/**/*.{ts,tsx}'],
|
|
193
|
+
exclude: ['**/__tests__/**', '**/__mocks__/**'],
|
|
194
|
+
},
|
|
195
|
+
})
|
|
196
|
+
```
|
|
197
|
+
|
|
198
|
+
**Exclude node_modules except specific packages:**
|
|
199
|
+
|
|
200
|
+
```javascript
|
|
201
|
+
new StylexPlugin({
|
|
202
|
+
rsOptions: {
|
|
203
|
+
// Exclude all node_modules except @stylexjs/open-props
|
|
204
|
+
exclude: [/node_modules(?!\/@stylexjs\/open-props)/],
|
|
205
|
+
},
|
|
206
|
+
})
|
|
207
|
+
```
|
|
208
|
+
|
|
209
|
+
**Transform only specific packages from node_modules:**
|
|
210
|
+
|
|
211
|
+
```javascript
|
|
212
|
+
new StylexPlugin({
|
|
213
|
+
rsOptions: {
|
|
214
|
+
include: [
|
|
215
|
+
'src/**/*.{ts,tsx}',
|
|
216
|
+
'node_modules/@stylexjs/open-props/**/*.js',
|
|
217
|
+
'node_modules/@my-org/design-system/**/*.js',
|
|
218
|
+
],
|
|
219
|
+
exclude: ['**/*.test.*'],
|
|
220
|
+
},
|
|
221
|
+
})
|
|
222
|
+
```
|
|
223
|
+
|
|
133
224
|
## Documentation
|
|
134
225
|
|
|
135
226
|
- [StyleX Documentation](https://stylexjs.com)
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,iBAAiB,MAAM,wBAAwB,CAAC;AAEvD,OAAO,EAML,mBAAmB,EACpB,MAAM,aAAa,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,iBAAiB,MAAM,wBAAwB,CAAC;AAEvD,OAAO,EAML,mBAAmB,EACpB,MAAM,aAAa,CAAC;AAGrB,OAAO,KAAK,OAAO,MAAM,SAAS,CAAC;AACnC,OAAO,KAAK,EAAE,IAAI,IAAI,UAAU,EAAE,MAAM,wBAAwB,CAAC;AACjE,OAAO,KAAK,EACV,cAAc,EACd,kBAAkB,EAClB,0BAA0B,EAE3B,MAAM,SAAS,CAAC;AAkBjB,MAAM,MAAM,mBAAmB,GAAG,CAAC,aAAa,EAAE,MAAM,EAAE,YAAY,EAAE,UAAU,EAAE,KAAK,IAAI,CAAC;AAE9F,MAAM,CAAC,OAAO,OAAO,YAAY;IAC/B,WAAW,iDAA4C;IACvD,YAAY,EAAE,OAAO,CAAC;IAEtB,YAAY,EAAE,0BAA0B,CAAC;IAEzC,YAAY,EAAE,cAAc,CAAC;gBAEjB,EACV,aAA8C,EAC9C,YAAoB,EACpB,SAAc,EACd,UAAkB,EAClB,YAAgC,EAChC,WAA2B,EAC3B,UAAiB,GAClB,GAAE,kBAAuB;IAmB1B,KAAK,CAAC,QAAQ,EAAE,OAAO,CAAC,QAAQ;CAyKjC;AAED,OAAO,EAAE,mBAAmB,EAAE,CAAC;AAE/B,YAAY,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC"}
|
package/dist/index.js
CHANGED
|
@@ -8,6 +8,7 @@ const babel_plugin_1 = __importDefault(require("@stylexjs/babel-plugin"));
|
|
|
8
8
|
const path_1 = __importDefault(require("path"));
|
|
9
9
|
const constants_1 = require("./constants");
|
|
10
10
|
Object.defineProperty(exports, "VIRTUAL_CSS_PATTERN", { enumerable: true, get: function () { return constants_1.VIRTUAL_CSS_PATTERN; } });
|
|
11
|
+
const rs_compiler_1 = require("@stylexswc/rs-compiler");
|
|
11
12
|
const stylexLoaderPath = require.resolve('./stylex-loader');
|
|
12
13
|
const stylexVirtualLoaderPath = require.resolve('./stylex-virtual-css-loader');
|
|
13
14
|
const getStyleXRules = (stylexRules, useCSSLayers) => {
|
|
@@ -77,6 +78,15 @@ class StyleXPlugin {
|
|
|
77
78
|
NormalModule.getCompilationHooks(compilation).loader.tap(constants_1.PLUGIN_NAME, (loaderContext, mod) => {
|
|
78
79
|
const extname = path_1.default.extname(mod.matchResource || mod.resource);
|
|
79
80
|
if (constants_1.INCLUDE_REGEXP.test(extname)) {
|
|
81
|
+
// Add path filtering check using Rust function
|
|
82
|
+
const shouldTransform = (0, rs_compiler_1.shouldTransformFile)(mod.resource, this.loaderOption.rsOptions?.include, this.loaderOption.rsOptions?.exclude);
|
|
83
|
+
if (!shouldTransform) {
|
|
84
|
+
return; // Skip adding loader if filtered out
|
|
85
|
+
}
|
|
86
|
+
else {
|
|
87
|
+
this.loaderOption.rsOptions.include = undefined;
|
|
88
|
+
this.loaderOption.rsOptions.exclude = undefined;
|
|
89
|
+
}
|
|
80
90
|
loaderContext.StyleXWebpackContextKey = {
|
|
81
91
|
registerStyleXRules: (resourcePath, stylexRules) => {
|
|
82
92
|
this.stylexRules.set(resourcePath, stylexRules);
|
package/dist/stylex-loader.d.ts
CHANGED
|
@@ -1,3 +1,5 @@
|
|
|
1
|
-
import
|
|
2
|
-
|
|
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>;
|
|
3
5
|
//# sourceMappingURL=stylex-loader.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"stylex-loader.d.ts","sourceRoot":"","sources":["../src/stylex-loader.ts"],"names":[],"mappings":"
|
|
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;AAE7C,wBAA8B,YAAY,CACxC,IAAI,EAAE,aAAa,CAAC,uBAAuB,GAAG,0BAA0B,CAAC,EACzE,SAAS,EAAE,SAAS,EACpB,cAAc,EAAE,SAAS,iBAqG1B"}
|
|
@@ -1 +1 @@
|
|
|
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,
|
|
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"}
|
|
@@ -19,7 +19,6 @@ function default_1(inputCode, inputSourceMap) {
|
|
|
19
19
|
// In production, we don't need to generate dummy css
|
|
20
20
|
return callback(null, '');
|
|
21
21
|
}
|
|
22
|
-
// @ts-expect-error - since v3 getHashDigest supports xxhash64
|
|
23
22
|
// https://github.com/webpack/loader-utils?tab=readme-ov-file#interpolatename
|
|
24
23
|
const hash = (0, loader_utils_1.getHashDigest)(Buffer.from(stylex), 'xxhash64', 'base62', 32);
|
|
25
24
|
const css = `
|
package/dist/types.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAC5D,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,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;
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAC5D,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,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,kBAAmB,SAAQ,IAAI,CAAC,0BAA0B,EAAE,aAAa,CAAC;IACzF;;;;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,OAAO,CAAC;IACvB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,cAAc,CAAC;IAE9B;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;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;IAEpB;;;;OAIG;IACH,WAAW,CAAC,EAAE,aAAa,GAAG,KAAK,CAAC;IACpC,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/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@stylexswc/webpack-plugin",
|
|
3
3
|
"description": "StyleX webpack plugin with NAPI-RS compiler",
|
|
4
|
-
"version": "0.11.
|
|
4
|
+
"version": "0.11.2-rc.2",
|
|
5
5
|
"private": false,
|
|
6
6
|
"license": "MIT",
|
|
7
7
|
"sideEffects": false,
|
|
@@ -19,18 +19,18 @@
|
|
|
19
19
|
},
|
|
20
20
|
"dependencies": {
|
|
21
21
|
"@stylexjs/babel-plugin": "^0.15.4",
|
|
22
|
-
"@stylexswc/rs-compiler": "0.11.
|
|
22
|
+
"@stylexswc/rs-compiler": "0.11.2-rc.2",
|
|
23
23
|
"loader-utils": "^3.3.1"
|
|
24
24
|
},
|
|
25
25
|
"devDependencies": {
|
|
26
|
-
"@babel/types": "^7.28.
|
|
27
|
-
"@stylexswc/eslint-config": "0.11.
|
|
28
|
-
"@stylexswc/typescript-config": "0.11.
|
|
26
|
+
"@babel/types": "^7.28.4",
|
|
27
|
+
"@stylexswc/eslint-config": "0.11.2-rc.2",
|
|
28
|
+
"@stylexswc/typescript-config": "0.11.2-rc.2",
|
|
29
29
|
"@types/babel__core": "^7.20.5",
|
|
30
|
-
"@types/loader-utils": "^
|
|
31
|
-
"@types/node": "^24.
|
|
30
|
+
"@types/loader-utils": "^3.0.0",
|
|
31
|
+
"@types/node": "^24.7.2",
|
|
32
32
|
"mini-css-extract-plugin": "^2.9.2",
|
|
33
|
-
"webpack": "^5.
|
|
33
|
+
"webpack": "^5.102.1"
|
|
34
34
|
},
|
|
35
35
|
"keywords": [
|
|
36
36
|
"stylex",
|
|
@@ -50,6 +50,6 @@
|
|
|
50
50
|
"precommit": "lint-staged",
|
|
51
51
|
"prepush": "lint-prepush",
|
|
52
52
|
"test": "echo \"Error: no test specified\" && exit 0",
|
|
53
|
-
"typecheck": "scripty"
|
|
53
|
+
"typecheck": "scripty --ts"
|
|
54
54
|
}
|
|
55
55
|
}
|