@atlaskit/eslint-plugin-design-system 8.37.3 → 9.0.0

package/dist/es2019/rules/use-tokens-space/transformers/style-property/style-map.js

@@ -0,0 +1,152 @@
+// TODO: https://product-fabric.atlassian.net/browse/DSP-16054
+const tokenMap = {
+  '-2px': 'space.negative.025',
+  '-4px': 'space.negative.050',
+  '-6px': 'space.negative.075',
+  '-8px': 'space.negative.100',
+  '-12px': 'space.negative.150',
+  '-16px': 'space.negative.200',
+  '-20px': 'space.negative.250',
+  '-24px': 'space.negative.300',
+  '-32px': 'space.negative.400',
+  [-2]: 'space.negative.025',
+  [-4]: 'space.negative.050',
+  [-6]: 'space.negative.075',
+  [-8]: 'space.negative.100',
+  [-12]: 'space.negative.150',
+  [-16]: 'space.negative.200',
+  [-20]: 'space.negative.250',
+  [-24]: 'space.negative.300',
+  [-32]: 'space.negative.400',
+  // '0px': 'space.0', // Don't map 0 to match the implementation of `ensure-design-token-usage`
+  '2px': 'space.025',
+  '4px': 'space.050',
+  '6px': 'space.075',
+  '8px': 'space.100',
+  '12px': 'space.150',
+  '16px': 'space.200',
+  '20px': 'space.250',
+  '24px': 'space.300',
+  '32px': 'space.400',
+  '40px': 'space.500',
+  '48px': 'space.600',
+  '64px': 'space.800',
+  '80px': 'space.1000',
+  // 0: 'space.0', // Don't map 0 to match the implementation of `ensure-design-token-usage`
+  2: 'space.025',
+  4: 'space.050',
+  6: 'space.075',
+  8: 'space.100',
+  12: 'space.150',
+  16: 'space.200',
+  20: 'space.250',
+  24: 'space.300',
+  32: 'space.400',
+  40: 'space.500',
+  48: 'space.600',
+  64: 'space.800',
+  80: 'space.1000',
+  '-0.125rem': 'space.negative.025',
+  '-0.25rem': 'space.negative.050',
+  '-0.375rem': 'space.negative.075',
+  '-0.5rem': 'space.negative.100',
+  '-0.75rem': 'space.negative.150',
+  '-1rem': 'space.negative.200',
+  '-1.25rem': 'space.negative.250',
+  '-1.5rem': 'space.negative.300',
+  '-2rem': 'space.negative.400',
+  '0.125rem': 'space.025',
+  '0.25rem': 'space.050',
+  '0.375rem': 'space.075',
+  '0.5rem': 'space.100',
+  '0.75rem': 'space.150',
+  '1rem': 'space.200',
+  '1.25rem': 'space.250',
+  '1.5rem': 'space.300',
+  '2rem': 'space.400',
+  '2.5rem': 'space.500',
+  '3rem': 'space.600',
+  '4rem': 'space.800',
+  '5rem': 'space.1000',
+  '-0.125em': 'space.negative.025',
+  '-0.25em': 'space.negative.050',
+  '-0.375em': 'space.negative.075',
+  '-0.5em': 'space.negative.100',
+  '-0.75em': 'space.negative.150',
+  '-1em': 'space.negative.200',
+  '-1.25em': 'space.negative.250',
+  '-1.5em': 'space.negative.300',
+  '-2em': 'space.negative.400',
+  '0.125em': 'space.025',
+  '0.25em': 'space.050',
+  '0.375em': 'space.075',
+  '0.5em': 'space.100',
+  '0.75em': 'space.150',
+  '1em': 'space.200',
+  '1.25em': 'space.250',
+  '1.5em': 'space.300',
+  '2em': 'space.400',
+  '2.5em': 'space.500',
+  '3em': 'space.600',
+  '4em': 'space.800',
+  '5em': 'space.1000'
+};
+export const styleMap = {
+  'column-gap': tokenMap,
+  columnGap: tokenMap,
+  gap: tokenMap,
+  'grid-column-gap': tokenMap,
+  'grid-row-gap': tokenMap,
+  gridColumnGap: tokenMap,
+  gridRowGap: tokenMap,
+  'margin-block-end': tokenMap,
+  'margin-block-start': tokenMap,
+  'margin-block': tokenMap,
+  'margin-bottom': tokenMap,
+  'margin-inline-end': tokenMap,
+  'margin-inline-start': tokenMap,
+  'margin-inline': tokenMap,
+  'margin-left': tokenMap,
+  'margin-right': tokenMap,
+  'margin-top': tokenMap,
+  'outline-offset': tokenMap,
+  outlineOffset: tokenMap,
+  'padding-block-end': tokenMap,
+  'padding-block-start': tokenMap,
+  'padding-block': tokenMap,
+  'padding-bottom': tokenMap,
+  'padding-inline-end': tokenMap,
+  'padding-inline-start': tokenMap,
+  'padding-inline': tokenMap,
+  'padding-left': tokenMap,
+  'padding-right': tokenMap,
+  'padding-top': tokenMap,
+  'row-gap': tokenMap,
+  rowGap: tokenMap,
+  margin: tokenMap,
+  marginBlock: tokenMap,
+  marginBlockEnd: tokenMap,
+  marginBlockStart: tokenMap,
+  marginBottom: tokenMap,
+  marginInline: tokenMap,
+  marginInlineEnd: tokenMap,
+  marginInlineStart: tokenMap,
+  marginLeft: tokenMap,
+  marginRight: tokenMap,
+  marginTop: tokenMap,
+  padding: tokenMap,
+  paddingBlock: tokenMap,
+  paddingBlockEnd: tokenMap,
+  paddingBlockStart: tokenMap,
+  paddingBottom: tokenMap,
+  paddingInline: tokenMap,
+  paddingInlineEnd: tokenMap,
+  paddingInlineStart: tokenMap,
+  paddingLeft: tokenMap,
+  paddingRight: tokenMap,
+  paddingTop: tokenMap
+  // bottom: tokenMap,
+  // left: tokenMap,
+  // right: tokenMap,
+  // top: tokenMap,
+};

package/dist/es2019/rules/use-tokens-space/transformers/style-property/supported.js

@@ -0,0 +1,8 @@
+export default {
+  values: {
+    ignore: ['auto', 'initial', 'inherit', 'unset', 'revert', 'revert-layer', 'none',
+    // outline-offset can be set to none
+    // Currently the DST opinion is that 0 is valid. It doesn't need to be converted to `space.0`
+    0, '0', '0px', '0em', '0rem']
+  }
+};

package/dist/es2019/rules/use-tokens-space/transformers/style-property/upsert-import-declaration.js

@@ -0,0 +1,30 @@
+import * as ast from '../../../../ast-nodes';
+
+/**
+ * Currently this is defined here because it's not very general purpose.
+ * If we were to move this to `ast-nodes`, half the implementation would be in `Root`,
+ * and the other half would be in `Import`.
+ *
+ * TODO: Refactor and move to `ast-nodes`
+ *
+ * Note: It does not handle default imports, namespace imports, or aliased imports.
+ */
+export const upsertImportDeclaration = ({
+  module,
+  specifiers
+}, context, fixer) => {
+  // Find any imports that match the packageName
+  const root = context.getSourceCode().ast.body;
+  const importDeclarations = ast.Root.findImportsByModule(root, module);
+
+  // The import doesn't exist yet, we can just insert a whole new one
+  if (importDeclarations.length === 0) {
+    return ast.Root.insertImport(root, {
+      module,
+      specifiers
+    }, fixer);
+  }
+
+  // The import exists so, modify the existing one
+  return ast.Import.insertNamedSpecifiers(importDeclarations[0], specifiers, fixer);
+};

package/dist/es2019/rules/use-tokens-space/utils/index.js

@@ -0,0 +1 @@
+export { isStringOrNumber } from './is-string-or-number';

package/dist/es2019/rules/use-tokens-space/utils/is-string-or-number.js

@@ -0,0 +1,3 @@
+export const isStringOrNumber = value => {
+  return typeof value === 'string' || typeof value === 'number';
+};

package/dist/es2019/rules/utils/is-supported-import.js

@@ -1,3 +1,10 @@
+// This should be kept in sync with
+// packages/design-system/eslint-plugin-ui-styling-standard/src/rules/utils/is-supported-import.tsx
+// whenever possible.
+//
+// TODO: would having an @atlassian/eslint-plugin-design-system-common
+// package be useful?
+
 // eslint-disable-next-line import/no-extraneous-dependencies
 
 export const CSS_IN_JS_IMPORTS = {
@@ -109,8 +116,14 @@ export const isCssMap = isSupportedImportWrapper('cssMap');
 export const isKeyframes = isSupportedImportWrapper('keyframes');
 // `styled` is also the explicit default of `styled-components` and `@emotion/styled`, so we also match on default imports generally
 export const isStyled = isSupportedImportWrapper('styled', ['styled-components', '@emotion/styled']);
-export const isImportedFrom = (moduleName, exactMatch = true) => (nodeToCheck, referencesInScope, importSources) => {
-  if (!importSources.some(importSource => importSource === moduleName || !exactMatch && importSource.startsWith(moduleName))) {
+export const isXcss = isSupportedImportWrapper('xcss');
+export const isImportedFrom = (moduleName, exactMatch = true) => (nodeToCheck, referencesInScope,
+/**
+ * If we strictly have specific import sources in the config scope, pass them to make this more performant.
+ * Pass `null` if you don't care if its configured or not.
+ */
+importSources = null) => {
+  if (importSources && !importSources.some(importSource => importSource === moduleName || !exactMatch && importSource.startsWith(moduleName))) {
     // Don't go through the trouble of checking the import sources does not include this
     // We'll assume this is skipped elsewhere.
     return false;

package/dist/esm/ast-nodes/object-entry.js

@@ -1,5 +1,40 @@
+/* eslint-disable @repo/internal/react/require-jsdoc */
+
 import { isNodeOfType } from 'eslint-codemod-utils';
-var ObjectEntry = {
+export var ObjectEntry = {
+  getProperty: function getProperty(node) {
+    if (isNodeOfType(node.key, 'Identifier')) {
+      return {
+        type: 'Identifier',
+        value: node.key.name
+      };
+    }
+    if (isNodeOfType(node.key, 'Literal') && node.key.value) {
+      return {
+        type: 'Literal',
+        value: node.key.value.toString()
+      };
+    }
+    return {
+      type: undefined,
+      value: undefined
+    };
+  },
+  getValue: function getValue(node) {
+    // The value is a number, like `-3`
+    if (isNodeOfType(node.value, 'UnaryExpression') && isNodeOfType(node.value.argument, 'Literal') && node.value.argument.raw) {
+      if (node.value.operator === '-') {
+        return -1 * Number.parseInt(node.value.argument.raw);
+      }
+      return Number.parseInt(node.value.argument.raw);
+    }
+
+    // The value is a string, like `'4px'`
+    if (isNodeOfType(node.value, 'Literal') && node.value.value) {
+      return node.value.value;
+    }
+    return undefined;
+  },
   deleteEntry: function deleteEntry(node, context, fixer) {
     var _lastToken;
     // context.getSourceCode() is deprecated in favour of context.sourceCode, however this returns undefined for some reason
@@ -31,5 +66,4 @@ var ObjectEntry = {
       return node.key.name;
     }
   }
-};
-export { ObjectEntry };
+};

package/dist/esm/ast-nodes/object.js

@@ -99,6 +99,18 @@ var ASTObjectExpression = {
       key: identifier(key),
       value: literal(value)
     }).toString(), ", "));
+  },
+  recurse: function recurse(node, callback) {
+    node.properties.forEach(function (entry) {
+      // Call the callback first, in case the user wants to do something with SpreadElements
+      callback(entry);
+      if (!isNodeOfType(entry, 'Property')) {
+        return;
+      }
+      if (isNodeOfType(entry.value, 'ObjectExpression')) {
+        ASTObjectExpression.recurse(entry.value, callback);
+      }
+    });
   }
 };
 export { ASTObjectExpression as Object };

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::d90c2cf5e100daf98915f9467f2e5663>>
+ * @codegen <<SignedSource::d95217b658f807294de3c81123068bf1>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 export default {
@@ -35,6 +35,7 @@ export default {
     '@atlaskit/design-system/use-href-in-link-item': 'warn',
     '@atlaskit/design-system/use-primitives': 'warn',
     '@atlaskit/design-system/use-primitives-text': 'warn',
+    '@atlaskit/design-system/use-tokens-space': 'error',
     '@atlaskit/design-system/use-tokens-typography': 'warn',
     '@atlaskit/design-system/use-visually-hidden': 'error'
   }

package/dist/esm/rules/consistent-css-prop-usage/index.js

@@ -1,4 +1,3 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
@@ -33,6 +32,18 @@ var getProgramNode = function getProgramNode(expression) {
   }
   return expression.parent;
 };
+var isDeclaredInsideComponent = function isDeclaredInsideComponent(expression) {
+  // These nodes imply that there is a distinct own scope (function scope / block scope),
+  // and so the presence of them means that expression was not defined in the module scope.
+  var NOT_MODULE_SCOPE = ['ArrowFunctionExpression', 'BlockStatement', 'ClassDeclaration', 'FunctionExpression'];
+  while (expression.type !== 'Program') {
+    if (NOT_MODULE_SCOPE.includes(expression.type)) {
+      return true;
+    }
+    expression = expression.parent;
+  }
+  return false;
+};
 var JSXExpressionLinter = /*#__PURE__*/function () {
   // File-level tracking of styles hoisted from the cssAtTopOfModule/cssAtBottomOfModule fixers.
 
@@ -112,13 +123,13 @@ var JSXExpressionLinter = /*#__PURE__*/function () {
         });
         return;
       }
-      if (identifier.parent.parent.parent.type !== 'Program') {
+      if (isDeclaredInsideComponent(identifier)) {
         // When variable is declared inside the component
         this.context.report({
           node: sourceIdentifier,
           messageId: this.configuration.stylesPlacement === 'bottom' ? 'cssAtBottomOfModule' : 'cssAtTopOfModule',
           fix: function fix(fixer) {
-            if (_this.configuration.fixNamesOnly) {
+            if (!_this.configuration.autoFix) {
               return [];
             }
             return _this.fixCssNotInModuleScope(fixer, identifier, false);
@@ -140,7 +151,7 @@ var JSXExpressionLinter = /*#__PURE__*/function () {
             node: identifier,
             messageId: 'cssObjectTypeOnly',
             fix: function fix(fixer) {
-              if (_this.configuration.fixNamesOnly) {
+              if (!_this.configuration.autoFix) {
                 return [];
               }
               return _this.addCssFunctionCall(fixer, identifier.parent);
@@ -316,10 +327,11 @@ var JSXExpressionLinter = /*#__PURE__*/function () {
         // The last value is the bottom of the file
         fixerNodePlacement = programNode.body[programNode.body.length - 1];
       } else {
+        var _ref3;
         // Place after the last ImportDeclaration
-        fixerNodePlacement = programNode.body.length === 1 ? programNode.body[0] : programNode.body.find(function (node) {
+        fixerNodePlacement = (_ref3 = programNode.body.length === 1 ? programNode.body[0] : programNode.body.find(function (node) {
           return node.type !== 'ImportDeclaration';
-        });
+        })) !== null && _ref3 !== void 0 ? _ref3 : fixerNodePlacement;
       }
       var moduleString;
       var fixes = [];
@@ -403,7 +415,7 @@ var JSXExpressionLinter = /*#__PURE__*/function () {
             node: expression,
             messageId: this.configuration.stylesPlacement === 'bottom' ? 'cssAtBottomOfModule' : 'cssAtTopOfModule',
             fix: function fix(fixer) {
-              if (_this3.configuration.fixNamesOnly) {
+              if (!_this3.configuration.autoFix) {
                 return [];
               }
 
@@ -448,8 +460,7 @@ var defaultConfig = {
   cssImportSource: CSS_IN_JS_IMPORTS.compiled,
   xcssImportSource: CSS_IN_JS_IMPORTS.atlaskitPrimitives,
   excludeReactComponents: false,
-  fixNamesOnly: false,
-  autoFixNames: true
+  autoFix: true
 };
 var rule = createLintRule({
   meta: {
@@ -468,8 +479,7 @@ var rule = createLintRule({
       cssObjectTypeOnly: "Create styles using objects passed to a css function call, e.g. `css({ textAlign: 'center'; })`.",
       cssInModule: "Imported styles should not be used; instead define in the module, import a component, or use a design token.",
       cssArrayStylesOnly: "Compose styles with an array on the css prop instead of using object spread.",
-      noMemberExpressions: "Styles should be a regular variable (e.g. 'buttonStyles'), not a member of an object (e.g. 'myObject.styles').",
-      shouldEndInStyles: 'Declared styles should end in "styles".'
+      noMemberExpressions: "Styles should be a regular variable (e.g. 'buttonStyles'), not a member of an object (e.g. 'myObject.styles')."
     },
     schema: [{
       type: 'object',
@@ -493,10 +503,7 @@ var rule = createLintRule({
         excludeReactComponents: {
           type: 'boolean'
         },
-        autoFixNames: {
-          type: 'boolean'
-        },
-        fixNamesOnly: {
+        autoFix: {
           type: 'boolean'
         }
       },
@@ -504,80 +511,41 @@ var rule = createLintRule({
     }]
   },
   create: function create(context) {
-    var _ref3;
     var mergedConfig = assign({}, defaultConfig, context.options[0]);
-    var declarationSuffix = 'Styles';
-    var callSelectorFunctions = [].concat(_toConsumableArray(mergedConfig.cssFunctions), ['cssMap']);
-    var callSelector = callSelectorFunctions.map(function (fn) {
-      return "CallExpression[callee.name=".concat(fn, "]");
-    }).join(',');
-    return _ref3 = {}, _defineProperty(_ref3, callSelector, function (node) {
-      if (node.parent.type !== 'VariableDeclarator') {
-        // We aren't interested in these that don't have a parent.
-        return;
-      }
-      var identifier = node.parent.id;
-      if (identifier.type === 'Identifier' && (identifier.name.endsWith(declarationSuffix) || identifier.name.startsWith(declarationSuffix.toLowerCase()) || identifier.name === declarationSuffix.toLowerCase())) {
-        // Already prefixed! Nothing to do.
-        return;
-      }
-      if (!mergedConfig.autoFixNames) {
-        return;
-      }
-      context.report({
-        node: identifier,
-        messageId: 'shouldEndInStyles',
-        fix: function fix(fixer) {
-          var _context$getScope$var;
-          var identifierName = identifier.type === 'Identifier' ? identifier.name : '';
-          var references = ((_context$getScope$var = context.getScope().variables.find(function (varb) {
-            return varb.name === identifierName;
-          })) === null || _context$getScope$var === void 0 ? void 0 : _context$getScope$var.references) || [];
-          var newIdentifierName = "".concat(identifierName
-          // Remove "Style" if it is already defined.
-          .replace(/Style$/, '')).concat(declarationSuffix);
-          return references.filter(function (ref) {
-            return ref.identifier.name === identifierName;
-          }).map(function (ref) {
-            if (ref.identifier.parent && ref.identifier.parent.shorthand) {
-              return fixer.replaceText(ref.identifier, "".concat(identifierName, ": ").concat(newIdentifierName));
-            }
-            return fixer.replaceText(ref.identifier, newIdentifierName);
-          });
-        }
-      });
-    }), _defineProperty(_ref3, "JSXAttribute", function JSXAttribute(nodeOriginal) {
-      var node = nodeOriginal;
-      var name = node.name,
-        value = node.value;
-      if (mergedConfig.excludeReactComponents && node.parent.type === 'JSXOpeningElement') {
-        // e.g. <item.before />
-        if (node.parent.name.type === 'JSXMemberExpression') {
-          return;
-        }
-        // e.g. <div />, <MenuItem />
-        if (node.parent.name.type === 'JSXIdentifier' && !isDOMElementName(node.parent.name.name)) {
-          return;
-        }
-      }
-      if (name.type === 'JSXIdentifier' && mergedConfig.cssFunctions.includes(name.name)) {
-        // When not a jsx expression. For eg. css=""
-        if ((value === null || value === void 0 ? void 0 : value.type) !== 'JSXExpressionContainer') {
-          context.report({
-            node: node,
-            messageId: mergedConfig.stylesPlacement === 'bottom' ? 'cssAtBottomOfModule' : 'cssAtTopOfModule'
-          });
-          return;
+    return {
+      JSXAttribute: function JSXAttribute(nodeOriginal) {
+        var node = nodeOriginal;
+        var name = node.name,
+          value = node.value;
+        if (mergedConfig.excludeReactComponents && node.parent.type === 'JSXOpeningElement') {
+          // e.g. <item.before />
+          if (node.parent.name.type === 'JSXMemberExpression') {
+            return;
+          }
+          // e.g. <div />, <MenuItem />
+          if (node.parent.name.type === 'JSXIdentifier' && !isDOMElementName(node.parent.name.name)) {
+            return;
+          }
         }
-        if (value.expression.type === 'JSXEmptyExpression') {
-          // e.g. the comment in
-          //      <div css={/* Hello there */} />
-          return;
+        if (name.type === 'JSXIdentifier' && mergedConfig.cssFunctions.includes(name.name)) {
+          // When not a jsx expression. For eg. css=""
+          if ((value === null || value === void 0 ? void 0 : value.type) !== 'JSXExpressionContainer') {
+            context.report({
+              node: node,
+              messageId: mergedConfig.stylesPlacement === 'bottom' ? 'cssAtBottomOfModule' : 'cssAtTopOfModule'
+            });
+            return;
+          }
+          if (value.expression.type === 'JSXEmptyExpression') {
+            // e.g. the comment in
+            //      <div css={/* Hello there */} />
+            return;
+          }
+          var linter = new JSXExpressionLinter(context, name.name, mergedConfig, value.expression);
+          linter.run();
         }
-        var linter = new JSXExpressionLinter(context, name.name, mergedConfig, value.expression);
-        linter.run();
       }
-    }), _ref3;
+    };
   }
 });
 export default rule;

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::c283cd7ede5e813a9119cd707d339273>>
+ * @codegen <<SignedSource::d1c25758089a050334359276ede0ca3a>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 import consistentCssPropUsage from './consistent-css-prop-usage';
@@ -32,6 +32,7 @@ import useHeadingLevelInSpotlightCard from './use-heading-level-in-spotlight-car
 import useHrefInLinkItem from './use-href-in-link-item';
 import usePrimitives from './use-primitives';
 import usePrimitivesText from './use-primitives-text';
+import useTokensSpace from './use-tokens-space';
 import useTokensTypography from './use-tokens-typography';
 import useVisuallyHidden from './use-visually-hidden';
 export default {
@@ -64,6 +65,7 @@ export default {
   'use-href-in-link-item': useHrefInLinkItem,
   'use-primitives': usePrimitives,
   'use-primitives-text': usePrimitivesText,
+  'use-tokens-space': useTokensSpace,
   'use-tokens-typography': useTokensTypography,
   'use-visually-hidden': useVisuallyHidden
 };

package/dist/esm/rules/use-tokens-space/index.js

@@ -0,0 +1,48 @@
+import { createLintRule } from '../utils/create-rule';
+import { StyleProperty } from './transformers';
+var rule = createLintRule({
+  meta: {
+    name: 'use-tokens-space',
+    type: 'problem',
+    fixable: 'code',
+    hasSuggestions: true,
+    docs: {
+      description: 'Enforces usage of space design tokens rather than hard-coded values.',
+      recommended: false,
+      severity: 'error'
+    },
+    messages: {
+      noRawSpacingValues: 'The use of spacing primitives or tokens is preferred over the direct application of spacing properties.'
+    }
+  },
+  create: function create(context) {
+    return {
+      'CallExpression[callee.name="css"] ObjectExpression Property': function CallExpressionCalleeNameCssObjectExpressionProperty(node) {
+        return StyleProperty.lint(node, {
+          context: context
+        });
+      },
+      'CallExpression[callee.name="keyframes"] ObjectExpression Property': function CallExpressionCalleeNameKeyframesObjectExpressionProperty(node) {
+        return StyleProperty.lint(node, {
+          context: context
+        });
+      },
+      'CallExpression[callee.name="cssMap"] ObjectExpression Property': function CallExpressionCalleeNameCssMapObjectExpressionProperty(node) {
+        return StyleProperty.lint(node, {
+          context: context
+        });
+      },
+      'CallExpression[callee.object.name=styled] ObjectExpression Property': function CallExpressionCalleeObjectNameStyledObjectExpressionProperty(node) {
+        return StyleProperty.lint(node, {
+          context: context
+        });
+      },
+      'CallExpression[callee.object.name=styled2] ObjectExpression Property': function CallExpressionCalleeObjectNameStyled2ObjectExpressionProperty(node) {
+        return StyleProperty.lint(node, {
+          context: context
+        });
+      }
+    };
+  }
+});
+export default rule;

package/dist/esm/rules/use-tokens-space/transformers/index.js

@@ -0,0 +1 @@
+export { StyleProperty } from './style-property';