mirror of https://github.com/sveltejs/svelte
parent
96d7814bce
commit
eb95fd1ebb
@ -1,5 +0,0 @@
|
||||
import transform from './transform.js';
|
||||
|
||||
export default function process ( parsed ) {
|
||||
return transform( parsed.css.content.styles, parsed.hash );
|
||||
}
|
@ -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 );
|
||||
}
|
Loading…
Reference in new issue