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

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/eslint-plugin-design-system
 
+## 8.29.0
+
+### Minor Changes
+
+- [#74069](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/74069) [`9bdcd6529453`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/9bdcd6529453) - Allow use-primitives linting rule to lint style declarations with dimension properties.
+
 ## 8.28.0
 
 ### Minor Changes

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/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)

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

@@ -1,4 +1,7 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+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 { getIdentifierInParentScope, identifier, isNodeOfType, literal } from 'eslint-codemod-utils';
 import { getAttributeValueIdentifier, getFunctionArgumentAtPos, getJSXAttributeByName, getVariableDefinitionValue } from '../utils';
 export var cssToXcssTransformer = function cssToXcssTransformer(node, context, fixer) {
@@ -83,7 +86,18 @@ export var spaceTokenMap = {
   '64px': 'space.800',
   '80px': 'space.1000'
 };
-export var supportedStylesMap = {
+export var dimensionsMap = {
+  '100%': '100%'
+};
+export var supportedDimensionAttributesMap = {
+  width: dimensionsMap,
+  height: dimensionsMap,
+  minWidth: dimensionsMap,
+  minHeight: dimensionsMap,
+  maxWidth: dimensionsMap,
+  maxHeight: dimensionsMap
+};
+export var supportedStylesMap = _objectSpread({
   padding: spaceTokenMap,
   paddingBlock: spaceTokenMap,
   paddingBlockEnd: spaceTokenMap,
@@ -106,4 +120,4 @@ export var supportedStylesMap = {
   marginLeft: spaceTokenMap,
   marginRight: spaceTokenMap,
   marginTop: spaceTokenMap
-};
+}, supportedDimensionAttributesMap);

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

@@ -3,7 +3,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["unsupported"];
 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 var isValidCssPropertiesToTransform = function isValidCssPropertiesToTransform(node, config) {
   if (!node) {
@@ -40,6 +40,13 @@ export var isValidCssPropertiesToTransform = function isValidCssPropertiesToTran
     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 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/types/rules/use-primitives/config/index.d.ts

@@ -1,4 +1,4 @@
-type Pattern = 'compiled-css-function' | 'compiled-styled-object' | 'css-template-literal' | 'css-property-with-tokens' | 'css-property-multiple-values' | 'multiple-properties';
+type Pattern = 'compiled-css-function' | 'compiled-styled-object' | 'css-template-literal' | 'css-property-with-tokens' | 'css-property-multiple-values' | 'multiple-properties' | 'dimension-properties';
 export interface RuleConfig {
     patterns: Pattern[];
 }

package/dist/types/rules/use-primitives/transformers/css-to-xcss.d.ts

@@ -5,6 +5,12 @@ export declare const styledObjectToXcssTokens: (styles: ObjectExpression & Parti
 export declare const spaceTokenMap: {
     [key: string]: string;
 };
+export declare const dimensionsMap: {
+    [key: string]: string;
+};
+export declare const supportedDimensionAttributesMap: {
+    [key: string]: typeof spaceTokenMap;
+};
 export declare const supportedStylesMap: {
     [key: string]: typeof spaceTokenMap;
 };

package/dist/types-ts4.5/rules/use-primitives/config/index.d.ts

@@ -1,4 +1,4 @@
-type Pattern = 'compiled-css-function' | 'compiled-styled-object' | 'css-template-literal' | 'css-property-with-tokens' | 'css-property-multiple-values' | 'multiple-properties';
+type Pattern = 'compiled-css-function' | 'compiled-styled-object' | 'css-template-literal' | 'css-property-with-tokens' | 'css-property-multiple-values' | 'multiple-properties' | 'dimension-properties';
 export interface RuleConfig {
     patterns: Pattern[];
 }

package/dist/types-ts4.5/rules/use-primitives/transformers/css-to-xcss.d.ts

@@ -5,6 +5,12 @@ export declare const styledObjectToXcssTokens: (styles: ObjectExpression & Parti
 export declare const spaceTokenMap: {
     [key: string]: string;
 };
+export declare const dimensionsMap: {
+    [key: string]: string;
+};
+export declare const supportedDimensionAttributesMap: {
+    [key: string]: typeof spaceTokenMap;
+};
 export declare const supportedStylesMap: {
     [key: string]: typeof spaceTokenMap;
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@atlaskit/eslint-plugin-design-system",
   "description": "The essential plugin for use with the Atlassian Design System.",
-  "version": "8.28.0",
+  "version": "8.29.0",
   "author": "Atlassian Pty Ltd",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"