Basic support for css preprocessing. No support for async preprocessing and multiple <style> tags

Suggestion for sveltejs#181 and sveltejs#876

Author: esarbanis

README.md

@@ -90,6 +90,7 @@ The Svelte compiler optionally takes a second argument, an object of configurati
 | | | |
 | `onerror` | `function` | Specify a callback for when Svelte encounters an error while compiling the component. Passed two arguments: the error object, and another function that is Svelte's default onerror handling. | (exception is thrown) |
 | `onwarn` | `function` | Specify a callback for when Svelte encounters a non-fatal warning while compiling the component. Passed two arguments: the warning object, and another function that is Svelte's default onwarn handling. | (warning is logged to console) |
+| `preprocessor` | `function`, `false` | Specify a `function` to **synchronously** preprocess the contents of the component's inline styles. It does not support async functions and components with multiple `<style>` tags.| `false` |
 
 ## Example/starter repos
 

package.json

@@ -58,6 +58,7 @@
     "mocha": "^3.2.0",
     "nightmare": "^2.10.0",
     "node-resolve": "^1.3.3",
+    "node-sass": "^4.7.1",
     "nyc": "^11.1.0",
     "prettier": "^1.7.0",
     "rollup": "^0.48.2",
@@ -70,6 +71,7 @@
     "rollup-watch": "^4.3.1",
     "source-map": "^0.5.6",
     "source-map-support": "^0.4.8",
+    "stylus": "^0.54.5",
     "tslib": "^1.8.0",
     "typescript": "^2.3.2"
   },

src/index.ts

@@ -8,7 +8,7 @@ import Stylesheet from './css/Stylesheet';
 import { Parsed, CompileOptions, Warning } from './interfaces';
 
 function normalizeOptions(options: CompileOptions): CompileOptions {
-	let normalizedOptions = assign({ generate: 'dom' }, options);
+	let normalizedOptions = assign({ generate: 'dom', preprocessor: false }, options);
 	const { onwarn, onerror } = normalizedOptions;
 	normalizedOptions.onwarn = onwarn
 		? (warning: Warning) => onwarn(warning, defaultOnwarn)
@@ -33,9 +33,24 @@ function defaultOnerror(error: Error) {
 	throw error;
 }
 
-export function compile(source: string, _options: CompileOptions) {
-	const options = normalizeOptions(_options);
+function preprocess(compile: Function) {
+	return (source: string, _options: CompileOptions) => {
+		const options = normalizeOptions(_options);
+		const preprocessor: ((raw: string) => string) | boolean  = options.preprocessor;
 
+		const match = /<style[\S\s]*?>([\S\s]*?)<\/style>/ig.exec(source);
+		if (match) {
+			if (!!preprocessor) {
+				const styles: string = match[1];
+				const processed: string = preprocessor(styles);
+				source = source.replace(styles, processed);
+			}
+		}
+		return compile(source, options);
+	}
+}
+
+export const compile = preprocess((source: string, options: CompileOptions) => {
 	let parsed: Parsed;
 
 	try {
@@ -52,7 +67,7 @@ export function compile(source: string, _options: CompileOptions) {
 	const compiler = options.generate === 'ssr' ? generateSSR : generate;
 
 	return compiler(parsed, source, stylesheet, options);
-}
+});
 
 export function create(source: string, _options: CompileOptions = {}) {
 	_options.format = 'eval';

src/interfaces.ts

@@ -59,6 +59,7 @@ export interface CompileOptions {
 
 	onerror?: (error: Error) => void;
 	onwarn?: (warning: Warning) => void;
+	preprocessor?: ((raw: string) => string) | false ;
 }
 
 export interface GenerateOptions {
@@ -77,4 +78,4 @@ export interface Visitor {
 export interface CustomElementOptions {
 	tag?: string;
 	props?: string[];
-}
+}

test/css/samples/use-scss-preprocessor-with-external-files/_config.js

@@ -0,0 +1,12 @@
+import * as sass from 'node-sass';
+import * as path from 'path';
+
+export default {
+	preprocessor: (styles) => sass.renderSync({
+		data: styles,
+		includePaths: [
+			path.resolve(__dirname)
+		]
+	}).css.toString(),
+	cascade: false,
+};

test/css/samples/use-scss-preprocessor-with-external-files/_variables.scss

@@ -0,0 +1,2 @@
+$foo-color: red;
+$baz-color: blue;

test/css/samples/use-scss-preprocessor-with-external-files/expected.css

@@ -0,0 +1 @@
+[foo][svelte-xyz]{color:red}[baz][svelte-xyz]{color:blue}

test/css/samples/use-scss-preprocessor-with-external-files/input.html

@@ -0,0 +1,13 @@
+<div foo='bar'></div>
+<div baz></div>
+
+<style type="text/scss">
+	@import 'variables';
+
+	[foo] {
+		color: $foo-color;
+	}
+	[baz] {
+		color: $baz-color;
+	}
+</style>

test/css/samples/use-scss-preprocessor/_config.js

@@ -0,0 +1,6 @@
+import * as sass from 'node-sass';
+
+export default {
+	preprocessor: (styles) => sass.renderSync({data: styles}).css.toString(),
+	cascade: false,
+};

test/css/samples/use-scss-preprocessor/expected.css

@@ -0,0 +1 @@
+[foo][svelte-xyz]{color:red}[baz][svelte-xyz]{color:blue}

test/css/samples/use-scss-preprocessor/input.html

@@ -0,0 +1,14 @@
+<div foo='bar'></div>
+<div baz></div>
+
+<style type="text/scss">
+	$foo-color: red;
+	$baz-color: blue;
+
+	[foo] {
+		color: $foo-color;
+	}
+	[baz] {
+		color: $baz-color;
+	}
+</style>

test/css/samples/use-stylus-preprocessor-with-external-file/_config.js

@@ -0,0 +1,8 @@
+import * as stylus from 'stylus';
+import * as path from 'path';
+
+export default {
+	preprocessor: (styles) =>
+		stylus(styles).include(path.resolve(__dirname)).render(),
+	cascade: false,
+};

test/css/samples/use-stylus-preprocessor-with-external-file/expected.css

@@ -0,0 +1 @@
+[foo][svelte-xyz]{color:#f00}[baz][svelte-xyz]{color:#00f}

test/css/samples/use-stylus-preprocessor-with-external-file/input.html

@@ -0,0 +1,12 @@
+<div foo='bar'></div>
+<div baz></div>
+
+<style type="text/stylus">
+	@import 'variables.styl'
+
+	[foo]
+		color foo-color
+	[baz]
+		color baz-color
+
+</style>

test/css/samples/use-stylus-preprocessor-with-external-file/variables.styl

@@ -0,0 +1,2 @@
+foo-color = red
+baz-color = blue

test/css/samples/use-stylus-preprocessor/_config.js

@@ -0,0 +1,6 @@
+import * as stylus from 'stylus';
+
+export default {
+	preprocessor: (styles) => stylus(styles).render(),
+	cascade: false,
+};

test/css/samples/use-stylus-preprocessor/expected.css

@@ -0,0 +1 @@
+[foo][svelte-xyz]{color:#f00}[baz][svelte-xyz]{color:#00f}

test/css/samples/use-stylus-preprocessor/input.html

@@ -0,0 +1,13 @@
+<div foo='bar'></div>
+<div baz></div>
+
+<style type="text/stylus">
+	foo-color = red
+	baz-color = blue
+
+	[foo]
+		color foo-color
+	[baz]
+		color baz-color
+
+</style>