bedrockstreaming / bemlinter Goto Github PK

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

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?

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.

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.

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

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?

This is not a valid JSON file

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

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