Update postcss to v8 (#9209)

* Update `postcss` v8

* Parser custom properties

* Improve logic

* Update lint script

* Fix node location

* Fix comments inside

* Add a test

* Test on `less` and `scss` too

* Fix empty prop print

* Clean

* Update `postcss`

* Exclude `regenerator`

* Test `no-semi`

* Add changelog

* Typo

* Apply review suggestion

* Style

* Simplify logic

* Remove error test, we don't throw on this anymore

* Style

* Update postcss

* Update postcss
This commit is contained in:
fisker Cheung authored and GitHub committed 2020-09-25 00:51:55 +08:00
1 parent 9068b4a22e
commit b77da32a80
29 files changed
+650 -11

No files matched your search

+42
View File
@@ -0,0 +1,42 @@
#### Improve custom properties format (#9209 by @fisker)
Thanks to [`PostCSS 8.0`](https://github.com/postcss/postcss/releases/tag/8.0.0), we can handle these edge cases on custom properties.
<!-- prettier-ignore -->
```css
/* Input */
:root {
--empty: ;
--JSON: [1, "2", {"three": {"a":1}}, [4]];
--javascript: function(rule) { console.log(rule) };
}
@supports (--element(".minwidth", { "minWidth": 300 })) {
[--self] {
background: greenyellow;
}
}
/* Prettier stable */
SyntaxError: (postcss) CssSyntaxError Missed semicolon (3:20)
1 | :root {
2 | --empty: ;
> 3 | --JSON: [1, "2", {"three": {"a":1}}, [4]];
| ^
4 | --javascript: function(rule) { console.log(rule) };
5 | }
6 |
/* Prettier master */
:root {
--empty: ;
--JSON: [1, "2", {"three": {"a": 1}}, [4]];
--javascript: function(rule) {console.log(rule)};
}
@supports (--element(".minwidth", {"minWidth": 300})) {
[--self] {
background: greenyellow;
}
}
```
+9 -2
View File
@@ -23,8 +23,15 @@ if (isProduction) {
presets: [
[
"@babel/env",
// Workaround for https://github.com/babel/babel/issues/11994
{ loose: true },
{
targets: { node: "current" },
exclude: [
"transform-async-to-generator",
"transform-classes",
"proposal-async-generator-functions",
"transform-regenerator",
],
},
],
],
},
+2 -2
View File
@@ -64,7 +64,7 @@
"outdent": "0.7.1",
"parse-srcset": "ikatyang/parse-srcset#54eb9c1cb21db5c62b4d0e275d7249516df6f0ee",
"please-upgrade-node": "3.2.0",
"postcss": "7.0.32",
"postcss": "8.0.7",
"postcss-less": "3.1.4",
"postcss-media-query-parser": "0.2.3",
"postcss-scss": "2.1.1",
@@ -145,7 +145,7 @@
"lint:eslint": "cross-env EFF_NO_LINK_RULES=true eslint . --format friendly",
"lint:changelog": "node ./scripts/lint-changelog.js",
"lint:prettier": "prettier . \"!test*\" --check",
"lint:dist": "eslint --no-eslintrc --no-ignore --env=es6,browser --parser-options=ecmaVersion:2016 \"dist/!(bin-prettier|index|third-party).js\"",
"lint:dist": "eslint --no-eslintrc --no-ignore --env=es6,browser --parser-options=ecmaVersion:2017 \"dist/!(bin-prettier|index|third-party).js\"",
"lint:spellcheck": "cspell \"**/*\" \".github/**/*\"",
"lint:deps": "node ./scripts/check-deps.js",
"fix": "run-s fix:eslint fix:prettier",
+52
View File
@@ -300,6 +300,57 @@ function parseNestedCSS(node, options) {
node.raws = {};
}
// Custom properties looks like declarations
if (
options.parser === "css" &&
node.type === "css-decl" &&
typeof node.prop === "string" &&
node.prop.startsWith("--") &&
typeof node.value === "string" &&
node.value.startsWith("{")
) {
let rules;
if (node.value.endsWith("}")) {
const textBefore = options.originalText.slice(
0,
node.source.start.offset
);
const nodeText =
"a".repeat(node.prop.length) +
options.originalText.slice(
node.source.start.offset + node.prop.length,
node.source.end.offset + 1
);
const fakeContent = textBefore.replace(/[^\n]/g, " ") + nodeText;
let ast;
try {
ast = parseCss(fakeContent, [], { ...options });
} catch (_) {
// noop
}
if (
ast &&
ast.nodes &&
ast.nodes.length === 1 &&
ast.nodes[0].type === "css-rule"
) {
rules = ast.nodes[0].nodes;
}
}
if (rules) {
node.value = {
type: "css-rule",
nodes: rules,
};
} else {
node.value = {
type: "value-unknown",
value: node.raws.value.raw,
};
}
return node;
}
let selector = "";
if (typeof node.selector === "string") {
@@ -594,6 +645,7 @@ function parseWithParser(parse, text, options) {
throw createError("(postcss) " + e.name + " " + e.reason, { start: e });
}
options.originalText = text;
result = parseNestedCSS(addTypePrefix(result, "css-"), options);
calculateLoc(result, text);
+6 -2
View File
@@ -121,7 +121,9 @@ function genericPrint(path, options, print) {
node.selector.type === "selector-unknown" &&
lastLineHasInlineComment(node.selector.value)
? line
: " ",
: node.selector
? " "
: "",
"{",
node.nodes.length > 0
? indent(
@@ -141,6 +143,8 @@ function genericPrint(path, options, print) {
const { between: rawBetween } = node.raws;
const trimmedBetween = rawBetween.trim();
const isColon = trimmedBetween === ":";
const isValueAllSpace =
typeof node.value === "string" && /^ *$/.test(node.value);
let value = hasComposesNode(node)
? removeLines(path.call(print, "value"))
@@ -155,7 +159,7 @@ function genericPrint(path, options, print) {
insideICSSRuleNode(path) ? node.prop : maybeToLowerCase(node.prop),
trimmedBetween.startsWith("//") ? " " : "",
trimmedBetween,
node.extend ? "" : " ",
node.extend || isValueAllSpace ? "" : " ",
options.parser === "less" && node.extend && node.selector
? concat(["extend(", path.call(print, "selector"), ")"])
: "",
@@ -304,6 +304,44 @@ printWidth: 80
================================================================================
`;
exports[`custom-properties.css format 1`] = `
====================================options=====================================
parsers: ["css"]
printWidth: 80
| printWidth
=====================================input======================================
/* comment 1 */
:root {
/* comment 2 */
--prop : {
/* comment 3 */
color/* comment 4 */: /* comment 5 */#fff/* comment 6 */;/* comment 7 */
/* comment 8 */
font-size: 12px;
/* comment 9 */
};
/* comment 10 */
}
/* comment 11 */
=====================================output=====================================
/* comment 1 */
:root {
/* comment 2 */
--prop: {
/* comment 3 */
color/* comment 4 */: /* comment 5 */ #fff /* comment 6 */; /* comment 7 */
/* comment 8 */
font-size: 12px;
/* comment 9 */
};
/* comment 10 */
}
/* comment 11 */
================================================================================
`;
exports[`declaration.css format 1`] = `
====================================options=====================================
parsers: ["css"]
@@ -887,11 +925,11 @@ article /* comment 168 */ :--heading /* comment 169 */ + /* comment 170 */ p /*
/* custom properties set & @apply rule */
:root {
/* comments 192 */
--centered /* comments 193 */ : /* comments 194 */ {
--centered/* comments 193 */ : /* comments 194 */ {
display: flex;
align-items: center;
justify-content: center;
}
};
}
================================================================================
+13
View File
@@ -0,0 +1,13 @@
/* comment 1 */
:root {
/* comment 2 */
--prop : {
/* comment 3 */
color/* comment 4 */: /* comment 5 */#fff/* comment 6 */;/* comment 7 */
/* comment 8 */
font-size: 12px;
/* comment 9 */
};
/* comment 10 */
}
/* comment 11 */
@@ -0,0 +1,71 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`empty-props.css format 1`] = `
====================================options=====================================
parsers: ["css"]
printWidth: 80
| printWidth
=====================================input======================================
:root {
--empty:;
--one-space: ;
--two-space: ;
--many-space: ;
}
=====================================output=====================================
:root {
--empty:;
--one-space: ;
--two-space: ;
--many-space: ;
}
================================================================================
`;
exports[`test.css format 1`] = `
====================================options=====================================
parsers: ["css"]
printWidth: 80
| printWidth
=====================================input======================================
/*
This test is copied from \`postcss@8\` release note
https://github.com/postcss/postcss/releases/tag/8.0.0
*/
:root {
--empty: ;
--JSON: [1, "2", {"three": {"a":1}}, [4]];
--javascript: function(rule) { console.log(rule) };
}
@supports (--element(".minwidth", { "minWidth": 300 })) {
[--self] {
background: greenyellow;
}
}
=====================================output=====================================
/*
This test is copied from \`postcss@8\` release note
https://github.com/postcss/postcss/releases/tag/8.0.0
*/
:root {
--empty: ;
--JSON: [1, "2", {"three": {"a": 1}}, [4]];
--javascript: function(rule) {console.log(rule)};
}
@supports (--element(".minwidth", {"minWidth": 300})) {
[--self] {
background: greenyellow;
}
}
================================================================================
`;
@@ -0,0 +1,6 @@
:root {
--empty:;
--one-space: ;
--two-space: ;
--many-space: ;
}
@@ -0,0 +1 @@
run_spec(__dirname, ["css"]);
+17
View File
@@ -0,0 +1,17 @@
/*
This test is copied from `postcss@8` release note
https://github.com/postcss/postcss/releases/tag/8.0.0
*/
:root {
--empty: ;
--JSON: [1, "2", {"three": {"a":1}}, [4]];
--javascript: function(rule) { console.log(rule) };
}
@supports (--element(".minwidth", { "minWidth": 300 })) {
[--self] {
background: greenyellow;
}
}
@@ -1,5 +1,79 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`apply-rule.css format 1`] = `
====================================options=====================================
parsers: ["css"]
printWidth: 80
| printWidth
=====================================input======================================
/* http://tabatkins.github.io/specs/css-apply-rule/#defining */
:root {
--toolbar-theme: {
background-color: hsl(120, 70%, 95%);
border-radius: 4px;
border: 1px solid var(--theme-color late);
};
--toolbar-title-theme: {
color: green;
};
}
:root {
--without-semi: {color:red;}
}
:root {
--like-a-apply-rule: {
color:red;} /* no semi here*/
--another-prop: blue;
}
:root {
--like-a-apply-rule: {
color:red;} /* no semi here*/
--another-one-like-a-apply-rule: {
color:red;
};
}
=====================================output=====================================
/* http://tabatkins.github.io/specs/css-apply-rule/#defining */
:root {
--toolbar-theme: {
background-color: hsl(120, 70%, 95%);
border-radius: 4px;
border: 1px solid var(--theme-color late);
};
--toolbar-title-theme: {
color: green;
};
}
:root {
--without-semi: {
color: red;
};
}
:root {
--like-a-apply-rule: {
color:red;} /* no semi here*/
--another-prop: blue;
}
:root {
--like-a-apply-rule: {
color:red;} /* no semi here*/
--another-one-like-a-apply-rule: {
color:red;
};
}
================================================================================
`;
exports[`variables.css format 1`] = `
====================================options=====================================
parsers: ["css"]
+30
View File
@@ -0,0 +1,30 @@
/* http://tabatkins.github.io/specs/css-apply-rule/#defining */
:root {
--toolbar-theme: {
background-color: hsl(120, 70%, 95%);
border-radius: 4px;
border: 1px solid var(--theme-color late);
};
--toolbar-title-theme: {
color: green;
};
}
:root {
--without-semi: {color:red;}
}
:root {
--like-a-apply-rule: {
color:red;} /* no semi here*/
--another-prop: blue;
}
:root {
--like-a-apply-rule: {
color:red;} /* no semi here*/
--another-one-like-a-apply-rule: {
color:red;
};
}
@@ -367,6 +367,35 @@ foo {
================================================================================
`;
exports[`selectors.less format 1`] = `
====================================options=====================================
parsers: ["less"]
printWidth: 80
| printWidth
=====================================input======================================
/* custom properties set & @apply rule */
:root {
/* comments 192 */ --centered /* comments 193 */ : /* comments 194 */ {
display: flex;
align-items: center;
justify-content: center;
};
}
=====================================output=====================================
/* custom properties set & @apply rule */
:root {
/* comments 192 */
--centered /* comments 193 */ : /* comments 194 */ {
display: flex;
align-items: center;
justify-content: center;
}
}
================================================================================
`;
exports[`trailing_star_slash.less format 1`] = `
====================================options=====================================
parsers: ["less"]
+8
View File
@@ -0,0 +1,8 @@
/* custom properties set & @apply rule */
:root {
/* comments 192 */ --centered /* comments 193 */ : /* comments 194 */ {
display: flex;
align-items: center;
justify-content: center;
};
}
@@ -0,0 +1,47 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`apply-rule.less format 1`] = `
====================================options=====================================
parsers: ["less"]
printWidth: 80
| printWidth
=====================================input======================================
/* http://tabatkins.github.io/specs/css-apply-rule/#defining */
:root {
--toolbar-theme: {
background-color: hsl(120, 70%, 95%);
border-radius: 4px;
border: 1px solid var(--theme-color late);
};
--toolbar-title-theme: {
color: green;
};
}
:root {
--without-semi: {color:red;}
}
=====================================output=====================================
/* http://tabatkins.github.io/specs/css-apply-rule/#defining */
:root {
--toolbar-theme: {
background-color: hsl(120, 70%, 95%);
border-radius: 4px;
border: 1px solid var(--theme-color late);
}
--toolbar-title-theme: {
color: green;
}
}
:root {
--without-semi: {
color: red;
}
}
================================================================================
`;
@@ -0,0 +1,16 @@
/* http://tabatkins.github.io/specs/css-apply-rule/#defining */
:root {
--toolbar-theme: {
background-color: hsl(120, 70%, 95%);
border-radius: 4px;
border: 1px solid var(--theme-color late);
};
--toolbar-title-theme: {
color: green;
};
}
:root {
--without-semi: {color:red;}
}
@@ -0,0 +1 @@
run_spec(__dirname, ["less"]);
@@ -29,7 +29,18 @@ exports[`open-sigle-quote.less error test 1`] = `
4 | "
`;
exports[`scss-syntax.css error test 1`] = `
exports[`postcss-8-improment.less error test 1`] = `
"(postcss) CssSyntaxError Missed semicolon (9:20)
7 | :root {
8 | --empty: ;
> 9 | --JSON: [1, \\"2\\", {\\"three\\": {\\"a\\":1}}, [4]];
| ^
10 | --javascript: function(rule) { console.log(rule) };
11 | }
12 | "
`;
exports[`scss-syntax.scss error test 1`] = `
"(postcss) CssSyntaxError Unknown word (1:15)
> 1 | a {content: #{$foo}}
| ^
@@ -0,0 +1,17 @@
/*
This test is copied from `postcss@8` release note
https://github.com/postcss/postcss/releases/tag/8.0.0
*/
:root {
--empty: ;
--JSON: [1, "2", {"three": {"a":1}}, [4]];
--javascript: function(rule) { console.log(rule) };
}
@supports (--element(".minwidth", { "minWidth": 300 })) {
[--self] {
background: greenyellow;
}
}
@@ -1,8 +1,19 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`less-syntax.css error test 1`] = `
exports[`less-syntax.less error test 1`] = `
"(postcss) CssSyntaxError Unknown word (1:4)
> 1 | a {.bordered();}
| ^
2 | "
`;
exports[`postcss-8-improment.scss error test 1`] = `
"(postcss) CssSyntaxError Missed semicolon (9:20)
7 | :root {
8 | --empty: ;
> 9 | --JSON: [1, \\"2\\", {\\"three\\": {\\"a\\":1}}, [4]];
| ^
10 | --javascript: function(rule) { console.log(rule) };
11 | }
12 | "
`;
@@ -0,0 +1,17 @@
/*
This test is copied from `postcss@8` release note
https://github.com/postcss/postcss/releases/tag/8.0.0
*/
:root {
--empty: ;
--JSON: [1, "2", {"three": {"a":1}}, [4]];
--javascript: function(rule) { console.log(rule) };
}
@supports (--element(".minwidth", { "minWidth": 300 })) {
[--self] {
background: greenyellow;
}
}
@@ -301,6 +301,35 @@ printWidth: 80
================================================================================
`;
exports[`custom-properties.scss format 1`] = `
====================================options=====================================
parsers: ["scss"]
printWidth: 80
| printWidth
=====================================input======================================
/* custom properties set & @apply rule */
:root {
/* comments 192 */ --centered /* comments 193 */ : /* comments 194 */ {
display: flex;
align-items: center;
justify-content: center;
};
}
=====================================output=====================================
/* custom properties set & @apply rule */
:root {
/* comments 192 */
--centered /* comments 193 */ : /* comments 194 */ {
display: flex;
align-items: center;
justify-content: center;
}
}
================================================================================
`;
exports[`if-eslit-at-rule-decloration.scss format 1`] = `
====================================options=====================================
parsers: ["scss"]
@@ -0,0 +1,8 @@
/* custom properties set & @apply rule */
:root {
/* comments 192 */ --centered /* comments 193 */ : /* comments 194 */ {
display: flex;
align-items: center;
justify-content: center;
};
}
@@ -1,5 +1,51 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`apply-rule.scss format 1`] = `
====================================options=====================================
parsers: ["scss"]
printWidth: 80
| printWidth
=====================================input======================================
/* http://tabatkins.github.io/specs/css-apply-rule/#defining */
:root {
--toolbar-theme: {
background-color: hsl(120, 70%, 95%);
border-radius: 4px;
border: 1px solid var(--theme-color late);
};
--toolbar-title-theme: {
color: green;
};
}
:root {
--without-semi: {color:red;}
}
=====================================output=====================================
/* http://tabatkins.github.io/specs/css-apply-rule/#defining */
:root {
--toolbar-theme: {
background-color: hsl(120, 70%, 95%);
border-radius: 4px;
border: 1px solid var(--theme-color late);
}
--toolbar-title-theme: {
color: green;
}
}
:root {
--without-semi: {
color: red;
}
}
================================================================================
`;
exports[`variables.scss format 1`] = `
====================================options=====================================
parsers: ["scss"]
+16
View File
@@ -0,0 +1,16 @@
/* http://tabatkins.github.io/specs/css-apply-rule/#defining */
:root {
--toolbar-theme: {
background-color: hsl(120, 70%, 95%);
border-radius: 4px;
border: 1px solid var(--theme-color late);
};
--toolbar-title-theme: {
color: green;
};
}
:root {
--without-semi: {color:red;}
}
+29 -1
View File
@@ -2544,6 +2544,11 @@ color-name@~1.1.4:
resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
colorette@^1.2.1:
version "1.2.1"
resolved "https://registry.yarnpkg.com/colorette/-/colorette-1.2.1.tgz#4d0b921325c14faf92633086a536db6e89564b1b"
integrity sha512-puCDz0CzydiSYOrnXpz/PKd69zRrribezjtE9yd4zvytoRc8+RY/KJPvtPFKZS3E3wP6neGyMe0vOTlHO5L3Pw==
combined-stream@^1.0.6, combined-stream@~1.0.6:
version "1.0.8"
resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.8.tgz#c3d45a8b34fd730631a110a8a2520682b31d5a7f"
@@ -5524,6 +5529,14 @@ levn@~0.3.0:
prelude-ls "~1.1.2"
type-check "~0.3.2"
line-column@^1.0.2:
version "1.0.2"
resolved "https://registry.yarnpkg.com/line-column/-/line-column-1.0.2.tgz#d25af2936b6f4849172b312e4792d1d987bc34a2"
integrity sha1-0lryk2tvSEkXKzEuR5LR2Ye8NKI=
dependencies:
isarray "^1.0.0"
isobject "^2.0.0"
lines-and-columns@1.1.6, lines-and-columns@^1.1.6:
version "1.1.6"
resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.1.6.tgz#1c00c743b433cd0a4e80758f7b64a57440d9ff00"
@@ -5936,6 +5949,11 @@ nan@^2.12.1:
resolved "https://registry.yarnpkg.com/nan/-/nan-2.14.1.tgz#d7be34dfa3105b91494c3147089315eff8874b01"
integrity sha512-isWHgVjnFjh2x2yuJ/tj3JbwoHu3UC2dX5G/88Cm24yB6YopVgxvBObDY7n5xW6ExmFhJpSEQqFPvq9zaXc8Jw==
nanoid@^3.1.12:
version "3.1.12"
resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.1.12.tgz#6f7736c62e8d39421601e4a0c77623a97ea69654"
integrity sha512-1qstj9z5+x491jfiC4Nelk+f8XBad7LN20PmyWINJEMRSf3wcAjAWysw1qaA8z6NSKe2sjq1hRSDpBH5paCb6A==
nanomatch@^1.2.9:
version "1.2.13"
resolved "https://registry.yarnpkg.com/nanomatch/-/nanomatch-1.2.13.tgz#b87a8aa4fc0de8fe6be88895b38983ff265bd119"
@@ -6562,7 +6580,17 @@ postcss-values-parser@2.0.1:
indexes-of "^1.0.1"
uniq "^1.0.1"
postcss@7.0.32, postcss@^7.0.14, postcss@^7.0.6:
postcss@8.0.7:
version "8.0.7"
resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.0.7.tgz#764d26d8bc64a87af6d945238ae6ef36bf6fc32d"
integrity sha512-LTCMGOjmC/CGWV/azk3h34u6TNj1s9p4XleEiW8yA3j+8k+z3mnv5V7yyREvWDKlkel8GxqhjEZJ+JXWTzKPWw==
dependencies:
colorette "^1.2.1"
line-column "^1.0.2"
nanoid "^3.1.12"
source-map "^0.6.1"
postcss@^7.0.14, postcss@^7.0.6:
version "7.0.32"
resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.32.tgz#4310d6ee347053da3433db2be492883d62cec59d"
integrity sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw==