Discussion: Allow to use global css grid names (not hashed like in post-cssmodules)

[mhsdesign]

It seems this topic has been briefly discussed in: https://github.com/parcel-bundler/lightningcss/issues/144 And i was wondering if there are plans or if it fits your philosophy to have an option to allow css grid names to be used without hashing (scoped to the current module).

If youre wondering what our use case is: Previously we have used post-cssmodules, where the grid-areas are global, and thus they could be consumed by plugin authors to extend/modify our app in unplanned ways. (I agree its not pretty, but it works - so why not ^^ https://github.com/neos/neos-ui/issues/3450)

To me it seems that there are currently two workarounds to achieve this:

A: by using css variables

.container {
    --grid-areas: "left top right" "left main right";
    --grid-area-right: right;
    grid-template-areas: var(--grid-areas);
}

.gridRight {
    grid-area: var(--grid-area-right);
}

B: by using some global css file and compose from global: global.css

.my-css-grid {
    grid-template-areas: "left top right" "left main right";
}

.my-css-grid-right {
  grid-area: right;
}

my.module.css

.container {
    composes: my-css-grid from global;
}
.gridRight {
    composes: my-css-grid-right from global;
}

What do you say? Does it make sense as native feature?

[devongovett]

The main blocker is that we need a syntax to reference a global identifier. In selectors, there is :global(.foo), but this doesn't work for other identifiers like grid names, keyframe animation names, etc. The composes property uses foo from global, but this is kinda weird when declaring grid names or keyframes. Maybe we could have a function syntax like global(name) but idk. Ideally such a syntax would also be interoperable between different CSS modules implementations.

[devongovett]

Made a proposal for this: https://github.com/css-modules/css-modules/issues/390