npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@navikt/aksel-stylelint

v7.4.3

Published

This stylelint plugin is useful when working with the [Aksel design system](https://aksel.nav.no/).

Downloads

2,042

Readme

Aksel stylelint rules & plugins

This stylelint plugin is useful when working with the Aksel design system.

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

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.

  "stylelint": {
    "extends": [
        ...
        "@navikt/aksel-stylelint/recommended"
    ],
    ...
  }

aksel/design-token-exists

Makes sure all referenced CSS-variables with prefix --a- or --ac- exists in Aksels token-collection. As a side-effect Aksel reserves these prefixes for its design-tokens.

❌ Incorrect:

html {
    --a-my-own-color-bg-hover: #f2f2f2;
    ^^^^^^^^^^^^^^^^^^^^^^^^^
    background-color: var(--a-my-own-color-bg-hover);
                          ^^^^^^^^^^^^^^^^^^^^^^^^^
}

✅ Correct:

html {
  background-color: var(--custom-tag-surface-default);
}

aksel/design-token-no-global-override

Makes sure you don't override global level tokens with --a--prefix. Global/Semantic tokens are supposed to be used as is, and not overridden. That is unless you are theming your solution to match a different sub-brands or brands. In those cases we encourage to make all the changes in a single 'config'-file, then disable the rule for that file only.

❌ Incorrect:

div {
    --a-surface-default: #f2f2f2;
    ^^^^^^^^^^^^^^^^^^^
}

✅ Correct:

div {
  background-color: var(--a-surface-default);
}

aksel/design-token-no-component-reference

Makes sure you don't reference component level tokens with --ac--prefix. Component level tokens are only supposed to be overridden, not referenced. This is since they are by default not defined, leading to unknown side-effects when referenced incorrectly.

❌ Incorrect:

html {
    stroke: var(--ac-button-loader-stroke);
                ^^^^^^^^^^^^^^^^^^^^^^^^^
}

✅ Correct:

html {
  --ac-button-loader-stroke: lawngreen;
}

aksel/no-internal-tokens

Disallows use or override of internal Aksel design tokens. Internal tokens 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.

❌ Incorrect:

a {
  --__ac-some-property: pink;
} ^^^^^^^^^^^^^^^^^^^^
a {
  color: var(--__ac-some-property);
}            ^^^^^^^^^^^^^^^^^^^^

✅ Correct:

a {
  --some-property: pink;
}
a {
  color: var(--some-property);
}

aksel/no-class-override

Warns when trying to override design system styling by using class selectors that starts with "navds-" or "navdsi-". 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.

❌ Incorrect:

.navds-button {
^^^^^^^^^^^^^
}
.some-class .navdsi-header {
}           ^^^^^^^^^^^^^^

✅ Correct:

.some-class {
}

aksel/no-deprecated-classes

Warns when you try to use deprecated class names.

❌ Incorrect:

.navdsi-deprecated-example {
^^^^^^^^^^^^^^^^^^^^^^^^^^
}

✅ Correct:

.guaranteed-not-deprecated {
}

🐛 Found a bug? https://github.com/navikt/aksel/issues