Migrate stylelint to latest for security updates

[tlylt]

Please confirm that you have searched existing issues in the repo

Yes, I have searched the existing issues

Any related issues?

#2666

Tell us about your environment

Windows 10

MarkBind version

Master branch

Describe the bug and the steps to reproduce it

Stylelint is outdated and migrating it to latest is necessary for a security update (See #2666). This cannot be done automatically due to differences across the versions. See the CI check error in that PR (copied below for reference).

csslint
stylelint **/.css **/.vue

/home/runner/work/markbind/markbind/packages/vue-components/src/Box.vue: you should use the "customSyntax" option when linting something other than CSS
/home/runner/work/markbind/markbind/packages/vue-components/src/Breadcrumb.vue: you should use the "customSyntax" option when linting something other than CSS
/home/runner/work/markbind/markbind/packages/vue-components/src/CollapseExpandButtons.vue: you should use the "customSyntax" option when linting something other than CSS
/home/runner/work/markbind/markbind/packages/vue-components/src/Dropdown.vue: you should use the "customSyntax" option when linting something other than CSS
/home/runner/work/markbind/markbind/packages/vue-components/src/Modal.vue: you should use the "customSyntax" option when linting something other than CSS
/home/runner/work/markbind/markbind/packages/vue-components/src/Navbar.vue: you should use the "customSyntax" option when linting something other than CSS
/home/runner/work/markbind/markbind/packages/vue-components/src/Overlay.vue: you should use the "customSyntax" option when linting something other than CSS
/home/runner/work/markbind/markbind/packages/vue-components/src/OverlaySource.vue: you should use the "customSyntax" option when linting something other than CSS
/home/runner/work/markbind/markbind/packages/vue-components/src/PageNavButton.vue: you should use the "customSyntax" option when linting something other than CSS
/home/runner/work/markbind/markbind/packages/vue-components/src/Panel.vue: you should use the "customSyntax" option when linting something other than CSS
/home/runner/work/markbind/markbind/packages/vue-components/src/Pic.vue: you should use the "customSyntax" option when linting something other than CSS
/home/runner/work/markbind/markbind/packages/vue-components/src/Popover.vue: you should use the "customSyntax" option when linting something other than CSS
/home/runner/work/markbind/markbind/packages/vue-components/src/Retriever.vue: you should use the "customSyntax" option when linting something other than CSS
/home/runner/work/markbind/markbind/packages/vue-components/src/ScrollTopButton.vue: you should use the "customSyntax" option when linting something other than CSS
/home/runner/work/markbind/markbind/packages/vue-components/src/Searchbar.vue: you should use the "customSyntax" option when linting something other than CSS
/home/runner/work/markbind/markbind/packages/vue-components/src/SearchbarPageItem.vue: you should use the "customSyntax" option when linting something other than CSS
/home/runner/work/markbind/markbind/packages/vue-components/src/SiteNav.vue: you should use the "customSyntax" option when linting something other than CSS
/home/runner/work/markbind/markbind/packages/vue-components/src/SiteNavButton.vue: you should use the "customSyntax" option when linting something other than CSS
/home/runner/work/markbind/markbind/packages/vue-components/src/Submenu.vue: you should use the "customSyntax" option when linting something other than CSS
/home/runner/work/markbind/markbind/packages/vue-components/src/Tab.vue: you should use the "customSyntax" option when linting something other than CSS
/home/runner/work/markbind/markbind/packages/vue-components/src/TabGroup.vue: you should use the "customSyntax" option when linting something other than CSS
/home/runner/work/markbind/markbind/packages/vue-components/src/Tabset.vue: you should use the "customSyntax" option when linting something other than CSS
/home/runner/work/markbind/markbind/packages/vue-components/src/Thumbnail.vue: you should use the "customSyntax" option when linting something other than CSS
/home/runner/work/markbind/markbind/packages/vue-components/src/Tooltip.vue: you should use the "customSyntax" option when linting something other than CSS
/home/runner/work/markbind/markbind/packages/vue-components/src/Trigger.vue: you should use the "customSyntax" option when linting something other than CSS
/home/runner/work/markbind/markbind/packages/vue-components/src/annotations/Annotate.vue: you should use the "customSyntax" option when linting something other than CSS
/home/runner/work/markbind/markbind/packages/vue-components/src/annotations/AnnotatePoint.vue: you should use the "customSyntax" option when linting something other than CSS
/home/runner/work/markbind/markbind/packages/vue-components/src/panels/MinimalPanel.vue: you should use the "customSyntax" option when linting something other than CSS
/home/runner/work/markbind/markbind/packages/vue-components/src/panels/NestedPanel.vue: you should use the "customSyntax" option when linting something other than CSS
/home/runner/work/markbind/markbind/packages/vue-components/src/panels/PanelSwitch.vue: you should use the "customSyntax" option when linting something other than CSS
/home/runner/work/markbind/markbind/packages/vue-components/src/questions/QOption.vue: you should use the "customSyntax" option when linting something other than CSS
/home/runner/work/markbind/markbind/packages/vue-components/src/questions/Question.vue: you should use the "customSyntax" option when linting something other than CSS
/home/runner/work/markbind/markbind/packages/vue-components/src/questions/Quiz.vue: you should use the "customSyntax" option when linting something other than CSS

Deprecation warnings:

• The "at-rule-name-case" rule is deprecated.
• The "at-rule-name-space-after" rule is deprecated.
• The "at-rule-semicolon-newline-after" rule is deprecated.
• The "block-closing-brace-empty-line-before" rule is deprecated.
• The "block-closing-brace-newline-after" rule is deprecated.
• The "block-closing-brace-newline-before" rule is deprecated.
• The "block-closing-brace-space-before" rule is deprecated.
• The "block-opening-brace-newline-after" rule is deprecated.
• The "block-opening-brace-space-after" rule is deprecated.
• The "block-opening-brace-space-before" rule is deprecated.
• The "color-hex-case" rule is deprecated.
• The "declaration-bang-space-after" rule is deprecated.
• The "declaration-bang-space-before" rule is deprecated.
• The "declaration-block-semicolon-newline-after" rule is deprecated.
• The "declaration-block-semicolon-space-after" rule is deprecated.
• The "declaration-block-semicolon-space-before" rule is deprecated.
• The "declaration-block-trailing-semicolon" rule is deprecated.
• The "declaration-colon-newline-after" rule is deprecated.
• The "declaration-colon-space-after" rule is deprecated.
• The "declaration-colon-space-before" rule is deprecated.
• The "function-comma-newline-after" rule is deprecated.
• The "function-comma-space-after" rule is deprecated.
• The "function-comma-space-before" rule is deprecated.
• The "function-max-empty-lines" rule is deprecated.
• The "function-parentheses-newline-inside" rule is deprecated.
• The "function-parentheses-space-inside" rule is deprecated.
• The "function-whitespace-after" rule is deprecated.
• The "max-empty-lines" rule is deprecated.
• The "media-feature-colon-space-after" rule is deprecated.
• The "media-feature-colon-space-before" rule is deprecated.
• The "media-feature-name-case" rule is deprecated.
• The "media-feature-parentheses-space-inside" rule is deprecated.
• The "media-feature-range-operator-space-after" rule is deprecated.
• The "media-feature-range-operator-space-before" rule is deprecated.
• The "media-query-list-comma-newline-after" rule is deprecated.
• The "media-query-list-comma-space-after" rule is deprecated.
• The "media-query-list-comma-space-before" rule is deprecated.
• The "no-eol-whitespace" rule is deprecated.
• The "no-extra-semicolons" rule is deprecated.
• The "no-missing-end-of-source-newline" rule is deprecated.
• The "number-leading-zero" rule is deprecated.
• The "number-no-trailing-zeros" rule is deprecated.
• The "property-case" rule is deprecated.
• The "selector-attribute-brackets-space-inside" rule is deprecated.
• The "selector-attribute-operator-space-after" rule is deprecated.
• The "selector-attribute-operator-space-before" rule is deprecated.
• The "selector-combinator-space-after" rule is deprecated.
• The "selector-combinator-space-before" rule is deprecated.
• The "selector-descendant-combinator-no-non-space" rule is deprecated.
• The "selector-list-comma-newline-after" rule is deprecated.
• The "selector-list-comma-space-before" rule is deprecated.
• The "selector-max-empty-lines" rule is deprecated.
• The "selector-pseudo-class-case" rule is deprecated.
• The "selector-pseudo-class-parentheses-space-inside" rule is deprecated.
• The "selector-pseudo-element-case" rule is deprecated.
• The "unit-case" rule is deprecated.
• The "value-list-comma-newline-after" rule is deprecated.
• The "value-list-comma-space-after" rule is deprecated.
• The "value-list-comma-space-before" rule is deprecated.
• The "value-list-max-empty-lines" rule is deprecated.
• The "indentation" rule is deprecated.

docs/css/main.css
1:1 ✖ Unknown rule function-calc-no-invalid function-calc-no-invalid

packages/core-web/src/styles/index.css
1:1 ✖ Unknown rule function-calc-no-invalid function-calc-no-invalid

packages/core-web/src/styles/markbind.css
1:1 ✖ Unknown rule function-calc-no-invalid function-calc-no-invalid

packages/core-web/src/styles/page-nav.css
1:1 ✖ Unknown rule function-calc-no-invalid function-calc-no-invalid

packages/core/src/plugins/default/markbind-plugin-anchors.css
1:1 ✖ Unknown rule function-calc-no-invalid function-calc-no-invalid

packages/core/src/plugins/default/markbind-plugin-tree.css
1:1 ✖ Unknown rule function-calc-no-invalid function-calc-no-invalid

packages/core/src/plugins/web3FormAssets/web-3-form.css
1:1 ✖ Unknown rule function-calc-no-invalid function-calc-no-invalid

packages/core/template/default/stylesheets/main.css
1:1 ✖ Unknown rule function-calc-no-invalid function-calc-no-invalid

packages/cli/test/functional/test_site/stylesheets/red-heading.css
1:1 ✖ Unknown rule function-calc-no-invalid function-calc-no-invalid

packages/cli/test/functional/test_site/stylesheets/styles.css
1:1 ✖ Unknown rule function-calc-no-invalid function-calc-no-invalid

packages/cli/test/functional/test_site/_markbind/plugins/testMarkbindPluginStylesheet.css
1:1 ✖ Unknown rule function-calc-no-invalid function-calc-no-invalid

packages/cli/test/functional/test_site_convert/test_basic_convert/non_markbind_site/stylesheets/main.css
1:1 ✖ Unknown rule function-calc-no-invalid function-calc-no-invalid

packages/cli/test/functional/test_site_convert/test_navigation_convert/non_markbind_site/stylesheets/main.css
1:1 ✖ Unknown rule function-calc-no-invalid function-calc-no-invalid

packages/vue-components/src/Box.vue
111:10 ✖ Unknown word CssSyntaxError

packages/vue-components/src/Breadcrumb.vue
1:1 ✖ Unknown word CssSyntaxError

packages/vue-components/src/CollapseExpandButtons.vue
23:7 ✖ Unknown word CssSyntaxError

packages/vue-components/src/Dropdown.vue
2:3 ✖ Unknown word CssSyntaxError

packages/vue-components/src/Modal.vue
40:14 ✖ Unknown word CssSyntaxError

packages/vue-components/src/Navbar.vue
2:3 ✖ Unknown word CssSyntaxError

packages/vue-components/src/Overlay.vue
22:10 ✖ Unknown word CssSyntaxError

packages/vue-components/src/OverlaySource.vue
19:10 ✖ Unknown word CssSyntaxError

packages/vue-components/src/PageNavButton.vue
2:3 ✖ Unknown word CssSyntaxError

packages/vue-components/src/Panel.vue
2:3 ✖ Unknown word CssSyntaxError

packages/vue-components/src/Pic.vue
19:10 ✖ Unknown word CssSyntaxError

packages/vue-components/src/Popover.vue
48:10 ✖ Unknown word CssSyntaxError

packages/vue-components/src/Retriever.vue
10:10 ✖ Unknown word CssSyntaxError

packages/vue-components/src/ScrollTopButton.vue
19:20 ✖ Missed semicolon CssSyntaxError

packages/vue-components/src/Searchbar.vue
20:12 ✖ Unknown word CssSyntaxError

packages/vue-components/src/SearchbarPageItem.vue
27:20 ✖ Missed semicolon CssSyntaxError

packages/vue-components/src/SiteNav.vue
1:1 ✖ Unknown word CssSyntaxError

packages/vue-components/src/SiteNavButton.vue
2:3 ✖ Unknown word CssSyntaxError

packages/vue-components/src/Submenu.vue
26:10 ✖ Unknown word CssSyntaxError

packages/vue-components/src/Tab.vue
18:10 ✖ Unknown word CssSyntaxError

packages/vue-components/src/TabGroup.vue
11:10 ✖ Unknown word CssSyntaxError

packages/vue-components/src/Tabset.vue
50:10 ✖ Unknown word CssSyntaxError

packages/vue-components/src/Thumbnail.vue
2:3 ✖ Unknown word CssSyntaxError

packages/vue-components/src/Tooltip.vue
35:10 ✖ Unknown word CssSyntaxError

packages/vue-components/src/Trigger.vue
57:10 ✖ Unknown word CssSyntaxError

packages/vue-components/src/annotations/Annotate.vue
19:10 ✖ Unknown word CssSyntaxError

packages/vue-components/src/annotations/AnnotatePoint.vue
5:12 ✖ Unknown word CssSyntaxError

packages/vue-components/src/panels/MinimalPanel.vue
2:3 ✖ Unknown word CssSyntaxError

packages/vue-components/src/panels/NestedPanel.vue
2:3 ✖ Unknown word CssSyntaxError

packages/vue-components/src/panels/PanelSwitch.vue
14:10 ✖ Unknown word CssSyntaxError

packages/vue-components/src/questions/QOption.vue
2:8 ✖ Unknown word CssSyntaxError

packages/vue-components/src/questions/Question.vue
2:3 ✖ Unknown word CssSyntaxError

packages/vue-components/src/questions/Quiz.vue
12:18 ✖ Unknown word CssSyntaxError

46 problems (46 errors, 0 warnings)

Expected behavior

Migrate stylelint with appropriate updates to the current configurations, according to their migration guide: https://stylelint.io/

Anything else?

No response

[WillCWX]

Can I try doing this migration?

[WillCWX]

It seems that stylelint is moving to remove a lot of its features and to reimplement them may require more dependencies.

Before I move on, I would like to know how we feel about adding more dependencies.

Styling Vue files

We have been using stylelint to check .vue files but it is not supported by default anymore.

It is recommended to use stylelint-config-recommended-vue instead.

The developers mentioned that all non-css extensions will be maintained by communities instead. link to their discussion
We may need to either create and maintain one ourselves or hop from library to library if this stylelint-config-recommended-vue stops being maintained.

Side Note:

The recommended library seems to be more strict than the previous version.
Not sure whether to follow stricter standards or to disable them.

Warning: Long error logs ahead:

107 Errors

docs/css/main.css
  60:5   ✖  Expected "0.8rem 20px 0 20px" to be "0.8rem 20px 0"  shorthand-property-no-redundant-values
  62:5   ✖  Unexpected vendor-prefix "-webkit-transition"        property-no-vendor-prefix
  85:5   ✖  Expected "0 12px 12px 12px" to be "0 12px 12px"      shorthand-property-no-redundant-values
  96:19  ✖  Expected "context" media feature range notation      media-feature-range-notation
 103:19  ✖  Expected "context" media feature range notation      media-feature-range-notation
 110:8   ✖  Expected "context" media feature range notation      media-feature-range-notation
 121:19  ✖  Expected "context" media feature range notation      media-feature-range-notation

packages/core-web/src/styles/index.css
 1:9  ✖  Expected ""markbind.css"" to be "url("markbind.css")"                                                  import-notation
 2:9  ✖  Expected ""page-nav.css"" to be "url("page-nav.css")"                                                  import-notation
 3:9  ✖  Expected ""~katex/dist/katex.css"" to be "url("~katex/dist/katex.css")"                                import-notation
 4:9  ✖  Expected ""~markdown-it-texmath/css/texmath.css"" to be "url("~markdown-it-texmath/css/texmath.css")"  import-notation

packages/core-web/src/styles/markbind.css
  31:5   ✖  Unexpected vendor-prefix "-webkit-background-clip"  property-no-vendor-prefix
 211:8   ✖  Expected "context" media feature range notation     media-feature-range-notation
 255:31  ✖  Expected "currentColor" to be "currentcolor"        value-keyword-case
 260:31  ✖  Expected "currentColor" to be "currentcolor"        value-keyword-case
 306:11  ✖  Expected "currentColor" to be "currentcolor"        value-keyword-case
 323:27  ✖  Expected modern color-function notation             color-function-notation
 323:40  ✖  Expected "0.1" to be "10%"                          alpha-value-notation

packages/core-web/src/styles/page-nav.css
 4:5  ✖  Expected "0.8rem 12px 0 12px" to be "0.8rem 12px 0"  shorthand-property-no-redundant-values

packages/core/src/plugins/web3FormAssets/web-3-form.css
 1:1  ✖  Expected class selector ".web3Form" to be kebab-case   selector-class-pattern
 2:1  ✖  Expected class selector " .web3Form" to be kebab-case  selector-class-pattern
 3:1  ✖  Expected class selector " .web3Form" to be kebab-case  selector-class-pattern

packages/core/template/default/stylesheets/main.css
  60:5   ✖  Expected "0.8rem 20px 0 20px" to be "0.8rem 20px 0"  shorthand-property-no-redundant-values
  62:5   ✖  Unexpected vendor-prefix "-webkit-transition"        property-no-vendor-prefix
  85:5   ✖  Expected "0 12px 12px 12px" to be "0 12px 12px"      shorthand-property-no-redundant-values
  96:19  ✖  Expected "context" media feature range notation      media-feature-range-notation
 103:19  ✖  Expected "context" media feature range notation      media-feature-range-notation
 110:8   ✖  Expected "context" media feature range notation      media-feature-range-notation
 121:19  ✖  Expected "context" media feature range notation      media-feature-range-notation

packages/cli/test/functional/test_site/stylesheets/styles.css
  60:5   ✖  Expected "0.8rem 20px 0 20px" to be "0.8rem 20px 0"  shorthand-property-no-redundant-values
  62:5   ✖  Unexpected vendor-prefix "-webkit-transition"        property-no-vendor-prefix
  85:5   ✖  Expected "0 12px 12px 12px" to be "0 12px 12px"      shorthand-property-no-redundant-values
  96:19  ✖  Expected "context" media feature range notation      media-feature-range-notation
 103:19  ✖  Expected "context" media feature range notation      media-feature-range-notation
 114:8   ✖  Expected "context" media feature range notation      media-feature-range-notation
 125:19  ✖  Expected "context" media feature range notation      media-feature-range-notation

packages/cli/test/functional/test_site_convert/test_basic_convert/non_markbind_site/stylesheets/main.css
  60:5   ✖  Expected "0.8rem 20px 0 20px" to be "0.8rem 20px 0"  shorthand-property-no-redundant-values
  62:5   ✖  Unexpected vendor-prefix "-webkit-transition"        property-no-vendor-prefix
  85:5   ✖  Expected "0 12px 12px 12px" to be "0 12px 12px"      shorthand-property-no-redundant-values
  96:19  ✖  Expected "context" media feature range notation      media-feature-range-notation
 103:19  ✖  Expected "context" media feature range notation      media-feature-range-notation
 114:8   ✖  Expected "context" media feature range notation      media-feature-range-notation
 125:19  ✖  Expected "context" media feature range notation      media-feature-range-notation

packages/cli/test/functional/test_site_convert/test_navigation_convert/non_markbind_site/stylesheets/main.css
  60:5   ✖  Expected "0.8rem 20px 0 20px" to be "0.8rem 20px 0"  shorthand-property-no-redundant-values
  62:5   ✖  Unexpected vendor-prefix "-webkit-transition"        property-no-vendor-prefix
  85:5   ✖  Expected "0 12px 12px 12px" to be "0 12px 12px"      shorthand-property-no-redundant-values
  96:19  ✖  Expected "context" media feature range notation      media-feature-range-notation
 103:19  ✖  Expected "context" media feature range notation      media-feature-range-notation
 110:8   ✖  Expected "context" media feature range notation      media-feature-range-notation
 121:19  ✖  Expected "context" media feature range notation      media-feature-range-notation

packages/vue-components/src/Box.vue
 289:9   ✖  Expected "0.4rem 1.25rem 0.28rem 1.25rem" to be "0.4rem 1.25rem 0.28rem"  shorthand-property-no-redundant-values
 319:27  ✖  Expected modern color-function notation                                   color-function-notation
 319:47  ✖  Expected "0.6" to be "60%"                                                alpha-value-notation
 321:9   ✖  Expected "3px 5px 4px 5px" to be "3px 5px 4px"                            shorthand-property-no-redundant-values
 323:9   ✖  Expected "0 6px 0 6px" to be "0 6px"                                      shorthand-property-no-redundant-values
 395:23  ✖  Expected "context" media feature range notation                           media-feature-range-notation

packages/vue-components/src/Dropdown.vue
 192:12  ✖  Expected "context" media feature range notation  media-feature-range-notation

packages/vue-components/src/Modal.vue
 139:9  ✖  Unexpected vendor-prefix "-webkit-transform"   property-no-vendor-prefix
 140:9  ✖  Unexpected vendor-prefix "-moz-transform"      property-no-vendor-prefix
 141:9  ✖  Unexpected vendor-prefix "-ms-transform"       property-no-vendor-prefix
 144:9  ✖  Unexpected vendor-prefix "-webkit-transition"  property-no-vendor-prefix
 145:9  ✖  Unexpected vendor-prefix "-moz-transition"     property-no-vendor-prefix
 150:9  ✖  Unexpected vendor-prefix "-webkit-transform"   property-no-vendor-prefix
 151:9  ✖  Unexpected vendor-prefix "-moz-transform"      property-no-vendor-prefix
 152:9  ✖  Unexpected vendor-prefix "-ms-transform"       property-no-vendor-prefix
 155:9  ✖  Unexpected vendor-prefix "-webkit-transition"  property-no-vendor-prefix
 156:9  ✖  Unexpected vendor-prefix "-moz-transition"     property-no-vendor-prefix

packages/vue-components/src/Navbar.vue
 286:12  ✖  Expected "context" media feature range notation  media-feature-range-notation
 333:25  ✖  Expected modern color-function notation          color-function-notation
 333:39  ✖  Expected "0.2" to be "20%"                       alpha-value-notation
 339:25  ✖  Expected modern color-function notation          color-function-notation
 339:39  ✖  Expected "0.05" to be "5%"                       alpha-value-notation

packages/vue-components/src/Searchbar.vue
 273:23  ✖  Expected "context" media feature range notation  media-feature-range-notation
 281:23  ✖  Expected "context" media feature range notation  media-feature-range-notation
 281:46  ✖  Expected "context" media feature range notation  media-feature-range-notation
 289:27  ✖  Expected modern color-function notation          color-function-notation
 289:41  ✖  Expected "0.075" to be "7.5%"                    alpha-value-notation
 320:23  ✖  Expected "context" media feature range notation  media-feature-range-notation

packages/vue-components/src/SiteNav.vue
  84:27  ✖  Expected modern color-function notation        color-function-notation
  84:47  ✖  Expected "0.35" to be "35%"                    alpha-value-notation
 117:9   ✖  Expected "0 0 0 0" to be "0"                   shorthand-property-no-redundant-values
 120:9   ✖  Unexpected vendor-prefix "-webkit-transition"  property-no-vendor-prefix
 121:9   ✖  Unexpected vendor-prefix "-webkit-transform"   property-no-vendor-prefix
 131:9   ✖  Unexpected vendor-prefix "-webkit-transform"   property-no-vendor-prefix
 139:9   ✖  Unexpected vendor-prefix "-webkit-transition"  property-no-vendor-prefix
 145:9   ✖  Unexpected vendor-prefix "-webkit-transition"  property-no-vendor-prefix

packages/vue-components/src/Submenu.vue
 153:12  ✖  Expected "context" media feature range notation  media-feature-range-notation
 169:12  ✖  Expected "context" media feature range notation  media-feature-range-notation

packages/vue-components/src/Thumbnail.vue
 134:9  ✖  Unexpected vendor-prefix "-moz-border-radius"     property-no-vendor-prefix
 135:9  ✖  Unexpected vendor-prefix "-webkit-border-radius"  property-no-vendor-prefix
 143:9  ✖  Unexpected vendor-prefix "-ms-transform"          property-no-vendor-prefix
 144:9  ✖  Unexpected vendor-prefix "-webkit-transform"      property-no-vendor-prefix

packages/vue-components/src/Tooltip.vue
 74:5   ✖  Expected class selector ".v-popper--theme-tooltip" to be kebab-case  selector-class-pattern
 74:30  ✖  Expected class selector ".v-popper__inner" to be kebab-case          selector-class-pattern
 76:21  ✖  Expected modern color-function notation                              color-function-notation
 76:35  ✖  Expected "0.9" to be "90%"                                           alpha-value-notation

packages/vue-components/src/panels/MinimalPanel.vue
 254:23  ✖  Expected modern color-function notation          color-function-notation
 254:43  ✖  Expected "0.2" to be "20%"                       alpha-value-notation
 286:16  ✖  Expected modern color-function notation          color-function-notation
 294:16  ✖  Expected modern color-function notation          color-function-notation
 318:12  ✖  Expected "context" media feature range notation  media-feature-range-notation

packages/vue-components/src/panels/NestedPanel.vue
 349:12  ✖  Expected "context" media feature range notation  media-feature-range-notation

packages/vue-components/src/questions/QOption.vue
 307:9  ✖  Expected "0.2rem 0 0 0" to be "0.2rem 0 0"  shorthand-property-no-redundant-values

packages/vue-components/src/questions/Quiz.vue
 207:17  ✖  Expected modern color-function notation  color-function-notation
 207:37  ✖  Expected "0.8" to be "80%"               alpha-value-notation
 214:17  ✖  Expected modern color-function notation  color-function-notation
 214:37  ✖  Expected "0.5" to be "50%"               alpha-value-notation

107 problems (107 errors, 0 warnings)

Deprecated Stylistic rules

stylelint will remove all "stylistic" / formatting rules that are found in prettier in the next iteration.

It is recommended to use either library, styelistic or code-guide.

Alternatively we can bring prettier in as stylelint seems to want to complement prettier in development. link to their discussion

!! Note !!

When updating the stylelint peer stylelint-config-standard, the deprecated rules were already removed in a previous version...

[tlylt]

Before I move on, I would like to know how we feel about adding more dependencies.

Depends on the impact of the dependency.

The recommended library seems to be more strict than the previous version.
Not sure whether to follow stricter standards or to disable them.

Can go with stricter, but need to assess if all errors that are being flagged now can be rectified/worth rectifying/any concerns

It is recommended to use either library, styelistic or code-guide.
Alternatively we can bring prettier in as stylelint seems to want to complement prettier in development. stylelint/stylelint#6342

Can with the former, and put the prettier option up as another issue for discussion

---

Hope that answers all your questions. Before you proceed, could you summarize your intended actions just so we are on the same page pls.