@atlaskit/eslint-plugin-design-system 8.25.2 → 8.26.0

package/dist/cjs/rules/utils/is-supported-import.js

@@ -1,9 +1,11 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isCxFunction = exports.isCss = exports.CSS_IN_JS_IMPORTS = void 0;
+exports.isStyled = exports.isKeyframes = exports.isCxFunction = exports.isCssMap = exports.isCss = exports.getImportSources = exports.DEFAULT_IMPORT_SOURCES = exports.CSS_IN_JS_IMPORTS = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 // eslint-disable-next-line import/no-extraneous-dependencies
 
 var CSS_IN_JS_IMPORTS = exports.CSS_IN_JS_IMPORTS = {
@@ -14,32 +16,65 @@ var CSS_IN_JS_IMPORTS = exports.CSS_IN_JS_IMPORTS = {
   atlaskitCss: '@atlaskit/css'
 };
 
-// List of CSS-in-JS libraries an import of a valid css, cx, cssMap, etc.
+// A CSS-in-JS library an import of a valid css, cx, cssMap, etc.
 // function might originate from, e.g. @compiled/react, @emotion/core.
 
+// All ESLint rules originating from `@compiled/eslint-plugin` should apply to these libraries.
+var DEFAULT_IMPORT_SOURCES = exports.DEFAULT_IMPORT_SOURCES = [CSS_IN_JS_IMPORTS.compiled, CSS_IN_JS_IMPORTS.atlaskitCss];
+
+/**
+ * Given the ESLint rule context, extract and parse the value of the importSources rule option.
+ * The importSources option is used to define additional libraries for which an ESLint rule
+ * should apply to.
+ *
+ * Note that `@compiled/react` and `@atlaskit/css` are always included in importSources, regardless
+ * of what importSources is configured to by the user.
+ *
+ * @param context The rule context.
+ * @returns An array of strings representing what CSS-in-JS packages that should be checked, based
+ *          on the rule options configuration.
+ */
+var getImportSources = exports.getImportSources = function getImportSources(context) {
+  var options = context.options;
+  if (!options.length) {
+    return DEFAULT_IMPORT_SOURCES;
+  }
+  if (options[0].importSources && Array.isArray(options[0].importSources)) {
+    return [].concat(DEFAULT_IMPORT_SOURCES, (0, _toConsumableArray2.default)(options[0].importSources));
+  }
+  return DEFAULT_IMPORT_SOURCES;
+};
 var isSupportedImportWrapper = function isSupportedImportWrapper(functionName) {
-  // This will need to be extended to support default imports once we start
-  // checking cases like `import css from '@emotion/css'`
   var checkDefinitionHasImport = function checkDefinitionHasImport(def, importSources) {
-    var _def$parent, _def$parent2;
-    return def.node.type === 'ImportSpecifier' && def.node.imported.type === 'Identifier' && def.node.imported.name === functionName && ((_def$parent = def.parent) === null || _def$parent === void 0 ? void 0 : _def$parent.type) === 'ImportDeclaration' && importSources.includes((_def$parent2 = def.parent) === null || _def$parent2 === void 0 ? void 0 : _def$parent2.source.value);
+    if (def.type !== 'ImportBinding') {
+      return false;
+    }
+    if (!def.parent || !importSources.includes(def.parent.source.value)) {
+      return false;
+    }
+    return (
+      // import { functionName } from 'import-source';
+      def.node.type === 'ImportSpecifier' && def.node.imported.name === functionName ||
+      // import functionName from 'import-source';
+      def.node.type === 'ImportDefaultSpecifier' && def.node.local.name === functionName
+    );
   };
 
   /**
    * Checks whether:
    *
-   * 1. a function name `nodeToCheck` matches the name of the function we
+   * 1. A function name `nodeToCheck` matches the name of the function we
    *    want to check for (e.g. `cx`, `css`, `cssMap`, or `keyframes`), and
-   * 2. whether `nodeToCheck` originates from one of the libraries listed
+   * 2. Whether `nodeToCheck` originates from one of the libraries listed
    *     in `importSources`.
    *
-   * @param nodeToCheck the function callee we are checking (e.g. the `css` in `css()`)
-   * @param referencesInScope list of references that are in scope. We'll use this
+   * @param nodeToCheck The function callee we are checking (e.g. The `css` in `css()`).
+   * @param referencesInScope List of references that are in scope. We'll use this
    *                          to check where the function callee is imported from.
-   * @param importSources list of libraries that we want to ensure `nodeToCheck`
-   *                      comes from
+   * @param importSources List of libraries that we want to ensure `nodeToCheck`
+   *                      comes from.
    *
-   * @returns whether the above conditions are true
+   * @returns Whether the above conditions are true.
    */
   var isSupportedImport = function isSupportedImport(nodeToCheck, referencesInScope, importSources) {
     return nodeToCheck.type === 'Identifier' && referencesInScope.some(function (reference) {
@@ -57,5 +92,6 @@ var isSupportedImportWrapper = function isSupportedImportWrapper(functionName) {
 //
 var isCss = exports.isCss = isSupportedImportWrapper('css');
 var isCxFunction = exports.isCxFunction = isSupportedImportWrapper('cx');
-// export const isCssMap = isLibraryImportWrapper('cssMap');
-// export const isKeyframes = isLibraryImportWrapper('keyframes');
+var isCssMap = exports.isCssMap = isSupportedImportWrapper('cssMap');
+var isKeyframes = exports.isKeyframes = isSupportedImportWrapper('keyframes');
+var isStyled = exports.isStyled = isSupportedImportWrapper('styled');

package/dist/es2019/presets/all.codegen.js

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::5026ba2cb55b3c1bcacbfe7fb7728a6c>>
+ * @codegen <<SignedSource::914085544778f4543f43e3e30d0982e0>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 export default {
@@ -16,6 +16,10 @@ export default {
     '@atlaskit/design-system/no-deprecated-apis': 'error',
     '@atlaskit/design-system/no-deprecated-design-token-usage': 'warn',
     '@atlaskit/design-system/no-deprecated-imports': 'error',
+    '@atlaskit/design-system/no-empty-styled-expression': 'warn',
+    '@atlaskit/design-system/no-exported-css': 'warn',
+    '@atlaskit/design-system/no-exported-keyframes': 'warn',
+    '@atlaskit/design-system/no-invalid-css-map': 'error',
     '@atlaskit/design-system/no-margin': 'warn',
     '@atlaskit/design-system/no-nested-styles': 'error',
     '@atlaskit/design-system/no-physical-properties': 'error',

package/dist/es2019/presets/recommended.codegen.js

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::839224bfab98c1ddf6018dec5320968e>>
+ * @codegen <<SignedSource::577269c832952ce359cde6a50f26f4e0>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 export default {
@@ -14,6 +14,10 @@ export default {
     '@atlaskit/design-system/no-deprecated-apis': 'error',
     '@atlaskit/design-system/no-deprecated-design-token-usage': 'warn',
     '@atlaskit/design-system/no-deprecated-imports': 'error',
+    '@atlaskit/design-system/no-empty-styled-expression': 'warn',
+    '@atlaskit/design-system/no-exported-css': 'warn',
+    '@atlaskit/design-system/no-exported-keyframes': 'warn',
+    '@atlaskit/design-system/no-invalid-css-map': 'error',
     '@atlaskit/design-system/no-nested-styles': 'error',
     '@atlaskit/design-system/no-unsafe-design-token-usage': 'error',
     '@atlaskit/design-system/no-unsafe-style-overrides': 'warn',

package/dist/es2019/rules/index.codegen.js

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::a67afc33adf50db651edb1cf12e16ef3>>
+ * @codegen <<SignedSource::0a2d88c9772eb438048415f13550f592>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 import consistentCssPropUsage from './consistent-css-prop-usage';
@@ -13,6 +13,10 @@ import noCssTaggedTemplateExpression from './no-css-tagged-template-expression';
 import noDeprecatedApis from './no-deprecated-apis';
 import noDeprecatedDesignTokenUsage from './no-deprecated-design-token-usage';
 import noDeprecatedImports from './no-deprecated-imports';
+import noEmptyStyledExpression from './no-empty-styled-expression';
+import noExportedCss from './no-exported-css';
+import noExportedKeyframes from './no-exported-keyframes';
+import noInvalidCssMap from './no-invalid-css-map';
 import noMargin from './no-margin';
 import noNestedStyles from './no-nested-styles';
 import noPhysicalProperties from './no-physical-properties';
@@ -37,6 +41,10 @@ export default {
   'no-deprecated-apis': noDeprecatedApis,
   'no-deprecated-design-token-usage': noDeprecatedDesignTokenUsage,
   'no-deprecated-imports': noDeprecatedImports,
+  'no-empty-styled-expression': noEmptyStyledExpression,
+  'no-exported-css': noExportedCss,
+  'no-exported-keyframes': noExportedKeyframes,
+  'no-invalid-css-map': noInvalidCssMap,
   'no-margin': noMargin,
   'no-nested-styles': noNestedStyles,
   'no-physical-properties': noPhysicalProperties,

package/dist/es2019/rules/no-empty-styled-expression/index.js

@@ -0,0 +1,65 @@
+import { createLintRule } from '../utils/create-rule';
+import { getImportSources, isStyled } from '../utils/is-supported-import';
+const isEmptyStyledExpression = node => {
+  const [firstArg] = node.arguments;
+  if (node.arguments.length === 0) {
+    return true;
+  } else if (node.arguments.length === 1 && (firstArg === null || firstArg === void 0 ? void 0 : firstArg.type) === 'ArrayExpression') {
+    return firstArg.elements.length === 0;
+  } else if (node.arguments.length === 1 && (firstArg === null || firstArg === void 0 ? void 0 : firstArg.type) === 'ObjectExpression') {
+    return firstArg.properties.length === 0;
+  }
+  return false;
+};
+const createNoEmptyStyledExpressionRule = (isEmptyStyledExpression, messageId) => context => {
+  const importSources = getImportSources(context);
+  return {
+    'CallExpression[callee.type="MemberExpression"]': node => {
+      const {
+        references
+      } = context.getScope();
+
+      // If we have styled.div(...), make sure `callee` only refers to the
+      // `styled` part instead of the whole `styled.div` expression.
+      const callee = node.callee.type === 'MemberExpression' ? node.callee.object : node.callee;
+      if (!isStyled(callee, references, importSources)) {
+        return;
+      }
+      if (!isEmptyStyledExpression(node)) {
+        return;
+      }
+      context.report({
+        messageId,
+        node
+      });
+    }
+  };
+};
+const noEmptyStyledExpressionRule = createLintRule({
+  meta: {
+    name: 'no-empty-styled-expression',
+    docs: {
+      description: 'Forbids any styled expression to be used when passing empty arguments to styled.div() (or other JSX elements).',
+      recommended: true,
+      severity: 'warn'
+    },
+    messages: {
+      unexpected: 'Found an empty expression, or empty object argument passed to `styled` function call. This unnecessarily causes a major performance penalty - please use a plain JSX element or a React fragment instead (e.g. `<div>Hello</div>` or `<>Hello</>`).'
+    },
+    type: 'problem',
+    schema: [{
+      type: 'object',
+      properties: {
+        importSources: {
+          type: 'array',
+          items: [{
+            type: 'string'
+          }]
+        }
+      },
+      additionalProperties: false
+    }]
+  },
+  create: createNoEmptyStyledExpressionRule(isEmptyStyledExpression, 'unexpected')
+});
+export default noEmptyStyledExpressionRule;

package/dist/es2019/rules/no-exported-css/index.js

@@ -0,0 +1,31 @@
+import { createNoExportedRule } from '../utils/create-no-exported-rule/main';
+import { createLintRule } from '../utils/create-rule';
+import { isCss } from '../utils/is-supported-import';
+const noExportedCssRule = createLintRule({
+  meta: {
+    name: 'no-exported-css',
+    type: 'problem',
+    docs: {
+      description: 'Forbid exporting `css` function calls. Exporting `css` function calls can result in unexpected behaviour at runtime, and is not statically analysable.',
+      recommended: true,
+      severity: 'warn'
+    },
+    messages: {
+      unexpected: "`css` can't be exported - this will cause unexpected behaviour at runtime. Instead, please move your `css(...)` code to the same file where these styles are being used."
+    },
+    schema: [{
+      type: 'object',
+      properties: {
+        importSources: {
+          type: 'array',
+          items: [{
+            type: 'string'
+          }]
+        }
+      },
+      additionalProperties: false
+    }]
+  },
+  create: createNoExportedRule(isCss, 'unexpected')
+});
+export default noExportedCssRule;

package/dist/es2019/rules/no-exported-keyframes/index.js

@@ -0,0 +1,31 @@
+import { createNoExportedRule } from '../utils/create-no-exported-rule/main';
+import { createLintRule } from '../utils/create-rule';
+import { isKeyframes } from '../utils/is-supported-import';
+const noExportedKeyframesRule = createLintRule({
+  meta: {
+    name: 'no-exported-keyframes',
+    type: 'problem',
+    docs: {
+      description: 'Forbid exporting `keyframes` function calls. Exporting `css` function calls can result in unexpected behaviour at runtime, and is not statically analysable.',
+      recommended: true,
+      severity: 'warn'
+    },
+    messages: {
+      unexpected: "`keyframes` can't be exported - this will cause unexpected behaviour at runtime. Instead, please move your `keyframes(...)` code to the same file where these styles are being used."
+    },
+    schema: [{
+      type: 'object',
+      properties: {
+        importSources: {
+          type: 'array',
+          items: [{
+            type: 'string'
+          }]
+        }
+      },
+      additionalProperties: false
+    }]
+  },
+  create: createNoExportedRule(isKeyframes, 'unexpected')
+});
+export default noExportedKeyframesRule;

package/dist/es2019/rules/no-invalid-css-map/index.js

@@ -0,0 +1,95 @@
+import { checkIfSupportedExport } from '../utils/create-no-exported-rule/check-if-supported-export';
+import { createLintRule } from '../utils/create-rule';
+import { CSS_IN_JS_IMPORTS, isCssMap } from '../utils/is-supported-import';
+import { CssMapObjectChecker, getCssMapObject } from './utils';
+const IMPORT_SOURCES = [CSS_IN_JS_IMPORTS.compiled, CSS_IN_JS_IMPORTS.atlaskitCss];
+const reportIfExported = (node, context) => {
+  const state = checkIfSupportedExport(context, node, IMPORT_SOURCES);
+  if (!state.isExport) {
+    return;
+  }
+  context.report({
+    messageId: 'noExportedCssMap',
+    node: state.node
+  });
+};
+const reportIfNotTopLevelScope = (node, context) => {
+  // Treat `export` keyword as valid because the reportIfExported function already handles those
+  const validTypes = ['ExportDefaultDeclaration', 'ExportNamedDeclaration', 'Program', 'VariableDeclaration', 'VariableDeclarator'];
+  let parentNode = node.parent;
+  while (parentNode) {
+    if (!validTypes.includes(parentNode.type)) {
+      context.report({
+        node: node,
+        messageId: 'mustBeTopLevelScope'
+      });
+      return;
+    }
+    parentNode = parentNode.parent;
+  }
+};
+const createCssMapRule = context => {
+  const {
+    text
+  } = context.getSourceCode();
+  if (IMPORT_SOURCES.every(importSource => !text.includes(importSource))) {
+    return {};
+  }
+  return {
+    CallExpression(node) {
+      const references = context.getScope().references;
+      if (!isCssMap(node.callee, references, IMPORT_SOURCES)) {
+        return;
+      }
+      reportIfExported(node, context);
+      reportIfNotTopLevelScope(node, context);
+      const cssMapObject = getCssMapObject(node);
+      if (!cssMapObject) {
+        return;
+      }
+      const cssMapObjectChecker = new CssMapObjectChecker(cssMapObject, context);
+      cssMapObjectChecker.run();
+    }
+  };
+};
+const noInvalidCssMapRule = createLintRule({
+  meta: {
+    name: 'no-invalid-css-map',
+    docs: {
+      description: "Checks the validity of a CSS map created through cssMap. This is intended to be used alongside TypeScript's type-checking.",
+      recommended: true,
+      severity: 'error'
+    },
+    messages: {
+      mustBeTopLevelScope: 'cssMap must only be used in the top-most scope of the module.',
+      noNonStaticallyEvaluable: 'Cannot statically evaluate the value of this variable. Values used in the cssMap function call should have a value evaluable at build time.',
+      noExportedCssMap: 'cssMap usages cannot be exported.',
+      noInlineFunctions: 'Cannot use functions as values in cssMap - values must only be statically evaluable values (e.g. strings, numbers).',
+      noFunctionCalls: 'Cannot call external functions in cssMap - values must only be statically evaluable values (e.g. strings, numbers).',
+      noSpreadElement: 'Cannot use the spread operator in cssMap.'
+    },
+    schema: [{
+      type: 'object',
+      properties: {
+        allowedFunctionCalls: {
+          type: 'array',
+          items: {
+            type: 'array',
+            minItems: 2,
+            maxItems: 2,
+            items: [{
+              type: 'string'
+            }, {
+              type: 'string'
+            }]
+          },
+          uniqueItems: true
+        }
+      },
+      additionalProperties: false
+    }],
+    type: 'problem'
+  },
+  create: createCssMapRule
+});
+export default noInvalidCssMapRule;

package/dist/es2019/rules/no-invalid-css-map/utils.js

@@ -0,0 +1,134 @@
+export const getCssMapObject = node => {
+  // We assume the argument `node` is already a cssMap() call.
+
+  // Things like the number of arguments to cssMap and the type of
+  // cssMap's argument are handled by the TypeScript compiler, so
+  // we don't bother with creating eslint errors for these here
+
+  if (node.arguments.length !== 1 || node.arguments[0].type !== 'ObjectExpression') {
+    return;
+  }
+  return node.arguments[0];
+};
+const findNodeReference = (references, node) => {
+  return references.find(reference => reference.identifier === node);
+};
+const getAllowedFunctionCalls = options => {
+  var _options$;
+  if (options.length === 0 || ((_options$ = options[0]) === null || _options$ === void 0 ? void 0 : _options$.allowedFunctionCalls) === undefined) {
+    return [];
+  }
+
+  // Beyond the basic check of "does allowedFunctionCalls exist?",
+  // we assume ESLint's rule checker type checks the contents of allowedFunctionCalls
+  // as it should
+  return options[0].allowedFunctionCalls;
+};
+export class CssMapObjectChecker {
+  constructor(cssMapObject, context) {
+    this.allowedFunctionCalls = getAllowedFunctionCalls(context.options);
+    this.cssMapObject = cssMapObject;
+    this.report = context.report;
+    this.references = context.getScope().references;
+  }
+  isNotWhitelistedFunction(callee) {
+    var _reference$resolved;
+    if (callee.type !== 'Identifier' || this.allowedFunctionCalls.length === 0) {
+      return true;
+    }
+    const reference = findNodeReference(this.references, callee);
+    const definitions = reference === null || reference === void 0 ? void 0 : (_reference$resolved = reference.resolved) === null || _reference$resolved === void 0 ? void 0 : _reference$resolved.defs;
+    if (!definitions) {
+      return true;
+    }
+    return definitions.some(definition => {
+      // We add some restrictions to keep this simple...
+      // Forbid non-imported functions
+      if (definition.type !== 'ImportBinding') {
+        return true;
+      }
+      // Forbid default imports (e.g. `import React from 'react'`)
+      if (definition.node.type !== 'ImportSpecifier') {
+        return true;
+      }
+      const packageName = definition.parent.source.value;
+      const importedFunctionName = definition.node.imported.name;
+      return !this.allowedFunctionCalls.some(([allowedPackageName, allowedFunctionName]) => allowedPackageName === packageName && allowedFunctionName === importedFunctionName);
+    });
+  }
+  checkCssMapObjectValue(value) {
+    if (value.type === 'CallExpression' && this.isNotWhitelistedFunction(value.callee)) {
+      // object value is a function call in the style
+      // {
+      //     key: functionCall(), ...
+      // }
+      this.report({
+        node: value,
+        messageId: 'noFunctionCalls'
+      });
+    } else if (value.type === 'ArrowFunctionExpression' || value.type === 'FunctionExpression') {
+      // object value is a function call in the style
+      // {
+      //     key: (prop) => prop.color,       // ArrowFunctionExpression
+      //     get danger() { return { ... } }, // FunctionExpression
+      // }
+      this.report({
+        node: value,
+        messageId: 'noInlineFunctions'
+      });
+    } else if (value.type === 'BinaryExpression' || value.type === 'LogicalExpression') {
+      this.checkCssMapObjectValue(value.left);
+      this.checkCssMapObjectValue(value.right);
+    } else if (value.type === 'Identifier') {
+      var _reference$resolved2;
+      const reference = findNodeReference(this.references, value);
+
+      // Get the variable's definition when initialised. Assume that the last definition
+      // is the most recent one.
+      //
+      // Ideally we would try to get the variable's value at the point at which
+      // cssMap() is run, but ESLint doesn't seem to give us an easy way to
+      // do that...
+      const definitions = reference === null || reference === void 0 ? void 0 : (_reference$resolved2 = reference.resolved) === null || _reference$resolved2 === void 0 ? void 0 : _reference$resolved2.defs;
+      if (!definitions || definitions.length === 0) {
+        // Variable is not defined :thinking:
+        return;
+      }
+      for (const definition of definitions) {
+        if (definition.type === 'Variable' && definition.node.init) {
+          return this.checkCssMapObjectValue(definition.node.init);
+        }
+      }
+    } else if (value.type === 'ObjectExpression') {
+      // Object inside another object
+      this.checkCssMapObject(value);
+    } else if (value.type === 'TemplateLiteral') {
+      // object value is a template literal, something like
+      //     `hello world`
+      //     `hello ${functionCall()} world`
+      //     `hello ${someVariable} world`
+      // etc.
+      //
+      // where the expressions are the parts enclosed within the
+      // ${ ... }
+      for (const expression of value.expressions) {
+        this.checkCssMapObjectValue(expression);
+      }
+    }
+  }
+  checkCssMapObject(cssMapObject) {
+    for (const property of cssMapObject.properties) {
+      if (property.type === 'SpreadElement') {
+        this.report({
+          node: property,
+          messageId: 'noSpreadElement'
+        });
+        continue;
+      }
+      this.checkCssMapObjectValue(property.value);
+    }
+  }
+  run() {
+    this.checkCssMapObject(this.cssMapObject);
+  }
+}

package/dist/es2019/rules/utils/create-no-exported-rule/check-if-supported-export.js

@@ -0,0 +1,142 @@
+import { isStyledComponent } from './is-styled-component';
+const getStack = (context, node) => {
+  var _scope;
+  const {
+    scopeManager
+  } = context.getSourceCode();
+  const stack = {
+    nodes: [],
+    root: node
+  };
+  let scope;
+  for (let current = node; current.type !== 'Program'; current = current.parent) {
+    if (!scope) {
+      const currentScope = scopeManager.acquire(current);
+      if (currentScope) {
+        scope = currentScope;
+      }
+    }
+    switch (current.type) {
+      case 'ExportDefaultDeclaration':
+      case 'ExportNamedDeclaration':
+        stack.root = current;
+        break;
+      case 'VariableDeclarator':
+        stack.root = current;
+        break;
+      case 'ExportSpecifier':
+      case 'ObjectExpression':
+      case 'VariableDeclaration':
+        break;
+      default:
+        stack.nodes.unshift(current);
+    }
+  }
+  return {
+    ...stack,
+    scope: (_scope = scope) !== null && _scope !== void 0 ? _scope : context.getScope()
+  };
+};
+const matches = (defs, refs) => {
+  // When there are no defs, the definition is inlined. This must be a match as we know the refs contain the initial
+  // definition.
+  if (!defs.length) {
+    return true;
+  }
+
+  // When there are no refs, the reference refers to the entire definition and therefore must be a match.
+  if (!refs.length) {
+    return true;
+  }
+
+  // When both the references and definitions exist, they should match in length
+  if (defs.length !== refs.length) {
+    return false;
+  }
+  return defs.every((def, i) => {
+    const ref = refs[i];
+    if (def.type === 'Property') {
+      // There is a match between the def and the ref when both names match:
+      //
+      // const fooDef = { bar: '' };
+      // const barRef = fooDef.bar
+      //
+      // There is no match when the ref property does not match the definition key name:
+      //
+      // const barRef = fooDef.notFound
+      return def.key.type === 'Identifier' && ref.type === 'MemberExpression' && ref.property.type === 'Identifier' && ref.property.name === def.key.name;
+    }
+
+    // Anything here is either unsupported or should not match...
+    return false;
+  });
+};
+export const checkIfSupportedExport = (context, node, importSources, scope = context.getScope()) => {
+  // Ignore any expression defined outside of the global or module scope as we have no way of statically analysing them
+  if (scope.type !== 'global' && scope.type !== 'module') {
+    return {
+      isExport: false
+    };
+  }
+  const {
+    root,
+    nodes
+  } = getStack(context, node.parent);
+  // Exporting a component with a css reference should be allowed
+  if (isStyledComponent(nodes, context, importSources)) {
+    return {
+      isExport: false
+    };
+  }
+  if (root.type === 'ExportDefaultDeclaration' || root.type === 'ExportNamedDeclaration') {
+    return {
+      isExport: true,
+      node: root
+    };
+  }
+  if (root.type !== 'VariableDeclarator') {
+    return {
+      isExport: false
+    };
+  }
+
+  // Find the reference to the variable declarator
+  const reference = scope.references.find(({
+    identifier
+  }) => identifier === root.id);
+  if (!reference) {
+    return {
+      isExport: false
+    };
+  }
+
+  // Iterate through all of the references to the resolved variable declarator node
+  const {
+    resolved
+  } = reference;
+  for (const {
+    identifier
+  } of (_resolved$references = resolved === null || resolved === void 0 ? void 0 : resolved.references) !== null && _resolved$references !== void 0 ? _resolved$references : []) {
+    var _resolved$references;
+    // Skip references to the root, since it has already been processed above
+    if (identifier === root.id) {
+      continue;
+    }
+    const {
+      nodes: refs,
+      scope: nextScope
+    } = getStack(context, identifier.parent);
+
+    // Only validate the resolved reference if it accesses the definition node
+    if (matches(nodes, refs.reverse())) {
+      // Now validate the identifier reference as a definition
+      const validity = checkIfSupportedExport(context, identifier, importSources, nextScope);
+      if (validity.isExport) {
+        return validity;
+      }
+    }
+  }
+  return {
+    isExport: false
+  };
+};