diff --git a/src/generators/shared/processCss.ts b/src/generators/shared/processCss.ts index 468a866649..17eae9b57d 100644 --- a/src/generators/shared/processCss.ts +++ b/src/generators/shared/processCss.ts @@ -87,6 +87,11 @@ export default function processCss( shouldTransform = false; } + else if (child.type === 'PseudoElementSelector') { + code.prependRight(c, attr); + shouldTransform = false; + } + c = child.end; }); diff --git a/test/css/samples/cascade-false-pseudo-element/_config.js b/test/css/samples/cascade-false-pseudo-element/_config.js new file mode 100644 index 0000000000..b37866f9b6 --- /dev/null +++ b/test/css/samples/cascade-false-pseudo-element/_config.js @@ -0,0 +1,3 @@ +export default { + cascade: false +}; \ No newline at end of file diff --git a/test/css/samples/cascade-false-pseudo-element/expected.css b/test/css/samples/cascade-false-pseudo-element/expected.css new file mode 100644 index 0000000000..e2a4397f38 --- /dev/null +++ b/test/css/samples/cascade-false-pseudo-element/expected.css @@ -0,0 +1,12 @@ + + span[svelte-583610229]::after { + content: 'i am a pseudo-element'; + } + + span[svelte-583610229]:first-child { + color: red; + } + + span[svelte-583610229]:last-child::after { + color: blue; + } diff --git a/test/css/samples/cascade-false-pseudo-element/input.html b/test/css/samples/cascade-false-pseudo-element/input.html new file mode 100644 index 0000000000..16be3071f9 --- /dev/null +++ b/test/css/samples/cascade-false-pseudo-element/input.html @@ -0,0 +1,15 @@ +<span></span> + +<style> + span::after { + content: 'i am a pseudo-element'; + } + + span:first-child { + color: red; + } + + span:last-child::after { + color: blue; + } +</style> \ No newline at end of file