@navikt/aksel-stylelint 3.0.0-beta.1 → 3.0.0-beta.10

package/README.md

@@ -1,8 +1,42 @@
 # Aksel stylelint rules & plugins
 
+This stylelint plugin is useful when working with the [Aksel design system](https://aksel.nav.no/).
+
+It is designed to be useful for both _internal_ and _external_ developers, so _everyone_ should install this 🙌.
+
+> **Warning**
+> The version of this plugin **_MUST MATCH_** the version of the other design system packages used in your project for the linting to make sense!
+> Otherwise you are very likely to get _incorrect_ errors that tell you to use the wrong token names.
+
+# Install
+
+```bash
+yarn add -D @navikt/aksel-stylelint
+npm install -D @navikt/aksel-stylelint
+```
+
+### How to configure
+
+It should be sufficient for most cases to extend the recommended defaults.
+
+```js
+  "stylelint": {
+    "extends": [
+        ...
+        "@navikt/aksel-stylelint/recommended"
+    ],
+    ...
+  }
+```
+
 ## aksel-design-token-exists
 
-This rule checks that if you use one of the reserved token prefixes `--a-` or `--ac-` then the token itself _must_ be provided by design system itself.
+This rule checks that if you use one of the reserved token prefixes `--a-` or `--ac-` then the token itself _must_ be provided by design system.
+
+In addition it checks that you:
+
+- don't **_reference_** a component level token. As they are only supposed to be overridden.
+- don't **_override_** a global level token. As they are only supposed to be referenced.
 
 ❌ Incorrect:
 
@@ -12,6 +46,8 @@ html h1 {
     ^^^^^^^^^^^^^^^^^^^^^^^^^
     background-color: var(--a-my-own-color-bg-hover, #ffffff);
                           ^^^^^^^^^^^^^^^^^^^^^^^^^
+    stroke: var(--ac-button-loader-stroke));
+                ^^^^^^^^^^^^^^^^^^^^^^^^^
 }
 ```
 
@@ -19,7 +55,8 @@ html h1 {
 
 ```css
 html h1 {
-  background-color: var(--ac-accordion-header-bg-hover, #ffffff);
+  background-color: var(--a-surface-default, #ffffff);
+  --ac-button-loader-stroke: lawngreen;
 }
 ```
 
@@ -30,13 +67,13 @@ Disallows use or override of internal Aksel design tokens. Internal tokens are n
 ❌ Incorrect:
 
 ```css
-a { 
+a {
   --__ac-some-property: pink;
 } ^^^^^^^^^^^^^^^^^^^^
 ```
 
 ```css
-a { 
+a {
   color: var(--__ac-some-property);
 }            ^^^^^^^^^^^^^^^^^^^^
 ```
@@ -79,23 +116,23 @@ Warns when trying to override design system styling by using class selectors tha
 }
 ```
 
-# Install
+## aksel-no-deprecated-classes
 
-```bash
-yarn add -D @navikt/aksel-stylelint
-npm install -D @navikt/aksel-stylelint
-```
+Warns when you try to use deprecated class names.
 
-### How to configure
+❌ Incorrect:
 
-It should be sufficient for most cases to extend the recommended defaults.
+```css
+.navdsi-deprecated-example {
+^^^^^^^^^^^^^^^^^^^^^^^^^^
+}
+```
 
-```js
-  "stylelint": {
-    "extends": [
-        ...
-        "@navikt/aksel-stylelint/recommended"
-    ],
-    ...
-  }
+✅ Correct:
+
+```css
+.guaranteed-not-deprecated {
+}
 ```
+
+🐛 Found a bug? https://github.com/navikt/aksel/issues

package/dist/deprecations.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.deprecations = void 0;
+exports.deprecations = [
+    {
+        classes: ["navdsi-deprecated-example", "navdsi-other-deprecated-example"],
+        message: "Removed in vX.X.X, see documentation [link] for more information",
+    },
+];