lightningcss

lightningcss copied to clipboard

The support for scoping CSS variables is great and exactly what I'd expect from CSS modules.

However, consider a CSS module that defines some theme colors:

:root {
  --primary: darkblue;
  --background: white;
}

Using the above module can get rather verbose when the directory structure of your project grows. For example, I can see this happening:

.foobar {
  color: var(--primary from '../../../../style/theme/colors.module.css');
  background-color: var(--background from '../../../../style/theme/colors.module.css');
}

I think it would be nice to have a syntax to alias another CSS module file, something like this:

@alias '../../../../style/theme/colors.module.css' as colors;

.foobar {
  color: var(--primary from colors);
  background-color: var(--background from colors);
}

The syntax above is just an idea, I just don't want to repeat potentially long filepaths.

(I've searched for ways in which this might already be implemented, but couldn't find anything. Let me know if I'm wrong!)