CSS Modules and @nest

[Julie Wongbandue]

I've recently run into an issue where our cssModules scoped name does not get generated after @nest.

CSS written in src/Button/Button.css

.container {
  padding: .5rem;
}

.value {
  size: 1.5rem;
}

.primary {
  background-color: blue;
  @nest .container & .value {
    color: pink
  }
}

CSS expected

.Button__container__12nb-{padding:.5rem}
.Button__value__3i9_C{size:1.5rem}.Button__primary__3ReFs{background-color:#00f}
.Button__container__12nb- .Button__primary__3ReFs .Button__value__3i9_C{color:pink}

CSS returned

.Button__container__12nb-{padding:.5rem}
.Button__value__3i9_C{size:1.5rem}.Button__primary__3ReFs{background-color:#00f}
.container .Button__primary__3ReFs .value{color:pink}

Please see example repo here: https://github.com/juliewongbandue/nesting_demo

[Philip Bordallo]

@juliewongbandue this looks like it's actually an issue with https://github.com/egoist/rollup-plugin-postcss and how it's handling CSS Modules.

As a quick test, if you disable modules for rollup-plugin-postcss and add a separate postcss-modules in the plugins list,

postcss({
  extensions: ['.css'],
  extract: true,
  modules: false,
  minimize: true,
  autoModules: false,
  plugins: [
    nesting(),
    modules({
      generateScopedName: '[name]__[local]__[hash:base64:5]'
    })
  ]
})

you end up with the expected CSS:

.Button__container__12nb-{padding:.5rem}
.Button__value__3i9_C{size:1.5rem}
.Button__primary__3ReFs{background-color:#00f}
.Button__container__12nb- .Button__primary__3ReFs .Button__value__3i9_C{color:pink}

I would open an issue with rollup-plugin-postcss as the expectation is that rollup-plugin-postcss also generates a map of the module names so using postcss-modules directly isn't going to solve things completely.