Questions tagged [stylelint]
A modern CSS linter that helps you enforce consistent conventions and avoid errors in your stylesheets.
267
questions
0
votes
1
answer
26
views
Stylelint: require tabs instead of spaces for indenting, but don't count tabs
I frequently nest my CSS code to better understand variations, such as this:
.a .animate {
transition: opacity 0.2s linear;
opacity: 0;
}
html.js .a.show .animate {
opacity: 1;
...
0
votes
1
answer
21
views
pick top rules only from stylelint-config-recommended
I want to implement stylelint in my project. I came across "stylelint-config-recommended".
But after the first lint attempt, I got 100s of errors. I don't want to use all of the rules from ...
0
votes
1
answer
37
views
How to run stylelint on the style tag written inside a Vue file
I'm configuring the stylelints for the styles in my Vue project. For the independent .css and .scss files, I did this using stylelint-scss package. But I'm facing difficulty to configure this for the ...
0
votes
1
answer
32
views
how can i hide css synthax error from using nesting with postcss
I'm using postcss since few days,
my vs code is showing me errors because I use nested syntax from postcss plugins.
How can I disable this type of error in vs code.
Is stylelint a good way to fix my ...
0
votes
1
answer
64
views
How to use eslint-config-stylelint
css:
.fontSize11{ font-size: calc(var(--font-scale, 1 ) * 11px); }
In our project, we are using the above format for font-size in CSS. Some people in our team are not following the above format. To ...
0
votes
1
answer
46
views
style lint quick fix in vs code not working
Is there a way to use style lint quick fix in VS Code?
0
votes
0
answers
38
views
Stylelint class ordering in vue
I am configuring Stylelint for a Vue project and I want it so in .vue files in between the scss style tags the classes and other declarations are ordered alphabetically and based on their types.
So ...
0
votes
1
answer
17
views
How to Disallow Concatenated Selectors
I found this sass feature as hard to catch some missing styles and would like to lint my project on it. Here is the link to feature documentation:
https://sass-lang.com/documentation/style-rules/...
0
votes
0
answers
42
views
Stylint error on installing node_modules. Even while running npm start this error keep arrising
Whenever I try to install modules for the project it pops up an error for stylelint.
There is no error in code and even after removing stylelint I am unable to solve this issue
npm ERR! code ERESOLVE
...
0
votes
0
answers
126
views
Stylelint 14 fix on save not working on VSCode
When I was using stylelint 13, it was working fine, but for some reason after I upgraded to version 14, the fix on save function didn't work, but stylelint has correctly marked the error
Following is ...
2
votes
0
answers
47
views
Custom SCSS Linting with style lint
I have a straightforward question. How do you create a custom lint rule with scss which can move media queries outside of classes?
For example, the following is a VALID:
.class-name {
background-...
0
votes
0
answers
186
views
How to solve semi conflict with nuxt, prettier, stylelint and eslint?
In my nuxt2 project I have eslint(8.25) & prettier & stylelint.
eslint config:
extends: [
'@nuxtjs',
'plugin:nuxt/recommended',
'prettier'
],
plugins: ...
0
votes
1
answer
156
views
How to change css class name from camel to kebab case?
I am using stylelint to lint a legacy project. The challenge here is that some of the CSS classes are written in Camel Case by earlier developers. And now I need to convert them to Kebab Case.
Is ...
0
votes
0
answers
25
views
How to integrate prettier with eslint
Eslint cannot remove spaces between class names, how to make it work together
1
vote
0
answers
48
views
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 ...
0
votes
1
answer
146
views
Style lint ignoring less variables
I've decided to switch from css to less recently, so I want to setup some listing mechanism via style-lint and postcss-less. And my current config looks like this:
{
"extends": "...
1
vote
0
answers
150
views
Configuring Stylelint for VSCode Globally
Here's what I want to achieve: I want to configure the extension so that it checks and fixes automatically any errors in any .scss file that I create.
I don't want to install the packages manually for ...
1
vote
1
answer
666
views
How to resolve 'property-no-unknown' error in StyleLint?
I have a Wordpress project where Webpack and the StyleLint plugin are being used.
The problem is when compiling sass, it shows this error where it says it doesn't recognize the 'aspect-ratio' property ...
0
votes
1
answer
132
views
Stylelint: нow to sort properties before nested classes
I can't find a rule that would automatically fix this:
.a {
.b {
width: 16px;
}
padding: 2px 0;
}
on this:
.a {
padding: 2px 0;
.b {
width: 16px;
}
}
0
votes
0
answers
200
views
Config stylelint in react tsx using MUI
I got a project using:
mui
typescript
react
I want to configure stylelint to check for HEX colors used in tsx files
current config:
"stylelint": {
"rules": {
"color-no-...
0
votes
1
answer
82
views
Brackets in stylus
Is it possible to make automate formatting of stylus and save brackets using stylelint and prettier? So main problem I have is that while I formating some file, all brackets are deleting from .styl ...
0
votes
1
answer
168
views
How can I declare two different configurations to .stylelint
I use Stylelint on my project to check styles.
I'm using a plugin that should only run on one folder. And the main configuration that is done for the whole project.
.stylelint file:
{
"...
1
vote
2
answers
805
views
Stylelint 'Unknown rule declaration-property-value-blacklist' error on every css file
While running Stylelint against CSS files, every file has an output with the following error. It is odd that the error appears on the first line/character of each file.
1:1 x Unknown rule declaration-...
1
vote
1
answer
98
views
ignore -webkit-box-shadow and -moz-box-shadow while using stylelint in angular
How can I remove stylelint rule for CSS properties like -webkit-box-shadow and -moz-box-shadow? Because it is overwriting to box-shadow when I run --fix command.
Below is my .stylelintrc.json file ...
0
votes
0
answers
43
views
Cannot set properties of undefined (setting 'block_end') CssSyntaxError - stylelint
trying to add linter to my project.Using sass.
I selected stylelint after a research.
Having that error when running :
npx stylelint "**/*.sass"
this is the code
@import '../../../../...
1
vote
1
answer
859
views
Stylelint: Expected declaration to come before rule - order/order
The code is as follows:
.home-feat2 {
background-color: stencilColor("color-greyLight");
img {width: 10rem;}
margin-bottom: spacing("single");
@...
1
vote
1
answer
522
views
Stylelint indentation rule returns false negative on multi-line mixin
I have an app that uses Stylelint to enforce stylistic rules inside styles, but here, Stylelint complains about indentation when a long line is split in half by Prettier.
@include box-shadow(
var(--...
1
vote
0
answers
938
views
Vite Stylelint showing scss errors only after manual reload or .vue file change
I have a pretty vanilla Vite+Vue3+Eslint+Stylelint project running at the moment to see how the setup works.
I've got everything working properly now except for the stylelinter:
Whenever I make an ...
6
votes
1
answer
2k
views
stylelint gives error "Class extends value undefined is not a constructor or null" when introducing stylelint-config-standard-scss
I'm at at a bit of a loss today. I wanted to add Stylelint to my Angular project, so I ran
npm install stylelint stylelint-config-standard --save-dev
to install stylelint and the standard config plug ...
0
votes
1
answer
384
views
Lint All Sass Files and Fix Only One Rule
I have a front-end build for which I am setting up style linting. The project is using Stylelint. At the moment, there are a bunch of warnings, which I need to address. It appears that some of them ...
4
votes
2
answers
1k
views
Stylelint wont mark errors in VSCode
VScode doesn't show me any stylint errors.
package.json:
...
"postcss": "^8.4.12",
"postcss-scss": "^4.0.3",
"stylelint": "^14.7....
0
votes
1
answer
592
views
Stylelint formats .tsx files to .css
Stylelint seems to format my .tsx files to .css in strange way.
Lets assume that this is my component:
const StyledWrapper = styled.div`
&&& {
padding: 0;
}
`;
when I save it, ...
0
votes
1
answer
2k
views
No files matching the pattern were found with STYLELINT
I just installed STYLELINT and I'm following the documentation, but I encountered the following problem:
$ npx stylelint --config ./stylelintrc './**/*.tsx'
Error: No files matching the pattern "'...
0
votes
1
answer
244
views
Stylelint selector-max-specificity: class::placeholder (0,0,1) doesn't but class:focus::placeholder (0,1,1) throws error with 0.2.0 max specificity
I am trying to reduce CSS specificity in my project by using the stylelint selector-max-specificity and I have now set it to "0.2.0". The problem is that when I use wonderful-input::...
0
votes
1
answer
3k
views
Unknown Word on SCSS mixin function using Stylelint
I'm working on a webpack boilerplate, and I've been trying to set up a px to rem conversion function using scss mixins. I'm using stylelint to check for errors in this project too.
I keep getting the ...
2
votes
1
answer
1k
views
Setup Stylelint with Emotionjs on a NextJS project
I'm trying to add Stylelint to a brand new NextJS Typescript project with EmotionJS and almost no rules works on my styles files, the only error that I manage to see was Unknown word CssSyntaxError.
...
3
votes
1
answer
1k
views
Stylelint error in Nuxt (class based): Unexpected empty source (no-empty-source)
I get this Stylelint error suddenly in two of my components, I don't know why.
Unexpected empty source (no-empty-source)
I created a third component and removed content to the point where there is no ...
0
votes
1
answer
935
views
Invalid component selector with Selector Bem Pattern
I get an issue with the plugin stylelint-selector-bem-pattern of Stylelint.
My Stylelint rules :
{
"extends": [
"stylelint-config-standard-scss"
],
"plugins": [
...
0
votes
1
answer
50
views
Stylelint: Create a regex to prevent parent level html ,body tags
I am trying to create a css rule that prevents css to be applied on body, html rahe
For e.g.
body, html {
height: scrollable;
}
I am using stylelint as my linter and unable to think of a way to ...
0
votes
1
answer
2k
views
What is the default CSS property order?
i have been trying to find documentation on this but i havent been able to. I use stylint in a project and we have the css order option activated. I haven't been able to set up VS code to show the ...
0
votes
1
answer
244
views
Formatting SCSS for WordPress
I'm trying to configure a visual studio code project to format SCSS code according to WordPress standards. So far I've done the following but no indication of errors and no formatting occurs on save.
...
0
votes
1
answer
221
views
Stylelint skips entire folders
I have stylelint installed in my project, and I've configured its configuration.
I added a script to run this linter on my src folder.
For some reason, the linter scans only one folder.
Here is my ...
0
votes
1
answer
617
views
Why are some of the secondary options not working for the rules in my .stylelintrc?
I am trying to format my css so there's no more than one empty line between lines, but I don't want that to apply to comments. The documentation for stylelint has a secondary option that should make ...
0
votes
1
answer
79
views
stylelint rule to enforce use of predefined classes instead of css
I have defined common css classnames to re-use in multiple places, like
common.scss:
.m-r-4 {margin-right: 4px}
.m-l-4 {margin-left: 4px}
.p-r-4 {padding-right: 4px}
.p-l-4 {padding-left: 4px}
...
0
votes
1
answer
167
views
StyleLint configuration to allow CSS hierarchical indentation
On my Visual Studio 2022, I have the hierarchical indentation turned on as my CSS formatter setting.
I wanted to run StyleLint on GitHub Action. How do I configure StyleLint so it accepts the ...
1
vote
1
answer
1k
views
Running Stylelint (SCSS) within github/super-linter ignores configuration
hope someone can help me out with a weird bug/issue i've been having with styleling + github/super-linter. I've also added a issue to the repo as I think I've tried many things and it seems to be a ...
-1
votes
1
answer
110
views
WebStorm uses Stylelint to lint markdown file incorrectly
I just found WebStorm is using the Stylelint to lint the README.md file.
Here's my Stylelint config:
{
"plugins": ["stylelint-prettier"],
"extends": [
"...
1
vote
2
answers
758
views
How to configure stylelint for react native and StyleSheet
Does anyone know how to configure stylelint for react native (typescript) and StyleSheet?
src/sample.tsx
import React from "react";
import { StyleSheet, Text, View } from "react-native&...
1
vote
1
answer
557
views
Regex to match all nested SCSS selectors that are not kebab case
UPDATE: I've come to the conclusion that RegExp is not a viable option for this particular problem.
Thanks for your help.
The problem
TLDR: I want to create a RegExp that can scan all nested SCSS
...
2
votes
1
answer
5k
views
How to allow // comments in scss within Stylelint (Unknown Word)
I'm new to Stylelint. I tried to understand docs and searched GitHub, but all explanations are full of double negatives and I'm confused!
The problem is that when I use // for comments, it throws ...