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
@hai-ui
components.
Installation
yarn add --dev @hai-ui/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 @hai-ui
packages, but does not turn them on by default.
.stylelintrc
{
"plugins": [
"@hai-ui/stylelint-plugin"
],
"rules": {
"@hai-ui/no-color-literal": true,
"@hai-ui/no-prefix-literal": true
}
}
Rules
@hai-ui/no-color-literal
(autofixable)
Enforce usage of the color variables instead of color literals.
{
"rules": {
"@hai-ui/no-color-literal": true
}
}
-.my-class {
- border: 1px solid #137CBD;
-}
+ @use "@hai-ui/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.
@hai-ui/no-prefix-literal
(autofixable)
Enforce usage of the bp-ns
constant over namespaced string literals.
The @hai-ui
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": {
"@hai-ui/no-prefix-literal": true
}
}
-.bp3-button > div {
- border: 1px solid black;
-}
+ @use "@hai-ui/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.