search

postcss / postcss-bem-linter

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

Could the `ignoreSelectors` option take an array of regexes? #66

Closed samjewell closed 9 years ago

samjewell commented 9 years ago

I'm working on the web dashboard for GoCardless, with a fair amount of css:- 115 SUIT components

Admittedly I'm trying to add this BEM linting to an already mature codebase, but I'd like to use the ignoreSelectors option to ignore quite a few different bits of hairy CSS that have crept in over time into some of the examples, so as a result it would be more convenient if it took an array of regexes, rather than just a single regex.

Something like this would be ideal:

bemLinter({
  preset: 'suit',
  ignoreSelectors: [
    /^\.t\w{1,4}.u-is-shown$/,
    /^h/d, \.u-text-\w{1,3}$/,
    /^\.?svg.*/
  ]
})

This would be great, as I'd be able to ignore all of the following CSS rules without having to ignore them each individually...

/* postcss-bem-linter: ignore */
table.u-is-shown {
  display: table !important;
}
/* postcss-bem-linter: ignore */
tr.u-is-shown,
tr.u-is-shown {
  display: table-row !important;
}
/* postcss-bem-linter: ignore */
td.u-is-shown,
th.u-is-shown {
  display: table-cell !important;
}

/* postcss-bem-linter: ignore */
h1, .u-text-xxl {
  font-size: var(--font-size-xxl);
}
/* postcss-bem-linter: ignore */
h2, .u-text-xl {
  font-size: var(--font-size-xl);
}
/* postcss-bem-linter: ignore */
h3, .u-text-l {
  font-size: var(--font-size-l);
}
/* postcss-bem-linter: ignore */
h4, .u-text-m {
  font-size: var(--font-size-m);
}
/* postcss-bem-linter: ignore */
h5, .u-text-s {
  font-size: var(--font-size-s);
}
/* postcss-bem-linter: ignore */
h6, .u-text-xs {
  font-size: var(--font-size-xs);
}

Plus all of the following...:

7220:1  ⚠  Invalid utility selector ".svg-icon-fill-color-text *" [postcss-bem-linter]
7224:1  ⚠  Invalid utility selector ".svg-icon-fill-color-meta *" [postcss-bem-linter]
7228:1  ⚠  Invalid utility selector ".svg-icon-fill-color-gray-xlight *" [postcss-bem-linter]
7232:1  ⚠  Invalid utility selector ".svg-icon-fill-color-primary *" [postcss-bem-linter]
7236:1  ⚠  Invalid utility selector ".svg-icon-fill-color-yellow *" [postcss-bem-linter]
7240:1  ⚠  Invalid utility selector ".svg-icon-fill-color-secondary *" [postcss-bem-linter]
7244:1  ⚠  Invalid utility selector ".svg-icon-fill-color-accent *" [postcss-bem-linter]
7248:1  ⚠  Invalid utility selector ".svg-icon-fill-color-gray *" [postcss-bem-linter]
7252:1  ⚠  Invalid utility selector ".svg-icon-fill-color-invert *" [postcss-bem-linter]
7258:1  ⚠  Invalid utility selector ".svg-icon-stroke-color-text *" [postcss-bem-linter]
7262:1  ⚠  Invalid utility selector ".svg-icon-stroke-color-meta *" [postcss-bem-linter]
7266:1  ⚠  Invalid utility selector ".svg-icon-stroke-color-primary *" [postcss-bem-linter]
7270:1  ⚠  Invalid utility selector ".svg-icon-stroke-color-secondary *" [postcss-bem-linter]
7274:1  ⚠  Invalid utility selector ".svg-icon-stroke-color-accent *" [postcss-bem-linter]
7278:1  ⚠  Invalid utility selector ".svg-icon-stroke-color-gray *" [postcss-bem-linter]
7282:1  ⚠  Invalid utility selector ".svg-icon-stroke-color-invert *" [postcss-bem-linter]
7328:1  ⚠  Invalid utility selector "svg.svg-icon-sm > g.svg-icon-md" [postcss-bem-linter]
7329:1  ⚠  Invalid utility selector "svg.svg-icon-sm > g.svg-icon-lg" [postcss-bem-linter]
7330:1  ⚠  Invalid utility selector "svg.svg-icon-md > g.svg-icon-sm" [postcss-bem-linter]
7331:1  ⚠  Invalid utility selector "svg.svg-icon-md > g.svg-icon-lg" [postcss-bem-linter]
7332:1  ⚠  Invalid utility selector "svg.svg-icon-lg > g.svg-icon-sm" [postcss-bem-linter]
7333:1  ⚠  Invalid utility selector "svg.svg-icon-lg > g.svg-icon-md" [postcss-bem-linter]
7337:1  ⚠  Invalid utility selector "svg.svg-icon.svg-icon-sm > g.svg-icon-lg" [postcss-bem-linter]
7338:1  ⚠  Invalid utility selector "svg.svg-icon.svg-icon-md > g.svg-icon-lg" [postcss-bem-linter]
7342:1  ⚠  Invalid utility selector "svg.svg-icon-sm:not(.svg-icon-md):not(.svg-icon-lg) > g.svg-icon-sm" [postcss-bem-linter]
7343:1  ⚠  Invalid utility selector "svg.svg-icon-md.svg-icon-sm > g.svg-icon-sm" [postcss-bem-linter]
7344:1  ⚠  Invalid utility selector "svg.svg-icon-lg.svg-icon-sm > g.svg-icon-sm" [postcss-bem-linter]
7348:1  ⚠  Invalid utility selector "svg.svg-icon-md:not(.svg-icon-sm):not(.svg-icon-lg) > g.svg-icon-md" [postcss-bem-linter]
7349:1  ⚠  Invalid utility selector "svg.svg-icon-sm.svg-icon-md > g.svg-icon-md" [postcss-bem-linter]
7350:1  ⚠  Invalid utility selector "svg.svg-icon-lg.svg-icon-md > g.svg-icon-md" [postcss-bem-linter]
7354:1  ⚠  Invalid utility selector "svg.svg-icon-lg:not(.svg-icon-sm):not(.svg-icon-md) > g.svg-icon-lg" [postcss-bem-linter]
7355:1  ⚠  Invalid utility selector "svg.svg-icon-sm.svg-icon-lg > g.svg-icon-lg" [postcss-bem-linter]
7356:1  ⚠  Invalid utility selector "svg.svg-icon-md.svg-icon-lg > g.svg-icon-lg" [postcss-bem-linter]
davidtheclark commented 9 years ago

That makes sense. I'm away from computers for just over a week but can look into it when I get back.

samjewell commented 9 years ago

Woah, thanks a lot David, that could be really cool. I think it's a great tool by the way!

simonsmith commented 9 years ago

+1 this, the ignoreSelectors addition has been one of the most useful for me too.

davidtheclark commented 9 years ago

Published in 1.2.0

simonsmith commented 9 years ago

This works great, thanks @davidtheclark