From bf3e3732c75c2d37372170de84aff873bc5b8d4f Mon Sep 17 00:00:00 2001 From: Pat Cavit Date: Sun, 3 Jun 2018 00:21:11 -0700 Subject: [PATCH 1/3] feat: add basic support --- packages/svelte/methods.js | 81 +- packages/svelte/package-lock.json | 1347 ++++------------- packages/svelte/package.json | 3 +- .../test/__snapshots__/rollup.test.js.snap | 198 +++ .../test/__snapshots__/svelte.test.js.snap | 35 + packages/svelte/test/rollup.test.js | 25 + packages/svelte/test/specimens/external.css | 24 + .../svelte/test/specimens/svelte-both.html | 35 + .../test/specimens/svelte-external.html | 8 + packages/svelte/test/svelte.test.js | 39 + 10 files changed, 729 insertions(+), 1066 deletions(-) create mode 100644 packages/svelte/test/specimens/external.css create mode 100644 packages/svelte/test/specimens/svelte-both.html create mode 100644 packages/svelte/test/specimens/svelte-external.html diff --git a/packages/svelte/methods.js b/packages/svelte/methods.js index d6d7cf843..8972152af 100644 --- a/packages/svelte/methods.js +++ b/packages/svelte/methods.js @@ -1,39 +1,62 @@ "use strict"; +const path = require("path"); + +const resolve = require("resolve-from"); + +const styleRegex = /([\S\s]*?)<\/style>/igm; +const linkRegex = /]*?\bhref=\s*(?:"([^"]+)"|'([^']+)'|([^>\s]+))[^>]*>/igm; + exports.markup = (processor) => ({ content, filename }) => { - const search = /([\S\s]*?)<\/style>/igm; - const matches = search.exec(content); + const link = linkRegex.exec(content); + const style = styleRegex.exec(content); - if(!matches) { - return { - code : content - }; - } + if(!link && !style) { + return { + code : content + }; + } - const style = matches[1]; + if(link && style) { + throw new Error("modular-css-svelte supports " `; + +exports[`/svelte.js should support external css via 1`] = ` +"
+

Head

+
+

Text

+
+
+ + +" +`; + +exports[`/svelte.js should support external css via 2`] = ` +"/* packages/svelte/test/specimens/simple.css */ +.fooga { + color: red; +} +/* packages/svelte/test/specimens/dependencies.css */ +.wooga { + + background: blue; +} +/* packages/svelte/test/specimens/external.css */ +.flex { + display: flex; +} +.text { + color: #000; +} +.active { + color: #F00; +} +" +`; diff --git a/packages/svelte/test/rollup.test.js b/packages/svelte/test/rollup.test.js index 60b52fa9a..a9b4e968f 100644 --- a/packages/svelte/test/rollup.test.js +++ b/packages/svelte/test/rollup.test.js @@ -61,4 +61,29 @@ describe("/rollup.js", () => { expect(() => read("svelte.css")).toThrow(); }); }); + + it("should support external css via ", () => { + const { preprocess, plugin } = processor({ + css : "./packages/svelte/test/output/svelte.css", + namer + }); + + return rollup({ + input : require.resolve("./specimens/svelte-external.html"), + plugins : [ + require("rollup-plugin-svelte")({ + preprocess + }), + plugin + ] + }) + .then((bundle) => bundle.write({ + format : "es", + file : "./packages/svelte/test/output/svelte.js" + })) + .then(() => { + expect(cleanup(read("svelte.js"))).toMatchSnapshot(); + expect(read("svelte.css")).toMatchSnapshot(); + }); + }); }); diff --git a/packages/svelte/test/specimens/external.css b/packages/svelte/test/specimens/external.css new file mode 100644 index 000000000..1d1fc5ed7 --- /dev/null +++ b/packages/svelte/test/specimens/external.css @@ -0,0 +1,24 @@ +.flex { + display: flex; +} + +.wrapper { + composes: flex; +} + +.hd { + composes: flex; + composes: fooga from "./simple.css"; +} + +.bd { + composes: wooga from "./dependencies.css"; +} + +.text { + color: #000; +} + +.active { + color: #F00; +} diff --git a/packages/svelte/test/specimens/svelte-both.html b/packages/svelte/test/specimens/svelte-both.html new file mode 100644 index 000000000..a494e4a90 --- /dev/null +++ b/packages/svelte/test/specimens/svelte-both.html @@ -0,0 +1,35 @@ +
+

Head

+
+

Text

+
+
+ + + + diff --git a/packages/svelte/test/specimens/svelte-external.html b/packages/svelte/test/specimens/svelte-external.html new file mode 100644 index 000000000..996f3d7e2 --- /dev/null +++ b/packages/svelte/test/specimens/svelte-external.html @@ -0,0 +1,8 @@ +
+

Head

+
+

Text

+
+
+ + diff --git a/packages/svelte/test/svelte.test.js b/packages/svelte/test/svelte.test.js index 1732a7416..39b8138e1 100644 --- a/packages/svelte/test/svelte.test.js +++ b/packages/svelte/test/svelte.test.js @@ -34,6 +34,28 @@ describe("/svelte.js", () => { ); }); + it("should support external css via ", () => { + const { processor, preprocess } = plugin({ + css : "./packages/svelte/test/output/svelte.css", + namer + }); + + const filename = require.resolve("./specimens/svelte-external.html"); + + return svelte.preprocess( + fs.readFileSync(filename, "utf8"), + Object.assign({}, preprocess, { filename }) + ) + .then((processed) => { + expect(processed.toString()).toMatchSnapshot(); + + return processor.output(); + }) + .then((output) => + expect(output.css).toMatchSnapshot() + ); + }); + it("should ignore files without