@blueprintjs/stylelint-plugin

Blueprint stylelint plugin

Blueprint is a React UI toolkit for the web.

This package contains the stylelint plugin for Blueprint. It provides custom rules which are useful when developing against Blueprint libraries.

Key features:

• Blueprint-specific rules for use with @blueprintjs components.

Installation

yarn add --dev @blueprintjs/stylelint-plugin

Usage

Simply add this plugin in your .stylelintrc file and then pick the rules that you need. The plugin includes Blueprint-specific rules which enforce semantics particular to usage with @blueprintjs packages, but does not turn them on by default.

.stylelintrc

{
    "plugins": [
        "@blueprintjs/stylelint-plugin"
    ],
    "rules": {
        "@blueprintjs/no-color-literal": true,
        "@blueprintjs/no-prefix-literal": true
    }
}

Rules

@blueprintjs/no-color-literal (autofixable)

Enforce usage of the color variables instead of color literals.

{
    "rules": {
        "@blueprintjs/no-color-literal": true
    }
}

-.my-class {
-    border: 1px solid #137CBD;
-}
+ @use "@blueprintjs/core/lib/scss/variables.scss" as bp;
+
+.my-class {
+    border: 1px solid bp.$blue3;
+}

Optional secondary options:

• disableFix: boolean - if true, autofix will be disabled
• variablesImportPath: { less?: string, sass?: string } - can be used to configure a custom path for importing Blueprint variables when autofixing.

@blueprintjs/no-prefix-literal (autofixable)

Enforce usage of the bp-ns constant over namespaced string literals.

The @blueprintjs package exports a bp-ns CSS variable which contains the prefix for the current version of Blueprint (bp3 for Blueprint 3, bp4 for Blueprint 4, and etc). Using the variable instead of hardcoding the prefix means that your code will still work when new major version of Blueprint is released.

{
    "rules": {
        "@blueprintjs/no-prefix-literal": true
    }
}

-.bp3-button > div {
-    border: 1px solid black;
-}
+ @use "@blueprintjs/core/lib/scss/variables.scss" as bp;
+
+.#{bp.$ns}-button > div {
+    border: 1px solid black;
+}

Optional secondary options:

• disableFix: boolean - if true, autofix will be disabled
• variablesImportPath: { less?: string, sass?: string } - can be used to configure a custom path for importing Blueprint variables when autofixing.

Full Documentation | Source Code