No warnings produced for incorrect selector format
See original GitHub issueHave 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:
- Created 7 years ago
- Reactions:1
- Comments:15
Top 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 >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
@Kikobeats have you remember to include the comments in the SASS files
@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.