diff --git a/src/generators/shared/processCss.js b/src/generators/shared/processCss.js index 51abf2a292..6adb8660af 100644 --- a/src/generators/shared/processCss.js +++ b/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 => { - rule.selector.children.each( selector => { + function transform ( rule ) { + 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' ) { - const insert = firstToken.data.end - offset; + if ( firstToken.type === 'TypeSelector' ) { + 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; diff --git a/src/parse/read/style.js b/src/parse/read/style.js index fb2fb2e780..68e05da4ca 100644 --- a/src/parse/read/style.js +++ b/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, diff --git a/test/generator/css-space-in-attribute/_config.js b/test/generator/css-space-in-attribute/_config.js index 3b52fb71d4..a6a12254cd 100644 --- a/test/generator/css-space-in-attribute/_config.js +++ b/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' ); diff --git a/test/parser/css/output.json b/test/parser/css/output.json index 5efa084f7d..72c2a139db 100644 --- a/test/parser/css/output.json +++ b/test/parser/css/output.json @@ -30,65 +30,60 @@ "end": 48, "styles": "\n\tdiv {\n\t\tcolor: red;\n\t}\n" }, - "ast": { - "type": "StyleSheet", - "start": 23, - "end": 48, - "children": [ - { - "type": "Rule", + "children": [ + { + "type": "Rule", + "start": 25, + "end": 47, + "selector": { + "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": { - "type": "SelectorList", - "start": 25, - "end": 28, - "children": [ - { - "type": "Selector", - "start": 25, - "end": 28, + "children": [ + { + "type": "Declaration", + "start": 33, + "end": 43, + "important": false, + "property": "color", + "value": { + "type": "Value", + "start": 39, + "end": 43, "children": [ { - "type": "TypeSelector", - "start": 25, - "end": 28, - "name": "div" + "type": "Identifier", + "start": 40, + "end": 43, + "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 }