Code from “How to Design & Support Your Own Custom CSS Features”, watch on YouTube → https://youtu.be/Q3yruVWYHWk

css-input.css

@--variation 1 {
  body { background: lime; }
  h1 { font-size: 10pt; }
}

@--variation 2 {
  body { background: orange; }
  h1 { font-size: 99pt; }
}

css-output-1.css

/* built with: deno custom-variation-at-rule.js css-input.css 1 */
body { background: lime; }
h1 { font-size: 10pt; }

css-output-2.css

/* built with: deno custom-variation-at-rule.js css-input.css 2 */
body { background: orange; }
h1 { font-size: 99pt; }

custom-variation-at-rule.js

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')
)