stylex-webpack 0.4.9 → 0.4.11
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 +87 -3
- package/dist/index.js +5 -3
- package/dist/stylex-loader.js +3 -1
- package/dist/utils/index.cjs +24 -0
- package/dist/utils/index.d.ts +38 -0
- package/dist/utils/index.mjs +20 -0
- package/package.json +35 -27
package/README.md
CHANGED
|
@@ -19,15 +19,24 @@ Unlike StyleX's official webpack plugin, `stylex-webpack` requires you have setu
|
|
|
19
19
|
|
|
20
20
|
```sh
|
|
21
21
|
# npm
|
|
22
|
-
npm i stylex-webpack
|
|
22
|
+
npm i stylex-webpack
|
|
23
23
|
# Yarn
|
|
24
|
-
yarn add stylex-webpack
|
|
24
|
+
yarn add stylex-webpack
|
|
25
25
|
# pnpm
|
|
26
|
-
pnpm add stylex-webpack
|
|
26
|
+
pnpm add stylex-webpack
|
|
27
27
|
```
|
|
28
28
|
|
|
29
29
|
`@stylexjs/babel-plugin` is declared as a mandatory peer dependency. But we still recommend you install it directly in your project to specify the version you want to use.
|
|
30
30
|
|
|
31
|
+
```sh
|
|
32
|
+
# npm
|
|
33
|
+
npm i @stylexjs/babel-plugin -D
|
|
34
|
+
# Yarn
|
|
35
|
+
yarn add @stylexjs/babel-plugin -D
|
|
36
|
+
# pnpm
|
|
37
|
+
pnpm add @stylexjs/babel-plugin -D
|
|
38
|
+
```
|
|
39
|
+
|
|
31
40
|
Also you will most likely need to install `@stylexjs/stylex` as well if you haven't already:
|
|
32
41
|
|
|
33
42
|
```sh
|
|
@@ -97,6 +106,81 @@ Then import `stylex-webpack/stylex.css` inside the entry point of your Next.js A
|
|
|
97
106
|
import 'stylex-webpack/stylex.css';
|
|
98
107
|
```
|
|
99
108
|
|
|
109
|
+
### Utilities
|
|
110
|
+
|
|
111
|
+
`stylex-webpack` also exports a few utilities for better StyleX development experience under `stylex-webpack/utils`:
|
|
112
|
+
|
|
113
|
+
#### `stylexPropsWithClassName`
|
|
114
|
+
|
|
115
|
+
This allows you to easily combine `stylex.props` with other CSS class names, which is useful when you want to use stylex together with other CSS solutions when stylex is not enough, notoriously, Radix UI uses data attributes for uncontrolled components' styling.
|
|
116
|
+
|
|
117
|
+
```tsx
|
|
118
|
+
import * as stylex from '@stylexjs/stylex';
|
|
119
|
+
import { stylexPropsWithClassName } from 'stylex-webpack/utils';
|
|
120
|
+
|
|
121
|
+
const styles = stylex.create({
|
|
122
|
+
myStyle: {
|
|
123
|
+
color: 'red'
|
|
124
|
+
}
|
|
125
|
+
});
|
|
126
|
+
|
|
127
|
+
import cssModules from './MyComponent.module.css';
|
|
128
|
+
|
|
129
|
+
<div
|
|
130
|
+
{...stylexPropsWithClassName(
|
|
131
|
+
stylex.props(styles.myStyle),
|
|
132
|
+
// You can now easily combine stylex.props with other CSS class names
|
|
133
|
+
// This is useful when you want to use stylex together with other CSS solutions when stylex is not enough
|
|
134
|
+
cssModules.someClassName,
|
|
135
|
+
cssModules.anotherClassName,
|
|
136
|
+
condition && cssModules.conditionalClassName
|
|
137
|
+
)}
|
|
138
|
+
>
|
|
139
|
+
```
|
|
140
|
+
|
|
141
|
+
#### `stylexPropsWithStyleObject`
|
|
142
|
+
|
|
143
|
+
Similar to `stylexPropsWithClassName`, this allows you to easily combine `stylex.props` with inline style objects, this is useful if you have custom inline style object, e.g. from dynamically generated styles based on user input.
|
|
144
|
+
|
|
145
|
+
```tsx
|
|
146
|
+
import * as stylex from '@stylexjs/stylex';
|
|
147
|
+
import { stylexPropsWithStyleObject } from 'stylex-webpack/utils';
|
|
148
|
+
|
|
149
|
+
const styles = stylex.create({
|
|
150
|
+
myStyle: {
|
|
151
|
+
color: 'var(--user-input-color)'
|
|
152
|
+
}
|
|
153
|
+
});
|
|
154
|
+
|
|
155
|
+
<div {...stylexPropsWithStyleObject(
|
|
156
|
+
stylex.props(styles.myStyle),
|
|
157
|
+
{
|
|
158
|
+
// You can now easily combine stylex.props with inline style objects
|
|
159
|
+
// This is useful if you have custom inline style object, e.g. from dynamically generated styles based on user input
|
|
160
|
+
'--user-input-color': userInputColor
|
|
161
|
+
}
|
|
162
|
+
)}>
|
|
163
|
+
```
|
|
164
|
+
|
|
165
|
+
#### `type WithXStyleProps`
|
|
166
|
+
|
|
167
|
+
When you are making a reusable component that accepts external styles, `WithXStyleProps` allows you to easily type your component's props to accept external stylex styles via the `xstyle` prop.
|
|
168
|
+
|
|
169
|
+
```tsx
|
|
170
|
+
const buttonStyles = stylex.create({
|
|
171
|
+
base: {}
|
|
172
|
+
});
|
|
173
|
+
|
|
174
|
+
// Now ButtonProps no longer accepts `className` and `style` but accepts `xstyle`.
|
|
175
|
+
export interface ButtonProps extends WithXStyleProps<React.ComponentProps<'button'>> {
|
|
176
|
+
// Your other props goes here
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
export default function Button({ xstyle, ...props }: ButtonProps) {
|
|
180
|
+
return <button {...stylexPropsWithClassName(styles.base, xstyle)} {...props} />;
|
|
181
|
+
}
|
|
182
|
+
```
|
|
183
|
+
|
|
100
184
|
## Options
|
|
101
185
|
|
|
102
186
|
### webpack
|
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.
|
|
8
|
+
var version = "0.4.11";
|
|
9
9
|
|
|
10
10
|
const PLUGIN_NAME = 'stylex';
|
|
11
11
|
const VIRTUAL_ENTRYPOINT_CSS_PATH = require.resolve('./stylex.css');
|
|
@@ -215,9 +215,11 @@ class StyleXPlugin {
|
|
|
215
215
|
stylexImports,
|
|
216
216
|
stylexOption: {
|
|
217
217
|
dev: process.env.NODE_ENV === 'development',
|
|
218
|
-
useRemForFontSize: true,
|
|
218
|
+
// useRemForFontSize: true,
|
|
219
|
+
enableFontSizePxToRem: true,
|
|
219
220
|
runtimeInjection: false,
|
|
220
|
-
genConditionalClasses: true,
|
|
221
|
+
// genConditionalClasses: true,
|
|
222
|
+
enableInlinedConditionalMerge: true,
|
|
221
223
|
treeshakeCompensation: true,
|
|
222
224
|
importSources: stylexImports,
|
|
223
225
|
...stylexOption
|
package/dist/stylex-loader.js
CHANGED
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
var core = require('@babel/core');
|
|
4
4
|
var stylexBabelPlugin = require('@stylexjs/babel-plugin');
|
|
5
5
|
var guard = require('foxts/guard');
|
|
6
|
+
var path = require('node:path');
|
|
6
7
|
|
|
7
8
|
const LOADER_TRANSFORMED_FLAG = '/* [stylex-webpack] stylex-loader transformed */';
|
|
8
9
|
require.resolve('./stylex.css');
|
|
@@ -57,8 +58,9 @@ async function stylexLoader(inputCode, inputSourceMap) {
|
|
|
57
58
|
stylexRules: metadata.stylex
|
|
58
59
|
};
|
|
59
60
|
// Add a dummy virtual import that will be picked up by virtual dummy import loader to add fake CSS to invalidate HMR
|
|
61
|
+
const from = path.relative(this.rootContext, this.resourcePath);
|
|
60
62
|
const urlParams = new URLSearchParams({
|
|
61
|
-
from
|
|
63
|
+
from,
|
|
62
64
|
stylex: JSON.stringify(metadata.stylex) // color: #fff is not url safe, let's get through JSON.stringify
|
|
63
65
|
});
|
|
64
66
|
const virtualCssRequest = stringifyRequest(this, `${VIRTUAL_STYLEX_CSS_DUMMY_IMPORT_PATH}?${urlParams.toString()}`);
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var clsx = require('clsx');
|
|
4
|
+
|
|
5
|
+
function stylexPropsWithClassName(stylexProps, ...inputs) {
|
|
6
|
+
return {
|
|
7
|
+
...stylexProps,
|
|
8
|
+
className: clsx.clsx(stylexProps.className, ...inputs)
|
|
9
|
+
};
|
|
10
|
+
}
|
|
11
|
+
function stylexPropsWithStyleObject(stylexProps, style) {
|
|
12
|
+
return {
|
|
13
|
+
...stylexProps,
|
|
14
|
+
style: {
|
|
15
|
+
...stylexProps.style,
|
|
16
|
+
...style
|
|
17
|
+
}
|
|
18
|
+
};
|
|
19
|
+
}
|
|
20
|
+
const DEFAULT_XSTYLE = [];
|
|
21
|
+
|
|
22
|
+
exports.DEFAULT_XSTYLE = DEFAULT_XSTYLE;
|
|
23
|
+
exports.stylexPropsWithClassName = stylexPropsWithClassName;
|
|
24
|
+
exports.stylexPropsWithStyleObject = stylexPropsWithStyleObject;
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import { ClassValue } from 'clsx';
|
|
2
|
+
import { StaticStyles } from '@stylexjs/stylex';
|
|
3
|
+
|
|
4
|
+
declare function stylexPropsWithClassName(stylexProps: Readonly<{
|
|
5
|
+
className?: string;
|
|
6
|
+
'data-style-src'?: string;
|
|
7
|
+
style?: Readonly<{
|
|
8
|
+
[$$Key$$: string]: string | number;
|
|
9
|
+
}>;
|
|
10
|
+
}>, ...inputs: ClassValue[]): {
|
|
11
|
+
className: string;
|
|
12
|
+
'data-style-src'?: string;
|
|
13
|
+
style?: Readonly<{
|
|
14
|
+
[$$Key$$: string]: string | number;
|
|
15
|
+
}>;
|
|
16
|
+
};
|
|
17
|
+
declare function stylexPropsWithStyleObject(stylexProps: Readonly<{
|
|
18
|
+
className?: string;
|
|
19
|
+
'data-style-src'?: string;
|
|
20
|
+
style?: Readonly<{
|
|
21
|
+
[$$Key$$: string]: string | number;
|
|
22
|
+
}>;
|
|
23
|
+
}>, style: Readonly<{
|
|
24
|
+
[$$Key$$: string]: string | number;
|
|
25
|
+
}>): {
|
|
26
|
+
style: {
|
|
27
|
+
[x: string]: string | number;
|
|
28
|
+
};
|
|
29
|
+
className?: string;
|
|
30
|
+
'data-style-src'?: string;
|
|
31
|
+
};
|
|
32
|
+
type WithXStyleProps<T = object, X extends StaticStyles = StaticStyles> = Omit<T, 'className' | 'style'> & {
|
|
33
|
+
xstyle?: X;
|
|
34
|
+
};
|
|
35
|
+
declare const DEFAULT_XSTYLE: StaticStyles;
|
|
36
|
+
|
|
37
|
+
export { DEFAULT_XSTYLE, stylexPropsWithClassName, stylexPropsWithStyleObject };
|
|
38
|
+
export type { WithXStyleProps };
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { clsx } from 'clsx';
|
|
2
|
+
|
|
3
|
+
function stylexPropsWithClassName(stylexProps, ...inputs) {
|
|
4
|
+
return {
|
|
5
|
+
...stylexProps,
|
|
6
|
+
className: clsx(stylexProps.className, ...inputs)
|
|
7
|
+
};
|
|
8
|
+
}
|
|
9
|
+
function stylexPropsWithStyleObject(stylexProps, style) {
|
|
10
|
+
return {
|
|
11
|
+
...stylexProps,
|
|
12
|
+
style: {
|
|
13
|
+
...stylexProps.style,
|
|
14
|
+
...style
|
|
15
|
+
}
|
|
16
|
+
};
|
|
17
|
+
}
|
|
18
|
+
const DEFAULT_XSTYLE = [];
|
|
19
|
+
|
|
20
|
+
export { DEFAULT_XSTYLE, stylexPropsWithClassName, stylexPropsWithStyleObject };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "stylex-webpack",
|
|
3
|
-
"version": "0.4.
|
|
3
|
+
"version": "0.4.11",
|
|
4
4
|
"description": "The another Webpack Plugin for Facebook's StyleX",
|
|
5
5
|
"homepage": "https://github.com/SukkaW/style9-webpack#readme",
|
|
6
6
|
"repository": {
|
|
@@ -26,14 +26,20 @@
|
|
|
26
26
|
"types": "./dist/next.d.ts",
|
|
27
27
|
"default": "./dist/next.js"
|
|
28
28
|
},
|
|
29
|
-
"./stylex.css": "./dist/stylex.css"
|
|
29
|
+
"./stylex.css": "./dist/stylex.css",
|
|
30
|
+
"./utils": {
|
|
31
|
+
"types": "./dist/utils/index.d.ts",
|
|
32
|
+
"import": "./dist/utils/index.mjs",
|
|
33
|
+
"require": "./dist/utils/index.cjs",
|
|
34
|
+
"default": "./dist/utils/index.cjs"
|
|
35
|
+
}
|
|
30
36
|
},
|
|
31
37
|
"scripts": {
|
|
32
38
|
"prebuild": "premove dist",
|
|
33
39
|
"build": "rollup -c rollup.config.ts --configPlugin swc3 --bundleConfigAsCjs",
|
|
34
40
|
"lint": "eslint --format=sukka .",
|
|
35
|
-
"test": "mocha --require @swc-node/register
|
|
36
|
-
"test:update": "mocha --
|
|
41
|
+
"test": "mocha --require @swc-node/register test/index.ts",
|
|
42
|
+
"test:update": "UPDATE_SNAPSHOTS=true mocha --require @swc-node/register test/index.ts",
|
|
37
43
|
"prerelease": "pnpm run build && pnpm run lint",
|
|
38
44
|
"release": "bumpp -r --all --commit \"release: %s\" --tag \"%s\""
|
|
39
45
|
},
|
|
@@ -49,48 +55,50 @@
|
|
|
49
55
|
"author": "Sukka <https://skk.moe>",
|
|
50
56
|
"license": "MIT",
|
|
51
57
|
"dependencies": {
|
|
52
|
-
"@babel/core": "^7.
|
|
53
|
-
"@babel/plugin-syntax-jsx": "^7.
|
|
54
|
-
"@babel/plugin-syntax-typescript": "^7.
|
|
58
|
+
"@babel/core": "^7.29.0",
|
|
59
|
+
"@babel/plugin-syntax-jsx": "^7.28.6",
|
|
60
|
+
"@babel/plugin-syntax-typescript": "^7.28.6",
|
|
55
61
|
"@types/webpack": "^5.28.5",
|
|
56
|
-
"
|
|
62
|
+
"clsx": "^2.1.1",
|
|
63
|
+
"foxts": "^5.3.0",
|
|
57
64
|
"loader-utils": "^3.3.1"
|
|
58
65
|
},
|
|
59
66
|
"devDependencies": {
|
|
60
|
-
"@eslint-sukka/node": "^8.1
|
|
67
|
+
"@eslint-sukka/node": "^8.7.1",
|
|
61
68
|
"@rollup/plugin-json": "^6.1.0",
|
|
69
|
+
"@stylexjs/stylex": "^0.17.5",
|
|
62
70
|
"@swc-node/register": "^1.11.1",
|
|
63
|
-
"@swc/core": "^1.15.
|
|
71
|
+
"@swc/core": "^1.15.18",
|
|
64
72
|
"@types/babel__core": "^7.20.5",
|
|
65
73
|
"@types/loader-utils": "^3.0.0",
|
|
66
74
|
"@types/mocha": "^10.0.10",
|
|
67
|
-
"@types/node": "^22.19.
|
|
75
|
+
"@types/node": "^22.19.13",
|
|
68
76
|
"browserslist": "^4.28.1",
|
|
69
|
-
"bumpp": "^10.
|
|
70
|
-
"css-loader": "^7.1.
|
|
71
|
-
"
|
|
72
|
-
"eslint
|
|
73
|
-
"eslint-
|
|
74
|
-
"
|
|
75
|
-
"memfs": "^4.
|
|
76
|
-
"mini-css-extract-plugin": "^2.
|
|
77
|
+
"bumpp": "^10.4.1",
|
|
78
|
+
"css-loader": "^7.1.4",
|
|
79
|
+
"earl": "^2.0.0",
|
|
80
|
+
"eslint": "^9.39.3",
|
|
81
|
+
"eslint-config-sukka": "^8.7.1",
|
|
82
|
+
"eslint-formatter-sukka": "^8.7.1",
|
|
83
|
+
"memfs": "^4.56.10",
|
|
84
|
+
"mini-css-extract-plugin": "^2.10.0",
|
|
77
85
|
"mocha": "^11.7.5",
|
|
78
|
-
"
|
|
79
|
-
"
|
|
80
|
-
"postcss": "^8.5.6",
|
|
86
|
+
"next": "^15.5.12",
|
|
87
|
+
"postcss": "^8.5.8",
|
|
81
88
|
"premove": "^4.0.0",
|
|
82
|
-
"rollup": "^4.
|
|
89
|
+
"rollup": "^4.59.0",
|
|
83
90
|
"rollup-plugin-copy": "^3.5.0",
|
|
84
91
|
"rollup-plugin-dts": "^6.3.0",
|
|
85
92
|
"rollup-plugin-swc3": "^0.12.1",
|
|
86
|
-
"swc-loader": "^0.2.
|
|
93
|
+
"swc-loader": "^0.2.7",
|
|
87
94
|
"typescript": "^5.9.3",
|
|
88
|
-
"webpack": "^5.
|
|
95
|
+
"webpack": "^5.105.3"
|
|
89
96
|
},
|
|
90
97
|
"peerDependencies": {
|
|
91
|
-
"@stylexjs/babel-plugin": "*"
|
|
98
|
+
"@stylexjs/babel-plugin": "*",
|
|
99
|
+
"@stylexjs/stylex": "*"
|
|
92
100
|
},
|
|
93
|
-
"packageManager": "pnpm@10.
|
|
101
|
+
"packageManager": "pnpm@10.30.3",
|
|
94
102
|
"pnpm": {
|
|
95
103
|
"overrides": {
|
|
96
104
|
"eslint>chalk": "npm:picocolors@^1.1.1"
|