-
Notifications
You must be signed in to change notification settings - Fork 22
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* Pairing for today * parsing * progress on border plugin * updates messages, ignores shorthand border color * rm irrelevant TODO comments * Adjust spacing rule for change in primitives import * Rename to utils * Cleanup * changes * Fix tests * Adjust fixtures * Merge branch 'main' into primer_border_update * enable borders on other syntaxes * Fix for border shorthand directional * Fix border transparent * lint fix * comma * Failing test * update description * allows 'dotted' * accept border-bottom-color prop * ignore border-color * simple tests * ignores border-color properties * updates border shorthand regex to match logical properties too * prevents border-radius values from being replaced with border width variables * appease the linter --------- Co-authored-by: Mike Perrotti <[email protected]>
- Loading branch information
Showing
7 changed files
with
413 additions
and
183 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,84 +1,177 @@ | ||
| import plugin from '../plugins/borders.js' | ||
| import dedent from 'dedent' | ||
| import stylelint from 'stylelint' | ||
| import borders from '../plugins/borders.js' | ||
|
|
||
| const ruleName = 'primer/borders' | ||
| const configWithOptions = args => ({ | ||
| plugins: [borders], | ||
| rules: { | ||
| [ruleName]: args, | ||
| }, | ||
| }) | ||
|
|
||
| describe(ruleName, () => { | ||
| it('reports multiple border properties', () => { | ||
| return stylelint | ||
| .lint({ | ||
| code: ` | ||
| .foo { border: 1px solid gray; } | ||
| `, | ||
| config: configWithOptions(true), | ||
| }) | ||
| .then(data => { | ||
| expect(data).toHaveErrored() | ||
| expect(data).toHaveWarnings([ | ||
| `Please use "$border-width" instead of "1px". See https://primer.style/css/utilities/borders. (${ruleName})`, | ||
| `Please use "$border-style" instead of "solid". See https://primer.style/css/utilities/borders. (${ruleName})`, | ||
| `Please use a border color variable instead of "gray". See https://primer.style/css/utilities/borders. (${ruleName})`, | ||
| ]) | ||
| }) | ||
| }) | ||
| const plugins = [plugin] | ||
| const { | ||
| ruleName, | ||
| rule: {messages}, | ||
| } = plugin | ||
|
|
||
| it('recognizes function calls as whole tokens', () => { | ||
| return stylelint | ||
| .lint({ | ||
| code: ` | ||
| .foo { border: calc($spacer-2 + var(--derp)) $border-style rgba($border-gray-dark, 50%); } | ||
| `, | ||
| config: configWithOptions(true), | ||
| }) | ||
| .then(data => { | ||
| expect(data).toHaveErrored() | ||
| expect(data).toHaveWarnings([ | ||
| `Please use a border width variable instead of "calc($spacer-2 + var(--derp))". See https://primer.style/css/utilities/borders. (${ruleName})`, | ||
| `Please use a border color variable instead of "rgba($border-gray-dark, 50%)". See https://primer.style/css/utilities/borders. (${ruleName})`, | ||
| ]) | ||
| }) | ||
| }) | ||
|
|
||
| it('allows $border shorthand in border{,-top,-right,-bottom,-left}', () => { | ||
| return stylelint | ||
| .lint({ | ||
| code: dedent` | ||
| .a { border: $border; } | ||
| .b { border-top: $border; } | ||
| .c { border-right: $border; } | ||
| .d { border-bottom: $border; } | ||
| .e { border-left: $border; } | ||
| `, | ||
| config: configWithOptions(true), | ||
| }) | ||
| .then(data => { | ||
| expect(data).not.toHaveErrored() | ||
| expect(data).toHaveWarningsLength(0) | ||
| }) | ||
| }) | ||
| // General Tests | ||
| testRule({ | ||
| plugins, | ||
| ruleName, | ||
| config: [true, {}], | ||
| fix: true, | ||
| cache: false, | ||
| accept: [ | ||
| // Border widths | ||
| { | ||
| code: '.x { border: var(--borderWidth-thin) solid var(--borderColor-default); }', | ||
| description: 'CSS > Accepts border shorthand with variables', | ||
| }, | ||
| { | ||
| code: '.x { border-width: var(--borderWidth-thin); }', | ||
| description: 'CSS > Accepts border shorthand with variables', | ||
| }, | ||
| { | ||
| code: '.x { border-left-width: var(--borderWidth-thin); }', | ||
| description: 'CSS > Accepts directional border longhand with variables', | ||
| }, | ||
| { | ||
| code: '.x { border-inline-start-width: var(--borderWidth-thin); }', | ||
| description: 'CSS > Accepts logical properties directional border longhand with variables', | ||
| }, | ||
| { | ||
| code: '.x { border: 0; }', | ||
| description: 'CSS > Allows zero values', | ||
| }, | ||
| { | ||
| code: '.x { border: inherit; border: initial; border: revert; border: revert-layer; border: unset; }', | ||
| description: 'CSS > Allows global values', | ||
| }, | ||
| // Border radii | ||
| { | ||
| code: '.x { border-radius: var(--borderRadius-medium); }', | ||
| description: 'CSS > Accepts border-radius with variables', | ||
| }, | ||
| { | ||
| code: '.x { border-radius: var(--borderRadius-large) var(--borderRadius-small); }', | ||
| description: 'CSS > Accepts border-radius shorthand with variables', | ||
| }, | ||
| { | ||
| code: '.x { border-bottom: var(--borderWidth-thin) solid var(--borderColor-muted); }', | ||
| description: 'CSS > Accepts directional border-bottom', | ||
| }, | ||
| { | ||
| code: '.x { border: var(--borderWidth-thin) solid transparent; }', | ||
| description: 'CSS > Accepts transparent colors', | ||
| }, | ||
| { | ||
| code: '.x { border-color: red; }', | ||
| description: 'CSS > Ignores border-color prop', | ||
| }, | ||
| // Figure out how to allow `calc()` values | ||
| ], | ||
| reject: [ | ||
| // Border widths | ||
| { | ||
| code: '.x { border: 20px; }', | ||
| unfixable: true, | ||
| message: messages.rejected('20px'), | ||
| line: 1, | ||
| column: 14, | ||
| endColumn: 18, | ||
| description: 'CSS > Errors on value not in border width list', | ||
| }, | ||
| { | ||
| code: '.x { border: $border-width $border-style var(--borderColor-attention-emphasis, var(--color-attention-emphasis)); }', | ||
| unfixable: true, | ||
| description: 'CSS > Errors on value not in border width list', | ||
| warnings: [ | ||
| { | ||
| message: messages.rejected('$border-width'), | ||
| line: 1, | ||
| column: 14, | ||
| endColumn: 27, | ||
| rule: 'primer/spacing', | ||
| severity: 'error', | ||
| }, | ||
| { | ||
| message: messages.rejected('$border-style'), | ||
| line: 1, | ||
| column: 28, | ||
| endColumn: 41, | ||
| rule: 'primer/spacing', | ||
| severity: 'error', | ||
| }, | ||
| ], | ||
| }, | ||
| { | ||
| code: '.x { border: 1px; }', | ||
| fixed: '.x { border: var(--borderWidth-thin); }', | ||
| message: messages.rejected('1px', {name: '--borderWidth-thin'}), | ||
| line: 1, | ||
| column: 14, | ||
| endColumn: 17, | ||
| description: "CSS > Replaces '1px' with 'var(--borderWidth-thin)'.", | ||
| }, | ||
| { | ||
| code: '.x { border-width: var(--borderRadius-small); }', | ||
| unfixable: true, | ||
| message: messages.rejected('var(--borderRadius-small)', undefined, 'border-width'), | ||
| line: 1, | ||
| column: 24, | ||
| endColumn: 44, | ||
| description: 'CSS > Does not accept a border radius variable for border width.', | ||
| }, | ||
| // Border radii | ||
| { | ||
| code: '.x { border-radius: 3px; }', | ||
| fixed: '.x { border-radius: var(--borderRadius-small); }', | ||
| message: messages.rejected('3px', {name: '--borderRadius-small'}), | ||
| line: 1, | ||
| column: 21, | ||
| endColumn: 24, | ||
| description: "CSS > Replaces '3px' with 'var(--borderRadius-small)'.", | ||
| }, | ||
| { | ||
| code: '.x { border-radius: 0.1875rem; }', | ||
| fixed: '.x { border-radius: var(--borderRadius-small); }', | ||
| message: messages.rejected('0.1875rem', {name: '--borderRadius-small'}), | ||
| line: 1, | ||
| column: 21, | ||
| endColumn: 30, | ||
| description: "CSS > Replaces '0.1875rem' with 'var(--borderRadius-small)'.", | ||
| }, | ||
| { | ||
| code: '.x { border-radius: var(--borderWidth-thin); }', | ||
| unfixable: true, | ||
| message: messages.rejected('var(--borderWidth-thin)', undefined, 'border-radius'), | ||
| line: 1, | ||
| column: 25, | ||
| endColumn: 43, | ||
| description: 'CSS > Does not accept a border width variable for border radius.', | ||
| }, | ||
| { | ||
| code: '.x { border-radius: 1px; }', | ||
| unfixable: true, | ||
| message: messages.rejected('1px', undefined, 'border-radius'), | ||
| line: 1, | ||
| column: 21, | ||
| endColumn: 24, | ||
| description: 'CSS > Does not autofix 1px to borderWidth-thin variable.', | ||
| }, | ||
| ], | ||
| }) | ||
|
|
||
| it('does not report properties with valid border color', () => { | ||
| return stylelint | ||
| .lint({ | ||
| code: dedent` | ||
| .x { border-color: var(--color-border-primary); } | ||
| .y { border-color: var(--color-btn-border-hover); } | ||
| .z { border-color: var(--color-diff-deletion-border); } | ||
| .a { border-color: var(--color-border); } | ||
| .a { border-color: var(--color-accent); } | ||
| `, | ||
| config: configWithOptions(true), | ||
| }) | ||
| .then(data => { | ||
| expect(data).not.toHaveErrored() | ||
| expect(data).toHaveWarningsLength(0) | ||
| }) | ||
| }) | ||
| // Styled Syntax Specific Tests | ||
| testRule({ | ||
| plugins, | ||
| ruleName, | ||
| customSyntax: 'postcss-styled-syntax', | ||
| codeFilename: 'example.tsx', | ||
| config: [true, {}], | ||
| fix: true, | ||
| cache: false, | ||
| accept: [ | ||
| { | ||
| code: dedent` | ||
| export const IconContainer = styled(Box)\` | ||
| border-radius: \${themeGet('radii.2')}; | ||
| \` | ||
| `, | ||
| description: 'TSX > Ignores themeGet.', | ||
| }, | ||
| ], | ||
| }) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.