@atlaskit/eslint-plugin-design-system 14.2.0 → 14.3.0

package/dist/es2019/rules/use-primitives-text/transformers/update-test-id-attribute-fix.js

@@ -1,5 +1,5 @@
 import { JSXAttribute } from '../../../ast-nodes/jsx-attribute';
-import { JSXElement as JSXElementHelper } from '../../../ast-nodes/jsx-element';
+import { JSXElementHelper } from '../../../ast-nodes/jsx-element-helper';
 
 // Rename data-testid prop to testId if present
 export function updateTestIdAttributeFix(node, fixer) {

package/dist/es2019/rules/use-should-render-to-parent/add-prop.js

@@ -0,0 +1,3 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+const PROP_NAME = 'shouldRenderToParent';
+export const addProp = `Add \`${PROP_NAME}\` prop.`;

package/dist/es2019/rules/use-should-render-to-parent/index.js

@@ -1,12 +1,12 @@
 // eslint-disable-next-line import/no-extraneous-dependencies
 
 import { isNodeOfType } from 'eslint-codemod-utils';
-import { createLintRule } from '../utils/create-rule';
+import { createLintRule } from '../utils/create-lint-rule';
+import { addProp } from './add-prop';
+import { setPropToTrue } from './set-prop-to-true';
 export const RULE_NAME = 'use-should-render-to-parent';
 const PROP_NAME = 'shouldRenderToParent';
 const message = `Setting the \`${PROP_NAME}\` prop to anything other than \`true\` causes accessibility issues. Only set to \`false\` as a last resort.`;
-export const addProp = `Add \`${PROP_NAME}\` prop.`;
-export const setPropToTrue = `Set \`${PROP_NAME}\` prop to \`true\`.`;
 const components = {
   '@atlaskit/popup': {
     default: true,
@@ -117,4 +117,6 @@ const rule = createLintRule({
     };
   }
 });
-export default rule;
+export default rule;
+export { addProp } from './add-prop';
+export { setPropToTrue } from './set-prop-to-true';

package/dist/es2019/rules/use-should-render-to-parent/set-prop-to-true.js

@@ -0,0 +1,3 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+const PROP_NAME = 'shouldRenderToParent';
+export const setPropToTrue = `Set \`${PROP_NAME}\` prop to \`true\`.`;

package/dist/es2019/rules/use-simple-field/index.js

@@ -1,5 +1,5 @@
 import { isNodeOfType } from 'eslint-codemod-utils';
-import { createLintRule } from '../utils/create-rule';
+import { createLintRule } from '../utils/create-lint-rule';
 const FORM_PACKAGE = '@atlaskit/form';
 const MESSAGE_COMPONENTS = ['ErrorMessage', 'HelperMessage', 'ValidMessage'];
 export const convertField = 'Convert field to simple field';

package/dist/es2019/rules/use-simple-form/index.js

@@ -1,7 +1,7 @@
 import { isNodeOfType } from 'eslint-codemod-utils';
-import { createLintRule } from '../utils/create-rule';
+import { createLintRule } from '../utils/create-lint-rule';
+import { topLevelAttributeNames } from './top-level-attribute-names';
 const FORM_PACKAGE = '@atlaskit/form';
-export const topLevelAttributeNames = ['autocomplete', 'id', 'label', 'labelId', 'onKeyDown', 'onSubmit', 'name', 'noValidate', 'ref', 'xcss'];
 export const convertForm = 'Convert form to simple form';
 const rule = createLintRule({
   meta: {
@@ -147,4 +147,5 @@ const rule = createLintRule({
     };
   }
 });
-export default rule;
+export default rule;
+export { topLevelAttributeNames } from './top-level-attribute-names';

package/dist/es2019/rules/use-simple-form/top-level-attribute-names.js

@@ -0,0 +1 @@
+export const topLevelAttributeNames = ['autocomplete', 'id', 'label', 'labelId', 'onKeyDown', 'onSubmit', 'name', 'noValidate', 'ref', 'xcss'];

package/dist/es2019/rules/use-spotlight-package/index.js

@@ -1,4 +1,4 @@
-import { createLintRule } from '../utils/create-rule';
+import { createLintRule } from '../utils/create-lint-rule';
 import { ImportDeclaration } from './linters/import-declaration';
 const rule = createLintRule({
   meta: {

package/dist/es2019/rules/use-tag-group-label/index.js

@@ -1,5 +1,5 @@
 import { isNodeOfType } from 'eslint-codemod-utils';
-import { createLintRule } from '../utils/create-rule';
+import { createLintRule } from '../utils/create-lint-rule';
 const elementsAccessibleNameProps = ['label', 'titleId'];
 const rule = createLintRule({
   meta: {

package/dist/es2019/rules/use-textfield-autocomplete/index.js

@@ -1,7 +1,7 @@
 import { isNodeOfType } from 'eslint-codemod-utils';
 import { JSXAttribute } from '../../ast-nodes/jsx-attribute';
-import { JSXElementHelper } from '../../ast-nodes/jsx-element';
-import { createLintRule } from '../utils/create-rule';
+import { JSXElementHelper } from '../../ast-nodes/jsx-element-helper';
+import { createLintRule } from '../utils/create-lint-rule';
 const TEXTFIELD_PACKAGE = '@atlaskit/textfield';
 const TYPE_PROP = 'type';
 const AUTOCOMPLETE_PROP = 'autoComplete';

package/dist/es2019/rules/use-tokens-shape/index.js

@@ -1,4 +1,4 @@
-import { createLintRule } from '../utils/create-rule';
+import { createLintRule } from '../utils/create-lint-rule';
 import { StyleProperty } from './transformers';
 const rule = createLintRule({
   meta: {

package/dist/es2019/rules/use-tokens-space/index.js

@@ -1,4 +1,4 @@
-import { createLintRule } from '../utils/create-rule';
+import { createLintRule } from '../utils/create-lint-rule';
 import { StyleProperty } from './transformers/style-property';
 const rule = createLintRule({
   meta: {

package/dist/es2019/rules/use-tokens-typography/config/get-config.js

@@ -0,0 +1,10 @@
+/* eslint-disable @atlassian/tangerine/import/entry-points */
+
+const defaultConfig = {
+  failSilently: false,
+  enableUnsafeAutofix: false,
+  patterns: ['style-object', 'font-weight', 'font-family', 'untokenized-properties', 'banned-properties', 'restricted-capitalisation']
+};
+export const getConfig = overrides => {
+  return Object.assign({}, defaultConfig, overrides);
+};

package/dist/es2019/rules/use-tokens-typography/config/{index.js → rule-schema.js}

@@ -20,12 +20,4 @@ export const ruleSchema = {
       }
     }
   }
-};
-const defaultConfig = {
-  failSilently: false,
-  enableUnsafeAutofix: false,
-  patterns: ['style-object', 'font-weight', 'font-family', 'untokenized-properties', 'banned-properties', 'restricted-capitalisation']
-};
-export const getConfig = overrides => {
-  return Object.assign({}, defaultConfig, overrides);
 };

package/dist/es2019/rules/use-tokens-typography/default-font-weight.js

@@ -0,0 +1,2 @@
+import { fontWeightMap } from './font-weight-map';
+export const defaultFontWeight = fontWeightMap.regular;

package/dist/es2019/rules/use-tokens-typography/find-font-weight-token-for-value.js

@@ -0,0 +1,12 @@
+import { fontWeightTokens } from './font-weight-tokens';
+export function findFontWeightTokenForValue(fontWeight, tokens = fontWeightTokens) {
+  if (fontWeight === 'normal') {
+    fontWeight = '400';
+  }
+
+  // Match bold and 700 to 653 to match with bold weight refreshed typography
+  if (fontWeight === 'bold' || fontWeight === '700') {
+    fontWeight = '653';
+  }
+  return tokens.find(token => token.values.fontWeight === fontWeight);
+}

package/dist/es2019/rules/use-tokens-typography/find-typography-token-for-values.js

@@ -0,0 +1,11 @@
+import { typographyValueToToken } from './typography-value-to-token';
+export function findTypographyTokenForValues(fontSize, lineHeight) {
+  // Match 11px to 12px as this is what happened when transitioning from legacy to refreshed typography
+  if (fontSize === '11px') {
+    fontSize = '12px';
+  }
+  let matchingTokens = typographyValueToToken.filter(token => token.values.fontSize === fontSize)
+  // If lineHeight == 1, we don't match to a token
+  .filter(() => lineHeight === '1' ? false : true);
+  return matchingTokens;
+}

package/dist/es2019/rules/use-tokens-typography/font-weight-map.js

@@ -0,0 +1,6 @@
+export const fontWeightMap = {
+  regular: '400',
+  medium: '500',
+  semibold: '600',
+  bold: '700'
+};

package/dist/es2019/rules/use-tokens-typography/font-weight-tokens.js

@@ -0,0 +1,10 @@
+import { typography as typographyTokens } from '@atlaskit/tokens/tokens-raw';
+export const fontWeightTokens = typographyTokens.filter(token => token.attributes.group === 'fontWeight').map(token => {
+  return {
+    tokenName: token.cleanName,
+    tokenValue: token.value,
+    values: {
+      fontWeight: token.value
+    }
+  };
+});

package/dist/es2019/rules/use-tokens-typography/get-token-property.js

@@ -0,0 +1,33 @@
+import { callExpression, identifier, literal, memberExpression, property } from 'eslint-codemod-utils';
+function createMemberExpressionFromArray(array) {
+  if (array.length === 1) {
+    return identifier(array[0]);
+  }
+  const property = array.pop();
+  return memberExpression({
+    object: createMemberExpressionFromArray(array),
+    property: identifier(property)
+  });
+}
+function getTokenNode(tokenName, fallbackValue, isFallbackMember = false) {
+  const callExpressionArgs = [literal({
+    value: `'${tokenName}'`
+  })];
+  if (fallbackValue) {
+    const fallback = isFallbackMember ? createMemberExpressionFromArray(fallbackValue.split('.')) : literal(fallbackValue);
+    callExpressionArgs.push(fallback);
+  }
+  return callExpression({
+    callee: identifier({
+      name: 'token'
+    }),
+    arguments: callExpressionArgs,
+    optional: false
+  });
+}
+export function getTokenProperty(propertyName, tokenName, tokenFallback, isFallbackMember = false) {
+  return property({
+    key: identifier(propertyName),
+    value: getTokenNode(tokenName, tokenFallback, isFallbackMember)
+  });
+}

package/dist/es2019/rules/use-tokens-typography/index.js

@@ -1,6 +1,7 @@
-import { createLintRule } from '../utils/create-rule';
+import { createLintRule } from '../utils/create-lint-rule';
 import { errorBoundary } from '../utils/error-boundary';
-import { getConfig, ruleSchema } from './config';
+import { getConfig } from './config/get-config';
+import { ruleSchema } from './config/rule-schema';
 import { BannedProperties } from './transformers/banned-properties';
 import { FontFamily } from './transformers/font-family';
 import { FontWeight } from './transformers/font-weight';

package/dist/es2019/rules/use-tokens-typography/transformers/banned-properties.js

@@ -1,8 +1,8 @@
 /* eslint-disable @repo/internal/react/require-jsdoc */
 
 import { isNodeOfType } from 'eslint-codemod-utils';
+import { isDecendantOfStyleBlock } from '../../utils/is-decendant-of-style-block';
 import { isDecendantOfType } from '../../utils/is-decendant-of-type';
-import { isDecendantOfStyleBlock } from '../../utils/is-node';
 export const BannedProperties = {
   lint(node, {
     context,

package/dist/es2019/rules/use-tokens-typography/transformers/font-family.js

@@ -4,8 +4,8 @@ import { isNodeOfType } from 'eslint-codemod-utils';
 import { getSourceCode } from '@atlaskit/eslint-utils/context-compat';
 import { Root } from '../../../ast-nodes/root';
 import { getNodeSource } from '../../utils/get-node-source';
+import { isDecendantOfStyleBlock } from '../../utils/is-decendant-of-style-block';
 import { isDecendantOfType } from '../../utils/is-decendant-of-type';
-import { isDecendantOfStyleBlock } from '../../utils/is-node';
 import { findFontFamilyTokenForValue } from '../find-font-family-token-for-value';
 import { insertTokensImport } from '../insert-tokens-import';
 export const FontFamily = {

package/dist/es2019/rules/use-tokens-typography/transformers/font-weight.js

@@ -4,10 +4,10 @@ import { isNodeOfType } from 'eslint-codemod-utils';
 import { getSourceCode } from '@atlaskit/eslint-utils/context-compat';
 import { Root } from '../../../ast-nodes/root';
 import { getNodeSource } from '../../utils/get-node-source';
+import { isDecendantOfStyleBlock } from '../../utils/is-decendant-of-style-block';
 import { isDecendantOfType } from '../../utils/is-decendant-of-type';
-import { isDecendantOfStyleBlock } from '../../utils/is-node';
+import { findFontWeightTokenForValue } from '../find-font-weight-token-for-value';
 import { insertTokensImport } from '../insert-tokens-import';
-import { findFontWeightTokenForValue } from '../utils';
 export const FontWeight = {
   lint(node, {
     context,

package/dist/es2019/rules/use-tokens-typography/transformers/style-object.js

@@ -5,18 +5,22 @@ import { getSourceCode } from '@atlaskit/eslint-utils/context-compat';
 import { Object as ASTObject } from '../../../ast-nodes/object';
 import { ObjectEntry } from '../../../ast-nodes/object-entry';
 import { Root } from '../../../ast-nodes/root';
+import { getValueForPropertyNode } from '../../ensure-design-token-usage/get-value-for-property-node';
 import { normaliseValue } from '../../ensure-design-token-usage/normalise-value';
-import { getValueForPropertyNode } from '../../ensure-design-token-usage/utils';
 import { isDecendantOfGlobalToken } from '../../utils/is-decendant-of-global-token';
+import { isDecendantOfStyleBlock } from '../../utils/is-decendant-of-style-block';
 import { isDecendantOfType } from '../../utils/is-decendant-of-type';
-import { isDecendantOfStyleBlock } from '../../utils/is-node';
 import { convertPropertyNodeToStringableNode } from '../convert-property-node-to-stringable-node';
+import { defaultFontWeight } from '../default-font-weight';
+import { findFontWeightTokenForValue } from '../find-font-weight-token-for-value';
+import { findTypographyTokenForValues } from '../find-typography-token-for-values';
+import { fontWeightMap } from '../font-weight-map';
 import { getLiteralProperty } from '../get-literal-property';
+import { getTokenProperty } from '../get-token-property';
 import { insertTokensImport } from '../insert-tokens-import';
 import { isValidPropertyNode } from '../is-valid-property-node';
 import { isValidTypographyToken } from '../is-valid-typography-token';
 import { notUndefined } from '../not-undefined';
-import { defaultFontWeight, findFontWeightTokenForValue, findTypographyTokenForValues, fontWeightMap, getTokenProperty } from '../utils';
 export const StyleObject = {
   lint(node, {
     context,

package/dist/es2019/rules/use-tokens-typography/transformers/untokenized-properties.js

@@ -3,8 +3,8 @@
 import { isNodeOfType } from 'eslint-codemod-utils';
 import { getSourceCode } from '@atlaskit/eslint-utils/context-compat';
 import { getNodeSource } from '../../utils/get-node-source';
+import { isDecendantOfStyleBlock } from '../../utils/is-decendant-of-style-block';
 import { isDecendantOfType } from '../../utils/is-decendant-of-type';
-import { isDecendantOfStyleBlock } from '../../utils/is-node';
 export const UntokenizedProperties = {
   lint(node, {
     context,

package/dist/es2019/rules/use-tokens-typography/typography-value-to-token.js

@@ -0,0 +1,25 @@
+import { typographyPalette } from '@atlaskit/tokens/palettes-raw';
+import { typography as typographyTokens } from '@atlaskit/tokens/tokens-raw';
+export const typographyValueToToken = typographyTokens
+// we're filtering here to remove the `font` tokens.
+.filter(t => t.attributes.group === 'typography').filter(t => t.cleanName.includes('font.heading') || t.cleanName.includes('font.body'))
+// Filtering out UNSAFE tokens that were meant for migrations, these tokens are deprecated and will be removed in the future
+.filter(t => !t.cleanName.includes('UNSAFE')).map(currentToken => {
+  var _typographyPalette$fi, _typographyPalette$fi2, _typographyPalette$fi3;
+  const individualValues = {
+    fontSize: (_typographyPalette$fi = typographyPalette.find(baseToken => baseToken.path.slice(-1)[0] ===
+    // @ts-expect-error token.original.value can be a string, due to the typographyTokens export including deprecated tokens
+    currentToken.original.value.fontSize)) === null || _typographyPalette$fi === void 0 ? void 0 : _typographyPalette$fi.value,
+    fontWeight: (_typographyPalette$fi2 = typographyPalette.find(baseToken => baseToken.path.slice(-1)[0] ===
+    // @ts-expect-error token.original.value can be a string, due to the typographyTokens export including deprecated tokens
+    currentToken.original.value.fontWeight)) === null || _typographyPalette$fi2 === void 0 ? void 0 : _typographyPalette$fi2.value,
+    lineHeight: (_typographyPalette$fi3 = typographyPalette.find(baseToken => baseToken.path.slice(-1)[0] ===
+    // @ts-expect-error token.original.value can be a string, due to the typographyTokens export including deprecated tokens
+    currentToken.original.value.lineHeight)) === null || _typographyPalette$fi3 === void 0 ? void 0 : _typographyPalette$fi3.value
+  };
+  return {
+    tokenName: currentToken.cleanName,
+    tokenValue: currentToken.value,
+    values: individualValues
+  };
+});

package/dist/es2019/rules/use-visually-hidden/count-matching-key-values.js

@@ -0,0 +1,19 @@
+const referenceObject = {
+  width: '1px',
+  height: '1px',
+  padding: '0',
+  position: 'absolute',
+  border: '0',
+  clip: 'rect(1px, 1px, 1px, 1px)',
+  overflow: 'hidden',
+  whiteSpace: 'nowrap'
+};
+export const countMatchingKeyValues = styleEntries => {
+  const matchingStyleEntries = styleEntries.filter(entry => {
+    return entry.key in referenceObject;
+  });
+  if (styleEntries.length < 5) {
+    return 0;
+  }
+  return matchingStyleEntries.reduce((acc, curr) => acc + (referenceObject[curr === null || curr === void 0 ? void 0 : curr.key] === (curr === null || curr === void 0 ? void 0 : curr.value) ? 1.5 : 0.75), 0) / styleEntries.length;
+};

package/dist/es2019/rules/use-visually-hidden/get-object-likeness.js

@@ -0,0 +1,24 @@
+import { isNodeOfType } from 'eslint-codemod-utils';
+import { countMatchingKeyValues } from './count-matching-key-values';
+/**
+ * Given a node, translate the node into css key-value pairs and
+ * compare the output to the reference styles required to make a
+ * visually hidden element.
+ *
+ * @returns {number} A fraction between 0-1 depending on the object's likeness.
+ */
+export const getObjectLikeness = node => {
+  const styleEntries = node.properties.filter(node => isNodeOfType(node, 'Property')).map(({
+    key,
+    value
+  }) => {
+    if (key.type === 'Identifier') {
+      return {
+        key: key.name,
+        value: value.type === 'Literal' && value.value
+      };
+    }
+    return null;
+  }).filter(node => Boolean(node));
+  return countMatchingKeyValues(styleEntries);
+};

package/dist/es2019/rules/use-visually-hidden/index.js

@@ -1,12 +1,13 @@
 import { closestOfType, hasImportDeclaration, isNodeOfType } from 'eslint-codemod-utils';
 import { getDeclaredVariables, getSourceCode } from '@atlaskit/eslint-utils/context-compat';
-import { createLintRule } from '../utils/create-rule';
+import { createLintRule } from '../utils/create-lint-rule';
+import { isCssInJsObjectNode } from '../utils/is-css-in-js-object-node';
 import { isCssInJsTemplateNode } from '../utils/is-css-in-js-template-node';
-import { isCssInJsObjectNode } from '../utils/is-node';
+import { countMatchingKeyValues } from './count-matching-key-values';
 import fixJsx from './fix-jsx';
 import fixVanilla from './fix-vanilla';
+import { getObjectLikeness } from './get-object-likeness';
 import { makeTemplateLiteralIntoEntries } from './make-template-literal-into-entries';
-import { countMatchingKeyValues, getObjectLikeness } from './utils';
 const THEME_IMPORT_NAMES = ['visuallyHidden', 'assistive'];
 const rule = createLintRule({
   meta: {

package/dist/es2019/rules/use-visually-hidden/reference-object.js

@@ -0,0 +1,10 @@
+export const referenceObject = {
+  width: '1px',
+  height: '1px',
+  padding: '0',
+  position: 'absolute',
+  border: '0',
+  clip: 'rect(1px, 1px, 1px, 1px)',
+  overflow: 'hidden',
+  whiteSpace: 'nowrap'
+};

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

@@ -0,0 +1,9 @@
+import { getCreateLintRule } from '@atlaskit/eslint-utils/create-rule';
+import { getRuleUrl } from './get-rule-url';
+
+/**
+ * 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 = getCreateLintRule(getRuleUrl);

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

@@ -0,0 +1,145 @@
+// 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
+
+import esquery from 'esquery';
+import { getScope, getSourceCode } from '@atlaskit/eslint-utils/context-compat';
+import { getImportSources, isEmotion } from '@atlaskit/eslint-utils/is-supported-import';
+import { generate } from './generate';
+import { getTaggedTemplateExpressionOffset } from './get-tagged-template-expression-offset';
+import { toArguments } from './to-arguments';
+const shouldSkipMultilineComments = false;
+function hasNestedSelectorWithMultipleArguments(arg) {
+  if (arg.type === 'literal' || arg.type === 'expression' || arg.type === 'declaration') {
+    return false;
+  }
+  if (arg.type === 'rule' && arg.declarations.length > 1) {
+    return true;
+  }
+  if (arg.type === 'block') {
+    return arg.blocks.some(hasNestedSelectorWithMultipleArguments);
+  }
+  if (arg.type === 'rule') {
+    return arg.declarations.some(hasNestedSelectorWithMultipleArguments);
+  }
+}
+export const createNoTaggedTemplateExpressionRule = (isUsage, messageId) => context => {
+  const importSources = getImportSources(context);
+  return {
+    TaggedTemplateExpression(node) {
+      const {
+        references
+      } = getScope(context, node);
+      if (!isUsage(node.tag, references, importSources)) {
+        return;
+      }
+      context.report({
+        messageId,
+        node,
+        *fix(fixer) {
+          const {
+            quasi
+          } = node;
+          const source = getSourceCode(context);
+
+          // 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;
+          }
+          const matches = esquery(node, 'ArrowFunctionExpression > BlockStatement');
+          if (matches.length) {
+            return;
+          }
+          if (!quasi.expressions.length && quasi.quasis.length === 1 && !quasi.quasis[0].value.raw.trim()) {
+            // Replace empty tagged template expression with the equivalent object call expression
+            yield fixer.replaceText(quasi, '({})');
+            return;
+          }
+          const args = toArguments(source, quasi);
+          if (args.some(hasNestedSelectorWithMultipleArguments)) {
+            /**
+             * We don't want to autofix if we would produce an array value, for example:
+             * ```
+             * styled.div({
+             *  ':hover': [
+             *    mixin,
+             *    {
+             *      color: 'red'
+             *    }
+             *  ]
+             * })
+             * ```
+             *
+             * This should only occur if there is a mixin in a nested selector.
+             *
+             * The array syntax is only supported by emotion.
+             */
+            return;
+          }
+
+          // 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;
+          }
+
+          // For styles like `position: initial !important`,
+          // Emotion can give typechecking errors when using object syntax
+          // due to csstype being overly strict
+          const usesEmotion = isEmotion(node.tag, references, importSources);
+          if (usesEmotion && !!newCode.match(/!\s*important/gm)) {
+            return;
+          }
+          if (/\$\{.*:/.test(newCode)) {
+            /**
+             * If we find a variable in a property at all, we skip it. There are two reasons:
+             * - `styled-components@3.x` does not support variables in a selector (see the first example).
+             * - We cannot guarantee that the contents of a mixin will ever be valid as a property or selector (which in tagged template expressions don't have to even be called).
+             * - It's not uncommon we just get this parsing wrong altogether…
+             *
+             * // TODO: In this case, we _might_ want to convert this into a suggestion to support manual remediation, some of those code isn't bad, or it can be manually made safe…
+             *
+             * @examples
+             * ```tsx
+             * const Component = styled.div`
+             *   & + ${Button} { color: red; }
+             * `;
+             * ```
+             *
+             * ```tsx
+             * const Component = styled.div`
+             *   ${mixin()} button { color: red; }
+             *   ${mixin} button { color: red; }
+             * `;
+             * ```
+             *
+             * ```tsx
+             * const styles = `&:active { color: blue; }`;
+             * const Component = styled.div`
+             *   ${styles} &:hover {
+             *     color: red;
+             *   }
+             * `;
+             * ```
+             */
+            return;
+          }
+          yield fixer.insertTextBefore(node, newCode);
+          yield fixer.remove(node);
+        }
+      });
+    }
+  };
+};

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

@@ -0,0 +1,14 @@
+// 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
+
+export const noTaggedTemplateExpressionRuleSchema = [{
+  type: 'object',
+  properties: {
+    importSources: {
+      type: 'array',
+      items: {
+        type: 'string'
+      },
+      uniqueItems: true
+    }
+  }
+}];

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

@@ -1,5 +1,5 @@
 import { ESLintUtils } from '@typescript-eslint/utils';
-import { getCreateLintRule, getPathSafeName } from '@atlaskit/eslint-utils/create-rule';
+import { getRuleUrl } from './get-rule-url';
 
 /**
  * We are moving to our own small abstraction to create a lint rule that we have the power
@@ -10,15 +10,4 @@ import { getCreateLintRule, getPathSafeName } from '@atlaskit/eslint-utils/creat
  * @private
  * @deprecated
  */
-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 = getCreateLintRule(getRuleUrl);
-function getRuleUrl(ruleName) {
-  const name = getPathSafeName(ruleName);
-  return `https://atlassian.design/components/eslint-plugin-design-system/${name}/usage`;
-}
+export const createRule = ESLintUtils.RuleCreator(name => getRuleUrl(name));

package/dist/es2019/rules/utils/get-rule-url.js

@@ -0,0 +1,5 @@
+import { getPathSafeName } from '@atlaskit/eslint-utils/create-rule';
+export function getRuleUrl(ruleName) {
+  const name = getPathSafeName(ruleName);
+  return `https://atlassian.design/components/eslint-plugin-design-system/${name}/usage`;
+}

package/dist/es2019/rules/utils/includes-hard-coded-color.js

@@ -0,0 +1,15 @@
+import { namedColors } from './named-colors';
+const includesWholeWord = (value, options) => {
+  const values = value.replace(/[^a-zA-Z ]/g, ' ').trim().split(/(?:,|\.| )+/);
+  return values.some(value => options.has(value));
+};
+export const includesHardCodedColor = raw => {
+  const value = raw.toLowerCase();
+  if (/#(?:[a-f0-9]{3}|[a-f0-9]{6}|[a-f0-9]{8})\b|((?:rgb|hsl)a?|(lch|lab|color))\([^\)]*\)/.exec(value.toLowerCase())) {
+    return true;
+  }
+  if (includesWholeWord(value, namedColors)) {
+    return true;
+  }
+  return false;
+};