@atlaskit/eslint-plugin-ui-styling-standard/dist/es2019/rules/no-dynamic-styles/index.js

The eslint plugin to enforce and educate on Atlassian's UI Styling Standard

import esquery from 'esquery';
import { getScope } from '@atlaskit/eslint-utils/context-compat';
import { getImportSources, hasStyleObjectArguments } from '@atlaskit/eslint-utils/is-supported-import';
import { createLintRule } from '../utils/create-rule';
const schema = [{
  type: 'object',
  properties: {
    importSources: {
      type: 'array',
      items: {
        type: 'string'
      },
      uniqueItems: true
    }
  }
}];
const rule = createLintRule({
  meta: {
    name: 'no-dynamic-styles',
    docs: {
      description: 'Disallows use of dynamic styles in CSS-in-JS calls',
      recommended: true,
      severity: 'error'
    },
    schema,
    messages: {
      'no-dynamic-styles': "Declare static variants with cssMap() and select the variant in JSX; pass values known only at runtime through the style prop."
    },
    type: 'problem'
  },
  create(context) {
    const importSources = getImportSources(context);
    return {
      CallExpression(node) {
        const {
          references
        } = getScope(context, node);
        if (!hasStyleObjectArguments(node.callee, references, importSources)) {
          return;
        }
        const matches = esquery(node, 'ArrowFunctionExpression, FunctionExpression');
        for (const match of matches) {
          context.report({
            node: match,
            messageId: 'no-dynamic-styles'
          });
        }
      }
    };
  }
});
export default rule;