stylelint-config

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