search

vkalinichev / postcss-rtl

PostCSS plugin for RTL-adaptivity
MIT License
171 stars 33 forks source link

Class names with Left/Right #48

Open mharsat opened 5 years ago

mharsat commented 5 years ago

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_***; }
vkalinichev commented 5 years ago

I can't reproduce it, and add test for you case.

If the issue is still actual, can you provide your postcss/webpack-config?

mharsat commented 5 years ago

We are using rollup with with rollup-plugin-postcss for postcss with the following configuration

  postcss({
    minimize: {
      reduceIdents: false,
      safe: true,
    },
    modules: {
      generateScopedName: IS_DEV_ENV ? '[name]__[local]___[hash:base64:5]' : '[hash:base64:5]',
    },
    extract: 'dist/styles.min.css',
    plugins: [
      postcssExclude({
        filter: ['**/*.global.scss', '**/inline-toolbar.scss'],
        plugins: [postcssRTL()],
      }),
      postcssURL({
        url: asset => asset.url.replace('../', '/statics/'),
      }),
    ],
  })