diff --git a/changelog_unreleased/css/pr-9209.md b/changelog_unreleased/css/pr-9209.md new file mode 100644 index 000000000..89da8951b --- /dev/null +++ b/changelog_unreleased/css/pr-9209.md @@ -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. + + +```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; + } +} +``` diff --git a/jest.config.js b/jest.config.js index 9a79ebb6d..aa1c39c4c 100644 --- a/jest.config.js +++ b/jest.config.js @@ -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", + ], + }, ], ], }, diff --git a/package.json b/package.json index 8356e6d4e..b0cd32e49 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/language-css/parser-postcss.js b/src/language-css/parser-postcss.js index fe94c238d..ae6b7a398 100644 --- a/src/language-css/parser-postcss.js +++ b/src/language-css/parser-postcss.js @@ -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); diff --git a/src/language-css/printer-postcss.js b/src/language-css/printer-postcss.js index d9825936d..d181ae24b 100644 --- a/src/language-css/printer-postcss.js +++ b/src/language-css/printer-postcss.js @@ -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"), ")"]) : "", diff --git a/tests/css/comments/__snapshots__/jsfmt.spec.js.snap b/tests/css/comments/__snapshots__/jsfmt.spec.js.snap index af5a18338..2dd272a13 100644 --- a/tests/css/comments/__snapshots__/jsfmt.spec.js.snap +++ b/tests/css/comments/__snapshots__/jsfmt.spec.js.snap @@ -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; - } + }; } ================================================================================ diff --git a/tests/css/comments/custom-properties.css b/tests/css/comments/custom-properties.css new file mode 100644 index 000000000..03119bfe1 --- /dev/null +++ b/tests/css/comments/custom-properties.css @@ -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 */ diff --git a/tests/css/postcss-8-improment/__snapshots__/jsfmt.spec.js.snap b/tests/css/postcss-8-improment/__snapshots__/jsfmt.spec.js.snap new file mode 100644 index 000000000..8d6e26db3 --- /dev/null +++ b/tests/css/postcss-8-improment/__snapshots__/jsfmt.spec.js.snap @@ -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; + } +} + +================================================================================ +`; diff --git a/tests/css/postcss-8-improment/empty-props.css b/tests/css/postcss-8-improment/empty-props.css new file mode 100644 index 000000000..172a41d5f --- /dev/null +++ b/tests/css/postcss-8-improment/empty-props.css @@ -0,0 +1,6 @@ +:root { + --empty:; + --one-space: ; + --two-space: ; +--many-space: ; +} diff --git a/tests/css/postcss-8-improment/jsfmt.spec.js b/tests/css/postcss-8-improment/jsfmt.spec.js new file mode 100644 index 000000000..7d3726c81 --- /dev/null +++ b/tests/css/postcss-8-improment/jsfmt.spec.js @@ -0,0 +1 @@ +run_spec(__dirname, ["css"]); diff --git a/tests/css/postcss-8-improment/test.css b/tests/css/postcss-8-improment/test.css new file mode 100644 index 000000000..d269083a9 --- /dev/null +++ b/tests/css/postcss-8-improment/test.css @@ -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; + } +} diff --git a/tests/css/variables/__snapshots__/jsfmt.spec.js.snap b/tests/css/variables/__snapshots__/jsfmt.spec.js.snap index ea1a54c90..61e7ec4fb 100644 --- a/tests/css/variables/__snapshots__/jsfmt.spec.js.snap +++ b/tests/css/variables/__snapshots__/jsfmt.spec.js.snap @@ -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"] diff --git a/tests/css/variables/apply-rule.css b/tests/css/variables/apply-rule.css new file mode 100644 index 000000000..56c04e2c2 --- /dev/null +++ b/tests/css/variables/apply-rule.css @@ -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; + }; +} diff --git a/tests/less/comments/__snapshots__/jsfmt.spec.js.snap b/tests/less/comments/__snapshots__/jsfmt.spec.js.snap index dd890bf9c..874c61c6f 100644 --- a/tests/less/comments/__snapshots__/jsfmt.spec.js.snap +++ b/tests/less/comments/__snapshots__/jsfmt.spec.js.snap @@ -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"] diff --git a/tests/less/comments/selectors.less b/tests/less/comments/selectors.less new file mode 100644 index 000000000..3817d248d --- /dev/null +++ b/tests/less/comments/selectors.less @@ -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; + }; +} diff --git a/tests/less/custom-properties/__snapshots__/jsfmt.spec.js.snap b/tests/less/custom-properties/__snapshots__/jsfmt.spec.js.snap new file mode 100644 index 000000000..8bf9acbfe --- /dev/null +++ b/tests/less/custom-properties/__snapshots__/jsfmt.spec.js.snap @@ -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; + } +} + +================================================================================ +`; diff --git a/tests/less/custom-properties/apply-rule.less b/tests/less/custom-properties/apply-rule.less new file mode 100644 index 000000000..1ea189f62 --- /dev/null +++ b/tests/less/custom-properties/apply-rule.less @@ -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;} +} diff --git a/tests/less/custom-properties/jsfmt.spec.js b/tests/less/custom-properties/jsfmt.spec.js new file mode 100644 index 000000000..73b809901 --- /dev/null +++ b/tests/less/custom-properties/jsfmt.spec.js @@ -0,0 +1 @@ +run_spec(__dirname, ["less"]); diff --git a/tests/misc/errors/less/__snapshots__/jsfmt.spec.js.snap b/tests/misc/errors/less/__snapshots__/jsfmt.spec.js.snap index 2897e4871..08d52614e 100644 --- a/tests/misc/errors/less/__snapshots__/jsfmt.spec.js.snap +++ b/tests/misc/errors/less/__snapshots__/jsfmt.spec.js.snap @@ -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}} | ^ diff --git a/tests/misc/errors/less/postcss-8-improment.less b/tests/misc/errors/less/postcss-8-improment.less new file mode 100644 index 000000000..d269083a9 --- /dev/null +++ b/tests/misc/errors/less/postcss-8-improment.less @@ -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; + } +} diff --git a/tests/misc/errors/less/scss-syntax.css b/tests/misc/errors/less/scss-syntax.scss similarity index 100% rename from tests/misc/errors/less/scss-syntax.css rename to tests/misc/errors/less/scss-syntax.scss diff --git a/tests/misc/errors/scss/__snapshots__/jsfmt.spec.js.snap b/tests/misc/errors/scss/__snapshots__/jsfmt.spec.js.snap index cd42dd081..7daa05a8c 100644 --- a/tests/misc/errors/scss/__snapshots__/jsfmt.spec.js.snap +++ b/tests/misc/errors/scss/__snapshots__/jsfmt.spec.js.snap @@ -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 | " +`; diff --git a/tests/misc/errors/scss/less-syntax.css b/tests/misc/errors/scss/less-syntax.less similarity index 100% rename from tests/misc/errors/scss/less-syntax.css rename to tests/misc/errors/scss/less-syntax.less diff --git a/tests/misc/errors/scss/postcss-8-improment.scss b/tests/misc/errors/scss/postcss-8-improment.scss new file mode 100644 index 000000000..d269083a9 --- /dev/null +++ b/tests/misc/errors/scss/postcss-8-improment.scss @@ -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; + } +} diff --git a/tests/scss/comments/__snapshots__/jsfmt.spec.js.snap b/tests/scss/comments/__snapshots__/jsfmt.spec.js.snap index d6d360762..c01b7dedb 100644 --- a/tests/scss/comments/__snapshots__/jsfmt.spec.js.snap +++ b/tests/scss/comments/__snapshots__/jsfmt.spec.js.snap @@ -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"] diff --git a/tests/scss/comments/custom-properties.scss b/tests/scss/comments/custom-properties.scss new file mode 100644 index 000000000..3817d248d --- /dev/null +++ b/tests/scss/comments/custom-properties.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; + }; +} diff --git a/tests/scss/variables/__snapshots__/jsfmt.spec.js.snap b/tests/scss/variables/__snapshots__/jsfmt.spec.js.snap index 6f19d50c0..b6a1384b5 100644 --- a/tests/scss/variables/__snapshots__/jsfmt.spec.js.snap +++ b/tests/scss/variables/__snapshots__/jsfmt.spec.js.snap @@ -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"] diff --git a/tests/scss/variables/apply-rule.scss b/tests/scss/variables/apply-rule.scss new file mode 100644 index 000000000..1ea189f62 --- /dev/null +++ b/tests/scss/variables/apply-rule.scss @@ -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;} +} diff --git a/yarn.lock b/yarn.lock index 0bc9f3227..1ebd33157 100644 --- a/yarn.lock +++ b/yarn.lock @@ -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==