Skip to content

Commit 4411bf4

Browse files
peilingjiangpeilingjiang
authored
Update PostCSS (#38)
* migrate to postcss 8.0 * bump travis node version
1 parent 19deef4 commit 4411bf4

File tree

7 files changed

+123
-117
lines changed

7 files changed

+123
-117
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ index.*.*
33
package-lock.json
44
*.log*
55
*.result.css
6+
test/postcss-color-mod-function.css
67
.*
78
!.appveyor.yml
89
!.editorconfig

‎.tape.js‎

Lines changed: 79 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -1,91 +1,89 @@
11
module.exports = {
2-
'postcss-color-mod-function': {
3-
'basic': {
4-
message: 'supports basic usage'
5-
},
6-
'basic:colors': {
7-
message: 'supports { stringifier } usage',
8-
options: {
9-
stringifier: color => color.toString()
10-
}
11-
},
12-
'basic:transformvars': {
13-
message: 'supports { transformVars: false } usage',
14-
options: {
15-
transformVars: false
16-
},
17-
error: {
18-
reason: 'Expected a color'
19-
}
20-
},
21-
'warn': {
22-
message: 'supports { unresolved } usage',
23-
options: {
24-
unresolved: 'warn'
25-
},
26-
warning: 43,
27-
expect: 'warn.css'
28-
},
29-
'hex': {
30-
message: 'supports hex usage'
2+
'basic': {
3+
message: 'supports basic usage'
4+
},
5+
'basic:colors': {
6+
message: 'supports { stringifier } usage',
7+
options: {
8+
stringifier: color => color.toString()
9+
}
10+
},
11+
'basic:transformvars': {
12+
message: 'supports { transformVars: false } usage',
13+
options: {
14+
transformVars: false
3115
},
32-
'import': {
33-
message: 'supports { importFrom: "test/import-root.css" } usage',
34-
options: {
35-
importFrom: 'test/import-root.css'
36-
}
16+
error: {
17+
reason: 'Expected a color'
18+
}
19+
},
20+
'warn': {
21+
message: 'supports { unresolved } usage',
22+
options: {
23+
unresolved: 'warn'
3724
},
38-
'import:array': {
39-
message: 'supports { importFrom: ["test/import-root.css"] } usage',
40-
options: {
41-
importFrom: ['test/import-root.css']
42-
},
43-
expect: 'import.expect.css',
44-
result: 'import.result.css'
25+
warnings: 43,
26+
expect: 'warn.css'
27+
},
28+
'hex': {
29+
message: 'supports hex usage'
30+
},
31+
'import': {
32+
message: 'supports { importFrom: "test/import-root.css" } usage',
33+
options: {
34+
importFrom: 'test/import-root.css'
35+
}
36+
},
37+
'import:array': {
38+
message: 'supports { importFrom: ["test/import-root.css"] } usage',
39+
options: {
40+
importFrom: ['test/import-root.css']
4541
},
46-
'import:array-array': {
47-
message: 'supports { importFrom: [["css", "test/import-root.css" ]] } usage',
48-
options: {
49-
importFrom: { from: 'test/import-root.css', type: 'css' }
50-
},
51-
expect: 'import.expect.css',
52-
result: 'import.result.css'
42+
expect: 'import.expect.css',
43+
result: 'import.result.css'
44+
},
45+
'import:array-array': {
46+
message: 'supports { importFrom: [["css", "test/import-root.css" ]] } usage',
47+
options: {
48+
importFrom: { from: 'test/import-root.css', type: 'css' }
5349
},
54-
'import:js': {
55-
message: 'supports { importFrom: "test/import-root.js" } usage',
56-
options: {
57-
importFrom: 'test/import-root.js'
58-
},
59-
expect: 'import.expect.css',
60-
result: 'import.result.css'
50+
expect: 'import.expect.css',
51+
result: 'import.result.css'
52+
},
53+
'import:js': {
54+
message: 'supports { importFrom: "test/import-root.js" } usage',
55+
options: {
56+
importFrom: 'test/import-root.js'
6157
},
62-
'import:json': {
63-
message: 'supports { importFrom: "test/import-root.json" } usage',
64-
options: {
65-
importFrom: 'test/import-root.json'
66-
},
67-
expect: 'import.expect.css',
68-
result: 'import.result.css'
58+
expect: 'import.expect.css',
59+
result: 'import.result.css'
60+
},
61+
'import:json': {
62+
message: 'supports { importFrom: "test/import-root.json" } usage',
63+
options: {
64+
importFrom: 'test/import-root.json'
6965
},
70-
'import:object': {
71-
message: 'supports { importFrom: { customProperties: {} } } usage',
72-
options: {
73-
importFrom: [
74-
{
75-
customProperties: {
76-
'--color': 'var(--color-blue)'
77-
}
78-
},
79-
{
80-
customProperties: {
81-
'--color-blue': 'blue',
82-
'--color-red': 'red'
83-
}
66+
expect: 'import.expect.css',
67+
result: 'import.result.css'
68+
},
69+
'import:object': {
70+
message: 'supports { importFrom: { customProperties: {} } } usage',
71+
options: {
72+
importFrom: [
73+
{
74+
customProperties: {
75+
'--color': 'var(--color-blue)'
8476
}
85-
]
86-
},
87-
expect: 'import.expect.css',
88-
result: 'import.result.css'
89-
}
77+
},
78+
{
79+
customProperties: {
80+
'--color-blue': 'blue',
81+
'--color-red': 'red'
82+
}
83+
}
84+
]
85+
},
86+
expect: 'import.expect.css',
87+
result: 'import.result.css'
9088
}
9189
};

‎.travis.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
language: node_js
44

55
node_js:
6-
- 6
6+
- 12
77

88
install:
99
- npm install --ignore-scripts

‎INSTALL.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
Add [PostCSS color-mod() Function] to your project:
1111

1212
```bash
13-
npm install postcss-color-mod-function --save-dev
13+
npm install postcss postcss-color-mod-function --save-dev
1414
```
1515

1616
Use [PostCSS color-mod() Function] to process your CSS:

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@ Properties are found in a `:root` rule, or if a fallback value is specified.
6767
Add [PostCSS color-mod() Function] to your project:
6868

6969
```bash
70-
npm install postcss-color-mod-function --save-dev
70+
npm install postcss postcss-color-mod-function --save-dev
7171
```
7272

7373
Use [PostCSS color-mod() Function] to process your CSS:

‎index.js‎

Lines changed: 35 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
11
import getCustomProperties from './lib/get-custom-properties';
22
import importCustomPropertiesFromSources from './lib/import-from';
33
import parser from 'postcss-values-parser';
4-
import postcss from 'postcss';
54
import transformAST from './lib/transform';
65

7-
export default postcss.plugin('postcss-color-mod-function', opts => {
6+
module.exports = (opts = {}) => {
87
// how unresolved functions and arguments should be handled (default: "throw")
98
const unresolvedOpt = String(Object(opts).unresolved || 'throw').toLowerCase();
109

@@ -14,41 +13,46 @@ export default postcss.plugin('postcss-color-mod-function', opts => {
1413
// sources to import custom selectors from
1514
const importFrom = [].concat(Object(opts).importFrom || []);
1615

17-
// whether var() within color-mod() should use Custom Properties or var() fallback
16+
// whether var() within color-mod() should use Custom Properties or var() fallback
1817
const transformVarsOpt = 'transformVars' in Object(opts) ? opts.transformVars : true;
1918

2019
// promise any custom selectors are imported
2120
const customPropertiesPromise = importCustomPropertiesFromSources(importFrom);
2221

23-
return async (root, result) => {
24-
const customProperties = Object.assign(
25-
await customPropertiesPromise,
26-
getCustomProperties(root, { preserve: true })
27-
);
28-
29-
root.walkDecls(decl => {
30-
const originalValue = decl.value;
31-
32-
if (colorModFunctionMatch.test(originalValue)) {
33-
const ast = parser(originalValue, { loose: true }).parse();
34-
35-
transformAST(ast, {
36-
unresolved: unresolvedOpt,
37-
stringifier: stringifierOpt,
38-
transformVars: transformVarsOpt,
39-
decl,
40-
result,
41-
customProperties
42-
});
43-
44-
const modifiedValue = ast.toString();
45-
46-
if (originalValue !== modifiedValue) {
47-
decl.value = modifiedValue;
22+
return {
23+
postcssPlugin: 'postcss-color-mod-function',
24+
async Once (root, { result }) {
25+
const customProperties = Object.assign(
26+
await customPropertiesPromise,
27+
getCustomProperties(root, { preserve: true })
28+
);
29+
30+
root.walkDecls(decl => {
31+
const originalValue = decl.value;
32+
33+
if (colorModFunctionMatch.test(originalValue)) {
34+
const ast = parser(originalValue, { loose: true }).parse();
35+
36+
transformAST(ast, {
37+
unresolved: unresolvedOpt,
38+
stringifier: stringifierOpt,
39+
transformVars: transformVarsOpt,
40+
decl,
41+
result,
42+
customProperties
43+
});
44+
45+
const modifiedValue = ast.toString();
46+
47+
if (originalValue !== modifiedValue) {
48+
decl.value = modifiedValue;
49+
}
4850
}
49-
}
50-
});
51+
});
52+
}
5153
};
52-
});
54+
};
55+
56+
module.exports.postcss = true;
5357

5458
const colorModFunctionMatch = /(^|[^\w-])color-mod\(/i;

‎package.json‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,6 @@
2727
},
2828
"dependencies": {
2929
"@csstools/convert-colors": "^1.4.0",
30-
"postcss": "^7.0.2",
3130
"postcss-values-parser": "^2.0.0"
3231
},
3332
"devDependencies": {
@@ -37,11 +36,15 @@
3736
"babel-eslint": "^9.0.0",
3837
"eslint": "^5.6.0",
3938
"eslint-config-dev": "^2.0.0",
40-
"postcss-tape": "^2.2.0",
39+
"postcss": "^8.2.15",
40+
"postcss-tape": "^6.0.1",
4141
"pre-commit": "^1.2.2",
4242
"rollup": "^0.66.2",
4343
"rollup-plugin-babel": "^4.0.3"
4444
},
45+
"peerDependencies": {
46+
"postcss": "^8.2.15"
47+
},
4548
"eslintConfig": {
4649
"extends": "dev",
4750
"parser": "babel-eslint",

0 commit comments

Comments
 (0)