From 713b10716d33829cdc1a796e557348dcb2f8450f Mon Sep 17 00:00:00 2001
From: Pat Cavit <github@patcavit.com>
Date: Mon, 21 Feb 2022 11:43:55 -0800
Subject: [PATCH] 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.
---
 packages/svelte/svelte.js                     |  9 ++----
 .../test/__snapshots__/svelte.test.js.snap    | 31 ++++++++++++++-----
 packages/svelte/test/specimens/both.svelte    |  2 +-
 .../svelte/test/specimens/error-style.svelte  |  2 +-
 .../test/specimens/inline-chunking/a.svelte   |  2 +-
 .../test/specimens/inline-chunking/b.svelte   |  2 +-
 .../specimens/invalid-inline-empty.svelte     |  2 +-
 .../specimens/invalid-inline-script.svelte    |  2 +-
 .../specimens/invalid-inline-template.svelte  |  2 +-
 .../test/specimens/link-component.svelte      |  2 +-
 .../test/specimens/overlapping/entry1.svelte  |  2 +-
 .../test/specimens/overlapping/entry2.svelte  |  2 +-
 .../test/specimens/style-no-attribute.svelte  |  7 +++++
 packages/svelte/test/specimens/style.svelte   |  2 +-
 .../svelte/test/specimens/unquoted.svelte     |  2 +-
 packages/svelte/test/svelte.test.js           | 25 +++++++++++++--
 16 files changed, 68 insertions(+), 28 deletions(-)
 create mode 100644 packages/svelte/test/specimens/style-no-attribute.svelte

diff --git a/packages/svelte/svelte.js b/packages/svelte/svelte.js
index 9424d36ff..e3cc3e2d5 100644
--- 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
index 4488b99a8..96e4d78b7 100644
--- 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
index a494e4a90..529b1dcd6 100644
--- 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
index c73a47a38..44a9fe3bc 100644
--- 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>
\ No newline at end of file
diff --git a/packages/svelte/test/specimens/inline-chunking/a.svelte b/packages/svelte/test/specimens/inline-chunking/a.svelte
index 2af600fc8..de2f34647 100644
--- 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
index 58c9479fb..6a2fbd428 100644
--- 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
index 513448f32..41f121bb0 100644
--- 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
index 72ef7dbab..a21601b76 100644
--- 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
index 2b9a47a1c..266c961c4 100644
--- 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
index 555bb8223..35e499545 100644
--- 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
index fac12c246..82d113602 100644
--- 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
index d956c2f3d..bee5bd8a3 100644
--- 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
new file mode 100644
index 000000000..336687bec
--- /dev/null
+++ 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
index b9e9a918d..cc3bf1db6 100644
--- 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
index 26860be5a..bacd6c300 100644
--- 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
index 1ea35824e..111b48491 100644
--- 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>
         `));