tessl/npm-umijs--lint

Comprehensive linting solution for JavaScript and TypeScript projects combining ESLint and Stylelint with unified interface

—

Pending

Overview

Eval results

Files

Stylelint Configuration

Name: tessl/npm-umijs--lint
Author: tessl

Pre-configured Stylelint setup with CSS modules, Prettier integration, and CSS-in-JS support. Provides comprehensive style linting for CSS, Less, Sass, SCSS, Stylus, and CSS-in-JS in TypeScript/JavaScript files.

Capabilities

Main Stylelint Configuration

Comprehensive Stylelint configuration with modern CSS support and CSS-in-JS capabilities.

// Stylelint configuration object (CommonJS module.exports)
// Location: src/config/stylelint/index.ts
const stylelintConfig: {
  extends: string[];
  plugins: string[];
  rules: Record<string, any>;
  customSyntax: string;
  ignoreFiles: string[];
  overrides: Array<{
    files: string[];
    customSyntax: string;
  }>;
};

Key Features:

Extends: Standard config, Prettier integration, CSS modules support
Plugins: Declaration block validation for ignored properties
Syntax: PostCSS Less as default syntax
CSS-in-JS: Override for TypeScript/JavaScript files
Ignore: Excludes node_modules automatically

Usage:

// stylelint.config.js
module.exports = require("@umijs/lint/dist/config/stylelint");

Configuration Details

Extended Configurations

const extends: [
  "stylelint-config-standard",
  "stylelint-config-prettier", 
  "stylelint-config-css-modules"
];

Inherited Features:

Standard: Industry-standard CSS rules and best practices
Prettier: Automatic formatting integration, disables conflicting style rules
CSS Modules: Support for CSS modules naming conventions and syntax

Custom Plugins

const plugins: [
  "stylelint-declaration-block-no-ignored-properties"
];

Plugin Features:

Declaration Validation: Detects CSS properties that are ignored due to other property values
Property Conflicts: Identifies conflicting property combinations

Syntax Support

const customSyntax: "postcss-less";

const overrides: [{
  files: ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx"];
  customSyntax: "@stylelint/postcss-css-in-js";
}];

Supported Syntaxes:

PostCSS Less: Default for .css, .less, .scss, .sass, .styl files
CSS-in-JS: Special syntax for styled-components, emotion, etc. in JS/TS files

Rule Configuration

Core Rules

const rules: {
  // Specificity and ordering
  "no-descending-specificity": null;
  
  // URL and attribute handling  
  "function-url-quotes": "always";
  "selector-attribute-quotes": "always";
  
  // Font family validation
  "font-family-no-missing-generic-family-keyword": null;
  
  // Plugin rules
  "plugin/declaration-block-no-ignored-properties": true;
  
  // Unit validation
  "unit-no-unknown": [true, { ignoreUnits: ["rpx"] }];
  
  // Web components
  "selector-type-no-unknown": null;
  
  // CSS modules
  "value-keyword-case": ["lower", { ignoreProperties: ["composes"] }];
  
  // Class naming patterns
  "selector-class-pattern": [
    "^([a-z][a-z0-9]*(-[a-z0-9]+)*|[a-z][a-zA-Z0-9]+)$",
    {
      message: "Expected class selector to be kebab-case or lowerCamelCase";
    }
  ];
  
  // Color functions
  "color-function-notation": null;
  
  // Font family restrictions
  "declaration-property-value-disallowed-list": [
    {
      "font-family": "/^('|\")?PingFangSC(-(Regular|Medium|Semibold|Bold))?\\1$/"
    },
    {
      message: "Unexpected value for property \"font-family\", which will cause some devices to render the wrong font, please delete this \"font-family\" css rule, see also: https://github.com/umijs/umi/pull/11001"
    }
  ];
};

Rule Categories

URL and Quote Rules

function-url-quotes: Requires quotes around URLs in CSS functions
selector-attribute-quotes: Requires quotes around attribute values in selectors

Typography Rules

font-family-no-missing-generic-family-keyword: Disabled to allow icon fonts
Font family restrictions: Prevents problematic PingFangSC font declarations

Unit and Value Rules

unit-no-unknown: Allows rpx units (responsive pixels for mobile)
color-function-notation: Disabled to avoid conflicts with Less math operations
value-keyword-case: Enforces lowercase keywords except for 'composes' in CSS modules

Selector Rules

selector-class-pattern: Enforces kebab-case or lowerCamelCase class names
selector-type-no-unknown: Disabled to support web components
no-descending-specificity: Disabled for flexibility in component styling

Plugin Rules

plugin/declaration-block-no-ignored-properties: Detects ignored CSS properties

File Support

Supported File Extensions

const supportedFiles: [
  "**/*.css",   // CSS files
  "**/*.less",  // Less files  
  "**/*.scss",  // SCSS files
  "**/*.sass",  // Sass files
  "**/*.styl"   // Stylus files
];

CSS-in-JS Support

const cssInJsFiles: [
  "**/*.js",    // JavaScript files with CSS-in-JS
  "**/*.jsx",   // JSX files with CSS-in-JS
  "**/*.ts",    // TypeScript files with CSS-in-JS  
  "**/*.tsx"    // TSX files with CSS-in-JS
];

CSS-in-JS Features:

Styled-components support
Emotion CSS support
Template literal CSS parsing
JSX style prop validation

Usage Examples

Basic CSS Linting

# Lint CSS files
stylelint "src/**/*.{css,less,scss}"

# Lint with auto-fix
stylelint "src/**/*.{css,less,scss}" --fix

CSS-in-JS Linting

# Lint CSS-in-JS in TypeScript files
stylelint "src/**/*.{ts,tsx}"

# Lint all style-related files
stylelint "src/**/*.{css,less,scss,ts,tsx}"

Configuration Override

// stylelint.config.js
const baseConfig = require("@umijs/lint/dist/config/stylelint");

module.exports = {
  ...baseConfig,
  rules: {
    ...baseConfig.rules,
    "color-hex-case": "upper",
    "declaration-block-trailing-semicolon": "always"
  }
};

CSS Modules Integration

Class Naming Convention

/* Valid class names */
.my-component { }        /* kebab-case */
.myComponent { }         /* lowerCamelCase */
.component-item { }      /* kebab-case with hyphens */

/* Invalid class names */
.MyComponent { }         /* PascalCase - not allowed */
.my_component { }        /* snake_case - not allowed */

Composes Property

/* CSS Modules composition */
.button {
  composes: base-button from './base.css';
  background: blue;
}

Special Handling:

composes keyword is case-insensitive (exception to lowercase rule)
Supports CSS Modules composition syntax
Validates composed class references

Less Integration

Math Operations

// Less math operations are supported
.container {
  width: calc(100% - 20px);  // Standard CSS calc
  height: 100px * 2;         // Less multiplication
  margin: 10px / 2;          // Less division
}

Configuration:

color-function-notation is disabled to prevent conflicts with Less math
PostCSS Less syntax handles Less-specific features
Supports Less variables, mixins, and functions

Error Handling

Common Configuration Issues

Missing Dependencies:

# Ensure required packages are installed
npm install stylelint postcss

Syntax Errors:

PostCSS Less handles most syntax variations
CSS-in-JS parser handles template literals and JSX

File Pattern Issues:

Use glob patterns for file matching
Ensure file extensions match override patterns

Ignoring Files

// stylelint.config.js
module.exports = {
  ...require("@umijs/lint/dist/config/stylelint"),
  ignoreFiles: [
    "node_modules/**/*",
    "dist/**/*",
    "build/**/*"
  ]
};

Advanced Features

Custom Property Validation

/* Custom properties (CSS variables) */
:root {
  --primary-color: #007bff;
  --font-size-base: 16px;
}

.component {
  color: var(--primary-color);
  font-size: var(--font-size-base);
}

Web Components Support

/* Custom elements are allowed */
my-custom-element {
  display: block;
  padding: 1rem;
}

app-header,
app-footer {
  position: relative;
}

Responsive Units

/* rpx units are supported (responsive pixels) */
.mobile-component {
  width: 750rpx;    /* Allowed */
  height: 200rpx;   /* Allowed */
  font-size: 32rpx; /* Allowed */
}

Install with Tessl CLI

npx tessl i tessl/npm-umijs--lint

docs