Directives in CSS Not Working

[bmoellers]

So I hooked this up in to a next JS implementation. This requires a couple steps but it is definitely building the CSS for both RTL and LTR together. Running I have it able to flip between the two styles based on language but what I am not able to do is keep the check mark as it should.

So we sort of draw the checkmark using some code to use the borders:

  &::after {
    position: absolute;
    top: 5px;
    left: 3px;
    content: none;
    display: flex;
    height: 4px;
    width: 9px;
    border-left: 2px solid;
    border-bottom: 2px solid;
    border-color: blue;
    transform: rotate(-45deg);
  }

But this results in a flipped check mark in the generated CSS.

This generates the following CSS:

    .verification-warning form input::after {
      position: absolute;
      top: 5px;
      content: none;
      display: flex;
      height: 4px;
      width: 9px; }
    [dir] .verification-warning form input::after {
      border-bottom: 2px solid;
      border-color: #0072CE; }
    [dir=ltr] .verification-warning form input::after {
  left: 3px;
  border-left: 2px solid;
  transform: rotate(-45deg); }
    [dir=rtl] .verification-warning form input::after {
      right: 3px;
      border-right: 2px solid;
      transform: rotate(45deg); }

So I know that either 1) I want the plug in to leave it alone to see what happens or 2) I want the transform to be transform: rotate(-45deg) scaleX(-1); through testing.

So I tried this:

/* rtl:begin:ignore */
      &::after {
        position: absolute;
        top: 5px;
        left: 3px;
        content: none;
        display: flex;
        height: 4px;
        width: 9px;
        border-left: 2px solid;
        border-bottom: 2px solid;
        border-color: $ps-blue;
        transform: rotate(-45deg);
      }
/* rtl:end:ignore */

Deleted the generated CSS so it would regenerate and it is the same as it was above.

Then I tried this:

      &::after {
        position: absolute;
        top: 5px;
        left: 3px;
        content: none;
        display: flex;
        height: 4px;
        width: 9px;
        border-left: 2px solid;
        border-bottom: 2px solid;
        border-color: $ps-blue;
        transform: rotate(-45deg) /* rtl: rotate(-45deg) scaleX(-1) */;
      }

Still it does not generate any different output.

Am I missing something?

My postcss.config.js file that next.js uses for its webpack is this:

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

[bmoellers]

Just a note added:

    'postcss-rtl': {
      removeComments: false,
    },

And there are no comments in the file as well.

[fabercancio]

Hi @bmoellers did you try to remove postcss-rtl from the list and check that the comments are not stripped out by another plugin? I tested and the flip is ignored using the directives:

https://runkit.com/embed/vp0al7am9mmj

[Brian Gonzalez]

@bmoellers I know this is late, but I was just dealing with the same problem.

If you're using SASS, you need to use SASS' interpolation syntax, according to the RTLCSS page: https://rtlcss.com/learn/usage-guide/value-directives/#tip

For example:
transform: rotate(-45deg) #{"/* rtl: rotate(-45deg) scaleX(-1) */"};

[Niko Savas]

Doing this correctly gets the comment to be parsed but it looks like the comment is also not being stripped? I have removeComments set to true