@stylexjs/unplugin 0.17.4 → 0.18.0
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 +49 -15
- package/lib/bun.d.ts +20 -0
- package/lib/bun.js +81 -0
- package/lib/core.d.ts +27 -0
- package/lib/core.js +420 -0
- package/lib/es/bun.mjs +73 -0
- package/lib/es/core.mjs +410 -0
- package/lib/es/esbuild.mjs +53 -0
- package/lib/es/farm.mjs +3 -0
- package/lib/es/index.mjs +26 -596
- package/lib/es/rolldown.mjs +4 -0
- package/lib/es/rollup.mjs +64 -0
- package/lib/es/rspack.mjs +4 -0
- package/lib/es/unloader.mjs +3 -0
- package/lib/es/vite.mjs +174 -0
- package/lib/es/webpack.mjs +43 -0
- package/lib/esbuild.d.ts +12 -0
- package/lib/esbuild.js +60 -0
- package/lib/farm.d.ts +12 -0
- package/lib/farm.js +9 -0
- package/lib/index.d.ts +25 -13
- package/lib/index.js +82 -585
- package/lib/rolldown.d.ts +12 -0
- package/lib/rolldown.js +10 -0
- package/lib/rollup.d.ts +12 -0
- package/lib/rollup.js +72 -0
- package/lib/rspack.d.ts +12 -0
- package/lib/rspack.js +10 -0
- package/lib/unloader.d.ts +12 -0
- package/lib/unloader.js +9 -0
- package/lib/vite.d.ts +12 -0
- package/lib/vite.js +181 -0
- package/lib/webpack.d.ts +12 -0
- package/lib/webpack.js +50 -0
- package/package.json +52 -5
package/lib/index.js
CHANGED
|
@@ -3,600 +3,97 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
var _pluginSyntaxFlow = _interopRequireDefault(require("@babel/plugin-syntax-flow"));
|
|
11
|
-
var _pluginSyntaxJsx = _interopRequireDefault(require("@babel/plugin-syntax-jsx"));
|
|
12
|
-
var _pluginSyntaxTypescript = _interopRequireDefault(require("@babel/plugin-syntax-typescript"));
|
|
13
|
-
var _nodePath = _interopRequireDefault(require("node:path"));
|
|
14
|
-
var _nodeFs = _interopRequireDefault(require("node:fs"));
|
|
15
|
-
var _promises = _interopRequireDefault(require("node:fs/promises"));
|
|
16
|
-
var _nodeModule = require("node:module");
|
|
17
|
-
var _lightningcss = require("lightningcss");
|
|
18
|
-
var _browserslist = _interopRequireDefault(require("browserslist"));
|
|
19
|
-
var _devInjectMiddleware = require("./dev-inject-middleware");
|
|
20
|
-
var _consts = require("./consts");
|
|
21
|
-
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
22
|
-
function pickCssAssetFromRollupBundle(bundle, choose) {
|
|
23
|
-
const assets = Object.values(bundle).filter(a => a && a.type === 'asset' && typeof a.fileName === 'string' && a.fileName.endsWith('.css'));
|
|
24
|
-
if (assets.length === 0) return null;
|
|
25
|
-
if (typeof choose === 'function') {
|
|
26
|
-
const chosen = assets.find(a => choose(a.fileName));
|
|
27
|
-
if (chosen) return chosen;
|
|
28
|
-
}
|
|
29
|
-
const best = assets.find(a => /(^|\/)index\.css$/.test(a.fileName)) || assets.find(a => /(^|\/)style\.css$/.test(a.fileName));
|
|
30
|
-
return best || assets[0];
|
|
31
|
-
}
|
|
32
|
-
function processCollectedRulesToCSS(rules, options) {
|
|
33
|
-
if (!rules || rules.length === 0) return '';
|
|
34
|
-
const collectedCSS = _babelPlugin.default.processStylexRules(rules, {
|
|
35
|
-
useLayers: !!options.useCSSLayers,
|
|
36
|
-
enableLTRRTLComments: options?.enableLTRRTLComments
|
|
37
|
-
});
|
|
38
|
-
const {
|
|
39
|
-
code
|
|
40
|
-
} = (0, _lightningcss.transform)({
|
|
41
|
-
targets: (0, _lightningcss.browserslistToTargets)((0, _browserslist.default)('>= 1%')),
|
|
42
|
-
...options.lightningcssOptions,
|
|
43
|
-
filename: 'stylex.css',
|
|
44
|
-
code: Buffer.from(collectedCSS)
|
|
45
|
-
});
|
|
46
|
-
return code.toString();
|
|
47
|
-
}
|
|
48
|
-
function readJSON(file) {
|
|
49
|
-
try {
|
|
50
|
-
const content = _nodeFs.default.readFileSync(file, 'utf8');
|
|
51
|
-
return JSON.parse(content);
|
|
52
|
-
} catch {
|
|
53
|
-
return null;
|
|
54
|
-
}
|
|
55
|
-
}
|
|
56
|
-
function findNearestPackageJson(startDir) {
|
|
57
|
-
let dir = startDir;
|
|
58
|
-
for (;;) {
|
|
59
|
-
const candidate = _nodePath.default.join(dir, 'package.json');
|
|
60
|
-
if (_nodeFs.default.existsSync(candidate)) return candidate;
|
|
61
|
-
const parent = _nodePath.default.dirname(dir);
|
|
62
|
-
if (parent === dir) break;
|
|
63
|
-
dir = parent;
|
|
64
|
-
}
|
|
65
|
-
return null;
|
|
66
|
-
}
|
|
67
|
-
function toPackageName(importSource) {
|
|
68
|
-
const source = typeof importSource === 'string' ? importSource : importSource?.from;
|
|
69
|
-
if (!source || source.startsWith('.') || source.startsWith('/')) return null;
|
|
70
|
-
if (source.startsWith('@')) {
|
|
71
|
-
const [scope, name] = source.split('/');
|
|
72
|
-
if (scope && name) return `${scope}/${name}`;
|
|
73
|
-
}
|
|
74
|
-
const [pkg] = source.split('/');
|
|
75
|
-
return pkg || null;
|
|
76
|
-
}
|
|
77
|
-
function hasStylexDependency(manifest, targetPackages) {
|
|
78
|
-
if (!manifest || typeof manifest !== 'object') return false;
|
|
79
|
-
const depFields = ['dependencies', 'peerDependencies', 'optionalDependencies'];
|
|
80
|
-
for (const field of depFields) {
|
|
81
|
-
const deps = manifest[field];
|
|
82
|
-
if (!deps || typeof deps !== 'object') continue;
|
|
83
|
-
for (const name of Object.keys(deps)) {
|
|
84
|
-
if (targetPackages.has(name)) return true;
|
|
85
|
-
}
|
|
6
|
+
Object.defineProperty(exports, "bun", {
|
|
7
|
+
enumerable: true,
|
|
8
|
+
get: function () {
|
|
9
|
+
return _bun.default;
|
|
86
10
|
}
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
rootDir,
|
|
93
|
-
resolver
|
|
94
|
-
}) {
|
|
95
|
-
const targetPackages = new Set(importSources.map(toPackageName).filter(Boolean).concat(['@stylexjs/stylex']));
|
|
96
|
-
const found = new Set(explicitPackages || []);
|
|
97
|
-
const pkgJsonPath = findNearestPackageJson(rootDir);
|
|
98
|
-
if (!pkgJsonPath) return Array.from(found);
|
|
99
|
-
const pkgDir = _nodePath.default.dirname(pkgJsonPath);
|
|
100
|
-
const pkgJson = readJSON(pkgJsonPath);
|
|
101
|
-
if (!pkgJson) return Array.from(found);
|
|
102
|
-
const depFields = ['dependencies', 'devDependencies', 'peerDependencies', 'optionalDependencies'];
|
|
103
|
-
const deps = new Set();
|
|
104
|
-
for (const field of depFields) {
|
|
105
|
-
const entries = pkgJson[field];
|
|
106
|
-
if (!entries || typeof entries !== 'object') continue;
|
|
107
|
-
for (const name of Object.keys(entries)) deps.add(name);
|
|
108
|
-
}
|
|
109
|
-
for (const dep of deps) {
|
|
110
|
-
let manifestPath = null;
|
|
111
|
-
try {
|
|
112
|
-
manifestPath = resolver.resolve(`${dep}/package.json`, {
|
|
113
|
-
paths: [pkgDir]
|
|
114
|
-
});
|
|
115
|
-
} catch {}
|
|
116
|
-
if (!manifestPath) continue;
|
|
117
|
-
const manifest = readJSON(manifestPath);
|
|
118
|
-
if (hasStylexDependency(manifest, targetPackages)) {
|
|
119
|
-
found.add(dep);
|
|
120
|
-
}
|
|
11
|
+
});
|
|
12
|
+
Object.defineProperty(exports, "createStylexBunPlugin", {
|
|
13
|
+
enumerable: true,
|
|
14
|
+
get: function () {
|
|
15
|
+
return _bun.createStylexBunPlugin;
|
|
121
16
|
}
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
unstable_moduleResolution = {
|
|
129
|
-
type: 'commonJS',
|
|
130
|
-
rootDir: process.cwd()
|
|
131
|
-
},
|
|
132
|
-
babelConfig: {
|
|
133
|
-
plugins = [],
|
|
134
|
-
presets = []
|
|
135
|
-
} = {},
|
|
136
|
-
importSources = ['stylex', '@stylexjs/stylex'],
|
|
137
|
-
useCSSLayers = false,
|
|
138
|
-
lightningcssOptions,
|
|
139
|
-
cssInjectionTarget,
|
|
140
|
-
externalPackages = [],
|
|
141
|
-
devPersistToDisk = false,
|
|
142
|
-
devMode = 'full',
|
|
143
|
-
treeshakeCompensation = ['vite', 'rollup', 'rolldown'].includes(framework),
|
|
144
|
-
...stylexOptions
|
|
145
|
-
} = userOptions;
|
|
146
|
-
const stylexRulesById = new Map();
|
|
147
|
-
function getSharedStore() {
|
|
148
|
-
try {
|
|
149
|
-
const g = globalThis;
|
|
150
|
-
if (!g.__stylex_unplugin_store) {
|
|
151
|
-
g.__stylex_unplugin_store = {
|
|
152
|
-
rulesById: new Map(),
|
|
153
|
-
version: 0
|
|
154
|
-
};
|
|
155
|
-
}
|
|
156
|
-
return g.__stylex_unplugin_store;
|
|
157
|
-
} catch {
|
|
158
|
-
return {
|
|
159
|
-
rulesById: stylexRulesById,
|
|
160
|
-
version: 0
|
|
161
|
-
};
|
|
162
|
-
}
|
|
17
|
+
});
|
|
18
|
+
exports.default = void 0;
|
|
19
|
+
Object.defineProperty(exports, "esbuild", {
|
|
20
|
+
enumerable: true,
|
|
21
|
+
get: function () {
|
|
22
|
+
return _esbuild.default;
|
|
163
23
|
}
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
importSources,
|
|
170
|
-
explicitPackages: externalPackages,
|
|
171
|
-
rootDir: nearestPkgJson ? _nodePath.default.dirname(nearestPkgJson) : process.cwd(),
|
|
172
|
-
resolver: requireFromCwd
|
|
173
|
-
});
|
|
174
|
-
function findNearestNodeModules(startDir) {
|
|
175
|
-
let dir = startDir;
|
|
176
|
-
for (;;) {
|
|
177
|
-
const candidate = _nodePath.default.join(dir, 'node_modules');
|
|
178
|
-
if (_nodeFs.default.existsSync(candidate)) {
|
|
179
|
-
const stat = _nodeFs.default.statSync(candidate);
|
|
180
|
-
if (stat.isDirectory()) return candidate;
|
|
181
|
-
}
|
|
182
|
-
const parent = _nodePath.default.dirname(dir);
|
|
183
|
-
if (parent === dir) break;
|
|
184
|
-
dir = parent;
|
|
185
|
-
}
|
|
186
|
-
return null;
|
|
24
|
+
});
|
|
25
|
+
Object.defineProperty(exports, "farm", {
|
|
26
|
+
enumerable: true,
|
|
27
|
+
get: function () {
|
|
28
|
+
return _farm.default;
|
|
187
29
|
}
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
babelrc: false,
|
|
194
|
-
filename,
|
|
195
|
-
presets,
|
|
196
|
-
plugins: [...plugins, /\.jsx?/.test(_nodePath.default.extname(filename)) ? _pluginSyntaxFlow.default : [_pluginSyntaxTypescript.default, {
|
|
197
|
-
isTSX: true
|
|
198
|
-
}], _pluginSyntaxJsx.default, _babelPlugin.default.withOptions({
|
|
199
|
-
...stylexOptions,
|
|
200
|
-
importSources,
|
|
201
|
-
treeshakeCompensation,
|
|
202
|
-
dev,
|
|
203
|
-
unstable_moduleResolution
|
|
204
|
-
})],
|
|
205
|
-
caller: {
|
|
206
|
-
name: callerName,
|
|
207
|
-
supportsStaticESM: true,
|
|
208
|
-
supportsDynamicImport: true,
|
|
209
|
-
supportsTopLevelAwait: !inputCode.includes('require('),
|
|
210
|
-
supportsExportNamespaceFrom: true
|
|
211
|
-
}
|
|
212
|
-
});
|
|
213
|
-
if (!result || result.code == null) {
|
|
214
|
-
return {
|
|
215
|
-
code: inputCode,
|
|
216
|
-
map: null,
|
|
217
|
-
metadata: {}
|
|
218
|
-
};
|
|
219
|
-
}
|
|
220
|
-
return result;
|
|
30
|
+
});
|
|
31
|
+
Object.defineProperty(exports, "rolldown", {
|
|
32
|
+
enumerable: true,
|
|
33
|
+
get: function () {
|
|
34
|
+
return _rolldown.default;
|
|
221
35
|
}
|
|
222
|
-
|
|
223
|
-
|
|
36
|
+
});
|
|
37
|
+
Object.defineProperty(exports, "rollup", {
|
|
38
|
+
enumerable: true,
|
|
39
|
+
get: function () {
|
|
40
|
+
return _rollup.default;
|
|
224
41
|
}
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
42
|
+
});
|
|
43
|
+
Object.defineProperty(exports, "rspack", {
|
|
44
|
+
enumerable: true,
|
|
45
|
+
get: function () {
|
|
46
|
+
return _rspack.default;
|
|
229
47
|
}
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
48
|
+
});
|
|
49
|
+
Object.defineProperty(exports, "unloader", {
|
|
50
|
+
enumerable: true,
|
|
51
|
+
get: function () {
|
|
52
|
+
return _unloader.default;
|
|
233
53
|
}
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
});
|
|
241
|
-
} catch {}
|
|
242
|
-
}
|
|
54
|
+
});
|
|
55
|
+
exports.unplugin = void 0;
|
|
56
|
+
Object.defineProperty(exports, "unpluginFactory", {
|
|
57
|
+
enumerable: true,
|
|
58
|
+
get: function () {
|
|
59
|
+
return _core.unpluginFactory;
|
|
243
60
|
}
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
const json = JSON.parse(_nodeFs.default.readFileSync(DISK_RULES_PATH, 'utf8'));
|
|
250
|
-
for (const [k, v] of Object.entries(json)) merged.set(k, v);
|
|
251
|
-
}
|
|
252
|
-
} catch {}
|
|
253
|
-
}
|
|
254
|
-
try {
|
|
255
|
-
const shared = getSharedStore().rulesById;
|
|
256
|
-
for (const [k, v] of shared.entries()) merged.set(k, v);
|
|
257
|
-
} catch {}
|
|
258
|
-
for (const [k, v] of stylexRulesById.entries()) merged.set(k, v);
|
|
259
|
-
const allRules = Array.from(merged.values()).flat();
|
|
260
|
-
return processCollectedRulesToCSS(allRules, {
|
|
261
|
-
useCSSLayers,
|
|
262
|
-
lightningcssOptions,
|
|
263
|
-
enableLTRRTLComments: stylexOptions?.enableLTRRTLComments
|
|
264
|
-
});
|
|
61
|
+
});
|
|
62
|
+
Object.defineProperty(exports, "vite", {
|
|
63
|
+
enumerable: true,
|
|
64
|
+
get: function () {
|
|
65
|
+
return _vite.default;
|
|
265
66
|
}
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
const txt = await _promises.default.readFile(DISK_RULES_PATH, 'utf8');
|
|
272
|
-
current = JSON.parse(txt);
|
|
273
|
-
} catch {}
|
|
274
|
-
if (rules && Array.isArray(rules) && rules.length > 0) {
|
|
275
|
-
current[id] = rules;
|
|
276
|
-
} else if (current[id]) {
|
|
277
|
-
delete current[id];
|
|
278
|
-
}
|
|
279
|
-
await _promises.default.writeFile(DISK_RULES_PATH, JSON.stringify(current), 'utf8');
|
|
280
|
-
} catch {}
|
|
67
|
+
});
|
|
68
|
+
Object.defineProperty(exports, "webpack", {
|
|
69
|
+
enumerable: true,
|
|
70
|
+
get: function () {
|
|
71
|
+
return _webpack.default;
|
|
281
72
|
}
|
|
282
|
-
return {
|
|
283
|
-
name: '@stylexjs/unplugin',
|
|
284
|
-
apply: (config, env) => {
|
|
285
|
-
try {
|
|
286
|
-
const command = env?.command || (typeof config === 'string' ? undefined : undefined);
|
|
287
|
-
if (devMode === 'off' && command === 'serve') return false;
|
|
288
|
-
} catch {}
|
|
289
|
-
return true;
|
|
290
|
-
},
|
|
291
|
-
enforce: 'pre',
|
|
292
|
-
buildStart() {
|
|
293
|
-
resetState();
|
|
294
|
-
},
|
|
295
|
-
buildEnd() {},
|
|
296
|
-
async transform(code, id) {
|
|
297
|
-
const JS_LIKE_RE = /\.[cm]?[jt]sx?(\?|$)/;
|
|
298
|
-
if (!JS_LIKE_RE.test(id)) return null;
|
|
299
|
-
if (!shouldHandle(code)) return null;
|
|
300
|
-
const dir = _nodePath.default.dirname(id);
|
|
301
|
-
const basename = _nodePath.default.basename(id);
|
|
302
|
-
const file = _nodePath.default.join(dir, basename.split('?')[0] || basename);
|
|
303
|
-
const result = await runBabelTransform(code, file, '@stylexjs/unplugin');
|
|
304
|
-
const {
|
|
305
|
-
metadata
|
|
306
|
-
} = result;
|
|
307
|
-
if (!stylexOptions.runtimeInjection) {
|
|
308
|
-
const hasRules = metadata && Array.isArray(metadata.stylex) && metadata.stylex.length > 0;
|
|
309
|
-
const shared = getSharedStore();
|
|
310
|
-
if (hasRules) {
|
|
311
|
-
stylexRulesById.set(id, metadata.stylex);
|
|
312
|
-
shared.rulesById.set(id, metadata.stylex);
|
|
313
|
-
shared.version++;
|
|
314
|
-
await persistRulesToDisk(id, metadata.stylex);
|
|
315
|
-
} else {
|
|
316
|
-
stylexRulesById.delete(id);
|
|
317
|
-
if (shared.rulesById.has(id)) {
|
|
318
|
-
shared.rulesById.delete(id);
|
|
319
|
-
shared.version++;
|
|
320
|
-
}
|
|
321
|
-
await persistRulesToDisk(id, []);
|
|
322
|
-
}
|
|
323
|
-
if (viteServer) {
|
|
324
|
-
try {
|
|
325
|
-
viteServer.ws.send({
|
|
326
|
-
type: 'custom',
|
|
327
|
-
event: 'stylex:css-update'
|
|
328
|
-
});
|
|
329
|
-
} catch {}
|
|
330
|
-
}
|
|
331
|
-
}
|
|
332
|
-
const ctx = this;
|
|
333
|
-
if (ctx && ctx.meta && ctx.meta.watchMode && typeof ctx.parse === 'function') {
|
|
334
|
-
try {
|
|
335
|
-
const ast = ctx.parse(result.code);
|
|
336
|
-
for (const stmt of ast.body) {
|
|
337
|
-
if (stmt.type === 'ImportDeclaration') {
|
|
338
|
-
const resolved = await ctx.resolve(stmt.source.value, id);
|
|
339
|
-
if (resolved && !resolved.external) {
|
|
340
|
-
const loaded = await ctx.load(resolved);
|
|
341
|
-
if (loaded && loaded.meta && 'stylex' in loaded.meta) {
|
|
342
|
-
stylexRulesById.set(resolved.id, loaded.meta.stylex);
|
|
343
|
-
}
|
|
344
|
-
}
|
|
345
|
-
}
|
|
346
|
-
}
|
|
347
|
-
} catch {}
|
|
348
|
-
}
|
|
349
|
-
return {
|
|
350
|
-
code: result.code,
|
|
351
|
-
map: result.map
|
|
352
|
-
};
|
|
353
|
-
},
|
|
354
|
-
shouldTransformCachedModule({
|
|
355
|
-
id,
|
|
356
|
-
meta
|
|
357
|
-
}) {
|
|
358
|
-
if (meta && 'stylex' in meta) {
|
|
359
|
-
stylexRulesById.set(id, meta.stylex);
|
|
360
|
-
}
|
|
361
|
-
return false;
|
|
362
|
-
},
|
|
363
|
-
generateBundle(_opts, bundle) {
|
|
364
|
-
const css = collectCss();
|
|
365
|
-
if (!css) return;
|
|
366
|
-
const target = pickCssAssetFromRollupBundle(bundle, cssInjectionTarget);
|
|
367
|
-
if (target) {
|
|
368
|
-
const current = typeof target.source === 'string' ? target.source : target.source?.toString() || '';
|
|
369
|
-
target.source = current ? current + '\n' + css : css;
|
|
370
|
-
} else {}
|
|
371
|
-
},
|
|
372
|
-
vite: devMode === 'off' ? undefined : {
|
|
373
|
-
config(config) {
|
|
374
|
-
if (!stylexPackages || stylexPackages.length === 0) return;
|
|
375
|
-
const addExcludes = (existing = []) => Array.from(new Set([...existing, ...stylexPackages]));
|
|
376
|
-
return {
|
|
377
|
-
optimizeDeps: {
|
|
378
|
-
...(config?.optimizeDeps || {}),
|
|
379
|
-
exclude: addExcludes(config?.optimizeDeps?.exclude || [])
|
|
380
|
-
},
|
|
381
|
-
ssr: {
|
|
382
|
-
...(config?.ssr || {}),
|
|
383
|
-
optimizeDeps: {
|
|
384
|
-
...(config?.ssr?.optimizeDeps || {}),
|
|
385
|
-
exclude: addExcludes(config?.ssr?.optimizeDeps?.exclude || [])
|
|
386
|
-
}
|
|
387
|
-
}
|
|
388
|
-
};
|
|
389
|
-
},
|
|
390
|
-
configResolved(config) {
|
|
391
|
-
try {
|
|
392
|
-
viteOutDir = config.build?.outDir || viteOutDir;
|
|
393
|
-
} catch {}
|
|
394
|
-
},
|
|
395
|
-
configureServer(server) {
|
|
396
|
-
viteServer = server;
|
|
397
|
-
if (devMode === 'full') {
|
|
398
|
-
server.middlewares.use(_devInjectMiddleware.devInjectMiddleware);
|
|
399
|
-
}
|
|
400
|
-
server.middlewares.use((req, res, next) => {
|
|
401
|
-
if (!req.url) return next();
|
|
402
|
-
if (req.url.startsWith(_consts.DEV_CSS_PATH)) {
|
|
403
|
-
res.statusCode = 200;
|
|
404
|
-
res.setHeader('Content-Type', 'text/css');
|
|
405
|
-
res.setHeader('Cache-Control', 'no-store');
|
|
406
|
-
const css = collectCss();
|
|
407
|
-
res.end(css || '');
|
|
408
|
-
return;
|
|
409
|
-
}
|
|
410
|
-
next();
|
|
411
|
-
});
|
|
412
|
-
const shared = getSharedStore();
|
|
413
|
-
let lastVersion = shared.version;
|
|
414
|
-
const interval = setInterval(() => {
|
|
415
|
-
const curr = shared.version;
|
|
416
|
-
if (curr !== lastVersion) {
|
|
417
|
-
lastVersion = curr;
|
|
418
|
-
try {
|
|
419
|
-
server.ws.send({
|
|
420
|
-
type: 'custom',
|
|
421
|
-
event: 'stylex:css-update'
|
|
422
|
-
});
|
|
423
|
-
} catch {}
|
|
424
|
-
}
|
|
425
|
-
}, 150);
|
|
426
|
-
server.httpServer?.once('close', () => clearInterval(interval));
|
|
427
|
-
},
|
|
428
|
-
resolveId(id) {
|
|
429
|
-
if (devMode === 'full' && id.includes('virtual:stylex:runtime')) return id;
|
|
430
|
-
if (devMode === 'css-only' && id.includes('virtual:stylex:css-only')) return id;
|
|
431
|
-
return null;
|
|
432
|
-
},
|
|
433
|
-
load(id) {
|
|
434
|
-
if (devMode === 'full' && id.includes('virtual:stylex:runtime')) {
|
|
435
|
-
return _consts.VIRTUAL_STYLEX_RUNTIME_SCRIPT;
|
|
436
|
-
}
|
|
437
|
-
if (devMode === 'css-only' && id.includes('virtual:stylex:css-only')) {
|
|
438
|
-
return _consts.VIRTUAL_STYLEX_CSS_ONLY_SCRIPT;
|
|
439
|
-
}
|
|
440
|
-
return null;
|
|
441
|
-
},
|
|
442
|
-
transformIndexHtml() {
|
|
443
|
-
if (devMode !== 'full') return null;
|
|
444
|
-
if (!viteServer) return null;
|
|
445
|
-
const base = viteServer.config.base ?? '';
|
|
446
|
-
return [{
|
|
447
|
-
tag: 'script',
|
|
448
|
-
attrs: {
|
|
449
|
-
type: 'module',
|
|
450
|
-
src: _nodePath.default.join(base, '/@id/virtual:stylex:runtime')
|
|
451
|
-
},
|
|
452
|
-
injectTo: 'head'
|
|
453
|
-
}, {
|
|
454
|
-
tag: 'link',
|
|
455
|
-
attrs: {
|
|
456
|
-
rel: 'stylesheet',
|
|
457
|
-
href: _nodePath.default.join(base, _consts.DEV_CSS_PATH)
|
|
458
|
-
},
|
|
459
|
-
injectTo: 'head'
|
|
460
|
-
}];
|
|
461
|
-
},
|
|
462
|
-
handleHotUpdate(ctx) {
|
|
463
|
-
const base = ctx.server.config.base ?? '';
|
|
464
|
-
const cssMod = ctx.server.moduleGraph.getModuleById(_nodePath.default.join(base, 'virtual:stylex:css-module'));
|
|
465
|
-
if (cssMod) {
|
|
466
|
-
ctx.server.moduleGraph.invalidateModule(cssMod);
|
|
467
|
-
}
|
|
468
|
-
try {
|
|
469
|
-
ctx.server.ws.send({
|
|
470
|
-
type: 'custom',
|
|
471
|
-
event: 'stylex:css-update'
|
|
472
|
-
});
|
|
473
|
-
} catch {}
|
|
474
|
-
}
|
|
475
|
-
},
|
|
476
|
-
webpack(compiler) {
|
|
477
|
-
const PLUGIN_NAME = '@stylexjs/unplugin';
|
|
478
|
-
compiler.hooks.thisCompilation.tap(PLUGIN_NAME, compilation => {
|
|
479
|
-
resetState();
|
|
480
|
-
const wp = compiler.webpack || compiler.rspack || undefined;
|
|
481
|
-
const stage = wp?.Compilation?.PROCESS_ASSETS_STAGE_SUMMARIZE;
|
|
482
|
-
const tapOptions = stage != null ? {
|
|
483
|
-
name: PLUGIN_NAME,
|
|
484
|
-
stage
|
|
485
|
-
} : PLUGIN_NAME;
|
|
486
|
-
const toRawSource = content => {
|
|
487
|
-
const RawSource = wp?.sources?.RawSource;
|
|
488
|
-
return RawSource ? new RawSource(content) : {
|
|
489
|
-
source: () => content,
|
|
490
|
-
size: () => Buffer.byteLength(content)
|
|
491
|
-
};
|
|
492
|
-
};
|
|
493
|
-
compilation.hooks.processAssets.tap(tapOptions, assets => {
|
|
494
|
-
const css = collectCss();
|
|
495
|
-
if (!css) return;
|
|
496
|
-
const cssAssets = Object.keys(assets).filter(f => f.endsWith('.css'));
|
|
497
|
-
if (cssAssets.length === 0) {
|
|
498
|
-
compilation.warnings.push(new Error('[stylex] No CSS asset found to inject into. Skipping.'));
|
|
499
|
-
return;
|
|
500
|
-
}
|
|
501
|
-
const pickName = typeof cssInjectionTarget === 'function' && cssAssets.find(f => cssInjectionTarget(f)) || cssAssets.find(f => /(^|\/)index\.css$/.test(f)) || cssAssets.find(f => /(^|\/)style\.css$/.test(f)) || cssAssets[0];
|
|
502
|
-
const asset = compilation.getAsset(pickName);
|
|
503
|
-
if (!asset) return;
|
|
504
|
-
const existing = asset.source.source().toString();
|
|
505
|
-
const next = existing ? existing + '\n' + css : css;
|
|
506
|
-
compilation.updateAsset(pickName, toRawSource(next));
|
|
507
|
-
});
|
|
508
|
-
});
|
|
509
|
-
},
|
|
510
|
-
rspack(compiler) {
|
|
511
|
-
this.webpack?.(compiler);
|
|
512
|
-
},
|
|
513
|
-
esbuild: {
|
|
514
|
-
name: '@stylexjs/unplugin',
|
|
515
|
-
setup(build) {
|
|
516
|
-
build.onEnd(async result => {
|
|
517
|
-
try {
|
|
518
|
-
const css = collectCss();
|
|
519
|
-
if (!css) return;
|
|
520
|
-
const initial = build.initialOptions;
|
|
521
|
-
const outDir = initial.outdir || (initial.outfile ? _nodePath.default.dirname(initial.outfile) : null);
|
|
522
|
-
if (!outDir) return;
|
|
523
|
-
let outfile = null;
|
|
524
|
-
const meta = result && result.metafile;
|
|
525
|
-
if (meta && meta.outputs) {
|
|
526
|
-
const outputs = Object.keys(meta.outputs);
|
|
527
|
-
const cssOutputs = outputs.filter(f => f.endsWith('.css'));
|
|
528
|
-
const pick = cssOutputs.find(f => /(^|\/)index\.css$/.test(f)) || cssOutputs.find(f => /(^|\/)style\.css$/.test(f)) || cssOutputs[0];
|
|
529
|
-
if (pick) outfile = _nodePath.default.isAbsolute(pick) ? pick : _nodePath.default.join(process.cwd(), pick);
|
|
530
|
-
} else {
|
|
531
|
-
try {
|
|
532
|
-
const files = _nodeFs.default.readdirSync(outDir).filter(f => f.endsWith('.css'));
|
|
533
|
-
const pick = files.find(f => /(^|\/)index\.css$/.test(f)) || files.find(f => /(^|\/)style\.css$/.test(f)) || files[0];
|
|
534
|
-
if (pick) outfile = _nodePath.default.join(outDir, pick);
|
|
535
|
-
} catch {}
|
|
536
|
-
}
|
|
537
|
-
if (!outfile) {
|
|
538
|
-
const fallback = _nodePath.default.join(outDir, 'stylex.css');
|
|
539
|
-
await _promises.default.mkdir(_nodePath.default.dirname(fallback), {
|
|
540
|
-
recursive: true
|
|
541
|
-
});
|
|
542
|
-
await _promises.default.writeFile(fallback, css, 'utf8');
|
|
543
|
-
return;
|
|
544
|
-
}
|
|
545
|
-
try {
|
|
546
|
-
const current = _nodeFs.default.readFileSync(outfile, 'utf8');
|
|
547
|
-
if (!current.includes(css)) {
|
|
548
|
-
await _promises.default.writeFile(outfile, current ? current + '\n' + css : css, 'utf8');
|
|
549
|
-
}
|
|
550
|
-
} catch {}
|
|
551
|
-
} catch {}
|
|
552
|
-
});
|
|
553
|
-
}
|
|
554
|
-
},
|
|
555
|
-
async writeBundle(options, bundle) {
|
|
556
|
-
try {
|
|
557
|
-
const css = collectCss();
|
|
558
|
-
if (!css) return;
|
|
559
|
-
const target = pickCssAssetFromRollupBundle(bundle, cssInjectionTarget);
|
|
560
|
-
const outDir = options?.dir || (options?.file ? _nodePath.default.dirname(options.file) : viteOutDir);
|
|
561
|
-
if (!outDir) return;
|
|
562
|
-
try {
|
|
563
|
-
await _promises.default.mkdir(outDir, {
|
|
564
|
-
recursive: true
|
|
565
|
-
});
|
|
566
|
-
} catch {}
|
|
567
|
-
let outfile;
|
|
568
|
-
if (!target) {
|
|
569
|
-
try {
|
|
570
|
-
const assetsDir = _nodePath.default.join(outDir, 'assets');
|
|
571
|
-
if (_nodeFs.default.existsSync(assetsDir)) {
|
|
572
|
-
const files = _nodeFs.default.readdirSync(assetsDir).filter(f => f.endsWith('.css'));
|
|
573
|
-
const pick = files.find(f => /(^|\/)index\.css$/.test(f)) || files.find(f => /(^|\/)style\.css$/.test(f)) || files[0];
|
|
574
|
-
if (pick) outfile = _nodePath.default.join(assetsDir, pick);
|
|
575
|
-
}
|
|
576
|
-
} catch {}
|
|
577
|
-
if (!outfile) {
|
|
578
|
-
const assetsDir = _nodePath.default.join(outDir, 'assets');
|
|
579
|
-
try {
|
|
580
|
-
await _promises.default.mkdir(assetsDir, {
|
|
581
|
-
recursive: true
|
|
582
|
-
});
|
|
583
|
-
} catch {}
|
|
584
|
-
const fallback = _nodePath.default.join(assetsDir, 'stylex.css');
|
|
585
|
-
await _promises.default.writeFile(fallback, css, 'utf8');
|
|
586
|
-
return;
|
|
587
|
-
}
|
|
588
|
-
} else {
|
|
589
|
-
outfile = _nodePath.default.join(outDir, target.fileName);
|
|
590
|
-
}
|
|
591
|
-
try {
|
|
592
|
-
const current = _nodeFs.default.readFileSync(outfile, 'utf8');
|
|
593
|
-
if (!current.includes(css)) {
|
|
594
|
-
await _promises.default.writeFile(outfile, current ? current + '\n' + css : css, 'utf8');
|
|
595
|
-
}
|
|
596
|
-
} catch {}
|
|
597
|
-
} catch {}
|
|
598
|
-
}
|
|
599
|
-
};
|
|
600
73
|
});
|
|
601
|
-
var
|
|
602
|
-
|
|
74
|
+
var _bun = _interopRequireWildcard(require("./bun"));
|
|
75
|
+
var _esbuild = _interopRequireDefault(require("./esbuild"));
|
|
76
|
+
var _farm = _interopRequireDefault(require("./farm"));
|
|
77
|
+
var _rolldown = _interopRequireDefault(require("./rolldown"));
|
|
78
|
+
var _rollup = _interopRequireDefault(require("./rollup"));
|
|
79
|
+
var _rspack = _interopRequireDefault(require("./rspack"));
|
|
80
|
+
var _unloader = _interopRequireDefault(require("./unloader"));
|
|
81
|
+
var _vite = _interopRequireDefault(require("./vite"));
|
|
82
|
+
var _webpack = _interopRequireDefault(require("./webpack"));
|
|
83
|
+
var _core = require("./core");
|
|
84
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
85
|
+
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
|
|
86
|
+
const stylex = {
|
|
87
|
+
bun: _bun.createStylexBunPlugin,
|
|
88
|
+
esbuild: _esbuild.default,
|
|
89
|
+
farm: _farm.default,
|
|
90
|
+
rolldown: _rolldown.default,
|
|
91
|
+
rollup: _rollup.default,
|
|
92
|
+
rspack: _rspack.default,
|
|
93
|
+
unloader: _unloader.default,
|
|
94
|
+
vite: _vite.default,
|
|
95
|
+
webpack: _webpack.default,
|
|
96
|
+
raw: _core.unpluginFactory
|
|
97
|
+
};
|
|
98
|
+
const unplugin = exports.unplugin = stylex;
|
|
99
|
+
var _default = exports.default = stylex;
|
|
@@ -0,0 +1,12 @@
|
|
|
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
|
+
import type { UserOptions } from './core';
|
|
9
|
+
|
|
10
|
+
declare const plugin: (options?: Partial<UserOptions>) => any;
|
|
11
|
+
|
|
12
|
+
export default plugin;
|