Awesome
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