Skip to content

build: ampersand selector lint rule not catching some cases #22974

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jun 16, 2021
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions src/material/badge/_badge-theme.scss
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,8 @@ $large-size: $default-size + 6;

// Mixin for building offset given different sizes
@mixin _badge-size($size) {
// This mixin isn't used in the context of a theme so we can disable the ampersand check.
// stylelint-disable material/no-ampersand-beyond-selector-start
.mat-badge-content {
width: $size;
height: $size;
Expand Down Expand Up @@ -89,6 +91,7 @@ $large-size: $default-size + 6;
}
}
}
// stylelint-enable
}

@mixin color($config-or-theme) {
Expand Down
48 changes: 14 additions & 34 deletions tools/stylelint/no-ampersand-beyond-selector-start.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import {createPlugin, utils} from 'stylelint';
import {basename} from 'path';
import {Node} from './stylelint-postcss-types';

const isStandardSyntaxRule = require('stylelint/lib/utils/isStandardSyntaxRule');
const isStandardSyntaxSelector = require('stylelint/lib/utils/isStandardSyntaxSelector');
Expand Down Expand Up @@ -37,44 +36,25 @@ const plugin = createPlugin(ruleName, (isEnabled: boolean, _options?) => {
}

root.walkRules(rule => {
if (
rule.parent.type === 'rule' &&
isStandardSyntaxRule(rule) &&
isStandardSyntaxSelector(rule.selector) &&
// Using the ampersand at the beginning is fine, anything else can cause issues in themes.
rule.selector.indexOf('&') > 0) {

const mixinName = getClosestMixinName(rule);

// Skip rules inside private mixins.
if (!mixinName || !mixinName.startsWith('_')) {
utils.report({
result,
ruleName,
message: messages.expected(),
node: rule
});
}
if (rule.parent.type === 'rule' &&
isStandardSyntaxRule(rule) &&
isStandardSyntaxSelector(rule.selector) &&
hasInvalidAmpersandUsage(rule.selector)) {
utils.report({
result,
ruleName,
message: messages.expected(),
node: rule
});
}
});
};

/** Walks up the AST and finds the name of the closest mixin. */
function getClosestMixinName(node: Node): string | undefined {
let parent = node.parent;

while (parent) {
if (parent.type === 'atrule' && parent.name === 'mixin') {
return parent.params;
}

parent = parent.parent;
}

return undefined;
}
});

function hasInvalidAmpersandUsage(selector: string): boolean {
return selector.split(',').some(part => part.trim().indexOf('&', 1) > -1);
}

plugin.ruleName = ruleName;
plugin.messages = messages;
export default plugin;