Security News
ESLint is Now Language-Agnostic: Linting JSON, Markdown, and Beyond
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
postcss-bem-linter
Advanced tools
A PostCSS plugin to lint BEM-style CSS.
BEM-style describes CSS that follows a more-or-less strict set of conventions determining what selectors can be used. Typically, these conventions require that classes begin with the name of the component (or "block") that contains them, and that all characters after the component name follow a specified pattern. Original BEM methodology refers to "blocks", "elements", and "modifiers"; SUIT refers to "components", "descendants", and "modifiers". You might have your own terms for similar concepts.
With this plugin, you can check the validity of stylesheets against a set of BEM-style conventions. You can use preset patterns (SUIT and BEM, currently) or insert your own. The plugin will throw an error if it finds CSS that does not follow the specified conventions.
npm install postcss-bem-linter
This plugin logs warnings via PostCSS. Therefore, you'll want to use it with a PostCSS runner that prints warnings (e.g. gulp-postcss
) or another PostCSS plugin that prints warnings (e.g. postcss-log-warnings
).
Default mode:
ComponentName
.:root
selector can only contain custom-properties.:root
cannot be combined with other selectors.Weak mode:
postcss().use(bemLinter([pattern, options]));
Patterns consist of regular expressions, and functions that return regular expressions, which describe valid selector sequences.
Please note that patterns describe sequences, not just simple selectors. So if, for example,
you would like to be able to chain state classes to your component classes, as in
.Component.is-open
, your regular expression needs to allow for this chaining.
Also note that pseudo-classes and pseudo-elements must be at the end of sequences, and
will be ignored. Instead of .Component:first-child.is-open
you should use
.Component.is-open:first-child
. The former will cause an error.
You can use a preset pattern by passing a string as the pattern
, and, if needed, an options
object,
as in bemLinter('suit', { namespace: 'twt' })
. Options are pattern-specific.
The following preset patterns are available:
'suit'
(default), as defined here.
Options:
namespace
: a namespace to prefix valid classes, as described
in the SUIT docs'bem'
, as defined here.'suit'
is the default pattern; so if you do not pass any pattern
argument,
SUIT conventions will be enforced.
You can define a custom pattern by passing an object with the following properties:
componentName
(optional): A regular expression describing valid component names.
Default is /[-_a-zA-Z0-9]+/
.componentSelectors
: Either of the following:
initial
and combined
. Both methods accept a
component name and return a regular expression. initial
returns a description of valid
initial selector sequences — those occurring at the beginning of a selector, before any
combinators. combined
returns a description of valid selector sequences allowed after combinators.
Two things to note: If you do not specify a combined pattern, it is assumed that combined
sequences must match the same pattern as initial sequences.
And in weak mode, any combined sequences are accepted.utilitySelectors
: A regular expression describing valid utility selectors. This will be use
if the stylesheet uses /** @define utilities */
, as explained below.So you might call the plugin in any of the following ways:
// use 'suit' conventions
bemLinter();
bemLinter('suit');
bemLinter('suit', { namespace: 'twt' });
// use 'bem' conventions
bemLinter('bem');
// define a RegExp for component names
bemLinter({
componentName: /[A-Z]+/
});
// define a single RegExp for all selector sequences, initial or combined
bemLinter({
componentSelectors: function(componentName) {
return new RegExp('^\\.' + componentName + '(?:-[a-z]+)?$');
}
});
// define separate `componentName`, `initial`, `combined`, and `utilities` RegExps
bemLinter({
componentName: /[A-Z]+/,
componentSelectors: {
initial: function(componentName) {
return new RegExp('^\\.' + componentName + '(?:-[a-z]+)?$');
},
combined: function(componentName) {
return new RegExp('^\\.combined-' + componentName + '-[a-z]+$');
}
},
utilitySelectors: /^\.util-[a-z]+$/
});
The plugin will only run against files that explicitly declare that they
are defining either a named component or utilities, using either
/** @define ComponentName */
or /** @define utilities */
in the first line
of the file.
Weak mode is turned on by adding ; weak
to this definition,
e.g. /** @define ComponentName; weak */
.
/** @define MyComponent */
:root {
--MyComponent-property: value;
}
.MyComponent {}
.MyComponent-other {}
Weak mode:
/** @define MyComponent; weak */
:root {
--MyComponent-property: value;
}
.MyComponent {}
.MyComponent .other {}
Utilities:
/** @define utilities */
.u-sizeFill {}
.u-sm-horse {}
If a component is defined and the component name does not match your componentName
pattern,
the plugin will throw an error.
Pass your individual CSS files through the plugin. It will log warnings errors for
conformance failures, which you can print to the console using
postcss-log-warnings
or relying
on a PostCSS runner (such as gulp-postcss
).
var postcss = require('postcss');
var bemLinter = require('postcss-bem-linter');
var logWarnings = require('postcss-log-warnings');
files.forEach(function (file) {
var css = fs.readFileSync(file, 'utf-8');
postcss()
.use(bemLinter())
.use(logWarnings())
.process(css);
});
Install the dependencies.
npm install
Run the tests.
npm test
Watch and automatically re-run the unit tests.
npm start
0.3.0 (May 23, 2015)
strict mode
the default. Add weak
mode.FAQs
A BEM linter for postcss
The npm package postcss-bem-linter receives a total of 102,702 weekly downloads. As such, postcss-bem-linter popularity was classified as popular.
We found that postcss-bem-linter demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
Security News
Members Hub is conducting large-scale campaigns to artificially boost Discord server metrics, undermining community trust and platform integrity.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.