search

FormidableLabs / radium

A toolchain for React component styling.
http://formidable.com/open-source/radium/
MIT License
7.39k stars 308 forks source link

Plugin to warn for known CSS browser incompatibilities #365

Open arush opened 9 years ago

arush commented 9 years ago

One of the great things about CSS in JS is we can avoid CSS misuse at development-time. Radium occupies a special spot in the development cycle since it is the place where all merged styles for a component can be tested against known CSS issues.

It is increasingly difficult for junior developers or even experienced developers to keep track of browser issues. IE box-sizing is one thing, but there are many lesser known issues with good browsers too,

example console warning during development: Safari does not support min/max-width on {flex:1} items within a flex-wrap container: [workaround](https://github.com/philipwalton/flexbugs#11-min-and-max-size-declarations-are-ignored-when-wrapping-flex-items)

This could be a killer feature against other React style modules, and help junior/stack developers contribute to frontend code without having to ask their frontend dev for help.

ianobermiller commented 9 years ago

Awesome idea!

ianobermiller commented 8 years ago

Is there a sizable set of such rules, and are they compiled anywhere? I still like this idea, but I don't remember enough to add these myself.

kumarharsh commented 8 years ago

wow, this would be really really useful!

arush commented 8 years ago

@ianobermiller a good place to start is flexbox, as it has the most browser inconsistencies yet is the defacto layout system of choice these days. here's a well-maintained list of all known flexbugs: https://github.com/philipwalton/flexbugs

ianobermiller commented 8 years ago

@rofrischmann This might make more sense as part of inline-style-prefixer.

robinweser commented 8 years ago

@arush @ianobermiller Actually I am working on a tool that achieves that. It's called inline-style-linter and while by now it only support just some basics as shorthand-longhand checks I am also working on browser compatibility and browser issues.

Should be ready in some days as I am done with data collection and just need to implement a nice interface. I will also provide a searchable CSS reference cheatsheet with every property included.

As I am done I will provide a radium plugin :P

arush commented 8 years ago

@rofrischmann wow, looking forward to this