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": [
        // 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"]