@atlaskit/eslint-plugin-design-system 8.13.1 → 8.14.0

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

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _createRule = require("../utils/create-rule");
+var _createNoTaggedTemplateExpressionRule = require("./create-no-tagged-template-expression-rule");
+var _isSupportedImport = require("./is-supported-import");
+var rule = (0, _createRule.createLintRule)({
+  meta: {
+    name: 'no-css-tagged-template-expression',
+    fixable: 'code',
+    type: 'problem',
+    docs: {
+      description: 'Disallows any `css` tagged template expressions that originate from Emotion, Styled Components or Compiled',
+      recommended: false,
+      severity: 'error'
+    },
+    messages: {
+      unexpectedTaggedTemplate: 'Unexpected `css` tagged template expression'
+    }
+  },
+  create: (0, _createNoTaggedTemplateExpressionRule.createNoTaggedTemplateExpressionRule)((0, _isSupportedImport.isSupportedImport)('css'), 'unexpectedTaggedTemplate')
+});
+var _default = exports.default = rule;

package/dist/cjs/rules/no-css-tagged-template-expression/is-supported-import.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isSupportedImport = exports.SUPPORTED_IMPORTS = void 0;
+var SUPPORTED_IMPORTS = exports.SUPPORTED_IMPORTS = {
+  compiled: '@compiled/react',
+  emotionReact: '@emotion/react',
+  emotionCore: '@emotion/core',
+  styledComponents: 'styled-components'
+};
+var isImportSpecifierWrapper = function isImportSpecifierWrapper(name) {
+  return function (def) {
+    var _def$parent, _def$parent2, _def$parent3, _def$parent4, _def$parent5;
+    return def.node.type === 'ImportSpecifier' && def.node.imported.type === 'Identifier' && def.node.imported.name === name && ((_def$parent = def.parent) === null || _def$parent === void 0 ? void 0 : _def$parent.type) === 'ImportDeclaration' && (((_def$parent2 = def.parent) === null || _def$parent2 === void 0 ? void 0 : _def$parent2.source.value) === SUPPORTED_IMPORTS.compiled || ((_def$parent3 = def.parent) === null || _def$parent3 === void 0 ? void 0 : _def$parent3.source.value) === SUPPORTED_IMPORTS.emotionReact || ((_def$parent4 = def.parent) === null || _def$parent4 === void 0 ? void 0 : _def$parent4.source.value) === SUPPORTED_IMPORTS.emotionCore || ((_def$parent5 = def.parent) === null || _def$parent5 === void 0 ? void 0 : _def$parent5.source.value) === SUPPORTED_IMPORTS.styledComponents);
+  };
+};
+var isSupportedImport = exports.isSupportedImport = function isSupportedImport(name) {
+  var isImportSpecifier = isImportSpecifierWrapper(name);
+  return function (node, references) {
+    return node.type === 'Identifier' && references.some(function (reference) {
+      var _reference$resolved;
+      return reference.identifier === node && ((_reference$resolved = reference.resolved) === null || _reference$resolved === void 0 ? void 0 : _reference$resolved.defs.some(isImportSpecifier));
+    });
+  };
+};

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::a4007a35edc1c661f543508c2b005014>>
+ * @codegen <<SignedSource::594898d8c5dc8b9a5610d62e7f300a53>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 export default {
@@ -11,6 +11,7 @@ export default {
     '@atlaskit/design-system/ensure-design-token-usage/preview': 'warn',
     '@atlaskit/design-system/icon-label': 'warn',
     '@atlaskit/design-system/no-banned-imports': 'error',
+    '@atlaskit/design-system/no-css-tagged-template-expression': 'error',
     '@atlaskit/design-system/no-deprecated-apis': 'error',
     '@atlaskit/design-system/no-deprecated-design-token-usage': 'warn',
     '@atlaskit/design-system/no-deprecated-imports': 'error',

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::c5844c54692156b8d604fd5994082abe>>
+ * @codegen <<SignedSource::8927e5adaec5639c9712dbfb26968de4>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 import consistentCssPropUsage from './consistent-css-prop-usage';
@@ -8,6 +8,7 @@ import ensureDesignTokenUsage from './ensure-design-token-usage';
 import ensureDesignTokenUsagePreview from './ensure-design-token-usage-preview';
 import iconLabel from './icon-label';
 import noBannedImports from './no-banned-imports';
+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';
@@ -27,6 +28,7 @@ export default {
   'ensure-design-token-usage/preview': ensureDesignTokenUsagePreview,
   'icon-label': iconLabel,
   'no-banned-imports': noBannedImports,
+  'no-css-tagged-template-expression': noCssTaggedTemplateExpression,
   'no-deprecated-apis': noDeprecatedApis,
   'no-deprecated-design-token-usage': noDeprecatedDesignTokenUsage,
   'no-deprecated-imports': noDeprecatedImports,

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

@@ -0,0 +1,106 @@
+// Original source from Compiled https://github.com/atlassian-labs/compiled/blob/master/packages/eslint-plugin/src/utils/create-no-tagged-template-expression-rule/generate.ts
+
+const createKey = key => {
+  if (/^\w+$/g.test(key)) {
+    return key;
+  }
+
+  // Wrap the key in square brackets if the key includes a binding. i.e.`.foo ${BINDING_NAME} .bar`
+  if (key.charAt(0) === '`' && key.charAt(key.length - 1) === '`') {
+    return `[${key}]`;
+  }
+
+  // Wrap the key in quotes if it uses unsafe characters
+  if (!key.includes('"')) {
+    return `"${key}"`;
+  }
+  return `[\`${key}\`]`;
+};
+const addQuotes = literal => literal[0] === `"` ? `'${literal}'` : `"${literal}"`;
+const createValue = value => {
+  const {
+    type
+  } = value;
+  if (type === 'expression') {
+    return value.expression.trim();
+  }
+  const literal = value.value;
+  return typeof literal === 'string' && literal[0] !== '`' ? addQuotes(literal) : literal;
+};
+const indent = (offset, level) => ' '.repeat(offset + level * 2);
+const generateBlock = (blocks, offset, level) => {
+  let chars = '{' + '\n';
+  for (const [i, block] of blocks.entries()) {
+    chars += indent(offset, level + 1);
+    switch (block.type) {
+      case 'declaration':
+        {
+          chars += createKey(block.property) + ': ' + createValue(block.value);
+          break;
+        }
+      case 'rule':
+        {
+          chars += createKey(block.selector) + ': ' + generateArguments(block.declarations, offset, level + 1).trim();
+          break;
+        }
+      default:
+        break;
+    }
+    if (blocks.length > 1 && i < blocks.length - 1) {
+      chars += ',';
+      chars += '\n';
+    }
+  }
+  chars += '\n' + indent(offset, level) + '}';
+  return chars;
+};
+const generateArguments = (args, offset, level) => {
+  let chars = '';
+  if (level > 1 && args.length > 1) {
+    chars += '[';
+  }
+  for (const [i, arg] of args.entries()) {
+    switch (arg.type) {
+      case 'block':
+        {
+          if (args.length === 1) {
+            chars += generateBlock(arg.blocks, offset, level).trim();
+          } else {
+            chars += '\n';
+            chars += indent(offset, level + 1);
+            chars += generateBlock(arg.blocks, offset, level + 1).trim();
+          }
+          break;
+        }
+      case 'expression':
+        {
+          chars += '\n';
+          chars += indent(offset, level + 1);
+          chars += arg.expression;
+          break;
+        }
+      default:
+        break;
+    }
+    if (args.length > 1 && i < args.length - 1) {
+      chars += ',';
+    }
+  }
+  if (level > 1 && args.length > 1) {
+    chars += '\n';
+    chars += indent(offset, level);
+    chars += ']';
+  }
+  return chars;
+};
+export const generate = (args, offset, level = 0) => {
+  let chars = '';
+  chars += '(';
+  chars += generateArguments(args, offset, level);
+  if (args.length > 1) {
+    chars += '\n';
+    chars += indent(offset, level);
+  }
+  chars += ')';
+  return chars;
+};

package/dist/es2019/rules/no-css-tagged-template-expression/create-no-tagged-template-expression-rule/get-tagged-template-expression-offset.js

@@ -0,0 +1,29 @@
+// Original source from Compiled https://github.com/atlassian-labs/compiled/blob/master/packages/eslint-plugin/src/utils/create-no-tagged-template-expression-rule/get-tagged-template-expression-offset.ts
+
+export const getTaggedTemplateExpressionOffset = node => {
+  const {
+    parent
+  } = node;
+  switch (parent.type || '') {
+    case 'ExportDefaultDeclaration':
+      {
+        return parent.loc.start.column;
+      }
+    case 'VariableDeclarator':
+      {
+        const maybeVariableDeclaration = parent.parent;
+        if (maybeVariableDeclaration.type === 'VariableDeclaration') {
+          const maybeExportNamedDeclaration = maybeVariableDeclaration.parent;
+          if (maybeExportNamedDeclaration.type === 'ExportNamedDeclaration') {
+            return maybeExportNamedDeclaration.loc.start.column;
+          } else {
+            return maybeVariableDeclaration.loc.start.column;
+          }
+        }
+        break;
+      }
+    default:
+      break;
+  }
+  return node.loc.start.column;
+};

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

@@ -0,0 +1,59 @@
+// 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 { generate } from './generate';
+import { getTaggedTemplateExpressionOffset } from './get-tagged-template-expression-offset';
+import { toArguments } from './to-arguments';
+export const createNoTaggedTemplateExpressionRule = (isUsage, messageId) => context => ({
+  TaggedTemplateExpression(node) {
+    const {
+      references
+    } = context.getScope();
+    if (!isUsage(node.tag, references)) {
+      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 (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/create-no-tagged-template-expression-rule/to-arguments.js

@@ -0,0 +1,187 @@
+// Original source from Compiled https://github.com/atlassian-labs/compiled/blob/master/packages/eslint-plugin/src/utils/create-no-tagged-template-expression-rule/to-arguments.ts
+
+const getArguments = (chars, expressions = []) => {
+  if (!chars.trim().length && expressions) {
+    return expressions.map(({
+      expression
+    }) => ({
+      type: 'expression',
+      expression
+    }));
+  }
+  const args = [];
+  if (!chars.includes(':')) {
+    return args;
+  }
+
+  // Split the property and value
+  // e.g. `color: red` becomes ['color', 'red']
+  // also consider `background: url("https://some-url-b")`, which has a colon in the value.
+  const [property, ...v] = chars.split(':');
+  const value = v.join(':');
+
+  // Extract any expressions listed before the property that were not delimited by a ;
+  if (expressions.length) {
+    const lastPropertyRe = /[\w-]+(?![\s\S]*[\w-]+)/g;
+    const prop = lastPropertyRe.exec(property);
+    if (prop) {
+      let i = 0;
+      while (expressions[i] && expressions[i].pos < prop.index) {
+        args.push({
+          type: 'expression',
+          expression: expressions[i].expression
+        });
+        i++;
+      }
+      // Remove any expressions that have been added as an arg as they are not part of the declaration
+      expressions = expressions.slice(i);
+    }
+  }
+  const getValue = () => {
+    if (!value.trim().length && expressions.length) {
+      return {
+        type: 'expression',
+        expression: expressions.map(e => e.expression).join('')
+      };
+    }
+    if (expressions.length) {
+      // When there are expressions in the value, insert the expressions and wrap the value in a template literal
+      let val = chars;
+      let offset = 1;
+      for (const {
+        expression,
+        pos
+      } of expressions) {
+        const interpolation = '${' + expression + '}';
+        val = val.substring(0, pos + offset) + interpolation + val.substring(pos + offset);
+        offset += interpolation.length;
+      }
+      return {
+        type: 'literal',
+        value: '`' + val.replace(property + ':', '').trim() + '`'
+      };
+    }
+    return {
+      type: 'literal',
+      value: isNaN(Number(value)) ? value.trim() : parseFloat(value)
+    };
+  };
+  args.push({
+    type: 'declaration',
+    // Make the property camelCase
+    property: property.trim().replace(/-[a-z]/g, match => match[1].toUpperCase()),
+    value: getValue()
+  });
+  return args;
+};
+const getSelectorValue = (chars, expressions) => {
+  // If no variable, returns chars immediately.
+  // i.e. `.foo { color: red }` returns '.foo'
+  if (expressions.length === 0) {
+    return chars.trim();
+  }
+  let val = chars;
+  let offset = 1;
+  for (const {
+    expression,
+    pos
+  } of expressions) {
+    const interpolation = '${' + expression + '}';
+    val = val.substring(0, pos + offset) + interpolation + val.substring(pos + offset);
+    offset += interpolation.length;
+  }
+
+  // For simplicity, use template literals even if the whole selector is a variable
+  // i.e. the output of `${VAR} { color: red }` is { [`${VAR}`]: { color: "red" } }
+  return '`' + val.trim() + '`';
+};
+export const toArguments = (source, template) => {
+  const args = [];
+  const state = {
+    chars: '',
+    current: {
+      parent: undefined,
+      args
+    },
+    expressions: []
+  };
+  const addArgument = argument => {
+    const {
+      args
+    } = state.current;
+    if (argument.type === 'expression') {
+      if (argument.expression.length) {
+        args.push(argument);
+      }
+      return;
+    }
+    const lastArg = args[state.current.args.length - 1];
+    if ((lastArg === null || lastArg === void 0 ? void 0 : lastArg.type) === 'block') {
+      lastArg.blocks.push(argument);
+    } else {
+      args.push({
+        type: 'block',
+        blocks: [argument]
+      });
+    }
+  };
+  const addArguments = () => {
+    const args = getArguments(state.chars, state.expressions);
+    for (const arg of args) {
+      addArgument(arg);
+    }
+  };
+  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, ' ');
+    for (const char of styleTemplateElement) {
+      switch (char) {
+        case '{':
+          {
+            const declarations = [];
+            addArgument({
+              type: 'rule',
+              selector: getSelectorValue(state.chars, state.expressions),
+              declarations
+            });
+            state.chars = '';
+            state.current = {
+              parent: state.current,
+              args: declarations
+            };
+            state.expressions = [];
+            break;
+          }
+        case '}':
+          {
+            // Add any leftover arguments that were not delimited
+            addArguments();
+            state.chars = '';
+            state.current = state.current.parent;
+            state.expressions = [];
+            break;
+          }
+        case ';':
+          {
+            addArguments();
+            state.chars = '';
+            state.expressions = [];
+            break;
+          }
+        default:
+          state.chars += char;
+          break;
+      }
+    }
+    if (i < template.expressions.length) {
+      state.expressions.push({
+        pos: state.chars.length - 1,
+        expression: source.getText(template.expressions[i])
+      });
+    }
+  }
+
+  // Add any leftover arguments that were not delimited
+  addArguments();
+  return args;
+};

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

@@ -0,0 +1 @@
+export {};

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

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

package/dist/es2019/rules/no-css-tagged-template-expression/is-supported-import.js

@@ -0,0 +1,19 @@
+export const SUPPORTED_IMPORTS = {
+  compiled: '@compiled/react',
+  emotionReact: '@emotion/react',
+  emotionCore: '@emotion/core',
+  styledComponents: 'styled-components'
+};
+const isImportSpecifierWrapper = name => {
+  return def => {
+    var _def$parent, _def$parent2, _def$parent3, _def$parent4, _def$parent5;
+    return def.node.type === 'ImportSpecifier' && def.node.imported.type === 'Identifier' && def.node.imported.name === name && ((_def$parent = def.parent) === null || _def$parent === void 0 ? void 0 : _def$parent.type) === 'ImportDeclaration' && (((_def$parent2 = def.parent) === null || _def$parent2 === void 0 ? void 0 : _def$parent2.source.value) === SUPPORTED_IMPORTS.compiled || ((_def$parent3 = def.parent) === null || _def$parent3 === void 0 ? void 0 : _def$parent3.source.value) === SUPPORTED_IMPORTS.emotionReact || ((_def$parent4 = def.parent) === null || _def$parent4 === void 0 ? void 0 : _def$parent4.source.value) === SUPPORTED_IMPORTS.emotionCore || ((_def$parent5 = def.parent) === null || _def$parent5 === void 0 ? void 0 : _def$parent5.source.value) === SUPPORTED_IMPORTS.styledComponents);
+  };
+};
+export const isSupportedImport = name => {
+  const isImportSpecifier = isImportSpecifierWrapper(name);
+  return (node, references) => node.type === 'Identifier' && references.some(reference => {
+    var _reference$resolved;
+    return reference.identifier === node && ((_reference$resolved = reference.resolved) === null || _reference$resolved === void 0 ? void 0 : _reference$resolved.defs.some(isImportSpecifier));
+  });
+};

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::a4007a35edc1c661f543508c2b005014>>
+ * @codegen <<SignedSource::594898d8c5dc8b9a5610d62e7f300a53>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 export default {
@@ -11,6 +11,7 @@ export default {
     '@atlaskit/design-system/ensure-design-token-usage/preview': 'warn',
     '@atlaskit/design-system/icon-label': 'warn',
     '@atlaskit/design-system/no-banned-imports': 'error',
+    '@atlaskit/design-system/no-css-tagged-template-expression': 'error',
     '@atlaskit/design-system/no-deprecated-apis': 'error',
     '@atlaskit/design-system/no-deprecated-design-token-usage': 'warn',
     '@atlaskit/design-system/no-deprecated-imports': '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::c5844c54692156b8d604fd5994082abe>>
+ * @codegen <<SignedSource::8927e5adaec5639c9712dbfb26968de4>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 import consistentCssPropUsage from './consistent-css-prop-usage';
@@ -8,6 +8,7 @@ import ensureDesignTokenUsage from './ensure-design-token-usage';
 import ensureDesignTokenUsagePreview from './ensure-design-token-usage-preview';
 import iconLabel from './icon-label';
 import noBannedImports from './no-banned-imports';
+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';
@@ -27,6 +28,7 @@ export default {
   'ensure-design-token-usage/preview': ensureDesignTokenUsagePreview,
   'icon-label': iconLabel,
   'no-banned-imports': noBannedImports,
+  'no-css-tagged-template-expression': noCssTaggedTemplateExpression,
   'no-deprecated-apis': noDeprecatedApis,
   'no-deprecated-design-token-usage': noDeprecatedDesignTokenUsage,
   'no-deprecated-imports': noDeprecatedImports,