Linting

Since Kuma UI's styled and css APIs are similar to the ones from Emotion or styled-components, you can use Stylelint (opens in a new tab) with postcss-styled-syntax (opens in a new tab) to lint your styles in those functions.

For example, if you want to use Stylelint with config stylelint-config-standard (opens in a new tab) and stylelint-config-recess-order (opens in a new tab), you can install the following packages:

npm install -D stylelint postcss-styled-syntax stylelint-config-standard stylelint-config-recess-order

Then, create a .stylelintrc.cjs file in the root of your project with the following content:

/**
 * @type {import ("stylelint").Config}
 */
module.exports = {
  extends: ["stylelint-config-standard", "stylelint-config-recess-order"],
  customSyntax: "postcss-styled-syntax",
  rules: {
    "function-no-unknown": [
      true,
      {
        // In Kuma UI, you can use theme tokens with `t` css function.
        ignoreFunctions: ["t"],
      },
    ],
  },
};

Now you can lint your styles with the following command:

npx stylelint **/*.tsx

For more information, refer to the Stylelint documentation (opens in a new tab).

If you want to lint your styles with lint:styles script, you can add the following script to your package.json file:

{
  "scripts": {
    "lint:styles": "stylelint **/*.tsx"
  }
}

If you are using Visual Studio Code and stylelint extension (opens in a new tab), you can add the following settings to your .vscode/settings.json file to lint your styles in .tsx files:

{
  "stylelint.validate": ["typescript", "typescriptreact"]
}