None of the Directives works with next js

[SarkarKurdish]

hey I have latest nextjs project this is my postcss file

module.exports = { plugins: { tailwindcss: {}, "postcss-flexbugs-fixes": {}, "postcss-preset-env": { autoprefixer: { flexbox: "no-2009", }, stage: 3, features: { "custom-properties": false, }, }, "postcss-rtlcss": {}, }, };

postcss-rtlcss works fine the only thing that's not working is the Directives for example i put this in my main css file

/ rtl:begin:ignore / body { background-color: blue; }

/ rtl:end:ignore /

but it seems the Directives don't work the background is blue in both rtl and ltr

[elchininet]

Hi @SarkarKurdish,

I think that you have misunderstood what that directive does. Take a look again at its section in the documentation and the examples provided. This plugin is not intended to remove any rule from your CSS.

That directive just ignores a rule or a declaration that should be flipped and it avoids creating the respective CSS for ltr and rtl (the rule or declaration will be the same in both directions). In your example background-color is not a declaration that will be flipped, so that directive doesn‘t do anything there.

If you want to declare background blue in ltr and background transparent in rtl, you can use the /*rtl:{value}*/ directive, e.g:

body {
  background: #blue /*rtl:transparent*/;
}

I pushed a small change to the nextjs-postcss-rtlcss-example project. Just execute this project and change the selector. you will see that the background of the testContainer element changes respectively.

Regards.

[SarkarKurdish]

Thanks for the response

I did what you have mentioned yet it didn't work

the background stays blue in both rtl and ltr please note the package works fine in every aspect expect for the Directives

[SarkarKurdish]

Thanks for the response

I did what you have mentioned yet it didn't work

the background stays blue in both rtl and ltr please note the package works fine in every aspect expect for the Directives

PS: I did copy the postcss file from your example still didn't work, i use SCSS btw can this be the problem?

[elchininet]

@SarkarKurdish,

It is relevant for the discussion that you are using SASS. If you test the example project which uses regular CSS, you will notice that it does work.

SASS treats comments in a different way than regular CSS. For comments placed outside the rules, you either need to remove the compressed mode or start the comment with /*!. But if the comment is placed inside a declaration, SASS will remove it completely from the output. To bypass this, you should use a SASS interpolation starting the comment with /*!:

body {
    background: blue #{"/*!rtl:transparent;*/"};
}

Regards.

[elchininet]

Hi @SarkarKurdish,

I have pushed a commit into the nextjs-postcss-rtlcss-example project showing how to put the comments in SASS. Check it out and let me know the results.

Regards.

[SarkarKurdish]

Thanks the issue resolved.

[elchininet]

Glad to know, @SarkarKurdish. Regards!