Alias another CSS module file to avoid repeating (long) filepaths

[evertheylen]

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

[jeffijoe]

If you're using Vite you could use an alias like @/colors.module.css but I would also second this feature request. 🙏

[evertheylen]

Actually, I found out that postcss-modules-values supports this usecase through @value.

The lightningcss website states that it doesn't support "the @value rule – superseded by standard CSS variables.". I personally see two usecases why it useful and not superseded by standard CSS variables:

• The aliasing of filenames as discussed above
• Defining shared breakpoints, as you can't use var() in media queries