Comprehensive Stylelint configuration with CSS modules support, SCSS/Less preprocessing, and opinionated rules for consistent CSS styling in Umi.js projects.
Core configuration object with base rules and plugin integration.
/**
* Stylelint configuration object
* Provides comprehensive CSS/SCSS/Less linting with CSS modules support
*/
interface StylelintConfig {
/** Extended base configurations */
extends: string[];
/** Stylelint plugins */
plugins: string[];
/** Custom rules configuration */
rules: Record<string, any>;
/** File-specific syntax overrides */
overrides: Array<{
files: string[];
customSyntax: string;
}>;
/** Files to ignore during linting */
ignoreFiles: string[];
}The complete configuration as exported by @umijs/fabric.
const stylelintConfig: StylelintConfig = {
extends: [
'stylelint-config-standard',
'stylelint-config-css-modules',
'stylelint-config-prettier',
],
plugins: ['stylelint-declaration-block-no-ignored-properties'],
rules: {
'no-descending-specificity': null,
'function-url-quotes': 'always',
'selector-attribute-quotes': 'always',
'selector-class-pattern': null,
'font-family-no-missing-generic-family-keyword': null,
'plugin/declaration-block-no-ignored-properties': true,
'unit-no-unknown': [true, { ignoreUnits: ['rpx'] }],
'selector-type-no-unknown': null,
'value-keyword-case': ['lower', { ignoreProperties: ['composes'] }],
},
overrides: [
{
files: ['*.scss', '**/*.scss'],
customSyntax: 'postcss-scss',
},
{
files: ['*.less', '**/*.less'],
customSyntax: 'postcss-less',
},
],
ignoreFiles: ['**/*.js', '**/*.jsx', '**/*.tsx', '**/*.ts'],
};Base configurations that provide the foundation rules.
/**
* Base configurations extended by @umijs/fabric
*/
interface ExtendedConfigs {
/** Standard CSS rules and best practices */
'stylelint-config-standard': StylelintConfig;
/** CSS Modules specific rules and class name patterns */
'stylelint-config-css-modules': StylelintConfig;
/** Prettier compatibility rules (disables conflicting rules) */
'stylelint-config-prettier': StylelintConfig;
}Configuration Details:
Additional functionality through Stylelint plugins.
/**
* Stylelint plugin for detecting ignored CSS properties
* Warns when CSS properties are ignored due to other property values
*/
interface DeclarationBlockPlugin {
'plugin/declaration-block-no-ignored-properties': boolean;
}Plugin Features:
Specific rule overrides and customizations for Umi.js projects.
interface CustomRules {
/** Disable specificity warnings (null = disabled) */
'no-descending-specificity': null;
/** Require quotes around URLs (always enforce) */
'function-url-quotes': 'always';
/** Require quotes around attribute selectors */
'selector-attribute-quotes': 'always';
/** Disable class pattern validation (allows CSS Modules) */
'selector-class-pattern': null;
/** Allow missing generic font families (for icon fonts) */
'font-family-no-missing-generic-family-keyword': null;
/** Enable ignored properties detection */
'plugin/declaration-block-no-ignored-properties': boolean;
/** Allow rpx units (responsive pixel units) */
'unit-no-unknown': [boolean, { ignoreUnits: string[] }];
/** Disable unknown selector type warnings */
'selector-type-no-unknown': null;
/** Enforce lowercase values except for CSS Modules 'composes' */
'value-keyword-case': [string, { ignoreProperties: string[] }];
}Custom syntax support for preprocessors.
interface SyntaxOverrides {
/** SCSS files configuration */
scss: {
files: string[];
customSyntax: 'postcss-scss';
};
/** Less files configuration */
less: {
files: string[];
customSyntax: 'postcss-less';
};
}Supported Preprocessors:
JavaScript and TypeScript files are automatically excluded from styling rules.
/**
* Files ignored by Stylelint
* Prevents linting of JavaScript/TypeScript files that may contain CSS-in-JS
*/
const ignoreFiles: string[] = [
'**/*.js',
'**/*.jsx',
'**/*.tsx',
'**/*.ts'
];Basic Integration:
// .stylelintrc.js
module.exports = {
extends: [require.resolve('@umijs/fabric/dist/stylelint')],
};Custom Rule Overrides:
// .stylelintrc.js
module.exports = {
extends: [require.resolve('@umijs/fabric/dist/stylelint')],
rules: {
// Override specific rules
'selector-class-pattern': '^[a-z][a-zA-Z0-9]+$',
'max-nesting-depth': 3,
'declaration-block-no-duplicate-properties': true,
},
};Additional File Types:
// .stylelintrc.js
module.exports = {
extends: [require.resolve('@umijs/fabric/dist/stylelint')],
overrides: [
// Include Stylus files
{
files: ['*.styl', '**/*.styl'],
customSyntax: 'postcss-styl',
},
// Include PostCSS files
{
files: ['*.pcss', '**/*.pcss'],
customSyntax: 'postcss',
},
],
};Project-Specific Ignores:
// .stylelintrc.js
module.exports = {
extends: [require.resolve('@umijs/fabric/dist/stylelint')],
ignoreFiles: [
'**/*.js',
'**/*.jsx',
'**/*.tsx',
'**/*.ts',
// Additional project-specific ignores
'dist/**/*',
'build/**/*',
'coverage/**/*',
],
};Package.json Scripts:
{
"scripts": {
"lint:style": "stylelint \"src/**/*.{css,scss,less}\"",
"lint:style:fix": "stylelint \"src/**/*.{css,scss,less}\" --fix"
}
}Special handling for CSS Modules patterns and conventions.
Supported Patterns:
.myComponent.my-componentcomposes: base from './base.css':local(.class) and :global(.class)Example CSS Modules Usage:
/* styles.module.css */
.container {
padding: 16px;
composes: flexCenter from './common.css';
}
.title {
font-size: 24px;
color: var(--primary-color);
}
:global(.ant-btn) {
border-radius: 4px;
}Full support for preprocessor-specific syntax and features.
SCSS Examples:
// styles.scss
$primary-color: #1890ff;
$border-radius: 4px;
.component {
background-color: $primary-color;
border-radius: $border-radius;
&:hover {
opacity: 0.8;
}
.nested-element {
margin: 8px;
}
}Less Examples:
// styles.less
@primary-color: #1890ff;
@border-radius: 4px;
.component {
background-color: @primary-color;
border-radius: @border-radius;
&:hover {
opacity: 0.8;
}
.nested-element {
margin: 8px;
}
}