Shared units?

[jsg2021]

If I have a central file that defines all my custom units, could this plugin grow an option to import a file so one could just use the units throughout a project?

For example, define a rem-px unit in a variables.css file:

:root {
  --unit-rpx: 0.0625rem;
}

And then anywhere else in the project simply use 5rpx; or something like that without having to import/re-declare?

[mikestopcontinues]

Exactly what I was going for! That said, it's been a long while since I used the plugin myself, so give it a shot and see if it still works.

[jsg2021]

Looking at the code of this plugin, I don't see how the --unit-* definitions from a central file would be within scope?

[mikestopcontinues]

It's been so long, I honestly don't remember if I was importing a vars.css with :root {--var} into every file, or if I was just importing the vars.css once. Six years ago, custom properties were entirely unsupported, so postcss still had to replace every var with the value, which means it might've required importing vars.css over and over again.

In the code, that units cache object is doing a lot of heavy lifting. I remember walkDecl was able to handle re-definitions of vars at least mostly-properly.

I would just test it and see. It might not work at all with PostCSS 8's changes. If it doesn't work, just release a new plugin or make a PR. I might even start using it again. I'm getting a little tired of writing 0.125rem and var(--rpx) :)

(Another option I thought of too late for my current behemoth project, set html { font-size: 10px; }.)