diff --git a/lib/rules/keyframes-name-pattern/__tests__/index.js b/lib/rules/keyframes-name-pattern/__tests__/index.js index f4cd3e53f3..3dc964a838 100644 --- a/lib/rules/keyframes-name-pattern/__tests__/index.js +++ b/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', + }, + ], +}); diff --git a/lib/rules/keyframes-name-pattern/index.js b/lib/rules/keyframes-name-pattern/index.js index 7425c97420..75f87afa3d 100644 --- a/lib/rules/keyframes-name-pattern/index.js +++ b/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; } diff --git a/lib/utils/__tests__/isStandardSyntaxKeyframesName.test.js b/lib/utils/__tests__/isStandardSyntaxKeyframesName.test.js new file mode 100644 index 0000000000..00ae836578 --- /dev/null +++ b/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); + }); +}); diff --git a/lib/utils/isStandardSyntaxKeyframesName.js b/lib/utils/isStandardSyntaxKeyframesName.js new file mode 100644 index 0000000000..934620e976 --- /dev/null +++ b/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; +};