A modern CSS linter that helps you enforce consistent conventions and avoid errors in your stylesheets.
Links
Questions tagged [stylelint]
284 questions
2
votes
1 answer
glob to match all files except top-level vendor or any-depth node_modules
I'm trying to write a glob to match .css or .scss files but ignore vendor and ignore node_modules at any nesting…
ryanve
- 50,076
- 30
- 102
- 137
2
votes
1 answer
Static analysis - SonarQube to test same standards as on Git pre-commit hook
We are running static analysis tests on two points:
On Git pre-commit hook, and in that case we are using phpcs, phpmd, stylelint and eslint engines (vanilla installations + Drupal Coder for Drupal standards addition)
Once in a week we are updating…
Rotem
- 442
- 1
- 8
- 23
2
votes
1 answer
Regex for stylelint rule
I'm using stylelint and I need a regex expression for it's max-nesting-depth rule to ignore selectors which begin with both &: and @media
https://stylelint.io/user-guide/rules/max-nesting-depth/
So far I've tried the below without…
Holly
- 7,462
- 23
- 86
- 140
2
votes
1 answer
How to add ignorefiles for specific rules in stylelint config js
Hi want to ignore certain files for a specific rule in style lint config js like below
'color-named': [
'never', {
'ignore': [ 'library/styles/**/*.css', 'components/**/styles/variable.css' ]
}
],
However this is not…
Rkrishn
- 35
- 4
2
votes
1 answer
stylelint-selector-bem-pattern BEM linter not working
In gruntfile
stylelint: {
all: ['app/styles/**/*.scss']
},
.stylelintrc
{
"plugins": [
"stylelint-selector-bem-pattern"
],
"rules": {
"plugin/selector-bem-pattern": {
"componentName": "[A-Z]+",
…
Jitendra Vyas
- 148,487
- 229
- 573
- 852
2
votes
2 answers
stylelint - Where are there examples to create your own plugin?
I have gone to the stylelint website, github and downloaded locally via npm. The stylelint website advises that to create my own plugin I should use this format:
var myPluginRule = stylelint.createPlugin(ruleName, function(primaryOption,…
Steve Tomlin
- 3,391
- 3
- 31
- 63
2
votes
3 answers
How to use Stylelint to prevent use of "max-width" in media queries
I'd like to warn/error when using max-width in media queries and encourage a mobile-first approach with min-width.
Can I warn/error on...
@media (max-width: 50em) {
padding: 1rem;
}
But allow...
@media (min-width: 50em) {
padding: 1rem;
}
Aaron Bushnell
- 281
- 1
- 6
2
votes
1 answer
Cannot set block-no-empty to false in stylelint
Given the following in package.json:
"stylelint": {
"extends": "stylelint-config-standard",
"rules": {
"string-quotes": "single",
"block-no-empty": false,
"indentation": 2
}
}
I'm having trouble figuring out how to…
Toby
- 12,743
- 8
- 43
- 75
2
votes
1 answer
Getting stylelint errors in Travis but not locally
I've setup a little repo with my own CSS code style.
In this repo I've setup a minimal stylelint config just to check I haven't error about unknow rules, no more supported rules, etc.
When I run my $ npm check locally, it run just fine.
But…
alienlebarge
- 3,008
- 5
- 24
- 26
1
vote
1 answer
Why is there a stylelint error in css file that doesn't make sense?
I'm running stylelint on my files and this is the last error I'm left with:
1:1 ✖ Unknown rule function-calc-no-invalid function-calc-no-invalid
The first line:
@import url('https://fonts.googleapis.com/css?family=Poppins:400,700,900');
I need…
Umarah gul
- 11
- 1
1
vote
1 answer
How to format css-in-js styles order using stylelint?
I am using styled-components, prettier and stylelint. Here is my .stylelintrc.json:
{
"extends": [
"stylelint-config-standard",
"stylelint-prettier",
"stylelint-config-prettier",
"stylelint-config-rational-order"
],
"plugins":…
Ilya Kruchinin
- 105
- 10
1
vote
1 answer
Stylelint / stylelint-scss: is it possible to prohibit use of different nesting in selectors / class name unions?
Aiming to avoid unnecessary code reviews. So I have a case when someone added rules without reusing the previous selector:
.games-lib-table {
// ...
&__info {
// ...
}
}
// later in the file someone added
.games-lib-table__info_filters…
Alexander Nenashev
- 8,775
- 2
- 6
- 17
1
vote
1 answer
Stylelint Configuration with SCSS: Remove empty lines between first nested selector
I'm trying to configure my .stylelintrc.json to work where there is always an empty line between selectors except for the first nested selector.
Example
This is what I have after linting with --fix
.class {
.is-active {
…
user3486605
- 53
- 7
1
vote
1 answer
stylelint ignoreFiles not working includes the ignored files paths always
In the stylelint config file, I have added the ignoreFiles array. but on pre-commit it's throwing the error from ignored file path.
here is my stylelint.config.cjs:
/*eslint-env node*/
module.exports = {
extends: [
…
3gwebtrain
- 14,640
- 25
- 121
- 247
1
vote
0 answers
Why does this SCSS result in a no-descending-specificity error?
This small SCSS block
a {
color: red;
&:hover {
color: green;
}
}
i {
a {
text-decoration: none;
}
}
Gives this error
Expected selector "i a" to come before selector "a:hover" no-descending-specificity
But if I reverse the…
Oratorio Tangram
- 58
- 4