or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

index.md
tile.json

tessl/npm-stylelint-config-taro-rn

Shareable stylelint config for React Native CSS modules

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/stylelint-config-taro-rn@4.1.x

To install, run

npx @tessl/cli install tessl/npm-stylelint-config-taro-rn@4.1.0

index.mddocs/

Stylelint Config Taro RN

Stylelint Config Taro RN provides a shareable Stylelint configuration specifically designed for React Native CSS modules within the Taro framework ecosystem. It includes pre-configured rules that warn developers about CSS properties, selectors, and at-rules that are not compatible with React Native, preventing runtime styling issues by catching incompatible CSS patterns during the linting process.

Package Information

  • Package Name: stylelint-config-taro-rn
  • Package Type: npm
  • Language: JavaScript
  • Installation: npm install stylelint stylelint-taro-rn stylelint-config-taro-rn --save-dev

Core Imports

This package does not require direct imports - it's used as a Stylelint configuration extension in your .stylelintrc configuration file.

Basic Usage

Create a .stylelintrc configuration file that extends this configuration:

{
  "extends": "stylelint-config-taro-rn"
}

You can also extend and customize the configuration by adding your own rules:

{
  "extends": "stylelint-config-taro-rn",
  "rules": {
    "selector-class-pattern": "^[a-z][a-zA-Z0-9]*$"
  }
}

Architecture

The package exports a single Stylelint configuration object that includes:

  • Taro RN Plugin Rules: Custom rules from stylelint-taro-rn for React Native compatibility
  • Standard Stylelint Rules: Built-in Stylelint rules configured for React Native development
  • Warning-based Approach: Most rules use warnings rather than errors to provide flexibility
  • Customizable Severity: Rules can be overridden to change from warnings to errors or disabled entirely

Capabilities

Configuration Export

The main export is a complete Stylelint configuration object with React Native-specific rules.

/**
 * Stylelint configuration object for React Native CSS modules
 * Contains plugins, rules, and their configurations
 */
module.exports = {
  plugins: string[];
  rules: StylelintRules;
};

interface StylelintRules {
  // Taro RN specific rules
  'taro-rn/css-property-no-unknown': boolean;
  'taro-rn/line-height-no-value-without-unit': boolean;
  'taro-rn/font-weight-no-ignored-values': [boolean, RuleOptions];
  
  // Standard Stylelint rules
  'value-no-vendor-prefix': boolean;
  'property-no-vendor-prefix': boolean;
  'at-rule-no-vendor-prefix': boolean;
  'media-feature-name-no-vendor-prefix': boolean;
  'at-rule-disallowed-list': [string[], RuleOptions];
  'unit-allowed-list': [string[], RuleOptions];
  'selector-pseudo-class-allowed-list': [string[], RuleOptions];
  'selector-max-universal': [number, RuleOptions];
  'selector-max-attribute': [number, RuleOptions];
  'selector-max-type': [number, RuleOptions];
  'selector-max-combinators': [number, RuleOptions];
  'selector-max-id': [number, RuleOptions];
}

interface RuleOptions {
  severity: 'warning' | 'error';
  message: string;
}

Taro React Native Plugin Rules

Rules provided by the stylelint-taro-rn plugin that are specific to React Native compatibility.

CSS Property Unknown Check

/**
 * Disallows unknown CSS properties that are not supported in React Native
 * This rule will error on properties that React Native doesn't recognize
 */
'taro-rn/css-property-no-unknown': true

Example violations:

.example {
  word-wrap: break-word; /* ❌ Not supported in React Native */
}

Line Height Unit Requirement

/**
 * Requires line-height values to include units for React Native compatibility
 * React Native requires explicit units for line-height values
 */
'taro-rn/line-height-no-value-without-unit': true

Example violations:

.example {
  line-height: 1; /* ❌ Missing unit, should be 1px, 1rem, etc. */
}

Font Weight Validation

/**
 * Warns about font-weight values that are ignored on Android React Native
 * Only 400, 700, normal, and bold are supported on Android
 */
'taro-rn/font-weight-no-ignored-values': [
  true,
  {
    severity: 'warning',
    message: '400,700，normal 或 bold 之外的 font-weight 值在Android上的React Native中没有效果'
  }
]

Example warnings:

.example {
  font-weight: 300; /* ⚠️ Ignored on Android React Native */
  font-weight: 500; /* ⚠️ Ignored on Android React Native */
}

Vendor Prefix Rules

Standard Stylelint rules that disallow vendor prefixes, which are not supported in React Native.

Value Vendor Prefixes

/**
 * Disallows vendor prefixes in values
 * React Native doesn't support vendor-prefixed values
 */
'value-no-vendor-prefix': true

Example violations:

.example {
  display: -webkit-flex; /* ❌ Vendor prefix not supported */
}

Property Vendor Prefixes

/**
 * Disallows vendor prefixes in properties
 * React Native doesn't support vendor-prefixed properties
 */
'property-no-vendor-prefix': true

Example violations:

.example {
  -webkit-transform: scale(1); /* ❌ Vendor prefix not supported */
}

At-Rule Vendor Prefixes

/**
 * Disallows vendor prefixes in at-rules
 * React Native doesn't support vendor-prefixed at-rules
 */
'at-rule-no-vendor-prefix': true

Media Feature Vendor Prefixes

/**
 * Disallows vendor prefixes in media feature names
 * React Native doesn't support vendor-prefixed media features
 */
'media-feature-name-no-vendor-prefix': true

React Native Incompatible CSS Rules

Rules that warn about CSS features that are ignored or not supported in React Native.

Disallowed At-Rules

/**
 * Warns about at-rules that are ignored by React Native
 * These at-rules have no effect in React Native environments
 */
'at-rule-disallowed-list': [
  ['keyframes', 'font-face', 'supports', 'charset'],
  {
    severity: 'warning',
    message: '@-rule 会被 React Native 忽略'
  }
]

Example warnings:

@keyframes slideIn { /* ⚠️ Ignored by React Native */
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

@font-face { /* ⚠️ Ignored by React Native */
  font-family: 'CustomFont';
  src: url('font.ttf');
}

Allowed Units

/**
 * Restricts CSS units to those supported by React Native
 * Only specific units are supported in React Native
 */
'unit-allowed-list': [
  ['px', 'rem', 'deg', '%', 'vh', 'vw', 'vmin', 'vmax'],
  {
    severity: 'warning',
    message: '该单位会被 React Native 忽略'
  }
]

Example warnings:

.example {
  font-size: 1ch; /* ⚠️ 'ch' unit ignored by React Native */
  width: 10em; /* ⚠️ 'em' unit ignored by React Native */
}

Pseudo-Class Restrictions

/**
 * Only allows :export and :root pseudo-classes
 * Other pseudo-classes are ignored by React Native
 */
'selector-pseudo-class-allowed-list': [
  ['export', 'root'],
  {
    severity: 'warning',
    message: '伪类选择器会被 React Native 忽略'
  }
]

Example usage:

:export { /* ✅ Allowed - used for CSS modules */
  primaryColor: #007AFF;
}

:root { /* ✅ Allowed - used for CSS variables */
  --main-color: #007AFF;
}

.button:hover { /* ⚠️ Warning - ignored by React Native */
  background-color: blue;
}

Selector Restrictions

Rules that limit CSS selectors to those supported by React Native.

Universal Selector Restriction

/**
 * Disallows universal selectors (warns)
 * Universal selectors are ignored by React Native
 */
'selector-max-universal': [
  0,
  {
    severity: 'warning',
    message: '通配选择器会被 React Native 忽略'
  }
]

Example warnings:

* { /* ⚠️ Universal selector ignored by React Native */
  box-sizing: border-box;
}

Attribute Selector Restriction

/**
 * Disallows attribute selectors (warns)
 * Attribute selectors are ignored by React Native
 */
'selector-max-attribute': [
  0,
  {
    severity: 'warning',
    message: '属性选择器会被 React Native 忽略'
  }
]

Example warnings:

input[type="text"] { /* ⚠️ Attribute selector ignored by React Native */
  border: 1px solid gray;
}

Type Selector Restriction

/**
 * Disallows type selectors (warns)
 * Type selectors are ignored by React Native
 */
'selector-max-type': [
  0,
  {
    severity: 'warning',
    message: '通配选择器会被 React Native 忽略'
  }
]

Example warnings:

div { /* ⚠️ Type selector ignored by React Native */
  display: flex;
}

Combinator Restriction

/**
 * Disallows combinator selectors (warns)
 * Combinator selectors are ignored by React Native
 */
'selector-max-combinators': [
  0,
  {
    severity: 'warning',
    message: '组合选择器会被 React Native 忽略'
  }
]

Example warnings:

.parent > .child { /* ⚠️ Combinator selector ignored by React Native */
  margin: 10px;
}

.foo + .bar { /* ⚠️ Adjacent sibling combinator ignored by React Native */
  color: red;
}

ID Selector Restriction

/**
 * Disallows ID selectors (warns)
 * ID selectors are ignored by React Native
 */
'selector-max-id': [
  0,
  {
    severity: 'warning',
    message: 'ID 选择器会被 React Native 忽略'
  }
]

Example warnings:

#header { /* ⚠️ ID selector ignored by React Native */
  background-color: blue;
}

Configuration Customization

Disabling Rules

To disable specific rules, set them to null:

{
  "extends": "stylelint-config-taro-rn",
  "rules": {
    "taro-rn/font-weight-no-ignored-values": null,
    "at-rule-disallowed-list": null,
    "unit-allowed-list": null,
    "selector-pseudo-class-allowed-list": null,
    "selector-max-universal": null,
    "selector-max-attribute": null,
    "selector-max-type": null,
    "selector-max-combinators": null,
    "selector-max-id": null
  }
}

Changing Warnings to Errors

For React Native-only projects, you might want to change warnings to errors:

{
  "extends": "stylelint-config-taro-rn",
  "rules": {
    "at-rule-disallowed-list": [
      ["keyframes", "font-face", "supports", "charset"],
      {
        "severity": "error",
        "message": "the @-rule is ignored by React Native."
      }
    ],
    "unit-allowed-list": [
      ["px", "rem", "deg", "%", "vh", "vw", "vmin", "vmax"],
      {
        "severity": "error",
        "message": "the unit is ignored by React Native."
      }
    ],
    "selector-pseudo-class-allowed-list": [
      ["export", "root"],
      {
        "severity": "error",
        "message": "pseudo class selectors are ignored by React Native."
      }
    ],
    "selector-max-universal": [
      0,
      {
        "severity": "error",
        "message": "universal selectors are ignored by React Native."
      }
    ],
    "selector-max-attribute": [
      0,
      {
        "severity": "error",
        "message": "attribute selectors are ignored by React Native."
      }
    ],
    "selector-max-type": [
      0,
      {
        "severity": "error",
        "message": "type selectors are ignored by React Native."
      }
    ],
    "selector-max-combinators": [
      0,
      {
        "severity": "error",
        "message": "combinator selectors are ignored by React Native."
      }
    ],
    "selector-max-id": [
      0,
      {
        "severity": "error",
        "message": "id selectors are ignored by React Native."
      }
    ]
  }
}

Dependencies

  • stylelint-taro-rn: Provides React Native-specific Stylelint rules (workspace dependency)
  • stylelint: Peer dependency (^16) - the main Stylelint package

Both dependencies must be installed alongside this configuration package. The package.json defines:

  • stylelint-taro-rn as both a dependency and peer dependency (workspace:*)
  • stylelint as a peer dependency (^16) and dev dependency (^16.4.0)
  • Node.js requirement: >= 18