@atlaskit/eslint-plugin-design-system 8.6.0 → 8.7.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/eslint-plugin-design-system
 
+## 8.7.0
+
+### Minor Changes
+
+- [`859ef96da96`](https://bitbucket.org/atlassian/atlassian-frontend/commits/859ef96da96) - Adds additional rule encouraging the use of CSS logical properties. This rule comes with a fix for code that uses object syntax (via css, styled or xcss) for styles.
+
 ## 8.6.0
 
 ### Minor Changes

package/README.md

@@ -59,6 +59,7 @@ module.exports = {
 | <a href="./src/rules/no-deprecated-imports/README.md">no-deprecated-imports</a>                         | Disallow importing deprecated modules.                                                                                                                                           | Yes         |         |             |
 | <a href="./src/rules/no-margin/README.md">no-margin</a>                                                 | Disallow using the margin CSS property.                                                                                                                                          |             |         |             |
 | <a href="./src/rules/no-nested-styles/README.md">no-nested-styles</a>                                   | Disallows use of nested styles in `css` functions.                                                                                                                               | Yes         |         |             |
+| <a href="./src/rules/no-physical-properties/README.md">no-physical-properties</a>                       | Disallow physical properties and values in `css` function calls.                                                                                                                 |             | Yes     |             |
 | <a href="./src/rules/no-unsafe-design-token-usage/README.md">no-unsafe-design-token-usage</a>           | Enforces design token usage is statically and locally analyzable.                                                                                                                | Yes         | Yes     |             |
 | <a href="./src/rules/prefer-primitives/README.md">prefer-primitives</a>                                 | Increase awareness of primitive components via code hints. Strictly used for education purposes and discoverability. To enforce usage please refer to the `use-primitives` rule. |             |         |             |
 | <a href="./src/rules/use-primitives/README.md">use-primitives</a>                                       | Encourage the usage of primitives components.                                                                                                                                    |             | Yes     | Yes         |

package/constellation/index/usage.mdx

@@ -23,6 +23,7 @@ This plugin contains rules that should be used when working with the [Atlassian
 | <a href="#no-deprecated-imports">no-deprecated-imports</a>                         | Disallow importing deprecated modules.                                                                                                                                           | Yes         |         |             |
 | <a href="#no-margin">no-margin</a>                                                 | Disallow using the margin CSS property.                                                                                                                                          |             |         |             |
 | <a href="#no-nested-styles">no-nested-styles</a>                                   | Disallows use of nested styles in `css` functions.                                                                                                                               | Yes         |         |             |
+| <a href="#no-physical-properties">no-physical-properties</a>                       | Disallow physical properties and values in `css` function calls.                                                                                                                 |             | Yes     |             |
 | <a href="#no-unsafe-design-token-usage">no-unsafe-design-token-usage</a>           | Enforces design token usage is statically and locally analyzable.                                                                                                                | Yes         | Yes     |             |
 | <a href="#prefer-primitives">prefer-primitives</a>                                 | Increase awareness of primitive components via code hints. Strictly used for education purposes and discoverability. To enforce usage please refer to the `use-primitives` rule. |             |         |             |
 | <a href="#use-primitives">use-primitives</a>                                       | Encourage the usage of primitives components.                                                                                                                                    |             | Yes     | Yes         |
@@ -501,6 +502,60 @@ css({
 });
 ```
 
+## no-physical-properties
+
+Disallows using physical properties. Physical properties
+prevent correct support for different reading modes and languages and
+should be avoided. Rule will autofix applicable physical properties
+to instead use [logical properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical_properties_and_values/Basic_concepts_of_logical_properties_and_values).
+
+<h3>Examples</h3>
+
+This rule checks for physical property usage inside of `css` function calls.
+
+#### Incorrect
+
+```js
+css({
+  left: 0,
+  right: 0,
+  top: 0,
+  bottom: 0,
+});
+```
+
+```js
+css({
+  marginLeft: 0,
+});
+```
+
+```js
+css({
+  textAlign: 'left',
+});
+```
+
+#### Correct
+
+```js
+css({
+  inset: 0,
+});
+```
+
+```js
+css({
+  marginInlineStart: 0,
+});
+```
+
+```js
+css({
+  textAlign: 'start',
+});
+```
+
 ## no-unsafe-design-token-usage
 
 Using design tokens in an unsafe way risks the health of the system and will effect how fast your codebase can migrate between versions.

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::e58419a8541918577b92cf04e5172973>>
+ * @codegen <<SignedSource::0dad73a6ffc9bd6b08475ff31c542817>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 var _default = {
@@ -22,6 +22,7 @@ var _default = {
     '@atlaskit/design-system/no-deprecated-imports': '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-unsafe-design-token-usage': 'error',
     '@atlaskit/design-system/prefer-primitives': 'warn',
     '@atlaskit/design-system/use-primitives': 'warn',

package/dist/cjs/rules/index.codegen.js

@@ -15,13 +15,14 @@ var _noDeprecatedDesignTokenUsage = _interopRequireDefault(require("./no-depreca
 var _noDeprecatedImports = _interopRequireDefault(require("./no-deprecated-imports"));
 var _noMargin = _interopRequireDefault(require("./no-margin"));
 var _noNestedStyles = _interopRequireDefault(require("./no-nested-styles"));
+var _noPhysicalProperties = _interopRequireDefault(require("./no-physical-properties"));
 var _noUnsafeDesignTokenUsage = _interopRequireDefault(require("./no-unsafe-design-token-usage"));
 var _preferPrimitives = _interopRequireDefault(require("./prefer-primitives"));
 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::4d3e671ea25ef8fe248882948fda472c>>
+ * @codegen <<SignedSource::6f157f425fabf1a47ca99e3e0b99045b>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 var _default = {
@@ -35,6 +36,7 @@ var _default = {
   'no-deprecated-imports': _noDeprecatedImports.default,
   'no-margin': _noMargin.default,
   'no-nested-styles': _noNestedStyles.default,
+  'no-physical-properties': _noPhysicalProperties.default,
   'no-unsafe-design-token-usage': _noUnsafeDesignTokenUsage.default,
   'prefer-primitives': _preferPrimitives.default,
   'use-primitives': _usePrimitives.default,

package/dist/cjs/rules/no-physical-properties/index.js

@@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _eslintCodemodUtils = require("eslint-codemod-utils");
+var _createRule = require("../utils/create-rule");
+var _logicalPhysicalMap = require("./logical-physical-map");
+var rule = (0, _createRule.createLintRule)({
+  meta: {
+    name: 'no-physical-properties',
+    fixable: 'code',
+    docs: {
+      description: 'Disallow physical properties and values in `css` function calls.',
+      recommended: false,
+      severity: 'error'
+    },
+    messages: {
+      noPhysicalProperties: 'Physical properties are not allowed in `css` functions as they do not support different reading modes. Use a logical property instead.',
+      noPhysicalValues: 'Physical values are not allowed in `css` functions.'
+    }
+  },
+  create: function create(context) {
+    return {
+      'CallExpression[callee.name=css] > ObjectExpression Property,CallExpression[callee.name=xcss] > ObjectExpression Property': function CallExpressionCalleeNameCssObjectExpressionPropertyCallExpressionCalleeNameXcssObjectExpressionProperty(node) {
+        if (!(0, _eslintCodemodUtils.isNodeOfType)(node, 'Property')) {
+          return;
+        }
+        if (!(0, _eslintCodemodUtils.isNodeOfType)(node.key, 'Identifier')) {
+          return;
+        }
+        var key = node.key;
+        if (key.name in _logicalPhysicalMap.physicalLogicalMap) {
+          context.report({
+            node: key,
+            messageId: 'noPhysicalProperties',
+            fix: function fix(fixer) {
+              var logicalProperty = _logicalPhysicalMap.physicalLogicalMap[key.name];
+              return fixer.replaceText(key, logicalProperty);
+            }
+          });
+        }
+      }
+    };
+  }
+});
+var _default = rule;
+exports.default = _default;

package/dist/cjs/rules/no-physical-properties/logical-physical-map.js

@@ -0,0 +1,114 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.physicalLogicalMap = exports.logicalPhysicalMap = void 0;
+/**
+ * Logical property	to physical property map
+ * @example
+ * ```
+ * border-block-end	border-bottom
+ * border-block-end-color	border-bottom-color
+ * border-block-end-style	border-bottom-style
+ * border-block-end-width	border-bottom-width
+ * border-block-start	border-top
+ * border-block-start-color	border-top-color
+ * border-block-start-style	border-top-style
+ * border-block-start-width	border-top-width
+ * border-inline-end	border-right
+ * border-inline-end-color	border-right-color
+ * border-inline-end-style	border-right-style
+ * border-inline-end-width	border-right-width
+ * border-inline-start	border-left
+ * border-inline-start-color	border-left-color
+ * border-inline-start-style	border-left-style
+ * border-inline-start-width	border-left-width
+ * border-start-start-radius	border-top-left-radius
+ * border-end-start-radius	border-bottom-left-radius
+ * border-start-end-radius	border-top-right-radius
+ * border-end-end-radius	border-bottom-right-radius
+ * margin-block-end	margin-bottom
+ * margin-block-start	margin-top
+ * margin-inline-end	margin-right
+ * margin-inline-start	margin-left
+ * padding-block-end	padding-bottom
+ * padding-block-start	padding-top
+ * padding-inline-end	padding-right
+ * padding-inline-start	padding-left
+ * inset-inline-start	left
+ * inset-inline-end	right
+ * inset-block-start	top
+ * inset-block-end	bottom
+ * ```
+ */
+var logicalPhysicalMap = {
+  borderBlockEnd: 'borderBottom',
+  borderBlockEndColor: 'borderBottomColor',
+  borderBlockEndStyle: 'borderBottomStyle',
+  borderBlockEndWidth: 'borderBottomWidth',
+  borderBlockStart: 'borderTop',
+  borderBlockStartColor: 'borderTopColor',
+  borderBlockStartStyle: 'borderTopStyle',
+  borderBlockStartWidth: 'borderTopWidth',
+  borderInlineEnd: 'borderRight',
+  borderInlineEndColor: 'borderRightColor',
+  borderInlineEndStyle: 'borderRightStyle',
+  borderInlineEndWidth: 'borderRightWidth',
+  borderInlineStart: 'borderLeft',
+  borderInlineStartColor: 'borderLeftColor',
+  borderInlineStartStyle: 'borderLeftStyle',
+  borderInlineStartWidth: 'borderLeftWidth',
+  borderStartStartRadius: 'borderTopLeftRadius',
+  borderEndStartRadius: 'borderBottomLeftRadius',
+  borderStartEndRadius: 'borderTopRightRadius',
+  borderEndEndRadius: 'borderBottomRightRadius',
+  marginBlockEnd: 'marginBottom',
+  marginBlockStart: 'marginTop',
+  marginInlineEnd: 'marginRight',
+  marginInlineStart: 'marginLeft',
+  paddingBlockEnd: 'paddingBottom',
+  paddingBlockStart: 'paddingTop',
+  paddingInlineEnd: 'paddingRight',
+  paddingInlineStart: 'paddingLeft',
+  insetInlineStart: 'left',
+  insetInlineEnd: 'right',
+  insetBlockStart: 'top',
+  insetBlockEnd: 'bottom'
+};
+exports.logicalPhysicalMap = logicalPhysicalMap;
+var physicalLogicalMap = {
+  borderBottom: 'borderBlockEnd',
+  borderBottomColor: 'borderBlockEndColor',
+  borderBottomStyle: 'borderBlockEndStyle',
+  borderBottomWidth: 'borderBlockEndWidth',
+  borderTop: 'borderBlockStart',
+  borderTopColor: 'borderBlockStartColor',
+  borderTopStyle: 'borderBlockStartStyle',
+  borderTopWidth: 'borderBlockStartWidth',
+  borderRight: 'borderInlineEnd',
+  borderRightColor: 'borderInlineEndColor',
+  borderRightStyle: 'borderInlineEndStyle',
+  borderRightWidth: 'borderInlineEndWidth',
+  borderLeft: 'borderInlineStart',
+  borderLeftColor: 'borderInlineStartColor',
+  borderLeftStyle: 'borderInlineStartStyle',
+  borderLeftWidth: 'borderInlineStartWidth',
+  borderTopLeftRadius: 'borderStartStartRadius',
+  borderBottomLeftRadius: 'borderEndStartRadius',
+  borderTopRightRadius: 'borderStartEndRadius',
+  borderBottomRightRadius: 'borderEndEndRadius',
+  marginBottom: 'marginBlockEnd',
+  marginTop: 'marginBlockStart',
+  marginRight: 'marginInlineEnd',
+  marginLeft: 'marginInlineStart',
+  paddingBottom: 'paddingBlockEnd',
+  paddingTop: 'paddingBlockStart',
+  paddingRight: 'paddingInlineEnd',
+  paddingLeft: 'paddingInlineStart',
+  left: 'insetInlineStart',
+  right: 'insetInlineEnd',
+  top: 'insetBlockStart',
+  bottom: 'insetBlockEnd'
+};
+exports.physicalLogicalMap = physicalLogicalMap;

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::e58419a8541918577b92cf04e5172973>>
+ * @codegen <<SignedSource::0dad73a6ffc9bd6b08475ff31c542817>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 export default {
@@ -16,6 +16,7 @@ export default {
     '@atlaskit/design-system/no-deprecated-imports': '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-unsafe-design-token-usage': 'error',
     '@atlaskit/design-system/prefer-primitives': 'warn',
     '@atlaskit/design-system/use-primitives': 'warn',

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::4d3e671ea25ef8fe248882948fda472c>>
+ * @codegen <<SignedSource::6f157f425fabf1a47ca99e3e0b99045b>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 import consistentCssPropUsage from './consistent-css-prop-usage';
@@ -13,6 +13,7 @@ import noDeprecatedDesignTokenUsage from './no-deprecated-design-token-usage';
 import noDeprecatedImports from './no-deprecated-imports';
 import noMargin from './no-margin';
 import noNestedStyles from './no-nested-styles';
+import noPhysicalProperties from './no-physical-properties';
 import noUnsafeDesignTokenUsage from './no-unsafe-design-token-usage';
 import preferPrimitives from './prefer-primitives';
 import usePrimitives from './use-primitives';
@@ -28,6 +29,7 @@ export default {
   'no-deprecated-imports': noDeprecatedImports,
   'no-margin': noMargin,
   'no-nested-styles': noNestedStyles,
+  'no-physical-properties': noPhysicalProperties,
   'no-unsafe-design-token-usage': noUnsafeDesignTokenUsage,
   'prefer-primitives': preferPrimitives,
   'use-primitives': usePrimitives,

package/dist/es2019/rules/no-physical-properties/index.js

@@ -0,0 +1,44 @@
+import { isNodeOfType } from 'eslint-codemod-utils';
+import { createLintRule } from '../utils/create-rule';
+import { physicalLogicalMap } from './logical-physical-map';
+const rule = createLintRule({
+  meta: {
+    name: 'no-physical-properties',
+    fixable: 'code',
+    docs: {
+      description: 'Disallow physical properties and values in `css` function calls.',
+      recommended: false,
+      severity: 'error'
+    },
+    messages: {
+      noPhysicalProperties: 'Physical properties are not allowed in `css` functions as they do not support different reading modes. Use a logical property instead.',
+      noPhysicalValues: 'Physical values are not allowed in `css` functions.'
+    }
+  },
+  create(context) {
+    return {
+      'CallExpression[callee.name=css] > ObjectExpression Property,CallExpression[callee.name=xcss] > ObjectExpression Property': node => {
+        if (!isNodeOfType(node, 'Property')) {
+          return;
+        }
+        if (!isNodeOfType(node.key, 'Identifier')) {
+          return;
+        }
+        const {
+          key
+        } = node;
+        if (key.name in physicalLogicalMap) {
+          context.report({
+            node: key,
+            messageId: 'noPhysicalProperties',
+            fix: fixer => {
+              const logicalProperty = physicalLogicalMap[key.name];
+              return fixer.replaceText(key, logicalProperty);
+            }
+          });
+        }
+      }
+    };
+  }
+});
+export default rule;

package/dist/es2019/rules/no-physical-properties/logical-physical-map.js

@@ -0,0 +1,106 @@
+/**
+ * Logical property	to physical property map
+ * @example
+ * ```
+ * border-block-end	border-bottom
+ * border-block-end-color	border-bottom-color
+ * border-block-end-style	border-bottom-style
+ * border-block-end-width	border-bottom-width
+ * border-block-start	border-top
+ * border-block-start-color	border-top-color
+ * border-block-start-style	border-top-style
+ * border-block-start-width	border-top-width
+ * border-inline-end	border-right
+ * border-inline-end-color	border-right-color
+ * border-inline-end-style	border-right-style
+ * border-inline-end-width	border-right-width
+ * border-inline-start	border-left
+ * border-inline-start-color	border-left-color
+ * border-inline-start-style	border-left-style
+ * border-inline-start-width	border-left-width
+ * border-start-start-radius	border-top-left-radius
+ * border-end-start-radius	border-bottom-left-radius
+ * border-start-end-radius	border-top-right-radius
+ * border-end-end-radius	border-bottom-right-radius
+ * margin-block-end	margin-bottom
+ * margin-block-start	margin-top
+ * margin-inline-end	margin-right
+ * margin-inline-start	margin-left
+ * padding-block-end	padding-bottom
+ * padding-block-start	padding-top
+ * padding-inline-end	padding-right
+ * padding-inline-start	padding-left
+ * inset-inline-start	left
+ * inset-inline-end	right
+ * inset-block-start	top
+ * inset-block-end	bottom
+ * ```
+ */
+export const logicalPhysicalMap = {
+  borderBlockEnd: 'borderBottom',
+  borderBlockEndColor: 'borderBottomColor',
+  borderBlockEndStyle: 'borderBottomStyle',
+  borderBlockEndWidth: 'borderBottomWidth',
+  borderBlockStart: 'borderTop',
+  borderBlockStartColor: 'borderTopColor',
+  borderBlockStartStyle: 'borderTopStyle',
+  borderBlockStartWidth: 'borderTopWidth',
+  borderInlineEnd: 'borderRight',
+  borderInlineEndColor: 'borderRightColor',
+  borderInlineEndStyle: 'borderRightStyle',
+  borderInlineEndWidth: 'borderRightWidth',
+  borderInlineStart: 'borderLeft',
+  borderInlineStartColor: 'borderLeftColor',
+  borderInlineStartStyle: 'borderLeftStyle',
+  borderInlineStartWidth: 'borderLeftWidth',
+  borderStartStartRadius: 'borderTopLeftRadius',
+  borderEndStartRadius: 'borderBottomLeftRadius',
+  borderStartEndRadius: 'borderTopRightRadius',
+  borderEndEndRadius: 'borderBottomRightRadius',
+  marginBlockEnd: 'marginBottom',
+  marginBlockStart: 'marginTop',
+  marginInlineEnd: 'marginRight',
+  marginInlineStart: 'marginLeft',
+  paddingBlockEnd: 'paddingBottom',
+  paddingBlockStart: 'paddingTop',
+  paddingInlineEnd: 'paddingRight',
+  paddingInlineStart: 'paddingLeft',
+  insetInlineStart: 'left',
+  insetInlineEnd: 'right',
+  insetBlockStart: 'top',
+  insetBlockEnd: 'bottom'
+};
+export const physicalLogicalMap = {
+  borderBottom: 'borderBlockEnd',
+  borderBottomColor: 'borderBlockEndColor',
+  borderBottomStyle: 'borderBlockEndStyle',
+  borderBottomWidth: 'borderBlockEndWidth',
+  borderTop: 'borderBlockStart',
+  borderTopColor: 'borderBlockStartColor',
+  borderTopStyle: 'borderBlockStartStyle',
+  borderTopWidth: 'borderBlockStartWidth',
+  borderRight: 'borderInlineEnd',
+  borderRightColor: 'borderInlineEndColor',
+  borderRightStyle: 'borderInlineEndStyle',
+  borderRightWidth: 'borderInlineEndWidth',
+  borderLeft: 'borderInlineStart',
+  borderLeftColor: 'borderInlineStartColor',
+  borderLeftStyle: 'borderInlineStartStyle',
+  borderLeftWidth: 'borderInlineStartWidth',
+  borderTopLeftRadius: 'borderStartStartRadius',
+  borderBottomLeftRadius: 'borderEndStartRadius',
+  borderTopRightRadius: 'borderStartEndRadius',
+  borderBottomRightRadius: 'borderEndEndRadius',
+  marginBottom: 'marginBlockEnd',
+  marginTop: 'marginBlockStart',
+  marginRight: 'marginInlineEnd',
+  marginLeft: 'marginInlineStart',
+  paddingBottom: 'paddingBlockEnd',
+  paddingTop: 'paddingBlockStart',
+  paddingRight: 'paddingInlineEnd',
+  paddingLeft: 'paddingInlineStart',
+  left: 'insetInlineStart',
+  right: 'insetInlineEnd',
+  top: 'insetBlockStart',
+  bottom: 'insetBlockEnd'
+};

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::e58419a8541918577b92cf04e5172973>>
+ * @codegen <<SignedSource::0dad73a6ffc9bd6b08475ff31c542817>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 export default {
@@ -16,6 +16,7 @@ export default {
     '@atlaskit/design-system/no-deprecated-imports': '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-unsafe-design-token-usage': 'error',
     '@atlaskit/design-system/prefer-primitives': 'warn',
     '@atlaskit/design-system/use-primitives': 'warn',

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::4d3e671ea25ef8fe248882948fda472c>>
+ * @codegen <<SignedSource::6f157f425fabf1a47ca99e3e0b99045b>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 import consistentCssPropUsage from './consistent-css-prop-usage';
@@ -13,6 +13,7 @@ import noDeprecatedDesignTokenUsage from './no-deprecated-design-token-usage';
 import noDeprecatedImports from './no-deprecated-imports';
 import noMargin from './no-margin';
 import noNestedStyles from './no-nested-styles';
+import noPhysicalProperties from './no-physical-properties';
 import noUnsafeDesignTokenUsage from './no-unsafe-design-token-usage';
 import preferPrimitives from './prefer-primitives';
 import usePrimitives from './use-primitives';
@@ -28,6 +29,7 @@ export default {
   'no-deprecated-imports': noDeprecatedImports,
   'no-margin': noMargin,
   'no-nested-styles': noNestedStyles,
+  'no-physical-properties': noPhysicalProperties,
   'no-unsafe-design-token-usage': noUnsafeDesignTokenUsage,
   'prefer-primitives': preferPrimitives,
   'use-primitives': usePrimitives,

package/dist/esm/rules/no-physical-properties/index.js

@@ -0,0 +1,42 @@
+import { isNodeOfType } from 'eslint-codemod-utils';
+import { createLintRule } from '../utils/create-rule';
+import { physicalLogicalMap } from './logical-physical-map';
+var rule = createLintRule({
+  meta: {
+    name: 'no-physical-properties',
+    fixable: 'code',
+    docs: {
+      description: 'Disallow physical properties and values in `css` function calls.',
+      recommended: false,
+      severity: 'error'
+    },
+    messages: {
+      noPhysicalProperties: 'Physical properties are not allowed in `css` functions as they do not support different reading modes. Use a logical property instead.',
+      noPhysicalValues: 'Physical values are not allowed in `css` functions.'
+    }
+  },
+  create: function create(context) {
+    return {
+      'CallExpression[callee.name=css] > ObjectExpression Property,CallExpression[callee.name=xcss] > ObjectExpression Property': function CallExpressionCalleeNameCssObjectExpressionPropertyCallExpressionCalleeNameXcssObjectExpressionProperty(node) {
+        if (!isNodeOfType(node, 'Property')) {
+          return;
+        }
+        if (!isNodeOfType(node.key, 'Identifier')) {
+          return;
+        }
+        var key = node.key;
+        if (key.name in physicalLogicalMap) {
+          context.report({
+            node: key,
+            messageId: 'noPhysicalProperties',
+            fix: function fix(fixer) {
+              var logicalProperty = physicalLogicalMap[key.name];
+              return fixer.replaceText(key, logicalProperty);
+            }
+          });
+        }
+      }
+    };
+  }
+});
+export default rule;

package/dist/esm/rules/no-physical-properties/logical-physical-map.js

@@ -0,0 +1,106 @@
+/**
+ * Logical property	to physical property map
+ * @example
+ * ```
+ * border-block-end	border-bottom
+ * border-block-end-color	border-bottom-color
+ * border-block-end-style	border-bottom-style
+ * border-block-end-width	border-bottom-width
+ * border-block-start	border-top
+ * border-block-start-color	border-top-color
+ * border-block-start-style	border-top-style
+ * border-block-start-width	border-top-width
+ * border-inline-end	border-right
+ * border-inline-end-color	border-right-color
+ * border-inline-end-style	border-right-style
+ * border-inline-end-width	border-right-width
+ * border-inline-start	border-left
+ * border-inline-start-color	border-left-color
+ * border-inline-start-style	border-left-style
+ * border-inline-start-width	border-left-width
+ * border-start-start-radius	border-top-left-radius
+ * border-end-start-radius	border-bottom-left-radius
+ * border-start-end-radius	border-top-right-radius
+ * border-end-end-radius	border-bottom-right-radius
+ * margin-block-end	margin-bottom
+ * margin-block-start	margin-top
+ * margin-inline-end	margin-right
+ * margin-inline-start	margin-left
+ * padding-block-end	padding-bottom
+ * padding-block-start	padding-top
+ * padding-inline-end	padding-right
+ * padding-inline-start	padding-left
+ * inset-inline-start	left
+ * inset-inline-end	right
+ * inset-block-start	top
+ * inset-block-end	bottom
+ * ```
+ */
+export var logicalPhysicalMap = {
+  borderBlockEnd: 'borderBottom',
+  borderBlockEndColor: 'borderBottomColor',
+  borderBlockEndStyle: 'borderBottomStyle',
+  borderBlockEndWidth: 'borderBottomWidth',
+  borderBlockStart: 'borderTop',
+  borderBlockStartColor: 'borderTopColor',
+  borderBlockStartStyle: 'borderTopStyle',
+  borderBlockStartWidth: 'borderTopWidth',
+  borderInlineEnd: 'borderRight',
+  borderInlineEndColor: 'borderRightColor',
+  borderInlineEndStyle: 'borderRightStyle',
+  borderInlineEndWidth: 'borderRightWidth',
+  borderInlineStart: 'borderLeft',
+  borderInlineStartColor: 'borderLeftColor',
+  borderInlineStartStyle: 'borderLeftStyle',
+  borderInlineStartWidth: 'borderLeftWidth',
+  borderStartStartRadius: 'borderTopLeftRadius',
+  borderEndStartRadius: 'borderBottomLeftRadius',
+  borderStartEndRadius: 'borderTopRightRadius',
+  borderEndEndRadius: 'borderBottomRightRadius',
+  marginBlockEnd: 'marginBottom',
+  marginBlockStart: 'marginTop',
+  marginInlineEnd: 'marginRight',
+  marginInlineStart: 'marginLeft',
+  paddingBlockEnd: 'paddingBottom',
+  paddingBlockStart: 'paddingTop',
+  paddingInlineEnd: 'paddingRight',
+  paddingInlineStart: 'paddingLeft',
+  insetInlineStart: 'left',
+  insetInlineEnd: 'right',
+  insetBlockStart: 'top',
+  insetBlockEnd: 'bottom'
+};
+export var physicalLogicalMap = {
+  borderBottom: 'borderBlockEnd',
+  borderBottomColor: 'borderBlockEndColor',
+  borderBottomStyle: 'borderBlockEndStyle',
+  borderBottomWidth: 'borderBlockEndWidth',
+  borderTop: 'borderBlockStart',
+  borderTopColor: 'borderBlockStartColor',
+  borderTopStyle: 'borderBlockStartStyle',
+  borderTopWidth: 'borderBlockStartWidth',
+  borderRight: 'borderInlineEnd',
+  borderRightColor: 'borderInlineEndColor',
+  borderRightStyle: 'borderInlineEndStyle',
+  borderRightWidth: 'borderInlineEndWidth',
+  borderLeft: 'borderInlineStart',
+  borderLeftColor: 'borderInlineStartColor',
+  borderLeftStyle: 'borderInlineStartStyle',
+  borderLeftWidth: 'borderInlineStartWidth',
+  borderTopLeftRadius: 'borderStartStartRadius',
+  borderBottomLeftRadius: 'borderEndStartRadius',
+  borderTopRightRadius: 'borderStartEndRadius',
+  borderBottomRightRadius: 'borderEndEndRadius',
+  marginBottom: 'marginBlockEnd',
+  marginTop: 'marginBlockStart',
+  marginRight: 'marginInlineEnd',
+  marginLeft: 'marginInlineStart',
+  paddingBottom: 'paddingBlockEnd',
+  paddingTop: 'paddingBlockStart',
+  paddingRight: 'paddingInlineEnd',
+  paddingLeft: 'paddingInlineStart',
+  left: 'insetInlineStart',
+  right: 'insetInlineEnd',
+  top: 'insetBlockStart',
+  bottom: 'insetBlockEnd'
+};

package/dist/types/index.codegen.d.ts

@@ -13,6 +13,7 @@ export declare const configs: {
             '@atlaskit/design-system/no-deprecated-imports': string;
             '@atlaskit/design-system/no-margin': string;
             '@atlaskit/design-system/no-nested-styles': string;
+            '@atlaskit/design-system/no-physical-properties': string;
             '@atlaskit/design-system/no-unsafe-design-token-usage': string;
             '@atlaskit/design-system/prefer-primitives': string;
             '@atlaskit/design-system/use-primitives': string;

package/dist/types/presets/all.codegen.d.ts

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::e58419a8541918577b92cf04e5172973>>
+ * @codegen <<SignedSource::0dad73a6ffc9bd6b08475ff31c542817>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 declare const _default: {
@@ -16,6 +16,7 @@ declare const _default: {
         '@atlaskit/design-system/no-deprecated-imports': string;
         '@atlaskit/design-system/no-margin': string;
         '@atlaskit/design-system/no-nested-styles': string;
+        '@atlaskit/design-system/no-physical-properties': string;
         '@atlaskit/design-system/no-unsafe-design-token-usage': string;
         '@atlaskit/design-system/prefer-primitives': string;
         '@atlaskit/design-system/use-primitives': string;

package/dist/types/rules/index.codegen.d.ts

@@ -13,6 +13,7 @@ declare const _default: {
     }], import("@typescript-eslint/utils/dist/ts-eslint/Rule").RuleListener>;
     'no-margin': import("eslint").Rule.RuleModule;
     'no-nested-styles': import("eslint").Rule.RuleModule;
+    'no-physical-properties': import("eslint").Rule.RuleModule;
     'no-unsafe-design-token-usage': import("eslint").Rule.RuleModule;
     'prefer-primitives': import("eslint").Rule.RuleModule;
     'use-primitives': import("eslint").Rule.RuleModule;

package/dist/types/rules/no-physical-properties/index.d.ts

@@ -0,0 +1,3 @@
+import type { Rule } from 'eslint';
+declare const rule: Rule.RuleModule;
+export default rule;

package/dist/types/rules/no-physical-properties/logical-physical-map.d.ts

@@ -0,0 +1,106 @@
+/**
+ * Logical property	to physical property map
+ * @example
+ * ```
+ * border-block-end	border-bottom
+ * border-block-end-color	border-bottom-color
+ * border-block-end-style	border-bottom-style
+ * border-block-end-width	border-bottom-width
+ * border-block-start	border-top
+ * border-block-start-color	border-top-color
+ * border-block-start-style	border-top-style
+ * border-block-start-width	border-top-width
+ * border-inline-end	border-right
+ * border-inline-end-color	border-right-color
+ * border-inline-end-style	border-right-style
+ * border-inline-end-width	border-right-width
+ * border-inline-start	border-left
+ * border-inline-start-color	border-left-color
+ * border-inline-start-style	border-left-style
+ * border-inline-start-width	border-left-width
+ * border-start-start-radius	border-top-left-radius
+ * border-end-start-radius	border-bottom-left-radius
+ * border-start-end-radius	border-top-right-radius
+ * border-end-end-radius	border-bottom-right-radius
+ * margin-block-end	margin-bottom
+ * margin-block-start	margin-top
+ * margin-inline-end	margin-right
+ * margin-inline-start	margin-left
+ * padding-block-end	padding-bottom
+ * padding-block-start	padding-top
+ * padding-inline-end	padding-right
+ * padding-inline-start	padding-left
+ * inset-inline-start	left
+ * inset-inline-end	right
+ * inset-block-start	top
+ * inset-block-end	bottom
+ * ```
+ */
+export declare const logicalPhysicalMap: {
+    readonly borderBlockEnd: "borderBottom";
+    readonly borderBlockEndColor: "borderBottomColor";
+    readonly borderBlockEndStyle: "borderBottomStyle";
+    readonly borderBlockEndWidth: "borderBottomWidth";
+    readonly borderBlockStart: "borderTop";
+    readonly borderBlockStartColor: "borderTopColor";
+    readonly borderBlockStartStyle: "borderTopStyle";
+    readonly borderBlockStartWidth: "borderTopWidth";
+    readonly borderInlineEnd: "borderRight";
+    readonly borderInlineEndColor: "borderRightColor";
+    readonly borderInlineEndStyle: "borderRightStyle";
+    readonly borderInlineEndWidth: "borderRightWidth";
+    readonly borderInlineStart: "borderLeft";
+    readonly borderInlineStartColor: "borderLeftColor";
+    readonly borderInlineStartStyle: "borderLeftStyle";
+    readonly borderInlineStartWidth: "borderLeftWidth";
+    readonly borderStartStartRadius: "borderTopLeftRadius";
+    readonly borderEndStartRadius: "borderBottomLeftRadius";
+    readonly borderStartEndRadius: "borderTopRightRadius";
+    readonly borderEndEndRadius: "borderBottomRightRadius";
+    readonly marginBlockEnd: "marginBottom";
+    readonly marginBlockStart: "marginTop";
+    readonly marginInlineEnd: "marginRight";
+    readonly marginInlineStart: "marginLeft";
+    readonly paddingBlockEnd: "paddingBottom";
+    readonly paddingBlockStart: "paddingTop";
+    readonly paddingInlineEnd: "paddingRight";
+    readonly paddingInlineStart: "paddingLeft";
+    readonly insetInlineStart: "left";
+    readonly insetInlineEnd: "right";
+    readonly insetBlockStart: "top";
+    readonly insetBlockEnd: "bottom";
+};
+export declare const physicalLogicalMap: {
+    readonly borderBottom: "borderBlockEnd";
+    readonly borderBottomColor: "borderBlockEndColor";
+    readonly borderBottomStyle: "borderBlockEndStyle";
+    readonly borderBottomWidth: "borderBlockEndWidth";
+    readonly borderTop: "borderBlockStart";
+    readonly borderTopColor: "borderBlockStartColor";
+    readonly borderTopStyle: "borderBlockStartStyle";
+    readonly borderTopWidth: "borderBlockStartWidth";
+    readonly borderRight: "borderInlineEnd";
+    readonly borderRightColor: "borderInlineEndColor";
+    readonly borderRightStyle: "borderInlineEndStyle";
+    readonly borderRightWidth: "borderInlineEndWidth";
+    readonly borderLeft: "borderInlineStart";
+    readonly borderLeftColor: "borderInlineStartColor";
+    readonly borderLeftStyle: "borderInlineStartStyle";
+    readonly borderLeftWidth: "borderInlineStartWidth";
+    readonly borderTopLeftRadius: "borderStartStartRadius";
+    readonly borderBottomLeftRadius: "borderEndStartRadius";
+    readonly borderTopRightRadius: "borderStartEndRadius";
+    readonly borderBottomRightRadius: "borderEndEndRadius";
+    readonly marginBottom: "marginBlockEnd";
+    readonly marginTop: "marginBlockStart";
+    readonly marginRight: "marginInlineEnd";
+    readonly marginLeft: "marginInlineStart";
+    readonly paddingBottom: "paddingBlockEnd";
+    readonly paddingTop: "paddingBlockStart";
+    readonly paddingRight: "paddingInlineEnd";
+    readonly paddingLeft: "paddingInlineStart";
+    readonly left: "insetInlineStart";
+    readonly right: "insetInlineEnd";
+    readonly top: "insetBlockStart";
+    readonly bottom: "insetBlockEnd";
+};

package/dist/types-ts4.5/index.codegen.d.ts

@@ -13,6 +13,7 @@ export declare const configs: {
             '@atlaskit/design-system/no-deprecated-imports': string;
             '@atlaskit/design-system/no-margin': string;
             '@atlaskit/design-system/no-nested-styles': string;
+            '@atlaskit/design-system/no-physical-properties': string;
             '@atlaskit/design-system/no-unsafe-design-token-usage': string;
             '@atlaskit/design-system/prefer-primitives': string;
             '@atlaskit/design-system/use-primitives': string;

package/dist/types-ts4.5/presets/all.codegen.d.ts

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::e58419a8541918577b92cf04e5172973>>
+ * @codegen <<SignedSource::0dad73a6ffc9bd6b08475ff31c542817>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 declare const _default: {
@@ -16,6 +16,7 @@ declare const _default: {
         '@atlaskit/design-system/no-deprecated-imports': string;
         '@atlaskit/design-system/no-margin': string;
         '@atlaskit/design-system/no-nested-styles': string;
+        '@atlaskit/design-system/no-physical-properties': string;
         '@atlaskit/design-system/no-unsafe-design-token-usage': string;
         '@atlaskit/design-system/prefer-primitives': string;
         '@atlaskit/design-system/use-primitives': string;

package/dist/types-ts4.5/rules/index.codegen.d.ts

@@ -17,6 +17,7 @@ declare const _default: {
     ], import("@typescript-eslint/utils/dist/ts-eslint/Rule").RuleListener>;
     'no-margin': import("eslint").Rule.RuleModule;
     'no-nested-styles': import("eslint").Rule.RuleModule;
+    'no-physical-properties': import("eslint").Rule.RuleModule;
     'no-unsafe-design-token-usage': import("eslint").Rule.RuleModule;
     'prefer-primitives': import("eslint").Rule.RuleModule;
     'use-primitives': import("eslint").Rule.RuleModule;

package/dist/types-ts4.5/rules/no-physical-properties/index.d.ts

@@ -0,0 +1,3 @@
+import type { Rule } from 'eslint';
+declare const rule: Rule.RuleModule;
+export default rule;

package/dist/types-ts4.5/rules/no-physical-properties/logical-physical-map.d.ts

@@ -0,0 +1,106 @@
+/**
+ * Logical property	to physical property map
+ * @example
+ * ```
+ * border-block-end	border-bottom
+ * border-block-end-color	border-bottom-color
+ * border-block-end-style	border-bottom-style
+ * border-block-end-width	border-bottom-width
+ * border-block-start	border-top
+ * border-block-start-color	border-top-color
+ * border-block-start-style	border-top-style
+ * border-block-start-width	border-top-width
+ * border-inline-end	border-right
+ * border-inline-end-color	border-right-color
+ * border-inline-end-style	border-right-style
+ * border-inline-end-width	border-right-width
+ * border-inline-start	border-left
+ * border-inline-start-color	border-left-color
+ * border-inline-start-style	border-left-style
+ * border-inline-start-width	border-left-width
+ * border-start-start-radius	border-top-left-radius
+ * border-end-start-radius	border-bottom-left-radius
+ * border-start-end-radius	border-top-right-radius
+ * border-end-end-radius	border-bottom-right-radius
+ * margin-block-end	margin-bottom
+ * margin-block-start	margin-top
+ * margin-inline-end	margin-right
+ * margin-inline-start	margin-left
+ * padding-block-end	padding-bottom
+ * padding-block-start	padding-top
+ * padding-inline-end	padding-right
+ * padding-inline-start	padding-left
+ * inset-inline-start	left
+ * inset-inline-end	right
+ * inset-block-start	top
+ * inset-block-end	bottom
+ * ```
+ */
+export declare const logicalPhysicalMap: {
+    readonly borderBlockEnd: "borderBottom";
+    readonly borderBlockEndColor: "borderBottomColor";
+    readonly borderBlockEndStyle: "borderBottomStyle";
+    readonly borderBlockEndWidth: "borderBottomWidth";
+    readonly borderBlockStart: "borderTop";
+    readonly borderBlockStartColor: "borderTopColor";
+    readonly borderBlockStartStyle: "borderTopStyle";
+    readonly borderBlockStartWidth: "borderTopWidth";
+    readonly borderInlineEnd: "borderRight";
+    readonly borderInlineEndColor: "borderRightColor";
+    readonly borderInlineEndStyle: "borderRightStyle";
+    readonly borderInlineEndWidth: "borderRightWidth";
+    readonly borderInlineStart: "borderLeft";
+    readonly borderInlineStartColor: "borderLeftColor";
+    readonly borderInlineStartStyle: "borderLeftStyle";
+    readonly borderInlineStartWidth: "borderLeftWidth";
+    readonly borderStartStartRadius: "borderTopLeftRadius";
+    readonly borderEndStartRadius: "borderBottomLeftRadius";
+    readonly borderStartEndRadius: "borderTopRightRadius";
+    readonly borderEndEndRadius: "borderBottomRightRadius";
+    readonly marginBlockEnd: "marginBottom";
+    readonly marginBlockStart: "marginTop";
+    readonly marginInlineEnd: "marginRight";
+    readonly marginInlineStart: "marginLeft";
+    readonly paddingBlockEnd: "paddingBottom";
+    readonly paddingBlockStart: "paddingTop";
+    readonly paddingInlineEnd: "paddingRight";
+    readonly paddingInlineStart: "paddingLeft";
+    readonly insetInlineStart: "left";
+    readonly insetInlineEnd: "right";
+    readonly insetBlockStart: "top";
+    readonly insetBlockEnd: "bottom";
+};
+export declare const physicalLogicalMap: {
+    readonly borderBottom: "borderBlockEnd";
+    readonly borderBottomColor: "borderBlockEndColor";
+    readonly borderBottomStyle: "borderBlockEndStyle";
+    readonly borderBottomWidth: "borderBlockEndWidth";
+    readonly borderTop: "borderBlockStart";
+    readonly borderTopColor: "borderBlockStartColor";
+    readonly borderTopStyle: "borderBlockStartStyle";
+    readonly borderTopWidth: "borderBlockStartWidth";
+    readonly borderRight: "borderInlineEnd";
+    readonly borderRightColor: "borderInlineEndColor";
+    readonly borderRightStyle: "borderInlineEndStyle";
+    readonly borderRightWidth: "borderInlineEndWidth";
+    readonly borderLeft: "borderInlineStart";
+    readonly borderLeftColor: "borderInlineStartColor";
+    readonly borderLeftStyle: "borderInlineStartStyle";
+    readonly borderLeftWidth: "borderInlineStartWidth";
+    readonly borderTopLeftRadius: "borderStartStartRadius";
+    readonly borderBottomLeftRadius: "borderEndStartRadius";
+    readonly borderTopRightRadius: "borderStartEndRadius";
+    readonly borderBottomRightRadius: "borderEndEndRadius";
+    readonly marginBottom: "marginBlockEnd";
+    readonly marginTop: "marginBlockStart";
+    readonly marginRight: "marginInlineEnd";
+    readonly marginLeft: "marginInlineStart";
+    readonly paddingBottom: "paddingBlockEnd";
+    readonly paddingTop: "paddingBlockStart";
+    readonly paddingRight: "paddingInlineEnd";
+    readonly paddingLeft: "paddingInlineStart";
+    readonly left: "insetInlineStart";
+    readonly right: "insetInlineEnd";
+    readonly top: "insetBlockStart";
+    readonly bottom: "insetBlockEnd";
+};

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.6.0",
+  "version": "8.7.0",
   "author": "Atlassian Pty Ltd",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"

package/report.api.md

@@ -34,6 +34,7 @@ export const configs: {
       '@atlaskit/design-system/no-deprecated-imports': string;
       '@atlaskit/design-system/no-margin': string;
       '@atlaskit/design-system/no-nested-styles': string;
+      '@atlaskit/design-system/no-physical-properties': string;
       '@atlaskit/design-system/no-unsafe-design-token-usage': string;
       '@atlaskit/design-system/prefer-primitives': string;
       '@atlaskit/design-system/use-primitives': string;
@@ -120,6 +121,7 @@ export const rules: {
   >;
   'no-margin': Rule.RuleModule;
   'no-nested-styles': Rule.RuleModule;
+  'no-physical-properties': Rule.RuleModule;
   'no-unsafe-design-token-usage': Rule.RuleModule;
   'prefer-primitives': Rule.RuleModule;
   'use-primitives': Rule.RuleModule;

package/tmp/api-report-tmp.d.ts

@@ -23,6 +23,7 @@ export const configs: {
             '@atlaskit/design-system/no-deprecated-imports': string;
             '@atlaskit/design-system/no-margin': string;
             '@atlaskit/design-system/no-nested-styles': string;
+            '@atlaskit/design-system/no-physical-properties': string;
             '@atlaskit/design-system/no-unsafe-design-token-usage': string;
             '@atlaskit/design-system/prefer-primitives': string;
             '@atlaskit/design-system/use-primitives': string;
@@ -94,6 +95,7 @@ export const rules: {
     }], RuleListener>;
     'no-margin': Rule.RuleModule;
     'no-nested-styles': Rule.RuleModule;
+    'no-physical-properties': Rule.RuleModule;
     'no-unsafe-design-token-usage': Rule.RuleModule;
     'prefer-primitives': Rule.RuleModule;
     'use-primitives': Rule.RuleModule;