diff --git a/lib/rules/sort-styles.js b/lib/rules/sort-styles.js index 4262c57..3f2da77 100644 --- a/lib/rules/sort-styles.js +++ b/lib/rules/sort-styles.js @@ -11,7 +11,11 @@ const { astHelpers } = require('../util/stylesheet'); -const { getStyleDeclarations, isStyleSheetDeclaration } = astHelpers; +const { + getStyleDeclarations, + getStylePropertyIdentifier, + isStyleSheetDeclaration, +} = astHelpers; //------------------------------------------------------------------------------ // Rule Definition @@ -25,8 +29,8 @@ module.exports = (context) => { const isValidOrder = order === 'asc' ? (a, b) => a <= b : (a, b) => a >= b; function report(type, node, prev, current) { - const currentName = current.key.name; - const prevName = prev.key.name; + const currentName = getStylePropertyIdentifier(current); + const prevName = getStylePropertyIdentifier(prev); context.report({ node, message: `Expected ${type} to be in ${order}ending order. '${currentName}' should be before '${prevName}'.`, @@ -43,7 +47,10 @@ module.exports = (context) => { return; } - if (!isValidOrder(previous.key.name, current.key.name)) { + const prevName = getStylePropertyIdentifier(previous); + const currentName = getStylePropertyIdentifier(current); + + if (!isValidOrder(prevName, currentName)) { return report(arrayName, node, previous, current); } } diff --git a/lib/util/stylesheet.js b/lib/util/stylesheet.js index 238fdf2..21bf520 100644 --- a/lib/util/stylesheet.js +++ b/lib/util/stylesheet.js @@ -153,6 +153,35 @@ const astHelpers = { return []; }, + getExpressionIdentifier: function (node) { + if (node) { + switch (node.type) { + case 'Identifier': + return node.name; + case 'Literal': + return node.value; + case 'TemplateLiteral': + return node.quasis.reduce((result, quasi, index) => result + + quasi.value.cooked + + astHelpers.getExpressionIdentifier(node.expressions[index]) + , ''); + default: + return ''; + } + } + + return ''; + }, + + getStylePropertyIdentifier: function (node) { + if ( + node && + node.key + ) { + return astHelpers.getExpressionIdentifier(node.key); + } + }, + isStyleAttribute: function (node) { return Boolean( node.type === 'JSXAttribute' && diff --git a/tests/lib/rules/sort-styles.js b/tests/lib/rules/sort-styles.js index 1259d8e..22b1e27 100644 --- a/tests/lib/rules/sort-styles.js +++ b/tests/lib/rules/sort-styles.js @@ -154,6 +154,41 @@ const tests = { message: 'Expected class names to be in ascending order. \'a\' should be before \'b\'.', }], }, + { + code: ` + const styles = StyleSheet.create({ + 'b': {}, + 'a': {}, + }) + `, + errors: [{ + message: 'Expected class names to be in ascending order. \'a\' should be before \'b\'.', + }], + }, + { + code: ` + const styles = StyleSheet.create({ + ['b']: {}, + [\`a\`]: {}, + }) + `, + errors: [{ + message: 'Expected class names to be in ascending order. \'a\' should be before \'b\'.', + }], + }, + { + code: ` + const a = 'a'; + const b = 'b'; + const styles = StyleSheet.create({ + [\`\${a}-\${b}-b\`]: {}, + [\`a-\${b}-a\`]: {}, + }) + `, + errors: [{ + message: 'Expected class names to be in ascending order. \'a-b-a\' should be before \'a-b-b\'.', + }], + }, ], };