maqeMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM
MMmhhhhmMMMMMMNhhhhdMMMMMMMNhhhhhNMMMMMMMMMNNdhhhmNMMMMMMdhhhhhhhhhhhhhmMM
MMo.....sNMMMh-....:MMMMMMM+.....+MMMMMMMmo:......-/yNMMM:.............oMM
MMo......:hN+......:MMMMMMs.......yMMMMMs....-::-....:dMM/.....::::::::sMM
MMo....-...//--....:MMMMMh....-....hMMMy....omMMNd/...-NMNo-...oNMMMMMMMMM
MMo....h+---:yd....:MMMMd-...:d-...-mMM/...-MMMMMMd....hMMMy/.../NMMMMMMMM
MMo....mMmmmmMM....:MMMm-....dMh....:NMy....smMMNd/...-NMNs-:+:oNMMMMMMMMM
MMo....mMMMMMMM....:MMN/....-ho/.....+MMo....-/oo/:..:dMM/....:////////sMM
MMo....mMMMMMMM....:MM+....-sNNy-.....sMMdo:.....--/+dMMM:.............oMM
MMdhhhhNMMMMMMMhhhhdMNhhhhhmMMMMNhhhhhhMMMMNmy+:.....:dMMdhhhhhhhhhhhhhdMM
MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMNNho:oNMMMMMMMMMMMMMMMMMMMM
MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM
stylelint-config-maqe
This package provides MAQE's .stylelintrc as an extensible shared config.
Usage
Using MAQE Boilerplate
If you're using MAQE Boilerplate, then you don't have to do anything! MAQE Boilerplate already has this package as its dependency. Sit back and enjoy!
Using without MAQE Boilerplate
If you don't use MAQE Boilerplate, you'll need to do the following:
Install all the peer dependencies
npm install -D stylelint stylelint-scss postcss postcss-scss @stylistic/stylelint-pluginInstall the package
npm install -D stylelint-config-maqeCreate your .stylelintrc file and extend it from this config
{ "extends": "stylelint-config-maqe" }See Stylelint Documentation for more information.
Override stylelint config
You can modify your .stylelintrc in your project as you want. A common override is:
Rules
You can override the default rules by adding "rules" in your .stylelintrc
{
"rules": {
"at-rule-empty-line-before": null
}
}See Configuring Rules for more information.
See Rules for list of stylelint rules.
Migrating to version 2.0.0
This version contains breaking changes that may affect you.
Support for Node.js 10 was dropped
You should use the following or higher versions of Node.js
- 12.20.0
- 14.13.1
- 16.0.0
Required more dependencies when need to lint anything other than CSS or SCSS
If you use stylelint-config-maqe to lint anything other than CSS or SCSS files, you will need to install and configure these syntaxes.
- Less language (.less) use postcss-less
- Sass language (.sass) use postcss-sass
- CSS-in-JS embeds (.js, .jsx, .ts etc.) use @stylelint/postcss-css-in-js
- HTML, XML and HTML-like embeds (.html, .xml, .svelte, .vue etc.) use postcss-html
- Markdown embeds (.md, .markdown etc.) use postcss-markdown
Example for Vue.js
You will need to install
npm install -D postcss-htmland then overrides config in file .stylelintrc
{
"overrides": [
{
"files": ["*.vue", "**/*.vue"],
"customSyntax": "postcss-html"
}
]
}Note: If you use NuxtJS with PostCSS version 7 or below, you will get many warning from PostCSS on build time. Migrate to PostCSS version 8 or above to solve this issue.
Example migrate to PostCSS version 8 for NuxtJS
npm install -D @nuxt/postcss8 postcss@8and then add config to nuxt.config.js
{
buildModules: [
'@nuxt/postcss8'
]
}Migrating to version 3.0.0
Before version 3.0.0
We only have one configuration for extending styelint-config-maqe in addition to stylelint rules, our package also automatically adds stylelint-scss plugin and sets it up to support many rules such as scss/at-rule-no-unknown.
{
"extends": "stylelint-config-maqe"
}In version 3.0.0
If you extend the same way as previous versions, our package will only include rules from stylelint such as alpha-value-notation
{
"extends": "stylelint-config-maqe"
}If you want to use our config rules from stylelint-scss plugin such as scss/at-rule-no-unknown you can use the following configuration
{
"extends": "stylelint-config-maqe/scss",
"rules": {
// override stylelint-scss plugin rules
"scss/dimension-no-non-numeric-values": true,
}
}Migration to version 4.0.0
Removed support for Node.js less than version 18.12.0
Removed stylistic rules from stylelint and use @stylistic/stylelint-plugin plugin instead
Stylelint has removed 76 rules pertaining to stylistic conventions. We employ the @stylistic/stylelint-plugin for maintaining stylistic linting, and you can modify specific rules by prefixed with @stylistic/.
Install a new dependency package
npm i -D @stylistic/stylelint-plugin{
"extends": "stylelint-config-maqe",
"rules": {
// stylistic rules from @stylistic/stylelint-plugin:
"@stylistic/color-hex-case": "lower",
}
}