Convert Figma logo to code with AI

stylelint logostylelint

A mighty CSS linter that helps you avoid errors and enforce conventions.

11,101
945
11,101
161

Top Related Projects

49,809

Prettier is an opinionated code formatter.

25,435

Find and fix problems in your JavaScript code.

4,808

A modular minifier, built on top of the PostCSS ecosystem.

28,602

Transforming styles with JS plugins

15,177

Sass makes CSS fun!

Quick Overview

Stylelint is a powerful, modern linter for CSS and CSS-like syntaxes. It helps developers detect and fix errors, enforce consistent conventions, and avoid potential issues in their stylesheets. Stylelint is highly configurable and can be integrated into various development workflows.

Pros

  • Highly customizable with over 170 built-in rules and support for custom plugins
  • Supports modern CSS features, preprocessors (Sass, Less, SugarSS), and CSS-in-JS
  • Integrates well with popular code editors and build tools
  • Provides clear, actionable error messages and autofix capabilities for many rules

Cons

  • Initial configuration can be complex for beginners
  • Some rules may conflict with each other, requiring careful setup
  • Performance can be slower for large projects with many files
  • Occasional false positives or overly strict rules may require fine-tuning

Code Examples

  1. Basic usage with a custom configuration:
import stylelint from 'stylelint';

const result = await stylelint.lint({
  files: 'src/**/*.css',
  config: {
    rules: {
      'color-no-invalid-hex': true,
      'declaration-colon-space-after': 'always'
    }
  }
});

console.log(result.output);
  1. Using Stylelint with a preset configuration:
import stylelint from 'stylelint';

const result = await stylelint.lint({
  files: 'src/**/*.scss',
  config: {
    extends: 'stylelint-config-standard-scss'
  }
});

console.log(result.output);
  1. Integrating Stylelint with a build process:
import gulp from 'gulp';
import stylelint from 'stylelint';
import gulpStylelint from 'gulp-stylelint';

gulp.task('lint-css', () => {
  return gulp
    .src('src/**/*.css')
    .pipe(gulpStylelint({
      reporters: [
        { formatter: 'string', console: true }
      ]
    }));
});

Getting Started

To start using Stylelint in your project:

  1. Install Stylelint:

    npm install --save-dev stylelint stylelint-config-standard
    
  2. Create a .stylelintrc.json configuration file:

    {
      "extends": "stylelint-config-standard"
    }
    
  3. Run Stylelint on your CSS files:

    npx stylelint "**/*.css"
    

For more advanced usage, refer to the Stylelint documentation for custom configurations and integration with your development environment.

Competitor Comparisons

49,809

Prettier is an opinionated code formatter.

Pros of Prettier

  • Supports multiple languages (JavaScript, TypeScript, CSS, HTML, etc.)
  • Opinionated formatting with minimal configuration options
  • Integrates well with various editors and IDEs

Cons of Prettier

  • Less flexible for custom styling preferences
  • Doesn't perform linting or code quality checks
  • May require additional tools for comprehensive code analysis

Code Comparison

Stylelint configuration:

{
  "rules": {
    "color-hex-case": "lower",
    "indentation": 2,
    "selector-list-comma-newline-after": "always"
  }
}

Prettier configuration:

{
  "semi": false,
  "singleQuote": true,
  "tabWidth": 2
}

Stylelint focuses on CSS-specific rules and allows for granular control over styling conventions. Prettier, on the other hand, provides a simpler configuration with fewer options, aiming for consistent formatting across multiple languages.

While Stylelint excels in enforcing CSS best practices and catching potential errors, Prettier's strength lies in its ability to automatically format code across various languages with minimal setup. Stylelint is more suitable for projects requiring strict CSS linting, whereas Prettier is ideal for teams seeking a uniform code style across different file types with less configuration overhead.

25,435

Find and fix problems in your JavaScript code.

Pros of ESLint

  • Broader language support: Covers JavaScript, TypeScript, and various frameworks
  • Larger ecosystem with more plugins and configurations available
  • More comprehensive rule set for code quality and style enforcement

Cons of ESLint

  • Steeper learning curve due to its extensive configuration options
  • Can be slower to run on large codebases compared to Stylelint
  • Requires additional setup for CSS/SCSS linting (e.g., eslint-plugin-css)

Code Comparison

ESLint configuration:

{
  "extends": "eslint:recommended",
  "rules": {
    "semi": ["error", "always"],
    "quotes": ["error", "single"]
  }
}

Stylelint configuration:

{
  "extends": "stylelint-config-standard",
  "rules": {
    "color-hex-case": "lower",
    "selector-class-pattern": "^[a-z][a-zA-Z0-9]+$"
  }
}

Both ESLint and Stylelint are popular linting tools, but they serve different purposes. ESLint focuses on JavaScript and related technologies, while Stylelint specializes in CSS and preprocessor languages. ESLint offers more flexibility and a wider range of rules, making it suitable for complex JavaScript projects. Stylelint, on the other hand, provides a more streamlined experience for CSS linting with a focus on style-specific rules.

4,808

A modular minifier, built on top of the PostCSS ecosystem.

Pros of cssnano

  • Focuses on CSS optimization and minification, reducing file size
  • Modular architecture allows for customization of optimization process
  • Integrates well with popular build tools and task runners

Cons of cssnano

  • Limited to CSS optimization, doesn't provide linting or style enforcement
  • May require additional configuration for complex CSS structures
  • Potential for unintended side effects in certain edge cases

Code Comparison

cssnano (CSS optimization):

.example {
  margin: 10px 20px 10px 20px;
  color: #ff0000;
  font-weight: normal;
}

Optimized output:

.example{margin:10px 20px;color:red;font-weight:400}

Stylelint (CSS linting):

.example {
  color: red;
  font-weight: normal;
  margin: 10px 20px 10px 20px;
}

Linting output:

2:3  ✖  Expected "color" to come before "margin"  order/properties-alphabetical-order
3:3  ✖  Unexpected "normal" for font-weight       font-weight-notation

Summary

cssnano excels at optimizing and minifying CSS, reducing file size for improved performance. It's highly customizable and integrates well with build processes. However, it lacks linting capabilities and may require careful configuration. Stylelint, on the other hand, focuses on enforcing coding standards and catching potential errors in CSS, but doesn't optimize or minify code. The choice between the two depends on whether the primary goal is optimization or code quality enforcement.

28,602

Transforming styles with JS plugins

Pros of PostCSS

  • More versatile: Can transform CSS with plugins, not just lint
  • Larger ecosystem: Over 300 plugins available for various tasks
  • Better performance: Generally faster processing of CSS files

Cons of PostCSS

  • Steeper learning curve: Requires understanding of plugin system
  • Less focused: Not specifically designed for linting, may require additional setup

Code Comparison

PostCSS example:

const postcss = require('postcss');
const autoprefixer = require('autoprefixer');

postcss([autoprefixer])
  .process(css)
  .then(result => console.log(result.css));

Stylelint example:

const stylelint = require('stylelint');

stylelint.lint({
  files: 'src/**/*.css',
  config: { rules: { 'color-no-invalid-hex': true } }
})
.then(result => console.log(result.output));

PostCSS is a tool for transforming CSS with JavaScript plugins, while Stylelint is specifically designed for linting CSS. PostCSS offers more flexibility and can be used for various CSS processing tasks, including linting, but requires more setup. Stylelint, on the other hand, provides a more straightforward approach to CSS linting out of the box. The choice between the two depends on project requirements and the desired level of customization in CSS processing.

15,177

Sass makes CSS fun!

Pros of Sass

  • Provides a more powerful and feature-rich CSS extension language
  • Offers advanced features like variables, nesting, and mixins
  • Has a larger ecosystem and community support

Cons of Sass

  • Requires compilation to CSS, adding an extra step to the development process
  • May lead to more complex stylesheets if not used carefully
  • Steeper learning curve for beginners compared to plain CSS

Code Comparison

Sass:

$primary-color: #3498db;

.button {
  background-color: $primary-color;
  &:hover {
    background-color: darken($primary-color, 10%);
  }
}

Stylelint (CSS with linting):

.button {
  background-color: #3498db;
}

.button:hover {
  background-color: #2980b9;
}

Summary

Sass is a powerful CSS preprocessor that offers advanced features for writing more maintainable and efficient stylesheets. It provides a rich set of tools for creating complex designs with less code. However, it requires compilation and may lead to more complex stylesheets if not used judiciously.

Stylelint, on the other hand, is a linter for CSS and CSS-like syntaxes. It helps maintain consistent coding styles and catch errors in stylesheets. While it doesn't provide the same level of features as Sass, it's useful for enforcing coding standards and best practices in CSS development.

The choice between Sass and Stylelint depends on project requirements, team preferences, and the desired level of CSS enhancement versus strict linting and consistency enforcement.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

Stylelint

npm version Build Status npm downloads

A mighty CSS linter that helps you avoid errors and enforce conventions.

Features

It's mighty as it:

  • has over 100 built-in rules for modern CSS syntax and features
  • supports plugins so you can create your own custom rules
  • automatically fixes problems where possible
  • supports shareable configs that you can create or extend
  • can be customized to your exact needs
  • has 15k unit tests making it robust
  • is trusted by companies worldwide like Google and GitHub

And it can be extended to:

  • extract embedded styles from HTML, Markdown and CSS-in-JS template literals
  • parse CSS-like languages like SCSS, Sass, Less and SugarSS

How it'll help you

It'll help you avoid errors, for example:

  • invalid things, e.g. malformed grid areas
  • valid things that are problematic, e.g. duplicate selectors
  • unknown things, e.g. misspelled property names

And enforce conventions, for example:

  • disallow things, e.g. specific units
  • enforce naming patterns, e.g. for custom properties
  • set limits, e.g. the number of ID selectors
  • specify notations, e.g. for modern color functions

We recommend using a pretty printer like Prettier alongside Stylelint. Linters and pretty printers are complementary tools that work together to help you write consistent and error-free code.

Example output

Example

Guides

Contributors

Stylelint is maintained by volunteers. Without the code contributions from all these fantastic people, Stylelint would not exist. Become a contributor.

Alumni

We'd like to thank all past members for their invaluable contributions, including two of Stylelint's co-creators @davidtheclark and @MoOx.

Sponsors

Thank you to all our sponsors! Become a sponsor.

Backers

Thank you to all our backers! Become a backer.

Website hosting

Deploys by Netlify

License

The MIT License.

NPM DownloadsLast 30 Days