diff --git a/src/language-css/parser-postcss.js b/src/language-css/parser-postcss.js index 612c7141..16bbbff7 100644 --- a/src/language-css/parser-postcss.js +++ b/src/language-css/parser-postcss.js @@ -206,8 +206,8 @@ function parseMediaQuery(value) { return addTypePrefix(result, "media-"); } -const DEFAULT_SCSS_DIRECTIVE = "!default"; -const GLOBAL_SCSS_DIRECTIVE = "!global"; +const DEFAULT_SCSS_DIRECTIVE = /(\s*?)(!default).*$/; +const GLOBAL_SCSS_DIRECTIVE = /(\s*?)(!global).*$/; function parseNestedCSS(node) { if (node && typeof node === "object") { @@ -251,17 +251,31 @@ function parseNestedCSS(node) { node.value.trim().length > 0 ) { try { - if (node.value.endsWith(DEFAULT_SCSS_DIRECTIVE)) { - node.default = true; - node.value = node.value.slice(0, -DEFAULT_SCSS_DIRECTIVE.length); + let value = node.raws.value ? node.raws.value.raw : node.value; + + const defaultSCSSDirectiveIndex = value.match(DEFAULT_SCSS_DIRECTIVE); + + if (defaultSCSSDirectiveIndex) { + value = value.substring(0, defaultSCSSDirectiveIndex.index); + node.scssDefault = true; + + if (defaultSCSSDirectiveIndex[0].trim() !== "!default") { + node.raws.scssDefault = defaultSCSSDirectiveIndex[0]; + } } - if (node.value.endsWith(GLOBAL_SCSS_DIRECTIVE)) { - node.global = true; - node.value = node.value.slice(0, -GLOBAL_SCSS_DIRECTIVE.length); + const globalSCSSDirectiveIndex = value.match(GLOBAL_SCSS_DIRECTIVE); + + if (globalSCSSDirectiveIndex) { + value = value.substring(0, globalSCSSDirectiveIndex.index); + node.scssGlobal = true; + + if (globalSCSSDirectiveIndex[0].trim() !== "!global") { + node.raws.scssGlobal = globalSCSSDirectiveIndex[0]; + } } - node.value = parseValue(node.value); + node.value = parseValue(value); } catch (e) { throw createError( "(postcss-values-parser) " + e.toString(), diff --git a/src/language-css/printer-postcss.js b/src/language-css/printer-postcss.js index 16cc341a..57256505 100644 --- a/src/language-css/printer-postcss.js +++ b/src/language-css/printer-postcss.js @@ -104,14 +104,20 @@ function genericPrint(path, options, print) { return concat([ node.raws.before.replace(/[\s;]/g, ""), maybeToLowerCase(node.prop), - ":", + node.raws.between.trim() === ":" ? ":" : node.raws.between.trim(), isValueExtend ? "" : " ", isComposed ? removeLines(path.call(print, "value")) : path.call(print, "value"), - node.important ? " !important" : "", - node.default ? " !default" : "", - node.global ? " !global" : "", + node.raws.important + ? node.raws.important.replace(/\s*!\s*important/i, " !important") + : node.important ? " !important" : "", + node.raws.scssDefault + ? node.raws.scssDefault.replace(/\s*!default/i, " !default") + : node.scssDefault ? " !default" : "", + node.raws.scssGlobal + ? node.raws.scssGlobal.replace(/\s*!global/i, " !global") + : node.scssGlobal ? " !global" : "", node.nodes ? concat([ " {", @@ -370,6 +376,9 @@ function genericPrint(path, options, print) { case "value-root": { return path.call(print, "group"); } + case "value-comment": { + return concat(["/*", node.value, "*/"]); + } case "value-comma_group": { const parentNode = path.getParentNode(); const declAncestorNode = getAncestorNode(path, "css-decl"); diff --git a/tests/css_comments/__snapshots__/jsfmt.spec.js.snap b/tests/css_comments/__snapshots__/jsfmt.spec.js.snap index c407b0d1..7341ece2 100644 --- a/tests/css_comments/__snapshots__/jsfmt.spec.js.snap +++ b/tests/css_comments/__snapshots__/jsfmt.spec.js.snap @@ -46,6 +46,29 @@ exports[`bug.css 1`] = ` `; +exports[`declaration.css 1`] = ` +a { + /* comment 1 */ + /* comment 2 */ padding /* comment 3 */ : /* comment 4 */ 10px /* comment 5 */ 10px /* comment 6 */; /* comment 7 */ + /* comment 8 */ + transform: translate(/* comment 9 */ 10px /* comment 10 */); + color: /* comment 11 */ red /* comment 12 */ !important /* comment 13 */ ; /* comment 14 */ + /* comment 15 */ +} +~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ +a { + /* comment 1 */ + /* comment 2 */ + padding/* comment 3 */ : /* comment 4 */ 10px /* comment 5 */ 10px + /* comment 6 */; /* comment 7 */ + /* comment 8 */ + transform: translate(/* comment 9 */ 10px /* comment 10 */); + color: /* comment 11 */ red /* comment 12 */ !important /* comment 13 */ ; /* comment 14 */ + /* comment 15 */ +} + +`; + exports[`places.css 1`] = ` div { // a @@ -144,3 +167,38 @@ a { } `; + +exports[`variable-declaration.scss 1`] = ` +$var: /* comment 1 */ all /* comment 2 */ !default /* comment 3 */ ; /* comment 4 */ + +@mixin text-color { + /* comment 5 */ + /* comment 6 */ $text-color /* comment 7 */ : /* comment 8 */ red /* comment 9 */ !default /* comment 10 */ ; /* comment 11 */ + /* comment 12 */ + color: $text-color; +} + +.error { + /* comment 13 */ + /* comment 14 */ $text-color /* comment 15 */ : /* comment 16 */ green /* comment 17 */ !global /* comment 18 */ ; /* comment 19 */ + /* comment 20 */ +} +~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ +$var: /* comment 1 */ all /* comment 2 */ !default /* comment 3 */ ; /* comment 4 */ + +@mixin text-color { + /* comment 5 */ + /* comment 6 */ + $text-color/* comment 7 */ : /* comment 8 */ red /* comment 9 */ !default /* comment 10 */ ; /* comment 11 */ + /* comment 12 */ + color: $text-color; +} + +.error { + /* comment 13 */ + /* comment 14 */ + $text-color/* comment 15 */ : /* comment 16 */ green /* comment 17 */ !global /* comment 18 */ ; /* comment 19 */ + /* comment 20 */ +} + +`; diff --git a/tests/css_comments/declaration.css b/tests/css_comments/declaration.css new file mode 100644 index 00000000..7b0230f7 --- /dev/null +++ b/tests/css_comments/declaration.css @@ -0,0 +1,8 @@ +a { + /* comment 1 */ + /* comment 2 */ padding /* comment 3 */ : /* comment 4 */ 10px /* comment 5 */ 10px /* comment 6 */; /* comment 7 */ + /* comment 8 */ + transform: translate(/* comment 9 */ 10px /* comment 10 */); + color: /* comment 11 */ red /* comment 12 */ !important /* comment 13 */ ; /* comment 14 */ + /* comment 15 */ +} diff --git a/tests/css_comments/variable-declaration.scss b/tests/css_comments/variable-declaration.scss new file mode 100644 index 00000000..d9fb1878 --- /dev/null +++ b/tests/css_comments/variable-declaration.scss @@ -0,0 +1,14 @@ +$var: /* comment 1 */ all /* comment 2 */ !default /* comment 3 */ ; /* comment 4 */ + +@mixin text-color { + /* comment 5 */ + /* comment 6 */ $text-color /* comment 7 */ : /* comment 8 */ red /* comment 9 */ !default /* comment 10 */ ; /* comment 11 */ + /* comment 12 */ + color: $text-color; +} + +.error { + /* comment 13 */ + /* comment 14 */ $text-color /* comment 15 */ : /* comment 16 */ green /* comment 17 */ !global /* comment 18 */ ; /* comment 19 */ + /* comment 20 */ +} diff --git a/tests/css_quotes/__snapshots__/jsfmt.spec.js.snap b/tests/css_quotes/__snapshots__/jsfmt.spec.js.snap index 6b539c2b..b1c27ac5 100644 --- a/tests/css_quotes/__snapshots__/jsfmt.spec.js.snap +++ b/tests/css_quotes/__snapshots__/jsfmt.spec.js.snap @@ -161,8 +161,8 @@ one 'two' three {} content: 'var backslash = "\\\\", doubleQuote = \\'"\\';'; /* Leave all "escapes" alone. */ - content: "\\Abc4 foo \\n" "\\end"; - content: "\\Abc4 foo \\n" "\\end"; + content: "\\Abc4 foo \\n" /* "comment" */ "\\end"; + content: "\\Abc4 foo \\n" /* 'comment' */ "\\end"; } } @@ -350,8 +350,8 @@ one 'two' three {} content: 'var backslash = "\\\\", doubleQuote = \\'"\\';'; /* Leave all "escapes" alone. */ - content: '\\Abc4 foo \\n' '\\end'; - content: '\\Abc4 foo \\n' '\\end'; + content: '\\Abc4 foo \\n' /* "comment" */ '\\end'; + content: '\\Abc4 foo \\n' /* 'comment' */ '\\end'; } }