@atlaspack/transformer-postcss 2.14.5-canary.39 → 2.14.5-canary.391
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 +411 -0
- package/dist/PostCSSTransformer.js +281 -0
- package/dist/constants.js +4 -0
- package/dist/loadConfig.js +149 -0
- package/dist/loadPlugins.js +33 -0
- package/lib/PostCSSTransformer.js +12 -7
- package/lib/loadConfig.js +2 -0
- package/lib/loadPlugins.js +5 -2
- package/lib/types/PostCSSTransformer.d.ts +3 -0
- package/lib/types/constants.d.ts +1 -0
- package/lib/types/loadConfig.d.ts +17 -0
- package/lib/types/loadPlugins.d.ts +4 -0
- package/package.json +14 -9
- package/src/{PostCSSTransformer.js → PostCSSTransformer.ts} +23 -15
- package/src/{constants.js → constants.ts} +0 -2
- package/src/{loadConfig.js → loadConfig.ts} +19 -19
- package/src/{loadPlugins.js → loadPlugins.ts} +15 -9
- package/tsconfig.json +24 -0
- package/tsconfig.tsbuildinfo +1 -0
|
@@ -0,0 +1,281 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
const rust_1 = require("@atlaspack/rust");
|
|
7
|
+
const utils_1 = require("@atlaspack/utils");
|
|
8
|
+
const plugin_1 = require("@atlaspack/plugin");
|
|
9
|
+
const nullthrows_1 = __importDefault(require("nullthrows"));
|
|
10
|
+
const path_1 = __importDefault(require("path"));
|
|
11
|
+
const semver_1 = __importDefault(require("semver"));
|
|
12
|
+
const postcss_value_parser_1 = __importDefault(require("postcss-value-parser"));
|
|
13
|
+
const loadConfig_1 = require("./loadConfig");
|
|
14
|
+
const constants_1 = require("./constants");
|
|
15
|
+
const diagnostic_1 = require("@atlaspack/diagnostic");
|
|
16
|
+
const COMPOSES_RE = /composes:.+from\s*("|').*("|')\s*;?/;
|
|
17
|
+
const FROM_IMPORT_RE = /.+from\s*(?:"|')(.*)(?:"|')\s*;?/;
|
|
18
|
+
const LEGACY_MODULE_RE = /@value|:export|(:global|:local|:import)(?!\s*\()/i;
|
|
19
|
+
const MODULE_BY_NAME_RE = /\.module\./;
|
|
20
|
+
exports.default = new plugin_1.Transformer({
|
|
21
|
+
loadConfig({ config, options, logger }) {
|
|
22
|
+
return (0, loadConfig_1.load)({ config, options, logger });
|
|
23
|
+
},
|
|
24
|
+
canReuseAST({ ast }) {
|
|
25
|
+
return (ast.type === 'postcss' && semver_1.default.satisfies(ast.version, constants_1.POSTCSS_RANGE));
|
|
26
|
+
},
|
|
27
|
+
async parse({ asset, config, options }) {
|
|
28
|
+
let isLegacy = await isLegacyCssModule(asset);
|
|
29
|
+
if (!config && !isLegacy) {
|
|
30
|
+
return;
|
|
31
|
+
}
|
|
32
|
+
const postcss = await loadPostcss(options, asset.filePath);
|
|
33
|
+
return {
|
|
34
|
+
type: 'postcss',
|
|
35
|
+
version: '8.2.1',
|
|
36
|
+
program: postcss
|
|
37
|
+
.parse(await asset.getCode(), {
|
|
38
|
+
from: asset.filePath,
|
|
39
|
+
})
|
|
40
|
+
.toJSON(),
|
|
41
|
+
};
|
|
42
|
+
},
|
|
43
|
+
async transform({ asset, config, options, resolve, logger }) {
|
|
44
|
+
asset.type = 'css';
|
|
45
|
+
let isLegacy = await isLegacyCssModule(asset);
|
|
46
|
+
if (isLegacy && !config) {
|
|
47
|
+
config = {
|
|
48
|
+
raw: {},
|
|
49
|
+
filePath: '',
|
|
50
|
+
hydrated: {
|
|
51
|
+
plugins: [],
|
|
52
|
+
from: asset.filePath,
|
|
53
|
+
to: asset.filePath,
|
|
54
|
+
modules: {},
|
|
55
|
+
},
|
|
56
|
+
};
|
|
57
|
+
// TODO: warning?
|
|
58
|
+
}
|
|
59
|
+
if (!config) {
|
|
60
|
+
return [asset];
|
|
61
|
+
}
|
|
62
|
+
// @ts-expect-error TS2709
|
|
63
|
+
const postcss = await loadPostcss(options, asset.filePath);
|
|
64
|
+
let ast = (0, nullthrows_1.default)(await asset.getAST());
|
|
65
|
+
let program = postcss.fromJSON(ast.program);
|
|
66
|
+
let plugins = [...config.hydrated.plugins];
|
|
67
|
+
let cssModules = null;
|
|
68
|
+
if (config.hydrated.modules) {
|
|
69
|
+
asset.meta.cssModulesCompiled = 'postcss';
|
|
70
|
+
let code = asset.isASTDirty() ? null : await asset.getCode();
|
|
71
|
+
if (Object.keys(config.hydrated.modules).length === 0 &&
|
|
72
|
+
code &&
|
|
73
|
+
!isLegacy &&
|
|
74
|
+
!LEGACY_MODULE_RE.test(code)) {
|
|
75
|
+
let filename = path_1.default.basename(config.filePath);
|
|
76
|
+
let message;
|
|
77
|
+
let configKey;
|
|
78
|
+
let hint;
|
|
79
|
+
if (config.raw.modules) {
|
|
80
|
+
message = (0, diagnostic_1.md) `The "modules" option in __${filename}__ can be replaced with configuration for @atlaspack/transformer-css to improve build performance.`;
|
|
81
|
+
configKey = '/modules';
|
|
82
|
+
hint = (0, diagnostic_1.md) `Remove the "modules" option from __${filename}__`;
|
|
83
|
+
}
|
|
84
|
+
else {
|
|
85
|
+
message = (0, diagnostic_1.md) `The "postcss-modules" plugin in __${filename}__ can be replaced with configuration for @atlaspack/transformer-css to improve build performance.`;
|
|
86
|
+
configKey = '/plugins/postcss-modules';
|
|
87
|
+
hint = (0, diagnostic_1.md) `Remove the "postcss-modules" plugin from __${filename}__`;
|
|
88
|
+
}
|
|
89
|
+
if (filename === 'package.json') {
|
|
90
|
+
configKey = `/postcss${configKey}`;
|
|
91
|
+
}
|
|
92
|
+
let hints = [
|
|
93
|
+
'Enable the "cssModules" option for "@atlaspack/transformer-css" in your package.json',
|
|
94
|
+
];
|
|
95
|
+
if (plugins.length === 0) {
|
|
96
|
+
message += (0, diagnostic_1.md) ` Since there are no other plugins, __${filename}__ can be deleted safely.`;
|
|
97
|
+
hints.push((0, diagnostic_1.md) `Delete __${filename}__`);
|
|
98
|
+
}
|
|
99
|
+
else {
|
|
100
|
+
hints.push(hint);
|
|
101
|
+
}
|
|
102
|
+
let codeFrames;
|
|
103
|
+
if (path_1.default.extname(filename) !== '.js') {
|
|
104
|
+
let contents = await asset.fs.readFile(config.filePath, 'utf8');
|
|
105
|
+
codeFrames = [
|
|
106
|
+
{
|
|
107
|
+
language: 'json',
|
|
108
|
+
filePath: config.filePath,
|
|
109
|
+
code: contents,
|
|
110
|
+
codeHighlights: (0, diagnostic_1.generateJSONCodeHighlights)(contents, [
|
|
111
|
+
{
|
|
112
|
+
key: configKey,
|
|
113
|
+
type: 'key',
|
|
114
|
+
},
|
|
115
|
+
]),
|
|
116
|
+
},
|
|
117
|
+
];
|
|
118
|
+
}
|
|
119
|
+
else {
|
|
120
|
+
codeFrames = [
|
|
121
|
+
{
|
|
122
|
+
filePath: config.filePath,
|
|
123
|
+
codeHighlights: [
|
|
124
|
+
{
|
|
125
|
+
start: { line: 1, column: 1 },
|
|
126
|
+
end: { line: 1, column: 1 },
|
|
127
|
+
},
|
|
128
|
+
],
|
|
129
|
+
},
|
|
130
|
+
];
|
|
131
|
+
}
|
|
132
|
+
logger.warn({
|
|
133
|
+
message,
|
|
134
|
+
hints,
|
|
135
|
+
documentationURL: 'https://parceljs.org/languages/css/#enabling-css-modules-globally',
|
|
136
|
+
codeFrames,
|
|
137
|
+
});
|
|
138
|
+
}
|
|
139
|
+
// TODO: should this be resolved from the project root?
|
|
140
|
+
let postcssModules = await options.packageManager.require('postcss-modules', asset.filePath, {
|
|
141
|
+
range: '^4.3.0',
|
|
142
|
+
saveDev: true,
|
|
143
|
+
shouldAutoInstall: options.shouldAutoInstall,
|
|
144
|
+
});
|
|
145
|
+
plugins.push(postcssModules({
|
|
146
|
+
// @ts-expect-error TS7006
|
|
147
|
+
getJSON: (filename, json) => (cssModules = json),
|
|
148
|
+
Loader: await createLoader(asset, resolve, options),
|
|
149
|
+
// @ts-expect-error TS7006
|
|
150
|
+
generateScopedName: (name, filename) => `${name}_${(0, rust_1.hashString)(path_1.default.relative(options.projectRoot, filename)).substr(0, 6)}`,
|
|
151
|
+
...config.hydrated.modules,
|
|
152
|
+
}));
|
|
153
|
+
if (code == null || COMPOSES_RE.test(code)) {
|
|
154
|
+
// @ts-expect-error TS7006
|
|
155
|
+
program.walkDecls((decl) => {
|
|
156
|
+
let [, importPath] = FROM_IMPORT_RE.exec(decl.value) || [];
|
|
157
|
+
if (decl.prop === 'composes' && importPath != null) {
|
|
158
|
+
let parsed = (0, postcss_value_parser_1.default)(decl.value);
|
|
159
|
+
parsed.walk((node) => {
|
|
160
|
+
if (node.type === 'string') {
|
|
161
|
+
asset.addDependency({
|
|
162
|
+
specifier: importPath,
|
|
163
|
+
specifierType: 'url',
|
|
164
|
+
loc: {
|
|
165
|
+
filePath: asset.filePath,
|
|
166
|
+
start: decl.source.start,
|
|
167
|
+
end: {
|
|
168
|
+
line: decl.source.start.line,
|
|
169
|
+
column: decl.source.start.column + importPath.length,
|
|
170
|
+
},
|
|
171
|
+
},
|
|
172
|
+
});
|
|
173
|
+
}
|
|
174
|
+
});
|
|
175
|
+
}
|
|
176
|
+
});
|
|
177
|
+
}
|
|
178
|
+
}
|
|
179
|
+
let { messages, root } = await postcss(plugins).process(program, config.hydrated);
|
|
180
|
+
asset.setAST({
|
|
181
|
+
type: 'postcss',
|
|
182
|
+
version: '8.2.1',
|
|
183
|
+
program: root.toJSON(),
|
|
184
|
+
});
|
|
185
|
+
for (let msg of messages) {
|
|
186
|
+
if (msg.type === 'dependency') {
|
|
187
|
+
asset.invalidateOnFileChange(msg.file);
|
|
188
|
+
}
|
|
189
|
+
else if (msg.type === 'dir-dependency') {
|
|
190
|
+
let pattern = `${msg.dir}/${msg.glob ?? '**/*'}`;
|
|
191
|
+
let files = await (0, utils_1.glob)(pattern, asset.fs, { onlyFiles: true });
|
|
192
|
+
for (let file of files) {
|
|
193
|
+
asset.invalidateOnFileChange(path_1.default.normalize(file));
|
|
194
|
+
}
|
|
195
|
+
asset.invalidateOnFileCreate({ glob: pattern });
|
|
196
|
+
}
|
|
197
|
+
}
|
|
198
|
+
let assets = [asset];
|
|
199
|
+
if (cssModules) {
|
|
200
|
+
let cssModulesList = Object.entries(cssModules);
|
|
201
|
+
let deps = asset
|
|
202
|
+
.getDependencies()
|
|
203
|
+
.filter((dep) => dep.priority === 'sync');
|
|
204
|
+
let code;
|
|
205
|
+
if (deps.length > 0) {
|
|
206
|
+
code = `
|
|
207
|
+
module.exports = Object.assign({}, ${deps
|
|
208
|
+
.map((dep) => `require(${JSON.stringify(dep.specifier)})`)
|
|
209
|
+
.join(', ')}, ${JSON.stringify(cssModules, null, 2)});
|
|
210
|
+
`;
|
|
211
|
+
}
|
|
212
|
+
else {
|
|
213
|
+
code = cssModulesList
|
|
214
|
+
.map(
|
|
215
|
+
// This syntax enables shaking the invidual statements, so that unused classes don't even exist in JS.
|
|
216
|
+
([className, classNameHashed]) => `module.exports[${JSON.stringify(className)}] = ${JSON.stringify(classNameHashed)};`)
|
|
217
|
+
.join('\n');
|
|
218
|
+
}
|
|
219
|
+
asset.symbols.ensure();
|
|
220
|
+
for (let [k, v] of cssModulesList) {
|
|
221
|
+
asset.symbols.set(k, v);
|
|
222
|
+
}
|
|
223
|
+
asset.symbols.set('default', 'default');
|
|
224
|
+
assets.push({
|
|
225
|
+
type: 'js',
|
|
226
|
+
// @ts-expect-error TS2353
|
|
227
|
+
content: code,
|
|
228
|
+
});
|
|
229
|
+
}
|
|
230
|
+
return assets;
|
|
231
|
+
},
|
|
232
|
+
async generate({ asset, ast, options }) {
|
|
233
|
+
// @ts-expect-error TS2709
|
|
234
|
+
const postcss = await loadPostcss(options, asset.filePath);
|
|
235
|
+
let code = '';
|
|
236
|
+
// @ts-expect-error TS7006
|
|
237
|
+
postcss.stringify(postcss.fromJSON(ast.program), (c) => {
|
|
238
|
+
code += c;
|
|
239
|
+
});
|
|
240
|
+
return {
|
|
241
|
+
content: code,
|
|
242
|
+
};
|
|
243
|
+
},
|
|
244
|
+
});
|
|
245
|
+
async function createLoader(asset, resolve, options) {
|
|
246
|
+
let { default: FileSystemLoader } = await options.packageManager.require('postcss-modules/build/css-loader-core/loader', asset.filePath);
|
|
247
|
+
return class AtlaspackFileSystemLoader extends FileSystemLoader {
|
|
248
|
+
async fetch(composesPath, relativeTo) {
|
|
249
|
+
let importPath = composesPath.replace(/^["']|["']$/g, '');
|
|
250
|
+
let resolved = await resolve(relativeTo, importPath);
|
|
251
|
+
let rootRelativePath = path_1.default.resolve(path_1.default.dirname(relativeTo), resolved);
|
|
252
|
+
let root = path_1.default.resolve('/');
|
|
253
|
+
// fixes an issue on windows which is part of the css-modules-loader-core
|
|
254
|
+
// see https://github.com/css-modules/css-modules-loader-core/issues/230
|
|
255
|
+
if (rootRelativePath.startsWith(root)) {
|
|
256
|
+
rootRelativePath = rootRelativePath.substr(root.length);
|
|
257
|
+
}
|
|
258
|
+
let source = await asset.fs.readFile(resolved, 'utf-8');
|
|
259
|
+
let { exportTokens } = await this.core.load(source, rootRelativePath, undefined, this.fetch.bind(this));
|
|
260
|
+
return exportTokens;
|
|
261
|
+
}
|
|
262
|
+
get finalSource() {
|
|
263
|
+
return '';
|
|
264
|
+
}
|
|
265
|
+
};
|
|
266
|
+
}
|
|
267
|
+
// @ts-expect-error TS2709
|
|
268
|
+
function loadPostcss(options, from) {
|
|
269
|
+
return options.packageManager.require('postcss', from, {
|
|
270
|
+
range: constants_1.POSTCSS_RANGE,
|
|
271
|
+
saveDev: true,
|
|
272
|
+
shouldAutoInstall: options.shouldAutoInstall,
|
|
273
|
+
});
|
|
274
|
+
}
|
|
275
|
+
async function isLegacyCssModule(asset) {
|
|
276
|
+
if (!MODULE_BY_NAME_RE.test(asset.filePath)) {
|
|
277
|
+
return false;
|
|
278
|
+
}
|
|
279
|
+
let code = await asset.getCode();
|
|
280
|
+
return LEGACY_MODULE_RE.test(code);
|
|
281
|
+
}
|
|
@@ -0,0 +1,149 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
exports.load = load;
|
|
7
|
+
const path_1 = __importDefault(require("path"));
|
|
8
|
+
const diagnostic_1 = require("@atlaspack/diagnostic");
|
|
9
|
+
const nullthrows_1 = __importDefault(require("nullthrows"));
|
|
10
|
+
// @ts-expect-error TS7016
|
|
11
|
+
const clone_1 = __importDefault(require("clone"));
|
|
12
|
+
const constants_1 = require("./constants");
|
|
13
|
+
const loadPlugins_1 = __importDefault(require("./loadPlugins"));
|
|
14
|
+
async function configHydrator(configFile, config, resolveFrom, options, logger) {
|
|
15
|
+
if (configFile == null) {
|
|
16
|
+
return;
|
|
17
|
+
}
|
|
18
|
+
// Load the custom config...
|
|
19
|
+
let modulesConfig;
|
|
20
|
+
let configFilePlugins = (0, clone_1.default)(configFile.plugins);
|
|
21
|
+
if (configFilePlugins != null &&
|
|
22
|
+
typeof configFilePlugins === 'object' &&
|
|
23
|
+
configFilePlugins['postcss-modules'] != null) {
|
|
24
|
+
modulesConfig = configFilePlugins['postcss-modules'];
|
|
25
|
+
delete configFilePlugins['postcss-modules'];
|
|
26
|
+
}
|
|
27
|
+
if (!modulesConfig && configFile.modules) {
|
|
28
|
+
modulesConfig = {};
|
|
29
|
+
}
|
|
30
|
+
let plugins = await (0, loadPlugins_1.default)(configFilePlugins, (0, nullthrows_1.default)(resolveFrom), options);
|
|
31
|
+
// contents is either:
|
|
32
|
+
// from JSON: { plugins: { 'postcss-foo': { ...opts } } }
|
|
33
|
+
// from JS (v8): { plugins: [ { postcssPlugin: 'postcss-foo', ...visitor callback functions } ]
|
|
34
|
+
// from JS (v7): { plugins: [ [Function: ...] ]
|
|
35
|
+
let pluginArray = Array.isArray(configFilePlugins)
|
|
36
|
+
? configFilePlugins
|
|
37
|
+
: Object.keys(configFilePlugins);
|
|
38
|
+
for (let p of pluginArray) {
|
|
39
|
+
if (typeof p === 'string') {
|
|
40
|
+
config.addDevDependency({
|
|
41
|
+
specifier: p,
|
|
42
|
+
resolveFrom: (0, nullthrows_1.default)(resolveFrom),
|
|
43
|
+
});
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
let redundantPlugins = pluginArray.filter((p) => p === 'autoprefixer' || p === 'postcss-preset-env');
|
|
47
|
+
if (redundantPlugins.length > 0) {
|
|
48
|
+
let filename = path_1.default.basename(resolveFrom);
|
|
49
|
+
let isPackageJson = filename === 'package.json';
|
|
50
|
+
let message;
|
|
51
|
+
let hints = [];
|
|
52
|
+
if (!isPackageJson && redundantPlugins.length === pluginArray.length) {
|
|
53
|
+
message = (0, diagnostic_1.md) `Parcel includes CSS transpilation and vendor prefixing by default. PostCSS config __${filename}__ contains only redundant plugins. Deleting it may significantly improve build performance.`;
|
|
54
|
+
hints.push((0, diagnostic_1.md) `Delete __${filename}__`);
|
|
55
|
+
}
|
|
56
|
+
else {
|
|
57
|
+
message = (0, diagnostic_1.md) `Parcel includes CSS transpilation and vendor prefixing by default. PostCSS config __${filename}__ contains the following redundant plugins: ${[
|
|
58
|
+
...redundantPlugins,
|
|
59
|
+
].map((p) => diagnostic_1.md.underline(p))}. Removing these may improve build performance.`;
|
|
60
|
+
hints.push((0, diagnostic_1.md) `Remove the above plugins from __${filename}__`);
|
|
61
|
+
}
|
|
62
|
+
let codeFrames;
|
|
63
|
+
if (path_1.default.extname(filename) !== '.js') {
|
|
64
|
+
let contents = await options.inputFS.readFile(resolveFrom, 'utf8');
|
|
65
|
+
let prefix = isPackageJson ? '/postcss' : '';
|
|
66
|
+
codeFrames = [
|
|
67
|
+
{
|
|
68
|
+
language: 'json',
|
|
69
|
+
filePath: resolveFrom,
|
|
70
|
+
code: contents,
|
|
71
|
+
codeHighlights: (0, diagnostic_1.generateJSONCodeHighlights)(contents, redundantPlugins.map((plugin) => ({
|
|
72
|
+
key: `${prefix}/plugins/${plugin}`,
|
|
73
|
+
type: 'key',
|
|
74
|
+
}))),
|
|
75
|
+
},
|
|
76
|
+
];
|
|
77
|
+
}
|
|
78
|
+
else {
|
|
79
|
+
codeFrames = [
|
|
80
|
+
{
|
|
81
|
+
filePath: resolveFrom,
|
|
82
|
+
codeHighlights: [
|
|
83
|
+
{
|
|
84
|
+
start: { line: 1, column: 1 },
|
|
85
|
+
end: { line: 1, column: 1 },
|
|
86
|
+
},
|
|
87
|
+
],
|
|
88
|
+
},
|
|
89
|
+
];
|
|
90
|
+
}
|
|
91
|
+
logger.warn({
|
|
92
|
+
message,
|
|
93
|
+
hints,
|
|
94
|
+
documentationURL: 'https://parceljs.org/languages/css/#default-plugins',
|
|
95
|
+
codeFrames,
|
|
96
|
+
});
|
|
97
|
+
}
|
|
98
|
+
return {
|
|
99
|
+
raw: configFile,
|
|
100
|
+
filePath: resolveFrom,
|
|
101
|
+
hydrated: {
|
|
102
|
+
plugins,
|
|
103
|
+
from: config.searchPath,
|
|
104
|
+
to: config.searchPath,
|
|
105
|
+
modules: modulesConfig,
|
|
106
|
+
},
|
|
107
|
+
};
|
|
108
|
+
}
|
|
109
|
+
async function load({ config, options, logger, }) {
|
|
110
|
+
if (!config.isSource) {
|
|
111
|
+
return;
|
|
112
|
+
}
|
|
113
|
+
let configFile = await config.getConfig([
|
|
114
|
+
'.postcssrc',
|
|
115
|
+
'.postcssrc.json',
|
|
116
|
+
'.postcssrc.js',
|
|
117
|
+
'.postcssrc.cjs',
|
|
118
|
+
'.postcssrc.mjs',
|
|
119
|
+
'postcss.config.js',
|
|
120
|
+
'postcss.config.cjs',
|
|
121
|
+
'postcss.config.mjs',
|
|
122
|
+
], { packageKey: 'postcss' });
|
|
123
|
+
let contents = null;
|
|
124
|
+
if (configFile) {
|
|
125
|
+
config.addDevDependency({
|
|
126
|
+
specifier: 'postcss',
|
|
127
|
+
resolveFrom: config.searchPath,
|
|
128
|
+
range: constants_1.POSTCSS_RANGE,
|
|
129
|
+
});
|
|
130
|
+
contents = configFile.contents;
|
|
131
|
+
let isDynamic = configFile && path_1.default.extname(configFile.filePath).endsWith('js');
|
|
132
|
+
if (isDynamic) {
|
|
133
|
+
// We have to invalidate on startup in case the config is non-deterministic,
|
|
134
|
+
// e.g. using unknown environment variables, reading from the filesystem, etc.
|
|
135
|
+
logger.warn({
|
|
136
|
+
message: 'WARNING: Using a JavaScript PostCSS config file means losing out on caching features of Parcel. Use a .postcssrc(.json) file whenever possible.',
|
|
137
|
+
});
|
|
138
|
+
}
|
|
139
|
+
if (typeof contents !== 'object') {
|
|
140
|
+
throw new Error('PostCSS config should be an object.');
|
|
141
|
+
}
|
|
142
|
+
if (contents.plugins == null ||
|
|
143
|
+
typeof contents.plugins !== 'object' ||
|
|
144
|
+
Object.keys(contents.plugins).length === 0) {
|
|
145
|
+
throw new Error('PostCSS config must have plugins');
|
|
146
|
+
}
|
|
147
|
+
}
|
|
148
|
+
return configHydrator(contents, config, configFile?.filePath, options, logger);
|
|
149
|
+
}
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.default = loadExternalPlugins;
|
|
4
|
+
async function loadExternalPlugins(plugins, relative, options) {
|
|
5
|
+
if (Array.isArray(plugins)) {
|
|
6
|
+
return Promise.all(plugins
|
|
7
|
+
.map((p) => loadPlugin(p, relative, null, options.packageManager, options.shouldAutoInstall))
|
|
8
|
+
.filter(Boolean));
|
|
9
|
+
}
|
|
10
|
+
else if (typeof plugins === 'object') {
|
|
11
|
+
let _plugins = plugins;
|
|
12
|
+
let mapPlugins = await Promise.all(Object.keys(plugins).map((p) => loadPlugin(p, relative, _plugins[p], options.packageManager, options.shouldAutoInstall)));
|
|
13
|
+
return mapPlugins.filter(Boolean);
|
|
14
|
+
}
|
|
15
|
+
else {
|
|
16
|
+
return [];
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
async function loadPlugin(pluginArg, relative, options = {}, packageManager, shouldAutoInstall) {
|
|
20
|
+
if (typeof pluginArg !== 'string') {
|
|
21
|
+
return pluginArg;
|
|
22
|
+
}
|
|
23
|
+
let plugin = await packageManager.require(pluginArg, relative, {
|
|
24
|
+
shouldAutoInstall,
|
|
25
|
+
});
|
|
26
|
+
plugin = plugin.default || plugin;
|
|
27
|
+
if (options != null &&
|
|
28
|
+
typeof options === 'object' &&
|
|
29
|
+
Object.keys(options).length > 0) {
|
|
30
|
+
plugin = plugin(options);
|
|
31
|
+
}
|
|
32
|
+
return plugin.default || plugin;
|
|
33
|
+
}
|
|
@@ -129,6 +129,8 @@ var _default = exports.default = new (_plugin().Transformer)({
|
|
|
129
129
|
if (!config) {
|
|
130
130
|
return [asset];
|
|
131
131
|
}
|
|
132
|
+
|
|
133
|
+
// @ts-expect-error TS2709
|
|
132
134
|
const postcss = await loadPostcss(options, asset.filePath);
|
|
133
135
|
let ast = (0, _nullthrows().default)(await asset.getAST());
|
|
134
136
|
let program = postcss.fromJSON(ast.program);
|
|
@@ -203,12 +205,15 @@ var _default = exports.default = new (_plugin().Transformer)({
|
|
|
203
205
|
shouldAutoInstall: options.shouldAutoInstall
|
|
204
206
|
});
|
|
205
207
|
plugins.push(postcssModules({
|
|
208
|
+
// @ts-expect-error TS7006
|
|
206
209
|
getJSON: (filename, json) => cssModules = json,
|
|
207
210
|
Loader: await createLoader(asset, resolve, options),
|
|
211
|
+
// @ts-expect-error TS7006
|
|
208
212
|
generateScopedName: (name, filename) => `${name}_${(0, _rust().hashString)(_path().default.relative(options.projectRoot, filename)).substr(0, 6)}`,
|
|
209
213
|
...config.hydrated.modules
|
|
210
214
|
}));
|
|
211
215
|
if (code == null || COMPOSES_RE.test(code)) {
|
|
216
|
+
// @ts-expect-error TS7006
|
|
212
217
|
program.walkDecls(decl => {
|
|
213
218
|
let [, importPath] = FROM_IMPORT_RE.exec(decl.value) || [];
|
|
214
219
|
if (decl.prop === 'composes' && importPath != null) {
|
|
@@ -233,8 +238,6 @@ var _default = exports.default = new (_plugin().Transformer)({
|
|
|
233
238
|
});
|
|
234
239
|
}
|
|
235
240
|
}
|
|
236
|
-
|
|
237
|
-
// $FlowFixMe Added in Flow 0.121.0 upgrade in #4381
|
|
238
241
|
let {
|
|
239
242
|
messages,
|
|
240
243
|
root
|
|
@@ -262,7 +265,6 @@ var _default = exports.default = new (_plugin().Transformer)({
|
|
|
262
265
|
}
|
|
263
266
|
let assets = [asset];
|
|
264
267
|
if (cssModules) {
|
|
265
|
-
// $FlowFixMe
|
|
266
268
|
let cssModulesList = Object.entries(cssModules);
|
|
267
269
|
let deps = asset.getDependencies().filter(dep => dep.priority === 'sync');
|
|
268
270
|
let code;
|
|
@@ -282,6 +284,7 @@ var _default = exports.default = new (_plugin().Transformer)({
|
|
|
282
284
|
asset.symbols.set('default', 'default');
|
|
283
285
|
assets.push({
|
|
284
286
|
type: 'js',
|
|
287
|
+
// @ts-expect-error TS2353
|
|
285
288
|
content: code
|
|
286
289
|
});
|
|
287
290
|
}
|
|
@@ -292,8 +295,10 @@ var _default = exports.default = new (_plugin().Transformer)({
|
|
|
292
295
|
ast,
|
|
293
296
|
options
|
|
294
297
|
}) {
|
|
298
|
+
// @ts-expect-error TS2709
|
|
295
299
|
const postcss = await loadPostcss(options, asset.filePath);
|
|
296
300
|
let code = '';
|
|
301
|
+
// @ts-expect-error TS7006
|
|
297
302
|
postcss.stringify(postcss.fromJSON(ast.program), c => {
|
|
298
303
|
code += c;
|
|
299
304
|
});
|
|
@@ -306,7 +311,7 @@ async function createLoader(asset, resolve, options) {
|
|
|
306
311
|
let {
|
|
307
312
|
default: FileSystemLoader
|
|
308
313
|
} = await options.packageManager.require('postcss-modules/build/css-loader-core/loader', asset.filePath);
|
|
309
|
-
return class extends FileSystemLoader {
|
|
314
|
+
return class AtlaspackFileSystemLoader extends FileSystemLoader {
|
|
310
315
|
async fetch(composesPath, relativeTo) {
|
|
311
316
|
let importPath = composesPath.replace(/^["']|["']$/g, '');
|
|
312
317
|
let resolved = await resolve(relativeTo, importPath);
|
|
@@ -320,9 +325,7 @@ async function createLoader(asset, resolve, options) {
|
|
|
320
325
|
let source = await asset.fs.readFile(resolved, 'utf-8');
|
|
321
326
|
let {
|
|
322
327
|
exportTokens
|
|
323
|
-
} = await this.core.load(source, rootRelativePath, undefined,
|
|
324
|
-
// $FlowFixMe[method-unbinding]
|
|
325
|
-
this.fetch.bind(this));
|
|
328
|
+
} = await this.core.load(source, rootRelativePath, undefined, this.fetch.bind(this));
|
|
326
329
|
return exportTokens;
|
|
327
330
|
}
|
|
328
331
|
get finalSource() {
|
|
@@ -330,6 +333,8 @@ async function createLoader(asset, resolve, options) {
|
|
|
330
333
|
}
|
|
331
334
|
};
|
|
332
335
|
}
|
|
336
|
+
|
|
337
|
+
// @ts-expect-error TS2709
|
|
333
338
|
function loadPostcss(options, from) {
|
|
334
339
|
return options.packageManager.require('postcss', from, {
|
|
335
340
|
range: _constants.POSTCSS_RANGE,
|
package/lib/loadConfig.js
CHANGED
|
@@ -35,6 +35,8 @@ function _clone() {
|
|
|
35
35
|
var _constants = require("./constants");
|
|
36
36
|
var _loadPlugins = _interopRequireDefault(require("./loadPlugins"));
|
|
37
37
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
38
|
+
// @ts-expect-error TS7016
|
|
39
|
+
|
|
38
40
|
async function configHydrator(configFile, config, resolveFrom, options, logger) {
|
|
39
41
|
if (configFile == null) {
|
|
40
42
|
return;
|
package/lib/loadPlugins.js
CHANGED
|
@@ -8,13 +8,16 @@ async function loadExternalPlugins(plugins, relative, options) {
|
|
|
8
8
|
if (Array.isArray(plugins)) {
|
|
9
9
|
return Promise.all(plugins.map(p => loadPlugin(p, relative, null, options.packageManager, options.shouldAutoInstall)).filter(Boolean));
|
|
10
10
|
} else if (typeof plugins === 'object') {
|
|
11
|
-
let
|
|
11
|
+
let _plugins = plugins;
|
|
12
|
+
let mapPlugins = await Promise.all(Object.keys(plugins).map(p => loadPlugin(p, relative, _plugins[p], options.packageManager, options.shouldAutoInstall)));
|
|
12
13
|
return mapPlugins.filter(Boolean);
|
|
13
14
|
} else {
|
|
14
15
|
return [];
|
|
15
16
|
}
|
|
16
17
|
}
|
|
17
|
-
async function loadPlugin(pluginArg, relative, options = {}, packageManager, shouldAutoInstall
|
|
18
|
+
async function loadPlugin(pluginArg, relative, options = {}, packageManager, shouldAutoInstall
|
|
19
|
+
// @ts-expect-error TS1064
|
|
20
|
+
) {
|
|
18
21
|
if (typeof pluginArg !== 'string') {
|
|
19
22
|
return pluginArg;
|
|
20
23
|
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const POSTCSS_RANGE = "^8.2.1";
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import type { Config, FilePath, PluginOptions, PluginLogger } from '@atlaspack/types-internal';
|
|
2
|
+
type ConfigResult = {
|
|
3
|
+
raw: any;
|
|
4
|
+
filePath: string;
|
|
5
|
+
hydrated: {
|
|
6
|
+
plugins: Array<any>;
|
|
7
|
+
from: FilePath;
|
|
8
|
+
to: FilePath;
|
|
9
|
+
modules: any;
|
|
10
|
+
};
|
|
11
|
+
};
|
|
12
|
+
export declare function load({ config, options, logger, }: {
|
|
13
|
+
config: Config;
|
|
14
|
+
options: PluginOptions;
|
|
15
|
+
logger: PluginLogger;
|
|
16
|
+
}): Promise<ConfigResult | null | undefined>;
|
|
17
|
+
export {};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaspack/transformer-postcss",
|
|
3
|
-
"version": "2.14.5-canary.
|
|
3
|
+
"version": "2.14.5-canary.391+053e3754c",
|
|
4
4
|
"license": "(MIT OR Apache-2.0)",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public"
|
|
@@ -9,16 +9,18 @@
|
|
|
9
9
|
"type": "git",
|
|
10
10
|
"url": "https://github.com/atlassian-labs/atlaspack.git"
|
|
11
11
|
},
|
|
12
|
-
"main": "lib/PostCSSTransformer.js",
|
|
13
|
-
"source": "src/PostCSSTransformer.
|
|
12
|
+
"main": "./lib/PostCSSTransformer.js",
|
|
13
|
+
"source": "./src/PostCSSTransformer.ts",
|
|
14
|
+
"types": "./lib/types/PostCSSTransformer.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/plugin": "2.14.5-canary.
|
|
20
|
-
"@atlaspack/rust": "3.2.1-canary.
|
|
21
|
-
"@atlaspack/
|
|
19
|
+
"@atlaspack/diagnostic": "2.14.1-canary.459+053e3754c",
|
|
20
|
+
"@atlaspack/plugin": "2.14.5-canary.391+053e3754c",
|
|
21
|
+
"@atlaspack/rust": "3.2.1-canary.391+053e3754c",
|
|
22
|
+
"@atlaspack/types-internal": "2.14.1-canary.459+053e3754c",
|
|
23
|
+
"@atlaspack/utils": "2.14.5-canary.391+053e3754c",
|
|
22
24
|
"clone": "^2.1.1",
|
|
23
25
|
"nullthrows": "^1.1.1",
|
|
24
26
|
"postcss-value-parser": "^4.2.0",
|
|
@@ -29,5 +31,8 @@
|
|
|
29
31
|
"postcss-modules": "^4.3.1"
|
|
30
32
|
},
|
|
31
33
|
"type": "commonjs",
|
|
32
|
-
"
|
|
33
|
-
|
|
34
|
+
"scripts": {
|
|
35
|
+
"build:lib": "gulp build --gulpfile ../../../gulpfile.js --cwd ."
|
|
36
|
+
},
|
|
37
|
+
"gitHead": "053e3754c08c5b5dc239e9f7267df289cbbf31ab"
|
|
38
|
+
}
|