postcss-bem-linter icon indicating copy to clipboard operation
postcss-bem-linter copied to clipboard

Concise & verbose comment syntax for "weak" not fully working?

Open fabd opened this issue 4 years ago • 1 comments

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?

fabd avatar Aug 28 '19 14:08 fabd

+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!

Didel avatar Jan 09 '20 13:01 Didel