Skip to content

MOXY stylelint configuration to be used across several CSS projects

License

Notifications You must be signed in to change notification settings

moxystudio/stylelint-config

Repository files navigation

stylelint-config

NPM version Downloads Build Status Dependency status Dev Dependency status

MOXY stylelint configuration to be used across projects.

Installation

$ npm install stylelint @moxy/stylelint-config --save-dev

Usage

Create a .stylelintrc.json file with:

{
    "extends": "@moxy/stylelint-config"
}

ℹ️ By default, stylelint will run on all files. If your project uses separate CSS files, it's better to only lint .css files to avoid unexpected errors. You can do this by adding the tweaking ignoreFiles:

{
    "extends": "@moxy/stylelint-config",
    "ignoreFiles": [
        "!**/*.css"
    ]
}

File naming convention

File names should be hyphenated (lower case with hyphens).

If a CSS file is strictly associated with a JS file, it should follow the name of the JS file, e.g.: if we need to style a Button.js react component, then the css file should be named Button.css.

Comments convention

/* ==========================================================================
   Main comment block
   ========================================================================== */

.title {}

/* Secondary comment block
   ============================================= */

.description {}

/* Tertiary comment block & line/inline comments */

.tags {
    /* Line comment */
    background: red;
    transition: color 0.2s ease-out;  /* Inline comment */
}

/*
   Multi
   line
   comment
*/

Tests

$ npm test
$ npm test -- --watch # during development

License

MIT License