Using stylelint to lint known properties

[kristerkari]

I have been experimenting with the idea of using stylelint to verify that you can only use the CSS properties that css-to-react-native supports, like the standard stylelint rule https://github.com/stylelint/stylelint/tree/master/lib/rules/property-no-unknown.

I have though of creating a couple of tools to help with this.

First thing I was thinking of would be to create a new repo that would list all properties that css-to-react-native supports. The same idea as https://github.com/betit/known-css-properties, but with a simpler implementation. Those props could then be updated whenever there are new properties supported or old ones deprecated.

Next thing would be to create a stylelint plugin, e.g. react-native/no-unknown-css-properties. The rule would clearly state that it is meant to be used with tools that use this CSS parser.

There could also be a rule called react-native/no-unknown-style-properties, which would only allow properties that are supported by React Native by default.

What do you think @jacobp100 @mxstbr ?

[jacobp100]

So a separate package that lints? I'd be down with that. If you manage to set up something, let me know and I can help out!

[kristerkari]

I have the stylelint plugin almost ready. I'm mainly just wondering how to structure the project(s) and what kind of naming to use.

I'll let you know as soon as I have something out there.

[mxstbr]

This would be great to add to https://github.com/styled-components/stylelint-config-styled-components!

[kristerkari]

@mxstbr It's probably better to create a separate stylelint config for React Native, as the stylelint plugin that I'm creating only checks for React Native specific CSS properties.

[kristerkari]

Here is the repo with known React Native styling properties, which I plan to use in the styling plugin:
https://github.com/kristerkari/react-native-known-styling-properties

[mxstbr]

@kristerkari hmm yeah, I guess that makes sense—so folks would extend from both stylelint-config-styled-components and stylelint-config-styled-components-native? I like that.

If you create that and it works well I'd love to make it official, move it to the s-c org and promote it! /cc @emilgoldsmith @ismay

[emilgoldsmith]

Sounds cool :)

[ghost]

Yeah sounds good 👌

[kristerkari]

Stylelint plugin (or plugin pack) is now out:
stylelint-react-native

This is the rule that is compatible with styled-components:
css-property-no-unknown

This is how it looks with regular (S)CSS in my React Native project:

[kristerkari]

Here's a screenshot using styled-components:

[kristerkari]

I had a small bug in my screenshots, display is actually supported by RN. :) But that's now fixed.

[jacobp100]

What we could do as well is check units. For example, we allow percentages for border widths in case RN adds support for these, but they aren’t yet supported.

[kristerkari]

@jacobp100 I was thinking that there could be a rule that checks for values, but I haven't had time to look at that yet. If you have ideas, you can open a new issue here: https://github.com/kristerkari/stylelint-react-native

[jacobp100]

Is this issue resolved?

[kristerkari]

Yes, it is :)