Missing styles with @media nesting (conflict with postcss-nested?)

[LFFATE]

So the problem:

Initial code:

.b-product-single {

  &__main {
    @media screen and (min-width: 991px) {
      display: grid;
      grid-template-columns: 1fr 250px;
      grid-column-gap: var(--large-margin);
    }
  }

  &__image-wrapper {
    text-align: right;
    overflow: hidden;

    img {
      max-width: 100%;
      height: auto;
      object-fit: scale-down;
    }
  }
}

results to by a postcss-nested plugin:

 @media screen and (min-width: 991px) {

  .b-product-single__main {
      display: grid;
      grid-template-columns: 1fr 250px;
      grid-column-gap: var(--large-margin)
  }

  .b-product-single__image-wrapper {
    text-align: right;
    overflow: hidden;
  }

  .b-product-single__image-wrapper img {
      max-width: 100%;
      height: auto;
      object-fit: scale-down;
    }
    }

Where .b-product-single__main just disappears after postcss-rtlcss.

If I replace initial code with stright result of postcss-nested I cannot see the problem.

My env:

node -v
v16.14.0

package.json:

    "autoprefixer": "^10.4.2",
    "cssnano": "^5.0.17",
    "postcss": "^8.4.6",
    "postcss-nested": "^5.0.6",
    "postcss-rtlcss": "^3.5.2",

    ...
   "postcss-loader": "^6.2.1",
   "webpack": "^5.65.0",
   "webpack-cli": "^4.9.2",

postcss.config.js:

const postcssRTLCSS = require('postcss-rtlcss')
const cssnano = require('cssnano')
const postcssNested = require('postcss-nested')

module.exports = (ctx) => {
  const isProduction = ctx.env === 'production'
  return {
    plugins: [
      postcssNested(),
      postcssRTLCSS({ mode: 'override'}),
      require('autoprefixer'),
      isProduction && cssnano(({
        preset: 'default',
      })),
    ]
  }
}

If I rollback to postcss-rtlcss@2 it works. So may be version 3.x has some conflicts with other postcss plugins? And another way to make it work:

.b-product-single {

  &__main {
    /* Is to write any rule */
   display: block;
    @media screen and (min-width: 991px) {
      display: grid;
      grid-template-columns: 1fr 250px;
      grid-column-gap: var(--large-margin);
    }
  }

In this way the code results to:

.b-product-single__main {
    display: block;
  }

  @media screen and (min-width: 991px) {

  .b-product-single__main {
      display: grid;
      grid-template-columns: 1fr 250px;
      grid-column-gap: var(--large-margin)
  }
    }

And a last way to make it work is to remove all trailing left-right specific rules:

&__main {
    @media screen and (min-width: 991px) {
      display: grid;
      grid-template-columns: 1fr 250px;
      grid-column-gap: var(--large-margin);
    }
  }

  &__image-wrapper {
    /* We can see a text-align: right; here, so remove it and see what happens: */
    /* text-align: right; */
    overflow: hidden;

    img {
      max-width: 100%;
      height: auto;
      object-fit: scale-down;
    }
  }

Result:

@media screen and (min-width: 991px) {

  .b-product-single__main {
      display: grid;
      grid-template-columns: 1fr 250px;
      grid-column-gap: var(--large-margin)
  }
    }

  .b-product-single__image-wrapper {
    /* text-align: right; */
    overflow: hidden;
  }

  .b-product-single__image-wrapper img {
      max-width: 100%;
      height: auto;
      object-fit: scale-down;
    }

Well .b-product-single__main doesn't disappears now. Magic.

There is no errors due to a build process. I tested it with webpack and rollup, so loaders and bundlers doesn't matters.

[elchininet]

Hi @LFFATE,

In old versions, there is no support for nested rules, so this is the difference between version 2 and version 3.

Could you create a small repo with a minimum reproducible example so I can look at the issue closer?

Regards

[LFFATE]

Could you create a small repo with a minimum reproducible example so I can look at the issue closer?

Yeah, I'll try as soon as possible but can't promise it will soon

[elchininet]

Perfect @LFFATE, when you have time, no pressure. It is just that it would be easier for me to check what is happening and fix it if I can reproduce it easily. Regards and thanks.

[LFFATE]

@elchininet Hello again. I created a repro repo https://github.com/LFFATE/postcss-rtlcss-issue-122-repro

To start it follow these steps:

• clone repo
• yarn
• yarn parcel src/index.html

css located at src/style.css postcss config located at postcss.config.js compiled css will be created at dist/index.*.css

[elchininet]

Thanks @LFFATE, I‘ll let you know when it is solved. Regards

[elchininet]

Hi @LFFATE, version 3.5.3 solves this issue. Regards and thanks for all the help.

[LFFATE]

@elchininet Great! Thank you!