Skip to content

Instantly share code, notes, and snippets.

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

Embed
What would you like to do?
Code from “How to Design & Support Your Own Custom CSS Features”, watch on YouTube → https://youtu.be/Q3yruVWYHWk
@--variation 1 {
body { background: lime; }
h1 { font-size: 10pt; }
}
@--variation 2 {
body { background: orange; }
h1 { font-size: 99pt; }
}
/* built with: deno custom-variation-at-rule.js css-input.css 1 */
body { background: lime; }
h1 { font-size: 10pt; }
/* built with: deno custom-variation-at-rule.js css-input.css 2 */
body { background: orange; }
h1 { font-size: 99pt; }
import * as parseCSS from '../parse-css/index.js'
const variation = Deno.args[2] || null
const data = new TextDecoder('utf-8').decode(
Deno.readFileSync(Deno.args[1])
) || ''
console.log(
parseCSS.parseAStylesheet(data).value.reduce(
(rules, rule) => {
if (
rule.type === 'AT-RULE'
&& rule.name === '--variation'
) {
if (
rule.prelude
.filter(({value}) => value)
.some(({value}) => String(value) === variation)
) {
rules.push(
...parseCSS.parseAListOfRules(
rule.value.value.map(token => token.toSource()).join('')
)
)
}
} else {
rules.push(rule)
}
return rules
},
[]
).map(rule => 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.