Comments (8)
@danhayden Thanks for the report! I wasn't really convinced by this, but I found this CSS Tricks article explaining how border-radius
and -webkit-border-radius
act differently, so I definitely believe this.
It sounds like we need to ensure that the unprefixed versions come last. I think this might be most easily accomplished with a change to the auto-prefixer?
from aphrodite.
The vendor-prefix versions are not always the same as the final W3C compliant implementation.
Sometimes they can be buggy due to experimental, browser-specific code and may deviate from the specification.
from aphrodite.
Genuinely curious here. What's the problem with having the vendor-prefix version overwrite the non-prefix version? THe result is the same right? I'm probably missing something.
from aphrodite.
Seems that inline-style-prefixer generate the -prefixed
styles in the right order, also when values are Arrays
like in the following code, where the un-prefixed is the last.
{
// ...
display: ['-webkit-box', '-moz-box', '-ms-flexbox', '-webkit-flex', 'flex'],
//...
}
It's preferable to have the W3C implementation used when it's available, to help ensure consistency between all the browsers that support it.
Autoprefixer
Maybe this is for a separate issue, but take the opportunity to say that switch to autoprexier should be pretty useful, since allows to control the userAgent by queries provided by browserslist.
Seems that inline-style-prefixer don't handle browser versions using prefixAll
method.
Just saying this because I'm having generated styles with WebkitTransition
(for example) that is no more necessary.
from aphrodite.
I'm currently running into a similar issue with the cursor
rule.
export const canvas = {
backgroundColor: '#f5f5f5',
cursor: [
'default',
'-webkit-grab'
]
};
export default StyleSheet.create({
canvas
});
.canvas_1bt2tmf {
background-color: #f5f5f5;
cursor: -webkit-grab;
cursor: default;
}
In this case, I want webkit browsers to use the vendor-prefixed version of the rule, so I can make use of the grab cursor, but it does not look like the order I specify the rules in has any bearing on the generated CSS.
from aphrodite.
Hmm. It looks like this problem might have been fixed by v2.0.5 in inline-style-prefixer (which is coincidentally causing our tests to fail https://travis-ci.org/Khan/aphrodite/builds/194582952). In #123 we were trying to decide if this is worth a major version bump, because it might have broken behaviour for other people. Looks like inline-style-prefixer released this as a bugfix though, so maybe we shouldn't make a major version for this? I'm going to fix the tests and then the next time we release this will be fixed.
from aphrodite.
Hmmm... I'm not sure that I understand how this impacts things, but normally if you have to fix tests it means that other people will have to fix code (breaking change), unless you're shielding us from these changes in some way...
from aphrodite.
Looks like this was fixed with the release of version 1.2.0 👍
from aphrodite.
Related Issues (20)
- Typescript typings don't include flushToStyleTag
- Cant get height of Aphrodite element HOT 1
- Add paddingHorizontal, paddingVertical, etc
- Doing a descendant style with aphrodite
- Make object types explicitly inexact to support projects using flow's exact_by_default option
- Support array for css definition
- Garbage collection/stale styles
- About the type definition issue on StyleDeclarationMap HOT 2
- Option to only use insertRule in certain environments
- Update and expose flow? HOT 2
- Stylesheet.create does not support strict TypeScript type checking or intellisense HOT 3
- Is Aphrodite still actively maintained HOT 6
- How to load ESM from a CDN? (development without build) HOT 1
- how can i do this compatible?
- Replacing componentWillReceiveProps react lifecycle method with componentDidUpdate HOT 1
- how to prevent aphrodite from adding !important? HOT 2
- Handling multiple selectors
- how to target classname in aphrodite HOT 2
- How do I make the static code of css exist in the rendered style?
- Aphrodite support for CSP
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 aphrodite.