Merge pull request #294 from sveltejs/css-parser

Use css-tree to generate a proper CSS AST and use it for transformations

Author: Rich-Harris

package.json

@@ -49,6 +49,7 @@
     "babel-register": "^6.18.0",
     "codecov": "^1.0.1",
     "console-group": "^0.3.2",
+    "css-tree": "^1.0.0-alpha16",
     "eslint": "^3.12.2",
     "eslint-plugin-import": "^2.2.0",
     "estree-walker": "^0.3.0",

src/generators/dom/index.js

@@ -2,7 +2,7 @@ import deindent from '../../utils/deindent.js';
 import getBuilders from './utils/getBuilders.js';
 import CodeBuilder from '../../utils/CodeBuilder.js';
 import namespaces from '../../utils/namespaces.js';
-import processCss from '../shared/css/process.js';
+import processCss from '../shared/processCss.js';
 import visitors from './visitors/index.js';
 import Generator from '../Generator.js';
 import * as shared from '../../shared/index.js';
@@ -221,7 +221,7 @@ export default function dom ( parsed, source, options, names ) {
 			let addedCss = false;
 			function addCss () {
 				var style = createElement( 'style' );
-				style.textContent = ${JSON.stringify( processCss( parsed ) )};
+				style.textContent = ${JSON.stringify( processCss( parsed, generator.code ) )};
 				appendNode( style, document.head );
 
 				addedCss = true;

src/generators/server-side-rendering/index.js

@@ -1,6 +1,6 @@
 import deindent from '../../utils/deindent.js';
 import CodeBuilder from '../../utils/CodeBuilder.js';
-import processCss from '../shared/css/process.js';
+import processCss from '../shared/processCss.js';
 import visitors from './visitors/index.js';
 import Generator from '../Generator.js';
 
@@ -94,7 +94,7 @@ export default function ssr ( parsed, source, options, names ) {
 		builders.renderCss.addBlock( deindent`
 			components.push({
 				filename: ${name}.filename,
-				css: ${JSON.stringify( processCss( parsed ) )},
+				css: ${JSON.stringify( processCss( parsed, generator.code ) )},
 				map: null // TODO
 			});
 		` );

src/generators/shared/css/process.js

@@ -0,0 +1,51 @@
+import parse from 'css-tree/lib/parser/index.js';
+import walk from 'css-tree/lib/utils/walk.js';
+
+const commentsPattern = /\/\*[\s\S]*?\*\//g;
+
+export default function processCss ( parsed, code ) {
+	const css = parsed.css.content.styles;
+	const offset = parsed.css.content.start;
+
+	const ast = parse( css, {
+		positions: true
+	});
+
+	const attr = `[svelte-${parsed.hash}]`;
+
+	walk.rules( ast, rule => {
+		rule.selector.children.each( selector => {
+			const start = selector.loc.start.offset;
+			const end = selector.loc.end.offset;
+
+			const selectorString = css.slice( start, end );
+
+			const firstToken = selector.children.head;
+
+			let transformed;
+
+			if ( firstToken.data.type === 'TypeSelector' ) {
+				const insert = firstToken.data.loc.end.offset;
+				const head = css.slice( start, insert );
+				const tail = css.slice( insert, end );
+
+				transformed = `${head}${attr}${tail}, ${attr} ${selectorString}`;
+			} else {
+				transformed = `${attr}${selectorString}, ${attr} ${selectorString}`;
+			}
+
+			code.overwrite( start + offset, end + offset, transformed );
+		});
+	});
+
+	// remove comments. TODO would be nice if this was exposed in css-tree
+	let match;
+	while ( match = commentsPattern.exec( css ) ) {
+		const start = match.index + offset;
+		const end = start + match[0].length;
+
+		code.remove( start, end );
+	}
+
+	return code.slice( parsed.css.content.start, parsed.css.content.end );
+}

src/generators/shared/css/transform.js

@@ -0,0 +1,11 @@
+<p class='foo bar'>red on black</p>
+
+<style>
+	.foo {
+		color: red;
+	}
+
+	[class*=" bar"] {
+		background: black;
+	}
+</style>

src/generators/shared/processCss.js

@@ -0,0 +1,11 @@
+export default {
+	test ( assert, component, target, window ) {
+		const [ control, test ] = target.querySelectorAll( 'p' );
+
+		assert.equal( window.getComputedStyle( control ).color, '' );
+		assert.equal( window.getComputedStyle( control ).backgroundColor, '' );
+
+		assert.equal( window.getComputedStyle( test ).color, 'red' );
+		assert.equal( window.getComputedStyle( test ).backgroundColor, 'black' );
+	}
+};

test/generator/css-space-in-attribute/Widget.html

@@ -0,0 +1,10 @@
+<p class='foo bar'>control</p>
+<Widget/>
+
+<script>
+	import Widget from './Widget.html';
+
+	export default {
+		components: { Widget }
+	};
+</script>