diff --git a/src/language-css/parser-postcss.js b/src/language-css/parser-postcss.js index df8d250a..570fc1f6 100644 --- a/src/language-css/parser-postcss.js +++ b/src/language-css/parser-postcss.js @@ -314,7 +314,7 @@ function parseNestedCSS(node) { return node; } - if (node.name === "extend") { + if (node.name === "extend" || node.name === "nest") { node.selector = parseSelector(node.params); delete node.params; diff --git a/tests/css_modules/__snapshots__/jsfmt.spec.js.snap b/tests/css_modules/__snapshots__/jsfmt.spec.js.snap new file mode 100644 index 00000000..8f399af5 --- /dev/null +++ b/tests/css_modules/__snapshots__/jsfmt.spec.js.snap @@ -0,0 +1,16 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`modules.css 1`] = ` +.title { + @nest :global(h1)& { + background: red; + } +} +~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ +.title { + @nest :global(h1)& { + background: red; + } +} + +`; diff --git a/tests/css_modules/jsfmt.spec.js b/tests/css_modules/jsfmt.spec.js new file mode 100644 index 00000000..7d3726c8 --- /dev/null +++ b/tests/css_modules/jsfmt.spec.js @@ -0,0 +1 @@ +run_spec(__dirname, ["css"]); diff --git a/tests/css_modules/modules.css b/tests/css_modules/modules.css new file mode 100644 index 00000000..d8152fcc --- /dev/null +++ b/tests/css_modules/modules.css @@ -0,0 +1,5 @@ +.title { + @nest :global(h1)& { + background: red; + } +} diff --git a/tests/css_postcss_plugins/__snapshots__/jsfmt.spec.js.snap b/tests/css_postcss_plugins/__snapshots__/jsfmt.spec.js.snap index c6952830..2a376b4a 100644 --- a/tests/css_postcss_plugins/__snapshots__/jsfmt.spec.js.snap +++ b/tests/css_postcss_plugins/__snapshots__/jsfmt.spec.js.snap @@ -132,3 +132,402 @@ exports[`postcss-nested-props.css 1`] = ` } `; + +exports[`postcss-nesting.css 1`] = ` +a { + order: 1; + @nest b & { + order: 2; + } + @nest c & { + order: 3; + } + @nest d & { + order: 4; + } + @nest e & { + order: 5; + } +} +a { + order: 1; + @nest & b { + order: 2; + } + @nest & c { + order: 3; + } + @nest & d { + order: 4; + } + @nest & e { + order: 5; + } +} + +.rule-1 { + order: 1; + @media screen, print { + order: 2; + &.rule-2 { + order: 3; + @media (max-width: 30em) { + order: 4; + @nest .rule-prefix & { + order: 5; + } + order: 6; + } + order: 7; + } + order: 8; + } + order: 9; +} + +a, b { + order: 1; + & c, & d { + order: 2; + & e, & f { + order: 3; + } + order: 4; + } + order: 5; +} +a, b { + order: 1; + @nest & c, & d { + order: 2; + @nest & e, & f { + order: 3; + } + order: 4; + } + order: 5; +} + +a { + & b { + & c { + order: 1; + } + } +} +d { + order: 2; + & e { + order: 3; + } +} +f { + & g { + order: 4; + } + order: 5; +} +a { + @nest & b { + @nest & c { + order: 1; + } + } +} +d { + order: 2; + @nest & e { + order: 3; + } +} +f { + @nest & g { + order: 4; + } + order: 5; +} + +a, b { + order: 1; + c, d { + order: 2; + } +} +& e { + order: 3; +} +f { + & g & { + order: 4; + } + &h { + order: 5; + } +} +a, b { + order: 1; + @nest c, d { + order: 2; + } +} +@nest & e { + order: 3; +} +f { + @nest & g & { + order: 4; + } + @nest &h { + order: 5; + } +} + +a { + order: 1; + @media (min-width: 100px) { + order: 2; + @media (max-width: 200px) { + order: 3; + } + & b { + @media (max-width: 200px) { + order: 4; + } + } + } + @media screen, print and speech { + @media (max-width: 300px), (min-aspect-ratio: 16/9) { + order: 5; + & c { + order: 6; + } + } + } +} +a { + order: 1; + @media (min-width: 100px) { + order: 2; + @media (max-width: 200px) { + order: 3; + } + @nest & b { + @media (max-width: 200px) { + order: 4; + } + } + } + @media screen, print and speech { + @media (max-width: 300px), (min-aspect-ratio: 16/9) { + order: 5; + @nest & c { + order: 6; + } + } + } +} +~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ +a { + order: 1; + @nest b & { + order: 2; + } + @nest c & { + order: 3; + } + @nest d & { + order: 4; + } + @nest e & { + order: 5; + } +} +a { + order: 1; + @nest & b { + order: 2; + } + @nest & c { + order: 3; + } + @nest & d { + order: 4; + } + @nest & e { + order: 5; + } +} + +.rule-1 { + order: 1; + @media screen, print { + order: 2; + &.rule-2 { + order: 3; + @media (max-width: 30em) { + order: 4; + @nest .rule-prefix & { + order: 5; + } + order: 6; + } + order: 7; + } + order: 8; + } + order: 9; +} + +a, +b { + order: 1; + & c, + & d { + order: 2; + & e, + & f { + order: 3; + } + order: 4; + } + order: 5; +} +a, +b { + order: 1; + @nest & c, + & d { + order: 2; + @nest & e, + & f { + order: 3; + } + order: 4; + } + order: 5; +} + +a { + & b { + & c { + order: 1; + } + } +} +d { + order: 2; + & e { + order: 3; + } +} +f { + & g { + order: 4; + } + order: 5; +} +a { + @nest & b { + @nest & c { + order: 1; + } + } +} +d { + order: 2; + @nest & e { + order: 3; + } +} +f { + @nest & g { + order: 4; + } + order: 5; +} + +a, +b { + order: 1; + c, + d { + order: 2; + } +} +& e { + order: 3; +} +f { + & g & { + order: 4; + } + &h { + order: 5; + } +} +a, +b { + order: 1; + @nest c, + d { + order: 2; + } +} +@nest & e { + order: 3; +} +f { + @nest & g & { + order: 4; + } + @nest &h { + order: 5; + } +} + +a { + order: 1; + @media (min-width: 100px) { + order: 2; + @media (max-width: 200px) { + order: 3; + } + & b { + @media (max-width: 200px) { + order: 4; + } + } + } + @media screen, print and speech { + @media (max-width: 300px), (min-aspect-ratio: 16/9) { + order: 5; + & c { + order: 6; + } + } + } +} +a { + order: 1; + @media (min-width: 100px) { + order: 2; + @media (max-width: 200px) { + order: 3; + } + @nest & b { + @media (max-width: 200px) { + order: 4; + } + } + } + @media screen, print and speech { + @media (max-width: 300px), (min-aspect-ratio: 16/9) { + order: 5; + @nest & c { + order: 6; + } + } + } +} + +`; diff --git a/tests/css_postcss_plugins/postcss-nesting.css b/tests/css_postcss_plugins/postcss-nesting.css new file mode 100644 index 00000000..f2c278d4 --- /dev/null +++ b/tests/css_postcss_plugins/postcss-nesting.css @@ -0,0 +1,192 @@ +a { + order: 1; + @nest b & { + order: 2; + } + @nest c & { + order: 3; + } + @nest d & { + order: 4; + } + @nest e & { + order: 5; + } +} +a { + order: 1; + @nest & b { + order: 2; + } + @nest & c { + order: 3; + } + @nest & d { + order: 4; + } + @nest & e { + order: 5; + } +} + +.rule-1 { + order: 1; + @media screen, print { + order: 2; + &.rule-2 { + order: 3; + @media (max-width: 30em) { + order: 4; + @nest .rule-prefix & { + order: 5; + } + order: 6; + } + order: 7; + } + order: 8; + } + order: 9; +} + +a, b { + order: 1; + & c, & d { + order: 2; + & e, & f { + order: 3; + } + order: 4; + } + order: 5; +} +a, b { + order: 1; + @nest & c, & d { + order: 2; + @nest & e, & f { + order: 3; + } + order: 4; + } + order: 5; +} + +a { + & b { + & c { + order: 1; + } + } +} +d { + order: 2; + & e { + order: 3; + } +} +f { + & g { + order: 4; + } + order: 5; +} +a { + @nest & b { + @nest & c { + order: 1; + } + } +} +d { + order: 2; + @nest & e { + order: 3; + } +} +f { + @nest & g { + order: 4; + } + order: 5; +} + +a, b { + order: 1; + c, d { + order: 2; + } +} +& e { + order: 3; +} +f { + & g & { + order: 4; + } + &h { + order: 5; + } +} +a, b { + order: 1; + @nest c, d { + order: 2; + } +} +@nest & e { + order: 3; +} +f { + @nest & g & { + order: 4; + } + @nest &h { + order: 5; + } +} + +a { + order: 1; + @media (min-width: 100px) { + order: 2; + @media (max-width: 200px) { + order: 3; + } + & b { + @media (max-width: 200px) { + order: 4; + } + } + } + @media screen, print and speech { + @media (max-width: 300px), (min-aspect-ratio: 16/9) { + order: 5; + & c { + order: 6; + } + } + } +} +a { + order: 1; + @media (min-width: 100px) { + order: 2; + @media (max-width: 200px) { + order: 3; + } + @nest & b { + @media (max-width: 200px) { + order: 4; + } + } + } + @media screen, print and speech { + @media (max-width: 300px), (min-aspect-ratio: 16/9) { + order: 5; + @nest & c { + order: 6; + } + } + } +}