tessl/npm-stylelint-config-taro-rn

Shareable stylelint config for React Native CSS modules

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

Stylelint Config Taro RN

Name: tessl/npm-stylelint-config-taro-rn
Author: tessl

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

docs

index.md

tile.json

tessl/npm-stylelint-config-taro-rn

index.md.css-3qkkll{font-size:var(--chakra-font-sizes-sm);font-weight:var(--chakra-font-weights-normal);color:var(--chakra-colors-gray-300);}docs/

Stylelint Config Taro RN

Package Information

Core Imports

Basic Usage

Architecture

Capabilities

Configuration Export

Taro React Native Plugin Rules

CSS Property Unknown Check

Line Height Unit Requirement

Font Weight Validation

Vendor Prefix Rules

Value Vendor Prefixes

Property Vendor Prefixes

At-Rule Vendor Prefixes

Media Feature Vendor Prefixes

React Native Incompatible CSS Rules

Disallowed At-Rules

Allowed Units

Pseudo-Class Restrictions

Selector Restrictions

Universal Selector Restriction

Attribute Selector Restriction

Type Selector Restriction

Combinator Restriction

ID Selector Restriction

Configuration Customization

Disabling Rules

Changing Warnings to Errors

Dependencies

index.mddocs/