From ff09cc98b89cbfddc962e4b6bd18ad6c88ab63d1 Mon Sep 17 00:00:00 2001 From: Katie Langerman <18661030+langermank@users.noreply.github.com> Date: Thu, 19 Sep 2024 13:17:18 -0700 Subject: [PATCH] Bump stylelint + fixes (#4987) * bump + fixes * Create weak-hats-type.md * fix mixin --------- Co-authored-by: Jon Rohan --- .changeset/weak-hats-type.md | 5 + .vscode/settings.json | 18 +- package-lock.json | 665 ++---------------- package.json | 3 +- .../src/mixins/focusOutlineOnEmphasis.css | 1 + packages/react/src/Avatar/Avatar.module.css | 10 + packages/react/src/Banner/Banner.module.css | 2 +- .../react/src/Button/ButtonBase.module.css | 13 +- packages/react/src/Label/Label.module.css | 1 + .../CSSComponent/component.module.css | 2 +- 10 files changed, 93 insertions(+), 627 deletions(-) create mode 100644 .changeset/weak-hats-type.md diff --git a/.changeset/weak-hats-type.md b/.changeset/weak-hats-type.md new file mode 100644 index 000000000000..1dfc1eaa9747 --- /dev/null +++ b/.changeset/weak-hats-type.md @@ -0,0 +1,5 @@ +--- +"@primer/react": patch +--- + +Bump stylelint + fixes diff --git a/.vscode/settings.json b/.vscode/settings.json index f92d3119fd1b..c5f11daa02b1 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -17,6 +17,10 @@ "source.fixAll.stylelint": "explicit" } }, + "stylelint.validate": [ + "css", + "postcss" + ], "json.schemas": [ { "fileMatch": ["*.docs.json"], @@ -26,5 +30,17 @@ "fileMatch": ["generated/components.json"], "url": "./packages/react/script/components-json/output.schema.json" } - ] + ], + "cssvar.ignore": [ + // exclude all but light theme, to avoid stacking suggestions + "node_modules/@primer/primitives/dist/css/functional/themes/dark-colorblind.css", + "node_modules/@primer/primitives/dist/css/functional/themes/dark-dimmed.css", + "node_modules/@primer/primitives/dist/css/functional/themes/dark-high-contrast.css", + "node_modules/@primer/primitives/dist/css/functional/themes/dark-tritanopia.css", + "node_modules/@primer/primitives/dist/css/functional/themes/dark.css", + "node_modules/@primer/primitives/dist/css/functional/themes/light-colorblind.css", + "node_modules/@primer/primitives/dist/css/functional/themes/light-high-contrast.css", + "node_modules/@primer/primitives/dist/css/functional/themes/light-tritanopia.css" + ], + "cssvar.files": ["node_modules/@primer/primitives/dist/css/**/*.css"] } diff --git a/package-lock.json b/package-lock.json index 88ab3783fe7f..9c6b9b72a133 100644 --- a/package-lock.json +++ b/package-lock.json @@ -21,7 +21,7 @@ "@mdx-js/react": "1.6.22", "@playwright/test": "1.43.0", "@prettier/sync": "0.5.1", - "@primer/stylelint-config": "^13.0.0-rc.21ca0f0", + "@primer/stylelint-config": "^13.0.1-rc.5358628", "@size-limit/preset-big-lib": "11.0.2", "@types/jest": "29.5.12", "@typescript-eslint/eslint-plugin": "^7.11.0", @@ -6275,13 +6275,15 @@ "link": true }, "node_modules/@primer/stylelint-config": { - "version": "13.0.0-rc.fd47ce2", + "version": "13.0.1-rc.5358628", + "resolved": "https://registry.npmjs.org/@primer/stylelint-config/-/stylelint-config-13.0.1-rc.5358628.tgz", + "integrity": "sha512-Mxmu78NTe09LuHvuJDybP/qTrw/89BNTK1MTLLLoMml3gD2cwhlf7R7FNow+nQfwERc+7J32mlji1JPgVsHDfg==", "dev": true, "license": "MIT", "dependencies": { "@github/browserslist-config": "^1.0.0", "@primer/css": "^21.0.8", - "@primer/primitives": "^8.2.0", + "@primer/primitives": "^9.0.1", "anymatch": "^3.1.1", "postcss-scss": "^4.0.2", "postcss-styled-syntax": "^0.6.4", @@ -6289,7 +6291,6 @@ "string.prototype.matchall": "^4.0.2", "stylelint": "^16.3.1", "stylelint-config-standard": "^36.0.0", - "stylelint-css-modules-no-global-scoped-selector": "^1.0.2", "stylelint-no-unsupported-browser-features": "^8.0.0", "stylelint-order": "^6.0.4", "stylelint-scss": "^6.2.0", @@ -6300,6 +6301,49 @@ "node": ">16.0.0" } }, + "node_modules/@primer/stylelint-config/node_modules/@prettier/sync": { + "version": "0.5.2", + "resolved": "https://registry.npmjs.org/@prettier/sync/-/sync-0.5.2.tgz", + "integrity": "sha512-Yb569su456XNx5BsH/Vyem7xD6g/y9iLmLUzRKM1a/dhU/D7HqqvkAG72znulXlMXztbV0iiu9O5AL8K98TzZQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "make-synchronized": "^0.2.8" + }, + "funding": { + "url": "https://github.com/prettier/prettier-synchronized?sponsor=1" + }, + "peerDependencies": { + "prettier": "*" + } + }, + "node_modules/@primer/stylelint-config/node_modules/@primer/primitives": { + "version": "9.1.2", + "resolved": "https://registry.npmjs.org/@primer/primitives/-/primitives-9.1.2.tgz", + "integrity": "sha512-KecRJpUdIf14J3gVpoyMMJeQD6Sh5kcHk93N5bYch4XGB0GOZP3ypxz+NByMjr/2HHPsRfCCO5EEgNjmeWYUGQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "@prettier/sync": "^0.5.2", + "prettier": "3.3" + } + }, + "node_modules/@primer/stylelint-config/node_modules/prettier": { + "version": "3.3.3", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.3.3.tgz", + "integrity": "sha512-i2tDNA0O5IrMO757lfrdQZCc2jPNDVntV0m/+4whiDfWaTKfMNgR7Qz0NAeGz/nRqF4m5/6CLzbP4/liHt12Ew==", + "dev": true, + "license": "MIT", + "bin": { + "prettier": "bin/prettier.cjs" + }, + "engines": { + "node": ">=14" + }, + "funding": { + "url": "https://github.com/prettier/prettier?sponsor=1" + } + }, "node_modules/@primer/view-components": { "version": "0.27.0", "dev": true, @@ -9804,14 +9848,6 @@ "dev": true, "license": "ISC" }, - "node_modules/astral-regex": { - "version": "1.0.0", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=4" - } - }, "node_modules/asynckit": { "version": "0.4.0", "dev": true, @@ -10943,14 +10979,6 @@ "url": "https://github.com/chalk/strip-ansi?sponsor=1" } }, - "node_modules/cli-width": { - "version": "3.0.0", - "dev": true, - "license": "ISC", - "engines": { - "node": ">= 10" - } - }, "node_modules/client-only": { "version": "0.0.1", "license": "MIT" @@ -14550,20 +14578,6 @@ } } }, - "node_modules/figures": { - "version": "3.2.0", - "dev": true, - "license": "MIT", - "dependencies": { - "escape-string-regexp": "^1.0.5" - }, - "engines": { - "node": ">=8" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, "node_modules/file-entry-cache": { "version": "6.0.1", "dev": true, @@ -14992,11 +15006,6 @@ "url": "https://github.com/sponsors/ljharb" } }, - "node_modules/functional-red-black-tree": { - "version": "1.0.1", - "dev": true, - "license": "MIT" - }, "node_modules/functions-have-names": { "version": "1.2.3", "dev": true, @@ -15833,109 +15842,6 @@ "dev": true, "license": "ISC" }, - "node_modules/inquirer": { - "version": "7.3.3", - "dev": true, - "license": "MIT", - "dependencies": { - "ansi-escapes": "^4.2.1", - "chalk": "^4.1.0", - "cli-cursor": "^3.1.0", - "cli-width": "^3.0.0", - "external-editor": "^3.0.3", - "figures": "^3.0.0", - "lodash": "^4.17.19", - "mute-stream": "0.0.8", - "run-async": "^2.4.0", - "rxjs": "^6.6.0", - "string-width": "^4.1.0", - "strip-ansi": "^6.0.0", - "through": "^2.3.6" - }, - "engines": { - "node": ">=8.0.0" - } - }, - "node_modules/inquirer/node_modules/ansi-styles": { - "version": "4.3.0", - "dev": true, - "license": "MIT", - "dependencies": { - "color-convert": "^2.0.1" - }, - "engines": { - "node": ">=8" - }, - "funding": { - "url": "https://github.com/chalk/ansi-styles?sponsor=1" - } - }, - "node_modules/inquirer/node_modules/chalk": { - "version": "4.1.2", - "dev": true, - "license": "MIT", - "dependencies": { - "ansi-styles": "^4.1.0", - "supports-color": "^7.1.0" - }, - "engines": { - "node": ">=10" - }, - "funding": { - "url": "https://github.com/chalk/chalk?sponsor=1" - } - }, - "node_modules/inquirer/node_modules/color-convert": { - "version": "2.0.1", - "dev": true, - "license": "MIT", - "dependencies": { - "color-name": "~1.1.4" - }, - "engines": { - "node": ">=7.0.0" - } - }, - "node_modules/inquirer/node_modules/color-name": { - "version": "1.1.4", - "dev": true, - "license": "MIT" - }, - "node_modules/inquirer/node_modules/has-flag": { - "version": "4.0.0", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=8" - } - }, - "node_modules/inquirer/node_modules/rxjs": { - "version": "6.6.7", - "dev": true, - "license": "Apache-2.0", - "dependencies": { - "tslib": "^1.9.0" - }, - "engines": { - "npm": ">=2.0.0" - } - }, - "node_modules/inquirer/node_modules/supports-color": { - "version": "7.2.0", - "dev": true, - "license": "MIT", - "dependencies": { - "has-flag": "^4.0.0" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/inquirer/node_modules/tslib": { - "version": "1.14.1", - "dev": true, - "license": "0BSD" - }, "node_modules/internal-slot": { "version": "1.0.7", "dev": true, @@ -21677,11 +21583,6 @@ "node": ">=8" } }, - "node_modules/mute-stream": { - "version": "0.0.8", - "dev": true, - "license": "ISC" - }, "node_modules/nanoid": { "version": "3.3.7", "funding": [ @@ -21850,11 +21751,6 @@ "node": ">=10.0.0" } }, - "node_modules/nice-try": { - "version": "1.0.5", - "dev": true, - "license": "MIT" - }, "node_modules/node-dir": { "version": "0.1.17", "dev": true, @@ -25338,376 +25234,6 @@ "node": ">=0.10.0" } }, - "node_modules/rewire": { - "version": "5.0.0", - "dev": true, - "license": "MIT", - "dependencies": { - "eslint": "^6.8.0" - } - }, - "node_modules/rewire/node_modules/acorn": { - "version": "7.4.1", - "dev": true, - "license": "MIT", - "bin": { - "acorn": "bin/acorn" - }, - "engines": { - "node": ">=0.4.0" - } - }, - "node_modules/rewire/node_modules/ajv": { - "version": "6.12.6", - "dev": true, - "license": "MIT", - "dependencies": { - "fast-deep-equal": "^3.1.1", - "fast-json-stable-stringify": "^2.0.0", - "json-schema-traverse": "^0.4.1", - "uri-js": "^4.2.2" - }, - "funding": { - "type": "github", - "url": "https://github.com/sponsors/epoberezkin" - } - }, - "node_modules/rewire/node_modules/ansi-regex": { - "version": "4.1.1", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=6" - } - }, - "node_modules/rewire/node_modules/cross-spawn": { - "version": "6.0.5", - "dev": true, - "license": "MIT", - "dependencies": { - "nice-try": "^1.0.4", - "path-key": "^2.0.1", - "semver": "^5.5.0", - "shebang-command": "^1.2.0", - "which": "^1.2.9" - }, - "engines": { - "node": ">=4.8" - } - }, - "node_modules/rewire/node_modules/cross-spawn/node_modules/semver": { - "version": "5.7.2", - "dev": true, - "license": "ISC", - "bin": { - "semver": "bin/semver" - } - }, - "node_modules/rewire/node_modules/emoji-regex": { - "version": "7.0.3", - "dev": true, - "license": "MIT" - }, - "node_modules/rewire/node_modules/eslint": { - "version": "6.8.0", - "dev": true, - "license": "MIT", - "dependencies": { - "@babel/code-frame": "^7.0.0", - "ajv": "^6.10.0", - "chalk": "^2.1.0", - "cross-spawn": "^6.0.5", - "debug": "^4.0.1", - "doctrine": "^3.0.0", - "eslint-scope": "^5.0.0", - "eslint-utils": "^1.4.3", - "eslint-visitor-keys": "^1.1.0", - "espree": "^6.1.2", - "esquery": "^1.0.1", - "esutils": "^2.0.2", - "file-entry-cache": "^5.0.1", - "functional-red-black-tree": "^1.0.1", - "glob-parent": "^5.0.0", - "globals": "^12.1.0", - "ignore": "^4.0.6", - "import-fresh": "^3.0.0", - "imurmurhash": "^0.1.4", - "inquirer": "^7.0.0", - "is-glob": "^4.0.0", - "js-yaml": "^3.13.1", - "json-stable-stringify-without-jsonify": "^1.0.1", - "levn": "^0.3.0", - "lodash": "^4.17.14", - "minimatch": "^3.0.4", - "mkdirp": "^0.5.1", - "natural-compare": "^1.4.0", - "optionator": "^0.8.3", - "progress": "^2.0.0", - "regexpp": "^2.0.1", - "semver": "^6.1.2", - "strip-ansi": "^5.2.0", - "strip-json-comments": "^3.0.1", - "table": "^5.2.3", - "text-table": "^0.2.0", - "v8-compile-cache": "^2.0.3" - }, - "bin": { - "eslint": "bin/eslint.js" - }, - "engines": { - "node": "^8.10.0 || ^10.13.0 || >=11.10.1" - }, - "funding": { - "url": "https://opencollective.com/eslint" - } - }, - "node_modules/rewire/node_modules/eslint-utils": { - "version": "1.4.3", - "dev": true, - "license": "MIT", - "dependencies": { - "eslint-visitor-keys": "^1.1.0" - }, - "engines": { - "node": ">=6" - } - }, - "node_modules/rewire/node_modules/eslint-visitor-keys": { - "version": "1.3.0", - "dev": true, - "license": "Apache-2.0", - "engines": { - "node": ">=4" - } - }, - "node_modules/rewire/node_modules/espree": { - "version": "6.2.1", - "dev": true, - "license": "BSD-2-Clause", - "dependencies": { - "acorn": "^7.1.1", - "acorn-jsx": "^5.2.0", - "eslint-visitor-keys": "^1.1.0" - }, - "engines": { - "node": ">=6.0.0" - } - }, - "node_modules/rewire/node_modules/file-entry-cache": { - "version": "5.0.1", - "dev": true, - "license": "MIT", - "dependencies": { - "flat-cache": "^2.0.1" - }, - "engines": { - "node": ">=4" - } - }, - "node_modules/rewire/node_modules/flat-cache": { - "version": "2.0.1", - "dev": true, - "license": "MIT", - "dependencies": { - "flatted": "^2.0.0", - "rimraf": "2.6.3", - "write": "1.0.3" - }, - "engines": { - "node": ">=4" - } - }, - "node_modules/rewire/node_modules/flatted": { - "version": "2.0.2", - "dev": true, - "license": "ISC" - }, - "node_modules/rewire/node_modules/globals": { - "version": "12.4.0", - "dev": true, - "license": "MIT", - "dependencies": { - "type-fest": "^0.8.1" - }, - "engines": { - "node": ">=8" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, - "node_modules/rewire/node_modules/ignore": { - "version": "4.0.6", - "dev": true, - "license": "MIT", - "engines": { - "node": ">= 4" - } - }, - "node_modules/rewire/node_modules/is-fullwidth-code-point": { - "version": "2.0.0", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=4" - } - }, - "node_modules/rewire/node_modules/json-schema-traverse": { - "version": "0.4.1", - "dev": true, - "license": "MIT" - }, - "node_modules/rewire/node_modules/levn": { - "version": "0.3.0", - "dev": true, - "license": "MIT", - "dependencies": { - "prelude-ls": "~1.1.2", - "type-check": "~0.3.2" - }, - "engines": { - "node": ">= 0.8.0" - } - }, - "node_modules/rewire/node_modules/mkdirp": { - "version": "0.5.6", - "dev": true, - "license": "MIT", - "dependencies": { - "minimist": "^1.2.6" - }, - "bin": { - "mkdirp": "bin/cmd.js" - } - }, - "node_modules/rewire/node_modules/optionator": { - "version": "0.8.3", - "dev": true, - "license": "MIT", - "dependencies": { - "deep-is": "~0.1.3", - "fast-levenshtein": "~2.0.6", - "levn": "~0.3.0", - "prelude-ls": "~1.1.2", - "type-check": "~0.3.2", - "word-wrap": "~1.2.3" - }, - "engines": { - "node": ">= 0.8.0" - } - }, - "node_modules/rewire/node_modules/path-key": { - "version": "2.0.1", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=4" - } - }, - "node_modules/rewire/node_modules/prelude-ls": { - "version": "1.1.2", - "dev": true, - "engines": { - "node": ">= 0.8.0" - } - }, - "node_modules/rewire/node_modules/regexpp": { - "version": "2.0.1", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=6.5.0" - } - }, - "node_modules/rewire/node_modules/rimraf": { - "version": "2.6.3", - "dev": true, - "license": "ISC", - "dependencies": { - "glob": "^7.1.3" - }, - "bin": { - "rimraf": "bin.js" - } - }, - "node_modules/rewire/node_modules/semver": { - "version": "6.3.1", - "dev": true, - "license": "ISC", - "bin": { - "semver": "bin/semver.js" - } - }, - "node_modules/rewire/node_modules/slice-ansi": { - "version": "2.1.0", - "dev": true, - "license": "MIT", - "dependencies": { - "ansi-styles": "^3.2.0", - "astral-regex": "^1.0.0", - "is-fullwidth-code-point": "^2.0.0" - }, - "engines": { - "node": ">=6" - } - }, - "node_modules/rewire/node_modules/string-width": { - "version": "3.1.0", - "dev": true, - "license": "MIT", - "dependencies": { - "emoji-regex": "^7.0.1", - "is-fullwidth-code-point": "^2.0.0", - "strip-ansi": "^5.1.0" - }, - "engines": { - "node": ">=6" - } - }, - "node_modules/rewire/node_modules/strip-ansi": { - "version": "5.2.0", - "dev": true, - "license": "MIT", - "dependencies": { - "ansi-regex": "^4.1.0" - }, - "engines": { - "node": ">=6" - } - }, - "node_modules/rewire/node_modules/table": { - "version": "5.4.6", - "dev": true, - "license": "BSD-3-Clause", - "dependencies": { - "ajv": "^6.10.2", - "lodash": "^4.17.14", - "slice-ansi": "^2.1.0", - "string-width": "^3.0.0" - }, - "engines": { - "node": ">=6.0.0" - } - }, - "node_modules/rewire/node_modules/type-check": { - "version": "0.3.2", - "dev": true, - "license": "MIT", - "dependencies": { - "prelude-ls": "~1.1.2" - }, - "engines": { - "node": ">= 0.8.0" - } - }, - "node_modules/rewire/node_modules/type-fest": { - "version": "0.8.1", - "dev": true, - "license": "(MIT OR CC0-1.0)", - "engines": { - "node": ">=8" - } - }, "node_modules/rfdc": { "version": "1.3.1", "dev": true, @@ -26649,14 +26175,6 @@ "node": ">= 8" } }, - "node_modules/run-async": { - "version": "2.4.1", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=0.12.0" - } - }, "node_modules/run-parallel": { "version": "1.2.0", "dev": true, @@ -27779,66 +27297,6 @@ "stylelint": "^16.1.0" } }, - "node_modules/stylelint-css-modules-no-global-scoped-selector": { - "version": "1.0.2", - "dev": true, - "license": "ISC", - "dependencies": { - "lodash": "^4.17.21", - "postcss-modules-local-by-default": "3.0.3", - "postcss-resolve-nested-selector": "^0.1.1", - "rewire": "^5.0.0" - }, - "peerDependencies": { - "stylelint": "^13.0.0 || ^14.0.0" - } - }, - "node_modules/stylelint-css-modules-no-global-scoped-selector/node_modules/icss-utils": { - "version": "4.1.1", - "dev": true, - "license": "ISC", - "dependencies": { - "postcss": "^7.0.14" - }, - "engines": { - "node": ">= 6" - } - }, - "node_modules/stylelint-css-modules-no-global-scoped-selector/node_modules/picocolors": { - "version": "0.2.1", - "dev": true, - "license": "ISC" - }, - "node_modules/stylelint-css-modules-no-global-scoped-selector/node_modules/postcss": { - "version": "7.0.39", - "dev": true, - "license": "MIT", - "dependencies": { - "picocolors": "^0.2.1", - "source-map": "^0.6.1" - }, - "engines": { - "node": ">=6.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/postcss/" - } - }, - "node_modules/stylelint-css-modules-no-global-scoped-selector/node_modules/postcss-modules-local-by-default": { - "version": "3.0.3", - "dev": true, - "license": "MIT", - "dependencies": { - "icss-utils": "^4.1.1", - "postcss": "^7.0.32", - "postcss-selector-parser": "^6.0.2", - "postcss-value-parser": "^4.1.0" - }, - "engines": { - "node": ">= 6" - } - }, "node_modules/stylelint-no-unsupported-browser-features": { "version": "8.0.1", "dev": true, @@ -29881,11 +29339,6 @@ "node": ">=6" } }, - "node_modules/v8-compile-cache": { - "version": "2.4.0", - "dev": true, - "license": "MIT" - }, "node_modules/v8-to-istanbul": { "version": "9.0.1", "dev": true, @@ -30753,17 +30206,6 @@ "dev": true, "license": "ISC" }, - "node_modules/write": { - "version": "1.0.3", - "dev": true, - "license": "MIT", - "dependencies": { - "mkdirp": "^0.5.1" - }, - "engines": { - "node": ">=4" - } - }, "node_modules/write-file-atomic": { "version": "4.0.2", "dev": true, @@ -30776,17 +30218,6 @@ "node": "^12.13.0 || ^14.15.0 || >=16.0.0" } }, - "node_modules/write/node_modules/mkdirp": { - "version": "0.5.6", - "dev": true, - "license": "MIT", - "dependencies": { - "minimist": "^1.2.6" - }, - "bin": { - "mkdirp": "bin/cmd.js" - } - }, "node_modules/ws": { "version": "8.16.0", "dev": true, diff --git a/package.json b/package.json index 1f5b7c6619a8..042e9767d4bc 100644 --- a/package.json +++ b/package.json @@ -21,6 +21,7 @@ "build:components.json": "npm run build:components.json -w @primer/react", "lint": "eslint '**/*.{js,ts,tsx,md,mdx}' --max-warnings=0", "lint:css": "stylelint '**/*.css'", + "lint:css:fix": "stylelint --fix '**/*.css'", "lint:fix": "npm run lint -- --fix", "lint:md": "markdownlint-cli2 \"**/*.{md,mdx}\" \"!.github\" \"!.changeset\" \"!**/node_modules/**\" \"!**/CHANGELOG.md\"", "test": "jest", @@ -49,7 +50,7 @@ "@mdx-js/react": "1.6.22", "@playwright/test": "1.43.0", "@prettier/sync": "0.5.1", - "@primer/stylelint-config": "^13.0.0-rc.21ca0f0", + "@primer/stylelint-config": "^13.0.1-rc.5358628", "@size-limit/preset-big-lib": "11.0.2", "@types/jest": "29.5.12", "@typescript-eslint/eslint-plugin": "^7.11.0", diff --git a/packages/postcss-preset-primer/src/mixins/focusOutlineOnEmphasis.css b/packages/postcss-preset-primer/src/mixins/focusOutlineOnEmphasis.css index d640dd066419..516a92c8ae2b 100644 --- a/packages/postcss-preset-primer/src/mixins/focusOutlineOnEmphasis.css +++ b/packages/postcss-preset-primer/src/mixins/focusOutlineOnEmphasis.css @@ -2,5 +2,6 @@ @define-mixin focusOutlineOnEmphasis $outlineOffset: -2px, $outlineColor: var(--focus-outlineColor) { outline: 2px solid $outlineColor; outline-offset: $outlineOffset; + /* stylelint-disable-next-line primer/box-shadow */ box-shadow: inset 0 0 0 3px var(--fgColor-onEmphasis); } diff --git a/packages/react/src/Avatar/Avatar.module.css b/packages/react/src/Avatar/Avatar.module.css index db820ccc99fd..feba91a8ccbf 100644 --- a/packages/react/src/Avatar/Avatar.module.css +++ b/packages/react/src/Avatar/Avatar.module.css @@ -1,11 +1,15 @@ :where(.Avatar) { display: inline-block; + /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */ width: var(--avatarSize-regular); + /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */ height: var(--avatarSize-regular); overflow: hidden; /* Ensure page layout in Firefox should images fail to load */ + /* stylelint-disable-next-line primer/typography */ line-height: 1; vertical-align: middle; border-radius: 50%; + /* stylelint-disable-next-line primer/box-shadow */ box-shadow: 0 0 0 1px var(--avatar-borderColor); &:where([data-square]) { @@ -14,17 +18,23 @@ &:where([data-responsive]) { @media screen and (--viewportRange-narrow) { + /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */ width: var(--avatarSize-narrow); + /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */ height: var(--avatarSize-narrow); } @media screen and (--viewportRange-regular) { + /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */ width: var(--avatarSize-regular); + /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */ height: var(--avatarSize-regular); } @media screen and (--viewportRange-wide) { + /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */ width: var(--avatarSize-wide); + /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */ height: var(--avatarSize-wide); } } diff --git a/packages/react/src/Banner/Banner.module.css b/packages/react/src/Banner/Banner.module.css index e97e542b5248..b70b03114b15 100644 --- a/packages/react/src/Banner/Banner.module.css +++ b/packages/react/src/Banner/Banner.module.css @@ -2,7 +2,7 @@ display: grid; padding: var(--base-size-8); background-color: var(--banner-bgColor); - border: var(--borderWidth-thin, 1px) solid var(--banner-borderColor); + border: var(--borderWidth-thin) solid var(--banner-borderColor); border-radius: var(--borderRadius-medium); grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; diff --git a/packages/react/src/Button/ButtonBase.module.css b/packages/react/src/Button/ButtonBase.module.css index 7ce72d8adcd0..867a5c2b4f72 100644 --- a/packages/react/src/Button/ButtonBase.module.css +++ b/packages/react/src/Button/ButtonBase.module.css @@ -28,10 +28,9 @@ transition-duration: 80ms; } + /* stylelint-disable-next-line plugin/no-unsupported-browser-features */ &:focus-visible { - outline: 2px solid var(--focus-outlineColor); - outline-offset: -2px; - box-shadow: none; + @mixin focusOutline; } &:active { @@ -128,6 +127,7 @@ } & .Label { + /* stylelint-disable-next-line primer/typography */ line-height: 1.4285714; /* temporary until we use Text component with --text-body-lineHeight-medium */ white-space: nowrap; grid-area: text; @@ -156,6 +156,7 @@ } & .Label { + /* stylelint-disable-next-line primer/typography */ line-height: 1.6666667; /* temporary until we use Text component with --text-body-lineHeight-small */ } } @@ -294,10 +295,9 @@ border-color: var(--button-primary-borderColor-hover); } + /* stylelint-disable-next-line plugin/no-unsupported-browser-features */ &:focus-visible { - outline: 2px solid var(--focus-outlineColor); - outline-offset: -2px; - box-shadow: inset 0 0 0 3px var(--fgColor-onEmphasis); + @mixin focusOutlineOnEmphasis; } &:active { @@ -455,6 +455,7 @@ text-decoration: underline; } + /* stylelint-disable-next-line plugin/no-unsupported-browser-features */ &:focus-visible, &:focus { outline-offset: 2px; diff --git a/packages/react/src/Label/Label.module.css b/packages/react/src/Label/Label.module.css index 953569336ee0..a60622cb6dce 100644 --- a/packages/react/src/Label/Label.module.css +++ b/packages/react/src/Label/Label.module.css @@ -2,6 +2,7 @@ display: inline-flex; font-size: var(--text-body-size-small); font-weight: var(--base-text-weight-medium); + /* stylelint-disable-next-line primer/typography */ line-height: 1; color: var(--fgColor-default); white-space: nowrap; diff --git a/packages/react/src/experimental/CSSComponent/component.module.css b/packages/react/src/experimental/CSSComponent/component.module.css index 779065f981ae..4eb77ff385c5 100644 --- a/packages/react/src/experimental/CSSComponent/component.module.css +++ b/packages/react/src/experimental/CSSComponent/component.module.css @@ -4,5 +4,5 @@ padding: var(--control-xsmall-paddingBlock) var(--control-xsmall-paddingInline-normal); color: var(--fgColor-muted); background-color: var(--bgColor-default); - border: 1px solid var(--borderColor-default); + border: var(--borderWidth-thin) solid var(--borderColor-default); }