@atlaspack/transformer-css 2.14.5-canary.49 → 2.14.5-canary.491
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/CHANGELOG.md +559 -0
- package/dist/CSSTransformer.js +405 -0
- package/lib/CSSTransformer.js +62 -10
- package/lib/types/CSSTransformer.d.ts +3 -0
- package/package.json +15 -9
- package/src/{CSSTransformer.js → CSSTransformer.ts} +70 -18
- package/tsconfig.json +27 -0
- package/tsconfig.tsbuildinfo +1 -0
|
@@ -0,0 +1,405 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
+
}) : function(o, v) {
|
|
16
|
+
o["default"] = v;
|
|
17
|
+
});
|
|
18
|
+
var __importStar = (this && this.__importStar) || (function () {
|
|
19
|
+
var ownKeys = function(o) {
|
|
20
|
+
ownKeys = Object.getOwnPropertyNames || function (o) {
|
|
21
|
+
var ar = [];
|
|
22
|
+
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
|
|
23
|
+
return ar;
|
|
24
|
+
};
|
|
25
|
+
return ownKeys(o);
|
|
26
|
+
};
|
|
27
|
+
return function (mod) {
|
|
28
|
+
if (mod && mod.__esModule) return mod;
|
|
29
|
+
var result = {};
|
|
30
|
+
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
|
|
31
|
+
__setModuleDefault(result, mod);
|
|
32
|
+
return result;
|
|
33
|
+
};
|
|
34
|
+
})();
|
|
35
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
36
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
37
|
+
};
|
|
38
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
39
|
+
const path_1 = __importDefault(require("path"));
|
|
40
|
+
const source_map_1 = __importDefault(require("@atlaspack/source-map"));
|
|
41
|
+
const plugin_1 = require("@atlaspack/plugin");
|
|
42
|
+
const utils_1 = require("@atlaspack/utils");
|
|
43
|
+
const native = __importStar(require("lightningcss"));
|
|
44
|
+
const browserslist_1 = __importDefault(require("browserslist"));
|
|
45
|
+
const nullthrows_1 = __importDefault(require("nullthrows"));
|
|
46
|
+
const diagnostic_1 = __importStar(require("@atlaspack/diagnostic"));
|
|
47
|
+
const feature_flags_1 = require("@atlaspack/feature-flags");
|
|
48
|
+
const { transform, transformStyleAttribute, browserslistToTargets } = native;
|
|
49
|
+
exports.default = new plugin_1.Transformer({
|
|
50
|
+
async loadConfig({ config, options }) {
|
|
51
|
+
let conf = await config.getConfigFrom(options.projectRoot + '/index', [], {
|
|
52
|
+
packageKey: '@atlaspack/transformer-css',
|
|
53
|
+
});
|
|
54
|
+
let contents = conf?.contents;
|
|
55
|
+
// @ts-expect-error TS2339
|
|
56
|
+
if (typeof contents?.cssModules?.include === 'string') {
|
|
57
|
+
// @ts-expect-error TS2339
|
|
58
|
+
contents.cssModules.include = [(0, utils_1.globToRegex)(contents.cssModules.include)];
|
|
59
|
+
// @ts-expect-error TS2339
|
|
60
|
+
}
|
|
61
|
+
else if (Array.isArray(contents?.cssModules?.include)) {
|
|
62
|
+
// @ts-expect-error TS2339
|
|
63
|
+
contents.cssModules.include = contents.cssModules.include.map(
|
|
64
|
+
// @ts-expect-error TS7006
|
|
65
|
+
(include) => typeof include === 'string' ? (0, utils_1.globToRegex)(include) : include);
|
|
66
|
+
}
|
|
67
|
+
// @ts-expect-error TS2339
|
|
68
|
+
if (typeof contents?.cssModules?.exclude === 'string') {
|
|
69
|
+
// @ts-expect-error TS2339
|
|
70
|
+
contents.cssModules.exclude = [(0, utils_1.globToRegex)(contents.cssModules.exclude)];
|
|
71
|
+
// @ts-expect-error TS2339
|
|
72
|
+
}
|
|
73
|
+
else if (Array.isArray(contents?.cssModules?.exclude)) {
|
|
74
|
+
// @ts-expect-error TS2339
|
|
75
|
+
contents.cssModules.exclude = contents.cssModules.exclude.map(
|
|
76
|
+
// @ts-expect-error TS7006
|
|
77
|
+
(exclude) => typeof exclude === 'string' ? (0, utils_1.globToRegex)(exclude) : exclude);
|
|
78
|
+
}
|
|
79
|
+
return contents;
|
|
80
|
+
},
|
|
81
|
+
async transform({ asset, config, options, logger }) {
|
|
82
|
+
if ((0, feature_flags_1.getFeatureFlag)('compiledCssInJsTransformer') &&
|
|
83
|
+
asset.filePath.endsWith('.compiled.css')) {
|
|
84
|
+
return handleCompiledCssAsset(asset);
|
|
85
|
+
}
|
|
86
|
+
// Normalize the asset's environment so that properties that only affect JS don't cause CSS to be duplicated.
|
|
87
|
+
// For example, with ESModule and CommonJS targets, only a single shared CSS bundle should be produced.
|
|
88
|
+
let env = asset.env;
|
|
89
|
+
asset.setEnvironment({
|
|
90
|
+
context: 'browser',
|
|
91
|
+
engines: {
|
|
92
|
+
browsers: asset.env.engines.browsers,
|
|
93
|
+
},
|
|
94
|
+
shouldOptimize: asset.env.shouldOptimize,
|
|
95
|
+
shouldScopeHoist: asset.env.shouldScopeHoist,
|
|
96
|
+
sourceMap: asset.env.sourceMap,
|
|
97
|
+
unstableSingleFileOutput: (0, feature_flags_1.getFeatureFlag)('preserveUnstableSingleFileOutputInCss')
|
|
98
|
+
? asset.env.unstableSingleFileOutput
|
|
99
|
+
: undefined,
|
|
100
|
+
});
|
|
101
|
+
let [code, originalMap] = await Promise.all([
|
|
102
|
+
asset.getBuffer(),
|
|
103
|
+
asset.getMap(),
|
|
104
|
+
// @ts-expect-error TS2339
|
|
105
|
+
process.browser && native.default(),
|
|
106
|
+
]);
|
|
107
|
+
let targets = getTargets(asset.env.engines.browsers);
|
|
108
|
+
let res;
|
|
109
|
+
try {
|
|
110
|
+
if (asset.meta.type === 'attr') {
|
|
111
|
+
res = transformStyleAttribute({
|
|
112
|
+
code,
|
|
113
|
+
analyzeDependencies: true,
|
|
114
|
+
// @ts-expect-error TS2339
|
|
115
|
+
errorRecovery: config?.errorRecovery || false,
|
|
116
|
+
targets,
|
|
117
|
+
});
|
|
118
|
+
}
|
|
119
|
+
else {
|
|
120
|
+
let cssModules = false;
|
|
121
|
+
if (asset.meta.type !== 'tag' &&
|
|
122
|
+
asset.meta.cssModulesCompiled == null) {
|
|
123
|
+
// @ts-expect-error TS2339
|
|
124
|
+
let cssModulesConfig = config?.cssModules;
|
|
125
|
+
let isCSSModule = /\.module\./.test(asset.filePath);
|
|
126
|
+
if (asset.isSource) {
|
|
127
|
+
let projectRootPath = path_1.default.relative(options.projectRoot, asset.filePath);
|
|
128
|
+
if (typeof cssModulesConfig === 'boolean') {
|
|
129
|
+
isCSSModule = true;
|
|
130
|
+
}
|
|
131
|
+
else if (cssModulesConfig?.include) {
|
|
132
|
+
// @ts-expect-error TS7006
|
|
133
|
+
isCSSModule = cssModulesConfig.include.some((include) => include.test(projectRootPath));
|
|
134
|
+
}
|
|
135
|
+
else if (cssModulesConfig?.global) {
|
|
136
|
+
isCSSModule = true;
|
|
137
|
+
}
|
|
138
|
+
if (cssModulesConfig?.exclude?.some((exclude) => exclude.test(projectRootPath))) {
|
|
139
|
+
isCSSModule = false;
|
|
140
|
+
}
|
|
141
|
+
}
|
|
142
|
+
if (isCSSModule) {
|
|
143
|
+
if (cssModulesConfig?.dashedIdents && !asset.isSource) {
|
|
144
|
+
cssModulesConfig.dashedIdents = false;
|
|
145
|
+
}
|
|
146
|
+
cssModules = cssModulesConfig ?? true;
|
|
147
|
+
}
|
|
148
|
+
}
|
|
149
|
+
res = transform({
|
|
150
|
+
filename: (0, utils_1.normalizeSeparators)(path_1.default.relative(options.projectRoot, asset.filePath)),
|
|
151
|
+
code,
|
|
152
|
+
cssModules,
|
|
153
|
+
analyzeDependencies: asset.meta.hasDependencies !== false
|
|
154
|
+
? {
|
|
155
|
+
preserveImports: true,
|
|
156
|
+
}
|
|
157
|
+
: false,
|
|
158
|
+
sourceMap: !!asset.env.sourceMap,
|
|
159
|
+
// @ts-expect-error TS2339
|
|
160
|
+
drafts: config?.drafts,
|
|
161
|
+
// @ts-expect-error TS2339
|
|
162
|
+
pseudoClasses: config?.pseudoClasses,
|
|
163
|
+
// @ts-expect-error TS2339
|
|
164
|
+
errorRecovery: config?.errorRecovery || false,
|
|
165
|
+
targets,
|
|
166
|
+
});
|
|
167
|
+
}
|
|
168
|
+
}
|
|
169
|
+
catch (err) {
|
|
170
|
+
err.filePath = asset.filePath;
|
|
171
|
+
let diagnostic = (0, diagnostic_1.errorToDiagnostic)(err, {
|
|
172
|
+
origin: '@atlaspack/transformer-css',
|
|
173
|
+
});
|
|
174
|
+
if (err.data?.type === 'AmbiguousUrlInCustomProperty' && err.data.url) {
|
|
175
|
+
let p = '/' +
|
|
176
|
+
(0, utils_1.relativePath)(options.projectRoot, path_1.default.resolve(path_1.default.dirname(asset.filePath), err.data.url), false);
|
|
177
|
+
diagnostic[0].hints = [`Replace with: url(${p})`];
|
|
178
|
+
diagnostic[0].documentationURL =
|
|
179
|
+
'https://parceljs.org/languages/css/#url()';
|
|
180
|
+
}
|
|
181
|
+
throw new diagnostic_1.default({
|
|
182
|
+
diagnostic,
|
|
183
|
+
});
|
|
184
|
+
}
|
|
185
|
+
if (res.warnings) {
|
|
186
|
+
for (let warning of res.warnings) {
|
|
187
|
+
logger.warn({
|
|
188
|
+
message: warning.message,
|
|
189
|
+
codeFrames: [
|
|
190
|
+
{
|
|
191
|
+
filePath: asset.filePath,
|
|
192
|
+
codeHighlights: [
|
|
193
|
+
{
|
|
194
|
+
start: {
|
|
195
|
+
line: warning.loc.line,
|
|
196
|
+
column: warning.loc.column + 1,
|
|
197
|
+
},
|
|
198
|
+
end: {
|
|
199
|
+
line: warning.loc.line,
|
|
200
|
+
column: warning.loc.column + 1,
|
|
201
|
+
},
|
|
202
|
+
},
|
|
203
|
+
],
|
|
204
|
+
},
|
|
205
|
+
],
|
|
206
|
+
});
|
|
207
|
+
}
|
|
208
|
+
}
|
|
209
|
+
// @ts-expect-error TS2339
|
|
210
|
+
if (res.map != null) {
|
|
211
|
+
// @ts-expect-error TS2339
|
|
212
|
+
let vlqMap = JSON.parse(Buffer.from(res.map).toString());
|
|
213
|
+
let map = new source_map_1.default(options.projectRoot);
|
|
214
|
+
map.addVLQMap(vlqMap);
|
|
215
|
+
if (originalMap) {
|
|
216
|
+
map.extends(originalMap);
|
|
217
|
+
}
|
|
218
|
+
asset.setMap(map);
|
|
219
|
+
}
|
|
220
|
+
if (res.dependencies) {
|
|
221
|
+
for (let dep of res.dependencies) {
|
|
222
|
+
let loc = convertLoc(dep.loc);
|
|
223
|
+
if (originalMap) {
|
|
224
|
+
loc = (0, utils_1.remapSourceLocation)(loc, originalMap, options.projectRoot);
|
|
225
|
+
}
|
|
226
|
+
// @ts-expect-error TS2339
|
|
227
|
+
if (dep.type === 'import' && !res.exports) {
|
|
228
|
+
asset.addDependency({
|
|
229
|
+
specifier: dep.url,
|
|
230
|
+
specifierType: 'url',
|
|
231
|
+
loc,
|
|
232
|
+
packageConditions: ['style'],
|
|
233
|
+
meta: {
|
|
234
|
+
// For the glob resolver to distinguish between `@import` and other URL dependencies.
|
|
235
|
+
isCSSImport: true,
|
|
236
|
+
media: dep.media,
|
|
237
|
+
placeholder: dep.placeholder,
|
|
238
|
+
},
|
|
239
|
+
});
|
|
240
|
+
}
|
|
241
|
+
else if (dep.type === 'url') {
|
|
242
|
+
asset.addURLDependency(dep.url, {
|
|
243
|
+
loc,
|
|
244
|
+
meta: {
|
|
245
|
+
placeholder: dep.placeholder,
|
|
246
|
+
},
|
|
247
|
+
});
|
|
248
|
+
}
|
|
249
|
+
}
|
|
250
|
+
}
|
|
251
|
+
let assets = [asset];
|
|
252
|
+
let buffer = Buffer.from(res.code);
|
|
253
|
+
// @ts-expect-error TS2339
|
|
254
|
+
if (res.exports != null) {
|
|
255
|
+
// @ts-expect-error TS2339
|
|
256
|
+
let exports = res.exports;
|
|
257
|
+
asset.symbols.ensure();
|
|
258
|
+
asset.symbols.set('default', 'default');
|
|
259
|
+
let dependencies = new Map();
|
|
260
|
+
let locals = new Map();
|
|
261
|
+
let c = 0;
|
|
262
|
+
let depjs = '';
|
|
263
|
+
let js = '';
|
|
264
|
+
let cssImports = '';
|
|
265
|
+
let jsDeps = [];
|
|
266
|
+
for (let key in exports) {
|
|
267
|
+
locals.set(exports[key].name, key);
|
|
268
|
+
}
|
|
269
|
+
asset.uniqueKey ?? (asset.uniqueKey = asset.id);
|
|
270
|
+
let seen = new Set();
|
|
271
|
+
let add = (key) => {
|
|
272
|
+
if (seen.has(key)) {
|
|
273
|
+
return;
|
|
274
|
+
}
|
|
275
|
+
seen.add(key);
|
|
276
|
+
let e = exports[key];
|
|
277
|
+
let s = `module.exports[${JSON.stringify(key)}] = \`${e.name}`;
|
|
278
|
+
for (let ref of e.composes) {
|
|
279
|
+
s += ' ';
|
|
280
|
+
if (ref.type === 'local') {
|
|
281
|
+
let exported = (0, nullthrows_1.default)(locals.get(ref.name));
|
|
282
|
+
add(exported);
|
|
283
|
+
s += '${' + `module.exports[${JSON.stringify(exported)}]` + '}';
|
|
284
|
+
asset.addDependency({
|
|
285
|
+
specifier: (0, nullthrows_1.default)(asset.uniqueKey),
|
|
286
|
+
specifierType: 'esm',
|
|
287
|
+
symbols: new Map([
|
|
288
|
+
[exported, { local: ref.name, isWeak: false, loc: null }],
|
|
289
|
+
]),
|
|
290
|
+
});
|
|
291
|
+
}
|
|
292
|
+
else if (ref.type === 'global') {
|
|
293
|
+
s += ref.name;
|
|
294
|
+
}
|
|
295
|
+
else if (ref.type === 'dependency') {
|
|
296
|
+
let d = dependencies.get(ref.specifier);
|
|
297
|
+
if (d == null) {
|
|
298
|
+
d = `dep_${c++}`;
|
|
299
|
+
depjs += `import * as ${d} from ${JSON.stringify(ref.specifier)};\n`;
|
|
300
|
+
dependencies.set(ref.specifier, d);
|
|
301
|
+
cssImports += `@import "${ref.specifier}";\n`;
|
|
302
|
+
asset.addDependency({
|
|
303
|
+
specifier: ref.specifier,
|
|
304
|
+
specifierType: 'esm',
|
|
305
|
+
packageConditions: ['style'],
|
|
306
|
+
});
|
|
307
|
+
}
|
|
308
|
+
s += '${' + `${d}[${JSON.stringify(ref.name)}]` + '}';
|
|
309
|
+
}
|
|
310
|
+
}
|
|
311
|
+
s += '`;\n';
|
|
312
|
+
// If the export is referenced internally (e.g. used @keyframes), add a self-reference
|
|
313
|
+
// to the JS so the symbol is retained during tree-shaking.
|
|
314
|
+
if (e.isReferenced) {
|
|
315
|
+
s += `module.exports[${JSON.stringify(key)}];\n`;
|
|
316
|
+
asset.addDependency({
|
|
317
|
+
specifier: (0, nullthrows_1.default)(asset.uniqueKey),
|
|
318
|
+
specifierType: 'esm',
|
|
319
|
+
symbols: new Map([
|
|
320
|
+
[key, { local: exports[key].name, isWeak: false, loc: null }],
|
|
321
|
+
]),
|
|
322
|
+
});
|
|
323
|
+
}
|
|
324
|
+
js += s;
|
|
325
|
+
};
|
|
326
|
+
// It's possible that the exports can be ordered differently between builds.
|
|
327
|
+
// Sorting by key is safe as the order is irrelevant but needs to be deterministic.
|
|
328
|
+
for (let key of Object.keys(exports).sort()) {
|
|
329
|
+
asset.symbols.set(key, exports[key].name);
|
|
330
|
+
add(key);
|
|
331
|
+
}
|
|
332
|
+
if (res.dependencies) {
|
|
333
|
+
for (let dep of res.dependencies) {
|
|
334
|
+
if (dep.type === 'import') {
|
|
335
|
+
// TODO: Figure out how to treeshake this
|
|
336
|
+
let d = `dep_$${c++}`;
|
|
337
|
+
depjs += `import * as ${d} from ${JSON.stringify(dep.url)};\n`;
|
|
338
|
+
js += `for (let key in ${d}) { if (key in module.exports) module.exports[key] += ' ' + ${d}[key]; else module.exports[key] = ${d}[key]; }\n`;
|
|
339
|
+
asset.symbols.set('*', '*');
|
|
340
|
+
}
|
|
341
|
+
}
|
|
342
|
+
}
|
|
343
|
+
// @ts-expect-error TS2339
|
|
344
|
+
if (res.references != null) {
|
|
345
|
+
// @ts-expect-error TS2339
|
|
346
|
+
let references = res.references;
|
|
347
|
+
for (let symbol in references) {
|
|
348
|
+
let reference = references[symbol];
|
|
349
|
+
asset.addDependency({
|
|
350
|
+
specifier: reference.specifier,
|
|
351
|
+
specifierType: 'esm',
|
|
352
|
+
packageConditions: ['style'],
|
|
353
|
+
symbols: new Map([
|
|
354
|
+
[reference.name, { local: symbol, isWeak: false, loc: null }],
|
|
355
|
+
]),
|
|
356
|
+
});
|
|
357
|
+
asset.meta.hasReferences = true;
|
|
358
|
+
cssImports += `@import "${reference.specifier}";\n`;
|
|
359
|
+
}
|
|
360
|
+
}
|
|
361
|
+
assets.push({
|
|
362
|
+
type: 'js',
|
|
363
|
+
// @ts-expect-error TS2353
|
|
364
|
+
content: depjs + js,
|
|
365
|
+
dependencies: jsDeps,
|
|
366
|
+
env,
|
|
367
|
+
});
|
|
368
|
+
// Prepend @import rules for each composes dependency so packager knows where to insert them.
|
|
369
|
+
if (cssImports.length > 0) {
|
|
370
|
+
buffer = Buffer.concat([Buffer.from(cssImports), buffer]);
|
|
371
|
+
}
|
|
372
|
+
}
|
|
373
|
+
asset.setBuffer(buffer);
|
|
374
|
+
return assets;
|
|
375
|
+
},
|
|
376
|
+
});
|
|
377
|
+
let cache = new Map();
|
|
378
|
+
function getTargets(browsers) {
|
|
379
|
+
if (browsers == null) {
|
|
380
|
+
return undefined;
|
|
381
|
+
}
|
|
382
|
+
let cached = cache.get(browsers);
|
|
383
|
+
if (cached != null) {
|
|
384
|
+
return cached;
|
|
385
|
+
}
|
|
386
|
+
let targets = browserslistToTargets((0, browserslist_1.default)(browsers));
|
|
387
|
+
cache.set(browsers, targets);
|
|
388
|
+
return targets;
|
|
389
|
+
}
|
|
390
|
+
function convertLoc(loc) {
|
|
391
|
+
return {
|
|
392
|
+
filePath: loc.filePath,
|
|
393
|
+
start: { line: loc.start.line, column: loc.start.column },
|
|
394
|
+
end: { line: loc.end.line, column: loc.end.column + 1 },
|
|
395
|
+
};
|
|
396
|
+
}
|
|
397
|
+
async function handleCompiledCssAsset(asset) {
|
|
398
|
+
const code = await asset.getCode();
|
|
399
|
+
const rules = code.split('\n').map((line) => line.trim());
|
|
400
|
+
// styleRules will be consumed by the optimiser in @compiled/parcel-optimizer
|
|
401
|
+
asset.meta.styleRules = rules;
|
|
402
|
+
// Empty the code because we only use compiled CSS assets for their metadata
|
|
403
|
+
asset.setCode('');
|
|
404
|
+
return [asset];
|
|
405
|
+
}
|
package/lib/CSSTransformer.js
CHANGED
|
@@ -12,7 +12,7 @@ function _path() {
|
|
|
12
12
|
return data;
|
|
13
13
|
}
|
|
14
14
|
function _sourceMap() {
|
|
15
|
-
const data = _interopRequireDefault(require("@
|
|
15
|
+
const data = _interopRequireDefault(require("@atlaspack/source-map"));
|
|
16
16
|
_sourceMap = function () {
|
|
17
17
|
return data;
|
|
18
18
|
};
|
|
@@ -60,9 +60,15 @@ function _diagnostic() {
|
|
|
60
60
|
};
|
|
61
61
|
return data;
|
|
62
62
|
}
|
|
63
|
-
function
|
|
64
|
-
|
|
65
|
-
function
|
|
63
|
+
function _featureFlags() {
|
|
64
|
+
const data = require("@atlaspack/feature-flags");
|
|
65
|
+
_featureFlags = function () {
|
|
66
|
+
return data;
|
|
67
|
+
};
|
|
68
|
+
return data;
|
|
69
|
+
}
|
|
70
|
+
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); }
|
|
71
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
66
72
|
const {
|
|
67
73
|
transform,
|
|
68
74
|
transformStyleAttribute,
|
|
@@ -78,15 +84,27 @@ var _default = exports.default = new (_plugin().Transformer)({
|
|
|
78
84
|
packageKey: '@atlaspack/transformer-css'
|
|
79
85
|
});
|
|
80
86
|
let contents = conf === null || conf === void 0 ? void 0 : conf.contents;
|
|
87
|
+
// @ts-expect-error TS2339
|
|
81
88
|
if (typeof (contents === null || contents === void 0 || (_contents$cssModules = contents.cssModules) === null || _contents$cssModules === void 0 ? void 0 : _contents$cssModules.include) === 'string') {
|
|
89
|
+
// @ts-expect-error TS2339
|
|
82
90
|
contents.cssModules.include = [(0, _utils().globToRegex)(contents.cssModules.include)];
|
|
91
|
+
// @ts-expect-error TS2339
|
|
83
92
|
} else if (Array.isArray(contents === null || contents === void 0 || (_contents$cssModules2 = contents.cssModules) === null || _contents$cssModules2 === void 0 ? void 0 : _contents$cssModules2.include)) {
|
|
84
|
-
|
|
93
|
+
// @ts-expect-error TS2339
|
|
94
|
+
contents.cssModules.include = contents.cssModules.include.map(
|
|
95
|
+
// @ts-expect-error TS7006
|
|
96
|
+
include => typeof include === 'string' ? (0, _utils().globToRegex)(include) : include);
|
|
85
97
|
}
|
|
98
|
+
// @ts-expect-error TS2339
|
|
86
99
|
if (typeof (contents === null || contents === void 0 || (_contents$cssModules3 = contents.cssModules) === null || _contents$cssModules3 === void 0 ? void 0 : _contents$cssModules3.exclude) === 'string') {
|
|
100
|
+
// @ts-expect-error TS2339
|
|
87
101
|
contents.cssModules.exclude = [(0, _utils().globToRegex)(contents.cssModules.exclude)];
|
|
102
|
+
// @ts-expect-error TS2339
|
|
88
103
|
} else if (Array.isArray(contents === null || contents === void 0 || (_contents$cssModules4 = contents.cssModules) === null || _contents$cssModules4 === void 0 ? void 0 : _contents$cssModules4.exclude)) {
|
|
89
|
-
|
|
104
|
+
// @ts-expect-error TS2339
|
|
105
|
+
contents.cssModules.exclude = contents.cssModules.exclude.map(
|
|
106
|
+
// @ts-expect-error TS7006
|
|
107
|
+
exclude => typeof exclude === 'string' ? (0, _utils().globToRegex)(exclude) : exclude);
|
|
90
108
|
}
|
|
91
109
|
return contents;
|
|
92
110
|
},
|
|
@@ -96,6 +114,10 @@ var _default = exports.default = new (_plugin().Transformer)({
|
|
|
96
114
|
options,
|
|
97
115
|
logger
|
|
98
116
|
}) {
|
|
117
|
+
if ((0, _featureFlags().getFeatureFlag)('compiledCssInJsTransformer') && asset.filePath.endsWith('.compiled.css')) {
|
|
118
|
+
return handleCompiledCssAsset(asset);
|
|
119
|
+
}
|
|
120
|
+
|
|
99
121
|
// Normalize the asset's environment so that properties that only affect JS don't cause CSS to be duplicated.
|
|
100
122
|
// For example, with ESModule and CommonJS targets, only a single shared CSS bundle should be produced.
|
|
101
123
|
let env = asset.env;
|
|
@@ -106,10 +128,11 @@ var _default = exports.default = new (_plugin().Transformer)({
|
|
|
106
128
|
},
|
|
107
129
|
shouldOptimize: asset.env.shouldOptimize,
|
|
108
130
|
shouldScopeHoist: asset.env.shouldScopeHoist,
|
|
109
|
-
sourceMap: asset.env.sourceMap
|
|
131
|
+
sourceMap: asset.env.sourceMap,
|
|
132
|
+
unstableSingleFileOutput: (0, _featureFlags().getFeatureFlag)('preserveUnstableSingleFileOutputInCss') ? asset.env.unstableSingleFileOutput : undefined
|
|
110
133
|
});
|
|
111
134
|
let [code, originalMap] = await Promise.all([asset.getBuffer(), asset.getMap(),
|
|
112
|
-
//
|
|
135
|
+
// @ts-expect-error TS2339
|
|
113
136
|
process.browser && native().default()]);
|
|
114
137
|
let targets = getTargets(asset.env.engines.browsers);
|
|
115
138
|
let res;
|
|
@@ -118,12 +141,14 @@ var _default = exports.default = new (_plugin().Transformer)({
|
|
|
118
141
|
res = transformStyleAttribute({
|
|
119
142
|
code,
|
|
120
143
|
analyzeDependencies: true,
|
|
144
|
+
// @ts-expect-error TS2339
|
|
121
145
|
errorRecovery: (config === null || config === void 0 ? void 0 : config.errorRecovery) || false,
|
|
122
146
|
targets
|
|
123
147
|
});
|
|
124
148
|
} else {
|
|
125
149
|
let cssModules = false;
|
|
126
150
|
if (asset.meta.type !== 'tag' && asset.meta.cssModulesCompiled == null) {
|
|
151
|
+
// @ts-expect-error TS2339
|
|
127
152
|
let cssModulesConfig = config === null || config === void 0 ? void 0 : config.cssModules;
|
|
128
153
|
let isCSSModule = /\.module\./.test(asset.filePath);
|
|
129
154
|
if (asset.isSource) {
|
|
@@ -132,6 +157,7 @@ var _default = exports.default = new (_plugin().Transformer)({
|
|
|
132
157
|
if (typeof cssModulesConfig === 'boolean') {
|
|
133
158
|
isCSSModule = true;
|
|
134
159
|
} else if (cssModulesConfig !== null && cssModulesConfig !== void 0 && cssModulesConfig.include) {
|
|
160
|
+
// @ts-expect-error TS7006
|
|
135
161
|
isCSSModule = cssModulesConfig.include.some(include => include.test(projectRootPath));
|
|
136
162
|
} else if (cssModulesConfig !== null && cssModulesConfig !== void 0 && cssModulesConfig.global) {
|
|
137
163
|
isCSSModule = true;
|
|
@@ -155,8 +181,11 @@ var _default = exports.default = new (_plugin().Transformer)({
|
|
|
155
181
|
preserveImports: true
|
|
156
182
|
} : false,
|
|
157
183
|
sourceMap: !!asset.env.sourceMap,
|
|
184
|
+
// @ts-expect-error TS2339
|
|
158
185
|
drafts: config === null || config === void 0 ? void 0 : config.drafts,
|
|
186
|
+
// @ts-expect-error TS2339
|
|
159
187
|
pseudoClasses: config === null || config === void 0 ? void 0 : config.pseudoClasses,
|
|
188
|
+
// @ts-expect-error TS2339
|
|
160
189
|
errorRecovery: (config === null || config === void 0 ? void 0 : config.errorRecovery) || false,
|
|
161
190
|
targets
|
|
162
191
|
});
|
|
@@ -196,7 +225,10 @@ var _default = exports.default = new (_plugin().Transformer)({
|
|
|
196
225
|
});
|
|
197
226
|
}
|
|
198
227
|
}
|
|
228
|
+
|
|
229
|
+
// @ts-expect-error TS2339
|
|
199
230
|
if (res.map != null) {
|
|
231
|
+
// @ts-expect-error TS2339
|
|
200
232
|
let vlqMap = JSON.parse(Buffer.from(res.map).toString());
|
|
201
233
|
let map = new (_sourceMap().default)(options.projectRoot);
|
|
202
234
|
map.addVLQMap(vlqMap);
|
|
@@ -209,8 +241,10 @@ var _default = exports.default = new (_plugin().Transformer)({
|
|
|
209
241
|
for (let dep of res.dependencies) {
|
|
210
242
|
let loc = convertLoc(dep.loc);
|
|
211
243
|
if (originalMap) {
|
|
212
|
-
loc = (0, _utils().remapSourceLocation)(loc, originalMap);
|
|
244
|
+
loc = (0, _utils().remapSourceLocation)(loc, originalMap, options.projectRoot);
|
|
213
245
|
}
|
|
246
|
+
|
|
247
|
+
// @ts-expect-error TS2339
|
|
214
248
|
if (dep.type === 'import' && !res.exports) {
|
|
215
249
|
asset.addDependency({
|
|
216
250
|
specifier: dep.url,
|
|
@@ -236,7 +270,10 @@ var _default = exports.default = new (_plugin().Transformer)({
|
|
|
236
270
|
}
|
|
237
271
|
let assets = [asset];
|
|
238
272
|
let buffer = Buffer.from(res.code);
|
|
273
|
+
|
|
274
|
+
// @ts-expect-error TS2339
|
|
239
275
|
if (res.exports != null) {
|
|
276
|
+
// @ts-expect-error TS2339
|
|
240
277
|
let exports = res.exports;
|
|
241
278
|
asset.symbols.ensure();
|
|
242
279
|
asset.symbols.set('default', 'default');
|
|
@@ -246,6 +283,7 @@ var _default = exports.default = new (_plugin().Transformer)({
|
|
|
246
283
|
let depjs = '';
|
|
247
284
|
let js = '';
|
|
248
285
|
let cssImports = '';
|
|
286
|
+
let jsDeps = [];
|
|
249
287
|
for (let key in exports) {
|
|
250
288
|
locals.set(exports[key].name, key);
|
|
251
289
|
}
|
|
@@ -327,7 +365,10 @@ var _default = exports.default = new (_plugin().Transformer)({
|
|
|
327
365
|
}
|
|
328
366
|
}
|
|
329
367
|
}
|
|
368
|
+
|
|
369
|
+
// @ts-expect-error TS2339
|
|
330
370
|
if (res.references != null) {
|
|
371
|
+
// @ts-expect-error TS2339
|
|
331
372
|
let references = res.references;
|
|
332
373
|
for (let symbol in references) {
|
|
333
374
|
let reference = references[symbol];
|
|
@@ -347,8 +388,9 @@ var _default = exports.default = new (_plugin().Transformer)({
|
|
|
347
388
|
}
|
|
348
389
|
assets.push({
|
|
349
390
|
type: 'js',
|
|
391
|
+
// @ts-expect-error TS2353
|
|
350
392
|
content: depjs + js,
|
|
351
|
-
dependencies:
|
|
393
|
+
dependencies: jsDeps,
|
|
352
394
|
env
|
|
353
395
|
});
|
|
354
396
|
|
|
@@ -386,4 +428,14 @@ function convertLoc(loc) {
|
|
|
386
428
|
column: loc.end.column + 1
|
|
387
429
|
}
|
|
388
430
|
};
|
|
431
|
+
}
|
|
432
|
+
async function handleCompiledCssAsset(asset) {
|
|
433
|
+
const code = await asset.getCode();
|
|
434
|
+
const rules = code.split('\n').map(line => line.trim());
|
|
435
|
+
// styleRules will be consumed by the optimiser in @compiled/parcel-optimizer
|
|
436
|
+
asset.meta.styleRules = rules;
|
|
437
|
+
|
|
438
|
+
// Empty the code because we only use compiled CSS assets for their metadata
|
|
439
|
+
asset.setCode('');
|
|
440
|
+
return [asset];
|
|
389
441
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaspack/transformer-css",
|
|
3
|
-
"version": "2.14.5-canary.
|
|
3
|
+
"version": "2.14.5-canary.491+40f001272",
|
|
4
4
|
"license": "(MIT OR Apache-2.0)",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public"
|
|
@@ -9,16 +9,19 @@
|
|
|
9
9
|
"type": "git",
|
|
10
10
|
"url": "https://github.com/atlassian-labs/atlaspack.git"
|
|
11
11
|
},
|
|
12
|
-
"main": "lib/CSSTransformer.js",
|
|
13
|
-
"source": "src/CSSTransformer.
|
|
12
|
+
"main": "./lib/CSSTransformer.js",
|
|
13
|
+
"source": "./src/CSSTransformer.ts",
|
|
14
|
+
"types": "./lib/types/CSSTransformer.d.ts",
|
|
14
15
|
"engines": {
|
|
15
16
|
"node": ">= 16.0.0"
|
|
16
17
|
},
|
|
17
18
|
"dependencies": {
|
|
18
|
-
"@atlaspack/diagnostic": "2.14.1-canary.
|
|
19
|
-
"@atlaspack/
|
|
20
|
-
"@atlaspack/
|
|
21
|
-
"@
|
|
19
|
+
"@atlaspack/diagnostic": "2.14.1-canary.559+40f001272",
|
|
20
|
+
"@atlaspack/feature-flags": "2.14.1-canary.559+40f001272",
|
|
21
|
+
"@atlaspack/plugin": "2.14.5-canary.491+40f001272",
|
|
22
|
+
"@atlaspack/source-map": "3.3.9-canary.4270+40f001272",
|
|
23
|
+
"@atlaspack/types": "2.14.5-canary.491+40f001272",
|
|
24
|
+
"@atlaspack/utils": "2.14.5-canary.491+40f001272",
|
|
22
25
|
"browserslist": "^4.6.6",
|
|
23
26
|
"lightningcss": "^1.28.2",
|
|
24
27
|
"nullthrows": "^1.1.1"
|
|
@@ -30,5 +33,8 @@
|
|
|
30
33
|
"lightningcss": "lightningcss-wasm"
|
|
31
34
|
},
|
|
32
35
|
"type": "commonjs",
|
|
33
|
-
"
|
|
34
|
-
|
|
36
|
+
"scripts": {
|
|
37
|
+
"build:lib": "gulp build --gulpfile ../../../gulpfile.js --cwd ."
|
|
38
|
+
},
|
|
39
|
+
"gitHead": "40f0012726d0b82cc825d880d6752d800f04f3b4"
|
|
40
|
+
}
|