fix css properties check in bem mod files

[andieelmes]

When valid custom css property name is redefined in the modifier file, error about invalid property name is thrown.

For example, we have three files:

// component.css

.component {
  --component-color: red;
}

// component_mod.css

.component_mod {
  --component-color: green;
}

Second file is currently not considered valid:

component_mod.css
 2:3  ✖  Invalid custom property name "--component-color": a component's custom properties must start with the component name  plugin/selector-bem-pattern

While the third file is okay:

// component_mod2.css

.component_mod2 {
  --component_mod2--color: purple;
}

Test repo: https://github.com/andieelmes/test-postcss-bem-linter Lint job: https://github.com/andieelmes/test-postcss-bem-linter/actions/runs/5314755305/jobs/9622321460

[simonsmith]

Looks like a good fix to me. I'm not familiar with having modifiers across multiple files but I'm a bit out of touch with BEM practices these days

I've just merged an outstanding PostCSS 8 update as well, could you rebase on master and make sure this still passes as expected? Thanks a lot

[andieelmes]

Sure, thanks

We encountered a bug related to the fix in one of our projects, I'll try fixing that and then will rebase

[andieelmes]

Just rebased, thanks

Tests still pass

[andieelmes]

@simonsmith, could you please have a look?

[simonsmith]

It looks good to me, thanks for this!

[simonsmith]

Published: https://www.npmjs.com/package/postcss-bem-linter/v/4.0.0

[andieelmes]

Thank you)