feature(svelte): adds support for processing svelte templates with cs…

…s pre-processors (#714)

src/extract/transpile/svelte-preprocess.js

@@ -1,5 +1,4 @@
 /* eslint-disable no-magic-numbers, security/detect-object-injection */
-
 /*
  parseAttributes copied verbatim from
  https://github.com/sveltejs/svelte/blob/67dea941bb1e61f0912ebd2257666b899c1ccefa/src/compiler/preprocess/index.ts#L27
@@ -60,20 +59,41 @@ function getSourceReplacer(pTranspiler, pTranspilerOptions) {
   };
 }
 
+function styleReplacer(pMatch, pAttributes) {
+  const lParsedAttributes = parseAttributes(pAttributes || "");
+
+  if (lParsedAttributes.lang === "css" || !pAttributes) {
+    return pMatch;
+  } else {
+    return "";
+  }
+}
+
 module.exports = function preProcess(
   pSource,
   pTranspilerWrapper,
   pTranspilerOptions
 ) {
-  // regex from
+  // regexes from
   // github.com/sveltejs/svelte/blob/67dea941bb1e61f0912ebd2257666b899c1ccefa/src/compiler/preprocess/index.ts#L165
   // eslint-disable-next-line security/detect-unsafe-regex, unicorn/no-unsafe-regex
   const lScriptRegex = /<script(\s[^]*?)?(?:>([^]*?)<\/script>|\/>)/gi;
+  // eslint-disable-next-line security/detect-unsafe-regex, unicorn/no-unsafe-regex
+  const lStyleRegex = /<style(\s[^]*?)?(?:>([^]*?)<\/style>|\/>)/gi;
 
   if (pTranspilerWrapper.isAvailable) {
-    return pSource.replace(
-      lScriptRegex,
-      getSourceReplacer(pTranspilerWrapper.transpile, pTranspilerOptions)
+    return (
+      pSource
+        .replace(
+          lScriptRegex,
+          getSourceReplacer(pTranspilerWrapper.transpile, pTranspilerOptions)
+        )
+        // we don't regard styling in our dependency analysis, so we can remove
+        // styles that (our instance of) svelte doesn't have pre-processors
+        // installed for (e.g. sass/scss/postcss/sss/styl/stylus/...) and that
+        // can potentially get svelte compiler to error out (for an example see
+        // https://github.com/sverweij/dependency-cruiser/issues/713)
+        .replace(lStyleRegex, styleReplacer)
     );
   } else {
     return pSource;

test/extract/transpile/svelte-preprocess.spec.mjs

@@ -1,6 +1,7 @@
 import { expect } from "chai";
 // eslint-disable-next-line node/file-extension-in-import
 import * as svelteCompiler from "svelte/compiler";
+import normalizeNewline from "normalize-newline";
 import thing from "../../../src/extract/transpile/typescript-wrap.js";
 import sveltePreProcess from "../../../src/extract/transpile/svelte-preprocess.js";
 
@@ -14,6 +15,7 @@ const CORPUS = [
   "<script>function f(<ReadOnly>pString:string):string {return pString.reverse()}</script><div><script>console.log('whoop')</script></div>",
   "<script hazoo>console.log(43)</script>",
   "<script hazoo=69>console.log(44)</script>",
+  "<script lang='js'>console.log(713)</script><style></style>",
 ];
 
 describe("[U] sync svelte pre-processor", () => {
@@ -51,4 +53,27 @@ describe("[U] sync svelte pre-processor", () => {
 
     expect(lSyncResult).to.equal(lAsyncResult.code);
   });
+  it("ignores style tags that require a pre-processor", () => {
+    const lInput = `<script lang="ts">console.log(713)</script>
+      <style lang="scss">
+        button {
+          background-color: blue;
+          &:button {
+            background-color: red;
+          }
+        }
+      </style>
+      <button on:click={increment}>
+        count is {count}
+      </button>`;
+    const lExpected = `<script lang="ts">console.log(713);
+</script>
+      
+      <button on:click={increment}>
+        count is {count}
+      </button>`;
+    const lResult = sveltePreProcess(lInput, typeScriptWrap, {});
+
+    expect(normalizeNewline(lResult)).to.equal(normalizeNewline(lExpected));
+  });
 });