DISCUSSION: Make css grid area identifiers public again?

[mhsdesign]

Description

With 8.2 we switched to css grid
With #3366 (unreleased 8.3) the css grid identifiers declared here:

neos-ui/packages/neos-ui/src/Containers/style.module.css

Line 8 in e4080d6

grid-template-areas: 'primaryToolbar primaryToolbar primaryToolbar'

will be scoped to the css module (and the are name will obscurified)
thats why we use composition to apply the grid-area property:

neos-ui/packages/neos-ui/src/Containers/RightSideBar/style.module.css

Line 2 in e4080d6

composes: rightSidebar from '../style.module.css';

neos-ui/packages/neos-ui/src/Containers/style.module.css

Line 24 in e4080d6

.rightSidebar {

as proposed here: parcel-bundler/lightningcss#144 (comment)

Fyi, there is now an proposal in css-modules for global css grid identifier:

css-modules/css-modules#390

[Sebobo]

I had a similar issue in the media ui and when putting the areas and references into css variables, it works and keeps the names intact.

Which is actually even nicer for extensibility.

Example:

.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);
}

[mhsdesign]

nice trick ^^ (makes sense that you had the same problem as youre also using parcels lightning css under the hood?)

so yes im fine with implementing it like this.

otherwise we could also do:

some global css file:

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

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

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