Fix formatting with custom syntax on Stylelint 14 & 15 #328
Description
How did you encounter this bug?
I tried to use Format Document but it doesn't work.
Note: Fix all stylelint autofixable works all the time
My package.json:
{
"private": true,
"devDependencies": {
"autoprefixer": "latest",
"bootstrap": "4.6.1",
"nodemon": "latest",
"postcss": "latest",
"postcss-cli": "latest",
"postcss-scss": "^4.0.2",
"sass": "^1.43.4",
"stylelint": "latest",
"stylelint-config-recommended": "latest",
"stylelint-config-sass-guidelines": "latest",
"stylelint-config-standard": "latest",
"stylelint-config-standard-scss": "^2.0.1",
"svgo": "latest"
}
}
My .stylelintrc:
{
"extends": [
"stylelint-config-standard-scss"
],
"customSyntax": "postcss-scss",
"rules": {
"indentation": "tab",
"max-nesting-depth": null,
"selector-max-compound-selectors": null,
"selector-no-qualifying-type": null,
"selector-class-pattern": null,
"selector-max-id": null
}
}
Code Snippet
// ------- Main navigation -------
.cssext-main-menu {
> ul > li > a {
font-weight: bold;
text-transform: uppercase;
}
.dropdown-menu {
border: 0;
margin-left: 15px;
margin-right: 15px;
}
@media (min-width: 768px) {
> ul > li {
border-right: 1px dotted #a3a3a3;
}
> ul > li:last-child {
border-right: 0;
}
.navbar-nav .nav-link:first-child, {
padding-left: 0;
}
.navbar-nav .nav-link:last-child, {
padding-right: 0;
}
.dropdown-menu {
border-radius: 0;
margin-left: -30px;
margin-right: unset;
margin-top: 16px;
padding: 7px;
}
.dropdown-menu.show {
display: grid;
grid-auto-flow: column;
grid-template-rows: 1fr 1fr 1fr;
}
.dropdown-item {
text-align: left;
&:active {
background-color: #f8f9fa;
color: #535353;
}
}
.dropdown-menu .dropdown-item {
text-align: left;
}
.dropdown-item::before {
background: #dc3545;
content: '';
display: inline-block;
height: 8px;
margin-bottom: 1px;
margin-right: 8px;
width: 8px;
}
.dropdown::after {
background-color: rgba(0, 0, 0, 0.7);
bottom: 0;
content: '';
left: 0;
opacity: 0;
pointer-events: none;
right: 0;
top: 0;
transition: opacity 0.15s ease-in-out;
visibility: hidden;
}
.dropdown.show .nav-link {
position: relative;
z-index: 12;
}
.dropdown.show::after {
opacity: 1;
position: fixed;
visibility: visible;
z-index: 10;
}
}
}Extension Configuration
{
"stylelint.snippet": [
"css",
"scss"
],
"stylelint.validate": [
"css",
"scss"
],
}Actual Behaviour
Format Document not working
Expected Behaviour
Format Document should working
Logs
I am not sure when/where to use the NODE_ENV since I am using WLS2 on Windows?
Anyway, the current Stylelint OUTPUT is as follows:
/var/www/xxxx/xxxxxx/xxxxxx/assets/scss/style.scss: When linting something other than CSS, you should install an appropriate syntax, e.g. "postcss-scss", and use the "customSyntax" option
/var/www/xxxx/xxxxxx/xxxxxx/assets/scss/style.scss: When linting something other than CSS, you should install an appropriate syntax, e.g. "postcss-scss", and use the "customSyntax" option
/var/www/xxxx/xxxxxx/xxxxxx/assets/scss/style.scss: When linting something other than CSS, you should install an appropriate syntax, e.g. "postcss-scss", and use the "customSyntax" option
Stylelint Version
14.1.0
vscode-stylelint Version
1.2.0
Node.js Version
v16.13.0
Operating System
Ubuntu 20.04 focal on WSL2
Windows Subsystem for Linux
WSL2 on Win 10 , x64 10.0.19043
Code of Conduct
- I agree to follow vscode-stylelint's Code of Conduct