work around some css-tree quirks

pull/302/head
Rich Harris 9 years ago
parent 27579cd668
commit 2d5fd6f3a5

@ -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;

@ -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,

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

@ -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
}

Loading…
Cancel
Save