bedrockstreaming / bemlinter Goto Github PK

View Code? Open in Web Editor NEW

16.0 23.0 1.0 132 KB

A cli tool to lint bem component isolation in CSS / SCSS files

License: MIT License

CSS 13.88% JavaScript 86.12%

bem linter scss css

bemlinter's Introduction

bemlinter

A cli tool to lint bem component isolation in CSS / SCSS files.

The main rules are:

A CSS block file should only contain its own classes
A CSS file, even if it is not a block, should not style a class of another block

Quick start

npm i bemlinter --save

You can set your package.json to use bemlinter:

{
  "scripts": {
    "lint": "bemlinter lint the/path/to/your/*.scss"
  }
}

Configuration file

You will soon need more configuration, so you should use a json configuration file:

{
  "scripts": {
    "lint": "bemlinter lint --config bemlinter.json"
  }
}

The configuration allow you to define:

sources: the paths of your source files.
excludePath (option): the paths of some exclude source files.
excludeBlock (option): the names of some block that are not isolated yet.
snapshot (option): the activation of quality tendency.
checkLowerCase (option): the deactivation of lower case check.
classPrefix (option): the class prefix.
filePattern (option): the file pattern.
modules (option): the configuration override for portions of your sources.

How to Contribute

Star the project!
Report a bug that you have found.
Tweet or blog about bemlinter and let us know about it.
Pull requests are also highly appreciated.

Author & Community

bemlinter is under MIT License.
It was created & is maintained by Thomas ZILLIOX for M6Web.

bemlinter's People

Contributors

Stargazers

Watchers

Forkers

samunplugged

bemlinter's Issues

Regexp stored in JSON seems broken

This is not a valid JSON file

{
  "filePattern": "([^.]*)(?:\.theme)?\.scss",
}

However, if we escape the backslashes we get double backslash in the parsed data 😞

Add option to explore the snapshot

For example:

a status command

$ bemlinter status
There is currently 2 errors on 2 blocks.
 - root: 1 errors on 1 blocks
 - module:  1 errors on 1 blocks

a status command for a module

$ bemlinter status --module root
There is currently 1 errors on 1 blocks for the root module.

a error listing command

$ bemlinter list
There is currently 2 errors on 2 blocks.
  ✗ unprefixed
[unprefixed.scss:8] Error: \".c-prefixed\" is incoherent with the file name, \".unprefixed\" expected.
  ✗ module / prefixed
[module-prefixed.scss:1] Error: \".c-prefixed\" is incoherent with the file name, \".prefixed\" expected.

a error listing command for a module

$ bemlinter list --module root
There is currently 1 errors on 1 blocks for the root module.
  ✗ unprefixed
[unprefixed.scss:8] Error: \".c-prefixed\" is incoherent with the file name, \".unprefixed\" expected.

Sort the quality snapshot

We should sort the quality snapshot to easy snapshot difference reading ❤️

new rule: prevent default values in non-modifier selector

Add a quality snapshot setting

Allow to snap the current quality (number of errors) of each component.

So having an error would not block the lint, but having more error than the last check would.

This feature would allow to have a good view of the code base quality (instead of the current block blacklist) and to easy continuous improvment (fix an error instead of an entire block).

Who's in?

new rule: allow to style a block according to a page context

For every module, you should be able to define a root block.
This will allow to define every component according to a root block state.

Example :

.app--loading .component {
    background: lightgray;
}

The best practice is to not use cascade to style a component.
This rule is made to insure component isolation.
But a root element is always present, so this exception allow us to style according to a page context.
Most of all, this exception doesn't break reusability.

new rule: prevent 2 block with the same name in a module

Allow file prefix, file suffix or even file pattern

The bem linter get the block name from the file name.
We should authorize prefix in file name, like project-block.scss, or suffix, like block.theme.scss.

So should we create two properties?

filePrefix: ['', 'project-'] default ['']
fileSuffix: ['.scss', '.theme.scss'] default ['.scss']

Or should we create only one option named filePattern?

Should we compile the scss?

Because we do not compile the SCSS files, we can not detect BEM errors like this one:

.block__element {
    &__antoher-element {}
}

Another example is a selector created by a mixin.

For now, we choose to throw an error when the & operator is used to concatenate class name #4