From 32ad74ab9ee58ebf5af280481510ded266335e29 Mon Sep 17 00:00:00 2001 From: Jon Rohan Date: Fri, 10 May 2024 20:12:03 +0000 Subject: [PATCH 1/4] Deleting primer/utilities plugin --- README.md | 1 - __tests__/utilities.js | 48 --- index.js | 5 - plugins/README.md | 26 -- plugins/lib/primer-utilities.js | 526 -------------------------------- plugins/utilities.js | 52 ---- 6 files changed, 658 deletions(-) delete mode 100644 __tests__/utilities.js delete mode 100644 plugins/lib/primer-utilities.js delete mode 100644 plugins/utilities.js diff --git a/README.md b/README.md index 4ddd59e0..a87c5b59 100644 --- a/README.md +++ b/README.md @@ -36,7 +36,6 @@ Primer Stylelint Config extends the [stylelint-config-standard](https://github.c - [primer/borders](./plugins/#primerborders): Enforces the use of certain variables for border properties. - [primer/box-shadow](./plugins/#primerbox-shadow): Enforces the use of certain variables for `box-shadow`. - [primer/responsive-widths](./plugins/#primerresponsive-widths): Errors on `width` and `min-width` that is larger than the minimum browser size supported. `320px` -- [primer/utilities](./plugins/#primerutilities): Errors when someone writes custom CSS for a declaration that has an existing primer/css/utility. ## License diff --git a/__tests__/utilities.js b/__tests__/utilities.js deleted file mode 100644 index 802713ed..00000000 --- a/__tests__/utilities.js +++ /dev/null @@ -1,48 +0,0 @@ -import {ruleName} from '../plugins/utilities.js' - -testRule({ - plugins: ['./plugins/utilities'], - customSyntax: 'postcss-scss', - ruleName, - config: [true], - accept: [ - { - code: '.x { padding: 1px; }', - description: 'Padding is a custom value.', - }, - { - code: '.x { padding: $spacer-1 12px; }', - description: 'Padding is multiple values.', - }, - { - code: '.x:hover { padding: $spacer-4; }', - description: 'Selector is a pseudo selector.', - }, - ], - reject: [ - { - code: '.x { padding: $spacer-4; }', - message: - "Consider using the Primer utility '.p-4' instead of the selector '.x' in your html. https://primer.style/css/utilities (primer/utilities)", - line: 1, - column: 1, - description: 'Errors on spacer utility.', - }, - { - code: '.x { padding: 1px; &:hover { padding:2px; } } .x { padding: $spacer-4; }', - message: - "Consider using the Primer utility '.p-4' instead of the selector '.x' in your html. https://primer.style/css/utilities (primer/utilities)", - line: 1, - column: 47, - description: 'Errors on spacer utility with hover ampersand.', - }, - { - code: '.x { padding: $spacer-4 !important; }', - message: - "Consider using the Primer utility '.p-4' instead of the selector '.x' in your html. https://primer.style/css/utilities (primer/utilities)", - line: 1, - column: 1, - description: 'Errors on spacer utility with !important.', - }, - ], -}) diff --git a/index.js b/index.js index 6a77123f..50b92f0b 100644 --- a/index.js +++ b/index.js @@ -7,7 +7,6 @@ import colors from './plugins/colors.js' import responsiveWidths from './plugins/responsive-widths.js' import spacing from './plugins/spacing.js' import typography from './plugins/typography.js' -import utilities from './plugins/utilities.js' import noDisplayColors from './plugins/no-display-colors.js' import {createRequire} from 'node:module' @@ -29,7 +28,6 @@ export default { responsiveWidths, spacing, typography, - utilities, noDisplayColors, ], rules: { @@ -97,7 +95,6 @@ export default { 'primer/responsive-widths': true, 'primer/spacing': true, 'primer/typography': true, - 'primer/utilities': null, 'primer/no-display-colors': true, 'property-no-unknown': [ true, @@ -152,7 +149,6 @@ export default { 'primer/borders': null, 'primer/typography': null, 'primer/box-shadow': null, - 'primer/utilities': null, }, }, { @@ -207,7 +203,6 @@ export default { 'primer/borders': null, 'primer/typography': null, 'primer/box-shadow': null, - 'primer/utilities': null, }, }, ], diff --git a/plugins/README.md b/plugins/README.md index 72f08597..63101516 100644 --- a/plugins/README.md +++ b/plugins/README.md @@ -13,7 +13,6 @@ This directory contains all of our custom stylelint plugins, each of which provi - [`primer/borders`](#primerborders) - [`primer/box-shadow`](#primerbox-shadow) - [`primer/responsive-widths`](#primerresponsive-widths) - - [`primer/utilities`](#primerutilities) - [Variable rules](#variable-rules) - [Variable rule options](#variable-rule-options) @@ -84,31 +83,6 @@ This [variable rule](#variable-rules) enforces the use of `$box-shadow*` variabl This plugin checks for `width` and `min-width` declarations that use a value less than the minimum browser size. `320px` -## `primer/utilities` - -Checks for selectors with single declarations that can be replaced with [primer/css utilities](https://primer.style/css/utilities/). - -```scss -.foo { - color: var(--color-fg-default); -} -/** ↑ - * FAIL: --color-fg-default can be replaced with .color-fg-default */ - -.foo { - color: #custom; -} -/** ↑ - * OK: Color value doesn't match a utility. */ - -.foo { - color: var(--color-fg-default); - padding: 0; -} -/** ↑ - * OK: Has more than one declaration, not considered */ -``` - ## Variable rules Variable rules are created using a general-purpose helper that can validate constraints for matching CSS properties and values. In general, the Primer CSS variable rules enforce two basic principles for custom CSS: diff --git a/plugins/lib/primer-utilities.js b/plugins/lib/primer-utilities.js deleted file mode 100644 index 067fcab0..00000000 --- a/plugins/lib/primer-utilities.js +++ /dev/null @@ -1,526 +0,0 @@ -// Meant as temp until we can move to primitives or css -const colorTypes = ['accent', 'success', 'attention', 'severe', 'danger', 'open', 'closed', 'done', 'sponsors'] - -export default { - color: [ - { - value: 'var(--color-fg-default)', - utilityClass: 'color-fg-default', - }, - { - value: 'var(--color-fg-muted)', - utilityClass: 'color-fg-muted', - }, - { - value: 'var(--color-fg-subtle)', - utilityClass: 'color-fg-subtle', - }, - ].concat( - colorTypes.map(type => { - return { - value: `var(--color-${type}-fg)`, - utilityClass: `color-fg-${type}`, - } - }), - ), - 'background-color': [ - { - value: 'var(--color-canvas-default)', - utilityClass: 'color-bg-default', - }, - { - value: 'var(--color-canvas-overlay)', - utilityClass: 'color-bg-overlay', - }, - { - value: 'var(--color-canvas-inset)', - utilityClass: 'color-bg-inset', - }, - { - value: 'var(--color-canvas-subtle)', - utilityClass: 'color-bg-subtle', - }, - { - value: 'transparent', - utilityClass: 'color-bg-transparent', - }, - ] - .concat( - colorTypes.map(type => { - return { - value: `var(--color-${type}-subtle)`, - utilityClass: `color-bg-${type}`, - } - }), - ) - .concat( - colorTypes.map(type => { - return { - value: `var(--color-${type}-emphasis)`, - utilityClass: `color-bg-${type}-emphasis`, - } - }), - ), - 'border-color': [ - { - value: 'var(--color-border-default', - utilityClass: 'color-border-default', - }, - { - value: 'var(--color-border-muted', - utilityClass: 'color-border-muted', - }, - { - value: 'var(--color-border-subtle', - utilityClass: 'color-border-subtle', - }, - ] - .concat( - colorTypes.map(type => { - return { - value: `var(--color-${type}-muted)`, - utilityClass: `color-border-${type}`, - } - }), - ) - .concat( - colorTypes.map(type => { - return { - value: `var(--color-${type}-emphasis)`, - utilityClass: `color-border-${type}-emphasis`, - } - }), - ), - margin: Array.from(new Array(6)).map((_, i) => { - return { - value: `$spacer-${i + 1}`, - utilityClass: `m-${i + 1}`, - } - }), - 'margin-top': Array.from(new Array(6)).map((_, i) => { - return { - value: `$spacer-${i + 1}`, - utilityClass: `mt-${i + 1}`, - } - }), - 'margin-right': Array.from(new Array(6)).map((_, i) => { - return { - value: `$spacer-${i + 1}`, - utilityClass: `mr-${i + 1}`, - } - }), - 'margin-bottom': Array.from(new Array(6)).map((_, i) => { - return { - value: `$spacer-${i + 1}`, - utilityClass: `mb-${i + 1}`, - } - }), - 'margin-left': Array.from(new Array(6)).map((_, i) => { - return { - value: `$spacer-${i + 1}`, - utilityClass: `ml-${i + 1}`, - } - }), - padding: Array.from(new Array(6)).map((_, i) => { - return { - value: `$spacer-${i + 1}`, - utilityClass: `p-${i + 1}`, - } - }), - 'padding-top': Array.from(new Array(6)).map((_, i) => { - return { - value: `$spacer-${i + 1}`, - utilityClass: `pt-${i + 1}`, - } - }), - 'padding-right': Array.from(new Array(6)).map((_, i) => { - return { - value: `$spacer-${i + 1}`, - utilityClass: `pr-${i + 1}`, - } - }), - 'padding-bottom': Array.from(new Array(6)).map((_, i) => { - return { - value: `$spacer-${i + 1}`, - utilityClass: `pb-${i + 1}`, - } - }), - 'padding-left': Array.from(new Array(6)).map((_, i) => { - return { - value: `$spacer-${i + 1}`, - utilityClass: `pl-${i + 1}`, - } - }), - 'line-height': [ - { - value: '$lh-condensed-ultra', - utilityClass: 'lh-condensed-ultra', - }, - { - value: '$lh-condensed', - utilityClass: 'lh-condensed', - }, - { - value: '$lh-default', - utilityClass: 'lh-default', - }, - { - value: '0', - utilityClass: 'lh-0', - }, - ], - 'text-align': [ - { - value: 'left', - utilityClass: 'text-left', - }, - { - value: 'right', - utilityClass: 'text-right', - }, - { - value: 'center', - utilityClass: 'text-center', - }, - ], - 'font-style': [ - { - value: 'italic', - utilityClass: 'text-italic', - }, - ], - 'text-transform': [ - { - value: 'uppercase', - utilityClass: 'text-uppercase', - }, - ], - 'text-decoration': [ - { - value: 'underline', - utilityClass: 'text-underline', - }, - { - value: 'none', - utilityClass: 'no-underline', - }, - ], - 'white-space': [ - { - value: 'nowrap', - utilityClass: 'no-wrap', - }, - { - value: 'normal', - utilityClass: 'ws-normal', - }, - ], - 'word-break': [ - { - value: 'break-all', - utilityClass: 'wb-break-all', - }, - ], - width: [ - { - value: '100%', - utilityClass: 'width-full', - }, - { - value: 'auto%', - utilityClass: 'width-auto', - }, - ], - overflow: [ - { - value: 'visible', - utilityClass: 'overflow-visible', - }, - { - value: 'hidden', - utilityClass: 'overflow-hidden', - }, - { - value: 'auto', - utilityClass: 'overflow-auto', - }, - { - value: 'scroll', - utilityClass: 'overflow-scroll', - }, - ], - 'overflow-x': [ - { - value: 'visible', - utilityClass: 'overflow-x-visible', - }, - { - value: 'hidden', - utilityClass: 'overflow-x-hidden', - }, - { - value: 'auto', - utilityClass: 'overflow-x-auto', - }, - { - value: 'scroll', - utilityClass: 'overflow-x-scroll', - }, - ], - 'overflow-y': [ - { - value: 'visible', - utilityClass: 'overflow-y-visible', - }, - { - value: 'hidden', - utilityClass: 'overflow-y-hidden', - }, - { - value: 'auto', - utilityClass: 'overflow-y-auto', - }, - { - value: 'scroll', - utilityClass: 'overflow-y-scroll', - }, - ], - height: [ - { - value: '100%', - utilityClass: 'height-full', - }, - ], - 'max-width': [ - { - value: '100%', - utilityClass: 'width-fit', - }, - ], - 'max-height': [ - { - value: '100%', - utilityClass: 'height-fit', - }, - ], - 'min-width': [ - { - value: '0', - utilityClass: 'min-width-0', - }, - ], - float: [ - { - value: 'left', - utilityClass: 'float-left', - }, - { - value: 'right', - utilityClass: 'float-right', - }, - { - value: 'none', - utilityClass: 'float-none', - }, - ], - 'list-style': [ - { - value: 'none', - utilityClass: 'list-style-none', - }, - ], - 'user-select': [ - { - value: 'none', - utilityClass: 'user-select-none', - }, - ], - visibility: [ - { - value: 'hidden', - utilityClass: 'v-hidden', - }, - { - value: 'visible', - utilityClass: 'v-visible', - }, - ], - 'vertical-align': [ - { - value: 'middle', - utilityClass: 'v-align-middle', - }, - { - value: 'top', - utilityClass: 'v-align-top', - }, - { - value: 'bottom', - utilityClass: 'v-align-bottom', - }, - { - value: 'text-top', - utilityClass: 'v-align-text-top', - }, - { - value: 'text-bottom', - utilityClass: 'v-align-text-bottom', - }, - { - value: 'text-baseline', - utilityClass: 'v-align-baseline', - }, - ], - 'font-weight': [ - { - value: '$font-weight-normal', - utilityClass: 'text-normal', - }, - { - value: '$font-weight-bold', - utilityClass: 'text-bold', - }, - { - value: '$font-weight-semibold', - utilityClass: 'text-semibold', - }, - { - value: '$font-weight-light', - utilityClass: 'text-light', - }, - ], - top: [ - { - value: '0', - utilityClass: 'top-0', - }, - { - value: 'auto', - utilityClass: 'top-auto', - }, - ], - right: [ - { - value: '0', - utilityClass: 'right-0', - }, - { - value: 'auto', - utilityClass: 'right-auto', - }, - ], - bottom: [ - { - value: '0', - utilityClass: 'bottom-0', - }, - { - value: 'auto', - utilityClass: 'bottom-auto', - }, - ], - left: [ - { - value: '0', - utilityClass: 'left-0', - }, - { - value: 'auto', - utilityClass: 'left-auto', - }, - ], - position: [ - { - value: 'static', - utilityClass: 'position-static', - }, - { - value: 'relative', - utilityClass: 'position-relative', - }, - { - value: 'absolute', - utilityClass: 'position-absolute', - }, - { - value: 'fixed', - utilityClass: 'position-fixed', - }, - { - value: 'sticky', - utilityClass: 'position-sticky', - }, - ], - 'box-shadow': [ - { - value: 'none', - utilityClass: 'box-shadow-none', - }, - { - value: 'var(--color-shadow-small)', - utilityClass: 'box-shadow-small', - }, - { - value: 'var(--color-shadow-medium)', - utilityClass: 'box-shadow-medium', - }, - { - value: 'var(--color-shadow-large)', - utilityClass: 'box-shadow-large', - }, - { - value: 'var(--color-shadow-extra-large)', - utilityClass: 'box-shadow-extra-large', - }, - ], - border: [ - { - value: '$border', - utilityClass: 'border', - }, - { - value: '0', - utilityClass: 'border-0', - }, - ], - 'border-top': [ - { - value: '$border', - utilityClass: 'border-top', - }, - { - value: '0', - utilityClass: 'border-top-0', - }, - ], - 'border-right': [ - { - value: '$border', - utilityClass: 'border-right', - }, - { - value: '0', - utilityClass: 'border-right-0', - }, - ], - 'border-bottom': [ - { - value: '$border', - utilityClass: 'border-bottom', - }, - { - value: '0', - utilityClass: 'border-bottom-0', - }, - ], - 'border-left': [ - { - value: '$border', - utilityClass: 'border-left', - }, - { - value: '0', - utilityClass: 'border-left-0', - }, - ], -} diff --git a/plugins/utilities.js b/plugins/utilities.js deleted file mode 100644 index c654d388..00000000 --- a/plugins/utilities.js +++ /dev/null @@ -1,52 +0,0 @@ -import stylelint from 'stylelint' -import utilities from './lib/primer-utilities.js' - -export const ruleName = 'primer/utilities' - -export const messages = stylelint.utils.ruleMessages(ruleName, { - rejected: (selector, utilityClass) => { - return `Consider using the Primer utility '.${utilityClass}' instead of the selector '${selector}' in your html. https://primer.style/css/utilities` - }, -}) - -// eslint-disable-next-line no-unused-vars -export default stylelint.createPlugin(ruleName, (enabled, options = {}, context) => { - if (!enabled) { - return noop - } - - const utilityReplacement = (declaration, value) => { - const declarationUtilities = utilities[declaration] - if (declarationUtilities) { - return declarationUtilities.find(utility => { - return utility.value === value - }) - } - } - - const lintResult = (root, result) => { - root.walkRules(rule => { - if (!/^\.[\w\-_]+$/.exec(rule.selector)) { - return - } - const decls = rule.nodes.filter(decl => decl.type === 'decl') - - if (decls.length === 1) { - const replacement = utilityReplacement(decls[0].prop, decls[0].value) - if (replacement) { - stylelint.utils.report({ - index: rule.sourceIndex, - message: messages.rejected(rule.selector, replacement.utilityClass), - node: rule, - result, - ruleName, - }) - } - } - }) - } - - return lintResult -}) - -function noop() {} From 595e1d1e3443d8adee114a5a4e92f70a757fc46e Mon Sep 17 00:00:00 2001 From: Jon Rohan Date: Fri, 10 May 2024 13:13:42 -0700 Subject: [PATCH 2/4] Create tasty-cooks-do.md --- .changeset/tasty-cooks-do.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/tasty-cooks-do.md diff --git a/.changeset/tasty-cooks-do.md b/.changeset/tasty-cooks-do.md new file mode 100644 index 00000000..eeee1ad1 --- /dev/null +++ b/.changeset/tasty-cooks-do.md @@ -0,0 +1,5 @@ +--- +"@primer/stylelint-config": major +--- + +Deleting primer/utilities plugin From f86d4c485737272fb4eb038727725ae993fc1051 Mon Sep 17 00:00:00 2001 From: Jon Rohan Date: Mon, 13 May 2024 16:07:37 -0700 Subject: [PATCH 3/4] Update release_canary.yml --- .github/workflows/release_canary.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/release_canary.yml b/.github/workflows/release_canary.yml index b4eb0de6..7ae08b8a 100644 --- a/.github/workflows/release_canary.yml +++ b/.github/workflows/release_canary.yml @@ -10,7 +10,7 @@ jobs: release-canary: name: npm if: ${{ github.repository == 'primer/stylelint-config' }} - uses: primer/.github/.github/workflows/release_canary.yml@v2.0.0 + uses: primer/.github/.github/workflows/release_canary.yml@fix_api_call_github_rest with: install: npm i secrets: From 2490b6ed3106d3d5668ecb5e0d6cdb8dc46d30e6 Mon Sep 17 00:00:00 2001 From: Jon Rohan Date: Mon, 13 May 2024 16:09:30 -0700 Subject: [PATCH 4/4] Update release_canary.yml --- .github/workflows/release_canary.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/release_canary.yml b/.github/workflows/release_canary.yml index 7ae08b8a..147b498e 100644 --- a/.github/workflows/release_canary.yml +++ b/.github/workflows/release_canary.yml @@ -10,7 +10,7 @@ jobs: release-canary: name: npm if: ${{ github.repository == 'primer/stylelint-config' }} - uses: primer/.github/.github/workflows/release_canary.yml@fix_api_call_github_rest + uses: primer/.github/.github/workflows/release_canary.yml@v2.0.1 with: install: npm i secrets: