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

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

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 /**
  * 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
  */
 var _default = exports.default = {
@@ -26,9 +26,11 @@ var _default = exports.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/cjs/rules/index.codegen.js

@@ -19,9 +19,11 @@ var _noEmptyStyledExpression = _interopRequireDefault(require("./no-empty-styled
 var _noExportedCss = _interopRequireDefault(require("./no-exported-css"));
 var _noExportedKeyframes = _interopRequireDefault(require("./no-exported-keyframes"));
 var _noInvalidCssMap = _interopRequireDefault(require("./no-invalid-css-map"));
+var _noKeyframesTaggedTemplateExpression = _interopRequireDefault(require("./no-keyframes-tagged-template-expression"));
 var _noMargin = _interopRequireDefault(require("./no-margin"));
 var _noNestedStyles = _interopRequireDefault(require("./no-nested-styles"));
 var _noPhysicalProperties = _interopRequireDefault(require("./no-physical-properties"));
+var _noStyledTaggedTemplateExpression = _interopRequireDefault(require("./no-styled-tagged-template-expression"));
 var _noUnsafeDesignTokenUsage = _interopRequireDefault(require("./no-unsafe-design-token-usage"));
 var _noUnsafeStyleOverrides = _interopRequireDefault(require("./no-unsafe-style-overrides"));
 var _noUnsupportedDragAndDropLibraries = _interopRequireDefault(require("./no-unsupported-drag-and-drop-libraries"));
@@ -34,7 +36,7 @@ var _usePrimitives = _interopRequireDefault(require("./use-primitives"));
 var _useVisuallyHidden = _interopRequireDefault(require("./use-visually-hidden"));
 /**
  * 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
  */
 var _default = exports.default = {
@@ -52,9 +54,11 @@ var _default = exports.default = {
   'no-exported-css': _noExportedCss.default,
   'no-exported-keyframes': _noExportedKeyframes.default,
   'no-invalid-css-map': _noInvalidCssMap.default,
+  'no-keyframes-tagged-template-expression': _noKeyframesTaggedTemplateExpression.default,
   'no-margin': _noMargin.default,
   'no-nested-styles': _noNestedStyles.default,
   'no-physical-properties': _noPhysicalProperties.default,
+  'no-styled-tagged-template-expression': _noStyledTaggedTemplateExpression.default,
   'no-unsafe-design-token-usage': _noUnsafeDesignTokenUsage.default,
   'no-unsafe-style-overrides': _noUnsafeStyleOverrides.default,
   'no-unsupported-drag-and-drop-libraries': _noUnsupportedDragAndDropLibraries.default,

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

@@ -4,9 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _createNoTaggedTemplateExpressionRule = require("../utils/create-no-tagged-template-expression-rule");
 var _createRule = require("../utils/create-rule");
 var _isSupportedImport = require("../utils/is-supported-import");
-var _createNoTaggedTemplateExpressionRule = require("./create-no-tagged-template-expression-rule");
 var rule = (0, _createRule.createLintRule)({
   meta: {
     name: 'no-css-tagged-template-expression',
@@ -19,7 +19,8 @@ var rule = (0, _createRule.createLintRule)({
     },
     messages: {
       unexpectedTaggedTemplate: 'Unexpected `css` tagged template expression'
-    }
+    },
+    schema: _createNoTaggedTemplateExpressionRule.noTaggedTemplateExpressionRuleSchema
   },
   create: (0, _createNoTaggedTemplateExpressionRule.createNoTaggedTemplateExpressionRule)(_isSupportedImport.isCss, 'unexpectedTaggedTemplate')
 });

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

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _createNoTaggedTemplateExpressionRule = require("../utils/create-no-tagged-template-expression-rule");
+var _createRule = require("../utils/create-rule");
+var _isSupportedImport = require("../utils/is-supported-import");
+var rule = (0, _createRule.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: _createNoTaggedTemplateExpressionRule.noTaggedTemplateExpressionRuleSchema
+  },
+  create: (0, _createNoTaggedTemplateExpressionRule.createNoTaggedTemplateExpressionRule)(_isSupportedImport.isKeyframes, 'unexpectedTaggedTemplate')
+});
+var _default = exports.default = rule;

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

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _createNoTaggedTemplateExpressionRule = require("../utils/create-no-tagged-template-expression-rule");
+var _createRule = require("../utils/create-rule");
+var _isStyled = require("./is-styled");
+var rule = (0, _createRule.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: _createNoTaggedTemplateExpressionRule.noTaggedTemplateExpressionRuleSchema
+  },
+  create: (0, _createNoTaggedTemplateExpressionRule.createNoTaggedTemplateExpressionRule)(_isStyled.isStyled, 'unexpectedTaggedTemplate')
+});
+var _default = exports.default = rule;

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

@@ -0,0 +1,53 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isStyled = void 0;
+var _isSupportedImport = require("../utils/is-supported-import");
+// eslint-disable-next-line import/no-extraneous-dependencies
+
+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(_isSupportedImport.CSS_IN_JS_IMPORTS.compiled) && def.parent.source.value === _isSupportedImport.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(_isSupportedImport.CSS_IN_JS_IMPORTS.emotionStyled) && def.parent.source.value === _isSupportedImport.CSS_IN_JS_IMPORTS.emotionStyled) {
+    return def.node.type === 'ImportDefaultSpecifier';
+  }
+
+  // `styled-components` only exposes styled as a default export
+  if (importSources.includes(_isSupportedImport.CSS_IN_JS_IMPORTS.styledComponents) && def.parent.source.value === _isSupportedImport.CSS_IN_JS_IMPORTS.styledComponents) {
+    return def.node.type === 'ImportDefaultSpecifier';
+  }
+  return false;
+};
+var isStyled = exports.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/cjs/rules/use-primitives/transformers/css-to-xcss.js

@@ -4,10 +4,13 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.supportedStylesMap = exports.styledObjectToXcssTokens = exports.spaceTokenMap = exports.cssToXcssTransformer = void 0;
+exports.supportedStylesMap = exports.supportedDimensionAttributesMap = exports.styledObjectToXcssTokens = exports.spaceTokenMap = exports.dimensionsMap = exports.cssToXcssTransformer = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _eslintCodemodUtils = require("eslint-codemod-utils");
 var _utils = require("../utils");
+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) { (0, _defineProperty2.default)(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; }
 var cssToXcssTransformer = exports.cssToXcssTransformer = function cssToXcssTransformer(node, context, fixer) {
   /**
    * Note: The logic here is very similar to the logic in `shouldSuggestBox`. i.e.
@@ -90,7 +93,18 @@ var spaceTokenMap = exports.spaceTokenMap = {
   '64px': 'space.800',
   '80px': 'space.1000'
 };
-var supportedStylesMap = exports.supportedStylesMap = {
+var dimensionsMap = exports.dimensionsMap = {
+  '100%': '100%'
+};
+var supportedDimensionAttributesMap = exports.supportedDimensionAttributesMap = {
+  width: dimensionsMap,
+  height: dimensionsMap,
+  minWidth: dimensionsMap,
+  minHeight: dimensionsMap,
+  maxWidth: dimensionsMap,
+  maxHeight: dimensionsMap
+};
+var supportedStylesMap = exports.supportedStylesMap = _objectSpread({
   padding: spaceTokenMap,
   paddingBlock: spaceTokenMap,
   paddingBlockEnd: spaceTokenMap,
@@ -113,4 +127,4 @@ var supportedStylesMap = exports.supportedStylesMap = {
   marginLeft: spaceTokenMap,
   marginRight: spaceTokenMap,
   marginTop: spaceTokenMap
-};
+}, supportedDimensionAttributesMap);

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

@@ -50,6 +50,13 @@ var isValidCssPropertiesToTransform = exports.isValidCssPropertiesToTransform =
     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 _cssToXcss.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/cjs/rules/{no-css-tagged-template-expression → utils}/create-no-tagged-template-expression-rule/index.js

@@ -4,23 +4,43 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.createNoTaggedTemplateExpressionRule = void 0;
+exports.noTaggedTemplateExpressionRuleSchema = exports.createNoTaggedTemplateExpressionRule = void 0;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
-var _isSupportedImport = require("../../utils/is-supported-import");
+var _isSupportedImport = require("../is-supported-import");
 var _generate = require("./generate");
 var _getTaggedTemplateExpressionOffset = require("./get-tagged-template-expression-offset");
 var _toArguments = require("./to-arguments");
 // 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
 
-var IMPORT_SOURCES = [_isSupportedImport.CSS_IN_JS_IMPORTS.compiled, _isSupportedImport.CSS_IN_JS_IMPORTS.emotionReact, _isSupportedImport.CSS_IN_JS_IMPORTS.emotionCore, _isSupportedImport.CSS_IN_JS_IMPORTS.styledComponents];
+var noTaggedTemplateExpressionRuleSchema = exports.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;
 var createNoTaggedTemplateExpressionRule = exports.createNoTaggedTemplateExpressionRule = function createNoTaggedTemplateExpressionRule(isUsage, messageId) {
   return function (context) {
+    var importSources = (0, _isSupportedImport.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({
@@ -34,9 +54,9 @@ var createNoTaggedTemplateExpressionRule = exports.createNoTaggedTemplateExpress
                   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/cjs/rules/{no-css-tagged-template-expression → utils}/create-no-tagged-template-expression-rule/to-arguments.js

@@ -56,7 +56,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) {
@@ -184,7 +207,10 @@ var toArguments = exports.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/cjs/rules/utils/create-rule.js

@@ -17,7 +17,7 @@ var _utils = require("@typescript-eslint/utils");
  * @deprecated
  */
 var createRule = exports.createRule = _utils.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
@@ -25,8 +25,10 @@ var createRule = exports.createRule = _utils.ESLintUtils.RuleCreator(function (n
  * as well as improving type support.
  */
 var createLintRule = exports.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/cjs/rules/utils/is-supported-import.js

@@ -1,17 +1,16 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.isStyled = exports.isKeyframes = exports.isCxFunction = exports.isCssMap = exports.isCss = exports.getImportSources = exports.DEFAULT_IMPORT_SOURCES = exports.CSS_IN_JS_IMPORTS = void 0;
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 // eslint-disable-next-line import/no-extraneous-dependencies
 
 var CSS_IN_JS_IMPORTS = exports.CSS_IN_JS_IMPORTS = {
   compiled: '@compiled/react',
   emotionReact: '@emotion/react',
   emotionCore: '@emotion/core',
+  emotionStyled: '@emotion/styled',
   styledComponents: 'styled-components',
   atlaskitCss: '@atlaskit/css',
   atlaskitPrimitives: '@atlaskit/primitives'
@@ -20,16 +19,14 @@ var CSS_IN_JS_IMPORTS = exports.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.
-var DEFAULT_IMPORT_SOURCES = exports.DEFAULT_IMPORT_SOURCES = [CSS_IN_JS_IMPORTS.compiled, CSS_IN_JS_IMPORTS.atlaskitCss];
+/**
+ * By default all known import sources are checked against.
+ */
+var DEFAULT_IMPORT_SOURCES = exports.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
@@ -41,7 +38,7 @@ var getImportSources = exports.getImportSources = function getImportSources(cont
     return DEFAULT_IMPORT_SOURCES;
   }
   if (options[0].importSources && Array.isArray(options[0].importSources)) {
-    return [].concat(DEFAULT_IMPORT_SOURCES, (0, _toConsumableArray2.default)(options[0].importSources));
+    return options[0].importSources;
   }
   return DEFAULT_IMPORT_SOURCES;
 };

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::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/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/use-primitives/transformers/css-to-xcss.js

@@ -82,6 +82,17 @@ export const spaceTokenMap = {
   '64px': 'space.800',
   '80px': 'space.1000'
 };
+export const dimensionsMap = {
+  '100%': '100%'
+};
+export const supportedDimensionAttributesMap = {
+  width: dimensionsMap,
+  height: dimensionsMap,
+  minWidth: dimensionsMap,
+  minHeight: dimensionsMap,
+  maxWidth: dimensionsMap,
+  maxHeight: dimensionsMap
+};
 export const supportedStylesMap = {
   padding: spaceTokenMap,
   paddingBlock: spaceTokenMap,
@@ -104,5 +115,6 @@ export const supportedStylesMap = {
   marginInlineStart: spaceTokenMap,
   marginLeft: spaceTokenMap,
   marginRight: spaceTokenMap,
-  marginTop: spaceTokenMap
+  marginTop: spaceTokenMap,
+  ...supportedDimensionAttributesMap
 };

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

@@ -1,6 +1,6 @@
 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 const isValidCssPropertiesToTransform = (node, config) => {
   if (!node) {
@@ -36,6 +36,11 @@ export const isValidCssPropertiesToTransform = (node, config) => {
     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(attribute => 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)