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

package/dist/esm/rules/no-unused-css-map/unused-css-map-checker.js

@@ -0,0 +1,143 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+import { getSourceCode } from '@atlaskit/eslint-utils/context-compat';
+import { findVariable } from '@atlaskit/eslint-utils/find-variable';
+export var UnusedCssMapChecker = /*#__PURE__*/function () {
+  function UnusedCssMapChecker(cssMapObject, context, cssMapCallNode) {
+    _classCallCheck(this, UnusedCssMapChecker);
+    this.cssMapObject = cssMapObject;
+    this.cssMapCallNode = cssMapCallNode;
+    this.report = context.report;
+    this.context = context;
+  }
+  return _createClass(UnusedCssMapChecker, [{
+    key: "checkForUnusedStyles",
+    value: function checkForUnusedStyles() {
+      // Get all defined style keys
+      var definedStyles = new Map();
+      var _iterator = _createForOfIteratorHelper(this.cssMapObject.properties),
+        _step;
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var _property = _step.value;
+          if (_property.type === 'Property' && _property.key.type === 'Identifier') {
+            definedStyles.set(_property.key.name, _property);
+          }
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+      if (definedStyles.size === 0) {
+        return;
+      }
+
+      // Find the variable that holds the cssMap result
+      var cssMapVariable = this.findCssMapVariable();
+      if (!cssMapVariable) {
+        return;
+      }
+
+      // Early return if no references - all styles are unused
+      if (cssMapVariable.references.length === 0) {
+        var _iterator2 = _createForOfIteratorHelper(definedStyles),
+          _step2;
+        try {
+          for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+            var _step2$value = _slicedToArray(_step2.value, 2),
+              styleName = _step2$value[0],
+              property = _step2$value[1];
+            this.report({
+              node: property.key,
+              messageId: 'unusedCssMapStyle',
+              data: {
+                styleName: styleName
+              }
+            });
+          }
+        } catch (err) {
+          _iterator2.e(err);
+        } finally {
+          _iterator2.f();
+        }
+        return;
+      }
+      var usedStyles = new Set();
+      var _iterator3 = _createForOfIteratorHelper(cssMapVariable.references),
+        _step3;
+      try {
+        for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
+          var ref = _step3.value;
+          var node = ref.identifier;
+          var parent = node.parent;
+          if ((parent === null || parent === void 0 ? void 0 : parent.type) === 'MemberExpression') {
+            if (!parent.computed && parent.property.type === 'Identifier') {
+              // Static access: styles.danger (not computed)
+              usedStyles.add(parent.property.name);
+
+              // Early exit if all styles are found
+              if (usedStyles.size === definedStyles.size) {
+                return;
+              }
+            } else {
+              // Dynamic access: styles[key], styles['danger'], etc. (computed)
+              // Immediately exit - no styles will be reported as unused
+              return;
+            }
+          }
+        }
+
+        // No dynamic access - report all unused styles
+      } catch (err) {
+        _iterator3.e(err);
+      } finally {
+        _iterator3.f();
+      }
+      var _iterator4 = _createForOfIteratorHelper(definedStyles),
+        _step4;
+      try {
+        for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
+          var _step4$value = _slicedToArray(_step4.value, 2),
+            _styleName = _step4$value[0],
+            _property2 = _step4$value[1];
+          if (!usedStyles.has(_styleName)) {
+            this.report({
+              node: _property2.key,
+              messageId: 'unusedCssMapStyle',
+              data: {
+                styleName: _styleName
+              }
+            });
+          }
+        }
+      } catch (err) {
+        _iterator4.e(err);
+      } finally {
+        _iterator4.f();
+      }
+    }
+  }, {
+    key: "findCssMapVariable",
+    value: function findCssMapVariable() {
+      var callNode = this.cssMapCallNode;
+      var parent = callNode.parent;
+      if ((parent === null || parent === void 0 ? void 0 : parent.type) === 'VariableDeclarator' && parent.id.type === 'Identifier') {
+        return findVariable({
+          identifier: parent.id,
+          sourceCode: getSourceCode(this.context)
+        });
+      }
+      return null;
+    }
+  }, {
+    key: "run",
+    value: function run() {
+      this.checkForUnusedStyles();
+    }
+  }]);
+}();

package/dist/esm/rules/prefer-primitives/index.js

@@ -1,4 +1,4 @@
-import { createLintRule } from '../utils/create-rule';
+import { createLintRule } from '../utils/create-lint-rule';
 var primitiveDocsUrl = 'https://go.atlassian.com/dst-prefer-primitives';
 var rule = createLintRule({
   meta: {

package/dist/esm/rules/use-button-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';
 var elementsAccessibleNameProps = ['label', 'titleId'];
 var rule = createLintRule({
   meta: {

package/dist/esm/rules/use-character-counter-field/index.js

@@ -1,6 +1,6 @@
 import { isNodeOfType } from 'eslint-codemod-utils';
-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';
 var TEXTFIELD_PACKAGE = '@atlaskit/textfield';
 var TEXTAREA_PACKAGE = '@atlaskit/textarea';
 var FORM_PACKAGE = '@atlaskit/form';
@@ -137,4 +137,6 @@ var rule = createLintRule({
     };
   }
 });
+
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
 export default rule;

package/dist/esm/rules/use-correct-field/index.js

@@ -2,7 +2,7 @@ function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol
 function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 import { isNodeOfType } from 'eslint-codemod-utils';
-import { createLintRule } from '../utils/create-rule';
+import { createLintRule } from '../utils/create-lint-rule';
 var specialFieldsByImport = {
   '@atlaskit/checkbox': {
     component: 'Checkbox',

package/dist/esm/rules/use-cx-function-in-xcss/index.js

@@ -2,7 +2,7 @@ function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol
 function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 import { isNodeOfType } from 'eslint-codemod-utils';
-import { createLintRule } from '../utils/create-rule';
+import { createLintRule } from '../utils/create-lint-rule';
 var rule = createLintRule({
   meta: {
     name: 'use-cx-function-in-xcss',

package/dist/esm/rules/use-datetime-picker-calendar-button/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';
 var DATE_PICKER = 'DatePicker';
 var DATETIME_PICKER = 'DateTimePicker';
 var PROP_NAME = 'shouldShowCalendarButton';

package/dist/esm/rules/use-drawer-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';
 var elementsAccessibleNameProps = ['label', 'titleId'];
 var rule = createLintRule({
   meta: {

package/dist/esm/rules/use-field-message-wrapper/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';
 var FORM_PACKAGE = '@atlaskit/form';
 var MESSAGE_COMPONENTS = ['ErrorMessage', 'HelperMessage', 'ValidMessage'];
 var rule = createLintRule({

package/dist/esm/rules/use-heading/index.js

@@ -1,4 +1,4 @@
-import { createLintRule } from '../utils/create-rule';
+import { createLintRule } from '../utils/create-lint-rule';
 import { errorBoundary } from '../utils/error-boundary';
 import { getConfig } from './config';
 import { NativeElements } from './transformers/native-elements';

package/dist/esm/rules/use-heading/transformers/native-elements.js

@@ -5,7 +5,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 /* eslint-disable @repo/internal/react/require-jsdoc */
 
 import { isNodeOfType } from 'eslint-codemod-utils';
-import { JSXElement as JSXElementHelper } from '../../../ast-nodes/jsx-element';
+import { JSXElementHelper } from '../../../ast-nodes/jsx-element-helper';
 import { Root } from '../../../ast-nodes/root';
 import { allowedAttrs } from './allowed-attrs';
 import { updateTestIdAttributeFix } from './update-test-id-attribute-fix';

package/dist/esm/rules/use-heading/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/esm/rules/use-heading-level-in-spotlight-card/index.js

@@ -1,6 +1,6 @@
 import { isNodeOfType } from 'eslint-codemod-utils';
 import { getScope } from '@atlaskit/eslint-utils/context-compat';
-import { createLintRule } from '../utils/create-rule';
+import { createLintRule } from '../utils/create-lint-rule';
 import { getImportName } from '../utils/get-import-name';
 export var headingLevelRequiredSuggestionText = 'Add a `headingLevel` that is of a contextually relevant level.';
 var rule = createLintRule({

package/dist/esm/rules/use-href-in-link-item/index.js

@@ -1,6 +1,6 @@
 import { isNodeOfType } from 'eslint-codemod-utils';
 import { getScope } from '@atlaskit/eslint-utils/context-compat';
-import { createLintRule } from '../utils/create-rule';
+import { createLintRule } from '../utils/create-lint-rule';
 import { getImportName } from '../utils/get-import-name';
 import { getUniqueButtonItemName } from './get-unique-button-item-name';
 import { hasImportOfName } from './has-import-of-name';

package/dist/esm/rules/use-latest-xcss-syntax/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';
 export var noRawSpacingValues = "Don't use non-token values in padding or margin. There is ongoing work to make this a TypeScript error. Once that happens, you will have to delete/refactor anyway. Atlassians: See https://go.atlassian.com/xcss-spacing for details.";
 var rule = createLintRule({

package/dist/esm/rules/use-latest-xcss-syntax-typography/config/get-config.js

@@ -0,0 +1,9 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import { PATTERNS } from './patterns';
+var defaults = {
+  failSilently: false,
+  patterns: _toConsumableArray(PATTERNS)
+};
+export var getConfig = function getConfig(overrides) {
+  return Object.assign({}, defaults, overrides);
+};

package/dist/esm/rules/use-latest-xcss-syntax-typography/config/patterns.js

@@ -0,0 +1 @@
+export var PATTERNS = ['restricted-property', 'wrapped-token-value', 'restricted-capitalisation'];

package/dist/esm/rules/use-latest-xcss-syntax-typography/config/types.js

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

package/dist/esm/rules/use-latest-xcss-syntax-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, PATTERNS } from './config';
+import { getConfig } from './config/get-config';
+import { PATTERNS } from './config/patterns';
 import { RestrictedCapitalisation } from './linters/restricted-capitalisation';
 import { RestrictedProperty } from './linters/restricted-property';
 import { WrappedTokenValue } from './linters/wrapped-token-value';

package/dist/esm/rules/use-menu-section-title/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';
 var elementsAccessibleNameProps = ['title', 'titleId'];
 var rule = createLintRule({
   meta: {

package/dist/esm/rules/use-modal-dialog-close-button/index.js

@@ -3,8 +3,8 @@ function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r)
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 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';
 var PROP_NAME = 'hasCloseButton';
 
 // Lint rule message

package/dist/esm/rules/use-onboarding-spotlight-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';
 var elementsAccessibleNameProps = ['label', 'titleId', 'heading'];
 var rule = createLintRule({
   meta: {

package/dist/esm/rules/use-popup-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';
 var elementsAccessibleNameProps = ['label', 'titleId'];
 var rule = createLintRule({
   meta: {

package/dist/esm/rules/use-primitives/config/get-config.js

@@ -0,0 +1,6 @@
+var defaults = {
+  patterns: ['compiled-css-function']
+};
+export var getConfig = function getConfig(overrides) {
+  return Object.assign({}, defaults, overrides);
+};

package/dist/esm/rules/use-primitives/config/types.js

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

package/dist/esm/rules/use-primitives/config/valid-patterns.js

@@ -0,0 +1,40 @@
+export var VALID_PATTERNS = [
+// this enables the rule to look for a pattern like:
+// const myStyles = css({...})
+'compiled-css-function',
+// this enables the rule to look for a pattern like:
+// const MyComponent = styled.div({...})
+'compiled-styled-object',
+// this enables the rule to look for a pattern like:
+// css({ padding: `I AM A TEMPLATE LITERAL` })
+// or styled.div({ padding: `I AM A TEMPLATE LITERAL` })
+'css-template-literal',
+// this enables the rule to look for a pattern like:
+// css({ padding: token(...) })
+// or styled.div({ padding: token(...) })
+'css-property-with-tokens',
+// this enables the rule to look for a pattern like:
+// css({ padding: '8px 16px' })
+// or styled.div({ padding: css({ padding: '8px 16px' }) })
+// ... and they could be tokenised
+// ... and they could be using template literals
+'css-property-multiple-values',
+// This enables the rule to look for a pattern like:
+// ```
+// const styles = css({ // or `styled.div({`
+//   padding: '8px',
+//   margin: '8px',
+// })
+'multiple-properties',
+// This enables the rule to look for supported dimension properties set as 100% like:
+// ```
+// const styles = css({ // or `styled.div({`
+//   padding: '8px',
+//   margin: '8px',
+//   width: '100%',
+// })
+'dimension-properties',
+// This enables the rule to look for JSX elements that are defined before the styles
+'jsx-order-fix',
+// This enables a fix for string style properties being incorrectly transformed
+'string-style-property-fix'];

package/dist/esm/rules/use-primitives/index.js

@@ -1,5 +1,6 @@
-import { createLintRule } from '../utils/create-rule';
-import { getConfig, VALID_PATTERNS } from './config';
+import { createLintRule } from '../utils/create-lint-rule';
+import { getConfig } from './config/get-config';
+import { VALID_PATTERNS } from './config/valid-patterns';
 import { CompiledStyled } from './transformers/compiled-styled';
 import { EmotionCSS } from './transformers/emotion-css';
 var boxDocsUrl = 'https://atlassian.design/components/primitives/box';

package/dist/esm/rules/use-primitives/transformers/compiled-styled/convert-jsx-call-site.js

@@ -1,6 +1,6 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import { isNodeOfType } from 'eslint-codemod-utils';
-import { JSXElement as JSXElementHelper } from '../../../../ast-nodes/jsx-element';
+import { JSXElementHelper } from '../../../../ast-nodes/jsx-element-helper';
 
 /**
  * Transforms a JSXElement from:

package/dist/esm/rules/use-primitives/transformers/compiled-styled/convert-styled-component-call-to-jsx.js

@@ -1,6 +1,6 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import { isNodeOfType } from 'eslint-codemod-utils';
-import { styledObjectToXcssTokens } from '../css-to-xcss';
+import { styledObjectToXcssTokens } from '../styled-object-to-xcss-tokens';
 
 /**
  * Transforms a variable like:

package/dist/esm/rules/use-primitives/transformers/compiled-styled/index.js

@@ -3,7 +3,7 @@ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 
 import { isNodeOfType } from 'eslint-codemod-utils';
 import { getScope, getSourceCode } from '@atlaskit/eslint-utils/context-compat';
-import { JSXElement as JSXElementHelper } from '../../../../ast-nodes/jsx-element';
+import { JSXElementHelper } from '../../../../ast-nodes/jsx-element-helper';
 import { Root } from '../../../../ast-nodes/root';
 import { isValidCssPropertiesToTransform } from '../../utils/is-valid-css-properties-to-transform';
 import { validateStyles } from '../../utils/validate-styles';

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

@@ -0,0 +1,38 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import { getIdentifierInParentScope, identifier } from 'eslint-codemod-utils';
+import { getScope } from '@atlaskit/eslint-utils/context-compat';
+import { getAttributeValueIdentifier } from '../utils/get-attribute-value-identifier';
+import { getFunctionArgumentAtPos } from '../utils/get-function-argument-at-pos';
+import { getJSXAttributeByName } from '../utils/get-jsx-attribute-by-name';
+import { getVariableDefinitionValue } from '../utils/get-variable-definition-value';
+import { styledObjectToXcssTokens } from './styled-object-to-xcss-tokens';
+export var cssToXcssTransformer = function cssToXcssTransformer(node, context, fixer) {
+  /**
+   * Note: The logic here is very similar to the logic in `shouldSuggestBox`. i.e.
+   * 1. Find the `css` attr
+   * 2. Find the variableName (`myStyles` in `css={myStyles}`)
+   * 3. Find the `const myStyles = css({ padding: '8px' })`
+   * 4. Find the style object `{ padding: '8px' }`
+   *
+   * The only difference is, we've already performed very defensive checks for these steps in `shouldSuggestBox`,
+   * so there's no need to do those checks here.
+   *
+   * The repetition could be avoided by combining the 'shouldSuggest' and 'fixCode' steps. However, there are tradeoffs
+   * to that approach (mainly poor separation of concerns). I'm un-opinionated about which strategy we use. I just opted
+   * for this because the original `use-primitives` rule did this.
+   */
+  var cssAttr = getJSXAttributeByName(node.openingElement, 'css');
+  var cssVariableName = getAttributeValueIdentifier(cssAttr);
+  if (!cssVariableName) {
+    return [];
+  }
+  var cssVariableDefinition = getIdentifierInParentScope(getScope(context, node), cssVariableName);
+  var cssVariableValue = getVariableDefinitionValue(cssVariableDefinition);
+  if (!cssVariableValue) {
+    return [];
+  }
+  var cssObjectExpression = getFunctionArgumentAtPos(cssVariableValue, 0);
+  return [
+  // Update `css` function name to `xcss`.
+  fixer.replaceText(cssVariableValue.node.init.callee, identifier('xcss').toString())].concat(_toConsumableArray(styledObjectToXcssTokens(cssObjectExpression, fixer)));
+};

package/dist/esm/rules/use-primitives/transformers/emotion-css/index.js

@@ -5,13 +5,13 @@ import { getIdentifierInParentScope, isNodeOfType } from 'eslint-codemod-utils';
 import { getScope, getSourceCode } from '@atlaskit/eslint-utils/context-compat';
 import { FunctionCall } from '../../../../ast-nodes/function-call';
 import { JSXAttribute as JSXAttributeHelper } from '../../../../ast-nodes/jsx-attribute';
-import { JSXElement as JSXElementHelper } from '../../../../ast-nodes/jsx-element';
+import { JSXElementHelper } from '../../../../ast-nodes/jsx-element-helper';
 import { Root } from '../../../../ast-nodes/root';
 import { getVariableDefinitionValue } from '../../utils/get-variable-definition-value';
 import { getVariableUsagesCount } from '../../utils/get-variable-usage-count';
 import { isValidCssPropertiesToTransform } from '../../utils/is-valid-css-properties-to-transform';
 import { validateStyles } from '../../utils/validate-styles';
-import { cssToXcssTransformer } from '../css-to-xcss';
+import { cssToXcssTransformer } from '../css-to-xcss-transformer';
 import { attributes } from './attributes';
 import { elements } from './elements';
 export var EmotionCSS = {

package/dist/esm/rules/use-primitives/transformers/styled-object-to-xcss-tokens.js

@@ -0,0 +1,34 @@
+import { isNodeOfType, literal } from 'eslint-codemod-utils';
+import { supportedStylesMap } from './supported-styles-map';
+
+// e.g. `padding: '8px'`. For clarity, it's renamed to `entry` inside the `.map()`.
+export var styledObjectToXcssTokens = function styledObjectToXcssTokens(styles, fixer) {
+  return styles.properties.map(function (entry) {
+    if (!isNodeOfType(entry, 'Property')) {
+      return;
+    }
+    if (!isNodeOfType(entry.key, 'Identifier')) {
+      return;
+    }
+
+    // maps literal values like: 8px to 'space.100'
+    if (isNodeOfType(entry.value, 'Literal')) {
+      var value = entry.value.value;
+      if (typeof value !== 'string') {
+        return;
+      }
+      return fixer.replaceText(entry.value, literal("'".concat(supportedStylesMap[entry.key.name][value], "'")).toString());
+    }
+    // maps token calls like: token('space.100') to 'space.100'
+    if (isNodeOfType(entry.value, 'CallExpression')) {
+      var callExpression = entry.value;
+      // skip if not a call to `token`
+      if (!isNodeOfType(callExpression.callee, 'Identifier') || callExpression.callee.name !== 'token' || !isNodeOfType(callExpression.arguments[0], 'Literal')) {
+        return;
+      }
+      // the first argument of `token` is the token name and
+      // can be given directly to `xcss` as it has been validated already.
+      return fixer.replaceText(entry.value, literal("'".concat(callExpression.arguments[0].value, "'")).toString());
+    }
+  });
+};

package/dist/esm/rules/use-primitives/transformers/supported-styles-map.js

@@ -0,0 +1,30 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import { spaceTokenMap } from './space-token-map';
+import { spaceTokenPositiveMap } from './space-token-positive-map';
+import { supportedDimensionAttributesMap } from './supported-dimension-attributes-map';
+export var supportedStylesMap = _objectSpread({
+  padding: spaceTokenPositiveMap,
+  paddingBlock: spaceTokenPositiveMap,
+  paddingBlockEnd: spaceTokenPositiveMap,
+  paddingBlockStart: spaceTokenPositiveMap,
+  paddingBottom: spaceTokenPositiveMap,
+  paddingInline: spaceTokenPositiveMap,
+  paddingInlineEnd: spaceTokenPositiveMap,
+  paddingInlineStart: spaceTokenPositiveMap,
+  paddingLeft: spaceTokenPositiveMap,
+  paddingRight: spaceTokenPositiveMap,
+  paddingTop: spaceTokenPositiveMap,
+  margin: spaceTokenMap,
+  marginBlock: spaceTokenMap,
+  marginBlockEnd: spaceTokenMap,
+  marginBlockStart: spaceTokenMap,
+  marginBottom: spaceTokenMap,
+  marginInline: spaceTokenMap,
+  marginInlineEnd: spaceTokenMap,
+  marginInlineStart: spaceTokenMap,
+  marginLeft: spaceTokenMap,
+  marginRight: spaceTokenMap,
+  marginTop: spaceTokenMap
+}, supportedDimensionAttributesMap);

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

@@ -3,8 +3,8 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["unsupported"];
 import { isNodeOfType } from 'eslint-codemod-utils';
 import { Object as ObjectHelper } from '../../../ast-nodes/object';
-import { supportedStylesMap } from '../transformers/css-to-xcss';
 import { supportedDimensionAttributesMap } from '../transformers/supported-dimension-attributes-map';
+import { supportedStylesMap } from '../transformers/supported-styles-map';
 import { convertASTObjectExpressionToJSObject } from './convert-ast-object-expression-to-js-object';
 export var isValidCssPropertiesToTransform = function isValidCssPropertiesToTransform(node, config) {
   if (!node) {

package/dist/esm/rules/use-primitives/utils/validate-styles.js

@@ -2,9 +2,9 @@ import { isNodeOfType } from 'eslint-codemod-utils';
 import { FunctionCall } from '../../../ast-nodes/function-call';
 import { Object as ObjectHelper } from '../../../ast-nodes/object';
 import { ObjectEntry } from '../../../ast-nodes/object-entry';
-import { supportedStylesMap } from '../transformers/css-to-xcss';
 import { spaceTokenMap } from '../transformers/space-token-map';
 import { supportedDimensionAttributesMap } from '../transformers/supported-dimension-attributes-map';
+import { supportedStylesMap } from '../transformers/supported-styles-map';
 export var validateStyles = function validateStyles(node, config) {
   if (!node) {
     return false;

package/dist/esm/rules/use-primitives-text/config/{index.js → get-config.js}

@@ -1,12 +1,3 @@
-export var PATTERNS = [
-// <p>text</p>
-'paragraph-elements',
-// <span>text</span>
-'span-elements',
-// <strong>text</strong>
-'strong-elements',
-// <em>text</em>
-'emphasis-elements'];
 var defaults = {
   failSilently: false,
   patterns: ['paragraph-elements', 'span-elements', 'strong-elements', 'emphasis-elements'],

package/dist/esm/rules/use-primitives-text/config/patterns.js

@@ -0,0 +1,9 @@
+export var PATTERNS = [
+// <p>text</p>
+'paragraph-elements',
+// <span>text</span>
+'span-elements',
+// <strong>text</strong>
+'strong-elements',
+// <em>text</em>
+'emphasis-elements'];

package/dist/esm/rules/use-primitives-text/config/types.js

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

package/dist/esm/rules/use-primitives-text/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, PATTERNS } from './config';
+import { getConfig } from './config/get-config';
+import { PATTERNS } from './config/patterns';
 import { EmphasisElements } from './transformers/emphasis-elements';
 import { ParagraphElements } from './transformers/paragraph-elements';
 import { SpanElements } from './transformers/span-elements';

package/dist/esm/rules/use-primitives-text/transformers/add-color-inherit-attribute-fix.js

@@ -1,4 +1,4 @@
-import { JSXElement as JSXElementHelper } from '../../../ast-nodes/jsx-element';
+import { JSXElementHelper } from '../../../ast-nodes/jsx-element-helper';
 // Add color="inherit" prop depending on config
 export function addColorInheritAttributeFix(node, config, fixer) {
   if (!config.inheritColor) {