Closed juagarc4 closed 2 months ago
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.
.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; } }
.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; }
.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; }
https://preset-env.cssdb.org/playground/#JTdCJTIyc291cmNlJTIyJTNBJTIyLmxheW91dC1idWlsZGVyJTIwJTdCJTVDbiUyMCUyMHBhZGRpbmclM0ElMjAxLjVlbSUyMDEuNWVtJTIwMC41ZW0lM0IlNUNuJTIwJTIwYm9yZGVyJTNBJTIwM3B4JTIwc29saWQlMjAlMjMyZjkxZGElM0IlNUNuJTIwJTIwYmFja2dyb3VuZC1jb2xvciUzQSUyMCUyM2ZmZiUzQiU1Q24lMjAlMjAlNUNuJTIwJTIwJTI2X19hZGQtc2VjdGlvbiUyMCU3QiU1Q24lMjAlMjAlMjB3aWR0aCUzQSUyMDEwMCUyNSUzQiU1Q24lMjAlMjAlMjBtYXJnaW4tYm90dG9tJTNBJTIwMS41ZW0lM0IlNUNuJTIwJTIwJTIwYWRkaW5nJTNBJTIwMS41ZW0lMjAwJTNCJTVDbiUyMCUyMCUyMHRleHQtYWxpZ24lM0ElMjBjZW50ZXIlM0IlNUNuJTIwJTIwJTIwb3V0bGluZSUzQSUyMDJweCUyMGRhc2hlZCUyMCUyMzk3OTc5NyUzQiU1Q24lMjAlMjAlMjBiYWNrZ3JvdW5kLWNvbG9yJTNBJTIwJTIzZjdmN2Y3JTNCJTVDbiUyMCUyMCU3RCU1Q24lN0QlMjIlMkMlMjJjb25maWclMjIlM0ElN0IlMjJicm93c2VycyUyMiUzQSU1QiUyMiUzRSUyMDAuMiUyNSUyMGFuZCUyMG5vdCUyMGRlYWQlMjIlNUQlMkMlMjJtaW5pbXVtVmVuZG9ySW1wbGVtZW50YXRpb25zJTIyJTNBMCUyQyUyMnN0YWdlJTIyJTNBMiUyQyUyMmxvZ2ljYWwlMjIlM0ElN0IlMjJpbmxpbmVEaXJlY3Rpb24lMjIlM0ElMjJsZWZ0LXRvLXJpZ2h0JTIyJTJDJTIyYmxvY2tEaXJlY3Rpb24lMjIlM0ElMjJ0b3AtdG8tYm90dG9tJTIyJTdEJTJDJTIyZmVhdHVyZXMlMjIlM0ElN0IlMjJuZXN0aW5nLXJ1bGVzJTIyJTNBJTVCJTIyYXV0byUyMiUyQyU3QiUyMmVkaXRpb24lMjIlM0ElMjIyMDI0LTAyJTIyJTdEJTVEJTdEJTJDJTIycHJlc2VydmUlMjIlM0F0cnVlJTdEJTdE
npx @csstools/csstools-cli <plugin-name> minimal-example.css
N/A
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; }); }); };
// 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: {}} : {}) }, }
PostCSS Preset Env
9.6.0
macOS
18.20.4 and 20.15.1
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:
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
Would you like to open a PR for this bug?