fix: remove files when re-preprocessing for svelte

packages/svelte/package.json

@@ -25,7 +25,6 @@
  "mkdirp": "^0.5.1",
  "modular-css-core": "file:../core",
  "resolve-from": "^4.0.0",
- "rollup-pluginutils": "^2.3.0",
- "slash": "^2.0.0"
+ "rollup-pluginutils": "^2.3.0"
  }
 }

packages/svelte/src/markup.js

@@ -4,7 +4,6 @@ const path = require("path");
 
 const resolve = require("resolve-from");
 const dedent = require("dedent");
-const slash = require("slash");
 
 const styleRegex = /<style[\S\s]*?>([\S\s]*?)<\/style>/im;
 const scriptRegex = /<script[\S\s]*?>([\S\s]*?)<\/script>/im;
@@ -51,7 +50,12 @@ async function extractLink({ processor, content, filename, link }) {
  // This looks weird, but it's to support multiple types of quotation marks
  const href = link[1] || link[2] || link[3];
 
- const external = slash(resolve(path.dirname(filename), href));
+ const external = resolve(path.dirname(filename), href);
+
+ // Remove any files that've already been encountered, they should be re-processed
+ if(external in processor.files) {
+ [ ...processor.dependents(external), external ].forEach((file) => processor.remove(file));
+ }
 
  // Remove the <link> element from the component to avoid double-loading
  content = content.replace(link[0], "");

packages/svelte/test/__snapshots__/svelte.test.js.snap

@@ -292,4 +292,32 @@ exports[`/svelte.js should ignore files without <style> blocks 1`] = `
 
 exports[`/svelte.js should ignore files without <style> blocks 2`] = `""`;
 
+exports[`/svelte.js should remove files before reprocessing in case they changed 1`] = `
+"
+<div class=\\"source\\">Source</div><script>
+ import css from \\"./source.css\\";
+</script>"
+`;
+
+exports[`/svelte.js should remove files before reprocessing in case they changed 2`] = `
+"/* packages/svelte/test/output/source.css */
+.source {
+ color: red;
+}"
+`;
+
+exports[`/svelte.js should remove files before reprocessing in case they changed 3`] = `
+"
+<div class=\\"source\\">Source</div><script>
+ import css from \\"./source.css\\";
+</script>"
+`;
+
+exports[`/svelte.js should remove files before reprocessing in case they changed 4`] = `
+"/* packages/svelte/test/output/source.css */
+.source {
+ color: blue;
+}"
+`;
+
 exports[`/svelte.js should throw on both <style> and <link> in one file 1`] = `"modular-css-svelte: use <style> OR <link>, but not both"`;

packages/svelte/test/svelte.test.js

@@ -1,6 +1,7 @@
 "use strict";
 
 const fs = require("fs");
+const path = require("path");
 
 const svelte = require("svelte");
 const dedent = require("dedent");
@@ -131,4 +132,50 @@ describe("/svelte.js", () => {
  )
  ).rejects.toThrowErrorMatchingSnapshot();
  });
+
+ it("should remove files before reprocessing in case they changed", async () => {
+ // V1 of files
+ fs.writeFileSync(path.resolve(__dirname, "./output/source.html"), dedent(`
+ <link rel="stylesheet" href="./source.css" />
+ <div class="{css.source}">Source</div>
+ `));
+
+ fs.writeFileSync(path.resolve(__dirname, "./output/source.css"), dedent(`
+ .source {
+ color: red;
+ }
+ `));
+
+ const filename = require.resolve(`./output/source.html`);
+ const { processor, preprocess } = plugin({ namer });
+
+ let processed = await svelte.preprocess(
+ fs.readFileSync(filename, "utf8"),
+ Object.assign({}, preprocess, { filename })
+ );
+
+ expect(processed.toString()).toMatchSnapshot();
+
+ let output = await processor.output();
+
+ expect(output.css).toMatchSnapshot();
+
+ // V2 of CSS
+ fs.writeFileSync(path.resolve(__dirname, "./output/source.css"), dedent(`
+ .source {
+ color: blue;
+ }
+ `));
+
+ processed = await svelte.preprocess(
+ fs.readFileSync(filename, "utf8"),
+ Object.assign({}, preprocess, { filename })
+ );
+
+ expect(processed.toString()).toMatchSnapshot();
+
+ output = await processor.output();
+
+ expect(output.css).toMatchSnapshot();
+ });
 });