Comments (5)
I'll try to fix it in the next release.
For now you can use this workaround:
div {
background: linear-gradient(to right, #c8c8c8 15.5%, transparent 15.5%) repeat-x;
}
[dir] div {
background-size: 4.16667% 4px
}
Thanks for the report!
from postcss-rtl.
@fabercancio -- totally understand, thanks for responding!
from postcss-rtl.
Could you please fix this asap? I have a similar issue with background-image... see: teaser.css
from postcss-rtl.
I also encountered a similar issue today. I have some styles that result in the following styles declarations (we have duplicate declarations for background-image
due to how we share and extend styles in our codebase):
.gradientBackground {
background-image: linear-gradient(to right, black 0%, white 50%, black 100%);
height: 100%;
width: 100%;
background-image: var(--brand-radial-gradient);
}
After going through Post CSS RTL, the following is output in our CSS files. The order of the style declarations that's being output is not what I would expect based on the input, and so the first background-image styling is being applied as opposed to the second. What I would expect here is that both declarations for background-image
would end up in .dir-ltr.gradientBackground
in the same order that they appear in the source CSS.
.dir.gradientBackground {
height: 100%;
width: 100%;
background-image: var(--brand-radial-gradient);
}
.dir-ltr.gradientBackground {
background-image: linear-gradient(to right, black 0%, white 50%, black 100%);
}
from postcss-rtl.
Unfortunately, this library is no longer maintained. As a workaround, if you can modify manually the CSS rules, you can add the rtl:ignore
directive to each declaration:
https://runkit.com/embed/7ywx6ed18q7j
from postcss-rtl.
Related Issues (20)
- Feature request: Supported generates RTL or LTR only HOT 1
- /* rtl:begin:ignore */ not working in build version of Vue App HOT 1
- Feature request: Ignore symmetric values
- doesn't work with tailwind HOT 1
- Support for 4 value css in a css variable HOT 1
- TypeError: Cannot set property 'parent' of undefined HOT 3
- TypeError: Cannot read property 'whitelist' of undefined HOT 1
- version ^1.6 fails on between.match HOT 1
- Add support for Dir-Less with html:not([dir='rtl']) HOT 2
- [bug] doesn't handle multiple animation correctly HOT 2
- Add blacklist for CSS files HOT 2
- Remove [dir] selectors HOT 30
- Directives in CSS Not Working HOT 4
- Feature request: block comments to define if the content is written RTL of LTR
- postcss-rtl does not support scss but rtlcss can handle. HOT 2
- postcss-rtl does not work with PostCSS v8+ HOT 2
- I think this repo is dead HOT 1
- when use with /deep/, some styles are missing HOT 1
- Cannot read property 'unprefixed' of undefined HOT 5
- Could it be possible to generate a RTL or a LTR version based on the html lang attribute? HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from postcss-rtl.