CSSLint Baseline

A CSS linting tool based on CSSLint with additional baseline browser support checking using web-features data.

Features

• All standard CSSLint rules for CSS validation
• NEW: baseline-check rule that validates CSS properties against baseline browser support
• Checks for high baseline, low baseline, and no baseline support
• Uses up-to-date web-features data for accurate browser compatibility

Installation

npm install csslint-baseline

Usage

Command Line

# Run with npx (recommended)
npx csslint-baseline file.css

# Or install globally
npm install -g csslint-baseline
csslint-baseline file.css

# Check specific rules including baseline support
csslint-baseline --rules=baseline-check file.css

# List all available rules
csslint-baseline --list-rules

Programmatic Usage

const CSSLint = require('csslint-baseline');

const result = CSSLint.verify(`
.example {
  display: flex;
  backdrop-filter: blur(10px);
}
`, { 'baseline-check': true });

console.log(result.messages);

Baseline Check Rule

The baseline-check rule categorizes CSS properties based on their browser support:

• High baseline: Properties with widespread browser support (>95% usage)
• Low baseline: Properties with limited but growing support
• No baseline: Properties with minimal browser support

Example Output

file.css: line 3, col 3, Warning - Property 'backdrop-filter' has no baseline browser support. Consider using alternatives or feature detection. (baseline-check)

Configuration

Create a .csslintrc file in your project root:

{
  "baseline-check": true,
  "box-model": true,
  "display-property-grouping": true
}

Differences from Original CSSLint

• Command: csslint-baseline instead of csslint
• Additional baseline-check rule for browser compatibility
• Updated with latest web-features data
• Separate package to avoid conflicts

License

MIT License - Based on the original CSSLint by Nicole Sullivan and Nicholas C. Zakas