refactor(svelte): <style> tags need type="text/m-css"

BREAKING CHANGE: Previous all `<style>` tags would be transformed, now only ones that have `type="text/m-css"` on them will be transformed.
tivac · Feb 25, 2022 · 713b107 · 713b107
1 parent 41b3199
commit 713b107
Show file tree

Hide file tree

Showing 16 changed files with 68 additions and 28 deletions.
diff --git a/packages/svelte/svelte.js b/packages/svelte/svelte.js
@@ -11,7 +11,7 @@ const Processor = require("@modular-css/processor");
 
 const replacer = require("./replacer.js");
 
-const styleRegex = /<style[\S\s]*?>([\S\s]*?)<\/style>/im;
+const styleRegex = /<style[^>]*?type=['"]text\/m-css['"][^>]*?>([\S\s]+?)<\/style>/im;
 const scriptRegex = /<script[\S\s]*?>([\S\s]*?)<\/script>/im;
 const missedRegex = /css\.\w+/gim;
 const linkRegex = /<link\b[^<>]*?\bhref=\s*(?:"([^"]+)"|'([^']+)'|([^>\s]+))[^>]*>/gm;
@@ -115,6 +115,8 @@ module.exports = (opts = {}) => {
         if(style) {
             log("extract <style>", file);
 
+            source = source.replace(style[0], "");
+
             css = "<style>";
 
             if(processor.has(filename)) {
@@ -280,11 +282,6 @@ module.exports = (opts = {}) => {
         processor,
         preprocess : {
             markup,
-
-            // Style elements are always stripped out completely
-            style : () => ({
-                code : "/* replaced by modular-css */",
-            }),
         },
     };
 };

diff --git a/packages/svelte/test/__snapshots__/svelte.test.js.snap b/packages/svelte/test/__snapshots__/svelte.test.js.snap
@@ -207,7 +207,7 @@ exports[`/svelte.js should extract CSS from a <style> tag 1`] = `
     </div>
 </div>
 
-<style>/* replaced by modular-css */</style>
+
 
 <script>
 export default {
@@ -291,7 +291,7 @@ exports[`/svelte.js should handle errors: empty css file - <style> 3`] = `
 "<div class=\\"{\\"css.nope\\"}\\">NOPE</div>
 <div class=\\"{\\"css.alsonope\\"}\\">STILL NOPE</div>
 
-<style>/* replaced by modular-css */</style>
+
 "
 `;
 
@@ -345,7 +345,7 @@ Array [
 exports[`/svelte.js should handle errors: invalid reference <script> - <style> 3`] = `
 "<h2 class=\\"mc_yup\\">Yup</h2>
 
-<style>/* replaced by modular-css */</style>
+
 
 <script>
     console.log(\\"css.nuhuh\\");
@@ -400,7 +400,7 @@ exports[`/svelte.js should handle errors: invalid reference template - <style> 3
 <h2 class=\\"mc_yup\\">Yup</h2>
 <h3 class=\\"{\\"css.alsonope\\"}\\">Also Nope</h3>
 
-<style>/* replaced by modular-css */</style>
+
 "
 `;
 
@@ -418,6 +418,21 @@ exports[`/svelte.js should ignore <links> that reference a URL 2`] = `
 "
 `;
 
+exports[`/svelte.js should ignore <style> tags without the text/m-css attribute 1`] = `
+"<style>
+    .no { color: red; }
+</style>
+
+
+"
+`;
+
+exports[`/svelte.js should ignore <style> tags without the text/m-css attribute 2`] = `
+"/* packages/svelte/test/specimens/style-no-attribute.svelte */
+.mc_yes { color: blue; }
+"
+`;
+
 exports[`/svelte.js should ignore files without <style> blocks 1`] = `
 "<h1>Hello</h1>
 <script>console.log(\\"output\\")</script>"
@@ -444,7 +459,7 @@ exports[`/svelte.js should invalidate files before reprocessing (<link>) 4`] = `
 `;
 
 exports[`/svelte.js should invalidate files before reprocessing (<style>) 1`] = `
-"<style>/* replaced by modular-css */</style>
+"
 <div class=\\"mc_source\\">Source</div>"
 `;
 
@@ -454,7 +469,7 @@ exports[`/svelte.js should invalidate files before reprocessing (<style>) 2`] =
 `;
 
 exports[`/svelte.js should invalidate files before reprocessing (<style>) 3`] = `
-"<style>/* replaced by modular-css */</style>
+"
 <div class=\\"mc_source\\">Source</div>"
 `;
 
@@ -720,10 +735,10 @@ exports[`/svelte.js should use modular-css's file resolver 2`] = `
 
 exports[`/svelte.js should wait for files to finish 1`] = `
 Array [
-  "<style>/* replaced by modular-css */</style>
+  "
 entry1
 ",
-  "<style>/* replaced by modular-css */</style>
+  "
 entry2
 ",
 ]

diff --git a/packages/svelte/test/specimens/both.svelte b/packages/svelte/test/specimens/both.svelte
@@ -7,7 +7,7 @@
 
 <link rel="stylesheet" href="./external.css">
 
-<style>
+<style type="text/m-css">
     .flex {
         display: flex;
     }

diff --git a/packages/svelte/test/specimens/error-style.svelte b/packages/svelte/test/specimens/error-style.svelte
@@ -1,4 +1,4 @@
-<style>
+<style type="text/m-css">
 .fooga { color: #F00; }
 .wooga { composes: foog; }
 </style>
diff --git a/packages/svelte/test/specimens/inline-chunking/a.svelte b/packages/svelte/test/specimens/inline-chunking/a.svelte
@@ -1,6 +1,6 @@
 <div class="{css.a}">A.SVELTE</div>
 
-<style>
+<style type="text/m-css">
 .a {
     composes: shared from "./shared.css";
     composes: adep from "./a-dep.css";

diff --git a/packages/svelte/test/specimens/inline-chunking/b.svelte b/packages/svelte/test/specimens/inline-chunking/b.svelte
@@ -1,6 +1,6 @@
 <div class="{css.b}">B.SVELTE</div>
 
-<style>
+<style type="text/m-css">
 .b {
     composes: shared from "./shared.css";
     composes: bdep from "./b-dep.css";

diff --git a/packages/svelte/test/specimens/invalid-inline-empty.svelte b/packages/svelte/test/specimens/invalid-inline-empty.svelte
@@ -1,5 +1,5 @@
 <div class="{css.nope}">NOPE</div>
 <div class="{css.alsonope}">STILL NOPE</div>
 
-<style>
+<style type="text/m-css">
 </style>
diff --git a/packages/svelte/test/specimens/invalid-inline-script.svelte b/packages/svelte/test/specimens/invalid-inline-script.svelte
@@ -1,6 +1,6 @@
 <h2 class="{css.yup}">Yup</h2>
 
-<style>
+<style type="text/m-css">
     .yup { color: red; }
 </style>
 

diff --git a/packages/svelte/test/specimens/invalid-inline-template.svelte b/packages/svelte/test/specimens/invalid-inline-template.svelte
@@ -2,6 +2,6 @@
 <h2 class="{css.yup}">Yup</h2>
 <h3 class="{css.alsonope}">Also Nope</h3>
 
-<style>
+<style type="text/m-css">
     .yup { color: red; }
 </style>
diff --git a/packages/svelte/test/specimens/link-component.svelte b/packages/svelte/test/specimens/link-component.svelte
@@ -3,7 +3,7 @@
 </div>
 
 
-<style>
+<style type="text/m-css">
     .flex {
         display: flex;
     }

diff --git a/packages/svelte/test/specimens/overlapping/entry1.svelte b/packages/svelte/test/specimens/overlapping/entry1.svelte
@@ -1,4 +1,4 @@
-<style>
+<style type="text/m-css">
 .one {
     composes: one from "./tier1.css";
 }

diff --git a/packages/svelte/test/specimens/overlapping/entry2.svelte b/packages/svelte/test/specimens/overlapping/entry2.svelte
@@ -1,4 +1,4 @@
-<style>
+<style type="text/m-css">
 .one {
     composes: one from "./tier1.css";
 }

diff --git a/packages/svelte/test/specimens/style-no-attribute.svelte b/packages/svelte/test/specimens/style-no-attribute.svelte
@@ -0,0 +1,7 @@
+<style>
+    .no { color: red; }
+</style>
+
+<style type="text/m-css">
+    .yes { color: blue; }
+</style>
diff --git a/packages/svelte/test/specimens/style.svelte b/packages/svelte/test/specimens/style.svelte
@@ -5,7 +5,7 @@
     </div>
 </div>
 
-<style>
+<style type="text/m-css">
     .flex {
         display: flex;
     }

diff --git a/packages/svelte/test/specimens/unquoted.svelte b/packages/svelte/test/specimens/unquoted.svelte
@@ -7,7 +7,7 @@
     But I am!
 </div>
 
-<style>
+<style type="text/m-css">
     .a {
         color: red;
     }

diff --git a/packages/svelte/test/svelte.test.js b/packages/svelte/test/svelte.test.js
@@ -36,6 +36,27 @@ describe("/svelte.js", () => {
         expect(output.css).toMatchSnapshot();
     });
 
+    it("should ignore <style> tags without the text/m-css attribute", async () => {
+        const filename = require.resolve("./specimens/style-no-attribute.svelte");
+        const { processor, preprocess } = plugin({
+            namer,
+        });
+
+        const processed = await svelte.preprocess(
+            fs.readFileSync(filename, "utf8"),
+            {
+                ...preprocess,
+                filename,
+            },
+        );
+
+        expect(processed.toString()).toMatchSnapshot();
+
+        const output = await processor.output();
+
+        expect(output.css).toMatchSnapshot();
+    });
+
     it.each([
         "style",
         "link",
@@ -365,7 +386,7 @@ describe("/svelte.js", () => {
     it("should invalidate files before reprocessing (<style>)", async () => {
         // V1 of files
         fs.writeFileSync(path.resolve(__dirname, "./output/source.svelte"), dedent(`
-            <style>.source { color: red; }</style>
+            <style type="text/m-css">.source { color: red; }</style>
             <div class="{css.source}">Source</div>
         `));
 
@@ -390,7 +411,7 @@ describe("/svelte.js", () => {
 
         // V2 of CSS
         fs.writeFileSync(path.resolve(__dirname, "./output/source.svelte"), dedent(`
-            <style>.source { color: blue; }</style>
+            <style type="text/m-css">.source { color: blue; }</style>
             <div class="{css.source}">Source</div>
         `));