vkalinichev / postcss-rtl Goto Github PK
View Code? Open in Web Editor NEWPostCSS plugin for RTL-adaptivity
License: MIT License
PostCSS plugin for RTL-adaptivity
License: MIT License
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?
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?
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).
Comments are remove automatically because of this Line.
Can you add a removeComments option?
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.
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
it can't handle nested css .
...
"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
<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.
Is there a roadmap/timeplan for the rtlcss-directives?
I use css-reset-and-normalize-sass
and for body
was disappeared style margin: 0;
, when i plugged postcss-rtl
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'
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:
.fl { float: left; _display: inline; }
.fr { float: right; _display: inline; }
.fn { float: none; }
.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.
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
}
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 {
...
}
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.
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
npm install
npm start
Revert the changes or default options to an empty object if undefined.
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.
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
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 ~
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.
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.
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 .
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
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
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
/* 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
}
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
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.
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
}
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.
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?
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.
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_***; }
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?
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.
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.
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': {},
},
};
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;
}
}
}
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 :
/*! rlt:...*/
should be considered as valid directive.
This cause problem when used in combination of CSSNano where /*! ... */
is considered ignored comment.
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!
hi please add auto rename support in options(for global usage) and directives (for selector level usage)
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
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.
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.