vitalif
/
prettier
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

fix(css): `@nest` at rule (#3975)

master
Evilebot Tnawi 2018-02-15 15:19:28 +03:00 committed by GitHub
parent 78a4f51662
commit cce8924ef3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 614 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/language-css/parser-postcss.js
View File

@ -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;

16
tests/css_modules/__snapshots__/jsfmt.spec.js.snap Normal file
View File

@ -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;
}
}
`;

1
tests/css_modules/jsfmt.spec.js Normal file
View File

@ -0,0 +1 @@
run_spec(__dirname, ["css"]);

5
tests/css_modules/modules.css Normal file
View File

@ -0,0 +1,5 @@
.title {
@nest :global(h1)& {
background: red;
}
}

399
tests/css_postcss_plugins/__snapshots__/jsfmt.spec.js.snap
View File

@ -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;
}
}
}
}
`;

192
tests/css_postcss_plugins/postcss-nesting.css Normal file
View File

@ -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;
}
}
}
}