1

Does anyone know how to configure stylelint for react native (typescript) and StyleSheet?

src/sample.tsx

import React from "react";
import { StyleSheet, Text, View } from "react-native";

const App = () => (
  <View style={styles.container}>
    <Text style={styles.title}>React Native</Text>
  </View>
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 24,
    backgroundColor: "#eaeaea"
  },
  title: {
    marginTop: 16,
    paddingVertical: 8,
    borderWidth: 4,
    borderColor: "#20232a",
    borderRadius: 6,
    backgroundColor: "#61dafb",
    color: "#20232a",
    textAlign: "center",
    fontSize: 30,
    fontWeight: "bold"
  },
  example: {
    unknown: "property"
  }
});

export default App;

.stylelintrc.js

module.exports = {
  "plugins": ["stylelint-react-native"],
  "rules": {
    "react-native/css-property-no-unknown": true
  }
}

When I run stylelint '/src/**/.tsx'*, I got error like "you need use postcss". Ok, I found this @stylelint/postcss-css-in-js package, but no matter how I connect it, nothing works.

In the best case, the command runs without errors, although I added a property of which does not exist.

PS. stylelint version - 14, react native version - 0.66.4

MatthewP
  • 185
  • 1
  • 14

2 Answers2

1

You can use the @stylelint/postcss-css-in-js custom syntax.

test.ts

import React from "react";
import { StyleSheet, Text, View } from "react-native";

const App = () => (
  <View style={styles.container}>
    <Text style={styles.title}>React Native</Text>
  </View>
);

const styles = StyleSheet.create({
  container: {
    color: "#eaeae",
    background: "linear-gradient(#e66465, #9198e5)",
  },
  title: {
    fontWeight: "bold",
  },
});

export default App;

.stylelintrc.json (with three example rules turned on)

{
  "customSyntax": "@stylelint/postcss-css-in-js",
  "rules": {
    "color-no-invalid-hex": true,
    "font-weight-notation": "numeric",
    "function-disallowed-list": ["linear-gradient"]
  }
}

output

% npx stylelint "test.ts"

test.ts
 12:12  ✖  Unexpected invalid hex color "#eaeae"  color-no-invalid-hex    
 13:17  ✖  Unexpected function "linear-gradient"  function-disallowed-list
 16:17  ✖  Expected numeric font-weight notation  font-weight-notation

You may want to use both Stylelint and the eslint-plugin-react-native plugin for ESLint together as they are complementary tools that do different things.

The ESLint plugin has 7 rules. Only one of which, sort-styles, overlaps with Stylelint. The other rules don't touch on the actual CSS inside your object notation. So you can use that plugin and then use Stylelint to spot possible errors and limit what language features are used in your CSS.

I found this @stylelint/postcss-css-in-js package, but no matter how I connect it, nothing works

You may have encountered a bug in the package. It is a monolithic package that tries to support every flavour of CSS-in-JS. It'll likely be deprecated in the future in favour of leaner packages dedicated to specific CSS-in-JS libraries, the first of which is postcss-lit.

jeddy3
  • 3,451
  • 1
  • 12
  • 21
-2

That's what happens when you recycle. In fact, we shouldn't use the stylelint, because we have a typescript. Just use eslint for this. For example: https://github.com/Intellicode/eslint-plugin-react-native

MatthewP
  • 185
  • 1
  • 14