feat: support <link> elements in svelte (#426)

* feat: add basic <link> support

* docs: add <link> references

* chore: snapshot update

docs/svelte.md

@@ -0,0 +1,78 @@
+# Svelte
+
+`modular-css-svelte` provides a [svelte preprocessor](https://svelte.technology/guide#preprocessing) that can convert inline `<style>` or external `<link>` tags using `modular-css` and will also staticly replace any css references it can find for maximum speed.
+
+### Options
+
+All options are passed to the underlying `Processor` instance, see [Options](api.md#options).
+
+## Usage
+
+### `svelte.preprocess()`
+
+```js
+const filename = "./Component.html";
+
+const { processor, preprocess } = require("modular-css-svelte")({
+    css : "./dist/bundle.css"
+});
+
+const processed = await svelte.preprocess(
+    fs.readFileSync(filename, "utf8"),
+    Object.assign({}, preprocess, { filename })
+);
+
+const result = processor.output();
+
+fs.writeFileSync("./dist/bundle.css", result.css);
+```
+
+### `rollup-plugin-svelte`
+
+#### API
+
+```js
+const rollup = require("rollup").rollup;
+
+const { preprocess, plugin } = require("modular-css-svelte/rollup")({
+    css : "./dist/bundle.css"
+});
+
+const bundle = await rollup({
+    input   : "./Component.html",
+    plugins : [
+        require("rollup-plugin-svelte")({
+            preprocess
+        }),
+        plugin
+    ]
+});
+
+// bundle.write will also write out the CSS to the path specified in the `css` arg
+bundle.write({
+    format : "es",
+    file   : "./dist/bundle.js"
+});
+```
+
+#### `rollup.config.js`
+
+```js
+const { preprocess, plugin } = require("modular-css-svelte/rollup")({
+    css : "./dist/bundle.css"
+});
+
+module.exports = {
+    input   : "./Component.html",
+    output  : {
+        format : "es",
+        file   : "./dist/bundle.js"
+    },
+    plugins : [
+        require("rollup-plugin-svelte")({
+            preprocess
+        }),
+        plugin
+    ]
+};
+```

packages/svelte/README.md

@@ -5,15 +5,15 @@ modular-css-svelte  [![NPM Version](https://img.shields.io/npm/v/modular-css-sve
     <a href="https://gitter.im/modular-css/modular-css"><img src="https://img.shields.io/gitter/room/modular-css/modular-css.svg" alt="Gitter" /></a>
 </p>
 
-Svelte preprocessor support for [`modular-css`](https://github.com/tivac/modular-css). Process inline `<style>`s inside your Svelte components using the full power of `modular-css` while also providing compile-time optimizations for smaller bundles and even faster runtime performance!
+Svelte preprocessor support for [`modular-css`](https://github.com/tivac/modular-css). Process inline `<style>`s or `<link>` references inside your Svelte components using the full power of `modular-css` while also providing compile-time optimizations for smaller bundles and even faster runtime performance!
 
 ## Example
 
 Turns this
 
 ```html
-<div class="{{css.main}}">
-    <h1 class="{{css.title}}">Title</h1>
+<div class="{css.main}">
+    <h1 class="{css.title}">Title</h1>
 </div>
 
 <style>
@@ -37,6 +37,8 @@ into what is effectively this
 
 while allowing you to use all of the usual `modular-css` goodies.
 
+Alternatively you can use `<link>` tags to reference CSS external to the component.
+
 ## Install
 
 `$ npm i modular-css-svelte`
@@ -115,4 +117,3 @@ module.exports = {
 ## Options
 
 All options are passed to the underlying `Processor` instance, see [Options](https://github.com/tivac/modular-css/blob/master/docs/api.md#options).
-

packages/svelte/methods.js

@@ -1,39 +1,62 @@
 "use strict";
 
+const path = require("path");
+
+const resolve = require("resolve-from");
+
+const styleRegex = /<style[\S\s]*?>([\S\s]*?)<\/style>/igm;
+const linkRegex = /<link\b[^<>]*?\bhref=\s*(?:"([^"]+)"|'([^']+)'|([^>\s]+))[^>]*>/igm;
+
 exports.markup = (processor) => ({ content, filename }) => {
-        const search = /<style[\S\s]*?>([\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 <style> OR <link>, but not both");
+    }
 
-        return processor.string(
+    let css;
+
+    if(style) {
+        css = processor.string(
             filename,
-            style
-        )
-        .then((result) => {
-            const exported = result.files[result.file].exports;
-
-            return {
-                code : content
-                    // Replace simple {css.<key>} values first
-                    .replace(
-                        new RegExp(`{css.(${Object.keys(exported).join("|")})}`, "gm"),
-                        (match, key) => exported[key].join(" ")
-                    )
-                    // Then any remaining bare css.<key> values
-                    .replace(
-                        new RegExp(`(\\b)css.(${Object.keys(exported).join("|")})(\\b)`, "gm"),
-                        (match, prefix, key, suffix) => `${prefix}"${exported[key].join(" ")}"${suffix}`
-                    )
-            };
-        });
-    };
+            style[1]
+        );
+    }
+
+    if(link) {
+        // Remove the <link> element from the component to avoid double-loading
+        content = content.replace(link[0], "");
+
+        let external = resolve(path.dirname(filename), link[1] || link[2] || link[3]);
+
+        css = processor.file(external);
+    }
+
+    return css.then((result) => {
+        const exported = result.files[result.file].exports;
+
+        return {
+            code : content
+                // Replace simple {css.<key>} values first
+                .replace(
+                    new RegExp(`{css.(${Object.keys(exported).join("|")})}`, "gm"),
+                    (match, key) => exported[key].join(" ")
+                )
+                // Then any remaining bare css.<key> values
+                .replace(
+                    new RegExp(`(\\b)css.(${Object.keys(exported).join("|")})(\\b)`, "gm"),
+                    (match, prefix, key, suffix) => `${prefix}"${exported[key].join(" ")}"${suffix}`
+                )
+        };
+    });
+};
 
 exports.style = () => ({
     code : "/* replaced by modular-css */"