diff --git a/src/language-css/parser-postcss.js b/src/language-css/parser-postcss.js index 205e8685e..df8d250a4 100644 --- a/src/language-css/parser-postcss.js +++ b/src/language-css/parser-postcss.js @@ -342,7 +342,9 @@ function parseNestedCSS(node) { node.name === "mixin" || node.name === "include" || node.name === "function" || - node.name === "return" + node.name === "return" || + node.name === "define-mixin" || + node.name === "add-mixin" ) { // Remove unnecessary spaces in SCSS variable arguments node.params = node.params.replace(/(\$\S+?)\s+?\.\.\./, "$1..."); diff --git a/tests/css_postcss_plugins/__snapshots__/jsfmt.spec.js.snap b/tests/css_postcss_plugins/__snapshots__/jsfmt.spec.js.snap new file mode 100644 index 000000000..c6952830c --- /dev/null +++ b/tests/css_postcss_plugins/__snapshots__/jsfmt.spec.js.snap @@ -0,0 +1,134 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`postcss-mixins.css 1`] = ` +a { + @mixin $(theme)-colors; +} + +@define-mixin icon $network, $color: blue { + .icon.is-$(network) { + color: $color; + @mixin-content; + } + .icon.is-$(network):hover { + color: white; + background: $color; + } +} + +@mixin icon twitter { + background: url(twt.png); +} +@mixin icon youtube, red { + background: url(youtube.png); +} + +.search { + @mixin icon search; +} + +a { + color: black; + @mixin parent { + @mixin child; + } +} +~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ +a { + @mixin $(theme)-colors; +} + +@define-mixin icon $network, $color: blue { + .icon.is-$(network) { + color: $color; + @mixin-content; + } + .icon.is-$(network):hover { + color: white; + background: $color; + } +} + +@mixin icon twitter { + background: url(twt.png); +} +@mixin icon youtube, red { + background: url(youtube.png); +} + +.search { + @mixin icon search; +} + +a { + color: black; + @mixin parent { + @mixin child; + } +} + +`; + +exports[`postcss-nested.css 1`] = ` +.phone { + &_title { + width: 500px; + @media (max-width: 500px) { + width: auto; + } + body.is_dark & { + color: white; + } + } + img { + display: block; + } +} +~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ +.phone { + &_title { + width: 500px; + @media (max-width: 500px) { + width: auto; + } + body.is_dark & { + color: white; + } + } + img { + display: block; + } +} + +`; + +exports[`postcss-nested-props.css 1`] = ` +.funky { + font: { + family: fantasy; + size: 30em; + weight: bold; + } +} + +.funky { + font: 20px/24px fantasy { + weight: bold; + } +} +~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ +.funky { + font: { + family: fantasy; + size: 30em; + weight: bold; + } +} + +.funky { + font: 20px/24px fantasy { + weight: bold; + } +} + +`; diff --git a/tests/css_postcss_plugins/jsfmt.spec.js b/tests/css_postcss_plugins/jsfmt.spec.js new file mode 100644 index 000000000..7d3726c81 --- /dev/null +++ b/tests/css_postcss_plugins/jsfmt.spec.js @@ -0,0 +1 @@ +run_spec(__dirname, ["css"]); diff --git a/tests/css_postcss_plugins/postcss-mixins.css b/tests/css_postcss_plugins/postcss-mixins.css new file mode 100644 index 000000000..495c8002e --- /dev/null +++ b/tests/css_postcss_plugins/postcss-mixins.css @@ -0,0 +1,32 @@ +a { + @mixin $(theme)-colors; +} + +@define-mixin icon $network, $color: blue { + .icon.is-$(network) { + color: $color; + @mixin-content; + } + .icon.is-$(network):hover { + color: white; + background: $color; + } +} + +@mixin icon twitter { + background: url(twt.png); +} +@mixin icon youtube, red { + background: url(youtube.png); +} + +.search { + @mixin icon search; +} + +a { + color: black; + @mixin parent { + @mixin child; + } +} diff --git a/tests/css_postcss_plugins/postcss-nested-props.css b/tests/css_postcss_plugins/postcss-nested-props.css new file mode 100644 index 000000000..655f481fb --- /dev/null +++ b/tests/css_postcss_plugins/postcss-nested-props.css @@ -0,0 +1,13 @@ +.funky { + font: { + family: fantasy; + size: 30em; + weight: bold; + } +} + +.funky { + font: 20px/24px fantasy { + weight: bold; + } +} diff --git a/tests/css_postcss_plugins/postcss-nested.css b/tests/css_postcss_plugins/postcss-nested.css new file mode 100644 index 000000000..acdfa922e --- /dev/null +++ b/tests/css_postcss_plugins/postcss-nested.css @@ -0,0 +1,14 @@ +.phone { + &_title { + width: 500px; + @media (max-width: 500px) { + width: auto; + } + body.is_dark & { + color: white; + } + } + img { + display: block; + } +}