@blueprint-modernized/stylelint-plugin v2.0.4
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
@blueprint-modernized
components.
Installation
yarn add --dev @blueprint-modernized/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 @blueprint-modernized
packages, but does not turn them on by default.
.stylelintrc
{
"plugins": [
"@blueprint-modernized/stylelint-plugin"
],
"rules": {
"@blueprint-modernized/no-color-literal": true,
"@blueprint-modernized/no-prefix-literal": true
}
}
Rules
@blueprint-modernized/no-color-literal
(autofixable)
Enforce usage of the color variables instead of color literals.
{
"rules": {
"@blueprint-modernized/no-color-literal": true
}
}
-.my-class {
- border: 1px solid #137CBD;
-}
+ @import "~@blueprint-modernized/core/lib/scss/variables";
+
+.my-class {
+ border: 1px solid $blue3;
+}
Optional secondary options:
disableFix: boolean
- if true, autofix will be disabledvariablesImportPath: { less?: string, sass?: string }
- can be used to configure a custom path for importing Blueprint variables when autofixing.
@blueprint-modernized/no-prefix-literal
(autofixable)
Enforce usage of the bp-ns
constant over namespaced string literals.
The @blueprint-modernized
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": {
"@blueprint-modernized/no-prefix-literal": true
}
}
-.bp3-button > div {
- border: 1px solid black;
-}
+ @import "~@blueprint-modernized/core/lib/scss/variables";
+
+.#{$bp-ns}-button > div {
+ border: 1px solid black;
+}
Optional secondary options:
disableFix: boolean
- if true, autofix will be disabledvariablesImportPath: { less?: string, sass?: string }
- can be used to configure a custom path for importing Blueprint variables when autofixing.
Full Documentation | Source Code
2 years ago