@stylexjs/rollup-plugin 0.7.2 → 0.7.4

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.
@@ -0,0 +1,115 @@
1
+ import { transformAsync } from '@babel/core';
2
+ import stylexBabelPlugin from '@stylexjs/babel-plugin';
3
+ import flowSyntaxPlugin from '@babel/plugin-syntax-flow';
4
+ import jsxSyntaxPlugin from '@babel/plugin-syntax-jsx';
5
+ import typescriptSyntaxPlugin from '@babel/plugin-syntax-typescript';
6
+ import path from 'path';
7
+ const IS_DEV_ENV = process.env.NODE_ENV === 'development' || process.env.BABEL_ENV === 'development';
8
+ export default function stylexPlugin() {
9
+ let {
10
+ dev = IS_DEV_ENV,
11
+ unstable_moduleResolution = {
12
+ type: 'commonJS',
13
+ rootDir: process.cwd()
14
+ },
15
+ fileName = 'stylex.css',
16
+ babelConfig: {
17
+ plugins = [],
18
+ presets = []
19
+ } = {},
20
+ importSources = ['stylex', '@stylexjs/stylex'],
21
+ useCSSLayers = false,
22
+ ...options
23
+ } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
24
+ let stylexRules = {};
25
+ return {
26
+ name: 'rollup-plugin-stylex',
27
+ buildStart() {
28
+ stylexRules = {};
29
+ },
30
+ generateBundle() {
31
+ const rules = Object.values(stylexRules).flat();
32
+ if (rules.length > 0) {
33
+ const collectedCSS = stylexBabelPlugin.processStylexRules(rules, useCSSLayers);
34
+ this.emitFile({
35
+ fileName,
36
+ source: collectedCSS,
37
+ type: 'asset'
38
+ });
39
+ }
40
+ },
41
+ shouldTransformCachedModule(_ref) {
42
+ let {
43
+ code: _code,
44
+ id,
45
+ meta
46
+ } = _ref;
47
+ stylexRules[id] = meta.stylex;
48
+ return false;
49
+ },
50
+ async transform(inputCode, id) {
51
+ if (!importSources.some(importName => typeof importName === 'string' ? inputCode.includes(importName) : inputCode.includes(importName.from))) {
52
+ return null;
53
+ }
54
+ const result = await transformAsync(inputCode, {
55
+ babelrc: false,
56
+ filename: id,
57
+ presets,
58
+ plugins: [...plugins, /\.jsx?/.test(path.extname(id)) ? flowSyntaxPlugin : [typescriptSyntaxPlugin, {
59
+ isTSX: true
60
+ }], jsxSyntaxPlugin, stylexBabelPlugin.withOptions({
61
+ ...options,
62
+ dev,
63
+ unstable_moduleResolution
64
+ })],
65
+ caller: {
66
+ name: '@stylexjs/rollup-plugin',
67
+ supportsStaticESM: true,
68
+ supportsDynamicImport: true,
69
+ supportsTopLevelAwait: !inputCode.includes('require('),
70
+ supportsExportNamespaceFrom: true
71
+ }
72
+ });
73
+ if (result == null) {
74
+ console.warn('stylex: transformAsync returned null');
75
+ return {
76
+ code: inputCode
77
+ };
78
+ }
79
+ const {
80
+ code,
81
+ map,
82
+ metadata
83
+ } = result;
84
+ if (code == null) {
85
+ console.warn('stylex: transformAsync returned null code');
86
+ return {
87
+ code: inputCode
88
+ };
89
+ }
90
+ const self = this;
91
+ if (self.meta.watchMode) {
92
+ const ast = self.parse(code);
93
+ for (const stmt of ast.body) {
94
+ if (stmt.type === 'ImportDeclaration') {
95
+ const resolved = await self.resolve(stmt.source.value, id);
96
+ if (resolved && !resolved.external) {
97
+ const result = await self.load(resolved);
98
+ if (result && result.meta && 'stylex' in result.meta) {
99
+ stylexRules[resolved.id] = result.meta.stylex;
100
+ }
101
+ }
102
+ }
103
+ }
104
+ }
105
+ if (!dev && metadata.stylex != null && metadata.stylex.length > 0) {
106
+ stylexRules[id] = metadata.stylex;
107
+ }
108
+ return {
109
+ code,
110
+ map: map,
111
+ meta: metadata
112
+ };
113
+ }
114
+ };
115
+ }
package/lib/index.d.ts ADDED
@@ -0,0 +1,34 @@
1
+ /**
2
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
3
+ *
4
+ * This source code is licensed under the MIT license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ *
7
+ *
8
+ */
9
+
10
+ import { type PluginItem } from '@babel/core';
11
+ import type { Options } from '@stylexjs/babel-plugin';
12
+ import type { Plugin } from 'rollup';
13
+ export type PluginOptions = Readonly<
14
+ Omit<
15
+ Partial<Options>,
16
+ keyof ({
17
+ fileName?: string;
18
+ babelConfig?: Readonly<{
19
+ plugins?: ReadonlyArray<PluginItem>;
20
+ presets?: ReadonlyArray<PluginItem>;
21
+ }>;
22
+ useCSSLayers?: boolean;
23
+ })
24
+ > & {
25
+ fileName?: string;
26
+ babelConfig?: Readonly<{
27
+ plugins?: ReadonlyArray<PluginItem>;
28
+ presets?: ReadonlyArray<PluginItem>;
29
+ }>;
30
+ useCSSLayers?: boolean;
31
+ }
32
+ >;
33
+ declare function stylexPlugin($$PARAM_0$$: PluginOptions): Plugin;
34
+ export default stylexPlugin;
package/lib/index.js ADDED
@@ -0,0 +1,122 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = stylexPlugin;
7
+ var _core = require("@babel/core");
8
+ var _babelPlugin = _interopRequireDefault(require("@stylexjs/babel-plugin"));
9
+ var _pluginSyntaxFlow = _interopRequireDefault(require("@babel/plugin-syntax-flow"));
10
+ var _pluginSyntaxJsx = _interopRequireDefault(require("@babel/plugin-syntax-jsx"));
11
+ var _pluginSyntaxTypescript = _interopRequireDefault(require("@babel/plugin-syntax-typescript"));
12
+ var _path = _interopRequireDefault(require("path"));
13
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
14
+ const IS_DEV_ENV = process.env.NODE_ENV === 'development' || process.env.BABEL_ENV === 'development';
15
+ function stylexPlugin() {
16
+ let {
17
+ dev = IS_DEV_ENV,
18
+ unstable_moduleResolution = {
19
+ type: 'commonJS',
20
+ rootDir: process.cwd()
21
+ },
22
+ fileName = 'stylex.css',
23
+ babelConfig: {
24
+ plugins = [],
25
+ presets = []
26
+ } = {},
27
+ importSources = ['stylex', '@stylexjs/stylex'],
28
+ useCSSLayers = false,
29
+ ...options
30
+ } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
31
+ let stylexRules = {};
32
+ return {
33
+ name: 'rollup-plugin-stylex',
34
+ buildStart() {
35
+ stylexRules = {};
36
+ },
37
+ generateBundle() {
38
+ const rules = Object.values(stylexRules).flat();
39
+ if (rules.length > 0) {
40
+ const collectedCSS = _babelPlugin.default.processStylexRules(rules, useCSSLayers);
41
+ this.emitFile({
42
+ fileName,
43
+ source: collectedCSS,
44
+ type: 'asset'
45
+ });
46
+ }
47
+ },
48
+ shouldTransformCachedModule(_ref) {
49
+ let {
50
+ code: _code,
51
+ id,
52
+ meta
53
+ } = _ref;
54
+ stylexRules[id] = meta.stylex;
55
+ return false;
56
+ },
57
+ async transform(inputCode, id) {
58
+ if (!importSources.some(importName => typeof importName === 'string' ? inputCode.includes(importName) : inputCode.includes(importName.from))) {
59
+ return null;
60
+ }
61
+ const result = await (0, _core.transformAsync)(inputCode, {
62
+ babelrc: false,
63
+ filename: id,
64
+ presets,
65
+ plugins: [...plugins, /\.jsx?/.test(_path.default.extname(id)) ? _pluginSyntaxFlow.default : [_pluginSyntaxTypescript.default, {
66
+ isTSX: true
67
+ }], _pluginSyntaxJsx.default, _babelPlugin.default.withOptions({
68
+ ...options,
69
+ dev,
70
+ unstable_moduleResolution
71
+ })],
72
+ caller: {
73
+ name: '@stylexjs/rollup-plugin',
74
+ supportsStaticESM: true,
75
+ supportsDynamicImport: true,
76
+ supportsTopLevelAwait: !inputCode.includes('require('),
77
+ supportsExportNamespaceFrom: true
78
+ }
79
+ });
80
+ if (result == null) {
81
+ console.warn('stylex: transformAsync returned null');
82
+ return {
83
+ code: inputCode
84
+ };
85
+ }
86
+ const {
87
+ code,
88
+ map,
89
+ metadata
90
+ } = result;
91
+ if (code == null) {
92
+ console.warn('stylex: transformAsync returned null code');
93
+ return {
94
+ code: inputCode
95
+ };
96
+ }
97
+ const self = this;
98
+ if (self.meta.watchMode) {
99
+ const ast = self.parse(code);
100
+ for (const stmt of ast.body) {
101
+ if (stmt.type === 'ImportDeclaration') {
102
+ const resolved = await self.resolve(stmt.source.value, id);
103
+ if (resolved && !resolved.external) {
104
+ const result = await self.load(resolved);
105
+ if (result && result.meta && 'stylex' in result.meta) {
106
+ stylexRules[resolved.id] = result.meta.stylex;
107
+ }
108
+ }
109
+ }
110
+ }
111
+ }
112
+ if (!dev && metadata.stylex != null && metadata.stylex.length > 0) {
113
+ stylexRules[id] = metadata.stylex;
114
+ }
115
+ return {
116
+ code,
117
+ map: map,
118
+ meta: metadata
119
+ };
120
+ }
121
+ };
122
+ }
@@ -0,0 +1,25 @@
1
+ /**
2
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
3
+ *
4
+ * This source code is licensed under the MIT license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ *
7
+ * @flow strict
8
+ */
9
+
10
+ import { type PluginItem } from '../flow_modules/@babel/core';
11
+ import type { Options } from '@stylexjs/babel-plugin';
12
+ import type { Plugin } from '../flow_modules/rollup';
13
+
14
+ export type PluginOptions = $ReadOnly<{
15
+ ...Partial<Options>,
16
+ fileName?: string,
17
+ babelConfig?: $ReadOnly<{
18
+ plugins?: $ReadOnlyArray<PluginItem>,
19
+ presets?: $ReadOnlyArray<PluginItem>,
20
+ }>,
21
+ useCSSLayers?: boolean,
22
+ ...
23
+ }>;
24
+
25
+ declare export default function stylexPlugin(PluginOptions): Plugin<>;
package/package.json CHANGED
@@ -1,16 +1,14 @@
1
1
  {
2
2
  "name": "@stylexjs/rollup-plugin",
3
- "version": "0.7.2",
3
+ "version": "0.7.4",
4
4
  "description": "Rollup plugin for StyleX",
5
5
  "main": "./lib/index.js",
6
6
  "module": "./lib/es/index.mjs",
7
7
  "types": "./lib/index.d.ts",
8
8
  "exports": {
9
- ".": {
10
- "import": "./lib/es/index.mjs",
11
- "require": "./lib/index.js",
12
- "types": "./lib/index.d.ts"
13
- }
9
+ "import": "./lib/es/index.mjs",
10
+ "require": "./lib/index.js",
11
+ "types": "./lib/index.d.ts"
14
12
  },
15
13
  "repository": {
16
14
  "type": "git",
@@ -34,9 +32,13 @@
34
32
  },
35
33
  "dependencies": {
36
34
  "@babel/core": "^7.23.9",
37
- "@stylexjs/babel-plugin": "0.7.2",
35
+ "@stylexjs/babel-plugin": "0.7.4",
38
36
  "@babel/plugin-syntax-flow": "^7.23.3",
39
37
  "@babel/plugin-syntax-jsx": "^7.23.3",
40
38
  "@babel/plugin-syntax-typescript": "^7.23.3"
41
- }
39
+ },
40
+ "files": [
41
+ "flow_modules/*",
42
+ "lib/*"
43
+ ]
42
44
  }
package/.babelrc.cjs DELETED
@@ -1,20 +0,0 @@
1
- module.exports = {
2
- assumptions: {
3
- iterableIsArray: true,
4
- },
5
- presets: [
6
- [
7
- '@babel/preset-env',
8
- {
9
- exclude: ['@babel/plugin-transform-typeof-symbol'],
10
- targets: 'defaults',
11
- modules:
12
- process.env.NODE_ENV === 'test' || process.env.BABEL_ENV === 'cjs'
13
- ? 'commonjs'
14
- : false,
15
- },
16
- ],
17
- '@babel/preset-flow',
18
- ],
19
- plugins: [['babel-plugin-syntax-hermes-parser', { flow: 'detect' }]],
20
- };
@@ -1,12 +0,0 @@
1
- {
2
- "presets": [
3
- [
4
- "@babel/preset-env",
5
- {
6
- "targets": {
7
- "ie": 11
8
- }
9
- }
10
- ]
11
- ]
12
- }
@@ -1,42 +0,0 @@
1
- /**
2
- * Copyright (c) Meta Platforms, Inc. and affiliates.
3
- *
4
- * This source code is licensed under the MIT license found in the
5
- * LICENSE file in the root directory of this source tree.
6
- *
7
- *
8
- */
9
-
10
- // index.js
11
-
12
- 'use strict';
13
-
14
- import stylex from 'stylex';
15
- import otherStyles from './otherStyles';
16
- import npmStyles from './npmStyles';
17
-
18
- const fadeAnimation = stylex.keyframes({
19
- '0%': {
20
- opacity: 0.25,
21
- },
22
- '100%': {
23
- opacity: 1,
24
- },
25
- });
26
-
27
- const styles = stylex.create({
28
- foo: {
29
- animationName: fadeAnimation,
30
- display: 'flex',
31
- marginStart: 10,
32
- marginBlockStart: 99,
33
- height: 500,
34
- ':hover': {
35
- background: 'red',
36
- },
37
- },
38
- });
39
-
40
- export default function App() {
41
- return stylex(otherStyles.bar, styles.foo, npmStyles.baz);
42
- }
@@ -1,24 +0,0 @@
1
- /**
2
- * Copyright (c) Meta Platforms, Inc. and affiliates.
3
- *
4
- * This source code is licensed under the MIT license found in the
5
- * LICENSE file in the root directory of this source tree.
6
- *
7
- *
8
- */
9
-
10
- // npmStyles.js
11
-
12
- 'use strict';
13
-
14
- import stylex from 'stylex';
15
-
16
- const styles = stylex.create({
17
- baz: {
18
- display: 'inline',
19
- height: 500,
20
- width: '50%',
21
- },
22
- });
23
-
24
- export default styles;
@@ -1,23 +0,0 @@
1
- /**
2
- * Copyright (c) Meta Platforms, Inc. and affiliates.
3
- *
4
- * This source code is licensed under the MIT license found in the
5
- * LICENSE file in the root directory of this source tree.
6
- *
7
- *
8
- */
9
-
10
- // otherStyles.js
11
-
12
- 'use strict';
13
-
14
- import stylex from 'stylex';
15
-
16
- const styles = stylex.create({
17
- bar: {
18
- display: 'block',
19
- width: '100%',
20
- },
21
- });
22
-
23
- export default styles;
@@ -1,273 +0,0 @@
1
- /**
2
- * Copyright (c) Meta Platforms, Inc. and affiliates.
3
- *
4
- * This source code is licensed under the MIT license found in the
5
- * LICENSE file in the root directory of this source tree.
6
- *
7
- *
8
- */
9
-
10
- 'use strict';
11
-
12
- import path from 'path';
13
- import rollup from 'rollup';
14
- import { babel } from '@rollup/plugin-babel';
15
- import commonjs from '@rollup/plugin-commonjs';
16
- import { nodeResolve } from '@rollup/plugin-node-resolve';
17
- import stylexPlugin from '../src/index';
18
-
19
- describe('rollup-plugin-stylex', () => {
20
- async function runStylex(options) {
21
- // Configure a rollup bundle
22
- const bundle = await rollup.rollup({
23
- // Remove stylex runtime from bundle
24
- external: [
25
- 'stylex',
26
- '@stylexjs/stylex',
27
- '@stylexjs/stylex/lib/stylex-inject',
28
- ],
29
- input: path.resolve(__dirname, '__fixtures__/index.js'),
30
- plugins: [
31
- nodeResolve(),
32
- commonjs(),
33
- babel({
34
- babelHelpers: 'bundled',
35
- configFile: path.resolve(__dirname, '__fixtures__/.babelrc.json'),
36
- exclude: [/npmStyles\.js/],
37
- }),
38
- stylexPlugin({ useCSSLayers: true, ...options }),
39
- ],
40
- });
41
-
42
- // Generate output specific code in-memory
43
- // You can call this function multiple times on the same bundle object
44
- const { output } = await bundle.generate({
45
- file: path.resolve(__dirname, '/__builds__/bundle.js'),
46
- });
47
-
48
- let css, js;
49
-
50
- for (const chunkOrAsset of output) {
51
- if (chunkOrAsset.fileName === 'stylex.css') {
52
- css = chunkOrAsset.source;
53
- } else if (chunkOrAsset.fileName === 'bundle.js') {
54
- js = chunkOrAsset.code;
55
- }
56
- }
57
-
58
- return { css, js };
59
- }
60
-
61
- it('extracts CSS and removes stylex.inject calls', async () => {
62
- const { css, js } = await runStylex({ fileName: 'stylex.css' });
63
-
64
- expect(css).toMatchInlineSnapshot(`
65
- "
66
- @layer priority1, priority2, priority3, priority4;
67
- @layer priority1{
68
- @keyframes xgnty7z-B{0%{opacity:.25;}100%{opacity:1;}}
69
- }
70
- @layer priority2{
71
- .x1oz5o6v:hover{background:red}
72
- }
73
- @layer priority3{
74
- .xeuoslp{animation-name:xgnty7z-B}
75
- .x1lliihq{display:block}
76
- .x78zum5{display:flex}
77
- .xt0psk2{display:inline}
78
- .x1hm9lzh{margin-inline-start:10px}
79
- }
80
- @layer priority4{
81
- .x1egiwwb{height:500px}
82
- .xlrshdv{margin-top:99px}
83
- .xh8yej3{width:100%}
84
- .x3hqpx7{width:50%}
85
- }"
86
- `);
87
-
88
- expect(js).toMatchInlineSnapshot(`
89
- "import stylex from 'stylex';
90
-
91
- /**
92
- * Copyright (c) Meta Platforms, Inc. and affiliates.
93
- *
94
- * This source code is licensed under the MIT license found in the
95
- * LICENSE file in the root directory of this source tree.
96
- *
97
- *
98
- */
99
-
100
- var styles$2 = {
101
- bar: {
102
- display: "x1lliihq",
103
- width: "xh8yej3",
104
- $$css: true
105
- }
106
- };
107
-
108
- /**
109
- * Copyright (c) Meta Platforms, Inc. and affiliates.
110
- *
111
- * This source code is licensed under the MIT license found in the
112
- * LICENSE file in the root directory of this source tree.
113
- *
114
- *
115
- */
116
-
117
- const styles$1 = {
118
- baz: {
119
- display: "xt0psk2",
120
- height: "x1egiwwb",
121
- width: "x3hqpx7",
122
- $$css: true
123
- }
124
- };
125
-
126
- /**
127
- * Copyright (c) Meta Platforms, Inc. and affiliates.
128
- *
129
- * This source code is licensed under the MIT license found in the
130
- * LICENSE file in the root directory of this source tree.
131
- *
132
- *
133
- */
134
-
135
- var styles = {
136
- foo: {
137
- animationName: "xeuoslp",
138
- display: "x78zum5",
139
- marginInlineStart: "x1hm9lzh",
140
- marginLeft: null,
141
- marginRight: null,
142
- marginTop: "xlrshdv",
143
- height: "x1egiwwb",
144
- ":hover_background": "x1oz5o6v",
145
- ":hover_backgroundAttachment": null,
146
- ":hover_backgroundClip": null,
147
- ":hover_backgroundColor": null,
148
- ":hover_backgroundImage": null,
149
- ":hover_backgroundOrigin": null,
150
- ":hover_backgroundPosition": null,
151
- ":hover_backgroundPositionX": null,
152
- ":hover_backgroundPositionY": null,
153
- ":hover_backgroundRepeat": null,
154
- ":hover_backgroundSize": null,
155
- $$css: true
156
- }
157
- };
158
- function App() {
159
- return stylex(styles$2.bar, styles.foo, styles$1.baz);
160
- }
161
-
162
- export { App as default };
163
- "
164
- `);
165
- });
166
-
167
- describe('when in dev mode', () => {
168
- it('preserves stylex.inject calls and does not extract CSS', async () => {
169
- const { css, js } = await runStylex({
170
- dev: true,
171
- });
172
-
173
- expect(css).toBeUndefined();
174
-
175
- expect(js).toMatchInlineSnapshot(`
176
- "import _inject from '@stylexjs/stylex/lib/stylex-inject';
177
- import stylex from 'stylex';
178
-
179
- /**
180
- * Copyright (c) Meta Platforms, Inc. and affiliates.
181
- *
182
- * This source code is licensed under the MIT license found in the
183
- * LICENSE file in the root directory of this source tree.
184
- *
185
- *
186
- */
187
-
188
- var _inject2$2 = _inject;
189
- _inject2$2(".x1lliihq{display:block}", 3000);
190
- _inject2$2(".xh8yej3{width:100%}", 4000);
191
- var styles$2 = {
192
- bar: {
193
- "otherStyles__styles.bar": "otherStyles__styles.bar",
194
- display: "x1lliihq",
195
- width: "xh8yej3",
196
- $$css: true
197
- }
198
- };
199
-
200
- /**
201
- * Copyright (c) Meta Platforms, Inc. and affiliates.
202
- *
203
- * This source code is licensed under the MIT license found in the
204
- * LICENSE file in the root directory of this source tree.
205
- *
206
- *
207
- */
208
-
209
- var _inject2$1 = _inject;
210
- _inject2$1(".xt0psk2{display:inline}", 3000);
211
- _inject2$1(".x1egiwwb{height:500px}", 4000);
212
- _inject2$1(".x3hqpx7{width:50%}", 4000);
213
- const styles$1 = {
214
- baz: {
215
- "npmStyles__styles.baz": "npmStyles__styles.baz",
216
- display: "xt0psk2",
217
- height: "x1egiwwb",
218
- width: "x3hqpx7",
219
- $$css: true
220
- }
221
- };
222
-
223
- /**
224
- * Copyright (c) Meta Platforms, Inc. and affiliates.
225
- *
226
- * This source code is licensed under the MIT license found in the
227
- * LICENSE file in the root directory of this source tree.
228
- *
229
- *
230
- */
231
-
232
- var _inject2 = _inject;
233
- _inject2("@keyframes xgnty7z-B{0%{opacity:.25;}100%{opacity:1;}}", 1);
234
- _inject2(".xeuoslp{animation-name:xgnty7z-B}", 3000);
235
- _inject2(".x78zum5{display:flex}", 3000);
236
- _inject2(".x1hm9lzh{margin-inline-start:10px}", 3000);
237
- _inject2(".xlrshdv{margin-top:99px}", 4000);
238
- _inject2(".x1egiwwb{height:500px}", 4000);
239
- _inject2(".x1oz5o6v:hover{background:red}", 1130);
240
- var styles = {
241
- foo: {
242
- "index__styles.foo": "index__styles.foo",
243
- animationName: "xeuoslp",
244
- display: "x78zum5",
245
- marginInlineStart: "x1hm9lzh",
246
- marginLeft: null,
247
- marginRight: null,
248
- marginTop: "xlrshdv",
249
- height: "x1egiwwb",
250
- ":hover_background": "x1oz5o6v",
251
- ":hover_backgroundAttachment": null,
252
- ":hover_backgroundClip": null,
253
- ":hover_backgroundColor": null,
254
- ":hover_backgroundImage": null,
255
- ":hover_backgroundOrigin": null,
256
- ":hover_backgroundPosition": null,
257
- ":hover_backgroundPositionX": null,
258
- ":hover_backgroundPositionY": null,
259
- ":hover_backgroundRepeat": null,
260
- ":hover_backgroundSize": null,
261
- $$css: true
262
- }
263
- };
264
- function App() {
265
- return stylex(styles$2.bar, styles.foo, styles$1.baz);
266
- }
267
-
268
- export { App as default };
269
- "
270
- `);
271
- });
272
- });
273
- });
package/src/index.js DELETED
@@ -1,155 +0,0 @@
1
- /**
2
- * Copyright (c) Meta Platforms, Inc. and affiliates.
3
- *
4
- * This source code is licensed under the MIT license found in the
5
- * LICENSE file in the root directory of this source tree.
6
- *
7
- * @flow strict
8
- */
9
-
10
- import { transformAsync, type PluginItem } from '@babel/core';
11
- import stylexBabelPlugin from '@stylexjs/babel-plugin';
12
- import flowSyntaxPlugin from '@babel/plugin-syntax-flow';
13
- import jsxSyntaxPlugin from '@babel/plugin-syntax-jsx';
14
- import typescriptSyntaxPlugin from '@babel/plugin-syntax-typescript';
15
- import path from 'path';
16
- import type { Options, Rule } from '@stylexjs/babel-plugin';
17
- import type {
18
- Plugin,
19
- PluginContext,
20
- TransformResult,
21
- TransformPluginContext,
22
- } from 'rollup';
23
-
24
- const IS_DEV_ENV =
25
- process.env.NODE_ENV === 'development' ||
26
- process.env.BABEL_ENV === 'development';
27
-
28
- export type PluginOptions = $ReadOnly<{
29
- ...Partial<Options>,
30
- fileName?: string,
31
- babelConfig?: $ReadOnly<{
32
- plugins?: $ReadOnlyArray<PluginItem>,
33
- presets?: $ReadOnlyArray<PluginItem>,
34
- }>,
35
- useCSSLayers?: boolean,
36
- ...
37
- }>;
38
-
39
- export default function stylexPlugin({
40
- dev = IS_DEV_ENV,
41
- unstable_moduleResolution = { type: 'commonJS', rootDir: process.cwd() },
42
- fileName = 'stylex.css',
43
- babelConfig: { plugins = [], presets = [] } = {},
44
- importSources = ['stylex', '@stylexjs/stylex'],
45
- useCSSLayers = false,
46
- ...options
47
- }: PluginOptions = {}): Plugin<> {
48
- let stylexRules: { [string]: $ReadOnlyArray<Rule> } = {};
49
- return {
50
- name: 'rollup-plugin-stylex',
51
- buildStart() {
52
- stylexRules = {};
53
- },
54
- generateBundle(this: PluginContext) {
55
- const rules: Array<Rule> = Object.values(stylexRules).flat();
56
- if (rules.length > 0) {
57
- const collectedCSS = stylexBabelPlugin.processStylexRules(
58
- rules,
59
- useCSSLayers,
60
- );
61
-
62
- // This is the intended API, but Flow doesn't support this pattern.
63
- // $FlowExpectedError[object-this-reference]
64
- this.emitFile({
65
- fileName,
66
- source: collectedCSS,
67
- type: 'asset',
68
- });
69
- }
70
- },
71
- shouldTransformCachedModule({ code: _code, id, meta }) {
72
- stylexRules[id] = meta.stylex;
73
- return false;
74
- },
75
- async transform(
76
- this: TransformPluginContext,
77
- inputCode: string,
78
- id: string,
79
- ): Promise<null | TransformResult> {
80
- if (
81
- !importSources.some((importName) =>
82
- typeof importName === 'string'
83
- ? inputCode.includes(importName)
84
- : inputCode.includes(importName.from),
85
- )
86
- ) {
87
- // In rollup, returning null from any plugin phase means
88
- // "no changes made".
89
- return null;
90
- }
91
-
92
- const result = await transformAsync(inputCode, {
93
- babelrc: false,
94
- filename: id,
95
- presets,
96
- plugins: [
97
- ...plugins,
98
- /\.jsx?/.test(path.extname(id))
99
- ? flowSyntaxPlugin
100
- : [typescriptSyntaxPlugin, { isTSX: true }],
101
- jsxSyntaxPlugin,
102
- stylexBabelPlugin.withOptions({
103
- ...options,
104
- dev,
105
- unstable_moduleResolution,
106
- }),
107
- ],
108
- caller: {
109
- name: '@stylexjs/rollup-plugin',
110
- supportsStaticESM: true,
111
- supportsDynamicImport: true,
112
- supportsTopLevelAwait: !inputCode.includes('require('),
113
- supportsExportNamespaceFrom: true,
114
- },
115
- });
116
- if (result == null) {
117
- console.warn('stylex: transformAsync returned null');
118
- return { code: inputCode };
119
- }
120
- const { code, map, metadata } = result;
121
- if (code == null) {
122
- console.warn('stylex: transformAsync returned null code');
123
- return { code: inputCode };
124
- }
125
-
126
- // $FlowExpectedError[object-this-reference]
127
- const self = this;
128
-
129
- if (self.meta.watchMode) {
130
- const ast = self.parse(code);
131
- for (const stmt of ast.body) {
132
- if (stmt.type === 'ImportDeclaration') {
133
- const resolved = await self.resolve(stmt.source.value, id);
134
- if (resolved && !resolved.external) {
135
- const result = await self.load(resolved);
136
- if (result && result.meta && 'stylex' in result.meta) {
137
- stylexRules[resolved.id] = result.meta.stylex;
138
- }
139
- }
140
- }
141
- }
142
- }
143
-
144
- if (
145
- !dev &&
146
- (metadata as $FlowFixMe).stylex != null &&
147
- (metadata as $FlowFixMe).stylex.length > 0
148
- ) {
149
- stylexRules[id] = (metadata as $FlowFixMe).stylex;
150
- }
151
-
152
- return { code, map: map as $FlowFixMe, meta: metadata as $FlowFixMe };
153
- },
154
- };
155
- }