@atlaskit/eslint-plugin-design-system 8.27.0 → 8.29.0

package/dist/es2019/rules/utils/create-no-tagged-template-expression-rule/index.js

@@ -0,0 +1,84 @@
+// Original source from Compiled https://github.com/atlassian-labs/compiled/blob/master/packages/eslint-plugin/src/utils/create-no-tagged-template-expression-rule/index.ts
+// eslint-disable-next-line import/no-extraneous-dependencies
+
+import { getImportSources } from '../is-supported-import';
+import { generate } from './generate';
+import { getTaggedTemplateExpressionOffset } from './get-tagged-template-expression-offset';
+import { toArguments } from './to-arguments';
+export const noTaggedTemplateExpressionRuleSchema = [{
+  type: 'object',
+  properties: {
+    importSources: {
+      type: 'array',
+      items: {
+        type: 'string'
+      },
+      uniqueItems: true
+    }
+  }
+}];
+
+/**
+ * When true, template strings containing multiline comments are completely skipped over.
+ *
+ * When false, multiline comments are stripped out. Ideally we would preserve them,
+ * but it would add a lot of complexity.
+ */
+const shouldSkipMultilineComments = false;
+export const createNoTaggedTemplateExpressionRule = (isUsage, messageId) => context => {
+  const importSources = getImportSources(context);
+  return {
+    TaggedTemplateExpression(node) {
+      const {
+        references
+      } = context.getScope();
+      if (!isUsage(node.tag, references, importSources)) {
+        return;
+      }
+      context.report({
+        messageId,
+        node,
+        *fix(fixer) {
+          const {
+            quasi
+          } = node;
+          const source = context.getSourceCode();
+
+          // TODO Eventually handle comments instead of skipping them
+          // Skip auto-fixing comments
+          if (shouldSkipMultilineComments && quasi.quasis.map(q => q.value.raw).join('').match(/\/\*[\s\S]*\*\//g)) {
+            return;
+          }
+
+          // Replace empty tagged template expression with the equivalent object call expression
+          if (!quasi.expressions.length && quasi.quasis.length === 1 && !quasi.quasis[0].value.raw.trim()) {
+            yield fixer.replaceText(quasi, '({})');
+            return;
+          }
+          const args = toArguments(source, quasi);
+
+          // Skip invalid CSS
+          if (args.length < 1) {
+            return;
+          }
+          const oldCode = source.getText(node);
+          // Remove quasi:
+          // styled.div<Props>`
+          //    color: red;
+          // `
+          // becomes
+          // styled.div<Props>
+          const withoutQuasi = oldCode.replace(source.getText(quasi), '');
+          const newCode = withoutQuasi +
+          // Indent the arguments after the tagged template expression range
+          generate(args, getTaggedTemplateExpressionOffset(node));
+          if (oldCode === newCode) {
+            return;
+          }
+          yield fixer.insertTextBefore(node, newCode);
+          yield fixer.remove(node);
+        }
+      });
+    }
+  };
+};

package/dist/es2019/rules/{no-css-tagged-template-expression → utils}/create-no-tagged-template-expression-rule/to-arguments.js

@@ -39,7 +39,30 @@ const getArguments = (chars, expressions = []) => {
     }
   }
   const getValue = () => {
-    if (!value.trim().length && expressions.length) {
+    /**
+     * This branch is required for handling interpolated functions:
+     *
+     * css`
+     *   color: ${(props) => props.textColor}
+     * `
+     *
+     * But it also breaks interpolations of multiple tokens:
+     *
+     * css`
+     *   padding: ${token('space.100')} ${token('space.200')}
+     * `
+     *
+     * which becomes invalid syntax:
+     *
+     * css({
+     *   padding: token('space.100')token('space.200')
+     * })
+     *
+     * Limiting this branch to when `expressions.length === 1` seems
+     * to allow both cases to work. There may be other edge cases,
+     * but none were caught by the existing test suite.
+     */
+    if (!value.trim().length && expressions.length === 1) {
       return {
         type: 'expression',
         expression: expressions.map(e => e.expression).join('')
@@ -134,7 +157,10 @@ export const toArguments = (source, template) => {
   };
   for (const [i, quasi] of template.quasis.entries()) {
     // Deal with selectors across multiple lines
-    const styleTemplateElement = quasi.value.raw.replace(/(\r\n|\n|\r)/gm, ' ').replace(/\s+/g, ' ');
+    const styleTemplateElement = quasi.value.raw.replace(/\/\*(.|\n|\r)*?\*\//g, '') // Removes multi-line comments
+    // Remove single line comments
+    // Negative lookbehind to handle URL-like double slashes
+    .replace(/(?<!https?:)\/\/.*$/gm, '').replace(/(\r\n|\n|\r)/gm, ' ').replace(/\s+/g, ' ');
     for (const char of styleTemplateElement) {
       switch (char) {
         case '{':

package/dist/es2019/rules/utils/create-rule.js

@@ -10,15 +10,17 @@ import { ESLintUtils } from '@typescript-eslint/utils';
  * @private
  * @deprecated
  */
-export const createRule = ESLintUtils.RuleCreator(name => `https://atlassian.design/components/eslint-plugin-design-system/usage#${name}`);
+export const createRule = ESLintUtils.RuleCreator(name => getRuleUrl(name));
 /**
  * Tiny wrapped over the ESLint rule module type that ensures
  * there is a docs link to our ESLint plugin documentation page,
  * as well as improving type support.
  */
 export const createLintRule = rule => {
-  const ruleName = rule.meta.name.replace('/', ''); // If it's a nested rule, ensure the url is clean
-  const url = `https://atlassian.design/components/eslint-plugin-design-system/usage#${ruleName}`;
-  rule.meta.docs.url = url;
+  rule.meta.docs.url = getRuleUrl(rule.meta.name);
   return rule;
-};
+};
+function getRuleUrl(ruleName) {
+  const name = ruleName.replace('/', '-'); // If it's a nested rule, ensure the url is clean and matches codegen/gatsby
+  return `https://atlassian.design/components/eslint-plugin-design-system/${name}/usage`;
+}

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

@@ -4,6 +4,7 @@ export const CSS_IN_JS_IMPORTS = {
   compiled: '@compiled/react',
   emotionReact: '@emotion/react',
   emotionCore: '@emotion/core',
+  emotionStyled: '@emotion/styled',
   styledComponents: 'styled-components',
   atlaskitCss: '@atlaskit/css',
   atlaskitPrimitives: '@atlaskit/primitives'
@@ -11,16 +12,14 @@ export const CSS_IN_JS_IMPORTS = {
 
 // 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.
-export const DEFAULT_IMPORT_SOURCES = [CSS_IN_JS_IMPORTS.compiled, CSS_IN_JS_IMPORTS.atlaskitCss];
+/**
+ * By default all known import sources are checked against.
+ */
+export const DEFAULT_IMPORT_SOURCES = Object.values(CSS_IN_JS_IMPORTS);
 
 /**
  * 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.
+ * The importSources option is used to override which libraries an ESLint rule applies to.
  *
  * @param context The rule context.
  * @returns An array of strings representing what CSS-in-JS packages that should be checked, based
@@ -32,7 +31,7 @@ export const getImportSources = context => {
     return DEFAULT_IMPORT_SOURCES;
   }
   if (options[0].importSources && Array.isArray(options[0].importSources)) {
-    return [...DEFAULT_IMPORT_SOURCES, ...options[0].importSources];
+    return options[0].importSources;
   }
   return DEFAULT_IMPORT_SOURCES;
 };

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

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::914085544778f4543f43e3e30d0982e0>>
+ * @codegen <<SignedSource::5647ce9c10ba880cffece66b5924fd6e>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 export default {
@@ -20,9 +20,11 @@ export default {
     '@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-keyframes-tagged-template-expression': 'error',
     '@atlaskit/design-system/no-margin': 'warn',
     '@atlaskit/design-system/no-nested-styles': 'error',
     '@atlaskit/design-system/no-physical-properties': 'error',
+    '@atlaskit/design-system/no-styled-tagged-template-expression': 'error',
     '@atlaskit/design-system/no-unsafe-design-token-usage': 'error',
     '@atlaskit/design-system/no-unsafe-style-overrides': 'warn',
     '@atlaskit/design-system/no-unsupported-drag-and-drop-libraries': 'error',

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

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::0a2d88c9772eb438048415f13550f592>>
+ * @codegen <<SignedSource::0a2813f0b87e94d23e1f6fc388539c70>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 import consistentCssPropUsage from './consistent-css-prop-usage';
@@ -17,9 +17,11 @@ 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 noKeyframesTaggedTemplateExpression from './no-keyframes-tagged-template-expression';
 import noMargin from './no-margin';
 import noNestedStyles from './no-nested-styles';
 import noPhysicalProperties from './no-physical-properties';
+import noStyledTaggedTemplateExpression from './no-styled-tagged-template-expression';
 import noUnsafeDesignTokenUsage from './no-unsafe-design-token-usage';
 import noUnsafeStyleOverrides from './no-unsafe-style-overrides';
 import noUnsupportedDragAndDropLibraries from './no-unsupported-drag-and-drop-libraries';
@@ -45,9 +47,11 @@ export default {
   'no-exported-css': noExportedCss,
   'no-exported-keyframes': noExportedKeyframes,
   'no-invalid-css-map': noInvalidCssMap,
+  'no-keyframes-tagged-template-expression': noKeyframesTaggedTemplateExpression,
   'no-margin': noMargin,
   'no-nested-styles': noNestedStyles,
   'no-physical-properties': noPhysicalProperties,
+  'no-styled-tagged-template-expression': noStyledTaggedTemplateExpression,
   'no-unsafe-design-token-usage': noUnsafeDesignTokenUsage,
   'no-unsafe-style-overrides': noUnsafeStyleOverrides,
   'no-unsupported-drag-and-drop-libraries': noUnsupportedDragAndDropLibraries,

package/dist/esm/rules/no-css-tagged-template-expression/index.js

@@ -1,6 +1,6 @@
+import { createNoTaggedTemplateExpressionRule, noTaggedTemplateExpressionRuleSchema } from '../utils/create-no-tagged-template-expression-rule';
 import { createLintRule } from '../utils/create-rule';
 import { isCss } from '../utils/is-supported-import';
-import { createNoTaggedTemplateExpressionRule } from './create-no-tagged-template-expression-rule';
 var rule = createLintRule({
   meta: {
     name: 'no-css-tagged-template-expression',
@@ -13,7 +13,8 @@ var rule = createLintRule({
     },
     messages: {
       unexpectedTaggedTemplate: 'Unexpected `css` tagged template expression'
-    }
+    },
+    schema: noTaggedTemplateExpressionRuleSchema
   },
   create: createNoTaggedTemplateExpressionRule(isCss, 'unexpectedTaggedTemplate')
 });

package/dist/esm/rules/no-keyframes-tagged-template-expression/index.js

@@ -0,0 +1,21 @@
+import { createNoTaggedTemplateExpressionRule, noTaggedTemplateExpressionRuleSchema } from '../utils/create-no-tagged-template-expression-rule';
+import { createLintRule } from '../utils/create-rule';
+import { isKeyframes } from '../utils/is-supported-import';
+var rule = createLintRule({
+  meta: {
+    name: 'no-keyframes-tagged-template-expression',
+    fixable: 'code',
+    type: 'problem',
+    docs: {
+      description: 'Disallows any `keyframe` tagged template expressions that originate from Emotion, Styled Components or Compiled',
+      recommended: false,
+      severity: 'error'
+    },
+    messages: {
+      unexpectedTaggedTemplate: 'Unexpected `keyframes` tagged template expression'
+    },
+    schema: noTaggedTemplateExpressionRuleSchema
+  },
+  create: createNoTaggedTemplateExpressionRule(isKeyframes, 'unexpectedTaggedTemplate')
+});
+export default rule;

package/dist/esm/rules/no-styled-tagged-template-expression/index.js

@@ -0,0 +1,21 @@
+import { createNoTaggedTemplateExpressionRule, noTaggedTemplateExpressionRuleSchema } from '../utils/create-no-tagged-template-expression-rule';
+import { createLintRule } from '../utils/create-rule';
+import { isStyled } from './is-styled';
+var rule = createLintRule({
+  meta: {
+    name: 'no-styled-tagged-template-expression',
+    fixable: 'code',
+    type: 'problem',
+    docs: {
+      description: 'Disallows any `styled` tagged template expressions that originate from Emotion, Styled Components or Compiled',
+      recommended: false,
+      severity: 'error'
+    },
+    messages: {
+      unexpectedTaggedTemplate: 'Unexpected `styled` tagged template expression'
+    },
+    schema: noTaggedTemplateExpressionRuleSchema
+  },
+  create: createNoTaggedTemplateExpressionRule(isStyled, 'unexpectedTaggedTemplate')
+});
+export default rule;

package/dist/esm/rules/no-styled-tagged-template-expression/is-styled.js

@@ -0,0 +1,47 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+
+import { CSS_IN_JS_IMPORTS } from '../utils/is-supported-import';
+var functionName = 'styled';
+var checkDefinitionHasImport = function checkDefinitionHasImport(def, importSources) {
+  if (def.type !== 'ImportBinding') {
+    return false;
+  }
+  if (!def.parent || !importSources.includes(def.parent.source.value)) {
+    return false;
+  }
+
+  // `@compiled/react` only exposes styled as a named export
+  if (importSources.includes(CSS_IN_JS_IMPORTS.compiled) && def.parent.source.value === CSS_IN_JS_IMPORTS.compiled) {
+    return def.node.type === 'ImportSpecifier' && def.node.imported.name === functionName;
+  }
+
+  // `@emotion/styled` only exposes styled as a default export
+  if (importSources.includes(CSS_IN_JS_IMPORTS.emotionStyled) && def.parent.source.value === CSS_IN_JS_IMPORTS.emotionStyled) {
+    return def.node.type === 'ImportDefaultSpecifier';
+  }
+
+  // `styled-components` only exposes styled as a default export
+  if (importSources.includes(CSS_IN_JS_IMPORTS.styledComponents) && def.parent.source.value === CSS_IN_JS_IMPORTS.styledComponents) {
+    return def.node.type === 'ImportDefaultSpecifier';
+  }
+  return false;
+};
+export var isStyled = function isStyled(nodeToCheck, referencesInScope, importSources) {
+  var nodeIdentifier = null;
+
+  // Handles styled.div`` case
+  if (nodeToCheck.type === 'MemberExpression' && nodeToCheck.object.type === 'Identifier') {
+    nodeIdentifier = nodeToCheck.object;
+  }
+
+  // Handles styled(Base)`` case
+  if (nodeToCheck.type === 'CallExpression' && nodeToCheck.callee.type === 'Identifier') {
+    nodeIdentifier = nodeToCheck.callee;
+  }
+  return referencesInScope.some(function (reference) {
+    var _reference$resolved;
+    return reference.identifier === nodeIdentifier && ((_reference$resolved = reference.resolved) === null || _reference$resolved === void 0 ? void 0 : _reference$resolved.defs.some(function (def) {
+      return checkDefinitionHasImport(def, importSources);
+    }));
+  });
+};

package/dist/esm/rules/use-primitives/transformers/css-to-xcss.js

@@ -1,4 +1,7 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { getIdentifierInParentScope, identifier, isNodeOfType, literal } from 'eslint-codemod-utils';
 import { getAttributeValueIdentifier, getFunctionArgumentAtPos, getJSXAttributeByName, getVariableDefinitionValue } from '../utils';
 export var cssToXcssTransformer = function cssToXcssTransformer(node, context, fixer) {
@@ -83,7 +86,18 @@ export var spaceTokenMap = {
   '64px': 'space.800',
   '80px': 'space.1000'
 };
-export var supportedStylesMap = {
+export var dimensionsMap = {
+  '100%': '100%'
+};
+export var supportedDimensionAttributesMap = {
+  width: dimensionsMap,
+  height: dimensionsMap,
+  minWidth: dimensionsMap,
+  minHeight: dimensionsMap,
+  maxWidth: dimensionsMap,
+  maxHeight: dimensionsMap
+};
+export var supportedStylesMap = _objectSpread({
   padding: spaceTokenMap,
   paddingBlock: spaceTokenMap,
   paddingBlockEnd: spaceTokenMap,
@@ -106,4 +120,4 @@ export var supportedStylesMap = {
   marginLeft: spaceTokenMap,
   marginRight: spaceTokenMap,
   marginTop: spaceTokenMap
-};
+}, supportedDimensionAttributesMap);

package/dist/esm/rules/use-primitives/utils/is-valid-css-properties-to-transform.js

@@ -3,7 +3,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["unsupported"];
 import { isNodeOfType } from 'eslint-codemod-utils';
 import * as ast from '../../../ast-nodes';
-import { supportedStylesMap } from '../transformers/css-to-xcss';
+import { supportedDimensionAttributesMap, supportedStylesMap } from '../transformers/css-to-xcss';
 import { convertASTObjectExpressionToJSObject } from './convert-ast-object-expression-to-js-object';
 export var isValidCssPropertiesToTransform = function isValidCssPropertiesToTransform(node, config) {
   if (!node) {
@@ -40,6 +40,13 @@ export var isValidCssPropertiesToTransform = function isValidCssPropertiesToTran
     return false;
   }
 
+  // Short-circuit when dimension properties found but pattern is not enabled in config
+  if (!config.patterns.includes('dimension-properties') && Object.keys(cssObject).some(function (attribute) {
+    return supportedDimensionAttributesMap[attribute];
+  })) {
+    return false;
+  }
+
   // NOTE: Our approach with this lint rule is to strictly whitelist css properties we can map.
   // It means we have to provide mappings for everything (e.g. `display: block`).
   // However, from a maker's experience, it's much better that the rule doesn't report (if we miss a mapping)

package/dist/esm/rules/{no-css-tagged-template-expression → utils}/create-no-tagged-template-expression-rule/index.js

@@ -2,18 +2,38 @@ import _regeneratorRuntime from "@babel/runtime/regenerator";
 // Original source from Compiled https://github.com/atlassian-labs/compiled/blob/master/packages/eslint-plugin/src/utils/create-no-tagged-template-expression-rule/index.ts
 // eslint-disable-next-line import/no-extraneous-dependencies
 
-import { CSS_IN_JS_IMPORTS } from '../../utils/is-supported-import';
+import { getImportSources } from '../is-supported-import';
 import { generate } from './generate';
 import { getTaggedTemplateExpressionOffset } from './get-tagged-template-expression-offset';
 import { toArguments } from './to-arguments';
-var IMPORT_SOURCES = [CSS_IN_JS_IMPORTS.compiled, CSS_IN_JS_IMPORTS.emotionReact, CSS_IN_JS_IMPORTS.emotionCore, CSS_IN_JS_IMPORTS.styledComponents];
+export var noTaggedTemplateExpressionRuleSchema = [{
+  type: 'object',
+  properties: {
+    importSources: {
+      type: 'array',
+      items: {
+        type: 'string'
+      },
+      uniqueItems: true
+    }
+  }
+}];
+
+/**
+ * When true, template strings containing multiline comments are completely skipped over.
+ *
+ * When false, multiline comments are stripped out. Ideally we would preserve them,
+ * but it would add a lot of complexity.
+ */
+var shouldSkipMultilineComments = false;
 export var createNoTaggedTemplateExpressionRule = function createNoTaggedTemplateExpressionRule(isUsage, messageId) {
   return function (context) {
+    var importSources = getImportSources(context);
     return {
       TaggedTemplateExpression: function TaggedTemplateExpression(node) {
         var _context$getScope = context.getScope(),
           references = _context$getScope.references;
-        if (!isUsage(node.tag, references, IMPORT_SOURCES)) {
+        if (!isUsage(node.tag, references, importSources)) {
           return;
         }
         context.report({
@@ -27,9 +47,9 @@ export var createNoTaggedTemplateExpressionRule = function createNoTaggedTemplat
                   quasi = node.quasi;
                   source = context.getSourceCode(); // TODO Eventually handle comments instead of skipping them
                   // Skip auto-fixing comments
-                  if (!quasi.quasis.map(function (q) {
+                  if (!(shouldSkipMultilineComments && quasi.quasis.map(function (q) {
                     return q.value.raw;
-                  }).join('').match(/\/\*[\s\S]*\*\//g)) {
+                  }).join('').match(/\/\*[\s\S]*\*\//g))) {
                     _context.next = 4;
                     break;
                   }

package/dist/esm/rules/{no-css-tagged-template-expression → utils}/create-no-tagged-template-expression-rule/to-arguments.js

@@ -49,7 +49,30 @@ var getArguments = function getArguments(chars) {
     }
   }
   var getValue = function getValue() {
-    if (!value.trim().length && expressions.length) {
+    /**
+     * This branch is required for handling interpolated functions:
+     *
+     * css`
+     *   color: ${(props) => props.textColor}
+     * `
+     *
+     * But it also breaks interpolations of multiple tokens:
+     *
+     * css`
+     *   padding: ${token('space.100')} ${token('space.200')}
+     * `
+     *
+     * which becomes invalid syntax:
+     *
+     * css({
+     *   padding: token('space.100')token('space.200')
+     * })
+     *
+     * Limiting this branch to when `expressions.length === 1` seems
+     * to allow both cases to work. There may be other edge cases,
+     * but none were caught by the existing test suite.
+     */
+    if (!value.trim().length && expressions.length === 1) {
       return {
         type: 'expression',
         expression: expressions.map(function (e) {
@@ -177,7 +200,10 @@ export var toArguments = function toArguments(source, template) {
         i = _step4$value[0],
         quasi = _step4$value[1];
       // Deal with selectors across multiple lines
-      var styleTemplateElement = quasi.value.raw.replace(/(\r\n|\n|\r)/gm, ' ').replace(/\s+/g, ' ');
+      var styleTemplateElement = quasi.value.raw.replace(/\/\*(.|\n|\r)*?\*\//g, '') // Removes multi-line comments
+      // Remove single line comments
+      // Negative lookbehind to handle URL-like double slashes
+      .replace(/(?<!https?:)\/\/.*$/gm, '').replace(/(\r\n|\n|\r)/gm, ' ').replace(/\s+/g, ' ');
       var _iterator5 = _createForOfIteratorHelper(styleTemplateElement),
         _step5;
       try {

package/dist/esm/rules/utils/create-rule.js

@@ -11,7 +11,7 @@ import { ESLintUtils } from '@typescript-eslint/utils';
  * @deprecated
  */
 export var createRule = ESLintUtils.RuleCreator(function (name) {
-  return "https://atlassian.design/components/eslint-plugin-design-system/usage#".concat(name);
+  return getRuleUrl(name);
 });
 /**
  * Tiny wrapped over the ESLint rule module type that ensures
@@ -19,8 +19,10 @@ export var createRule = ESLintUtils.RuleCreator(function (name) {
  * as well as improving type support.
  */
 export var createLintRule = function createLintRule(rule) {
-  var ruleName = rule.meta.name.replace('/', ''); // If it's a nested rule, ensure the url is clean
-  var url = "https://atlassian.design/components/eslint-plugin-design-system/usage#".concat(ruleName);
-  rule.meta.docs.url = url;
+  rule.meta.docs.url = getRuleUrl(rule.meta.name);
   return rule;
-};
+};
+function getRuleUrl(ruleName) {
+  var name = ruleName.replace('/', '-'); // If it's a nested rule, ensure the url is clean and matches codegen/gatsby
+  return "https://atlassian.design/components/eslint-plugin-design-system/".concat(name, "/usage");
+}

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

@@ -1,10 +1,10 @@
-import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 // eslint-disable-next-line import/no-extraneous-dependencies
 
 export var CSS_IN_JS_IMPORTS = {
   compiled: '@compiled/react',
   emotionReact: '@emotion/react',
   emotionCore: '@emotion/core',
+  emotionStyled: '@emotion/styled',
   styledComponents: 'styled-components',
   atlaskitCss: '@atlaskit/css',
   atlaskitPrimitives: '@atlaskit/primitives'
@@ -12,16 +12,14 @@ export var CSS_IN_JS_IMPORTS = {
 
 // 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.
-export var DEFAULT_IMPORT_SOURCES = [CSS_IN_JS_IMPORTS.compiled, CSS_IN_JS_IMPORTS.atlaskitCss];
+/**
+ * By default all known import sources are checked against.
+ */
+export var DEFAULT_IMPORT_SOURCES = Object.values(CSS_IN_JS_IMPORTS);
 
 /**
  * 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.
+ * The importSources option is used to override which libraries an ESLint rule applies to.
  *
  * @param context The rule context.
  * @returns An array of strings representing what CSS-in-JS packages that should be checked, based
@@ -33,7 +31,7 @@ export var getImportSources = function getImportSources(context) {
     return DEFAULT_IMPORT_SOURCES;
   }
   if (options[0].importSources && Array.isArray(options[0].importSources)) {
-    return [].concat(DEFAULT_IMPORT_SOURCES, _toConsumableArray(options[0].importSources));
+    return options[0].importSources;
   }
   return DEFAULT_IMPORT_SOURCES;
 };

package/dist/types/index.codegen.d.ts

@@ -17,9 +17,11 @@ export declare const configs: {
             '@atlaskit/design-system/no-exported-css': string;
             '@atlaskit/design-system/no-exported-keyframes': string;
             '@atlaskit/design-system/no-invalid-css-map': string;
+            '@atlaskit/design-system/no-keyframes-tagged-template-expression': string;
             '@atlaskit/design-system/no-margin': string;
             '@atlaskit/design-system/no-nested-styles': string;
             '@atlaskit/design-system/no-physical-properties': string;
+            '@atlaskit/design-system/no-styled-tagged-template-expression': string;
             '@atlaskit/design-system/no-unsafe-design-token-usage': string;
             '@atlaskit/design-system/no-unsafe-style-overrides': string;
             '@atlaskit/design-system/no-unsupported-drag-and-drop-libraries': string;

package/dist/types/presets/all.codegen.d.ts

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::914085544778f4543f43e3e30d0982e0>>
+ * @codegen <<SignedSource::5647ce9c10ba880cffece66b5924fd6e>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 declare const _default: {
@@ -20,9 +20,11 @@ declare const _default: {
         '@atlaskit/design-system/no-exported-css': string;
         '@atlaskit/design-system/no-exported-keyframes': string;
         '@atlaskit/design-system/no-invalid-css-map': string;
+        '@atlaskit/design-system/no-keyframes-tagged-template-expression': string;
         '@atlaskit/design-system/no-margin': string;
         '@atlaskit/design-system/no-nested-styles': string;
         '@atlaskit/design-system/no-physical-properties': string;
+        '@atlaskit/design-system/no-styled-tagged-template-expression': string;
         '@atlaskit/design-system/no-unsafe-design-token-usage': string;
         '@atlaskit/design-system/no-unsafe-style-overrides': string;
         '@atlaskit/design-system/no-unsupported-drag-and-drop-libraries': string;

package/dist/types/rules/index.codegen.d.ts

@@ -17,9 +17,11 @@ declare const _default: {
     'no-exported-css': import("eslint").Rule.RuleModule;
     'no-exported-keyframes': import("eslint").Rule.RuleModule;
     'no-invalid-css-map': import("eslint").Rule.RuleModule;
+    'no-keyframes-tagged-template-expression': import("eslint").Rule.RuleModule;
     'no-margin': import("eslint").Rule.RuleModule;
     'no-nested-styles': import("eslint").Rule.RuleModule;
     'no-physical-properties': import("eslint").Rule.RuleModule;
+    'no-styled-tagged-template-expression': import("eslint").Rule.RuleModule;
     'no-unsafe-design-token-usage': import("eslint").Rule.RuleModule;
     'no-unsafe-style-overrides': import("eslint").Rule.RuleModule;
     'no-unsupported-drag-and-drop-libraries': import("eslint").Rule.RuleModule;

package/dist/types/rules/no-keyframes-tagged-template-expression/index.d.ts

@@ -0,0 +1,2 @@
+declare const rule: import("eslint").Rule.RuleModule;
+export default rule;

package/dist/types/rules/no-styled-tagged-template-expression/index.d.ts

@@ -0,0 +1,2 @@
+declare const rule: import("eslint").Rule.RuleModule;
+export default rule;

package/dist/types/rules/no-styled-tagged-template-expression/is-styled.d.ts

@@ -0,0 +1,7 @@
+import type { Scope } from 'eslint';
+import type { CallExpression } from 'estree';
+import { ImportSource } from '../utils/is-supported-import';
+type Callee = CallExpression['callee'];
+type Reference = Scope.Reference;
+export declare const isStyled: (nodeToCheck: Callee, referencesInScope: Reference[], importSources: ImportSource[]) => boolean;
+export {};