@navikt/aksel-stylelint 7.40.0 → 8.0.1
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 +21 -55
- package/dist/deprecations.js +6 -69
- package/dist/index.css +7339 -9507
- package/dist/recommended.js +1 -1
- package/dist/rules/aksel-design-token-exists/index.js +12 -18
- package/dist/rules/aksel-design-token-exists/index.test.js +21 -30
- package/dist/rules/aksel-design-token-no-global-override/index.js +14 -23
- package/dist/rules/aksel-design-token-no-global-override/index.test.js +10 -14
- package/dist/rules/aksel-no-class-override/index.js +7 -6
- package/dist/rules/aksel-no-class-override/index.test.js +4 -13
- package/dist/rules/aksel-no-deprecated-classes/index.js +3 -2
- package/dist/rules/aksel-no-deprecated-classes/index.test.js +11 -12
- package/dist/rules/aksel-no-internal-tokens/index.js +6 -5
- package/dist/rules/aksel-no-internal-tokens/index.test.js +20 -20
- package/dist/rules/aksel-no-legacy-classes/index.js +3 -2
- package/dist/rules/index.js +0 -2
- package/package.json +4 -4
- package/dist/rules/aksel-design-token-no-component-reference/index.js +0 -49
- package/dist/rules/aksel-design-token-no-component-reference/index.test.js +0 -63
package/README.md
CHANGED
|
@@ -31,16 +31,16 @@ It should be sufficient for most cases to extend the recommended defaults.
|
|
|
31
31
|
|
|
32
32
|
## aksel/design-token-exists
|
|
33
33
|
|
|
34
|
-
Makes sure all referenced CSS-variables with prefix `--
|
|
34
|
+
Makes sure all referenced CSS-variables with prefix `--ax-` exists in Aksel's token-collection. As a side-effect Aksel reserves these prefixes for its design-tokens.
|
|
35
35
|
|
|
36
36
|
❌ Incorrect:
|
|
37
37
|
|
|
38
38
|
```css
|
|
39
39
|
html {
|
|
40
|
-
--
|
|
41
|
-
|
|
42
|
-
background-color: var(--
|
|
43
|
-
|
|
40
|
+
--ax-my-own-color-bg-hover: #f2f2f2;
|
|
41
|
+
^^^^^^^^^^^^^^^^^^^^^^^^^^
|
|
42
|
+
background-color: var(--ax-my-own-color-bg-hover);
|
|
43
|
+
^^^^^^^^^^^^^^^^^^^^^^^^^^
|
|
44
44
|
}
|
|
45
45
|
```
|
|
46
46
|
|
|
@@ -48,20 +48,20 @@ html {
|
|
|
48
48
|
|
|
49
49
|
```css
|
|
50
50
|
html {
|
|
51
|
-
background-color: var(--
|
|
51
|
+
background-color: var(--ax-bg-default);
|
|
52
52
|
}
|
|
53
53
|
```
|
|
54
54
|
|
|
55
55
|
## aksel/design-token-no-global-override
|
|
56
56
|
|
|
57
|
-
Makes sure you don't override
|
|
57
|
+
Makes sure you don't override Aksel design tokens with `--ax-`-prefix. Design tokens are supposed to be used as is, and not overridden. That is unless you are theming your solution to match a different brand. In those cases we encourage to make all the changes in a single 'config'-file, then disable the rule for that file only.
|
|
58
58
|
|
|
59
59
|
❌ Incorrect:
|
|
60
60
|
|
|
61
61
|
```css
|
|
62
62
|
div {
|
|
63
|
-
--
|
|
64
|
-
|
|
63
|
+
--ax-surface-default: #f2f2f2;
|
|
64
|
+
^^^^^^^^^^^^^^^^^^^^
|
|
65
65
|
}
|
|
66
66
|
```
|
|
67
67
|
|
|
@@ -69,48 +69,26 @@ div {
|
|
|
69
69
|
|
|
70
70
|
```css
|
|
71
71
|
div {
|
|
72
|
-
background-color: var(--
|
|
73
|
-
}
|
|
74
|
-
```
|
|
75
|
-
|
|
76
|
-
## aksel/design-token-no-component-reference
|
|
77
|
-
|
|
78
|
-
Makes sure you don't reference component level tokens with `--ac-`-prefix. Component level tokens are only supposed to be overridden, not referenced.
|
|
79
|
-
This is since they are by default not defined, leading to unknown side-effects when referenced incorrectly.
|
|
80
|
-
|
|
81
|
-
❌ Incorrect:
|
|
82
|
-
|
|
83
|
-
```css
|
|
84
|
-
html {
|
|
85
|
-
stroke: var(--ac-button-loader-stroke);
|
|
86
|
-
^^^^^^^^^^^^^^^^^^^^^^^^^
|
|
87
|
-
}
|
|
88
|
-
```
|
|
89
|
-
|
|
90
|
-
✅ Correct:
|
|
91
|
-
|
|
92
|
-
```css
|
|
93
|
-
html {
|
|
94
|
-
--ac-button-loader-stroke: lawngreen;
|
|
72
|
+
background-color: var(--ax-surface-default);
|
|
95
73
|
}
|
|
96
74
|
```
|
|
97
75
|
|
|
98
76
|
## aksel/no-internal-tokens
|
|
99
77
|
|
|
100
|
-
Disallows use or override of internal Aksel
|
|
78
|
+
Disallows use or override of internal Aksel CSS variables. Internal CSS variables are not supposed to be used outside the design system, and may be changed or removed without warning. Be aware that the rule simply checks the prefix of the token, and not if it actually exists in the design system. Even if it doesn't exist, using design system prefixes should be avoided.
|
|
101
79
|
|
|
102
80
|
❌ Incorrect:
|
|
103
81
|
|
|
104
82
|
```css
|
|
105
83
|
a {
|
|
106
|
-
--
|
|
107
|
-
}
|
|
84
|
+
--__axc-some-property: pink;
|
|
85
|
+
} ^^^^^^^^^^^^^^^^^^^^^
|
|
108
86
|
```
|
|
109
87
|
|
|
110
88
|
```css
|
|
111
89
|
a {
|
|
112
|
-
color: var(--
|
|
113
|
-
}
|
|
90
|
+
color: var(--__axc-some-property);
|
|
91
|
+
} ^^^^^^^^^^^^^^^^^^^^^
|
|
114
92
|
```
|
|
115
93
|
|
|
116
94
|
✅ Correct:
|
|
@@ -129,21 +107,16 @@ a {
|
|
|
129
107
|
|
|
130
108
|
## aksel/no-class-override
|
|
131
109
|
|
|
132
|
-
Warns when trying to override design system styling by using class selectors that starts with "
|
|
110
|
+
Warns when trying to override design system styling by using class selectors that starts with "aksel-". Overriding styles in the design system is discouraged. We want to have consistent look and feel across applications. Even if it seems to work fine now, it might break on subsequent updates in the design system.
|
|
133
111
|
|
|
134
112
|
❌ Incorrect:
|
|
135
113
|
|
|
136
114
|
```css
|
|
137
|
-
.
|
|
138
|
-
|
|
115
|
+
.aksel-button {
|
|
116
|
+
^^^^^^^^^^^^
|
|
139
117
|
}
|
|
140
118
|
```
|
|
141
119
|
|
|
142
|
-
```css
|
|
143
|
-
.some-class .navdsi-header {
|
|
144
|
-
} ^^^^^^^^^^^^^^
|
|
145
|
-
```
|
|
146
|
-
|
|
147
120
|
✅ Correct:
|
|
148
121
|
|
|
149
122
|
```css
|
|
@@ -158,15 +131,8 @@ Warns when you try to use deprecated class names.
|
|
|
158
131
|
❌ Incorrect:
|
|
159
132
|
|
|
160
133
|
```css
|
|
161
|
-
.
|
|
162
|
-
|
|
163
|
-
}
|
|
164
|
-
```
|
|
165
|
-
|
|
166
|
-
✅ Correct:
|
|
167
|
-
|
|
168
|
-
```css
|
|
169
|
-
.guaranteed-not-deprecated {
|
|
134
|
+
.aksel-deprecated-example {
|
|
135
|
+
^^^^^^^^^^^^^^^^^^^^^^^^
|
|
170
136
|
}
|
|
171
137
|
```
|
|
172
138
|
|
|
@@ -183,7 +149,7 @@ We still discourage overriding class names from `@navikt/ds-css`:
|
|
|
183
149
|
|
|
184
150
|
```css
|
|
185
151
|
.navds-button {
|
|
186
|
-
|
|
152
|
+
^^^^^^^^^^^^
|
|
187
153
|
}
|
|
188
154
|
```
|
|
189
155
|
|
package/dist/deprecations.js
CHANGED
|
@@ -3,77 +3,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
exports.deprecations = void 0;
|
|
4
4
|
exports.deprecations = [
|
|
5
5
|
{
|
|
6
|
-
|
|
7
|
-
|
|
6
|
+
// For testing
|
|
7
|
+
classes: ["aksel-deprecated-example", "aksel-other-deprecated-example"],
|
|
8
|
+
message: "Removed in vX.X.X, see documentation [link] for more information.",
|
|
8
9
|
},
|
|
9
10
|
{
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
"navdsi-header",
|
|
14
|
-
"navdsi-timeline",
|
|
15
|
-
],
|
|
16
|
-
message: "Class were moved to '@navikt/ds-css' and renamed with 'navds'-prefix in v4.0.0. Docs: https://aksel.nav.no/grunnleggende/kode/endringslogg#h728704adeb59.",
|
|
11
|
+
// For testing
|
|
12
|
+
classes: ["aksel-deprecated-prefix-example"],
|
|
13
|
+
message: "Removed in vX.X.X, see documentation [link] for more information.",
|
|
17
14
|
deprecatePrefix: true,
|
|
18
15
|
},
|
|
19
|
-
{
|
|
20
|
-
classes: ["navds-chips--icon-left"],
|
|
21
|
-
message: "In v4.1.0 Chips. Toggle no longer handles special alignment for checkmark-icon, thus removing this class",
|
|
22
|
-
},
|
|
23
|
-
{
|
|
24
|
-
classes: ["navds-modal__overlay"],
|
|
25
|
-
message: "Removed in v5.0.0, use `.navds-modal::backdrop` and `.navds-modal--polyfilled + .backdrop` instead",
|
|
26
|
-
},
|
|
27
|
-
{
|
|
28
|
-
classes: ["navds-modal__button--shake"],
|
|
29
|
-
message: "Removed in v5.0.0",
|
|
30
|
-
},
|
|
31
|
-
{
|
|
32
|
-
classes: ["navds-modal__content"],
|
|
33
|
-
message: "Renamed to `.navds-modal__body` in v5.0.0",
|
|
34
|
-
},
|
|
35
|
-
{
|
|
36
|
-
classes: ["navds-guide__illustration"],
|
|
37
|
-
message: "Use `.navds-guide` instead",
|
|
38
|
-
},
|
|
39
|
-
{
|
|
40
|
-
classes: [
|
|
41
|
-
"navds-guide__illustration--small",
|
|
42
|
-
"navds-guide__illustration--medium",
|
|
43
|
-
],
|
|
44
|
-
message: "There is no 1:1 replacement for this, the size will depend on the 'poster' prop and the viewport width",
|
|
45
|
-
},
|
|
46
|
-
{
|
|
47
|
-
classes: ["navds-grid", "navds-content-container"],
|
|
48
|
-
deprecatePrefix: true,
|
|
49
|
-
message: "Components were replaced by `HGrid` and `Page.Block` in version 6",
|
|
50
|
-
},
|
|
51
|
-
{
|
|
52
|
-
classes: ["navds-textarea__wrapper"],
|
|
53
|
-
message: "Removed in v6.0.0",
|
|
54
|
-
},
|
|
55
|
-
{
|
|
56
|
-
classes: [
|
|
57
|
-
"navds-pagination__prev-next-icon",
|
|
58
|
-
"navds-pagination__next-text",
|
|
59
|
-
"navds-pagination__prev-text",
|
|
60
|
-
],
|
|
61
|
-
message: "These classes had no effect and were removed in v7.1.0",
|
|
62
|
-
},
|
|
63
|
-
{
|
|
64
|
-
classes: ["navds-list--nested", "navds-list__item-content"],
|
|
65
|
-
message: "Removed in v7.1.1",
|
|
66
|
-
},
|
|
67
|
-
{
|
|
68
|
-
classes: ["navds-combobox__button-clear"],
|
|
69
|
-
message: "Removed in v7.8.0",
|
|
70
|
-
},
|
|
71
|
-
{
|
|
72
|
-
classes: ["navds-switch__checkmark"],
|
|
73
|
-
message: "Removed in v7.24.0",
|
|
74
|
-
},
|
|
75
|
-
{
|
|
76
|
-
classes: ["navds-modal__document-body"],
|
|
77
|
-
message: "Will be removed in next major v8. We recommend not using this class anymore.",
|
|
78
|
-
},
|
|
79
16
|
];
|