vscode-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
- I agree to follow vscode-stylelint’s Code of Conduct
About this issue
- Original URL
- State: closed
- Created 5 months ago
- Comments: 21 (9 by maintainers)
@ybiquitous I hate to be the bearer of bad news but nothing happened.
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 😭