From 0e9de74f31976d195ceea40c82bd837de40cea0c Mon Sep 17 00:00:00 2001 From: Gregory Pratt Date: Tue, 1 Mar 2022 16:12:01 +0000 Subject: [PATCH] update stylelint --- .prettierrc.yml | 1 - .stylelintrc.json | 25 +++++++ .stylelintrc.yml | 15 ---- package-lock.json | 92 ++++++++++++++++-------- package.json | 1 + src/components/demo-github-buttons.tsx | 18 +++-- src/components/demo-progress-bars.tsx | 18 +++-- src/scss/_components.github-buttons.scss | 4 +- src/scss/_components.overlays.scss | 4 +- src/scss/_components.ranges.scss | 6 +- src/scss/_generics.global.scss | 2 +- src/scss/_variables.scss | 8 +-- src/scss/mixins/_tools.mediaqueries.scss | 3 +- 13 files changed, 125 insertions(+), 72 deletions(-) create mode 100644 .stylelintrc.json delete mode 100644 .stylelintrc.yml diff --git a/.prettierrc.yml b/.prettierrc.yml index 158a352..7487bd2 100644 --- a/.prettierrc.yml +++ b/.prettierrc.yml @@ -1,5 +1,4 @@ arrowParens: 'always' -jsxBracketSameLine: true printWidth: 120 singleQuote: true trailingComma: 'es5' diff --git a/.stylelintrc.json b/.stylelintrc.json new file mode 100644 index 0000000..4a52752 --- /dev/null +++ b/.stylelintrc.json @@ -0,0 +1,25 @@ +{ + "extends": [ + "stylelint-config-rational-order", + "stylelint-config-standard-scss" + ], + "plugins": [ + "stylelint-scss" + ], + "rules": { + "at-rule-empty-line-before": null, + "at-rule-no-unknown": null, + "color-function-notation": "modern", + "declaration-empty-line-before": null, + "function-max-empty-lines": 1, + "max-line-length": null, + "no-descending-specificity": null, + "property-no-vendor-prefix": null, + "string-quotes": "single", + "selector-class-pattern": null, + "value-list-max-empty-lines": 1, + "value-keyword-case": null, + "scss/at-mixin-pattern": null, + "scss/at-import-partial-extension": null + } +} diff --git a/.stylelintrc.yml b/.stylelintrc.yml deleted file mode 100644 index 6ba0fbe..0000000 --- a/.stylelintrc.yml +++ /dev/null @@ -1,15 +0,0 @@ -extends: - - stylelint-config-standard - - stylelint-config-rational-order - -plugins: - - stylelint-scss - -rules: - at-rule-empty-line-before: null - at-rule-no-unknown: null - scss/at-rule-no-unknown: true - declaration-empty-line-before: null - function-max-empty-lines: 1 - value-list-max-empty-lines: 1 - no-descending-specificity: null diff --git a/package-lock.json b/package-lock.json index 51bf6da..24bf4aa 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3662,37 +3662,6 @@ } } }, - "postcss-scss": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/postcss-scss/-/postcss-scss-2.0.0.tgz", - "integrity": "sha512-um9zdGKaDZirMm+kZFKKVsnKPF7zF7qBAtIfTSnZXD1jZ0JNZIxdB6TxQOjCnlSzLRInVl2v3YdBh/M881C4ug==", - "dev": true, - "requires": { - "postcss": "^7.0.0" - }, - "dependencies": { - "postcss": { - "version": "7.0.36", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz", - "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==", - "dev": true, - "requires": { - "chalk": "^2.4.2", - "source-map": "^0.6.1", - "supports-color": "^6.1.0" - } - }, - "supports-color": { - "version": "6.1.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz", - "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==", - "dev": true, - "requires": { - "has-flag": "^3.0.0" - } - } - } - }, "postcss-selector-parser": { "version": "6.0.9", "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.9.tgz", @@ -5163,6 +5132,15 @@ "source-map": "^0.6.1", "supports-color": "^6.1.0" } + }, + "postcss-scss": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/postcss-scss/-/postcss-scss-2.1.1.tgz", + "integrity": "sha512-jQmGnj0hSGLd9RscFw9LyuSVAa5Bl1/KBPqG1NQw9w8ND55nY4ZEsdlVuYJvLPpV+y0nwTV5v/4rHPzZRihQbA==", + "dev": true, + "requires": { + "postcss": "^7.0.6" + } } } }, @@ -5208,6 +5186,31 @@ "integrity": "sha512-yGn84Bf/q41J4luis1AZ95gj0EQwRX8lWmGmBwkwBNSkpGSpl66XcPTulxGa/Z91aPoNGuIGBmFkcM1MejMo9Q==", "dev": true }, + "stylelint-config-recommended-scss": { + "version": "5.0.2", + "resolved": "https://registry.npmjs.org/stylelint-config-recommended-scss/-/stylelint-config-recommended-scss-5.0.2.tgz", + "integrity": "sha512-b14BSZjcwW0hqbzm9b0S/ScN2+3CO3O4vcMNOw2KGf8lfVSwJ4p5TbNEXKwKl1+0FMtgRXZj6DqVUe/7nGnuBg==", + "dev": true, + "requires": { + "postcss-scss": "^4.0.2", + "stylelint-config-recommended": "^6.0.0", + "stylelint-scss": "^4.0.0" + }, + "dependencies": { + "postcss-scss": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/postcss-scss/-/postcss-scss-4.0.3.tgz", + "integrity": "sha512-j4KxzWovfdHsyxwl1BxkUal/O4uirvHgdzMKS1aWJBAV0qh2qj5qAZqpeBfVUYGWv+4iK9Az7SPyZ4fyNju1uA==", + "dev": true + }, + "stylelint-config-recommended": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/stylelint-config-recommended/-/stylelint-config-recommended-6.0.0.tgz", + "integrity": "sha512-ZorSSdyMcxWpROYUvLEMm0vSZud2uB7tX1hzBZwvVY9SV/uly4AvvJPPhCcymZL3fcQhEQG5AELmrxWqtmzacw==", + "dev": true + } + } + }, "stylelint-config-standard": { "version": "25.0.0", "resolved": "https://registry.npmjs.org/stylelint-config-standard/-/stylelint-config-standard-25.0.0.tgz", @@ -5217,6 +5220,33 @@ "stylelint-config-recommended": "^7.0.0" } }, + "stylelint-config-standard-scss": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/stylelint-config-standard-scss/-/stylelint-config-standard-scss-3.0.0.tgz", + "integrity": "sha512-zt3ZbzIbllN1iCmc94e4pDxqpkzeR6CJo5DDXzltshuXr+82B8ylHyMMARNnUYrZH80B7wgY7UkKTYCFM0UUyw==", + "dev": true, + "requires": { + "stylelint-config-recommended-scss": "^5.0.2", + "stylelint-config-standard": "^24.0.0" + }, + "dependencies": { + "stylelint-config-recommended": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/stylelint-config-recommended/-/stylelint-config-recommended-6.0.0.tgz", + "integrity": "sha512-ZorSSdyMcxWpROYUvLEMm0vSZud2uB7tX1hzBZwvVY9SV/uly4AvvJPPhCcymZL3fcQhEQG5AELmrxWqtmzacw==", + "dev": true + }, + "stylelint-config-standard": { + "version": "24.0.0", + "resolved": "https://registry.npmjs.org/stylelint-config-standard/-/stylelint-config-standard-24.0.0.tgz", + "integrity": "sha512-+RtU7fbNT+VlNbdXJvnjc3USNPZRiRVp/d2DxOF/vBDDTi0kH5RX2Ny6errdtZJH3boO+bmqIYEllEmok4jiuw==", + "dev": true, + "requires": { + "stylelint-config-recommended": "^6.0.0" + } + } + } + }, "stylelint-order": { "version": "2.2.1", "resolved": "https://registry.npmjs.org/stylelint-order/-/stylelint-order-2.2.1.tgz", diff --git a/package.json b/package.json index 6e3f094..641505b 100644 --- a/package.json +++ b/package.json @@ -56,6 +56,7 @@ "stylelint": "14.5.3", "stylelint-config-rational-order": "0.1.2", "stylelint-config-standard": "25.0.0", + "stylelint-config-standard-scss": "3.0.0", "stylelint-scss": "4.1.0" } } diff --git a/src/components/demo-github-buttons.tsx b/src/components/demo-github-buttons.tsx index 6e06d86..2a15b37 100644 --- a/src/components/demo-github-buttons.tsx +++ b/src/components/demo-github-buttons.tsx @@ -13,14 +13,16 @@ export class GitHubButtons { href="https://github.com" target="_blank" class="c-github-button__link c-github-button__link--button" - aria-label="Open on GitHub"> + aria-label="Open on GitHub" + > 1,337 @@ -43,14 +46,16 @@ export class GitHubButtons { href="https://github.com" target="_blank" class="c-github-button__link c-github-button__link--button" - aria-label="Open on GitHub"> + aria-label="Open on GitHub" + > 1,337 diff --git a/src/components/demo-progress-bars.tsx b/src/components/demo-progress-bars.tsx index a20d7fd..4c6cb23 100644 --- a/src/components/demo-progress-bars.tsx +++ b/src/components/demo-progress-bars.tsx @@ -135,7 +135,8 @@ export class ProgressBars { aria-valuemin="0" aria-valuemax="100" style={{ width: '15%' }} - class="c-progress__bar"> + class="c-progress__bar" + > 15% complete @@ -148,7 +149,8 @@ export class ProgressBars { aria-valuemin="0" aria-valuemax="100" style={{ width: '20%' }} - class="c-progress__bar c-progress__bar--brand"> + class="c-progress__bar c-progress__bar--brand" + > 20% complete @@ -161,7 +163,8 @@ export class ProgressBars { aria-valuemin="0" aria-valuemax="100" style={{ width: '35%' }} - class="c-progress__bar c-progress__bar--info"> + class="c-progress__bar c-progress__bar--info" + > 35% complete @@ -174,7 +177,8 @@ export class ProgressBars { aria-valuemin="0" aria-valuemax="100" style={{ width: '45%' }} - class="c-progress__bar c-progress__bar--warning"> + class="c-progress__bar c-progress__bar--warning" + > 45% complete @@ -187,7 +191,8 @@ export class ProgressBars { aria-valuemin="0" aria-valuemax="100" style={{ width: '60%' }} - class="c-progress__bar c-progress__bar--success"> + class="c-progress__bar c-progress__bar--success" + > 60% complete @@ -200,7 +205,8 @@ export class ProgressBars { aria-valuemin="0" aria-valuemax="100" style={{ width: '100%' }} - class="c-progress__bar c-progress__bar--error"> + class="c-progress__bar c-progress__bar--error" + > 100% complete diff --git a/src/scss/_components.github-buttons.scss b/src/scss/_components.github-buttons.scss index 138b6bc..6f49630 100644 --- a/src/scss/_components.github-buttons.scss +++ b/src/scss/_components.github-buttons.scss @@ -37,7 +37,7 @@ background-color: #e9ecef; background-image: none; border-color: #afb1b2; - box-shadow: inset 0 0.15em 0.3em rgba(27, 31, 35, 0.15); + box-shadow: inset 0 0.15em 0.3em rgb(27 31 35 / 15%); } &:hover { @@ -90,7 +90,7 @@ display: inline-block; height: 14px; vertical-align: top; - fill: currentColor; + fill: currentcolor; } .u-large { diff --git a/src/scss/_components.overlays.scss b/src/scss/_components.overlays.scss index 6384ca1..76ff2ac 100644 --- a/src/scss/_components.overlays.scss +++ b/src/scss/_components.overlays.scss @@ -1,3 +1,5 @@ +@use 'sass:color'; + .c-overlay[aria-hidden] { position: fixed; top: 0; @@ -8,7 +10,7 @@ display: block; width: 100%; height: 100%; - background-color: transparentize(#000, 0.6); + background-color: color.adjust(#000, $alpha: -0.6); visibility: hidden; opacity: 0; diff --git a/src/scss/_components.ranges.scss b/src/scss/_components.ranges.scss index 6bf7f7c..5914fb9 100644 --- a/src/scss/_components.ranges.scss +++ b/src/scss/_components.ranges.scss @@ -22,7 +22,7 @@ @mixin range-thumb { width: 20px; height: 20px; - margin: -5px 0 0 0; + margin: -5px 0 0; background-color: #fff; border: 0; border-radius: var(--border-radius-rounded); @@ -35,7 +35,7 @@ } @mixin range-thumb-webkit { - -webkit-appearance: none; + appearance: none; } @mixin range-thumb-active { @@ -53,7 +53,7 @@ width: 100%; padding: var(--spacing-small) 0; outline: 0; - -webkit-appearance: none; + appearance: none; &.c-range--brand { --range-track-color: var(--color-brand); diff --git a/src/scss/_generics.global.scss b/src/scss/_generics.global.scss index d6686ff..3608b38 100644 --- a/src/scss/_generics.global.scss +++ b/src/scss/_generics.global.scss @@ -3,7 +3,7 @@ html, :host { box-sizing: border-box; line-height: 1.15; - -webkit-text-size-adjust: 100%; + text-size-adjust: 100%; } *, diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss index 4342aec..cfad7a1 100644 --- a/src/scss/_variables.scss +++ b/src/scss/_variables.scss @@ -53,10 +53,10 @@ /* Box shadows */ - --box-shadow: 0 0 1px rgba(#000, 0.6); - --box-shadow-high: 0 5px 10px -3px rgba(0, 0, 0, 0.4); - --box-shadow-higher: 0 10px 25px -4px rgba(0, 0, 0, 0.4); - --box-shadow-highest: 0 20px 55px -8px rgba(0, 0, 0, 0.4); + --box-shadow: 0 0 1px rgb(0 0 0 / 60%); + --box-shadow-high: 0 5px 10px -3px rgb(0 0 0 / 40%); + --box-shadow-higher: 0 10px 25px -4px rgb(0 0 0 / 40%); + --box-shadow-highest: 0 20px 55px -8px rgb(0 0 0 / 40%); /* Focus styles */ diff --git a/src/scss/mixins/_tools.mediaqueries.scss b/src/scss/mixins/_tools.mediaqueries.scss index ec7a39f..d902495 100644 --- a/src/scss/mixins/_tools.mediaqueries.scss +++ b/src/scss/mixins/_tools.mediaqueries.scss @@ -6,7 +6,6 @@ $screen-limits: ( xlarge: 78em, super: 116em, ); - $screen-adjustment: 0.01 !default; @mixin screen-and-up($size) { @@ -40,7 +39,7 @@ $screen-adjustment: 0.01 !default; } @mixin screen--xlarge-only { - @media (min-width: #{map-get($screen-limits, large)}) and (max-width: #{map-get($screen-limits, xlarge) - $screen-adjustment}) { + @media (min-width: #{map-get($screen-limits, large)}) and (max-width: #{map-get($screen-limits, xlarge) - $screen-adjustment}) { @content; } }