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

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::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/es2019/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';
 const rule = createLintRule({
   meta: {
     name: 'no-css-tagged-template-expression',
@@ -13,7 +13,8 @@ const rule = createLintRule({
     },
     messages: {
       unexpectedTaggedTemplate: 'Unexpected `css` tagged template expression'
-    }
+    },
+    schema: noTaggedTemplateExpressionRuleSchema
   },
   create: createNoTaggedTemplateExpressionRule(isCss, 'unexpectedTaggedTemplate')
 });

package/dist/es2019/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';
+const 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/es2019/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';
+const 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/es2019/rules/no-styled-tagged-template-expression/is-styled.js

@@ -0,0 +1,45 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+
+import { CSS_IN_JS_IMPORTS } from '../utils/is-supported-import';
+const functionName = 'styled';
+const 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 const isStyled = (nodeToCheck, referencesInScope, importSources) => {
+  let 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(reference => {
+    var _reference$resolved;
+    return reference.identifier === nodeIdentifier && ((_reference$resolved = reference.resolved) === null || _reference$resolved === void 0 ? void 0 : _reference$resolved.defs.some(def => checkDefinitionHasImport(def, importSources)));
+  });
+};

package/dist/es2019/rules/utils/create-no-exported-rule/is-styled-component.js

@@ -1,4 +1,4 @@
-import { isNodeOfType } from 'eslint-codemod-utils';
+import { getFirstSupportedImport } from '../get-first-supported-import';
 /**
  * Given a list of node, find and return the callee of the first Compiled or styled-components `styled` function call found in the list.
  *
@@ -40,13 +40,9 @@ const findNode = nodes => {
  * @returns The local name used to import the `styled` API.
  */
 const getStyledImportSpecifierName = (context, importSources) => {
-  var _supportedImports$0$s;
-  const isSupportedImport = node => {
-    return isNodeOfType(node, 'ImportDeclaration') && typeof node.source.value === 'string' && importSources.includes(node.source.value);
-  };
-  const source = context.getSourceCode();
-  const supportedImports = source.ast.body.filter(isSupportedImport);
-  return (_supportedImports$0$s = supportedImports[0].specifiers.find(spec => spec.type === 'ImportSpecifier' && spec.imported.name === 'styled')) === null || _supportedImports$0$s === void 0 ? void 0 : _supportedImports$0$s.local.name;
+  var _supportedImport$spec;
+  const supportedImport = getFirstSupportedImport(context, importSources);
+  return supportedImport === null || supportedImport === void 0 ? void 0 : (_supportedImport$spec = supportedImport.specifiers.find(spec => spec.type === 'ImportSpecifier' && spec.imported.name === 'styled' || spec.type === 'ImportDefaultSpecifier' && spec.local.name === 'styled')) === null || _supportedImport$spec === void 0 ? void 0 : _supportedImport$spec.local.name;
 };
 
 /**

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/get-first-supported-import.js

@@ -0,0 +1,22 @@
+import { isNodeOfType } from 'eslint-codemod-utils';
+/**
+ * Get the first import declaration in the file that matches any of the packages
+ * in `importSources`.
+ *
+ * @param context Rule context.
+ * @param importSources The packages to check import statements for. If importSources
+ *                      contains more than one package, the first import statement
+ *                      detected in the file that matches any of the packages will be
+ *                      returned.
+ * @returns The first import declaration found in the file.
+ */
+export const getFirstSupportedImport = (context, importSources) => {
+  const isSupportedImport = node => {
+    return isNodeOfType(node, 'ImportDeclaration') && typeof node.source.value === 'string' && importSources.includes(node.source.value);
+  };
+  const source = context.getSourceCode();
+  const supportedImports = source.ast.body.filter(isSupportedImport);
+  if (supportedImports.length) {
+    return supportedImports[0];
+  }
+};

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

@@ -4,22 +4,22 @@ export const CSS_IN_JS_IMPORTS = {
   compiled: '@compiled/react',
   emotionReact: '@emotion/react',
   emotionCore: '@emotion/core',
+  emotionStyled: '@emotion/styled',
   styledComponents: 'styled-components',
-  atlaskitCss: '@atlaskit/css'
+  atlaskitCss: '@atlaskit/css',
+  atlaskitPrimitives: '@atlaskit/primitives'
 };
 
 // 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
@@ -31,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',