Fix false positives for interpolation in keyframes-name-pattern (#6265)

lib/rules/keyframes-name-pattern/__tests__/index.js

@@ -85,3 +85,16 @@ testRule({
 		},
 	],
 });
+
+testRule({
+	ruleName,
+	config: ['^([a-z][a-z0-9]*)(-[a-z0-9]+)*$'],
+	customSyntax: 'postcss-scss',
+
+	accept: [
+		{
+			code: '@keyframes foo-#{$bar} {}',
+			description: 'Scss interpolation',
+		},
+	],
+});

lib/rules/keyframes-name-pattern/index.js

@@ -1,6 +1,7 @@
 'use strict';
 
 const atRuleParamIndex = require('../../utils/atRuleParamIndex');
+const isStandardSyntaxKeyframesName = require('../../utils/isStandardSyntaxKeyframesName');
 const report = require('../../utils/report');
 const ruleMessages = require('../../utils/ruleMessages');
 const validateOptions = require('../../utils/validateOptions');
@@ -34,6 +35,10 @@ const rule = (primary) => {
 		root.walkAtRules(/keyframes/i, (keyframesNode) => {
 			const value = keyframesNode.params;
 
+			if (!isStandardSyntaxKeyframesName(value)) {
+				return;
+			}
+
 			if (regex.test(value)) {
 				return;
 			}

lib/utils/__tests__/isStandardSyntaxKeyframesName.test.js

@@ -0,0 +1,51 @@
+'use strict';
+
+const isStandardSyntaxKeyframesName = require('../isStandardSyntaxKeyframesName');
+
+describe('isStandardSyntaxKeyframesName', () => {
+	it('standard name', () => {
+		expect(isStandardSyntaxKeyframesName('slidein')).toBe(true);
+	});
+	it('hyphenated name', () => {
+		expect(isStandardSyntaxKeyframesName('slide-in')).toBe(true);
+	});
+	it('name with underscore', () => {
+		expect(isStandardSyntaxKeyframesName('slide_in')).toBe(true);
+	});
+	it('scss interpolation', () => {
+		expect(isStandardSyntaxKeyframesName('frame-#{$name}')).toBe(false);
+	});
+	it('scss interpolation start', () => {
+		expect(isStandardSyntaxKeyframesName('#{$name}-frame')).toBe(false);
+	});
+	it('scss interpolation single quoted', () => {
+		expect(isStandardSyntaxKeyframesName("'frame-#{$name}'")).toBe(false);
+	});
+	it('scss interpolation single quoted start', () => {
+		expect(isStandardSyntaxKeyframesName("'#{$name}-frame'")).toBe(false);
+	});
+	it('scss interpolation double quoted', () => {
+		expect(isStandardSyntaxKeyframesName('"frame-#{$name}"')).toBe(false);
+	});
+	it('scss interpolation doubled quoted start', () => {
+		expect(isStandardSyntaxKeyframesName('"#{$name}-frame"')).toBe(false);
+	});
+	it('less interpolation', () => {
+		expect(isStandardSyntaxKeyframesName('frame-@{name}')).toBe(false);
+	});
+	it('less interpolation start', () => {
+		expect(isStandardSyntaxKeyframesName('@{name}-frame')).toBe(false);
+	});
+	it('less interpolation single quoted', () => {
+		expect(isStandardSyntaxKeyframesName("'frame-@{name}'")).toBe(false);
+	});
+	it('less interpolation single quoted start', () => {
+		expect(isStandardSyntaxKeyframesName("'@{name}-frame'")).toBe(false);
+	});
+	it('less interpolation double quoted', () => {
+		expect(isStandardSyntaxKeyframesName('"frame-@{name}"')).toBe(false);
+	});
+	it('less interpolation doubled quoted start', () => {
+		expect(isStandardSyntaxKeyframesName('"@{name}-frame"')).toBe(false);
+	});
+});

lib/utils/isStandardSyntaxKeyframesName.js

@@ -0,0 +1,17 @@
+'use strict';
+
+const hasInterpolation = require('./hasInterpolation');
+
+/**
+ * Check whether a keyframes name is standard
+ *
+ * @param {string} keyframesName
+ * @returns {boolean}
+ */
+module.exports = function isStandardSyntaxKeyframesName(keyframesName) {
+	if (hasInterpolation(keyframesName)) {
+		return false;
+	}
+
+	return true;
+};