"&" selector right replaced but added at the end of the class definition

[juagarc4]

Bug description

Using the "&" selector in nested code works until it's used with underscores "&_", "&" or used with dashes "&-", "&--" . In that cases the symbol is right replaced but added at the end of the class rule.

Source CSS

.layout-builder { padding: 1.5em 1.5em 0.5em; border: 3px solid #2f91da; background-color: #fff;

&__add-section { width: 100%; margin-bottom: 1.5em; padding: 1.5em 0; text-align: center; outline: 2px dashed #979797; background-color: #f7f7f7; } }

Expected CSS

.layout-builder { padding: 1.5em 1.5em 0.5em; border: 3px solid #2f91da; background-color: #fff; } .layout-builder__add-section { width: 100%; margin-bottom: 1.5em; padding: 1.5em 0; text-align: center; outline: 2px dashed #979797; background-color: #f7f7f7; }

Actual CSS

.layout-builder { padding: 1.5em 1.5em 0.5em; border: 3px solid #2f91da; background-color: #fff; }

__add-section.layout-builder { width: 100%; margin-bottom: 1.5em; padding: 1.5em 0; text-align: center; outline: 2px dashed #979797; background-color: #f7f7f7; }

Playgound example

https://preset-env.cssdb.org/playground/#JTdCJTIyc291cmNlJTIyJTNBJTIyLmxheW91dC1idWlsZGVyJTIwJTdCJTVDbiUyMCUyMHBhZGRpbmclM0ElMjAxLjVlbSUyMDEuNWVtJTIwMC41ZW0lM0IlNUNuJTIwJTIwYm9yZGVyJTNBJTIwM3B4JTIwc29saWQlMjAlMjMyZjkxZGElM0IlNUNuJTIwJTIwYmFja2dyb3VuZC1jb2xvciUzQSUyMCUyM2ZmZiUzQiU1Q24lMjAlMjAlNUNuJTIwJTIwJTI2X19hZGQtc2VjdGlvbiUyMCU3QiU1Q24lMjAlMjAlMjB3aWR0aCUzQSUyMDEwMCUyNSUzQiU1Q24lMjAlMjAlMjBtYXJnaW4tYm90dG9tJTNBJTIwMS41ZW0lM0IlNUNuJTIwJTIwJTIwYWRkaW5nJTNBJTIwMS41ZW0lMjAwJTNCJTVDbiUyMCUyMCUyMHRleHQtYWxpZ24lM0ElMjBjZW50ZXIlM0IlNUNuJTIwJTIwJTIwb3V0bGluZSUzQSUyMDJweCUyMGRhc2hlZCUyMCUyMzk3OTc5NyUzQiU1Q24lMjAlMjAlMjBiYWNrZ3JvdW5kLWNvbG9yJTNBJTIwJTIzZjdmN2Y3JTNCJTVDbiUyMCUyMCU3RCU1Q24lN0QlMjIlMkMlMjJjb25maWclMjIlM0ElN0IlMjJicm93c2VycyUyMiUzQSU1QiUyMiUzRSUyMDAuMiUyNSUyMGFuZCUyMG5vdCUyMGRlYWQlMjIlNUQlMkMlMjJtaW5pbXVtVmVuZG9ySW1wbGVtZW50YXRpb25zJTIyJTNBMCUyQyUyMnN0YWdlJTIyJTNBMiUyQyUyMmxvZ2ljYWwlMjIlM0ElN0IlMjJpbmxpbmVEaXJlY3Rpb24lMjIlM0ElMjJsZWZ0LXRvLXJpZ2h0JTIyJTJDJTIyYmxvY2tEaXJlY3Rpb24lMjIlM0ElMjJ0b3AtdG8tYm90dG9tJTIyJTdEJTJDJTIyZmVhdHVyZXMlMjIlM0ElN0IlMjJuZXN0aW5nLXJ1bGVzJTIyJTNBJTVCJTIyYXV0byUyMiUyQyU3QiUyMmVkaXRpb24lMjIlM0ElMjIyMDI0LTAyJTIyJTdEJTVEJTdEJTJDJTIycHJlc2VydmUlMjIlM0F0cnVlJTdEJTdE

Does it happen with npx @csstools/csstools-cli <plugin-name> minimal-example.css?

N/A

Debug output

I couldn't get any output using the debug option. However I can put here, how the postcss().process() is called:

// compile.js
const log = require('./log');
const fs = require('fs');
const postcss = require('postcss');
const postcssImport = require('postcss-import');
const postcssHeader = require('postcss-header');
const postcssUrl = require('postcss-url');
const postcssPresetEnv = require('postcss-preset-env');
// cspell:ignore pxtorem
const postcssPixelsToRem = require('postcss-pxtorem');
const prettier = require('prettier');
const removeUnwantedComments = require('./remove-unwanted-comments');

module.exports = (filePath, callback) => {
// Transform the file.
fs.readFile(filePath, (err, css) => {

postcss([
  postcssImport({
    plugins: [
      removeUnwantedComments,
    ],
  }),
  postcssPresetEnv({
    stage: 2,
    preserve: false,
    autoprefixer: {
      cascade: false,
      grid: 'no-autoplace',
    },
    features: {
      'blank-pseudo-class': false,
      'focus-visible-pseudo-class': false,
      'focus-within-pseudo-class': false,
      'has-pseudo-class': false,
      'image-set-function': false,
      'prefers-color-scheme-query': false,
    }
  }),
  postcssPixelsToRem({
      propList: [
        '*',
        '!background-position',
        '!border',
        '!border-width',
        '!box-shadow',
        '!border-top*',
        '!border-right*',
        '!border-bottom*',
        '!border-left*',
        '!border-start*',
        '!border-end*',
        '!outline*',
      ],
      mediaQuery: true,
      minPixelValue: 3,
      // Prevent converting PX to REM for icon styles. These files have been
      // added to use the `postcssUrl` plugin, but aren't compatible with
      // `postcssPixelsToRem`.
      exclude: (filePath) => filePath.match(/core\/modules.*\.icons\..*\.pcss\.css$/)

  }),
  postcssHeader({
    header: `/*\n * DO NOT EDIT THIS FILE.\n * See the following change record for more information,\n * https://www.drupal.org/node/3084859\n * @preserve\n */\n`,
  }),
  postcssUrl({
    filter: '**/*.svg',
    url: 'inline',
    optimizeSvgEncode: true,
  })
])
.process(css, { from: filePath })
.then(async result =>  {
  const formattedFile = await prettier.format(result.css, {
    parser: 'css',
    printWidth: 10000,
  });
  callback(formattedFile);
})
.catch(error => {
  log(error);
  process.exitCode = 1;
});
});
};

Extra config

// postcss.config.js module.exports = { syntax: 'postcss-scss', plugins: { 'postcss-import': {}, 'postcss-mixins': {}, 'postcss-simple-vars': {}, 'postcss-define-function': { silent: true }, 'postcss-nested': {}, autoprefixer: {}, ...(process.env.NODE_ENV === 'production' ? {cssnano: {}} : {}) }, }

What plugin are you experiencing this issue on?

PostCSS Preset Env

Plugin version

9.6.0

What OS are you experiencing this on?

macOS

Node Version

18.20.4 and 20.15.1

Validations

• [X] Follow our Code of Conduct
• [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

Would you like to open a PR for this bug?

• [ ] I'm willing to open a PR