[d565449] | 1 | /**
|
---|
| 2 | * @fileoverview Enforce style prop value is an object
|
---|
| 3 | * @author David Petersen
|
---|
| 4 | */
|
---|
| 5 |
|
---|
| 6 | 'use strict';
|
---|
| 7 |
|
---|
| 8 | const variableUtil = require('../util/variable');
|
---|
| 9 | const docsUrl = require('../util/docsUrl');
|
---|
| 10 | const isCreateElement = require('../util/isCreateElement');
|
---|
| 11 | const report = require('../util/report');
|
---|
| 12 |
|
---|
| 13 | // ------------------------------------------------------------------------------
|
---|
| 14 | // Rule Definition
|
---|
| 15 | // ------------------------------------------------------------------------------
|
---|
| 16 |
|
---|
| 17 | const messages = {
|
---|
| 18 | stylePropNotObject: 'Style prop value must be an object',
|
---|
| 19 | };
|
---|
| 20 |
|
---|
[0c6b92a] | 21 | /** @type {import('eslint').Rule.RuleModule} */
|
---|
[d565449] | 22 | module.exports = {
|
---|
| 23 | meta: {
|
---|
| 24 | docs: {
|
---|
| 25 | description: 'Enforce style prop value is an object',
|
---|
| 26 | category: 'Possible Errors',
|
---|
| 27 | recommended: false,
|
---|
| 28 | url: docsUrl('style-prop-object'),
|
---|
| 29 | },
|
---|
| 30 |
|
---|
| 31 | messages,
|
---|
| 32 |
|
---|
| 33 | schema: [
|
---|
| 34 | {
|
---|
| 35 | type: 'object',
|
---|
| 36 | properties: {
|
---|
| 37 | allow: {
|
---|
| 38 | type: 'array',
|
---|
| 39 | items: {
|
---|
| 40 | type: 'string',
|
---|
| 41 | },
|
---|
| 42 | additionalItems: false,
|
---|
| 43 | uniqueItems: true,
|
---|
| 44 | },
|
---|
| 45 | },
|
---|
| 46 | },
|
---|
| 47 | ],
|
---|
| 48 | },
|
---|
| 49 |
|
---|
| 50 | create(context) {
|
---|
| 51 | const allowed = new Set(((context.options.length > 0) && context.options[0].allow) || []);
|
---|
| 52 |
|
---|
| 53 | /**
|
---|
| 54 | * @param {ASTNode} expression An Identifier node
|
---|
| 55 | * @returns {boolean}
|
---|
| 56 | */
|
---|
| 57 | function isNonNullaryLiteral(expression) {
|
---|
| 58 | return expression.type === 'Literal' && expression.value !== null;
|
---|
| 59 | }
|
---|
| 60 |
|
---|
| 61 | /**
|
---|
| 62 | * @param {object} node A Identifier node
|
---|
| 63 | */
|
---|
| 64 | function checkIdentifiers(node) {
|
---|
| 65 | const variable = variableUtil.getVariableFromContext(context, node, node.name);
|
---|
| 66 |
|
---|
| 67 | if (!variable || !variable.defs[0] || !variable.defs[0].node.init) {
|
---|
| 68 | return;
|
---|
| 69 | }
|
---|
| 70 |
|
---|
| 71 | if (isNonNullaryLiteral(variable.defs[0].node.init)) {
|
---|
| 72 | report(context, messages.stylePropNotObject, 'stylePropNotObject', {
|
---|
| 73 | node,
|
---|
| 74 | });
|
---|
| 75 | }
|
---|
| 76 | }
|
---|
| 77 |
|
---|
| 78 | return {
|
---|
| 79 | CallExpression(node) {
|
---|
| 80 | if (
|
---|
| 81 | isCreateElement(context, node)
|
---|
| 82 | && node.arguments.length > 1
|
---|
| 83 | ) {
|
---|
[0c6b92a] | 84 | if ('name' in node.arguments[0] && node.arguments[0].name) {
|
---|
[d565449] | 85 | // store name of component
|
---|
| 86 | const componentName = node.arguments[0].name;
|
---|
| 87 |
|
---|
| 88 | // allowed list contains the name
|
---|
| 89 | if (allowed.has(componentName)) {
|
---|
| 90 | // abort operation
|
---|
| 91 | return;
|
---|
| 92 | }
|
---|
| 93 | }
|
---|
| 94 | if (node.arguments[1].type === 'ObjectExpression') {
|
---|
[0c6b92a] | 95 | const style = node.arguments[1].properties.find((property) => (
|
---|
| 96 | 'key' in property
|
---|
| 97 | && property.key
|
---|
| 98 | && 'name' in property.key
|
---|
| 99 | && property.key.name === 'style'
|
---|
| 100 | && !property.computed
|
---|
| 101 | ));
|
---|
| 102 |
|
---|
| 103 | if (style && 'value' in style) {
|
---|
[d565449] | 104 | if (style.value.type === 'Identifier') {
|
---|
| 105 | checkIdentifiers(style.value);
|
---|
| 106 | } else if (isNonNullaryLiteral(style.value)) {
|
---|
| 107 | report(context, messages.stylePropNotObject, 'stylePropNotObject', {
|
---|
| 108 | node: style.value,
|
---|
| 109 | });
|
---|
| 110 | }
|
---|
| 111 | }
|
---|
| 112 | }
|
---|
| 113 | }
|
---|
| 114 | },
|
---|
| 115 |
|
---|
| 116 | JSXAttribute(node) {
|
---|
| 117 | if (!node.value || node.name.name !== 'style') {
|
---|
| 118 | return;
|
---|
| 119 | }
|
---|
| 120 | // store parent element
|
---|
| 121 | const parentElement = node.parent;
|
---|
| 122 |
|
---|
| 123 | // parent element is a JSXOpeningElement
|
---|
| 124 | if (parentElement && parentElement.type === 'JSXOpeningElement') {
|
---|
| 125 | // get the name of the JSX element
|
---|
| 126 | const name = parentElement.name && parentElement.name.name;
|
---|
| 127 |
|
---|
| 128 | // allowed list contains the name
|
---|
| 129 | if (allowed.has(name)) {
|
---|
| 130 | // abort operation
|
---|
| 131 | return;
|
---|
| 132 | }
|
---|
| 133 | }
|
---|
| 134 |
|
---|
| 135 | if (node.value.type !== 'JSXExpressionContainer' || isNonNullaryLiteral(node.value.expression)) {
|
---|
| 136 | report(context, messages.stylePropNotObject, 'stylePropNotObject', {
|
---|
| 137 | node,
|
---|
| 138 | });
|
---|
| 139 | } else if (node.value.expression.type === 'Identifier') {
|
---|
| 140 | checkIdentifiers(node.value.expression);
|
---|
| 141 | }
|
---|
| 142 | },
|
---|
| 143 | };
|
---|
| 144 | },
|
---|
| 145 | };
|
---|