work around some css-tree quirks

src/generators/shared/processCss.js

@@ -1,5 +1,3 @@
-import walk from 'css-tree/lib/utils/walk.js';
-
 const commentsPattern = /\/\*[\s\S]*?\*\//g;
 
 export default function processCss ( parsed, code ) {
@@ -8,19 +6,19 @@ export default function processCss ( parsed, code ) {
 
 	const attr = `[svelte-${parsed.hash}]`;
 
-	walk.rules( parsed.css.ast, rule => {
+	function transform ( rule ) {
-		rule.selector.children.each( selector => {
+		rule.selector.children.forEach( selector => {
 			const start = selector.start - offset;
 			const end = selector.end - offset;
 
 			const selectorString = css.slice( start, end );
 
-			const firstToken = selector.children.head;
+			const firstToken = selector.children[0];
 
 			let transformed;
 
-			if ( firstToken.data.type === 'TypeSelector' ) {
+			if ( firstToken.type === 'TypeSelector' ) {
-				const insert = firstToken.data.end - offset;
+				const insert = firstToken.end - offset;
 				const head = css.slice( start, insert );
 				const tail = css.slice( insert, end );
 
@@ -31,7 +29,19 @@ export default function processCss ( parsed, code ) {
 
 			code.overwrite( start + offset, end + offset, transformed );
 		});
-	});
+	}
+
+	function walk ( node ) {
+		if ( node.type === 'Rule' ) {
+			transform( node );
+		} else if ( node.children ) {
+			node.children.forEach( walk );
+		} else if ( node.block ) {
+			walk( node.block );
+		}
+	}
+
+	parsed.css.children.forEach( walk );
 
 	// remove comments. TODO would be nice if this was exposed in css-tree
 	let match;

src/parse/read/style.js

@@ -27,7 +27,7 @@ export default function readStyle ( parser, start, attributes ) {
 		start,
 		end,
 		attributes,
-		ast,
+		children: JSON.parse( JSON.stringify( ast.children ) ),
 		content: {
 			start: contentStart,
 			end: contentEnd,

test/generator/css-space-in-attribute/_config.js

@@ -1,4 +1,6 @@
 export default {
+	// solo: true,
+
 	test ( assert, component, target, window ) {
 		const [ control, test ] = target.querySelectorAll( 'p' );
 

test/parser/css/output.json

@@ -30,65 +30,60 @@
 			"end": 48,
 			"styles": "\n\tdiv {\n\t\tcolor: red;\n\t}\n"
 		},
-		"ast": {
+		"children": [
-			"type": "StyleSheet",
+			{
-			"start": 23,
+				"type": "Rule",
-			"end": 48,
+				"start": 25,
-			"children": [
+				"end": 47,
-				{
+				"selector": {
-					"type": "Rule",
+					"type": "SelectorList",
 					"start": 25,
+					"end": 28,
+					"children": [
+						{
+							"type": "Selector",
+							"start": 25,
+							"end": 28,
+							"children": [
+								{
+									"type": "TypeSelector",
+									"start": 25,
+									"end": 28,
+									"name": "div"
+								}
+							]
+						}
+					]
+				},
+				"block": {
+					"type": "Block",
+					"start": 29,
 					"end": 47,
-					"selector": {
+					"children": [
-						"type": "SelectorList",
+						{
-						"start": 25,
+							"type": "Declaration",
-						"end": 28,
+							"start": 33,
-						"children": [
+							"end": 43,
-							{
+							"important": false,
-								"type": "Selector",
+							"property": "color",
-								"start": 25,
+							"value": {
-								"end": 28,
+								"type": "Value",
+								"start": 39,
+								"end": 43,
 								"children": [
 									{
-										"type": "TypeSelector",
+										"type": "Identifier",
-										"start": 25,
+										"start": 40,
-										"end": 28,
+										"end": 43,
-										"name": "div"
+										"name": "red"
 									}
 								]
 							}
-						]
+						}
-					},
+					]
-					"block": {
-						"type": "Block",
-						"start": 29,
-						"end": 47,
-						"children": [
-							{
-								"type": "Declaration",
-								"start": 33,
-								"end": 43,
-								"important": false,
-								"property": "color",
-								"value": {
-									"type": "Value",
-									"start": 39,
-									"end": 43,
-									"children": [
-										{
-											"type": "Identifier",
-											"start": 40,
-											"end": 43,
-											"name": "red"
-										}
-									]
-								}
-							}
-						]
-					}
 				}
-			]
+			}
-		}
+		]
 	},
 	"js": null
 }