-
-
Notifications
You must be signed in to change notification settings - Fork 2.3k
/
postcss.js
114 lines (97 loc) 路 3.5 KB
/
postcss.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
const localRequire = require('../utils/localRequire');
const loadPlugins = require('../utils/loadPlugins');
const md5 = require('../utils/md5');
const postcss = require('postcss');
const FileSystemLoader = require('css-modules-loader-core/lib/file-system-loader');
const semver = require('semver');
const path = require('path');
const fs = require('@parcel/fs');
module.exports = async function(asset) {
let config = await getConfig(asset);
if (!config) {
return;
}
await asset.parseIfNeeded();
let res = await postcss(config.plugins).process(asset.getCSSAst(), config);
asset.ast.css = res.css;
asset.ast.dirty = false;
asset.sourceMap = res.map ? res.map.toJSON() : null;
};
async function getConfig(asset) {
let config = await asset.getConfig(
['.postcssrc', '.postcssrc.json', '.postcssrc.js', 'postcss.config.js'],
{packageKey: 'postcss'}
);
let enableModules =
asset.options.rendition && asset.options.rendition.modules;
if (!config && !asset.options.minify && !enableModules) {
return;
}
config = config || {};
if (asset.options.sourceMaps) {
config.map = {inline: false, annotation: false, sourcesContent: true};
}
if (typeof config !== 'object') {
throw new Error('PostCSS config should be an object.');
}
let postcssModulesConfig = {
getJSON: (filename, json) => (asset.cssModules = json),
Loader: createLoader(asset),
generateScopedName: (name, filename) =>
`_${name}_${md5(filename).substr(0, 5)}`
};
if (config.plugins && config.plugins['postcss-modules']) {
postcssModulesConfig = Object.assign(
postcssModulesConfig,
config.plugins['postcss-modules']
);
delete config.plugins['postcss-modules'];
}
config.plugins = await loadPlugins(config.plugins, asset.name);
if (config.modules || enableModules) {
let postcssModules = await localRequire('postcss-modules', asset.name);
config.plugins.push(postcssModules(postcssModulesConfig));
}
if (asset.options.minify) {
let cssnano = await localRequire('cssnano', asset.name);
let {version} = await localRequire('cssnano/package.json', asset.name);
config.plugins.push(
cssnano(
(await asset.getConfig(['cssnano.config.js'])) || {
// Only enable safe css transforms if cssnano < 4
// See: https://github.com/parcel-bundler/parcel/issues/698
// See: https://github.com/ben-eb/cssnano/releases/tag/v4.0.0-rc.0
safe: semver.satisfies(version, '<4.0.0-rc')
}
)
);
}
config.from = asset.name;
config.to = asset.name;
return config;
}
const createLoader = asset =>
class ParcelFileSystemLoader extends FileSystemLoader {
async fetch(composesPath, relativeTo) {
let importPath = composesPath.replace(/^["']|["']$/g, '');
const {resolved} = asset.resolveDependency(importPath, relativeTo);
let rootRelativePath = path.resolve(path.dirname(relativeTo), resolved);
const root = path.resolve('/');
// fixes an issue on windows which is part of the css-modules-loader-core
// see https://github.com/css-modules/css-modules-loader-core/issues/230
if (rootRelativePath.startsWith(root)) {
rootRelativePath = rootRelativePath.substr(root.length);
}
const source = await fs.readFile(resolved, 'utf-8');
const {exportTokens} = await this.core.load(
source,
rootRelativePath,
undefined,
this.fetch.bind(this)
);
return exportTokens;
}
get finalSource() {
return '';
}
};