Theme Replacement support for Custom Properties + color opacity utilities

[hamatoyogi]

To get custom colors that are declared with CSS variables working, there is a need to add some configuration.

It's possible to get it working, but I needed to create a new config file especially for the config viewer, and point toward it while running.

My suggestion is to support this out of the box.

I've made a gist with what I did to get it working in a project.

Happy to try and submit a PR if you can point me in the right direction and some sort of contribution reference.

Otherwise, just wanted to say that this is a really helpful project and is awesome!
Thanks for making this @expandtheroom.

[NullVoxPopuli]

I also need CSS Variable support. tailwind-config-viewer is pretty much useless otherwise (we use a lot of variables)

The tailwindcss generated CSS has the variables properly defined, so my variables plugin def works :D

[max-arias]

If it helps anyone, I did this to extract css vars and convert them to the format this lib uses (vars must be in the :root selector):

var css = require("css");
var fs = require("fs");

var source = fs.readFileSync("./styles.css").toString();

var result = {};
css
  .parse(source)
  .stylesheet.rules.filter(
    (rule) => rule.selectors && rule.selectors.some((sel) => sel === ":root")
  )
  .forEach((rule) =>
    rule.declarations
      .filter(
        (decl) =>
          decl.type === "declaration" && decl.property.indexOf("--") === 0
      )
      .forEach((decl) => {
        const prop = `var(${decl.property})`;

        return (result[prop] = decl.value);
      })
  );

console.log(result);

This will output an object like:

{
  'var(--white)': '#fff',
  'var(--black)': '#000',
...
}

[NullVoxPopuli]

where does that go / how do you use it?

[max-arias]

If I remember correctly, that goes in your tailwind.config and you use result when you extend colors. It's been a while, sorry 😅

But the idea was to extract css-vars and convert them to a JS object

[solidevolution]

I solved it temporary so like that

colors.css

:root {
  --color-transparent: transparent;
  --color-white: 255 255 255;
  --color-black: 0 0 0;
}

tailwind.config.js

let colors = {}
if (!process.client) {
  const css = require('css')
  const fs = require('fs')
  const source = fs.readFileSync('./assets/css/_vars.css').toString()
  css
    .parse(source)
    .stylesheet.rules.filter((rule) => rule.selectors && rule.selectors.some((sel) => sel === ':root'))
    .forEach((rule) =>
      rule.declarations
        .filter((decl) => decl.type === 'declaration' && decl.property.indexOf('--') === 0)
        .forEach((decl) => {
          const prop = decl.property.replace('--color-', '')
          const [r, g, b] = decl.value.split(' ')
          return (colors[prop] = `rgb(${r}, ${g}, ${b}, 1)`)
        })
    )
}

I use postcss and need the css variables space separated to directly insert them like this:

exceptions in plain css somewhere in the app

background: rgb(var(--color-gray-200) / 0.4);