[Bug] grid-template identifiers do not get transformed (with CSS modules) when var() is used

[mkrause]

See Playground:

.test {
  grid-template: "test" var(--foo);
  grid-template: "test" 1fr;
}

Results in:

.EgL3uq_test {
  grid-template: "test" var(--foo);
  grid-template: "EgL3uq_test" 1fr;
}

Note how this works as expected when 1fr is specified as size, but when var(--foo) is specified the template area name is left as a global identifier "test". This makes it impossible to use grid-template with var(), because the grid-area identifier will still be transformed, preventing the area from being assigned.

[danhorvath]

I experienced the same thing (also with css modules), currently I'm relying on css variables as a workaround.

Source:

.filterRow {
  --filter-row--filter-grid-area: filter;
  --filter-row--operator-grid-area: operator;
  --filter-row--condition-grid-area: condition;

  grid-template-columns: [var(--filter-row--filter-grid-area)] 1fr [var(--filter-row--operator-grid-area)] var(--sizing-300) [var(--filter-row--condition-grid-area)] 1fr;
}

.filter {
  grid-column: var(--filter-row--filter-grid-area);
}

Output:

.EgL3uq_filterRow {
  --filter-row--filter-grid-area: filter;
  --filter-row--operator-grid-area: operator;
  --filter-row--condition-grid-area: condition;
  grid-template-columns: [var(--filter-row--filter-grid-area) ] 1fr [var(--filter-row--operator-grid-area) ] var(--sizing-300) [var(--filter-row--condition-grid-area) ] 1fr;
}

.EgL3uq_filter {
  grid-column: var(--filter-row--filter-grid-area);
}

This works across files too, albeit stylelint and vscode report issues with the syntax.

[mkrause]

@danhorvath Another workaround is to disable identifier transformations for grid altogether using:

cssModules: {
  grid: false
},

[danhorvath]

thanks for the tip @mkrause! 🙏