getJSON generates wrong local class name when working with precss(postcssPresetEnv).

[jngbng]

problem

when working along with postcss-logical module,
postcss-modules generate wrong class name mapping JSON.

postcss-logical is part of postcss-preset-env with stage >= 2 and postcss-preset-env is part of precss.

version:

• "gulp-postcss": "8.0.0",
• "postcss-modules": "1.5.0",
• "precss": "4.0.0",
  • "postcss-preset-env": "6.7.0"

input:

gulpfile.js

gulp
  .src('css/broken.css')
  .pipe(postcss([
    postcssPresetEnv(),  // <--- part of precss that causes problem.
    postcssModules({
        getJSON: async function genJson(absoluteCssPath, json) {
          console.log(JSON.stringify(json, null, 2));
        },
     }),
  ]))
  .pipe(gulp.dest('build'))

css/broken.css

.block {
    color: gray;
}

output:

build/broken.css

._block_1higo_1 {
    color: gray;
}

stdout
expected

{
  "block": "_block_1higo_1"
}

but, actually got

{
  "block-top": "_block_1higo_1",
  "block-bottom": "_block_1higo_1"
}

workaround

Fast workarounds are:

a) to set stage 3 for postcss-preset-env

  .pipe(postcss([
    postcssPresetEnv({stage: 3}),  // <--- part of precss that causes problem.
    postcssModules(),
  ]))

b) disable 'postcssLogical' featrue

  .pipe(postcss([
    postcssPresetEnv({
      features: {
        'logical-properties-and-values': false,   // <--- causes problem.
      }
    }),
    postcssModules(),
  ]))

b) do not merge two plugins

  .pipe(postcss([postcssPresetEnv()])
  .pipe(postcssModules())