supabase/packages/ui/internals/transform/web/formatCss.js

const formattedVariables = require('./formattedVariables')
const fileHeader = require('./fileHeader')

const filteredTokens = (dictionary, filterFn) => {
  const filtered = dictionary.allTokens.filter(token => filterFn(token))
  return {
    ...dictionary,
    ...{
      allProperties: filtered,
      allTokens: filtered
    }
  }
}

module.exports = ({ dictionary, options, file }) => {
  const opts = options ?? {}
  const { outputReferences } = opts
  const groupedTokens = {
    // if you export the prefixes use token.path[0] instead of [1]
    light: filteredTokens(dictionary, (token) => token.path[1].toLowerCase() === 'light'),
    dark: filteredTokens(dictionary, (token) => token.path[1].toLowerCase() === 'dark'),
    rest: filteredTokens(dictionary, (token) => !['light', 'dark'].includes(token.path[1].toLowerCase()))
  }

  return (
    fileHeader({ file }) +
      ':root {\n' +
      formattedVariables({ format: 'css', dictionary: groupedTokens.rest, outputReferences }) +
      '\n}\n\n' +
      '@media (prefers-color-scheme: light) {\n' +
      ' :root {\n' +
      formattedVariables({ format: 'css', dictionary: groupedTokens.light, outputReferences }) +
      '\n }\n}\n\n' +
      '@media (prefers-color-scheme: dark) {\n' +
      ' :root {\n' +
      formattedVariables({ format: 'css', dictionary: groupedTokens.dark, outputReferences }) +
      '\n }\n}\n\n' +
      'html[data-theme="light"] {\n' +
      formattedVariables({ format: 'css', dictionary: groupedTokens.light, outputReferences }) +
      '\n}\n\n' +
      'html[data-theme="dark"] {\n' +
      formattedVariables({ format: 'css', dictionary: groupedTokens.dark, outputReferences }) +
      '\n}\n'
  )
}