question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

No warnings produced for incorrect selector format

See original GitHub issue

Have setup plugin as per docs Decided to override BEM format to change modifiers to -- instead of _

When I put an incorrect selector and run stylelint over it, no warnings are produced.

stylelint version: 7.6.0 stylelint-selector-bem-pattern version: 1.0.0

Test SCSS file:

.component_____block----modifier

Rules:

'use strict';

function bemSelectors(block, presetOptions) {
  //const ns = (presetOptions && presetOptions.namespace) ? presetOptions.namespace + '-' : '';
  const WORD = '[a-zA-Z0-9]+(?:-[a-zA-Z0-9]+)*';
  const element = '(?:__' + WORD + ')?';
  const modifier = '(?:--' + WORD + '){0,2}';
  const attribute = '(?:\\[.+\\])?';
  return new RegExp('^\\.' + block + element + modifier + attribute + '$');
}

module.exports = {
  plugins: [
   'stylelint-scss',
   'stylelint-selector-bem-pattern'
  ],
  rules: {
    'at-rule-empty-line-before': [ 'always', {
      except: [
        'blockless-after-same-name-blockless',
        'first-nested',
      ],
      ignore: ['after-comment'],
    } ],
    'at-rule-name-case': 'lower',
    'at-rule-name-space-after': 'always-single-line',
    'at-rule-semicolon-newline-after': 'always',
    'block-closing-brace-empty-line-before': 'never',
    'block-closing-brace-newline-after': 'always',
    'block-closing-brace-newline-before': 'always-multi-line',
    'block-closing-brace-space-before': 'always-single-line',
    'block-no-empty': true,
    'block-opening-brace-newline-after': 'always',
    'block-opening-brace-space-after': 'never-single-line',
    'block-opening-brace-space-before': 'always',
    'color-hex-case': 'lower',
    'color-hex-length': 'short',
    'color-no-invalid-hex': true,
    'comment-empty-line-before': [ 'always', {
      except: ['first-nested'],
      ignore: ['stylelint-commands'],
    } ],
    'comment-no-empty': true,
    'comment-whitespace-inside': 'always',
    'custom-property-empty-line-before': [ 'always', {
      except: [
        'after-custom-property',
        'first-nested',
      ],
      ignore: [
        'after-comment',
        'inside-single-line-block',
      ],
    } ],
    'declaration-bang-space-after': 'never',
    'declaration-bang-space-before': 'always',
    'declaration-block-no-duplicate-properties': [ true, {
      ignore: ['consecutive-duplicates-with-different-values'],
    } ],
    'declaration-block-no-redundant-longhand-properties': true,
    'declaration-block-no-shorthand-property-overrides': true,
    'declaration-block-semicolon-newline-after': 'always',
    'declaration-block-semicolon-space-after': 'always-single-line',
    'declaration-block-semicolon-space-before': 'never',
    'declaration-block-single-line-max-declarations': 1,
    'declaration-block-trailing-semicolon': 'always',
    'declaration-colon-newline-after': 'always-multi-line',
    'declaration-colon-space-after': 'always-single-line',
    'declaration-colon-space-before': 'never',
    'declaration-empty-line-before': [ 'always', {
      except: [
        'after-declaration',
        'first-nested',
      ],
      ignore: [
        'after-comment',
        'inside-single-line-block',
      ],
    } ],
    'font-family-no-duplicate-names': true,
    'function-calc-no-unspaced-operator': true,
    'function-comma-newline-after': 'always-multi-line',
    'function-comma-space-after': 'always-single-line',
    'function-comma-space-before': 'never',
    'function-linear-gradient-no-nonstandard-direction': true,
    'function-max-empty-lines': 0,
    'function-name-case': 'lower',
    'function-parentheses-newline-inside': 'always-multi-line',
    'function-parentheses-space-inside': 'never-single-line',
    'function-whitespace-after': 'always',
    'indentation': 2,
    'keyframe-declaration-no-important': true,
    'length-zero-no-unit': true,
    'max-empty-lines': 1,
    'media-feature-colon-space-after': 'always',
    'media-feature-colon-space-before': 'never',
    'media-feature-name-case': 'lower',
    'media-feature-name-no-unknown': true,
    'media-feature-parentheses-space-inside': 'never',
    'media-feature-range-operator-space-after': 'always',
    'media-feature-range-operator-space-before': 'always',
    'media-query-list-comma-newline-after': 'always-multi-line',
    'media-query-list-comma-space-after': 'always-single-line',
    'media-query-list-comma-space-before': 'never',
    'no-empty-source': true,
    'no-eol-whitespace': true,
    'no-extra-semicolons': true,
    'no-invalid-double-slash-comments': true,
    'no-missing-end-of-source-newline': true,
    'number-leading-zero': 'never',
    'number-no-trailing-zeros': true,
    'property-case': 'lower',
    'property-no-unknown': true,
    'rule-nested-empty-line-before': [ 'always-multi-line', {
      except: ['first-nested'],
      ignore: ['after-comment'],
    } ],
    'rule-non-nested-empty-line-before': [ 'always-multi-line', {
      ignore: ['after-comment'],
    } ],
    'selector-attribute-brackets-space-inside': 'never',
    'selector-attribute-operator-space-after': 'never',
    'selector-attribute-operator-space-before': 'never',
    'selector-combinator-space-after': 'always',
    'selector-combinator-space-before': 'always',
    'selector-descendant-combinator-no-non-space': true,
    'selector-list-comma-newline-after': 'always',
    'selector-list-comma-space-before': 'never',
    'selector-max-empty-lines': 0,
    'selector-pseudo-class-case': 'lower',
    'selector-pseudo-class-no-unknown': true,
    'selector-pseudo-class-parentheses-space-inside': 'never',
    'selector-pseudo-element-case': 'lower',
    'selector-pseudo-element-colon-notation': 'double',
    'selector-pseudo-element-no-unknown': true,
    'selector-type-case': 'lower',
    'selector-type-no-unknown': true,
    'shorthand-property-no-redundant-values': true,
    'string-no-newline': true,
    'unit-case': 'lower',
    'unit-no-unknown': true,
    'value-list-comma-newline-after': 'always-multi-line',
    'value-list-comma-space-after': 'always-single-line',
    'value-list-comma-space-before': 'never',
    'value-list-max-empty-lines': 0,
    'scss/at-extend-no-missing-placeholder': true,
    'scss/selector-no-redundant-nesting-selector': true,
    'scss/at-mixin-argumentless-call-parentheses': 'never',
    'plugin/selector-bem-pattern': {
      componentName: '/^[a-zA-Z0-9]+(?:-[a-zA-Z0-9]+)*$/',
      componentSelectors: bemSelectors,
      ignoreSelectors: '/^\.no-.+$/'
    }
  }
};

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Reactions:1
  • Comments:15

github_iconTop GitHub Comments

1reaction
gunnxcommented, Apr 4, 2017

@Kikobeats have you remember to include the comments in the SASS files

/** @define block-name */
.block-name {}
.block-name__mod-name--val {}
/* @end */
0reactions
davidtheclarkcommented, Aug 26, 2017

@greaveselliott Do you have /** @define block-name */ in your code?

If so and it’s still broken, I suggest writing a test that demonstrates the failure.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Disable Flex CSS type selector warning? - Stack Overflow
NOTE: I've tried the -show-unused-type-selector-warnings=false compiler flag, and it does not work...that's for a similar but different warning.
Read more >
Angular 12 production build warning (MDB4 12)
I'm afraid we can't do much on our side because these are Bootstrap 4 styles and the compiler incorrectly detects the selector as...
Read more >
[SOLVED] "Don't use IDs in the Selectors." Why The Warning ...
Since the “class” does NOT get the warning message, but using the IDs get the warning message, why not just use classes for...
Read more >
Angular compiler options
When true , does not produce .metadata.json files. Default is false . The .metadata.json files contain information needed by the template compiler from...
Read more >
Validation · Bootstrap v5.0
HTML form validation is applied via CSS's two pseudo-classes, :invalid and ... comes before a form control in the DOM without the help...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found