@primer/stylelint-config 12.9.2 → 13.0.0-rc.0068ca3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +0 -4
- package/dist/index.cjs +1696 -0
- package/dist/index.mjs +1693 -0
- package/package.json +55 -26
- package/plugins/README.md +1 -131
- package/plugins/borders.js +2 -2
- package/plugins/box-shadow.js +2 -2
- package/plugins/colors.js +2 -2
- package/plugins/lib/decl-validator.js +4 -4
- package/plugins/lib/primer-utilities.js +1 -1
- package/plugins/lib/variable-rules.js +7 -22
- package/plugins/no-display-colors.js +5 -8
- package/plugins/responsive-widths.js +6 -9
- package/plugins/spacing.js +7 -10
- package/plugins/typography.js +2 -2
- package/plugins/utilities.js +5 -8
- package/property-order.js +1 -1
- package/browsers.js +0 -7
- package/index.js +0 -106
- package/plugins/lib/primer.js +0 -26
- package/plugins/new-color-vars-have-fallback.js +0 -39
- package/plugins/no-deprecated-colors.js +0 -103
- package/plugins/no-experimental-vars.js +0 -47
- package/plugins/no-override.js +0 -120
- package/plugins/no-scale-colors.js +0 -54
- package/plugins/no-undefined-vars.js +0 -121
- package/plugins/no-unused-vars.js +0 -96
package/package.json
CHANGED
|
@@ -1,12 +1,22 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@primer/stylelint-config",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "13.0.0-rc.0068ca3",
|
|
4
4
|
"description": "Sharable stylelint config used by GitHub's CSS",
|
|
5
|
-
"homepage": "http://primer.style/css/tools/linting",
|
|
6
5
|
"author": "GitHub, Inc.",
|
|
7
6
|
"license": "MIT",
|
|
8
|
-
"
|
|
9
|
-
"
|
|
7
|
+
"type": "module",
|
|
8
|
+
"main": "dist/index.cjs",
|
|
9
|
+
"exports": {
|
|
10
|
+
".": {
|
|
11
|
+
"import": "./dist/index.mjs",
|
|
12
|
+
"require": "./dist/index.cjs"
|
|
13
|
+
}
|
|
14
|
+
},
|
|
15
|
+
"browserslist": "extends @github/browserslist-config",
|
|
16
|
+
"repository": {
|
|
17
|
+
"type": "git",
|
|
18
|
+
"url": "git+https://github.com/primer/stylelint-config.git"
|
|
19
|
+
},
|
|
10
20
|
"keywords": [
|
|
11
21
|
"github",
|
|
12
22
|
"primer",
|
|
@@ -15,44 +25,62 @@
|
|
|
15
25
|
"stylelint"
|
|
16
26
|
],
|
|
17
27
|
"files": [
|
|
28
|
+
"dist/",
|
|
18
29
|
"property-order.js",
|
|
19
|
-
"browsers.js",
|
|
20
30
|
"plugins/"
|
|
21
31
|
],
|
|
32
|
+
"engines": {
|
|
33
|
+
"node": ">16.0.0"
|
|
34
|
+
},
|
|
22
35
|
"scripts": {
|
|
23
|
-
"
|
|
36
|
+
"pretest": "npm run build",
|
|
37
|
+
"build": "rollup -c",
|
|
38
|
+
"clean": "rimraf dist",
|
|
39
|
+
"test": "npm run test:jest && npm run test:stylelint",
|
|
40
|
+
"test:jest": "NODE_OPTIONS=\"$NODE_OPTIONS --experimental-vm-modules\" jest --coverage false",
|
|
41
|
+
"test:stylelint": "stylelint __tests__/__fixtures__/good/",
|
|
24
42
|
"lint": "eslint .",
|
|
25
43
|
"release": "changeset publish"
|
|
26
44
|
},
|
|
27
45
|
"dependencies": {
|
|
46
|
+
"@github/browserslist-config": "^1.0.0",
|
|
47
|
+
"@primer/css": "^21.0.8",
|
|
48
|
+
"@primer/primitives": "^7.16.0",
|
|
28
49
|
"anymatch": "^3.1.1",
|
|
29
|
-
"globby": "^11.0.1",
|
|
30
50
|
"postcss-scss": "^4.0.2",
|
|
51
|
+
"postcss-styled-syntax": "^0.6.4",
|
|
31
52
|
"postcss-value-parser": "^4.0.2",
|
|
32
53
|
"string.prototype.matchall": "^4.0.2",
|
|
33
|
-
"stylelint": "^
|
|
34
|
-
"stylelint-config-standard": "^
|
|
35
|
-
"stylelint-no-unsupported-browser-features": "^
|
|
36
|
-
"stylelint-order": "^6.0.
|
|
37
|
-
"stylelint-scss": "^
|
|
54
|
+
"stylelint": "^16.3.1",
|
|
55
|
+
"stylelint-config-standard": "^36.0.0",
|
|
56
|
+
"stylelint-no-unsupported-browser-features": "^8.0.0",
|
|
57
|
+
"stylelint-order": "^6.0.4",
|
|
58
|
+
"stylelint-scss": "^6.2.0",
|
|
59
|
+
"stylelint-value-no-unknown-custom-properties": "^6.0.1",
|
|
38
60
|
"tap-map": "^1.0.0"
|
|
39
61
|
},
|
|
62
|
+
"prettier": "@github/prettier-config",
|
|
40
63
|
"devDependencies": {
|
|
41
|
-
"@changesets/changelog-github": "0.
|
|
42
|
-
"@changesets/cli": "2.
|
|
43
|
-
"@github/prettier-config": "0.0.6",
|
|
44
|
-
"@
|
|
45
|
-
"@
|
|
46
|
-
"
|
|
47
|
-
"eslint": "
|
|
48
|
-
"
|
|
49
|
-
"eslint
|
|
50
|
-
"eslint-plugin-
|
|
51
|
-
"jest": "
|
|
52
|
-
"
|
|
53
|
-
"
|
|
64
|
+
"@changesets/changelog-github": "^0.5.0",
|
|
65
|
+
"@changesets/cli": "2.27.1",
|
|
66
|
+
"@github/prettier-config": "^0.0.6",
|
|
67
|
+
"@rollup/plugin-commonjs": "^25.0.7",
|
|
68
|
+
"@rollup/plugin-json": "^6.1.0",
|
|
69
|
+
"@rollup/plugin-node-resolve": "^15.2.3",
|
|
70
|
+
"@typescript-eslint/parser": "^7.7.0",
|
|
71
|
+
"dedent": "^1.5.3",
|
|
72
|
+
"eslint": "^8.0.1",
|
|
73
|
+
"eslint-plugin-github": "^4.10.2",
|
|
74
|
+
"eslint-plugin-jest": "^28.2.0",
|
|
75
|
+
"eslint-plugin-prettier": "^5.1.3",
|
|
76
|
+
"jest": "^29.7.0",
|
|
77
|
+
"jest-preset-stylelint": "^7.0.0",
|
|
78
|
+
"prettier": "^3.2.5",
|
|
79
|
+
"rimraf": "^5.0.5",
|
|
80
|
+
"rollup": "^4.14.3"
|
|
54
81
|
},
|
|
55
82
|
"jest": {
|
|
83
|
+
"transform": {},
|
|
56
84
|
"preset": "jest-preset-stylelint",
|
|
57
85
|
"collectCoverage": true,
|
|
58
86
|
"collectCoverageFrom": [
|
|
@@ -64,7 +92,8 @@
|
|
|
64
92
|
],
|
|
65
93
|
"testPathIgnorePatterns": [
|
|
66
94
|
"/node_modules/",
|
|
67
|
-
"__tests__/utils"
|
|
95
|
+
"__tests__/utils",
|
|
96
|
+
"__tests__/__fixtures__"
|
|
68
97
|
]
|
|
69
98
|
}
|
|
70
99
|
}
|
package/plugins/README.md
CHANGED
|
@@ -7,11 +7,6 @@ This directory contains all of our custom stylelint plugins, each of which provi
|
|
|
7
7
|
- [Primer stylelint plugins](#primer-stylelint-plugins)
|
|
8
8
|
- [Rules](#rules)
|
|
9
9
|
- [Usage](#usage)
|
|
10
|
-
- [`primer/no-override`](#primerno-override)
|
|
11
|
-
- [`primer/no-unused-vars`](#primerno-unused-vars)
|
|
12
|
-
- [`primer/no-deprecated-colors`](#primerno-deprecated-colors)
|
|
13
|
-
- [`primer/no-undefined-vars`](#primerno-undefined-vars)
|
|
14
|
-
- [`primer/no-scale-colors`](#primerno-scale-colors)
|
|
15
10
|
- [`primer/colors`](#primercolors)
|
|
16
11
|
- [`primer/spacing`](#primerspacing)
|
|
17
12
|
- [`primer/typography`](#primertypography)
|
|
@@ -33,131 +28,7 @@ If you're _not_ using or extending `@primer/stylelint-config`, you can still ref
|
|
|
33
28
|
```js
|
|
34
29
|
// stylelint.config.js
|
|
35
30
|
module.exports = {
|
|
36
|
-
plugins: ['@primer/stylelint-config/plugins/
|
|
37
|
-
}
|
|
38
|
-
```
|
|
39
|
-
|
|
40
|
-
## `primer/no-override`
|
|
41
|
-
|
|
42
|
-
This rule prohibits "overriding" class selectors defined in [Primer CSS]. By default, it will only fail selectors that target utility classes:
|
|
43
|
-
|
|
44
|
-
```scss
|
|
45
|
-
// FAIL
|
|
46
|
-
.mt-0 {
|
|
47
|
-
/* literally anything */
|
|
48
|
-
}
|
|
49
|
-
```
|
|
50
|
-
|
|
51
|
-
You can further constrain overrides to exclude _any_ class selector in Primer by providing additional names in the `bundles` option:
|
|
52
|
-
|
|
53
|
-
```js
|
|
54
|
-
// stylelint.config.js
|
|
55
|
-
module.exports = {
|
|
56
|
-
// ...
|
|
57
|
-
rules: {
|
|
58
|
-
'primer/no-override': [
|
|
59
|
-
true,
|
|
60
|
-
{
|
|
61
|
-
bundles: ['utilities', core', 'product', 'marketing']
|
|
62
|
-
}
|
|
63
|
-
]
|
|
64
|
-
}
|
|
65
|
-
}
|
|
66
|
-
```
|
|
67
|
-
|
|
68
|
-
## `primer/no-unused-vars`
|
|
69
|
-
|
|
70
|
-
This rule helps you find SCSS variables that _may_ not be used, and can be safely deleted. It works by scanning all of the SCSS files in your project and looking for anything that appears to be either a Sass variable declaration or reference:
|
|
71
|
-
|
|
72
|
-
```scss
|
|
73
|
-
$name: value;
|
|
74
|
-
/** ↑
|
|
75
|
-
* The colon is what makes this a declaration */
|
|
76
|
-
|
|
77
|
-
/* Anything starting with a $ and followed by word chars or hyphens
|
|
78
|
-
* and _not_ followed by a colon is considered a reference: */
|
|
79
|
-
|
|
80
|
-
margin: $value;
|
|
81
|
-
/** ↑
|
|
82
|
-
* Not a colon */
|
|
83
|
-
padding: $value 1px;
|
|
84
|
-
/** ↑
|
|
85
|
-
* Not a colon */
|
|
86
|
-
|
|
87
|
-
@media screen and (max-width: $break-lg) {
|
|
88
|
-
/** ↑
|
|
89
|
-
* Also not a colon */
|
|
90
|
-
```
|
|
91
|
-
|
|
92
|
-
Equipped with a list of all the variable declarations and references, the linting rule walks all of the declarations in the
|
|
93
|
-
file being linted, finds any that look like declarations (using the same pattern as the project-wide scan), and generates a warning for any that have zero references in the files it's scanned.
|
|
94
|
-
|
|
95
|
-
Because there isn't any good way for a stylelint plugin to know all of the files being linted, it needs to be told where to find all of the declarations and references in its options:
|
|
96
|
-
|
|
97
|
-
- `files` is a single path, glob, or array of paths and globs, that tells the plugin which files to scan relative to the current working directory. The default is `['**/*.scss', '!node_modules']`, which tells [globby] to find all the `.scss` files recursively and ignore the `node_modules` directory.
|
|
98
|
-
|
|
99
|
-
- `variablePattern` is a regular expression that matches a single variable in either a source file string or the `prop` of a postcss Declaration node (`{type: 'decl'}`). The default matches Sass/SCSS variables: `/\$[-\w]/g`. Note that the `g` ("global") flag is _required_ to match multiple variable references on a single line.
|
|
100
|
-
|
|
101
|
-
- `verbose` is a boolean that enables chatty `console.warn()` messages telling you what the plugin found, which can aid in debugging more complicated project layouts.
|
|
102
|
-
|
|
103
|
-
## `primer/no-deprecated-colors`
|
|
104
|
-
|
|
105
|
-
This rule identifies deprecated color variables from [primer/primitives]](https://github.com/primer/primitives) deprecated.json file and suggests replacements.
|
|
106
|
-
|
|
107
|
-
```scss
|
|
108
|
-
body {
|
|
109
|
-
color: var(--color-fg-default);
|
|
110
|
-
}
|
|
111
|
-
/** ↑
|
|
112
|
-
* OK: --color-text-primary is defined */
|
|
113
|
-
|
|
114
|
-
body {
|
|
115
|
-
color: var(--color-text-primary);
|
|
116
|
-
}
|
|
117
|
-
/** ↑
|
|
118
|
-
* FAIL: --color-text-primary is deprecated. */
|
|
119
|
-
```
|
|
120
|
-
|
|
121
|
-
## `primer/no-undefined-vars`
|
|
122
|
-
|
|
123
|
-
This rule prohibits any usages of undefined CSS variables.
|
|
124
|
-
|
|
125
|
-
```scss
|
|
126
|
-
:root {
|
|
127
|
-
--color-text-primary: #000;
|
|
128
|
-
}
|
|
129
|
-
|
|
130
|
-
body {
|
|
131
|
-
color: var(--color-text-primary);
|
|
132
|
-
}
|
|
133
|
-
/** ↑
|
|
134
|
-
* OK: --color-text-primary is defined */
|
|
135
|
-
|
|
136
|
-
body {
|
|
137
|
-
color: var(--color-foo);
|
|
138
|
-
}
|
|
139
|
-
/** ↑
|
|
140
|
-
* FAIL: --color-foo is not defined */
|
|
141
|
-
```
|
|
142
|
-
|
|
143
|
-
For the purposes of this rule, a CSS variable declaration is any text starting with `--` and immediately followed by a colon.
|
|
144
|
-
|
|
145
|
-
Because there isn't a good way for a stylelint plugin to know what CSS variables are defined, it needs to be told where to look for declarations in its options:
|
|
146
|
-
|
|
147
|
-
- `files` is a single path, glob, or array of paths and globs, that tells the plugin which files (relative to the current working directory) to scan for CSS variable declarations. The default is `['**/*.scss', '!node_modules']`, which tells [globby] to find all the `.scss` files recursively and ignore the `node_modules` directory.
|
|
148
|
-
- `verbose` is a boolean that enables chatty `console.warn()` messages telling you what the plugin found, which can aid in debugging more complicated project layouts.
|
|
149
|
-
|
|
150
|
-
## `primer/no-scale-colors`
|
|
151
|
-
|
|
152
|
-
This rule prohibits the use of [non-functional scale CSS variables](https://primer.style/css/support/color-system#color-palette) like `var(--color-scale-blue-1)` in all cases except the `color-variables` mixin.
|
|
153
|
-
|
|
154
|
-
```scss
|
|
155
|
-
// Okay; using scale colors while defining new variables
|
|
156
|
-
@include color-scale-var('new-var-name', var(--color-scale-blue-1), var(--color-scale-blue-2))
|
|
157
|
-
|
|
158
|
-
// Fail; using scale colors directly as a property value
|
|
159
|
-
.selector {
|
|
160
|
-
color: var(--color-scale-blue-1)
|
|
31
|
+
plugins: ['@primer/stylelint-config/plugins/colors']
|
|
161
32
|
}
|
|
162
33
|
```
|
|
163
34
|
|
|
@@ -377,5 +248,4 @@ module.exports = {
|
|
|
377
248
|
- `disableFix` is a boolean that can disable auto-fixing of this rule when running `stylelint --fix` to auto-fix other rules.
|
|
378
249
|
|
|
379
250
|
[primer css]: https://primer.style/css
|
|
380
|
-
[globby]: https://www.npmjs.com/package/globby
|
|
381
251
|
[glob patterns]: http://tldp.org/LDP/GNU-Linux-Tools-Summary/html/x11655.htm
|
package/plugins/borders.js
CHANGED
package/plugins/box-shadow.js
CHANGED
package/plugins/colors.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
|
|
1
|
+
import {createVariableRule} from './lib/variable-rules.js'
|
|
2
2
|
|
|
3
3
|
const bgVars = [
|
|
4
4
|
'$bg-*',
|
|
@@ -12,7 +12,7 @@ const bgVars = [
|
|
|
12
12
|
/var\((.+-)*iconColor(-.+)*\)/,
|
|
13
13
|
]
|
|
14
14
|
|
|
15
|
-
|
|
15
|
+
export default createVariableRule(
|
|
16
16
|
'primer/colors',
|
|
17
17
|
{
|
|
18
18
|
'background-color': {
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
import anymatch from 'anymatch'
|
|
2
|
+
import valueParser from 'postcss-value-parser'
|
|
3
|
+
import TapMap from 'tap-map'
|
|
4
4
|
|
|
5
5
|
const SKIP_VALUE_NODE_TYPES = new Set(['space', 'div'])
|
|
6
6
|
const SKIP_AT_RULE_NAMES = new Set(['each', 'for', 'function', 'mixin'])
|
|
7
7
|
|
|
8
|
-
|
|
8
|
+
export default function declarationValidator(rules, options = {}) {
|
|
9
9
|
const {formatMessage = defaultMessageFormatter, variables, verbose = false} = options
|
|
10
10
|
const variableReplacements = new TapMap()
|
|
11
11
|
if (variables) {
|
|
@@ -1,27 +1,12 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
import stylelint from 'stylelint'
|
|
2
|
+
import declarationValidator from './decl-validator.js'
|
|
3
|
+
import variables from '@primer/css/dist/variables.json' with {type: 'json'}
|
|
4
4
|
|
|
5
|
-
const CSS_IMPORTANT = '!important'
|
|
6
|
-
const CSS_DIRECTIONS = ['top', 'right', 'bottom', 'left']
|
|
7
|
-
const CSS_CORNERS = ['top-right', 'bottom-right', 'bottom-left', 'top-left']
|
|
8
|
-
|
|
9
|
-
module.exports = {
|
|
10
|
-
createVariableRule,
|
|
11
|
-
CSS_DIRECTIONS,
|
|
12
|
-
CSS_CORNERS,
|
|
13
|
-
CSS_IMPORTANT,
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
function createVariableRule(ruleName, rules, url) {
|
|
17
|
-
let variables = {}
|
|
18
|
-
try {
|
|
19
|
-
variables = requirePrimerFile('dist/variables.json')
|
|
20
|
-
} catch (error) {
|
|
21
|
-
// eslint-disable-next-line no-console
|
|
22
|
-
console.warn(`Unable to get variables.json from @primer/css. Replacements will need to be specified manually.`)
|
|
23
|
-
}
|
|
5
|
+
export const CSS_IMPORTANT = '!important'
|
|
6
|
+
export const CSS_DIRECTIONS = ['top', 'right', 'bottom', 'left']
|
|
7
|
+
export const CSS_CORNERS = ['top-right', 'bottom-right', 'bottom-left', 'top-left']
|
|
24
8
|
|
|
9
|
+
export function createVariableRule(ruleName, rules, url) {
|
|
25
10
|
const plugin = stylelint.createPlugin(ruleName, (enabled, options = {}, context) => {
|
|
26
11
|
if (enabled === false) {
|
|
27
12
|
return noop
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
import stylelint from 'stylelint'
|
|
2
|
+
import matchAll from 'string.prototype.matchall'
|
|
3
3
|
|
|
4
|
-
const ruleName = 'primer/no-display-colors'
|
|
5
|
-
const messages = stylelint.utils.ruleMessages(ruleName, {
|
|
4
|
+
export const ruleName = 'primer/no-display-colors'
|
|
5
|
+
export const messages = stylelint.utils.ruleMessages(ruleName, {
|
|
6
6
|
rejected: varName => `${varName} is in alpha and should be used with caution with approval from the Primer team`,
|
|
7
7
|
})
|
|
8
8
|
|
|
@@ -10,7 +10,7 @@ const messages = stylelint.utils.ruleMessages(ruleName, {
|
|
|
10
10
|
// eslint-disable-next-line no-useless-escape
|
|
11
11
|
const variableReferenceRegex = /var\(([^\),]+)(,.*)?\)/g
|
|
12
12
|
|
|
13
|
-
|
|
13
|
+
export default stylelint.createPlugin(ruleName, (enabled, options = {}) => {
|
|
14
14
|
if (!enabled) {
|
|
15
15
|
return noop
|
|
16
16
|
}
|
|
@@ -48,6 +48,3 @@ module.exports = stylelint.createPlugin(ruleName, (enabled, options = {}) => {
|
|
|
48
48
|
})
|
|
49
49
|
|
|
50
50
|
function noop() {}
|
|
51
|
-
|
|
52
|
-
module.exports.ruleName = ruleName
|
|
53
|
-
module.exports.messages = messages
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
import stylelint from 'stylelint'
|
|
2
|
+
import declarationValueIndex from 'stylelint/lib/utils/declarationValueIndex.cjs'
|
|
3
|
+
import valueParser from 'postcss-value-parser'
|
|
4
4
|
|
|
5
|
-
const ruleName = 'primer/responsive-widths'
|
|
5
|
+
export const ruleName = 'primer/responsive-widths'
|
|
6
6
|
|
|
7
|
-
const messages = stylelint.utils.ruleMessages(ruleName, {
|
|
7
|
+
export const messages = stylelint.utils.ruleMessages(ruleName, {
|
|
8
8
|
rejected: value => {
|
|
9
9
|
return `A value larger than the smallest viewport could break responsive pages. Use a width value smaller than ${value}. https://primer.style/css/support/breakpoints`
|
|
10
10
|
},
|
|
@@ -24,7 +24,7 @@ const walkGroups = (root, validate) => {
|
|
|
24
24
|
}
|
|
25
25
|
|
|
26
26
|
// eslint-disable-next-line no-unused-vars
|
|
27
|
-
|
|
27
|
+
export default stylelint.createPlugin(ruleName, (enabled, options = {}, context) => {
|
|
28
28
|
if (!enabled) {
|
|
29
29
|
return noop
|
|
30
30
|
}
|
|
@@ -93,6 +93,3 @@ module.exports = stylelint.createPlugin(ruleName, (enabled, options = {}, contex
|
|
|
93
93
|
})
|
|
94
94
|
|
|
95
95
|
function noop() {}
|
|
96
|
-
|
|
97
|
-
module.exports.ruleName = ruleName
|
|
98
|
-
module.exports.messages = messages
|
package/plugins/spacing.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
import stylelint from 'stylelint'
|
|
2
|
+
import declarationValueIndex from 'stylelint/lib/utils/declarationValueIndex.cjs'
|
|
3
|
+
import valueParser from 'postcss-value-parser'
|
|
4
4
|
|
|
5
5
|
// TODO: Pull this in from primer/primitives
|
|
6
6
|
const spacerValues = {
|
|
@@ -24,11 +24,11 @@ const spacerValues = {
|
|
|
24
24
|
'$em-spacer-6': '0.75em',
|
|
25
25
|
}
|
|
26
26
|
|
|
27
|
-
const ruleName = 'primer/spacing'
|
|
28
|
-
const messages = stylelint.utils.ruleMessages(ruleName, {
|
|
27
|
+
export const ruleName = 'primer/spacing'
|
|
28
|
+
export const messages = stylelint.utils.ruleMessages(ruleName, {
|
|
29
29
|
rejected: (value, replacement) => {
|
|
30
30
|
if (replacement === null) {
|
|
31
|
-
return `Please use a primer spacer variable instead of '${value}'. Consult the primer docs for a suitable replacement. https://primer.style/css/support
|
|
31
|
+
return `Please use a primer spacer variable instead of '${value}'. Consult the primer docs for a suitable replacement. https://primer.style/css/storybook/?path=/docs/support-spacing--docs`
|
|
32
32
|
}
|
|
33
33
|
|
|
34
34
|
return `Please replace ${value} with spacing variable '${replacement}'.`
|
|
@@ -47,7 +47,7 @@ const walkGroups = (root, validate) => {
|
|
|
47
47
|
}
|
|
48
48
|
|
|
49
49
|
// eslint-disable-next-line no-unused-vars
|
|
50
|
-
|
|
50
|
+
export default stylelint.createPlugin(ruleName, (enabled, options = {}, context) => {
|
|
51
51
|
if (!enabled) {
|
|
52
52
|
return noop
|
|
53
53
|
}
|
|
@@ -126,6 +126,3 @@ module.exports = stylelint.createPlugin(ruleName, (enabled, options = {}, contex
|
|
|
126
126
|
})
|
|
127
127
|
|
|
128
128
|
function noop() {}
|
|
129
|
-
|
|
130
|
-
module.exports.ruleName = ruleName
|
|
131
|
-
module.exports.messages = messages
|
package/plugins/typography.js
CHANGED
package/plugins/utilities.js
CHANGED
|
@@ -1,16 +1,16 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
import stylelint from 'stylelint'
|
|
2
|
+
import utilities from './lib/primer-utilities.js'
|
|
3
3
|
|
|
4
|
-
const ruleName = 'primer/utilities'
|
|
4
|
+
export const ruleName = 'primer/utilities'
|
|
5
5
|
|
|
6
|
-
const messages = stylelint.utils.ruleMessages(ruleName, {
|
|
6
|
+
export const messages = stylelint.utils.ruleMessages(ruleName, {
|
|
7
7
|
rejected: (selector, utilityClass) => {
|
|
8
8
|
return `Consider using the Primer utility '.${utilityClass}' instead of the selector '${selector}' in your html. https://primer.style/css/utilities`
|
|
9
9
|
},
|
|
10
10
|
})
|
|
11
11
|
|
|
12
12
|
// eslint-disable-next-line no-unused-vars
|
|
13
|
-
|
|
13
|
+
export default stylelint.createPlugin(ruleName, (enabled, options = {}, context) => {
|
|
14
14
|
if (!enabled) {
|
|
15
15
|
return noop
|
|
16
16
|
}
|
|
@@ -50,6 +50,3 @@ module.exports = stylelint.createPlugin(ruleName, (enabled, options = {}, contex
|
|
|
50
50
|
})
|
|
51
51
|
|
|
52
52
|
function noop() {}
|
|
53
|
-
|
|
54
|
-
module.exports.ruleName = ruleName
|
|
55
|
-
module.exports.messages = messages
|
package/property-order.js
CHANGED
package/browsers.js
DELETED
package/index.js
DELETED
|
@@ -1,106 +0,0 @@
|
|
|
1
|
-
const browsers = require('./browsers')
|
|
2
|
-
const propertyOrder = require('./property-order')
|
|
3
|
-
|
|
4
|
-
module.exports = {
|
|
5
|
-
extends: ['stylelint-config-standard'],
|
|
6
|
-
customSyntax: require('postcss-scss'),
|
|
7
|
-
ignoreFiles: ['**/*.js', '**/*.cjs'],
|
|
8
|
-
plugins: [
|
|
9
|
-
'stylelint-no-unsupported-browser-features',
|
|
10
|
-
'stylelint-order',
|
|
11
|
-
'stylelint-scss',
|
|
12
|
-
'./plugins/borders',
|
|
13
|
-
'./plugins/box-shadow',
|
|
14
|
-
'./plugins/colors',
|
|
15
|
-
'./plugins/no-deprecated-colors',
|
|
16
|
-
'./plugins/no-experimental-vars',
|
|
17
|
-
'./plugins/no-override',
|
|
18
|
-
'./plugins/no-scale-colors',
|
|
19
|
-
'./plugins/no-undefined-vars',
|
|
20
|
-
'./plugins/no-unused-vars',
|
|
21
|
-
'./plugins/responsive-widths',
|
|
22
|
-
'./plugins/spacing',
|
|
23
|
-
'./plugins/typography',
|
|
24
|
-
'./plugins/utilities',
|
|
25
|
-
'./plugins/new-color-vars-have-fallback',
|
|
26
|
-
'./plugins/no-display-colors',
|
|
27
|
-
],
|
|
28
|
-
rules: {
|
|
29
|
-
'alpha-value-notation': 'number',
|
|
30
|
-
'at-rule-disallowed-list': ['extend'],
|
|
31
|
-
'at-rule-no-unknown': null,
|
|
32
|
-
'block-no-empty': true,
|
|
33
|
-
'color-function-notation': null,
|
|
34
|
-
'color-named': 'never',
|
|
35
|
-
'color-no-invalid-hex': true,
|
|
36
|
-
'comment-no-empty': null,
|
|
37
|
-
'custom-property-pattern': null,
|
|
38
|
-
'declaration-block-no-duplicate-properties': [true, {ignore: ['consecutive-duplicates']}],
|
|
39
|
-
'declaration-block-no-redundant-longhand-properties': null,
|
|
40
|
-
'declaration-block-no-shorthand-property-overrides': true,
|
|
41
|
-
'declaration-property-value-disallowed-list': {
|
|
42
|
-
'/^transition/': ['/all/'],
|
|
43
|
-
'/^background/': ['http:', 'https:'],
|
|
44
|
-
'/^border/': ['none'],
|
|
45
|
-
'/.+/': ['initial'],
|
|
46
|
-
},
|
|
47
|
-
'function-calc-no-unspaced-operator': true,
|
|
48
|
-
'function-linear-gradient-no-nonstandard-direction': true,
|
|
49
|
-
'function-no-unknown': null,
|
|
50
|
-
'keyframes-name-pattern': null,
|
|
51
|
-
'max-nesting-depth': 3,
|
|
52
|
-
'media-feature-name-no-unknown': null,
|
|
53
|
-
'media-feature-name-no-vendor-prefix': null,
|
|
54
|
-
'no-descending-specificity': null,
|
|
55
|
-
'no-duplicate-selectors': true,
|
|
56
|
-
'no-invalid-position-at-import-rule': [true, {ignoreAtRules: ['use']}],
|
|
57
|
-
'number-max-precision': null,
|
|
58
|
-
'order/properties-order': propertyOrder,
|
|
59
|
-
'plugin/no-unsupported-browser-features': [true, {severity: 'warning', browsers}],
|
|
60
|
-
'primer/borders': true,
|
|
61
|
-
'primer/box-shadow': true,
|
|
62
|
-
'primer/colors': true,
|
|
63
|
-
'primer/no-deprecated-colors': true,
|
|
64
|
-
'primer/no-experimental-vars': [
|
|
65
|
-
true,
|
|
66
|
-
{
|
|
67
|
-
designTokens: '@primer/primitives/tokens-v2-private/docs/docValues.json',
|
|
68
|
-
},
|
|
69
|
-
],
|
|
70
|
-
'primer/no-override': true,
|
|
71
|
-
'primer/no-undefined-vars': [
|
|
72
|
-
true,
|
|
73
|
-
{severity: 'warning', files: 'node_modules/@primer/primitives/dist/scss/colors*/*.scss'},
|
|
74
|
-
],
|
|
75
|
-
'primer/no-unused-vars': [true, {severity: 'warning'}],
|
|
76
|
-
'primer/responsive-widths': true,
|
|
77
|
-
'primer/spacing': true,
|
|
78
|
-
'primer/typography': true,
|
|
79
|
-
'primer/utilities': null,
|
|
80
|
-
'primer/new-color-vars-have-fallback': [true, {severity: 'error'}],
|
|
81
|
-
'scss/at-extend-no-missing-placeholder': true,
|
|
82
|
-
'scss/at-rule-no-unknown': true,
|
|
83
|
-
'scss/declaration-nested-properties-no-divided-groups': true,
|
|
84
|
-
'scss/dollar-variable-no-missing-interpolation': true,
|
|
85
|
-
'scss/function-quote-no-quoted-strings-inside': true,
|
|
86
|
-
'scss/function-unquote-no-unquoted-strings-inside': true,
|
|
87
|
-
'scss/no-duplicate-mixins': true,
|
|
88
|
-
'scss/selector-no-redundant-nesting-selector': true,
|
|
89
|
-
'selector-class-pattern': null,
|
|
90
|
-
'selector-max-compound-selectors': 3,
|
|
91
|
-
'selector-max-id': 0,
|
|
92
|
-
'selector-max-specificity': '0,4,0',
|
|
93
|
-
'selector-max-type': 0,
|
|
94
|
-
'selector-no-qualifying-type': true,
|
|
95
|
-
'selector-pseudo-element-no-unknown': true,
|
|
96
|
-
'string-no-newline': true,
|
|
97
|
-
'unit-no-unknown': true,
|
|
98
|
-
'value-keyword-case': null,
|
|
99
|
-
'selector-not-notation': null,
|
|
100
|
-
'import-notation': ['string'],
|
|
101
|
-
'annotation-no-unknown': null,
|
|
102
|
-
'keyframe-selector-notation': ['percentage-unless-within-keyword-only-block'],
|
|
103
|
-
'media-query-no-invalid': null,
|
|
104
|
-
'media-feature-range-notation': ['prefix'],
|
|
105
|
-
},
|
|
106
|
-
}
|
package/plugins/lib/primer.js
DELETED
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
const {existsSync} = require('fs')
|
|
2
|
-
const {join} = require('path')
|
|
3
|
-
|
|
4
|
-
module.exports = {
|
|
5
|
-
getPrimerModuleDir,
|
|
6
|
-
requirePrimerFile,
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
function getPrimerModuleDir() {
|
|
10
|
-
const cwd = process.cwd()
|
|
11
|
-
const localPackageJson = join(cwd, 'package.json')
|
|
12
|
-
if (existsSync(localPackageJson)) {
|
|
13
|
-
// eslint-disable-next-line import/no-dynamic-require
|
|
14
|
-
const {name} = require(localPackageJson)
|
|
15
|
-
if (name === '@primer/css') {
|
|
16
|
-
return cwd
|
|
17
|
-
}
|
|
18
|
-
}
|
|
19
|
-
return '@primer/css'
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
function requirePrimerFile(path) {
|
|
23
|
-
const fullPath = join(getPrimerModuleDir(), path)
|
|
24
|
-
// eslint-disable-next-line import/no-dynamic-require
|
|
25
|
-
return require(fullPath)
|
|
26
|
-
}
|