I'm trying to add some spacing inside layout builder two-column layouts:

@media screen and (min-width: 40em) {
  .layout--twocol-section.layout--twocol-section--33-67 > .layout__region--second {
    padding-left: 2em;
  }
  .layout--twocol-section.layout--twocol-section--67-33 > .layout__region--first {
    padding-right: 2em;
  }
}

I keep getting errors about the selector:

 40:26  ✖  Expected class selector ".layout--twocol-section--33-67" to match specified pattern   selector-class-pattern
 43:26  ✖  Expected class selector ".layout--twocol-section--67-33" to match specified pattern   selector-class-pattern

It really shouldn't be complaining about a selector generated by Drupal core.

Comments

mandclu created an issue. See original summary.

clafferty’s picture

clafferty commented
Assigned: Unassigned » clafferty

Thanks for pointing this out. I'm not sure I'm crazy about the use of multiple double dashes in the variant names they're using, but I'll look into BEM naming best practices and our linting rules and see if it's being too aggressive on these classes. In the meantime, if you have any code that the rules seem to be going overboard on, you can disable the tests for that code by wrapping it in stylelint-disable. Example:

  /* stylelint-disable */
  .layout--twocol-section.layout--twocol-section--33-67 > .layout__region--second {
    padding-left: 2em;
  }
  .layout--twocol-section.layout--twocol-section--67-33 > .layout__region--first {
    padding-right: 2em;
  }
  /* stylelint-enable */

If you wanted to be more specific, there's also ways to disable just for the next line or only for certain rules:
https://stylelint.io/user-guide/ignore-code

mandclu’s picture

mandclu commented

Ah thanks for that. I ended up just switching the linting to not error out, but nice to know there's a way to make an exception instead.

dcmouyard’s picture

dcmouyard commented
Status: Active » Closed (won't fix)