vkalinichev/postcss-rtl

PostCSS plugin for RTL-adaptivity

postcss-rtl's Issues

Remove [dir] selectors

Hello everyone! Thank for your library, but i can't it use for now 😟
For what purpose some styles transformed to selectors with leading [dir] or [dir=ltr]?
Is it possible to leave original style with appended rtl rules?

Because there is some issues, for example, i'm using MUI with build-in jss styles and rtl.
So, also I use some styles from Bootstrap and at my css there is structure like this:
bootstrap.css

fieldset {
  border: 0
}

mui styles

.Mui-some-class-for-fieldset {
  border: 1
}

so by css rules - last with more weight. Class has more weight than tag selector. All is ok aaand
after postcss-rtl I have:

[dir] fieldset {...}
and .Mui-some-class-for-fieldset {}

So it breakes everything because now [dir] fieldset has more weight than mui selector. How a developer can predict all of this during develop?

I think it's not good to reassign selector`s weights for default direction.

generating [dir] prefix when ignored

/* rtl:begin:ignore */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
}
/* rtl:end:ignore */

generates, which should not happen as we are ignoring stuff. It's only happens with margin, border, padding properties. Try this on Eric Meyer's reset.css (https://meyerweb.com/eric/tools/css/reset/)[https://meyerweb.com/eric/tools/css/reset/]

[dir] html, [dir] body, [dir] div, [dir] span, [dir] applet, [dir] object, [dir] iframe,
[dir] h1, [dir] h2, [dir] h3, [dir] h4, [dir] h5, [dir] h6, [dir] p, [dir] blockquote, [dir] pre,
[dir] a, [dir] abbr, [dir] acronym, [dir] address, [dir] big, [dir] cite, [dir] code,
[dir] del, [dir] dfn, [dir] em, [dir] img, [dir] ins, [dir] kbd, [dir] q, [dir] s, [dir] samp,
[dir] small, [dir] strike, [dir] strong, [dir] sub, [dir] sup, [dir] tt, [dir] var,
[dir] b, [dir] u, [dir] i, [dir] center,
[dir] dl, [dir] dt, [dir] dd, [dir] ol, [dir] ul, [dir] li,
[dir] fieldset, [dir] form, [dir] label, [dir] legend,
[dir] table, [dir] caption, [dir] tbody, [dir] tfoot, [dir] thead, [dir] tr, [dir] th, [dir] td,
[dir] article, [dir] aside, [dir] canvas, [dir] details, [dir] embed,
[dir] figure, [dir] figcaption, [dir] footer, [dir] header, [dir] hgroup,
[dir] menu, [dir] nav, [dir] output, [dir] ruby, [dir] section, [dir] summary,
[dir] time, [dir] mark, [dir] audio, [dir] video {
	margin:0;padding:0;border:0
}

inline special comments are not parsed

Work as expected(ignored by rtlcss):

.zero-left {
  left: 0 /*rtl:ignore*/;
}

not work and create two version of it([dir=ltr] and [dir=rtl]):

.zero-left {
  left: 0 /*!rtl:ignore*/;
}

I also print comment in handleIgnores function, and see that /*!rtl:ignore*/ not printed, that means it not parse, i think.

version ^1.6 fails on between.match

Hey, from version 1.6 and up our build is failing with this error.

You can see it fail in this project if you update postcss-rtl version in package json
https://github.com/wix-incubator/rich-content

rtl mis-parses border-color in a mixin

I'm using some polymer components in my electron app. We have some CSS that looks like:

paper-input {
   margin-top: -8px;
/* some other stuff */
  --paper-input-container-underline-focus: {
    border-color: white;
  }
/* more stuff */
}

After applying postcss-rtl it's split into two different paper-input blocks and the mixin is removed

paper-input {
  /* some stuff */
}
 paper-input {
  margin-top: -8px
   **border-color: white;**
}

The stray border-color goes away if I change that to be "color", but that isn't the right property for the job. If I put multiple properties alongside the border-color then just the border-color gets split out and the other properties remain inside the mixin.

I'm currently using rtl:ignore as a workaround since the styling is independent of direction, but someone else may have a different experience.

/*! rtl:ignore */ should work as well

/*! rlt:...*/ should be considered as valid directive.

This cause problem when used in combination of CSSNano where /*! ... */ is considered ignored comment.

Support scaleX

Our team noticed that this doesn't convert the scaleX property. Example:

.foo {
  transform: scaleX(1);
}

We'd expect

[dir="ltr"] .foo {
  transform: scaleX(1);
}

[dir="rtl"] .foo {
  transform: scaleX(-1);
}

The specific use case is that we are flipping select icons with a .is-bidi flag so they change direction in RTL mode.

problem with nested css

it can't handle nested css .

incorrect property value generated with !important keyword.

I found that properties with !important is generating [dir=rtl] rule with !important !important which is not expected.

Affected version : 0.5.9

test script:

const rtl = require('postcss-rtl');
const postcss = require('postcss');

const css = '.test{margin-left:0 !important;padding-left:0 !important}';
const rtlcss = require('rtlcss');
console.log('rtlcss', rtlcss.process(css));
const processor = postcss([rtl()]);
processor.process(css)
    .then((result) => console.log('postcss-rtl', result.css));

Input

.test{margin-left:0 !important;padding-left:0 !important}

Output of rtlcss ( expected output ):

.test{margin-right:0 !important;padding-right:0 !important}

Output of postcss + postcss-rtl:

[dir=ltr] .test {
    margin-left:0 !important;
    padding-left:0 !important
}
[dir=rtl] .test {
    margin-right:0 !important !important;
    padding-right:0 !important !important
}

doesn't work with tailwind

This plugin is not process tailwind classes. I'm importing tailwind in my css like that.

@import 'tailwindcss/base'; /*https://github.com/tailwindcss/tailwindcss/blob/master/base.css */
@import 'tailwindcss/components'; 
@import 'tailwindcss/utilities';
@import 'tailwindcss/screens';

These imports are using tailwind's @tailwind directive under the hood. I'm also using @fullhuman/postcss-purgecss in my project and it is process unused styles including tailwind ones.

@screen directives are working. Source code:

/* https://tailwindcss.com/docs/functions-and-directives/#screen */
@screen md {
  header {
    margin-left: 60px;
  }
}

Generated code:

@media (min-width: 568px) {
  [dir='rtl'] header {
    margin-left: 60px !important;
  }
}

Half Workaround: If i replace these imports with compiled ones it is works.

@import 'tailwindcss/dist/base'; /* https://github.com/tailwindcss/tailwindcss/blob/master/base.css */
@import 'tailwindcss/dist/components'; 
@import 'tailwindcss/dist/utilities';
@import 'tailwindcss/screens'; /* no compiled version */

But this is breaks my custom tailwind config.

Class names with Left/Right

Class names in which the name contains the words left or right are translated in the following manner:

Input:

.arrowLeft {
  margin-right: -3px;
}

Output:

[dir=ltr] :export {
  alignLeft: ***_marginRight_***; }

[dir=rtl] :export{
  alignLeft: ***_marginLeft_***; }

Feature request: Ignore symmetric values

When generating ltr/rtl variants of values that are mirror-symmetrical, postcss-rtl actually creates values that are identical for both versions and therefor add unecessary code to the css file.

For example:

.a {
  padding-left: 2px;
  padding-right: 2px;
}

Is transformed into

[dir=ltr] .a {
  padding-left: 2px;
  padding-right: 2px;
}

[dir=rtl] .a {
  padding-right: 2px;
  padding-left: 2px;
}

This could stay the way it is and not add more code.

less-plugin-auto-rtl jenkins failure.

Hi,
less-plugin-auto-rtl plugin fails in jenkins with unexpected token error. Is there an expectation for the node to be of a particular version in jenkins for the plugin to install/run?

�[31mSyntaxError:

Unexpected token ...�[39m�[31m in �[39m/data/jenkins/workspace/xxxx/node_modules/less-plugin-auto-rtl/lib/index.js�[90m on line 1, column 25:�[39m
[0m�[0m

npm ERR! node v4.4.4

npm ERR! npm v2.15.1

[bug] doesn't handle multiple animation correctly

Seems like if there is 2 animations given it doesn't correctly replace second animations name. animation: a 1s, b 1s; -> animation: a-ltr 1s, b 1s; notice how b is missing -ltr

.loader {
  animation: load6 1.7s infinite ease, spinner 1.7s infinite ease;
}

@keyframes load6 {
...
}

@keyframes spinner {
...
}

The output is

[dir=ltr] ._26uJz {
  animation: _1kAQA-ltr 1.7s ease infinite,c7O-P 1.7s ease infinite;
}

@keyframes _1kAQA-ltr {
...
}

@keyframes c7O-P-ltr {
...
}

Wrap @import to ignore

Hi,
I want to ignore a package that is importing from node_modules. What can i do about it?
I tried 2 ways:
First one:

/*rtl:begin:ignore*/
@import '~leaflet/dist/leaflet.css';
/*rtl:begin:ignore*/

And second one:

@import '~@assets/css/begin-rtl-ignore.css';
@import '~leaflet/dist/leaflet.css';
@import '~@assets/css/end-rtl-ignore.css';

But neither works! any solution?

Support option to generate a RTL or a LTR version only, rather than combined

It would be great if you could pass in some configuration which resulted in either LTR or RTL output -- rather than combined.

Have you thought about adding this feature?

postcss-rtl does not work with PostCSS v8+

PostCSS v8.1.1 with postcss-rtl v1.7.3 does not work for me.

Error: Uncaught TypeError: Cannot read property 'unprefixed' of undefined

Found in: node_modules/postcss-rtl/lib/keyframes.js:5

Code:

"use strict";

const postcss = require('postcss');

const unprefixed = postcss.vendor.unprefixed; // <--- HERE
// ...

Example Code:

const path = require('path')
const sass = require('node-sass')
const postcss = require('postcss')
const cssnano = require('cssnano')
const rtl = require('postcss-rtl')
const autoprefixer = require('autoprefixer')

const postCssCompiler = postcss([ autoprefixer ])
const postCssRtlCompiler = postcss([ rtl({}) ])

const nano = postcss([
  cssnano({
    preset: ['default', {
      mergeLonghand: false,
      convertValues: false,
      cssDeclarationSorter: false,
      reduceTransforms: false
    }]
  })
])
// ...

Please refer to Plugin Upgrade Guide: https://evilmartians.com/chronicles/postcss-8-plugin-migration

Add removeComments to options

Comments are remove automatically because of this Line.

Can you add a removeComments option?

I think this repo is dead

No new updates since Dec 20, 2016
If anyone clones this repo and carries on the work, please post link, new package name, etc here for all to find
Thanks

rtlcss auto rename support

hi please add auto rename support in options(for global usage) and directives (for selector level usage)

Could it be possible to generate a RTL or a LTR version based on the html lang attribute?

Although there is an onlyDirection option in .postcssrc.js for us to config, it can only receive ltr or rtl string explicitly. We couldn't dynamically pass a value based on the html lang attribute. My project set the lang attribute for html tag in runtime, but this plugin set the onlyDirection option when compiling, which happens before runtime. I don't quite sure if this is the reason why it is hard to generate a RTL or a LTR version dynamically.

In reset.css was removed styles

I use css-reset-and-normalize-sass and for body was disappeared style margin: 0;, when i plugged postcss-rtl

seems like keyframes are broken

great plugin! thanks!

seems like prepending html[dir] before each step of the keyframes is not valid

here's a codepen to illustrate the problem
http://codepen.io/orouz/pen/NRZxBN

i think duplicating the whole keyframes while adjusting the animation name (and keyframes' properties) to correspond to the direction is a possible solution. what do you think?

rtlcss-directives

Is there a roadmap/timeplan for the rtlcss-directives?

Add whitelist/blacklist for CSS properties

Thank you very much for this great plugin.

In some cases this plugin is buggy, for the moment we can fix most of it using the ignore comments.

Another, more cleaner way from my point of view would be a whitelist/blacklist for CSS properties to be passed via the options. In other words: this plugin generates tons of RTL / LTR rules that we don't need so give us the power what RTL declarations should be generated.

Only process declarations that include margin-right and border-right:

require('postcss-rtl')({
     whitelist: [
         'margin-right',
         'border-right'
     ]
});

Use the default preset but ignore padding at all:

require('postcss-rtl')({
     blacklist: [
         'padding'
     ]
});

Do you need a helpful hand? Let me know!

/* rtl:begin:ignore */ not working in build version of Vue App

Hello, Thanks for this awesomeness,
I was doing really great with your tool. However, when I build my vue app /* rtl:begin:ignore */ and /* rtl:end:ignore */ doesn't seems to work. It also get converted for RTL. This works in my developement environment.

I am using Vue CLI 3, here's my postcss.config.js

module.exports= {
  plugins: [
      require('tailwindcss'),
      require('autoprefixer'),
      require('postcss-rtl'),
  ]
}

My postcss version

"postcss-rtl": "^1.5.0",

Thanks ~

Bad release

No files found in package

Handle rules applyed to <html>

Is there a way to handle css rules applyed to the <html> element?

A common example is handling rules whose selector is a class added by Detectirz on the html element, such as .tablet.

Such a rule will be transformed in [dir="ltr"] .tablet ... which is not right

Cannot read property 'unprefixed' of undefined

...
"postcss": "^8.2.4",
"postcss-cli": "^8.3.1",
"postcss-rtl": "^1.7.3"
...

postcss.vendor has been removed in PostCSS 8

please support it

Feature request： Supported generates RTL or LTR only

Input ：

.foo {
    float: right;
    /* rtl:only text-algin:  right ;*/
}

LTR output:

[dir="ltr"]  .foo {
    float: right;
}

RTL output:

[dir="rtl"] .foo {
   float: left ;
   text-algin:  right 
}

Support for 4 value css in a css variable

I have css where the padding is set via a css variable, and that css variable contains the 4 padding values:

:root {
  --padding: 1rem 1rem 1.5rem 1.5rem;
}

.my-class {
  padding: var(--padding);
}

Is there any way to make this do the flip? I'd expect it to output something like this:

[dir=ltr] :root {
  --padding: 1rem 1rem 1.5rem 1.5rem;
}

[dir=rtl] :root {
  --padding: 1rem 1.5rem 1.5rem 1rem;
}

I don't think every 4 value css (is that what they're called) operates in the same order as padding (top right bottom left), so I can see why this would not be trivial. Maybe some more comment directives need to be supported, something like /* treat-like-padding */. I'd be down to submit a pull request for the work, but it definitely needs some discussion.

Feature request: block comments to define if the content is written RTL of LTR

Hello.

There is a global setting fromRTL that when true specifies that the whole source CSS was written as RTL.

Is it possible to add as pair of block comments like /* rtl:begin:ignore */ and /* rtl:end:ignore */ that should specify how part of the CSS is written?

Something like /* rtl:begin:fromRTL */, /* rtl:end:fromRTL */, /* rtl:begin:fromLTR */, and /* rtl:end:fromLTR */?

The use case: I'm helping in development of frontend framework (Quasar) that has the styles written in sass/styl, and compiles the internal styles together with the user styles in CSS and then applies postcss-rtl on the output.

We have some issues with users that would like to write their styles directly in RTL, but if they set fromRTL: true the framework style are processed as beeing writen RTL also.

quasarframework/quasar#6714

Colon in value breaks stylesheet

For example,

div { 
    background: url('http://placecage.com/400/400') 0 0 
}

transforms to

[dir=ltr] div {
    background: url('http://placecage.com/400/400') 0 0
} 

[dir=rtl] div { 
    background: url('http 
}

RTL-ed value is splitted by :

I wanna use this plugin with Laravel mix

Can you help me out with this i wanna compile a scss file than make two files from the first file both will be saved in diffrent paths .

Directives in CSS Not Working

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': {},
  },
};

Incorrectly generated css

Firstly, thanks for your work on this plugin!

I seem to be encountering a bit of an issue when trying to use it with a ruleset that includes float and _display properties:

Input

.fl { float: left;  _display: inline; }
.fr { float: right; _display: inline; }
.fn { float: none; }

Output

    .fl { _display: inline; }
    [dir=ltr] .fl { _float: left; }
    [dir=rtl] .fl { _float: right; }
    .fr { _display: inline; }
    [dir=ltr] .fr { _float: right; }
    [dir=rtl] .fr { _float: left; }
    [dir] .fn { float: none; }

Not sure what's going on yet, but I will try and at least open up a pr with a failing test case shortly.

Add support for Dir-Less with html:not([dir='rtl'])

It'd be handy to add support for Dir-Less selection. This can be accomplished as simply as changing "html[dir='ltr']" to "html:not([dir='rtl'])". This would select all elements that aren't wrapped in a dir='rtl', and so, support more browsers.

postcss-rtl does not support scss but rtlcss can handle.

If I use rtlcss, it can handle scss file, saying one scss file:

.selector-1 {
.selector-2 {
Color: black;
margin-left: 20px;
}
}

rtlcss will handle it successfully, but if I use postcss-rtl, it'll report below error:

$postcss -o temp/main.scss -c temp/postcss.config.js temp/app.scss

{ TypeError: Cannot set property 'parent' of undefined
at app.scss:1:1
....
postcssNode:
Rule {
raws:
{ before: '', between: ' ', semicolon: false, after: '\r\n' },
type: 'rule',
nodes: [ [Rule] ],
parent:
Root {
raws: [Object],
type: 'root',
nodes: [Array],
source: [Object],
lastEach: 2,
indexes: [Object] },
source: { start: [Object], input: [Input], end: [Object] },
selector: '.selector-1',
lastEach: 2,
indexes: {} } }

my postcss.config.js:

module.exports = {
plugins: [
require('postcss-rtl'),
require('postcss-import'),
require('postcss-cssnext'),
require('postcss-nested'),
require('postcss-apply'),
require('autoprefixer'),
]
}

If I remove the line :

require('postcss-rtl'),

everything works.

Thoughts?

Kent

Unnecessary duplication of CSS declarations and rules

This is extracted from your example, in the Readme:

Input

.foo {
    (...)
    font-size: 13px;
    border-color: lightgray;
    (...)

Output

.foo {
    font-size: 13px
}

[dir] .foo {
    border-color: lightgray
}

I ran a test with default options, and also saw this in my CSS:

Input

#cart-button.hidden {
	display: none !important;
}

Output

[dir=ltr] #cart-button.hidden {
	display: none !important;
}

[dir=rtl] #cart-button.hidden {
	display:none !important;
}

A single declaration block has been turned into two, and the display property has been duplicated in the second example, for no obvious reason. As far as I can see, it will only raise file size, potentially introduce confusion and specificity problems.

Some rules are left as, some rules are split (prefixed with [dir]) and some are duplicated as above. I find this behavior hard to understand and predict.

For example, I cannot understand why border-color in your example would be put in a different rule with a prefixed selector.

display is not a directional rule either, there is no need to move it to [rtl=...] declarations.

This behavior should be consistent and understandable, maybe documented, if there is a logic.

Ideally rules should only be duplicated when necessary, as much as possible (only margin-left/right, or compound margin declarations, etc. - not margin-top, or border-color, for example).

TypeError: Cannot set property 'parent' of undefined

This issue is happening always.

./src/css/main.css (/path/to/node_modules/css-loader/dist/cjs.js??ref--6-1!/path/to/node_modules/postcss-loader/src??postcss!./src/css/main.css)
Module build failed (from /path/to/node_modules/postcss-loader/src/index.js):
TypeError: Cannot set property 'parent' of undefined
    at /path/to/src/css/components/sidebar.css:1:1
    at Rule.removeChild (/path/to/node_modules/postcss-import/node_modules/postcss/lib/container.js:584:30)
    at /path/to/node_modules/postcss-rtl/lib/index.js:186:14
    at Array.forEach (<anonymous>)
    at /path/to/node_modules/postcss-rtl/lib/index.js:183:16
    at /path/to/node_modules/postcss-loader/node_modules/postcss/lib/container.js:135:18
    at Root.each (/path/to/node_modules/postcss-loader/node_modules/postcss/lib/container.js:101:16)
    at Root.walk (/path/to/node_modules/postcss-loader/node_modules/postcss/lib/container.js:131:17)
    at /path/to/node_modules/postcss-rtl/lib/index.js:147:7
    at LazyResult.run (/path/to/node_modules/postcss-loader/node_modules/postcss/lib/lazy-result.js:295:14)
    at LazyResult.asyncTick (/path/to/node_modules/postcss-loader/node_modules/postcss/lib/lazy-result.js:208:26)

My webpack config with postcss support is:

module.exports = {
 module: {
  rules: [
   {
    test: /\.css$/,
    use: [
     'style-loader',
     { loader: 'css-loader', options: { importLoaders: 1 } },
     {
      loader: 'postcss-loader',
      options: {
       ident: 'postcss',
       plugins: [
        require('postcss-import'),
        require('precss'),
        require('postcss-rtl'),
        require('tailwindcss'),
        require('autoprefixer'),
       ],
      },
     },
    ],
   },
  ],
 },
}

formwrapper.css is:

.forgot-password {
	@apply m-5 w-full px-16 py-6;
	max-width: 48rem;

	@screen mobile {
		@apply px-3 py-6;
	}

	.controls {
		@apply my-5 text-xs leading-snug;
	}

	.label {
		@screen tablet {
			& + .input {
				@apply mt-3;
			}
		}

		@screen mobile {
			@apply hidden;
		}
	}
}

TypeError: Cannot read property 'whitelist' of undefined

Summary

With the latest release of postcss-rtl v1.7.0 our application is unable to build. Reverting postcss-rtl to v1.6.0 resolves the issue. I believe the changes in this commit were non-passive. Options were previously optional and are now required.

Stack Trace

ERROR in ./node_modules/terra-dev-site/lib/loader-components/PropsTable.module.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/src/index.js):
TypeError: Cannot read property 'whitelist' of undefined
    at css (/Users/user-name/workspaces/react-on-rails/terra-application/node_modules/postcss-rtl/lib/index.js:37:37)
    at LazyResult.run (/Users/user-name/workspaces/react-on-rails/terra-application/node_modules/postcss/lib/lazy-result.js:295:14)
    at LazyResult.asyncTick (/Users/user-name/workspaces/react-on-rails/terra-application/node_modules/postcss/lib/lazy-result.js:208:26)
    at /Users/user-name/workspaces/react-on-rails/terra-application/node_modules/postcss/lib/lazy-result.js:250:14
    at new Promise (<anonymous>)
    at LazyResult.async (/Users/user-name/workspaces/react-on-rails/terra-application/node_modules/postcss/lib/lazy-result.js:246:23)
    at LazyResult.then (/Users/user-name/workspaces/react-on-rails/terra-application/node_modules/postcss/lib/lazy-result.js:127:17)
    at Promise.resolve.then.then (/Users/user-name/workspaces/react-on-rails/terra-application/node_modules/postcss-loader/src/index.js:142:8)
    at runLoaders (/Users/user-name/workspaces/react-on-rails/terra-application/node_modules/webpack/lib/NormalModule.js:316:20)
    at /Users/user-name/workspaces/react-on-rails/terra-application/node_modules/loader-runner/lib/LoaderRunner.js:367:11
    at /Users/user-name/workspaces/react-on-rails/terra-application/node_modules/loader-runner/lib/LoaderRunner.js:233:18
    at context.callback (/Users/user-name/workspaces/react-on-rails/terra-application/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at Promise.resolve.then.then.catch (/Users/user-name/workspaces/react-on-rails/terra-application/node_modules/postcss-loader/src/index.js:208:9)
 @ ./node_modules/terra-dev-site/lib/loader-components/_PropsTable.js 14:47-82
 @ ./src/slide-panel-manager/SlidePanelManager.jsx?dev-site-props-table
 @ ./src/terra-dev-site/doc/application/reference.1/components/SlidePanelManager.doc.mdx
 @ ./dev-site-config/build/contentConfig.js
 @ ./dev-site-config/build/siteConfig.js
 @ ./node_modules/terra-dev-site/lib/TerraDevSite.js

Reproduction Steps

1. Clone this project: https://github.com/cerner/terra-application
2. Run npm install
3. Run npm start
4. Observe the postcss-rtl error thrown

Possible Solution

Revert the changes or default options to an empty object if undefined.

PostCSS-RTL + Angular Encapsulated Styles

The [dir] attribute prefix that postcss-rtl adds is being suffixed with the _ngcontent-X selector.

Current output
[dir][_ngcontent-c1] .make-request-container[_ngcontent-c1] .category[_ngcontent-c1]

Expected Output
[dir] .make-request-container[_ngcontent-c1] .category[_ngcontent-c1]

I'm importing postcss-rtl into my webpack config, and calling it as last plugin of the 'postcss-loader'

when use with /deep/, some styles are missing

<style lang="scss" scoped>
p,
h2,
h3 {
  margin: 0;
  padding: 0;
}
/deep/ .form-dialog {
  width: 720px;
  box-shadow: 2px 2px 16px rgba(166, 168, 170, 0.46);
  border-radius: 8px;
  .vi-dialog__header {
    position: relative;
    background-color: #0a1e39;
    background-image: url("~src/assets/images/new-task/form-dialog-header-bg.png");
    background-size: 100%;
    border-radius: 8px 8px 0 0;
    padding: 32px 0 24px;
  }
 ...

After building, we found that the style of class “vi-dialog__header” was not existing.

Incorrect rules order

For example,

div {
    background: linear-gradient(to right, #c8c8c8 15.5%, transparent 15.5%) repeat-x;
    background-size: 4.16667% 4px
}

transforms to

[dir] span {
    background-size: 4.16667% 4px
} 

[dir=ltr] span {
    background: linear-gradient(to right, #c8c8c8 15.5%, transparent 15.5%) repeat-x
} 

[dir=rtl] span {
    background: linear-gradient(to left, #c8c8c8 15.5%, transparent 15.5%) repeat-x
}

So, background property overrides background-size value.

Bug is similar to the csso problem with structural optimizations css/csso#143

Add blacklist for CSS files

The blacklist option just allowed CSS properties how can I add CSS files?

In my case, I install leaflet on my project but postcss-rtl convert all leaflet CSS to RTL and all the things brake, it's must be a way to fix this problem.

question: why do i need to use this plugin (which uses rtlcss under the hood) instead rtlcss itself, when rtlcss is working with postcss out of the box?

first of all, thanks for this plugin. I understand how hard it can be to maintain oss project. that said, im here not to blame but clear out some confusion.

I looked into postcss plugins list and there are two rtl related packages: postcss-rtl (this one) and rtlcss. it confuses a bit. then i figured as well that this plugin uses rtlcss under the hood. After reading rtlcss's usage instructions its clear you can use rtlcss as ordinary postcss plugin:

var result = postcss().use(rtlcss([options , plugins]))
                      .use(autoprefixer())
                      .process(css);

My question is: why do i need to use this plugin over vanilla rtlcss itself, when rtlcss is working with postcss out of the box?

PS. After some digging, it seems like rtlcss flips your css completely, while postcss-rtl outputs both ltr and rtl layouts. is it a reason and the only differencse?