From 452dd736e8b5836e96f92de1ccdca3d6da706f75 Mon Sep 17 00:00:00 2001 From: linzhe141 <1572213544@qq.com> Date: Thu, 12 Sep 2024 10:09:15 +0800 Subject: [PATCH 01/11] fix(compiler-sfc): nested css supports atrule --- packages/compiler-sfc/src/style/pluginScoped.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/compiler-sfc/src/style/pluginScoped.ts b/packages/compiler-sfc/src/style/pluginScoped.ts index 6a588b56726..9752b291070 100644 --- a/packages/compiler-sfc/src/style/pluginScoped.ts +++ b/packages/compiler-sfc/src/style/pluginScoped.ts @@ -233,7 +233,10 @@ function rewriteSelector( if (rule.nodes.some(node => node.type === 'rule')) { const deep = (rule as any).__deep - const decls = rule.nodes.filter(node => node.type === 'decl') + const decls = rule.nodes.filter( + node => node.type === 'decl' || node.type === 'atrule', + ) + if (!deep && decls.length) { for (const decl of decls) { rule.removeChild(decl) From 924b887b238b8d96563bc96c55a9f836aedc5c72 Mon Sep 17 00:00:00 2001 From: linzhe141 <1572213544@qq.com> Date: Thu, 12 Sep 2024 10:11:48 +0800 Subject: [PATCH 02/11] chore: update --- packages/compiler-sfc/src/style/pluginScoped.ts | 11 ++++------- 1 file changed, 4 insertions(+), 7 deletions(-) diff --git a/packages/compiler-sfc/src/style/pluginScoped.ts b/packages/compiler-sfc/src/style/pluginScoped.ts index 9752b291070..d644f9800bb 100644 --- a/packages/compiler-sfc/src/style/pluginScoped.ts +++ b/packages/compiler-sfc/src/style/pluginScoped.ts @@ -233,16 +233,13 @@ function rewriteSelector( if (rule.nodes.some(node => node.type === 'rule')) { const deep = (rule as any).__deep - const decls = rule.nodes.filter( - node => node.type === 'decl' || node.type === 'atrule', - ) - - if (!deep && decls.length) { - for (const decl of decls) { + const nodes = rule.nodes + if (!deep && nodes.length) { + for (const decl of nodes) { rule.removeChild(decl) } const hostRule = new Rule({ - nodes: decls, + nodes: nodes, selector: '&', }) rule.prepend(hostRule) From 77b9adfaa95a9597b1647bfcad8d0c25fef0bebd Mon Sep 17 00:00:00 2001 From: linzhe141 <1572213544@qq.com> Date: Thu, 12 Sep 2024 10:15:31 +0800 Subject: [PATCH 03/11] chore: update --- packages/compiler-sfc/src/style/pluginScoped.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/compiler-sfc/src/style/pluginScoped.ts b/packages/compiler-sfc/src/style/pluginScoped.ts index d644f9800bb..4b8060f9d0d 100644 --- a/packages/compiler-sfc/src/style/pluginScoped.ts +++ b/packages/compiler-sfc/src/style/pluginScoped.ts @@ -233,7 +233,7 @@ function rewriteSelector( if (rule.nodes.some(node => node.type === 'rule')) { const deep = (rule as any).__deep - const nodes = rule.nodes + const nodes = rule.nodes.filter(node => node.type !== 'rule') if (!deep && nodes.length) { for (const decl of nodes) { rule.removeChild(decl) From 5a332a03a1dd8b242964d1231e5b53b9ee68ec1e Mon Sep 17 00:00:00 2001 From: linzhe141 <1572213544@qq.com> Date: Thu, 12 Sep 2024 10:22:51 +0800 Subject: [PATCH 04/11] chore: update test --- .../__tests__/compileStyle.spec.ts | 23 +++++++++++++++++-- 1 file changed, 21 insertions(+), 2 deletions(-) diff --git a/packages/compiler-sfc/__tests__/compileStyle.spec.ts b/packages/compiler-sfc/__tests__/compileStyle.spec.ts index 72727c43196..10dbacdbfb7 100644 --- a/packages/compiler-sfc/__tests__/compileStyle.spec.ts +++ b/packages/compiler-sfc/__tests__/compileStyle.spec.ts @@ -42,8 +42,27 @@ describe('SFC scoped CSS', () => { }) test('nesting selector', () => { - expect(compileScoped(`h1 { color: red; .foo { color: red; } }`)).toMatch( - `h1 {\n&[data-v-test] { color: red;\n}\n.foo[data-v-test] { color: red;`, + expect( + compileScoped( + 'h1 { \n' + + ' color: red; \n' + + ' /**background-color: pink; */ \n' + + ' @media only screen and (max-width: 800px) { \n' + + ' background-color: green; \n' + + ' } \n' + + ' .foo { color: red; }' + + '} \n', + ), + ).toMatch( + `h1 { +&[data-v-test] { + color: red; + /**background-color: pink; */ +@media only screen and (max-width: 800px) { + background-color: green; +}} +.foo[data-v-test] { color: red; +}} `, ) }) From a65e0f54bf1de63d0eee41951552e568269144b5 Mon Sep 17 00:00:00 2001 From: linzhe141 <1572213544@qq.com> Date: Thu, 12 Sep 2024 10:24:48 +0800 Subject: [PATCH 05/11] chore: update test --- .../__tests__/compileStyle.spec.ts | 26 ++++++++++--------- 1 file changed, 14 insertions(+), 12 deletions(-) diff --git a/packages/compiler-sfc/__tests__/compileStyle.spec.ts b/packages/compiler-sfc/__tests__/compileStyle.spec.ts index 10dbacdbfb7..6456d5ce491 100644 --- a/packages/compiler-sfc/__tests__/compileStyle.spec.ts +++ b/packages/compiler-sfc/__tests__/compileStyle.spec.ts @@ -44,25 +44,27 @@ describe('SFC scoped CSS', () => { test('nesting selector', () => { expect( compileScoped( - 'h1 { \n' + - ' color: red; \n' + - ' /**background-color: pink; */ \n' + - ' @media only screen and (max-width: 800px) { \n' + - ' background-color: green; \n' + - ' } \n' + - ' .foo { color: red; }' + + 'h1 {\n' + + ' color: red;\n' + + ' /**background-color: pink; */\n' + + ' @media only screen and (max-width: 800px) {\n' + + ' background-color: green;\n' + + ' }\n' + + ' .foo { color: red; }\n' + '} \n', ), ).toMatch( `h1 { -&[data-v-test] { - color: red; +&[data-v-test] { + color: red; /**background-color: pink; */ -@media only screen and (max-width: 800px) { +@media only screen and (max-width: 800px) { background-color: green; -}} +} +} .foo[data-v-test] { color: red; -}} `, +} +}`, ) }) From 9f85035ac82d0cb4e1f3fa60d6668b49e4571e1a Mon Sep 17 00:00:00 2001 From: linzhe141 <1572213544@qq.com> Date: Thu, 12 Sep 2024 10:27:45 +0800 Subject: [PATCH 06/11] chore: update test --- packages/compiler-sfc/__tests__/compileStyle.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/compiler-sfc/__tests__/compileStyle.spec.ts b/packages/compiler-sfc/__tests__/compileStyle.spec.ts index 6456d5ce491..071d019ad5b 100644 --- a/packages/compiler-sfc/__tests__/compileStyle.spec.ts +++ b/packages/compiler-sfc/__tests__/compileStyle.spec.ts @@ -51,7 +51,7 @@ describe('SFC scoped CSS', () => { ' background-color: green;\n' + ' }\n' + ' .foo { color: red; }\n' + - '} \n', + '}', ), ).toMatch( `h1 { From aade28a6968fcbacfbb163e3dbda3a33bccecec7 Mon Sep 17 00:00:00 2001 From: linzhe141 <1572213544@qq.com> Date: Thu, 12 Sep 2024 11:14:46 +0800 Subject: [PATCH 07/11] chore: update --- .../__tests__/compileStyle.spec.ts | 2 ++ .../compiler-sfc/src/style/pluginScoped.ts | 29 +++++++++++++------ 2 files changed, 22 insertions(+), 9 deletions(-) diff --git a/packages/compiler-sfc/__tests__/compileStyle.spec.ts b/packages/compiler-sfc/__tests__/compileStyle.spec.ts index 071d019ad5b..fbcbc2cc4c0 100644 --- a/packages/compiler-sfc/__tests__/compileStyle.spec.ts +++ b/packages/compiler-sfc/__tests__/compileStyle.spec.ts @@ -58,7 +58,9 @@ describe('SFC scoped CSS', () => { &[data-v-test] { color: red; /**background-color: pink; */ +} @media only screen and (max-width: 800px) { +&[data-v-test] { background-color: green; } } diff --git a/packages/compiler-sfc/src/style/pluginScoped.ts b/packages/compiler-sfc/src/style/pluginScoped.ts index 4b8060f9d0d..f1557787b0b 100644 --- a/packages/compiler-sfc/src/style/pluginScoped.ts +++ b/packages/compiler-sfc/src/style/pluginScoped.ts @@ -233,16 +233,12 @@ function rewriteSelector( if (rule.nodes.some(node => node.type === 'rule')) { const deep = (rule as any).__deep - const nodes = rule.nodes.filter(node => node.type !== 'rule') - if (!deep && nodes.length) { - for (const decl of nodes) { - rule.removeChild(decl) + if (!deep) { + extractAndWrapNodes(rule) + const atruleNodes = rule.nodes.filter(node => node.type === 'atrule') + for (const atnode of atruleNodes) { + extractAndWrapNodes(atnode) } - const hostRule = new Rule({ - nodes: nodes, - selector: '&', - }) - rule.prepend(hostRule) } shouldInject = deep } @@ -285,6 +281,21 @@ function rewriteSelector( function isSpaceCombinator(node: selectorParser.Node) { return node.type === 'combinator' && /^\s+$/.test(node.value) } +function extractAndWrapNodes(parentNode: Rule | AtRule) { + const nodes = (parentNode.nodes || []).filter( + node => node.type === 'decl' || node.type === 'comment', + ) + if (nodes.length) { + for (const node of nodes) { + parentNode.removeChild(node) + } + const wrappedRule = new Rule({ + nodes: nodes, + selector: '&', + }) + parentNode.prepend(wrappedRule) + } +} scopedPlugin.postcss = true export default scopedPlugin From 9e792359e17169e22b31952560f94aaf853543ee Mon Sep 17 00:00:00 2001 From: linzhe <40790268+linzhe141@users.noreply.github.com> Date: Thu, 12 Sep 2024 16:48:05 +0800 Subject: [PATCH 08/11] Update packages/compiler-sfc/src/style/pluginScoped.ts Co-authored-by: edison --- packages/compiler-sfc/src/style/pluginScoped.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/compiler-sfc/src/style/pluginScoped.ts b/packages/compiler-sfc/src/style/pluginScoped.ts index f1557787b0b..335653f1c69 100644 --- a/packages/compiler-sfc/src/style/pluginScoped.ts +++ b/packages/compiler-sfc/src/style/pluginScoped.ts @@ -282,7 +282,8 @@ function isSpaceCombinator(node: selectorParser.Node) { return node.type === 'combinator' && /^\s+$/.test(node.value) } function extractAndWrapNodes(parentNode: Rule | AtRule) { - const nodes = (parentNode.nodes || []).filter( + if(!parentNode.nodes) return + const nodes = parentNode.nodes.filter( node => node.type === 'decl' || node.type === 'comment', ) if (nodes.length) { From 3fc49c1dce81bd823c7a1853dc82951d860a129b Mon Sep 17 00:00:00 2001 From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com> Date: Thu, 12 Sep 2024 08:48:49 +0000 Subject: [PATCH 09/11] [autofix.ci] apply automated fixes --- packages/compiler-sfc/src/style/pluginScoped.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/compiler-sfc/src/style/pluginScoped.ts b/packages/compiler-sfc/src/style/pluginScoped.ts index 335653f1c69..eaa52100564 100644 --- a/packages/compiler-sfc/src/style/pluginScoped.ts +++ b/packages/compiler-sfc/src/style/pluginScoped.ts @@ -282,7 +282,7 @@ function isSpaceCombinator(node: selectorParser.Node) { return node.type === 'combinator' && /^\s+$/.test(node.value) } function extractAndWrapNodes(parentNode: Rule | AtRule) { - if(!parentNode.nodes) return + if (!parentNode.nodes) return const nodes = parentNode.nodes.filter( node => node.type === 'decl' || node.type === 'comment', ) From a52f369e56874dc3dede2139832d7ac950fe4bd1 Mon Sep 17 00:00:00 2001 From: linzhe141 <1572213544@qq.com> Date: Thu, 12 Sep 2024 17:00:44 +0800 Subject: [PATCH 10/11] chore: update test --- .../__tests__/compileStyle.spec.ts | 31 ++++++++++++------- 1 file changed, 20 insertions(+), 11 deletions(-) diff --git a/packages/compiler-sfc/__tests__/compileStyle.spec.ts b/packages/compiler-sfc/__tests__/compileStyle.spec.ts index fbcbc2cc4c0..b76414364dc 100644 --- a/packages/compiler-sfc/__tests__/compileStyle.spec.ts +++ b/packages/compiler-sfc/__tests__/compileStyle.spec.ts @@ -42,26 +42,35 @@ describe('SFC scoped CSS', () => { }) test('nesting selector', () => { + expect(compileScoped(`h1 { color: red; .foo { color: red; } }`)).toMatch( + `h1 {\n&[data-v-test] { color: red;\n}\n.foo[data-v-test] { color: red;`, + ) + }) + + test('nesting selector with atrule and comment', () => { expect( compileScoped( - 'h1 {\n' + - ' color: red;\n' + - ' /**background-color: pink; */\n' + - ' @media only screen and (max-width: 800px) {\n' + - ' background-color: green;\n' + - ' }\n' + - ' .foo { color: red; }\n' + - '}', + `h1 { +color: red; +/*background-color: pink;*/ +@media only screen and (max-width: 800px) { + background-color: green; + .bar { color: white } +} +.foo { color: red; } +}`, ), ).toMatch( `h1 { &[data-v-test] { - color: red; - /**background-color: pink; */ +color: red +/*background-color: pink;*/ } @media only screen and (max-width: 800px) { &[data-v-test] { - background-color: green; + background-color: green +} +.bar[data-v-test] { color: white } } .foo[data-v-test] { color: red; From 72857e74a3afdc7eb6dc5cfa92cbafca3b26ad17 Mon Sep 17 00:00:00 2001 From: Evan You Date: Fri, 13 Sep 2024 16:51:12 +0800 Subject: [PATCH 11/11] Update pluginScoped.ts --- packages/compiler-sfc/src/style/pluginScoped.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/compiler-sfc/src/style/pluginScoped.ts b/packages/compiler-sfc/src/style/pluginScoped.ts index eaa52100564..b0224cf20d8 100644 --- a/packages/compiler-sfc/src/style/pluginScoped.ts +++ b/packages/compiler-sfc/src/style/pluginScoped.ts @@ -281,6 +281,7 @@ function rewriteSelector( function isSpaceCombinator(node: selectorParser.Node) { return node.type === 'combinator' && /^\s+$/.test(node.value) } + function extractAndWrapNodes(parentNode: Rule | AtRule) { if (!parentNode.nodes) return const nodes = parentNode.nodes.filter(