@moneko/stylelint

@moneko/stylelint

A minimalist, zero-dependency Stylelint configuration with built-in support for CSS-in-JS, SCSS, LESS, and more.

Features

• Zero dependencies: Completely built on Stylelint's core, no extra packages required.
• Minimal configuration: Focuses on essential rules without unnecessary bloat.
• Supports CSS-in-JS: Works out of the box for styled components, Emotion, and other CSS-in-JS solutions.
• Built-in support for SCSS, LESS, and more: Handles modern stylesheets with no additional configuration.
• Easily customizable: Extend and modify the configuration to suit your specific needs.

Installation

Install this package as a devDependency:

npm install @moneko/stylelint -D
# or
yarn add @moneko/stylelint -D
# or
pnpm add @moneko/stylelint -D

Usage

Stylelint API Usage

You can integrate stylelint programmatically in your JavaScript/TypeScript code as follows:

import { stylelint } from "@moneko/stylelint";

// Automatically support .css, .scss, .less, .ts, .tsx, .js, and .jsx files
const exts = ["css", "scss", "less", "ts", "tsx", "js", "jsx"].join(",");
const result = await stylelint.lint({
  files: `src/**/*.{${exts}}`,
  fix: true, // Automatically fix issues
  cache: true, // Enable cache to speed up subsequent runs
  formatter: "string", // Use a simple string formatter
});

if (result.report) {
  process.stdout.write(result.report);
}

Configuration

This package provides an easy way to configure Stylelint.

YAML Configuration (.stylelintrc.yaml)

extends:
  - "@moneko/stylelint/config"

JS Configuration (stylelint.config.mjs)

import config from "@moneko/stylelint/config";

export default config;

Built-in Support for CSS-in-JS, SCSS, LESS

By default, this configuration supports a wide range of modern CSS and JavaScript file types, without the need for additional setup:

• CSS-in-JS: Works seamlessly with popular libraries like styled-components, Emotion, and other CSS-in-JS solutions.
• SCSS & LESS: Native support for SCSS and LESS, so you can lint your stylesheets without extra configuration.
• JavaScript/TypeScript: Handles .js, .jsx, .ts, and .tsx files, enabling you to lint both styles and code in a unified way.

This means that whether you're working with traditional stylesheets, SCSS, LESS, or CSS-in-JS, this configuration has you covered.

Why "Zero Dependencies"?

This configuration is built with simplicity in mind, offering several benefits:

• Faster setup: No need to install and configure additional plugins. Just install the package and you’re good to go.
• Improved performance: With zero dependencies, there's less overhead and faster processing times.
• Easier maintenance: Fewer dependencies mean less to track, update, and worry about security vulnerabilities.

Customization

If you need to adapt the configuration to your specific project, it's easy to customize:

• Extend the configuration: You can extend or modify the default rules by creating your own .stylelintrc file or importing the config into a stylelint.config.js file.
• Add custom plugins: While this package has zero dependencies, you're free to add custom Stylelint plugins if necessary to meet your specific needs.

Here’s an example of how to extend the configuration:

License

MIT