vscode-stylelint
vscode-stylelint copied to clipboard
stylelint
[Bug]: Sorting properties not work
How did you encounter this bug?
When I run:
stylelint *.scss --fix
The properties will get ordered in the correct configuration. The same thing in VS code under running fix all doesn't do anything.
I tried it with CSS as well as SCSS files.
Link to Minimal Reproducible Example
https://github.com/StfBauer/temp-stylelint-debug
Code Snippet
@use "sass:meta";
body {
isolation: isolate;
display: block;
visibility: hidden;
box-sizing: border-box;
width: 100px;
height: 20px;
padding: 300rem;
padding-block: 30px;
padding-inline: 10px;
padding-inline-start: 400px;
margin: 300px !important;
transition: all ease-in 1s;
background-color: lime;
position: absolute;
z-index: 1000;
top: 0;
top: 300px;
right: 20px;
bottom: 100px;
content: "none";
@media screen and (max-width: 768px) {
content: "Hello world";
}
@media screen and (max-width: 1024px) {
background-color: magenta;
content: "Hello world";
}
font-family: "Courier New", Courier, monospace;
font-size: 20px;
font-weight: 300px;
}
div {
color: lime;
}
a {
a {
width: 2px;
height: 1px;
font-size: 2px;
font-weight: bold;
}
}
Stylelint Configuration
/** @type {import('stylelint').Config} */
module.exports = {
"plugins": [
"stylelint-order",
"stylelint-scss"
],
"rules": {
"at-rule-empty-line-before": "always",
"order/order": [
"custom-properties",
"declarations"
],
"order/properties-order": [
[
"content",
{
"groupName": "position",
"emptyLineBefore": "always",
"emptyLineBetween": "never",
"properties": [
"position",
"z-index",
"top",
"right",
"bottom",
"left",
"position-fallback",
"position-fallback-bounds",
"page",
"page-orientation"
]
},
{
"groupName": "isolation",
"emptyLineBefore": "always",
"emptyLineBetween": "never",
"properties": [
"isolation"
]
},
{
"groupName": "box-modal",
"emptyLineBefore": "always",
"emptyLineBetween": "never",
"properties": [
"display",
"overflow",
"visibility",
"overflow-anchor",
"overflow-clip-margin",
"overflow-wrap",
"overflow-x",
"overflow-y",
"box-sizing",
"width",
"min-width",
"max-width",
"height",
"min-height",
"max-height",
"padding",
"padding-block",
"padding-block-start",
"padding-block-end",
"padding-inline",
"padding-inline-start",
"padding-inline-end",
"padding-top",
"padding-right",
"padding-bottom",
"padding-left",
"border",
"border-top",
"border-top-width",
"border-top-color",
"border-top-style",
"border-left-width",
"border-left-color",
"border-left-style",
"border-bottom-width",
"border-bottom-color",
"border-bottom-style",
"border-right-width",
"border-right-color",
"border-end-end-radius",
"border-right-style",
"border-radius",
"border-start-start-radius",
"border-top-left-radius",
"border-start-end-radius",
"border-top-right-radius",
"border-bottom-right-radius",
"border-end-start-radius",
"border-bottom-left-radius",
"border-block-start-width",
"border-block-start-color",
"border-block-start-style",
"border-block-end-width",
"border-block-end-color",
"border-block-end-style",
"border-inline-start-width",
"border-inline-start-style",
"border-inline-start-color",
"border-inline-end-width",
"border-inline-end-color",
"border-inline-end-style",
"border-image-outset",
"border-image-repeat",
"border-image-slice",
"border-image-source",
"border-image-width",
"-webkit-border-image",
"margin",
"margin-top",
"margin-right",
"margin-bottom",
"margin-left",
"margin-block-start",
"margin-inline-end",
"margin-block-end",
"margin-inline-start",
"inset-block-start",
"inset-block-end",
"inset-inline-start",
"inset-inline-end",
"block-size",
"min-block-size",
"max-block-size",
"inline-size",
"min-inline-size",
"max-inline-size",
"aspect-ratio",
"object-fit",
"object-position",
"object-view-box"
]
},
{
"groupName": "grid-flex-columns",
"emptyLineBefore": "always",
"emptyLineBetween": "never",
"properties": [
"grid",
"grid-template-areas",
"grid-auto-flow",
"grid-template-columns",
"grid-auto-columns",
"grid-template-rows",
"grid-auto-rows",
"gap",
"row-gap",
"grid-column",
"grid-column-start",
"grid-column-end",
"grid-row",
"grid-row-start",
"grid-row-end",
"flex-direction",
"flex-wrap",
"justify-content",
"justify-items",
"justify-self",
"align-content",
"align-items",
"align-self",
"flex",
"order",
"flex-grow",
"flex-shrink",
"flex-basis",
"place-content",
"place-items",
"place-self",
"column-count",
"column-fill",
"column-gap",
"column-rule-color",
"column-rule-style",
"column-rule-width",
"column-span",
"column-width"
]
},
{
"groupName": "typography",
"emptyLineBefore": "always",
"emptyLineBetween": "never",
"properties": [
"float",
"clear",
"direction",
"writing-mode",
"font-family",
"font-feature-settings",
"font-kerning",
"font-optical-sizing",
"font-palette",
"font-size",
"font-size-adjust",
"font-stretch",
"font-style",
"font-synthesis-small-caps",
"font-synthesis-style",
"font-synthesis-weight",
"font-variant-alternates",
"font-variant-caps",
"font-variant-east-asian",
"font-variant-ligatures",
"font-variant-numeric",
"font-variant-position",
"font-variation-settings",
"font-weight",
"hyphenate-character",
"hyphenate-limit-chars",
"hyphens",
"initial-letter",
"letter-spacing",
"line-break",
"line-height",
"ruby",
"ruby-position",
"tab-size",
"text-align",
"text-align-last",
"text-anchor",
"text-combine-upright",
"text-decoration-color",
"text-decoration-line",
"text-decoration-skip-ink",
"text-decoration-style",
"text-decoration-thickness",
"text-emphasis-color",
"text-emphasis-position",
"text-emphasis-style",
"text-indent",
"text-orientation",
"text-overflow",
"text-rendering",
"text-shadow",
"text-size-adjust",
"text-transform",
"text-underline-offset",
"text-underline-position",
"text-wrap",
"vertical-align",
"white-space-collapse",
"word-break",
"word-spacing",
"orphans",
"widows",
"-webkit-font-smoothing",
"-webkit-text-orientation"
]
},
{
"groupName": "animation",
"emptyLineBefore": "always",
"emptyLineBetween": "never",
"properties": [
"animation",
"animation-composition",
"animation-delay",
"animation-direction",
"animation-duration",
"animation-fill-mode",
"animation-iteration-count",
"animation-name",
"animation-play-state",
"animation-range-end",
"animation-range-start",
"animation-timeline",
"animation-timing-function",
"transition",
"transition-behavior",
"transition-delay",
"transition-duration",
"transition-property",
"transition-timing-function",
"view-timeline-axis",
"view-timeline-inset",
"view-timeline-name",
"view-transition-name",
"will-change",
"offset-anchor",
"offset-distance",
"offset-path",
"offset-position",
"offset-rotate",
"timeline-scope"
]
},
{
"groupName": "appearance",
"emptyLineBefore": "always",
"emptyLineBetween": "never",
"properties": [
"accent-color",
"backdrop-filter",
"backface-visibility",
"background-attachment",
"background-blend-mode",
"background-clip",
"background-color",
"background-image",
"background-origin",
"background-position-x",
"background-position-y",
"background-repeat",
"background-size",
"border-end-end-radius",
"box-shadow",
"caret-color",
"clip",
"clip-path",
"clip-rule",
"color",
"color-scheme",
"container-name",
"container-type",
"content-visibility",
"cursor",
"field-sizing",
"filter",
"forced-color-adjust",
"image-orientation",
"image-rendering",
"list-style-image",
"list-style-position",
"list-style-type",
"mask-clip",
"mask-composite",
"mask-image",
"mask-mode",
"mask-origin",
"mask-repeat",
"mask-size",
"mask-type",
"mix-blend-mode",
"opacity",
"outline-color",
"outline-offset",
"outline-style",
"outline-width",
"rotate",
"scale",
"shape-image-threshold",
"shape-margin",
"shape-outside",
"shape-rendering",
"transform",
"transform-box",
"transform-origin",
"transform-style",
"translate",
"zoom"
]
},
{
"groupName": "misc",
"emptyLineBefore": "always",
"emptyLineBetween": "never",
"properties": [
"resize",
"-webkit-locale",
"-webkit-box-align",
"-webkit-box-decoration-break",
"-webkit-box-direction",
"-webkit-box-flex",
"-webkit-box-ordinal-group",
"-webkit-box-orient",
"-webkit-box-pack",
"-webkit-box-reflect",
"-webkit-line-clamp",
"-webkit-mask-box-image-outset",
"-webkit-mask-box-image-repeat",
"-webkit-mask-box-image-slice",
"-webkit-mask-box-image-source",
"-webkit-mask-box-image-width",
"-webkit-mask-position-x",
"-webkit-mask-position-y",
"-webkit-perspective-origin-x",
"-webkit-perspective-origin-y",
"-webkit-print-color-adjust",
"-webkit-rtl-ordering",
"-webkit-ruby-position",
"-webkit-tap-highlight-color",
"-webkit-text-combine",
"-webkit-text-decorations-in-effect",
"-webkit-text-fill-color",
"-webkit-text-security",
"-webkit-text-stroke-color",
"-webkit-text-stroke-width",
"-webkit-transform-origin-x",
"-webkit-transform-origin-y",
"-webkit-transform-origin-z",
"-webkit-user-drag",
"-webkit-user-modify",
"alignment-baseline",
"all",
"anchor-default",
"anchor-name",
"app-region",
"appearance",
"baseline-shift",
"baseline-source",
"buffered-rendering",
"color-interpolation-filters",
"color-interpolation",
"color-rendering",
"contain-intrinsic-block-size",
"contain-intrinsic-height",
"contain-intrinsic-inline-size",
"contain-intrinsic-width",
"contain",
"content",
"counter-increment",
"counter-reset",
"counter-set",
"cx",
"cy",
"d",
"dominant-baseline",
"dynamic-range-limit",
"fill-opacity",
"fill-rule",
"fill",
"flood-color",
"flood-opacity",
"lighting-color",
"marker-end",
"marker-mid",
"marker-start",
"math-depth",
"math-shift",
"math-style",
"overlay",
"overscroll-behavior-block",
"overscroll-behavior-inline",
"overscroll-behavior-x",
"overscroll-behavior-y",
"paint-order",
"perspective-origin",
"perspective",
"pointer-events",
"popover-hide-delay",
"popover-show-delay",
"quotes",
"r",
"rx",
"ry",
"scroll-behavior",
"scroll-margin-block-end",
"scroll-margin-block-start",
"scroll-margin-bottom",
"scroll-margin-inline-end",
"scroll-margin-inline-start",
"scroll-margin-left",
"scroll-margin-right",
"scroll-margin-top",
"scroll-padding-block-end",
"scroll-padding-block-start",
"scroll-padding-bottom",
"scroll-padding-inline-end",
"scroll-padding-inline-start",
"scroll-padding-left",
"scroll-padding-right",
"scroll-padding-top",
"scroll-snap-align",
"scroll-snap-stop",
"scroll-snap-type",
"scroll-timeline-axis",
"scroll-timeline-name",
"scrollbar-color",
"scrollbar-gutter",
"scrollbar-width",
"size",
"speak",
"stop-color",
"stop-opacity",
"stroke-dasharray",
"stroke-dashoffset",
"stroke-linecap",
"stroke-linejoin",
"stroke-miterlimit",
"stroke-opacity",
"stroke-width",
"stroke",
"touch-action",
"unicode-bidi",
"user-select",
"vector-effect",
"x",
"y"
]
}
],
{
"unspecified": "bottom",
"emptyLineBeforeUnspecified": "threshold",
"emptyLineMinimumPropertyThreshold": 4
}
]
}
}
Extension Configuration
No response
Actual Behaviour
No error no changes
Expected Behaviour
Get the properties sorted in the defined manner
Logs
Haven't got any information in this for a long time but now it shows:
hello-world.scss: you should use the "customSyntax" option when linting something other than CSS
hello-world.scss: you should use the "customSyntax" option when linting something other than CSS
Even get this issue for CSS Files
Stylelint Version
15.11.0
vscode-stylelint Version
1.3.0
Node.js Version
v16.20.2
Operating System
MacOS 14.2.1 (23C71)
Windows Subsystem for Linux
No response
Code of Conduct
- [X] I agree to follow vscode-stylelint's Code of Conduct
@StfBauer Thanks for the report with a reproducible repo. Some settings seem necessary. Can you try the below?
- Update
.stylelintrc.jsto includecustomSyntaxinoverrides. E.g.module.exports = { overrides: [ { files: ["*.scss"], customSyntax: "postcss-scss", plugins: ["stylelint-scss"], }, ], } - Update
.vscode/settings.jsonlike this (see also the readme):{ - "css.validate": true, - "less.validate": true, - "scss.validate": true, + "css.validate": false, + "less.validate": false, + "scss.validate": false, + "stylelint.configFile": ".stylelintrc.js", + "stylelint.validate": ["css", "scss"], "editor.codeActionsOnSave": { "source.fixAll.stylelint": "explicit" } }
@ybiquitous Sadly haven't changed anything :(
Update the repo. On the console I get
you should use the "customSyntax" option when linting something other than CSS
as a quasi error message.
Thanks for updating the repo. When I tried https://github.com/StfBauer/temp-stylelint-debug/commit/9ba263368d896859e7393ce3fd0e471f80272707, but it worked 👌🏼
Diff of hello-world.scss
diff --git a/hello-world.scss b/hello-world.scss
index bf87474..e678bc2 100644
--- a/hello-world.scss
+++ b/hello-world.scss
@@ -1,8 +1,22 @@
@use "sass:meta";
body {
+ position: absolute;
+
+
+ position: absolute;
+ z-index: 1000;
+ z-index: 1000;
+ top: 0;
+ top: 300px;
+ top: 0;
+ top: 300px;
+ right: 20px;
+ right: 20px;
+ bottom: 100px;
+ bottom: 100px;
-
+
isolation: isolate;
display: block;
@@ -19,26 +33,15 @@ body {
margin: 300px !important;
+ font-family: "Courier New", Courier, monospace;
+ font-size: 20px;
+ font-weight: 300px;
+
transition: all ease-in 1s;
background-color: lime;
- position: absolute;
- z-index: 1000;
- top: 0;
- top: 300px;
- right: 20px;
- bottom: 100px;
-
-
- position: absolute;
- z-index: 1000;
- top: 0;
- top: 300px;
- right: 20px;
- bottom: 100px;
-
@@ -54,10 +57,6 @@ body {
content: "Hello world";
}
- font-family: "Courier New", Courier, monospace;
- font-size: 20px;
- font-weight: 300px;
-
}
div {
The extension log
[Info - 2:01:20 AM] [language-server] Registering module | module: "auto-fix"
[Info - 2:01:20 AM] [language-server] Module registered | module: "auto-fix"
[Info - 2:01:20 AM] [language-server] Registering module | module: "code-action"
[Info - 2:01:20 AM] [language-server] Module registered | module: "code-action"
[Info - 2:01:20 AM] [language-server] Registering module | module: "completion"
[Info - 2:01:20 AM] [language-server] Module registered | module: "completion"
[Info - 2:01:20 AM] [language-server] Registering module | module: "formatter"
[Info - 2:01:20 AM] [language-server] Module registered | module: "formatter"
[Info - 2:01:20 AM] [language-server] Registering module | module: "old-stylelint-warning"
[Info - 2:01:20 AM] [language-server] Module registered | module: "old-stylelint-warning"
[Info - 2:01:20 AM] [language-server] Registering module | module: "validator"
[Info - 2:01:20 AM] [language-server] Module registered | module: "validator"
[Info - 2:01:20 AM] [language-server] Starting language server
[Info - 2:01:20 AM] [language-server] Registering handlers
[Info - 2:01:20 AM] [language-server] Handlers registered
[Info - 2:01:20 AM] [language-server] Language server started
Screenshot
Have I missed something in the general configuration? This is the behaviour I encounter.
https://github.com/stylelint/vscode-stylelint/assets/5503835/3b22c360-3c40-489a-a187-0f118fed267d
In my environment, you should use the "customSyntax" option when linting something other than CSS message is never shown in OUTPUT. 🤔
Yeah I know - Pretty strange issue, I experimented a while before I raised the issue. Could it be an ARM vs Intel issue?
When trying the lint in Terminal, do you get the following output?
$ npx stylelint '*.scss'
hello-world.scss
6:5 ✖ Unexpected empty line before property "isolation" order/properties-order
27:5 ✖ Expected "position" to come before "background-color" in group "position" order/properties-order
35:5 ✖ Expected "position" to come before "bottom" in group "position" order/properties-order
57:5 ✖ Expected "font-family" to come before "content" in group "typography" order/properties-order
4 problems (4 errors, 0 warnings)
Hum, have you tried restarting Stylelint langserver or VSCode? If that didn't resolve the problem, I don't know why... 🤷🏼
I tried it on a blank repo to, without the sorting rules or config. It works without any problem but not with that CSSComb like ordering of properties.
@ybiquitous is there something I can do do enable advanced debugging. Something like verbose logging?
Well, if you can check out this repository and try the dev version locally, you should see debug logs. Otherwise, there may not be a way to turn on debug logs for now... 🤔
https://github.com/stylelint/vscode-stylelint/blob/2d4c76cfe6e99b7fac7ce30304b4e6bb3cbab521/src/extension/start-server.ts#L9-L12
@ybiquitous Yeah I think I will do this. Tried to create a .env file in the extension folder but somehow it does not seem to reflect it in the dist build
I debugged now directly with the extension cause the other option haven't worked.
I mean It does not through any error but doesn't do anything at all.
The syntax warning I only get from this piece of code.
While I was debugging it further I got the following error:
FFW:
Which appears then a couple of times.
Any idea?
Thanks for debugging. I have two questions:
-
css.validateandscss.validatein.vscode/settings.jsonaretrue. Should these befalse? - Can you update Stylelint to v16?
@ybiquitous I hate to be the bearer of bad news but nothing happened.
- Node 18
- Stylelint
{
"dependencies": {
"postcss-scss": "^4.0.9",
"stylelint": "^16.2.1",
"stylelint-order": "^6.0.4",
"stylelint-scss": "^6.1.0"
},
}
Well the settings under .vscode had no effect so I changed those in the global Settings json even though I have disabled it it was still active.
While on the other hand I only see on backend:
Not sure is it me or something else 😭
I think I have the same problem. Seemed like stylelint didn't pickup my .yaml config file. It turns out my setting.json in vs code had:
"stylelint.config": {
}
After deleting it stylelint was using my local .yaml config file correctly.
Hey folks was looking into this for Griffel postcss syntax and found that there were some malformed headers in vscode.
I upgraded the language server dependencies to the latest major versions and it has fixed this issue for me - where stylelint seems like it's doing nothing. Once the vscode language server crashes it doesn't seem to recover correctly and needs a hard reload of vscode to recover ... until the malformed data error occurs again :-)
I've submitted PR https://github.com/stylelint/vscode-stylelint/pull/521 to fix
@StfBauer @ybiquitous
@ling1726 - Thank you very much - hope this get merged and released soon as well as solve the problem. 🙏