search

postcss / postcss-bem-linter

A BEM linter for postcss
MIT License
571 stars 35 forks source link

Failing for no clear reason. #78

Closed Garbee closed 8 years ago

Garbee commented 8 years ago

I'm trying to get the tool setup for a project. However, I keep having complete failure where I don't seem to be causing it.

I've created a minimal repository to focus down on the problem. It only takes the output CSS and runs it directly through the linter.

  1. bem preset is defined.
  2. mdl is configured as prefix.
  3. /* postcss-bem-linter: define appbar */ is defined right before the component in question.
  4. /* @end */ is defined after the component is completed.

Actual output:

 gulp style      
[21:31:02] Using gulpfile ~/Code/postcss-bem-lint-failure-test/gulpfile.js
[21:31:02] Starting 'style'...

appbar.css
18:1    ⚠  Invalid component selector ".mdl-appbar" [postcss-bem-linter]
33:1    ⚠  Invalid component selector ".mdl-appbar_colored" [postcss-bem-linter]
37:1    ⚠  Invalid component selector ".mdl-appbar_colored .mdl-appbar__title .mdl-appbar__title-text" [postcss-bem-linter]
40:1    ⚠  Invalid component selector ".mdl-appbar_clipped-drawer" [postcss-bem-linter]
45:1    ⚠  Invalid component selector ".mdl-appbar_non-fixed-drawer" [postcss-bem-linter]
46:1    ⚠  Invalid component selector ".mdl-appbar_fixed" [postcss-bem-linter]
52:1    ⚠  Invalid component selector ".mdl-appbar__actions" [postcss-bem-linter]
56:1    ⚠  Invalid component selector ".mdl-appbar__title" [postcss-bem-linter]
62:1    ⚠  Invalid component selector ".mdl-appbar__title-text" [postcss-bem-linter]
66:1    ⚠  Invalid component selector ".mdl-appbar__title-text:active" [postcss-bem-linter]
67:7    ⚠  Invalid component selector ".mdl-appbar__title-text:focus" [postcss-bem-linter]
70:1    ⚠  Invalid component selector ".mdl-appbar__drawer-toggle" [postcss-bem-linter]
71:3    ⚠  Invalid component selector ".mdl-appbar__action" [postcss-bem-linter]
80:1    ⚠  Invalid component selector ".mdl-appbar__drawer-toggle:active" [postcss-bem-linter]
81:5    ⚠  Invalid component selector ".mdl-appbar__drawer-toggle:focus" [postcss-bem-linter]
82:5    ⚠  Invalid component selector ".mdl-appbar__action:active" [postcss-bem-linter]
83:5    ⚠  Invalid component selector ".mdl-appbar__action:focus" [postcss-bem-linter]
86:1    ⚠  Invalid component selector ".mdl-appbar__row" [postcss-bem-linter]
97:1    ⚠  Invalid component selector ".mdl-appbar__row > .mdl-appbar__drawer-toggle + .mdl-appbar__title" [postcss-bem-linter]
102:5   ⚠  Invalid component selector ".mdl-appbar" [postcss-bem-linter]
107:5   ⚠  Invalid component selector ".mdl-appbar__drawer-toggle" [postcss-bem-linter]
113:5   ⚠  Invalid component selector ".mdl-appbar__drawer-toggle" [postcss-bem-linter]
114:3   ⚠  Invalid component selector ".mdl-appbar__action" [postcss-bem-linter]
120:5   ⚠  Invalid component selector ".mdl-appbar__actions:last-child" [postcss-bem-linter]
126:5   ⚠  Invalid component selector ".mdl-appbar__actions:last-child" [postcss-bem-linter]
132:5   ⚠  Invalid component selector ".mdl-appbar_fixed" [postcss-bem-linter]
138:5   ⚠  Invalid component selector ".mdl-appbar_non-fixed-drawer" [postcss-bem-linter]
143:5   ⚠  Invalid component selector ".mdl-appbar_non-fixed-drawer .mdl-appbar__title" [postcss-bem-linter]
147:5   ⚠  Invalid component selector ".mdl-appbar_non-fixed-drawer .mdl-appbar__drawer-toggle" [postcss-bem-linter]
151:5   ⚠  Invalid component selector ".mdl-appbar_non-fixed-drawer .mdl-appbar_fixed" [postcss-bem-linter]

[21:31:02] Finished 'style' after 53 ms

I may expect some errors, but certainly not mdl-appbar (the first error) being an invalid selector.

Any ideas what I'm doing wrong here? Anything I can do to help narrow in on the problem?

Garbee commented 8 years ago

I think I just figured out the main problem I've been having.

1) The config in the minimal repo is incorrect. I rushed it together trying to just remember from memory. Using the inlined config below it works in that respect.

bemLinter('bem', {
          namespace: 'mdl',
          ignoreSelectors: [
            /\.material-icons/
          ]
        })
  1. postcss seems to be doing some funky stuff having the linter at the end of a long compilation chain.

What I did to get things working is I now have postcss called twice. Once to do the initial generation. Then right after that I call it again just to run the linter. Once that was done, it is working perfectly minus the ignore statement not seeming to work. Still trying to figure that one out. At least the primary errors are finally solved.

Just in case anyone else hits this type of problem, try running post again for linting after your primary compilation pipe (in gulp) is completed.

davidtheclark commented 8 years ago

postcss seems to be doing some funky stuff having the linter at the end of a long compilation chain.

This all depends on the plugins you use ... but yes, I absolutely agree that the ideal way to run the linting is on the unprocessed original files.