Deps: Update stylelint and switch to the latest @almacareer/stylelint…

…-config rules
lmc-eu · Aug 26, 2024 · 227ae39 · 227ae39
1 parent 2d7bb32
commit 227ae39
Show file tree

Hide file tree

Showing 12 changed files with 330 additions and 192 deletions.
diff --git a/.stylelintrc b/.stylelintrc
@@ -1,10 +1,14 @@
 {
  "extends": [
- "@lmc-eu/stylelint-config",
- "@lmc-eu/stylelint-config/optional",
- "stylelint-config-prettier"
+ "@almacareer/stylelint-config"
  ],
  "rules": {
- "selector-max-id": null
+ "no-descending-specificity": null,
+ "scss/at-function-pattern": null,
+ "selector-class-pattern": null,
+ "selector-max-class": null,
+ "selector-max-compound-selectors": null,
+ "selector-max-id": null,
+ "selector-max-specificity": null
  }
 }
diff --git a/examples/assets/examples.css b/examples/assets/examples.css
@@ -16,8 +16,8 @@
  --spirit-action-secondary-hover: #737373;
  --spirit-action-secondary-active: #c4c4c4;
  --spirit-background-interactive-default: transparent;
- --spirit-background-interactive-hover: rgba(15, 56, 62, 0.2);
- --spirit-background-interactive-active: rgba(15, 52, 60, 0.3);
+ --spirit-background-interactive-hover: rgb(15 56 62 / 20%);
+ --spirit-background-interactive-active: rgb(15 52 60 / 30%);
  --spirit-radius-100: 0.25em;
  --spirit-emotion-success-background: #f2f5e7;
 
@@ -41,7 +41,7 @@ h2 {
  font-size: 3rem;
 }
 
-@media (min-width: 968px) {
+@media (width >= 968px) {
  body {
  padding-bottom: 280px;
  }
@@ -96,17 +96,17 @@ a:active,
 
 .btn-primary,
 .nav-pills .nav-link.active {
- background-color: var(--spirit-action-primary-default);
  border-color: var(--spirit-action-primary-default);
+ background-color: var(--spirit-action-primary-default);
 }
 
 .btn-primary:hover,
 .btn-primary:focus,
 .nav-pills .nav-link.active:hover,
 .nav-pills .nav-link.active:focus {
  color: var(--spirit-text-primary-inverted-default);
- background-color: var(--spirit-action-primary-hover);
  border-color: var(--spirit-action-primary-hover);
+ background-color: var(--spirit-action-primary-hover);
 }
 
 .btn-primary:active,
@@ -115,44 +115,44 @@ a:active,
 :not(.btn-check) + .btn-primary:active,
 .nav-pills .nav-link.active:active {
  color: var(--spirit-text-primary-inverted-default);
- background-color: var(--spirit-action-primary-active);
  border-color: var(--spirit-action-primary-active);
+ background-color: var(--spirit-action-primary-active);
 }
 
 .btn-outline-primary {
  color: var(--spirit-text-primary-default);
- background-color: var(--spirit-background-interactive-default);
  border-color: var(--spirit-action-secondary-default);
+ background-color: var(--spirit-background-interactive-default);
 }
 
 .btn-outline-primary:hover,
 .btn-outline-primary:focus {
  color: var(--spirit-text-primary-default);
- background-color: var(--spirit-background-interactive-hover);
  border-color: var(--spirit-action-secondary-hover);
+ background-color: var(--spirit-background-interactive-hover);
 }
 
 .btn-outline-primary:active,
 .btn-outline-primary.active,
 .btn-outline-primary:first-child:active,
 :not(.btn-check) + .btn-outline-primary:active {
  color: var(--spirit-text-primary-default);
- background-color: var(--spirit-background-interactive-active);
  border-color: var(--spirit-action-secondary-active);
+ background-color: var(--spirit-background-interactive-active);
 }
 
 .form-switch .form-check-input:checked {
- background-color: var(--spirit-action-primary-default);
  border-color: var(--spirit-action-primary-default);
+ background-color: var(--spirit-action-primary-default);
 }
 
 .form-switch .form-check-input:not(:checked):focus {
- background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2377a6c0'/%3e%3c/svg%3e");
  border-color: var(--spirit-action-primary-default);
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2377a6c0'/%3e%3c/svg%3e");
 }
 
 /* Utilities are !important. */
 /* stylelint-disable declaration-no-important */
 .shadow-lg {
- box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.25) !important;
+ box-shadow: 0 0.5rem 1.5rem rgb(0 0 0 / 25%) !important;
 }
diff --git a/package.json b/package.json
@@ -80,6 +80,7 @@
  "vanilla-cookieconsent": "2.8.0"
  },
  "devDependencies": {
+ "@almacareer/stylelint-config": "9.0.0",
  "@babel/core": "7.20.5",
  "@babel/preset-env": "7.20.2",
  "@commitlint/cli": "17.3.0",
@@ -88,7 +89,6 @@
  "@lmc-eu/conventional-changelog-lmc-github": "2.3.0",
  "@lmc-eu/eslint-config-base": "3.0.2",
  "@lmc-eu/prettier-config": "1.2.3",
- "@lmc-eu/stylelint-config": "4.0.1",
  "@types/jest": "29.5.12",
  "@types/node": "18.11.11",
  "@typescript-eslint/eslint-plugin": "5.45.1",
@@ -111,8 +111,7 @@
  "prettier": "2.8.0",
  "replace-in-file": "6.3.5",
  "sass": "1.56.1",
- "stylelint": "14.16.0",
- "stylelint-config-prettier": "9.0.5",
+ "stylelint": "16.8.2",
  "ts-jest": "29.1.2",
  "ts-node": "10.9.2",
  "typescript": "4.9.3"

diff --git a/renovate.json b/renovate.json
@@ -46,11 +46,6 @@
  "matchPackageNames": ["nanoid"],
  "allowedVersions": "<4"
  },
- {
- "groupName": "Stylelint Config before reordering",
- "matchPackageNames": ["@lmc-eu/stylelint-config"],
- "allowedVersions": "<5"
- },
  {
  "groupName": "CookieConsent frozen to 2.8.0 or major version",
  "matchManagers": ["npm"],

diff --git a/src/scss/style/_buttons.scss b/src/scss/style/_buttons.scss
@@ -29,9 +29,9 @@ $_consent-modal-button-selector: '#cm .c-bn' !default;
 #s-bns .c-bn {
  overflow: hidden;
  font-weight: var(--lmcccm-p-btn-font-weight);
- white-space: nowrap;
  text-overflow: ellipsis;
  text-transform: var(--lmcccm-p-btn-text-transform);
+ white-space: nowrap;
  border-style: var(--lmcccm-p-btn-border-style);
 }
 
@@ -41,19 +41,19 @@ $_consent-modal-button-selector: '#cm .c-bn' !default;
 #c-bns:not(.swap) .c-bn:last-child,
 #s-bns .c-bn {
  color: var(--lmcccm-p-btn-secondary-text);
- background-color: var(--lmcccm-p-btn-secondary-bg);
  border-color: var(--lmcccm-p-btn-secondary-border);
+ background-color: var(--lmcccm-p-btn-secondary-bg);
 
  &:hover {
  color: var(--lmcccm-p-btn-secondary-hover-text);
- background-color: var(--lmcccm-p-btn-secondary-hover-bg);
  border-color: var(--lmcccm-p-btn-secondary-hover-border);
+ background-color: var(--lmcccm-p-btn-secondary-hover-bg);
  }
 
  &:active {
  color: var(--lmcccm-p-btn-secondary-active-text);
- background-color: var(--lmcccm-p-btn-secondary-active-bg);
  border-color: var(--lmcccm-p-btn-secondary-active-border);
+ background-color: var(--lmcccm-p-btn-secondary-active-bg);
  }
 }
 
@@ -62,19 +62,19 @@ $_consent-modal-button-selector: '#cm .c-bn' !default;
 #c-bns:not(.swap) .c-bn:first-child,
 #s-bns .c-bn:first-child {
  color: var(--lmcccm-p-btn-primary-text);
- background: var(--lmcccm-p-btn-primary-bg);
  border-color: var(--lmcccm-p-btn-primary-border);
+ background: var(--lmcccm-p-btn-primary-bg);
 
  &:hover {
  color: var(--lmcccm-p-btn-primary-hover-text);
- background: var(--lmcccm-p-btn-primary-hover-bg);
  border-color: var(--lmcccm-p-btn-primary-hover-border);
+ background: var(--lmcccm-p-btn-primary-hover-bg);
  }
 
  &:active {
  color: var(--lmcccm-p-btn-primary-active-text);
- background: var(--lmcccm-p-btn-primary-active-bg);
  border-color: var(--lmcccm-p-btn-primary-active-border);
+ background: var(--lmcccm-p-btn-primary-active-bg);
  }
 }
 

diff --git a/src/scss/style/_consent-modal.scss b/src/scss/style/_consent-modal.scss
@@ -3,12 +3,12 @@
 @use '../tools/units';
 
 #cm {
- overflow-y: auto;
- -webkit-overflow-scrolling: touch;
  max-width: settings.$consent-box-max-width;
  max-height: calc(100vh - #{units.convert2em(tokens.$space-800)});
  padding: units.convert2em(tokens.$space-800);
+ overflow-y: auto;
  box-shadow: tokens.$shadow-100;
+ -webkit-overflow-scrolling: touch;
 }
 
 #cm.box,
@@ -44,14 +44,14 @@
 
 #cm.box #c-bns .c-bn,
 #cm.bar #c-bns .c-bn {
- width: auto;
  flex: none;
+ width: auto;
 }
 
 #cm.cloud {
- overflow-y: auto;
  max-width: settings.$consent-cloud-max-width;
  padding: units.convert2em(tokens.$space-900) units.convert2em(tokens.$space-1000);
+ overflow-y: auto;
 }
 
 .cc_div #c-bns {

diff --git a/src/scss/style/_main.scss b/src/scss/style/_main.scss
@@ -1,3 +1,4 @@
+/* stylelint-disable selector-id-pattern */
 #cc--main {
  // Use maximum permissible value for `z-index` to overlap UI of other third-party plugins. Sorry!
  // stylelint-disable-next-line declaration-no-important -- Override inline style injected by original library.

diff --git a/src/scss/style/_settings-modal.scss b/src/scss/style/_settings-modal.scss
@@ -106,9 +106,9 @@
  margin-right: -0.4em;
  font-size: 1.8em;
  color: inherit;
- background-color: transparent;
  border: none;
  border-radius: 0;
+ background-color: transparent;
 
  &::before,
  &::after {
@@ -153,8 +153,8 @@
 
 #s-cnt .b-bn .b-tl {
  padding: units.convert2em(tokens.$space-600) 5em units.convert2em(tokens.$space-600) 3.25em;
- font-size: units.convert2em(map.get(tokens.$body-medium-text-regular, 'mobile', 'font-size'));
  font-weight: map.get(tokens.$body-medium-text-regular, 'mobile', 'font-weight');
+ font-size: units.convert2em(map.get(tokens.$body-medium-text-regular, 'mobile', 'font-size'));
  line-height: map.get(tokens.$body-medium-text-regular, 'mobile', 'line-height');
 }
 

diff --git a/src/scss/style/_toggles.scss b/src/scss/style/_toggles.scss
@@ -1,3 +1,4 @@
+/* stylelint-disable selector-no-qualifying-type */
 .cc_div .b-tg,
 .cc_div .b-tg .c-tg,
 .cc_div .b-tg .c-tgl,

diff --git a/src/scss/style/_typography.scss b/src/scss/style/_typography.scss
@@ -6,10 +6,11 @@
 .cc_div {
  $_line-height: map.get(tokens.$body-medium-text-regular, 'mobile', 'line-height');
 
- font-family: var(--lmcccm-p-font-family);
  font-size: var(--lmcccm-p-base-font-size);
  line-height: $_line-height;
+ font-family: var(--lmcccm-p-font-family);
 
+ /* stylelint-disable selector-max-universal, selector-nested-pattern */
  & *,
  &::after,
  &::before {

diff --git a/src/scss/theme/_default-to-vanilla.scss b/src/scss/theme/_default-to-vanilla.scss
@@ -26,6 +26,7 @@
  --cc-section-border: var(--lmcccm-p-modal-section-border);
  --cc-cookie-table-border: var(--lmcccm-p-cookie-table-border);
  --cc-overlay-bg: var(--lmcccm-p-backdrop-color);
+
  // --cc-webkit-scrollbar-bg: #cfd5db; // 1.
  // --cc-webkit-scrollbar-bg-hover: #9199a0; // 1.
 }