Skip to content

Instantly share code, notes, and snippets.

@tomhodgins tomhodgins/css-input.css
Last active Sep 3, 2019

Embed
What would you like to do?
single size prop { --size: 10px; }
double size prop { --size: 20px 30px; }
single size prop { width: 10px; height: 10px; }
double size prop { width: 30px; height: 20px; }
import * as parseCSS from '../parse-css/index.js'
function patternMatcher(
list = [],
patterns = [item => false],
filter = () => true
) {
const trimmed = list.filter(filter)
const firstIndex = trimmed.findIndex(item =>
patterns.every((pattern, index) =>
pattern(
trimmed[trimmed.indexOf(item) + index]
)
)
)
const start = list.indexOf(trimmed[firstIndex])
const end = list.indexOf(trimmed[firstIndex + patterns.length - 1])
return {
start,
end,
match: trimmed.slice(firstIndex, firstIndex + patterns.length),
original: list.slice(start, end + 1)
}
}
let data = ''
// Deno CLI support
if (
typeof Deno !== 'undefined'
&& 1 < Deno.args.length
) {
data = new TextDecoder('utf-8').decode(
Deno.readFileSync(Deno.args[1])
)
}
console.log(
parseCSS.parseAStylesheet(data).value
.map(rule => {
// --size: <a> <b>;
// width: <b>;
// height: <a>;
let sizeDouble = patternMatcher(
rule.value.value,
[
({tokenType, value}) => tokenType === 'IDENT' && value === '--size',
({tokenType}) => tokenType === 'DIMENSION',
({tokenType}) => tokenType === 'DIMENSION',
],
({tokenType}) => ['WHITESPACE', ':'].every(type => type !== tokenType)
)
if (sizeDouble.match.length) {
rule.value.value.splice(
sizeDouble.start,
sizeDouble.original.length,
...parseCSS.parseAListOfComponentValues(
`width: ${sizeDouble.match[2]}; height: ${sizeDouble.match[1]}`
)
)
}
// --size: <a>;
// width: <a>;
// height: <a>;
let sizeSingle = patternMatcher(
rule.value.value,
[
({tokenType, value}) => tokenType === 'IDENT' && value === '--size',
({tokenType}) => tokenType === 'DIMENSION',
],
({tokenType}) => ['WHITESPACE', ':'].every(type => type !== tokenType)
)
if (sizeSingle.match.length && sizeDouble.match.length === 0) {
rule.value.value.splice(
sizeSingle.start,
sizeSingle.original.length,
...parseCSS.parseAListOfComponentValues(
`width: ${sizeSingle.match[1]}; height: ${sizeSingle.match[1]}`
)
)
}
return rule.toSource()
}).join('\n')
)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.