postcss-bem-linter
postcss-bem-linter copied to clipboard
Concise & verbose comment syntax for "weak" not fully working?
In the following simple test case, the "weak" option doesn't seem to work with the verbose comment:
No eslint warning:
/** @define VuePage; weak */
.VuePage {
background: #f8f8f8;
h3 {
color: red;
}
}
1 eslint warning: "Invalid component selector ".VuePage h3"
/* postcss-bem-linter: define VuePage; weak */
.VuePage {
background: #f8f8f8;
h3 {
color: red;
}
}
Have I misconfigured something?
Main reason I bring this up is that I'd prefer to use a consitent syntax, when I have to occasionally ignore something:
/* postcss-bem-linter: define ComponentName */
...
/* postcss-bem-linter: ignore */
...
etc
It's more explicit and less confusing than:
/** @define ComponentName */
...
/* postcss-bem-linter: ignore */
...
etc
That is, ignore
seems to be available only with the verbose syntax. At the same time, the verbose syntax doesn't appear to support weak
argument.
PS: Also I understand it's not good practice, but it seems fairly essential to be able to add simple elements such as h3, p etc. For example to add default styles to a Card component's body text. Is there a way to enable these while keeping the linting?
+1
I noticed the exact same thing. Using; weak
with verbose syntax does not seem to work, using it with concise syntax works fine. I am using version 3.3.0 of postcss-bem-linter.
❌ Throws Invalid component selector ".tab-content .tab-pane" :
/** postcss-bem-linter: define tab-content; weak */
.tab-content .tab-pane {
margin-bottom: 0;
}
while
✅ Passes fine:
/** @define tab-content; weak */
.tab-content .tab-pane {
margin-bottom: 0;
}
I also agree with @fabd above, having a shorthand option for ignore (e.g. @ignore
) would be a nice addition!