@atlaskit/ads-mcp 0.17.1 → 0.17.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +13 -0
- package/README.md +88 -0
- package/dist/cjs/index.js +19 -40
- package/dist/cjs/tools/get-all-icons/icons.js +43 -0
- package/dist/cjs/tools/get-all-icons/index.js +4 -19
- package/dist/cjs/tools/get-all-tokens/index.js +3 -6
- package/dist/cjs/tools/get-all-tokens/tokens.js +18 -0
- package/dist/cjs/tools/get-components/components.codegen.js +8 -0
- package/dist/cjs/tools/get-components/components.js +423 -235
- package/dist/cjs/tools/get-components/index.js +2 -2
- package/dist/cjs/tools/get-components/load-all-components.js +16 -0
- package/dist/cjs/tools/get-guidelines/guidelines-structured-content.codegen.js +72 -6
- package/dist/cjs/tools/get-lint-rules/lint-rules-structured-content.codegen.js +111 -7
- package/dist/cjs/tools/search-components/index.js +13 -12
- package/dist/cjs/tools/search-icons/index.js +7 -24
- package/dist/es2019/index.js +13 -31
- package/dist/es2019/tools/get-all-icons/icons.js +25 -0
- package/dist/es2019/tools/get-all-icons/index.js +1 -10
- package/dist/es2019/tools/get-all-tokens/index.js +2 -5
- package/dist/es2019/tools/get-all-tokens/tokens.js +13 -0
- package/dist/es2019/tools/get-components/components.codegen.js +8 -0
- package/dist/es2019/tools/get-components/components.js +423 -235
- package/dist/es2019/tools/get-components/index.js +11 -9
- package/dist/es2019/tools/get-components/load-all-components.js +10 -0
- package/dist/es2019/tools/get-guidelines/guidelines-structured-content.codegen.js +72 -6
- package/dist/es2019/tools/get-lint-rules/lint-rules-structured-content.codegen.js +111 -7
- package/dist/es2019/tools/search-components/index.js +2 -1
- package/dist/es2019/tools/search-icons/index.js +1 -10
- package/dist/esm/index.js +19 -40
- package/dist/esm/tools/get-all-icons/icons.js +37 -0
- package/dist/esm/tools/get-all-icons/index.js +3 -18
- package/dist/esm/tools/get-all-tokens/index.js +2 -5
- package/dist/esm/tools/get-all-tokens/tokens.js +13 -0
- package/dist/esm/tools/get-components/components.codegen.js +8 -0
- package/dist/esm/tools/get-components/components.js +423 -235
- package/dist/esm/tools/get-components/index.js +2 -2
- package/dist/esm/tools/get-components/load-all-components.js +10 -0
- package/dist/esm/tools/get-guidelines/guidelines-structured-content.codegen.js +72 -6
- package/dist/esm/tools/get-lint-rules/lint-rules-structured-content.codegen.js +111 -7
- package/dist/esm/tools/search-components/index.js +9 -8
- package/dist/esm/tools/search-icons/index.js +3 -20
- package/dist/types/tools/get-all-icons/icons.d.ts +11 -0
- package/dist/types/tools/get-all-tokens/tokens.d.ts +7 -0
- package/dist/types/tools/get-components/components.codegen.d.ts +10 -0
- package/dist/types/tools/get-components/components.d.ts +1 -1
- package/dist/types/tools/get-components/load-all-components.d.ts +2 -0
- package/dist/types/tools/get-components/types.d.ts +20 -14
- package/dist/types/tools/get-guidelines/guidelines-structured-content.codegen.d.ts +1 -1
- package/dist/types/tools/get-lint-rules/lint-rules-structured-content.codegen.d.ts +1 -1
- package/dist/types-ts4.5/tools/get-all-icons/icons.d.ts +11 -0
- package/dist/types-ts4.5/tools/get-all-tokens/tokens.d.ts +7 -0
- package/dist/types-ts4.5/tools/get-components/components.codegen.d.ts +10 -0
- package/dist/types-ts4.5/tools/get-components/components.d.ts +1 -1
- package/dist/types-ts4.5/tools/get-components/load-all-components.d.ts +2 -0
- package/dist/types-ts4.5/tools/get-components/types.d.ts +20 -14
- package/dist/types-ts4.5/tools/get-guidelines/guidelines-structured-content.codegen.d.ts +1 -1
- package/dist/types-ts4.5/tools/get-lint-rules/lint-rules-structured-content.codegen.d.ts +1 -1
- package/package.json +5 -3
- package/dist/cjs/tools/get-icons/icon-mcp-structured-content.codegen.js +0 -8
- package/dist/cjs/tools/get-icons/icon-structured-content.codegen.js +0 -8
- package/dist/cjs/tools/get-icons/index.js +0 -135
- package/dist/cjs/tools/get-tokens/index.js +0 -125
- package/dist/cjs/tools/get-tokens/token-mcp-structured-content.codegen.js +0 -2356
- package/dist/cjs/tools/get-tokens/token-structured-content.codegen.js +0 -2356
- package/dist/es2019/tools/get-icons/icon-mcp-structured-content.codegen.js +0 -8
- package/dist/es2019/tools/get-icons/icon-structured-content.codegen.js +0 -8
- package/dist/es2019/tools/get-icons/index.js +0 -110
- package/dist/es2019/tools/get-tokens/index.js +0 -100
- package/dist/es2019/tools/get-tokens/token-mcp-structured-content.codegen.js +0 -2350
- package/dist/es2019/tools/get-tokens/token-structured-content.codegen.js +0 -2350
- package/dist/esm/tools/get-icons/icon-mcp-structured-content.codegen.js +0 -8
- package/dist/esm/tools/get-icons/icon-structured-content.codegen.js +0 -8
- package/dist/esm/tools/get-icons/index.js +0 -128
- package/dist/esm/tools/get-tokens/index.js +0 -118
- package/dist/esm/tools/get-tokens/token-mcp-structured-content.codegen.js +0 -2350
- package/dist/esm/tools/get-tokens/token-structured-content.codegen.js +0 -2350
- package/dist/types/tools/get-icons/icon-mcp-structured-content.codegen.d.ts +0 -13
- package/dist/types/tools/get-icons/icon-structured-content.codegen.d.ts +0 -13
- package/dist/types/tools/get-icons/index.d.ts +0 -35
- package/dist/types/tools/get-tokens/index.d.ts +0 -35
- package/dist/types/tools/get-tokens/token-mcp-structured-content.codegen.d.ts +0 -13
- package/dist/types/tools/get-tokens/token-structured-content.codegen.d.ts +0 -13
- package/dist/types-ts4.5/tools/get-icons/icon-mcp-structured-content.codegen.d.ts +0 -13
- package/dist/types-ts4.5/tools/get-icons/icon-structured-content.codegen.d.ts +0 -13
- package/dist/types-ts4.5/tools/get-icons/index.d.ts +0 -35
- package/dist/types-ts4.5/tools/get-tokens/index.d.ts +0 -35
- package/dist/types-ts4.5/tools/get-tokens/token-mcp-structured-content.codegen.d.ts +0 -13
- package/dist/types-ts4.5/tools/get-tokens/token-structured-content.codegen.d.ts +0 -13
|
@@ -9,7 +9,7 @@ exports.lintRulesMcpStructuredContent = void 0;
|
|
|
9
9
|
*
|
|
10
10
|
* Structured content for MCP (JSON) for ESLint rule docs from constellation.
|
|
11
11
|
*
|
|
12
|
-
* @codegen <<SignedSource::
|
|
12
|
+
* @codegen <<SignedSource::44f41e29fce7b92fa79b280b7485ac56>>
|
|
13
13
|
* @codegenCommand yarn build structured-docs
|
|
14
14
|
*/
|
|
15
15
|
/* eslint-disable no-template-curly-in-string */
|
|
@@ -47,11 +47,11 @@ var lintRulesMcpStructuredContent = exports.lintRulesMcpStructuredContent = [{
|
|
|
47
47
|
ruleName: 'ensure-proper-xcss-usage',
|
|
48
48
|
description: 'This ESLint rule enforces proper usage of the `xcss` prop with compiled Primitives from'
|
|
49
49
|
}, {
|
|
50
|
-
content: '{"ruleName":"icon-label","description":"Icon labels are used to describe what the icon is so the visually impaired can be described what the","content":"# icon-label\\n\\nIcon labels are used to describe what the icon is so the visually impaired can be described what the\\nUI element is. There are cases where icons should have labels as well as cases where they shouldn\'t\\nbe labelled.\\n\\n## Examples\\n\\nThis rule will find violations for when an icon label is or isn\'t needed when composed with other\\nDesign System components.\\n\\n### Incorrect\\n\\n```js\\nimport
|
|
50
|
+
content: '{"ruleName":"icon-label","description":"Icon labels are used to describe what the icon is so the visually impaired can be described what the","content":"# icon-label\\n\\nIcon labels are used to describe what the icon is so the visually impaired can be described what the\\nUI element is. There are cases where icons should have labels as well as cases where they shouldn\'t\\nbe labelled.\\n\\n## Examples\\n\\nThis rule will find violations for when an icon label is or isn\'t needed when composed with other\\nDesign System components.\\n\\n### Incorrect\\n\\n```js\\nimport DashboardIcon from \'@atlaskit/icon/glyph/dashboard\'\\n\\n<DashboardIcon>\\n^^^^^^^^^^^^^^^ missing `label` prop\\n\\n<Button iconLeft={<DashboardIcon label=\\"\\">} />\\n ^^^^^ label should be defined\\n\\n<ButtonItem iconBefore={<DashboardIcon label=\\"\\">}>\\n ^^^^^ label should not be defined\\n My dashboard\\n</ButtonItem>\\n```\\n\\n### Correct\\n\\n```js\\nimport DashboardIcon from \'@atlaskit/icon/glyph/dashboard\'\\n\\n<DashboardIcon label=\\"Dashboard\\">\\n\\n<Button iconLeft={<DashboardIcon label=\\"Add\\">} />\\n\\n<ButtonItem iconBefore={<DashboardIcon label=\\"\\">}>\\n My dashboard\\n</ButtonItem>\\n```\\n"}',
|
|
51
51
|
ruleName: 'icon-label',
|
|
52
52
|
description: 'Icon labels are used to describe what the icon is so the visually impaired can be described what the'
|
|
53
53
|
}, {
|
|
54
|
-
content: '{"ruleName":"index","description":"---","content":"---\\norder: 0\\n---\\n\\nThis plugin contains rules that should be used when working with the\\n[Atlassian Design System](https://atlassian.design).\\n\\n## Rules\\n\\n<!-- START_RULE_TABLE_CODEGEN -->\\n<!-- @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen -->\\n\\n| Rule | Description | Recommended | Fixable | Suggestions |\\n| ----------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | ------- | ----------- |\\n| <a href=\\"/components/eslint-plugin-design-system/consistent-css-prop-usage/usage\\">consistent-css-prop-usage</a> | Ensures consistency with `css` and `xcss` prop usages | Yes | Yes | |\\n| <a href=\\"/components/eslint-plugin-design-system/enforce-inline-styles-in-select/usage\\">enforce-inline-styles-in-select</a> | Disallow unsupported CSS selectors in styles prop for @atlaskit/select and require inline styles only | | | |\\n| <a href=\\"/components/eslint-plugin-design-system/ensure-avatar-tag-avatar-props/usage\\">ensure-avatar-tag-avatar-props</a> | Ensures AvatarTag avatar prop does not include controlled props (size, borderColor, appearance) which are managed internally. | Yes | | |\\n| <a href=\\"/components/eslint-plugin-design-system/ensure-design-token-usage/usage\\">ensure-design-token-usage</a> | Enforces usage of design tokens rather than hard-coded values. | Yes | Yes | Yes |\\n| <a href=\\"/components/eslint-plugin-design-system/ensure-design-token-usage-preview/usage\\">ensure-design-token-usage/preview</a> | Enforces usage of pre-release design tokens rather than hard-coded values. | | Yes | Yes |\\n| <a href=\\"/components/eslint-plugin-design-system/ensure-icon-color/usage\\">ensure-icon-color</a> | Enforces that upcoming icon components have a color prop set, to enable a migration of the default value. | | | |\\n| <a href=\\"/components/eslint-plugin-design-system/ensure-proper-xcss-usage/usage\\">ensure-proper-xcss-usage</a> | Enforces proper xcss usage: migrate from xcss() to cssMap() and use cssMap objects with specific keys. | | | |\\n| <a href=\\"/components/eslint-plugin-design-system/icon-label/usage\\">icon-label</a> | Enforces accessible usage of icon labels when composed with Atlassian Design System components. | Yes | Yes | |\\n| <a href=\\"/components/eslint-plugin-design-system/lozenge-badge-tag-labelling-system-migration/usage\\">lozenge-badge-tag-labelling-system-migration</a> | Helps migrate Lozenge isBold prop, Badge appearance values, and SimpleTag/RemovableTag components as part of the Labelling System Phase 1 migration. | | Yes | |\\n| <a href=\\"/components/eslint-plugin-design-system/no-banned-imports/usage\\">no-banned-imports</a> | Disallow importing banned modules. | Yes | | |\\n| <a href=\\"/components/eslint-plugin-design-system/no-boolean-autofocus-on-modal-dialog/usage\\">no-boolean-autofocus-on-modal-dialog</a> | Encourages makers to not use boolean values for `autoFocus` on Atlassian Design System\'s modal dialog component. | Yes | | |\\n| <a href=\\"/components/eslint-plugin-design-system/no-css-tagged-template-expression/usage\\">no-css-tagged-template-expression</a> | Disallows any `css` tagged template expressions that originate from Emotion, Styled Components or Compiled | | Yes | |\\n| <a href=\\"/components/eslint-plugin-design-system/no-custom-icons/usage\\">no-custom-icons</a> | Enforces custom glyph icons are used. | | | |\\n| <a href=\\"/components/eslint-plugin-design-system/no-dark-theme-vr-tests/usage\\">no-dark-theme-vr-tests</a> | Disallow using dark colorScheme in VR tests. | | Yes | |\\n| <a href=\\"/components/eslint-plugin-design-system/no-deprecated-apis/usage\\">no-deprecated-apis</a> | Disallow using deprecated APIs. | Yes | | |\\n| <a href=\\"/components/eslint-plugin-design-system/no-deprecated-design-token-usage/usage\\">no-deprecated-design-token-usage</a> | Disallow using deprecated design tokens. | Yes | Yes | |\\n| <a href=\\"/components/eslint-plugin-design-system/no-deprecated-imports/usage\\">no-deprecated-imports</a> | Disallow importing deprecated modules. | Yes | Yes | Yes |\\n| <a href=\\"/components/eslint-plugin-design-system/no-direct-use-of-web-platform-drag-and-drop/usage\\">no-direct-use-of-web-platform-drag-and-drop</a> | Disallow using direct use of native drag and drop (please use Pragmatic drag and drop) | Yes | | |\\n| <a href=\\"/components/eslint-plugin-design-system/no-emotion-primitives/usage\\">no-emotion-primitives</a> | Ensures usage of Compiled Primitives import instead of Emotion entrypoint. | | Yes | |\\n| <a href=\\"/components/eslint-plugin-design-system/no-empty-styled-expression/usage\\">no-empty-styled-expression</a> | Forbids any styled expression to be used when passing empty arguments to styled.div() (or other JSX elements). | | | |\\n| <a href=\\"/components/eslint-plugin-design-system/no-exported-css/usage\\">no-exported-css</a> | Forbid exporting `css` function calls. Exporting `css` function calls can result in unexpected behaviour at runtime, and is not statically analysable. | | | |\\n| <a href=\\"/components/eslint-plugin-design-system/no-exported-keyframes/usage\\">no-exported-keyframes</a> | Forbid exporting `keyframes` function calls. Exporting `css` function calls can result in unexpected behaviour at runtime, and is not statically analysable. | | | |\\n| <a href=\\"/components/eslint-plugin-design-system/no-html-anchor/usage\\">no-html-anchor</a> | Discourage direct usage of HTML anchor elements in favor of Atlassian Design System link components. | Yes | | Yes |\\n| <a href=\\"/components/eslint-plugin-design-system/no-html-button/usage\\">no-html-button</a> | Discourage direct usage of HTML button elements in favor of Atlassian Design System button components. | Yes | | |\\n| <a href=\\"/components/eslint-plugin-design-system/no-html-checkbox/usage\\">no-html-checkbox</a> | Discourage direct usage of HTML checkbox elements in favor of the Atlassian Design System checkbox component. | Yes | | Yes |\\n| <a href=\\"/components/eslint-plugin-design-system/no-html-code/usage\\">no-html-code</a> | Discourage direct usage of HTML code elements in favor of the Atlassian Design System code component. | Yes | | Yes |\\n| <a href=\\"/components/eslint-plugin-design-system/no-html-heading/usage\\">no-html-heading</a> | Discourage direct usage of HTML heading elements in favor of Atlassian Design System heading components. | Yes | | Yes |\\n| <a href=\\"/components/eslint-plugin-design-system/no-html-image/usage\\">no-html-image</a> | Discourage direct usage of HTML image elements in favor of the Atlassian Design System image component. | Yes | | Yes |\\n| <a href=\\"/components/eslint-plugin-design-system/no-html-radio/usage\\">no-html-radio</a> | Discourage direct usage of HTML radio elements in favor of the Atlassian Design System radio component. | Yes | | Yes |\\n| <a href=\\"/components/eslint-plugin-design-system/no-html-range/usage\\">no-html-range</a> | Discourage direct usage of HTML range elements in favor of the Atlassian Design System range component. | Yes | | Yes |\\n| <a href=\\"/components/eslint-plugin-design-system/no-html-select/usage\\">no-html-select</a> | Discourage direct usage of HTML select elements in favor of the Atlassian Design System select component. | Yes | | Yes |\\n| <a href=\\"/components/eslint-plugin-design-system/no-html-text-input/usage\\">no-html-text-input</a> | Discourage direct usage of HTML text input elements in favor of the Atlassian Design System textfield component. | Yes | | Yes |\\n| <a href=\\"/components/eslint-plugin-design-system/no-html-textarea/usage\\">no-html-textarea</a> | Discourage direct usage of HTML textarea elements in favor of the Atlassian Design System textarea component. | Yes | | Yes |\\n| <a href=\\"/components/eslint-plugin-design-system/no-invalid-css-map/usage\\">no-invalid-css-map</a> | Checks the validity of a CSS map created through cssMap. This is intended to be used alongside TypeScript\'s type-checking. | Yes | | |\\n| <a href=\\"/components/eslint-plugin-design-system/no-keyframes-tagged-template-expression/usage\\">no-keyframes-tagged-template-expression</a> | Disallows any `keyframe` tagged template expressions that originate from Emotion, Styled Components or Compiled | | Yes | |\\n| <a href=\\"/components/eslint-plugin-design-system/no-legacy-icons/usage\\">no-legacy-icons</a> | Enforces no legacy icons are used. | | Yes | Yes |\\n| <a href=\\"/components/eslint-plugin-design-system/no-margin/usage\\">no-margin</a> | Disallow using the margin CSS property. | | | |\\n| <a href=\\"/components/eslint-plugin-design-system/no-nested-styles/usage\\">no-nested-styles</a> | Disallows use of nested styles in `css` functions. | Yes | | |\\n| <a href=\\"/components/eslint-plugin-design-system/no-physical-properties/usage\\">no-physical-properties</a> | Disallow physical properties and values in `css` and `cssMap` function calls. | | Yes | |\\n| <a href=\\"/components/eslint-plugin-design-system/no-placeholder/usage\\">no-placeholder</a> | Placeholders should not be used. If information should be given to the user about the proper type or formatting of a value, this should be included using a helper message that is associated to the input instead. | Yes | | |\\n| <a href=\\"/components/eslint-plugin-design-system/no-separator-with-list-elements/usage\\">no-separator-with-list-elements</a> | Warn when the `separator` prop is used with `as=\\"li\\"`, `as=\\"ol\\"`, or `as=\\"dl\\"` in the Inline component. | Yes | | |\\n| <a href=\\"/components/eslint-plugin-design-system/no-styled-tagged-template-expression/usage\\">no-styled-tagged-template-expression</a> | Disallows any `styled` tagged template expressions that originate from Emotion, Styled Components or Compiled | | Yes | |\\n| <a href=\\"/components/eslint-plugin-design-system/no-to-match-snapshot/usage\\">no-to-match-snapshot</a> | Disallow using toMatchSnapshot() in favor of toMatchInlineSnapshot(). See https://hello.atlassian.net/wiki/spaces/DST/pages/6105892000/DSTRFC-038+-+Removal+of+.toMatchSnapshot for rationale. | | | |\\n| <a href=\\"/components/eslint-plugin-design-system/no-unsafe-design-token-usage/usage\\">no-unsafe-design-token-usage</a> | Enforces design token usage is statically and locally analyzable. | Yes | Yes | |\\n| <a href=\\"/components/eslint-plugin-design-system/no-unsafe-inline-snapshot/usage\\">no-unsafe-inline-snapshot</a> | Enforce guardrails on toMatchInlineSnapshot usage: snapshots must not exceed 100 lines and must not contain internal implementation details like className or style attributes. | | | |\\n| <a href=\\"/components/eslint-plugin-design-system/no-unsafe-style-overrides/usage\\">no-unsafe-style-overrides</a> | Discourage usage of unsafe style overrides used against the Atlassian Design System. | Yes | | |\\n| <a href=\\"/components/eslint-plugin-design-system/no-unsupported-drag-and-drop-libraries/usage\\">no-unsupported-drag-and-drop-libraries</a> | Disallow importing unsupported drag and drop modules. | Yes | | |\\n| <a href=\\"/components/eslint-plugin-design-system/no-unused-css-map/usage\\">no-unused-css-map</a> | Detects unused styles in cssMap objects to help keep code clean. | Yes | | |\\n| <a href=\\"/components/eslint-plugin-design-system/prefer-primitives/usage\\">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. | | | |\\n| <a href=\\"/components/eslint-plugin-design-system/use-button-group-label/usage\\">use-button-group-label</a> | Ensures button groups are described to assistive technology by a direct label or by another element. | Yes | | Yes |\\n| <a href=\\"/components/eslint-plugin-design-system/use-character-counter-field/usage\\">use-character-counter-field</a> | Suggests using CharacterCounterField or CharacterCounter when Textfield or Textarea components have maxLength or minLength props. | Yes | | |\\n| <a href=\\"/components/eslint-plugin-design-system/use-correct-field/usage\\">use-correct-field</a> | Ensure makers use appropriate field component for their respective form elements. | Yes | Yes | Yes |\\n| <a href=\\"/components/eslint-plugin-design-system/use-cx-function-in-xcss/usage\\">use-cx-function-in-xcss</a> | Enforces cx function use to combine styles in xcss. | Yes | Yes | Yes |\\n| <a href=\\"/components/eslint-plugin-design-system/use-datetime-picker-calendar-button/usage\\">use-datetime-picker-calendar-button</a> | Encourages makers to use calendar button in Atlassian Design System\'s date picker and datetime picker components. | Yes | Yes | Yes |\\n| <a href=\\"/components/eslint-plugin-design-system/use-drawer-label/usage\\">use-drawer-label</a> | Encourages to provide accessible name for Atlassian Design System Drawer component. | Yes | | Yes |\\n| <a href=\\"/components/eslint-plugin-design-system/use-field-message-wrapper/usage\\">use-field-message-wrapper</a> | Encourage use of message wrapper component when using form message components. | Yes | | Yes |\\n| <a href=\\"/components/eslint-plugin-design-system/use-heading/usage\\">use-heading</a> | Encourage the usage of heading components. | Yes | Yes | Yes |\\n| <a href=\\"/components/eslint-plugin-design-system/use-heading-level-in-spotlight-card/usage\\">use-heading-level-in-spotlight-card</a> | Inform developers of eventual requirement of `headingLevel` prop in `SpotlightCard` component. The heading level should be the appropriate level according to the surrounding context. | Yes | Yes | |\\n| <a href=\\"/components/eslint-plugin-design-system/use-href-in-link-item/usage\\">use-href-in-link-item</a> | Inform developers of eventual requirement of `href` prop in `LinkItem` component. Elements with a `link` role require an `href` attribute for users to properly navigate, particularly those using assistive technologies. If no valid `href` is required for your use case, consider using a `ButtonItem` instead. | Yes | Yes | Yes |\\n| <a href=\\"/components/eslint-plugin-design-system/use-latest-xcss-syntax/usage\\">use-latest-xcss-syntax</a> | Enforces usage of space design tokens rather than hard-coded values in xcss. | Yes | Yes | |\\n| <a href=\\"/components/eslint-plugin-design-system/use-latest-xcss-syntax-typography/usage\\">use-latest-xcss-syntax-typography</a> | Prohibits use of unsafe styling properties in xcss. Please use Text/Heading primitives instead. | Yes | Yes | |\\n| <a href=\\"/components/eslint-plugin-design-system/use-menu-section-title/usage\\">use-menu-section-title</a> | Encourages makers to provide accessible title for Atlassian Design System Menu Section component. | Yes | | Yes |\\n| <a href=\\"/components/eslint-plugin-design-system/use-modal-dialog-close-button/usage\\">use-modal-dialog-close-button</a> | Encourages makers to use close button in Atlassian Design System\'s modal dialog component. | Yes | Yes | Yes |\\n| <a href=\\"/components/eslint-plugin-design-system/use-onboarding-spotlight-label/usage\\">use-onboarding-spotlight-label</a> | Ensures onboarding spotlight dialogs are described to assistive technology by a direct label or by another element. | Yes | | Yes |\\n| <a href=\\"/components/eslint-plugin-design-system/use-popup-label/usage\\">use-popup-label</a> | Encourages to provide accessible name for Atlassian Design System Popup component. | Yes | | Yes |\\n| <a href=\\"/components/eslint-plugin-design-system/use-primitives/usage\\">use-primitives</a> | Encourage the usage of primitives components. | | Yes | Yes |\\n| <a href=\\"/components/eslint-plugin-design-system/use-primitives-text/usage\\">use-primitives-text</a> | Encourage the usage of text components. | Yes | Yes | Yes |\\n| <a href=\\"/components/eslint-plugin-design-system/use-should-render-to-parent/usage\\">use-should-render-to-parent</a> | Encourages makers to use the `shouldRenderToParent` where possible in Atlassian Design System `Popup` and `DropdownMenu` components. | Yes | | Yes |\\n| <a href=\\"/components/eslint-plugin-design-system/use-side-nav-items-package/usage\\">use-side-nav-items-package</a> | Use @atlaskit/side-nav-items instead of @atlaskit/navigation-system/side-nav-items. | Yes | Yes | Yes |\\n| <a href=\\"/components/eslint-plugin-design-system/use-simple-field/usage\\">use-simple-field</a> | Encourage use of simple field for better developer experience and accessibility. | Yes | | Yes |\\n| <a href=\\"/components/eslint-plugin-design-system/use-simple-form/usage\\">use-simple-form</a> | Encourage use of simple form for better developer experience and accessibility. | Yes | | Yes |\\n| <a href=\\"/components/eslint-plugin-design-system/use-spotlight-package/usage\\">use-spotlight-package</a> | Discourage the use of @atlaskit/onboarding in favor of @atlaskit/spotlight. | | Yes | Yes |\\n| <a href=\\"/components/eslint-plugin-design-system/use-tag-group-label/usage\\">use-tag-group-label</a> | Ensures tag groups are described to assistive technology by a direct label or by another element. | Yes | | Yes |\\n| <a href=\\"/components/eslint-plugin-design-system/use-tokens-shape/usage\\">use-tokens-shape</a> | Enforces usage of shape design tokens rather than hard-coded values. | | Yes | Yes |\\n| <a href=\\"/components/eslint-plugin-design-system/use-tokens-space/usage\\">use-tokens-space</a> | Enforces usage of space design tokens rather than hard-coded values. | | Yes | Yes |\\n| <a href=\\"/components/eslint-plugin-design-system/use-tokens-typography/usage\\">use-tokens-typography</a> | Enforces usage of design tokens for typography properties rather than hard-coded values. | Yes | Yes | Yes |\\n| <a href=\\"/components/eslint-plugin-design-system/use-visually-hidden/usage\\">use-visually-hidden</a> | Enforce usage of the visually hidden component. | Yes | Yes | |\\n\\n<!-- END_RULE_TABLE_CODEGEN -->\\n\\n\\n## Props\\n\\nUse the recommended config to get reasonable defaults recommended by the Atlassian Design System:\\n\\n```diff\\nmodule.exports = {\\n extends: [\\n+ \'plugin:@atlaskit/design-system/recommended\',\\n ],\\n};\\n```\\n\\nWe don\'t recommended maintaining your own configuration. If you do not use our config you will need\\nto specify individual rules and configuration. Add the plugin to your `eslint.config.cjs` file.\\n\\n```diff\\nmodule.exports = {\\n plugins: [\\n+ \'@atlaskit/design-system\',\\n ],\\n};\\n```\\n\\nEnable the rules that you would like to use.\\n\\n```diff\\nmodule.exports = {\\n rules: [\\n+ \'@atlaskit/design-system/no-deprecated-apis\': \'error\',\\n ],\\n};\\n```\\n"}',
|
|
54
|
+
content: '{"ruleName":"index","description":"---","content":"---\\norder: 0\\n---\\n\\nThis plugin contains rules that should be used when working with the\\n[Atlassian Design System](https://atlassian.design).\\n\\n## Rules\\n\\n<!-- START_RULE_TABLE_CODEGEN -->\\n<!-- @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen -->\\n\\n| Rule | Description | Recommended | Fixable | Suggestions |\\n| ----------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | ------- | ----------- |\\n| <a href=\\"/components/eslint-plugin-design-system/consistent-css-prop-usage/usage\\">consistent-css-prop-usage</a> | Ensures consistency with `css` and `xcss` prop usages | Yes | Yes | |\\n| <a href=\\"/components/eslint-plugin-design-system/enforce-inline-styles-in-select/usage\\">enforce-inline-styles-in-select</a> | Disallow unsupported CSS selectors in styles prop for @atlaskit/select and require inline styles only | | | |\\n| <a href=\\"/components/eslint-plugin-design-system/ensure-avatar-tag-avatar-props/usage\\">ensure-avatar-tag-avatar-props</a> | Ensures AvatarTag avatar prop does not include controlled props (size, borderColor, appearance) which are managed internally. | Yes | | |\\n| <a href=\\"/components/eslint-plugin-design-system/ensure-design-token-usage/usage\\">ensure-design-token-usage</a> | Enforces usage of design tokens rather than hard-coded values. | Yes | Yes | Yes |\\n| <a href=\\"/components/eslint-plugin-design-system/ensure-design-token-usage-preview/usage\\">ensure-design-token-usage/preview</a> | Enforces usage of pre-release design tokens rather than hard-coded values. | | Yes | Yes |\\n| <a href=\\"/components/eslint-plugin-design-system/ensure-icon-color/usage\\">ensure-icon-color</a> | Enforces that upcoming icon components have a color prop set, to enable a migration of the default value. | | | |\\n| <a href=\\"/components/eslint-plugin-design-system/ensure-proper-xcss-usage/usage\\">ensure-proper-xcss-usage</a> | Enforces proper xcss usage: migrate from xcss() to cssMap() and use cssMap objects with specific keys. | | | |\\n| <a href=\\"/components/eslint-plugin-design-system/icon-label/usage\\">icon-label</a> | Enforces accessible usage of icon labels when composed with Atlassian Design System components. | Yes | Yes | |\\n| <a href=\\"/components/eslint-plugin-design-system/lozenge-badge-tag-labelling-system-migration/usage\\">lozenge-badge-tag-labelling-system-migration</a> | Helps migrate Lozenge isBold prop, Badge appearance values, and SimpleTag/RemovableTag components as part of the Labelling System Phase 1 migration. | | Yes | |\\n| <a href=\\"/components/eslint-plugin-design-system/no-banned-imports/usage\\">no-banned-imports</a> | Disallow importing banned modules. | Yes | | |\\n| <a href=\\"/components/eslint-plugin-design-system/no-boolean-autofocus-on-modal-dialog/usage\\">no-boolean-autofocus-on-modal-dialog</a> | Encourages makers to not use boolean values for `autoFocus` on Atlassian Design System\'s modal dialog component. | Yes | | |\\n| <a href=\\"/components/eslint-plugin-design-system/no-css-tagged-template-expression/usage\\">no-css-tagged-template-expression</a> | Disallows any `css` tagged template expressions that originate from Emotion, Styled Components or Compiled | | Yes | |\\n| <a href=\\"/components/eslint-plugin-design-system/no-custom-icons/usage\\">no-custom-icons</a> | Enforces custom glyph icons are used. | | | |\\n| <a href=\\"/components/eslint-plugin-design-system/no-dark-theme-vr-tests/usage\\">no-dark-theme-vr-tests</a> | Disallow using dark colorScheme in VR tests. | | Yes | |\\n| <a href=\\"/components/eslint-plugin-design-system/no-deprecated-apis/usage\\">no-deprecated-apis</a> | Disallow using deprecated APIs. | Yes | | |\\n| <a href=\\"/components/eslint-plugin-design-system/no-deprecated-design-token-usage/usage\\">no-deprecated-design-token-usage</a> | Disallow using deprecated design tokens. | Yes | Yes | |\\n| <a href=\\"/components/eslint-plugin-design-system/no-deprecated-imports/usage\\">no-deprecated-imports</a> | Disallow importing deprecated modules. | Yes | Yes | Yes |\\n| <a href=\\"/components/eslint-plugin-design-system/no-direct-use-of-web-platform-drag-and-drop/usage\\">no-direct-use-of-web-platform-drag-and-drop</a> | Disallow using direct use of native drag and drop (please use Pragmatic drag and drop) | Yes | | |\\n| <a href=\\"/components/eslint-plugin-design-system/no-emotion-primitives/usage\\">no-emotion-primitives</a> | Ensures usage of Compiled Primitives import instead of Emotion entrypoint. | | Yes | |\\n| <a href=\\"/components/eslint-plugin-design-system/no-empty-styled-expression/usage\\">no-empty-styled-expression</a> | Forbids any styled expression to be used when passing empty arguments to styled.div() (or other JSX elements). | | | |\\n| <a href=\\"/components/eslint-plugin-design-system/no-exported-css/usage\\">no-exported-css</a> | Forbid exporting `css` function calls. Exporting `css` function calls can result in unexpected behaviour at runtime, and is not statically analysable. | | | |\\n| <a href=\\"/components/eslint-plugin-design-system/no-exported-keyframes/usage\\">no-exported-keyframes</a> | Forbid exporting `keyframes` function calls. Exporting `css` function calls can result in unexpected behaviour at runtime, and is not statically analysable. | | | |\\n| <a href=\\"/components/eslint-plugin-design-system/no-html-anchor/usage\\">no-html-anchor</a> | Discourage direct usage of HTML anchor elements in favor of Atlassian Design System link components. | Yes | | Yes |\\n| <a href=\\"/components/eslint-plugin-design-system/no-html-button/usage\\">no-html-button</a> | Discourage direct usage of HTML button elements in favor of Atlassian Design System button components. | Yes | | |\\n| <a href=\\"/components/eslint-plugin-design-system/no-html-checkbox/usage\\">no-html-checkbox</a> | Discourage direct usage of HTML checkbox elements in favor of the Atlassian Design System checkbox component. | Yes | | Yes |\\n| <a href=\\"/components/eslint-plugin-design-system/no-html-code/usage\\">no-html-code</a> | Discourage direct usage of HTML code elements in favor of the Atlassian Design System code component. | Yes | | Yes |\\n| <a href=\\"/components/eslint-plugin-design-system/no-html-heading/usage\\">no-html-heading</a> | Discourage direct usage of HTML heading elements in favor of Atlassian Design System heading components. | Yes | | Yes |\\n| <a href=\\"/components/eslint-plugin-design-system/no-html-image/usage\\">no-html-image</a> | Discourage direct usage of HTML image elements in favor of the Atlassian Design System image component. | Yes | | Yes |\\n| <a href=\\"/components/eslint-plugin-design-system/no-html-radio/usage\\">no-html-radio</a> | Discourage direct usage of HTML radio elements in favor of the Atlassian Design System radio component. | Yes | | Yes |\\n| <a href=\\"/components/eslint-plugin-design-system/no-html-range/usage\\">no-html-range</a> | Discourage direct usage of HTML range elements in favor of the Atlassian Design System range component. | Yes | | Yes |\\n| <a href=\\"/components/eslint-plugin-design-system/no-html-select/usage\\">no-html-select</a> | Discourage direct usage of HTML select elements in favor of the Atlassian Design System select component. | Yes | | Yes |\\n| <a href=\\"/components/eslint-plugin-design-system/no-html-text-input/usage\\">no-html-text-input</a> | Discourage direct usage of HTML text input elements in favor of the Atlassian Design System textfield component. | Yes | | Yes |\\n| <a href=\\"/components/eslint-plugin-design-system/no-html-textarea/usage\\">no-html-textarea</a> | Discourage direct usage of HTML textarea elements in favor of the Atlassian Design System textarea component. | Yes | | Yes |\\n| <a href=\\"/components/eslint-plugin-design-system/no-icon-spacing-prop/usage\\">no-icon-spacing-prop</a> | Disallows usage of the deprecated spacing prop on new icons. Use Flex with cssMap for spacing instead. | Yes | | Yes |\\n| <a href=\\"/components/eslint-plugin-design-system/no-invalid-css-map/usage\\">no-invalid-css-map</a> | Checks the validity of a CSS map created through cssMap. This is intended to be used alongside TypeScript\'s type-checking. | Yes | | |\\n| <a href=\\"/components/eslint-plugin-design-system/no-keyframes-tagged-template-expression/usage\\">no-keyframes-tagged-template-expression</a> | Disallows any `keyframe` tagged template expressions that originate from Emotion, Styled Components or Compiled | | Yes | |\\n| <a href=\\"/components/eslint-plugin-design-system/no-legacy-icons/usage\\">no-legacy-icons</a> | Enforces no legacy icons are used. | | Yes | Yes |\\n| <a href=\\"/components/eslint-plugin-design-system/no-margin/usage\\">no-margin</a> | Disallow using the margin CSS property. | | | |\\n| <a href=\\"/components/eslint-plugin-design-system/no-nested-styles/usage\\">no-nested-styles</a> | Disallows use of nested styles in `css` functions. | Yes | | |\\n| <a href=\\"/components/eslint-plugin-design-system/no-physical-properties/usage\\">no-physical-properties</a> | Disallow physical properties and values in `css` and `cssMap` function calls. | | Yes | |\\n| <a href=\\"/components/eslint-plugin-design-system/no-placeholder/usage\\">no-placeholder</a> | Placeholders should not be used. If information should be given to the user about the proper type or formatting of a value, this should be included using a helper message that is associated to the input instead. | Yes | | |\\n| <a href=\\"/components/eslint-plugin-design-system/no-separator-with-list-elements/usage\\">no-separator-with-list-elements</a> | Warn when the `separator` prop is used with `as=\\"li\\"`, `as=\\"ol\\"`, or `as=\\"dl\\"` in the Inline component. | Yes | | |\\n| <a href=\\"/components/eslint-plugin-design-system/no-styled-tagged-template-expression/usage\\">no-styled-tagged-template-expression</a> | Disallows any `styled` tagged template expressions that originate from Emotion, Styled Components or Compiled | | Yes | |\\n| <a href=\\"/components/eslint-plugin-design-system/no-to-match-snapshot/usage\\">no-to-match-snapshot</a> | Disallow using toMatchSnapshot() in favor of toMatchInlineSnapshot(). See https://hello.atlassian.net/wiki/spaces/DST/pages/6105892000/DSTRFC-038+-+Removal+of+.toMatchSnapshot for rationale. | | | |\\n| <a href=\\"/components/eslint-plugin-design-system/no-unsafe-design-token-usage/usage\\">no-unsafe-design-token-usage</a> | Enforces design token usage is statically and locally analyzable. | Yes | Yes | |\\n| <a href=\\"/components/eslint-plugin-design-system/no-unsafe-inline-snapshot/usage\\">no-unsafe-inline-snapshot</a> | Enforce guardrails on toMatchInlineSnapshot usage: snapshots must not exceed 100 lines and must not contain internal implementation details like className or style attributes. | | | |\\n| <a href=\\"/components/eslint-plugin-design-system/no-unsafe-style-overrides/usage\\">no-unsafe-style-overrides</a> | Discourage usage of unsafe style overrides used against the Atlassian Design System. | Yes | | |\\n| <a href=\\"/components/eslint-plugin-design-system/no-unsupported-drag-and-drop-libraries/usage\\">no-unsupported-drag-and-drop-libraries</a> | Disallow importing unsupported drag and drop modules. | Yes | | |\\n| <a href=\\"/components/eslint-plugin-design-system/no-unused-css-map/usage\\">no-unused-css-map</a> | Detects unused styles in cssMap objects to help keep code clean. | Yes | | |\\n| <a href=\\"/components/eslint-plugin-design-system/prefer-primitives/usage\\">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. | | | |\\n| <a href=\\"/components/eslint-plugin-design-system/use-button-group-label/usage\\">use-button-group-label</a> | Ensures button groups are described to assistive technology by a direct label or by another element. | Yes | | Yes |\\n| <a href=\\"/components/eslint-plugin-design-system/use-character-counter-field/usage\\">use-character-counter-field</a> | Suggests using CharacterCounterField or CharacterCounter when Textfield or Textarea components have maxLength or minLength props. | Yes | | |\\n| <a href=\\"/components/eslint-plugin-design-system/use-correct-field/usage\\">use-correct-field</a> | Ensure makers use appropriate field component for their respective form elements. | Yes | Yes | Yes |\\n| <a href=\\"/components/eslint-plugin-design-system/use-cx-function-in-xcss/usage\\">use-cx-function-in-xcss</a> | Enforces cx function use to combine styles in xcss. | Yes | Yes | Yes |\\n| <a href=\\"/components/eslint-plugin-design-system/use-datetime-picker-calendar-button/usage\\">use-datetime-picker-calendar-button</a> | Encourages makers to use calendar button in Atlassian Design System\'s date picker and datetime picker components. | Yes | Yes | Yes |\\n| <a href=\\"/components/eslint-plugin-design-system/use-drawer-label/usage\\">use-drawer-label</a> | Encourages to provide accessible name for Atlassian Design System Drawer component. | Yes | | Yes |\\n| <a href=\\"/components/eslint-plugin-design-system/use-field-message-wrapper/usage\\">use-field-message-wrapper</a> | Encourage use of message wrapper component when using form message components. | Yes | | Yes |\\n| <a href=\\"/components/eslint-plugin-design-system/use-heading/usage\\">use-heading</a> | Encourage the usage of heading components. | Yes | Yes | Yes |\\n| <a href=\\"/components/eslint-plugin-design-system/use-heading-level-in-spotlight-card/usage\\">use-heading-level-in-spotlight-card</a> | Inform developers of eventual requirement of `headingLevel` prop in `SpotlightCard` component. The heading level should be the appropriate level according to the surrounding context. | Yes | Yes | |\\n| <a href=\\"/components/eslint-plugin-design-system/use-href-in-link-item/usage\\">use-href-in-link-item</a> | Inform developers of eventual requirement of `href` prop in `LinkItem` component. Elements with a `link` role require an `href` attribute for users to properly navigate, particularly those using assistive technologies. If no valid `href` is required for your use case, consider using a `ButtonItem` instead. | Yes | Yes | Yes |\\n| <a href=\\"/components/eslint-plugin-design-system/use-latest-xcss-syntax/usage\\">use-latest-xcss-syntax</a> | Enforces usage of space design tokens rather than hard-coded values in xcss. | Yes | Yes | |\\n| <a href=\\"/components/eslint-plugin-design-system/use-latest-xcss-syntax-typography/usage\\">use-latest-xcss-syntax-typography</a> | Prohibits use of unsafe styling properties in xcss. Please use Text/Heading primitives instead. | Yes | Yes | |\\n| <a href=\\"/components/eslint-plugin-design-system/use-menu-section-title/usage\\">use-menu-section-title</a> | Encourages makers to provide accessible title for Atlassian Design System Menu Section component. | Yes | | Yes |\\n| <a href=\\"/components/eslint-plugin-design-system/use-modal-dialog-close-button/usage\\">use-modal-dialog-close-button</a> | Encourages makers to use close button in Atlassian Design System\'s modal dialog component. | Yes | Yes | Yes |\\n| <a href=\\"/components/eslint-plugin-design-system/use-onboarding-spotlight-label/usage\\">use-onboarding-spotlight-label</a> | Ensures onboarding spotlight dialogs are described to assistive technology by a direct label or by another element. | Yes | | Yes |\\n| <a href=\\"/components/eslint-plugin-design-system/use-popup-label/usage\\">use-popup-label</a> | Encourages to provide accessible name for Atlassian Design System Popup component. | Yes | | Yes |\\n| <a href=\\"/components/eslint-plugin-design-system/use-primitives/usage\\">use-primitives</a> | Encourage the usage of primitives components. | | Yes | Yes |\\n| <a href=\\"/components/eslint-plugin-design-system/use-primitives-text/usage\\">use-primitives-text</a> | Encourage the usage of text components. | Yes | Yes | Yes |\\n| <a href=\\"/components/eslint-plugin-design-system/use-should-render-to-parent/usage\\">use-should-render-to-parent</a> | Encourages makers to use the `shouldRenderToParent` where possible in Atlassian Design System `Popup` and `DropdownMenu` components. | Yes | | Yes |\\n| <a href=\\"/components/eslint-plugin-design-system/use-simple-field/usage\\">use-simple-field</a> | Encourage use of simple field for better developer experience and accessibility. | Yes | | Yes |\\n| <a href=\\"/components/eslint-plugin-design-system/use-simple-form/usage\\">use-simple-form</a> | Encourage use of simple form for better developer experience and accessibility. | Yes | | Yes |\\n| <a href=\\"/components/eslint-plugin-design-system/use-spotlight-package/usage\\">use-spotlight-package</a> | Discourage the use of @atlaskit/onboarding in favor of @atlaskit/spotlight. | | Yes | Yes |\\n| <a href=\\"/components/eslint-plugin-design-system/use-tag-group-label/usage\\">use-tag-group-label</a> | Ensures tag groups are described to assistive technology by a direct label or by another element. | Yes | | Yes |\\n| <a href=\\"/components/eslint-plugin-design-system/use-tokens-shape/usage\\">use-tokens-shape</a> | Enforces usage of shape design tokens rather than hard-coded values. | | Yes | Yes |\\n| <a href=\\"/components/eslint-plugin-design-system/use-tokens-space/usage\\">use-tokens-space</a> | Enforces usage of space design tokens rather than hard-coded values. | | Yes | Yes |\\n| <a href=\\"/components/eslint-plugin-design-system/use-tokens-typography/usage\\">use-tokens-typography</a> | Enforces usage of design tokens for typography properties rather than hard-coded values. | Yes | Yes | Yes |\\n| <a href=\\"/components/eslint-plugin-design-system/use-visually-hidden/usage\\">use-visually-hidden</a> | Enforce usage of the visually hidden component. | Yes | Yes | |\\n\\n<!-- END_RULE_TABLE_CODEGEN -->\\n\\n\\n## Props\\n\\nUse the recommended config to get reasonable defaults recommended by the Atlassian Design System:\\n\\n```diff\\nmodule.exports = {\\n extends: [\\n+ \'plugin:@atlaskit/design-system/recommended\',\\n ],\\n};\\n```\\n\\nWe don\'t recommended maintaining your own configuration. If you do not use our config you will need\\nto specify individual rules and configuration. Add the plugin to your `eslint.config.cjs` file.\\n\\n```diff\\nmodule.exports = {\\n plugins: [\\n+ \'@atlaskit/design-system\',\\n ],\\n};\\n```\\n\\nEnable the rules that you would like to use.\\n\\n```diff\\nmodule.exports = {\\n rules: [\\n+ \'@atlaskit/design-system/no-deprecated-apis\': \'error\',\\n ],\\n};\\n```\\n"}',
|
|
55
55
|
ruleName: 'index',
|
|
56
56
|
description: '---'
|
|
57
57
|
}, {
|
|
@@ -166,6 +166,10 @@ var lintRulesMcpStructuredContent = exports.lintRulesMcpStructuredContent = [{
|
|
|
166
166
|
content: '{"ruleName":"no-html-textarea","description":"Don\'t use native HTML textarea elements. The Atlassian Design System provides a ready-made textarea","content":"# no-html-textarea\\n\\nDon\'t use native HTML textarea elements. The Atlassian Design System provides a ready-made textarea\\ncomponent that includes event tracking, ensures accessible implementations, and provides access to\\nADS styling features like design tokens.\\n\\nUse the Atlassian Design System [Textarea](/components/textarea/) component when suitable.\\n\\n## Examples\\n\\nThis rule marks code as violations when it finds native HTML code elements.\\n\\n### Incorrect\\n\\n```jsx\\n<label htmlFor=\\"textarea\\">Share your feedback</label>\\n<textarea id=\\"textarea\\"></textarea>\\n ^^^^^^^^ Using a native HTML `<textarea>`\\n```\\n\\n### Correct\\n\\n```jsx\\nimport Textarea from \'@atlaskit/textarea\';\\n\\n<label htmlFor=\\"textarea\\">Share your feedback</label>\\n<Textarea id=\\"textarea\\" />\\n```\\n"}',
|
|
167
167
|
ruleName: 'no-html-textarea',
|
|
168
168
|
description: "Don't use native HTML textarea elements. The Atlassian Design System provides a ready-made textarea"
|
|
169
|
+
}, {
|
|
170
|
+
content: '{"ruleName":"no-icon-spacing-prop","description":"Disallows usage of the deprecated `spacing` prop on icon components from `@atlaskit/icon/core` and","content":"# no-icon-spacing-prop\\n\\nDisallows usage of the deprecated `spacing` prop on icon components from `@atlaskit/icon/core` and\\n`@atlaskit/icon-lab/core`.\\n\\nThe `spacing` prop is deprecated. Wrap the icon in a `Flex` from `@atlaskit/primitives/compiled`\\nwith `cssMap` padding from `@atlaskit/css` instead.\\n\\n## Examples\\n\\n### Incorrect\\n\\n```tsx\\nimport AddIcon from \'@atlaskit/icon/core/add\';\\n\\n// ❌ Using deprecated spacing prop\\n<AddIcon label=\\"Add\\" spacing=\\"spacious\\" />\\n<AddIcon label=\\"Add\\" spacing=\\"compact\\" />\\n```\\n\\n### Correct\\n\\n```tsx\\n/** @jsxRuntime classic */\\n/** @jsx jsx */\\nimport { cssMap, jsx } from \'@atlaskit/css\';\\nimport AddIcon from \'@atlaskit/icon/core/add\';\\nimport { Flex } from \'@atlaskit/primitives/compiled\';\\nimport { token } from \'@atlaskit/tokens\';\\n\\nconst iconSpacingStyles = cssMap({\\n space050: {\\n paddingBlock: token(\'space.050\'),\\n paddingInline: token(\'space.050\'),\\n },\\n});\\n\\n// ✅ Using Flex with cssMap for spacing\\n<Flex xcss={iconSpacingStyles.space050}>\\n <AddIcon label=\\"Add\\" />\\n</Flex>\\n\\n// ✅ No spacing needed (spacing=\\"none\\")\\n<AddIcon label=\\"Add\\" />\\n```\\n\\n## Migration\\n\\nUse the `next-icon-spacing-to-flex-primitive` codemod via `npx @atlaskit/codemod-cli` to migrate\\nautomatically, or use the 💡 IDE quick-fix suggestion from this ESLint rule.\\n\\nSpacing token reference:\\n\\n| `spacing` value | Icon size | Token | Result |\\n| --------------- | ------------- | ----------- | --------------------------- |\\n| `spacious` | medium (16px) | `space.050` | 4px padding → 24px total |\\n| `compact` | medium (16px) | `space.050` | 4px padding → 24px total |\\n| `spacious` | small (12px) | `space.075` | 6px padding → 24px total |\\n| `compact` | small (12px) | `space.025` | 2px padding → 16px total |\\n| `none` | any | — | Remove prop, no Flex needed |\\n"}',
|
|
171
|
+
ruleName: 'no-icon-spacing-prop',
|
|
172
|
+
description: 'Disallows usage of the deprecated `spacing` prop on icon components from `@atlaskit/icon/core` and'
|
|
169
173
|
}, {
|
|
170
174
|
content: "{\"ruleName\":\"no-invalid-css-map\",\"description\":\"Ensure that all usages of the `cssMap` API are valid, and enforces the format of the object that is\",\"content\":\"# no-invalid-css-map\\n\\nEnsure that all usages of the `cssMap` API are valid, and enforces the format of the object that is\\npassed to `cssMap`.\\n\\nPlease refer to the [Compiled documentation](https://compiledcssinjs.com/docs/api-cssmap) for more\\ndetails and some examples.\\n\\nNote that this version of the `no-invalid-css-map` rule differs from\\n`@compiled/eslint-plugin/no-invalid-css-map` in that this will apply to both `@compiled/react` and\\n`@atlaskit/css`.\\n\\nThis is intended to be used in conjunction with type checking (through TypeScript).\\n\\n## Examples\\n\\n### Incorrect\\n\\n```tsx\\nimport React from 'react';\\nimport { cssMap } from '@compiled/react';\\n\\n// cssMap needs to be declared in the top-most scope.\\n// (not within a function, class, etc.)\\n\\nconst Foo = () => {\\n\\tconst bar = cssMap({\\n\\t\\tdanger: {\\n\\t\\t\\tcolor: 'red',\\n\\t\\t},\\n\\t});\\n};\\n```\\n\\n```tsx\\nimport React from 'react';\\nimport { cssMap } from '@compiled/react';\\nimport { importedVariable, importedFunction } from 'another-package';\\n\\n// Cannot use imported functions as values in cssMap.\\n\\nconst myVariable = importedFunction();\\n\\nconst styles = cssMap({\\n\\tdanger: {\\n\\t\\t// Both invalid because they rely on an imported function.\\n\\t\\tcolor: myVariable,\\n\\t\\tpadding: importedFunction(),\\n\\t},\\n});\\n```\\n\\n```tsx\\nimport React from 'react';\\nimport { cssMap } from '@compiled/react';\\n\\n// Cannot export usages of cssMap.\\n// Any usages of cssMap must be in the same file.\\n\\nexport const foo = cssMap({\\n\\tdanger: {\\n\\t\\tcolor: 'red',\\n\\t},\\n});\\n```\\n\\n```tsx\\nimport React from 'react';\\nimport { cssMap } from '@compiled/react';\\nimport { token } from '@atlaskit/tokens';\\n\\n// Functions and object methods are not allowed as\\n// values in cssMap.\\n\\nconst styles = cssMap({\\n\\t// Object method\\n\\tget danger() {\\n\\t\\treturn { color: '#123456' };\\n\\t},\\n});\\n\\nconst styles2 = cssMap({\\n\\t// Arrow function\\n\\tdanger: () => {\\n\\t\\tcolor: '#123456';\\n\\t},\\n});\\n\\nfunction customFunction(...args) {\\n\\treturn arguments.join('');\\n}\\n\\nconst styles3 = cssMap({\\n\\tdanger: {\\n\\t\\t// Locally defined function\\n\\t\\tcolor: customFunction('red', 'blue'),\\n\\t\\tbackgroundColor: 'red',\\n\\t},\\n});\\n```\\n\\n```tsx\\nimport React from 'react';\\nimport { cssMap } from '@compiled/react';\\n\\n// Spread elements (\\\"...\\\") cannot be used in cssMap.\\n\\nconst base = {\\n\\tsuccess: {\\n\\t\\tcolor: 'green',\\n\\t},\\n};\\n\\nconst bar = cssMap({\\n\\t...base,\\n\\tdanger: {\\n\\t\\tcolor: 'red',\\n\\t},\\n});\\n```\\n\\n### Correct\\n\\n```tsx\\nimport React from 'react';\\nimport { cssMap } from '@compiled/react';\\n\\n// Literals (strings, numbers, etc.) are used as values\\n// in cssMap.\\n\\nconst styles = cssMap({\\n\\tdanger: {\\n\\t\\tcolor: 'red',\\n\\t\\tbackgroundColor: 'red',\\n\\t},\\n\\tsuccess: {\\n\\t\\tcolor: 'green',\\n\\t\\tbackgroundColor: 'green',\\n\\t},\\n});\\n```\\n\\n```tsx\\nimport React from 'react';\\nimport { cssMap } from '@compiled/react';\\n\\n// A statically evaluable variable (known at build time)\\n// is used here.\\n\\nconst bap = 'blue';\\n\\nconst styles = cssMap({\\n\\tdanger: {\\n\\t\\tcolor: bap,\\n\\t},\\n});\\n```\\n\\n### Options\\n\\n#### `allowedFunctionCalls`: [string, string][]\\n\\nNormally, this ESLint rule forbids all function calls from being used inside the `cssMap(...)`\\nfunction call. For example, this would be invalid using default settings:\\n\\n```tsx\\nimport React from 'react';\\nimport { cssMap } from '@compiled/react';\\nimport { token } from '@atlaskit/tokens';\\n\\nconst styles = cssMap({\\n\\tdanger: {\\n\\t\\tcolor: token('my-color'),\\n\\t\\tbackgroundColor: 'red',\\n\\t},\\n\\tsuccess: {\\n\\t\\tcolor: 'green',\\n\\t},\\n});\\n```\\n\\nIf you would like to whitelist certain functions (e.g. `token` from `@atlaskit/tokens`), you can\\ninclude the names of the functions as part of the `allowedFunctionCalls` argument. Each function\\nshould be represented as a two-element array, with the first element being the package the function\\nis from, and the second element being the name of the function.\\n\\nFor example, with the below configuration, the above code example would be okay.\\n\\n```tsx\\n// eslint.config.cjs\\n\\n// ...\\n rules: {\\n '@atlaskit/eslint-plugin-design-system/no-invalid-css-map': [\\n 'error',\\n {\\n allowedFunctionCalls: [\\n ['@atlaskit/tokens', 'token'],\\n ]\\n },\\n ],\\n // ...\\n },\\n// ...\\n```\\n\\nPlease note that this ESLint rule only supports whitelisting imports in the form\\n`import { myFunctionOrVariable } from 'my-package'`; we do not currently support whitelisting\\ndefault imports, so `import myFunctionOrVariable from 'my-package'` would always be invalid when\\nused in `cssMap`.\\n\"}",
|
|
171
175
|
ruleName: 'no-invalid-css-map',
|
|
@@ -314,10 +318,6 @@ var lintRulesMcpStructuredContent = exports.lintRulesMcpStructuredContent = [{
|
|
|
314
318
|
content: '{"ruleName":"use-should-render-to-parent","description":"Popups and dropdown menus render to portals by default. This puts their content outside of the","content":"# use-should-render-to-parent\\n\\nPopups and dropdown menus render to portals by default. This puts their content outside of the\\nstandard DOM order which creates accessibility issues for users.\\n\\n## Examples\\n\\nThis rule will indicate user with a recommendation to use the `shouldRenderToParent` prop set to\\n`true`.\\n\\n### Incorrect\\n\\n```tsx\\n<Popup>\\n ^^^^^ The default value of `shouldRenderToParent` is `false`. Setting the `shouldRenderToParent` prop to anything other than `true` causes accessibility issues. Only set to `false` as a last resort.\\n Popup content\\n</Popup>\\n\\n<DropdownMenu>\\n ^^^^^^^^^^^^ The default value of `shouldRenderToParent` is `false`. Setting the `shouldRenderToParent` prop to anything other than `true` causes accessibility issues. Only set to `false` as a last resort.\\n Dropdown content\\n</DropdownMenu>\\n\\n<Popup shouldRenderToParent={false}>\\n ^^^^^^^^^^^^^^^^^^^^ Setting the `shouldRenderToParent` prop to anything other than `true` causes accessibility issues. Only set to `false` as a last resort.\\n Popup content\\n</Popup>\\n```\\n\\n### Correct\\n\\n```tsx\\n<Popup shouldRenderToParent>\\n Popup content\\n</Popup>\\n\\n<DropdownMenu shouldRenderToParent>\\n Dropdown content\\n</DropdownMenu>\\n```\\n"}',
|
|
315
319
|
ruleName: 'use-should-render-to-parent',
|
|
316
320
|
description: 'Popups and dropdown menus render to portals by default. This puts their content outside of the'
|
|
317
|
-
}, {
|
|
318
|
-
content: "{\"ruleName\":\"use-side-nav-items-package\",\"description\":\"This rule raises a violation for usages of `@atlaskit/navigation-system/side-nav-items/*` or for\",\"content\":\"# use-side-nav-items-package\\n\\n## Examples\\n\\nThis rule raises a violation for usages of `@atlaskit/navigation-system/side-nav-items/*` or for\\nimporting side-nav item names from the root `@atlaskit/navigation-system` barrel. This is to assist\\nwith the migration to the dedicated package `@atlaskit/side-nav-items`.\\n\\n### Incorrect\\n\\n```jsx\\nimport { ButtonMenuItem } from '@atlaskit/navigation-system/side-nav-items/button-menu-item';\\nimport { MenuList } from '@atlaskit/navigation-system/side-nav-items/menu-list';\\nimport { ButtonMenuItem, MenuList } from '@atlaskit/navigation-system';\\n```\\n\\n### Correct\\n\\n```jsx\\nimport { ButtonMenuItem } from '@atlaskit/side-nav-items/button-menu-item';\\nimport { MenuList } from '@atlaskit/side-nav-items/menu-list';\\nimport { Main, Root } from '@atlaskit/navigation-system';\\nimport { ButtonMenuItem, MenuList } from '@atlaskit/side-nav-items/button-menu-item';\\nimport { MenuList } from '@atlaskit/side-nav-items/menu-list';\\n```\\n\"}",
|
|
319
|
-
ruleName: 'use-side-nav-items-package',
|
|
320
|
-
description: 'This rule raises a violation for usages of `@atlaskit/navigation-system/side-nav-items/*` or for'
|
|
321
321
|
}, {
|
|
322
322
|
content: '{"ruleName":"use-simple-field","description":"Simple field implementations should be used when extended features or complex implementations are","content":"# use-simple-field\\n\\nSimple field implementations should be used when extended features or complex implementations are\\nnot needed.\\n\\n## Examples\\n\\nThis rule marks code as a violation when it finds Design System field components that have:\\n\\n- no render props or there’s only fieldProps\\n- no messaging components.\\n\\n### Incorrect\\n\\n```jsx\\nimport { Field } from \'@atlaskit/form\';\\nimport TextField from \'@atlaskit/textfield\';\\n\\n<Field name=\\"username\\" label=\\"Username\\">\\n\\t{({ fieldProps }) => <TextField {...fieldProps} />}\\n</Field>;\\n```\\n\\n### Correct\\n\\n```jsx\\nimport { Field } from \'@atlaskit/form\';\\nimport TextField from \'@atlaskit/textfield\';\\n\\n<Field\\n\\tname=\\"username\\"\\n\\tlabel=\\"Username\\"\\n\\tcomponent={({ fieldProps }) => <TextField {...fieldProps} />}\\n/>;\\n```\\n"}',
|
|
323
323
|
ruleName: 'use-simple-field',
|
|
@@ -350,4 +350,108 @@ var lintRulesMcpStructuredContent = exports.lintRulesMcpStructuredContent = [{
|
|
|
350
350
|
content: "{\"ruleName\":\"use-visually-hidden\",\"description\":\"Using the visually hidden component allows you to delete bespoke or legacy theme code and replace it\",\"content\":\"# use-visually-hidden\\n\\nUsing the visually hidden component allows you to delete bespoke or legacy theme code and replace it\\nwith a ready made solution by the Atlassian Design System Team.\\n\\n## Examples\\n\\nThis rule marks code as violations when it can be replaced 1:1 with the visually hidden component.\\n\\n### Incorrect\\n\\n```js\\nimport { css } from '@emotion/core';\\nimport { visuallyHidden } from '@atlaskit/theme/constants';\\n\\nconst visuallyHiddenStyles = css({\\n width: '1px',\\n height: '1px',\\n padding: '0',\\n position: 'absolute',\\n border: '0',\\n clip: 'rect(1px, 1px, 1px, 1px)',\\n overflow: 'hidden',\\n whiteSpace: 'nowrap',\\n});\\n\\nconst VisuallyHidden = styled.span`${visuallyHidden()}`;\\n ^^^^^^^^^^^^^^\\n```\\n\\n### Correct\\n\\n```js\\nimport VisuallyHidden from '@atlaskit/visually-hidden';\\n```\\n\"}",
|
|
351
351
|
ruleName: 'use-visually-hidden',
|
|
352
352
|
description: 'Using the visually hidden component allows you to delete bespoke or legacy theme code and replace it'
|
|
353
|
+
}, {
|
|
354
|
+
content: "{\"ruleName\":\"atlaskit-theme\",\"description\":\"Blocks legacy `@atlaskit/theme` mixins that `@compiled/react` cannot compile. This includes the\",\"content\":\"# atlaskit-theme\\n\\nBlocks legacy `@atlaskit/theme` mixins that `@compiled/react` cannot compile. This includes the\\n`typography`, `elevation` and `skeletonShimmer` mixins.\\n\\n## Examples\\n\\n### Typography\\n\\nDon't use `typography` mixins.\\n\\nUse [typography tokens](https://atlassian.design/foundations/typography-beta/applying-typography) or\\nthe [Heading](https://atlassian.design/components/heading) and\\n[Text](https://atlassian.design/components/primitives/text) components.\\n\\n#### Incorrect\\n\\n```tsx\\nimport { css } from '@compiled/react';\\nimport { typography } from '@atlaskit/theme';\\n\\nconst titleStyles = css(typography.h700());\\n```\\n\\n#### Correct\\n\\n```tsx\\nimport { css } from '@compiled/react';\\nimport { token } from '@atlaskit/tokens';\\n\\nconst titleStyles = css({\\n\\tfont: token('font.heading.large'),\\n});\\n\\nconst paragraphStyles = css({\\n\\tfont: token('font.body.large'),\\n});\\n```\\n\\n```tsx\\nimport { css } from '@compiled/react';\\nimport Heading from '@atlaskit/heading';\\nimport { Stack, Text } from '@atlaskit/primitives';\\nimport { token } from '@atlaskit/tokens';\\n\\nconst Component = () => (\\n\\t<Stack>\\n\\t\\t<Heading size=\\\"large\\\">Title</Heading>\\n\\t\\t<Text size=\\\"large\\\">Lorem ipsum</Text>\\n\\t</Stack>\\n);\\n```\\n\\n### Elevation\\n\\nDon't use `elevation` mixins.\\n\\nUse [elevation tokens](https://atlassian.design/foundations/elevation) instead.\\n\\n#### Incorrect\\n\\n```tsx\\nimport { css } from '@compiled/react';\\nimport { elevation } from '@atlaskit/theme';\\n\\nconst cardStyles = css(elevation.e100());\\n```\\n\\n#### Correct\\n\\n```tsx\\nimport { styled } from '@compiled/react';\\nimport { token } from '@atlaskit/tokens';\\n\\nconst cardStyles = css({\\n\\tbackgroundColor: token('elevation.surface.raised'),\\n\\tboxShadow: token('elevation.shadow.raised'),\\n});\\n```\\n\\n### Skeleton Shimmer\\n\\nDon't use the `skeletonShimmer` mixin.\\n\\nPreview our [Skeleton](https://staging.atlassian.design/components/skeleton/examples) component\\n(internal Atlassians only).\\n\\nOtherwise:\\n\\n- Use the `color.skeleton` and `color.skeleton.subtle` tokens to make your own component.\\n- Use `@atlassian/jira-skeletons` when working on Jira (internal Atlassians only).\\n\\n#### Incorrect\\n\\n```tsx\\nimport { css } from '@compiled/react';\\nimport { skeletonShimmer } from '@atlaskit/theme/constants';\\n\\nconst skeletonStyles = css(skeletonShimmer());\\n```\\n\\n#### Correct\\n\\n```tsx\\nimport Skeleton from '@atlaskit/skeleton';\\n\\n<Skeleton width=\\\"200px\\\" height=\\\"16px\\\" isShimmering />;\\n```\\n\\n```tsx\\nimport { css, keyframes } from '@compiled/react';\\n\\nconst shimmer = keyframes({\\n\\tfrom: { backgroundColor: token('color.skeleton') },\\n\\tto: { backgroundColor: token('color.skeleton.subtle') },\\n});\\n\\nconst skeletonStyles = css({\\n\\tbackgroundColor: token('color.skeleton'),\\n\\tanimationName: shimmer,\\n\\tanimationDuration: '1.5s',\\n\\tanimationIterationCount: 'infinite',\\n\\tanimationTimingFunction: 'linear',\\n\\tanimationDirection: 'alternate',\\n});\\n```\\n\\n```tsx\\nimport { ListSkeleton } from '@atlassian/jira-skeletons';\\n\\n<ListSkeleton numOfRows={3} />;\\n```\\n\"}",
|
|
355
|
+
ruleName: 'atlaskit-theme',
|
|
356
|
+
description: 'Blocks legacy `@atlaskit/theme` mixins that `@compiled/react` cannot compile. This includes the'
|
|
357
|
+
}, {
|
|
358
|
+
content: '{"ruleName":"consistent-css-prop-usage","description":"Ensures consistency with all `css` and `xcss` prop usages.","content":"# @atlaskit/design-system/consistent-css-prop-usage\\n\\nEnsures consistency with all `css` and `xcss` prop usages.\\n\\nThis rule is maintained by another package and configured here; refer to\\nhttps://atlassian.design/components/eslint-plugin-design-system/consistent-css-prop-usage/usage for\\nmore details.\\n"}',
|
|
359
|
+
ruleName: 'consistent-css-prop-usage',
|
|
360
|
+
description: 'Ensures consistency with all `css` and `xcss` prop usages.'
|
|
361
|
+
}, {
|
|
362
|
+
content: '{"ruleName":"convert-props-syntax","description":"Blocks dynamic styling syntax that is unsupported by `styled-components@<4` and `@emotion/styled`,","content":"# convert-props-syntax\\n\\nBlocks dynamic styling syntax that is unsupported by `styled-components@<4` and `@emotion/styled`,\\nand provides an autofix for converting to a supported syntax.\\n\\nUse this rule alongside `no-styled-tagged-template-expression`, which can output the unsupported\\ndynamic styling syntax.\\n\\nThis rule applies only to `styled` usages from `styled-components` and `@emotion/styled`.\\n\\n## Autofix\\n\\nThe autofix will find style object values that are arrow functions,\\n\\n```tsx\\nstyled.div({\\n\\tcolor: ({ myColor }) => myColor,\\n\\tbackgroundColor: (props) => props.someColor,\\n});\\n```\\n\\nHowever, refactoring the arrow function so that it is the argument to `styled.div` will fix the\\nissue:\\n\\n```tsx\\nstyled.div((props) => ({\\n\\tcolor: props.myColor,\\n\\tbackgroundColor: props.someColor,\\n}));\\n```\\n\\nThis ESLint rule will only run on usages of the `styled` API when imported from libraries that are\\nknown to have this problem.\\n\\n## About the autofixer\\n\\nThis rule has an autofixer that will automatically perform the above arrow function refactoring for\\nthe majority of cases, including for nested selectors and any props used in template literal values.\\n\\nHowever, there are a few situations where the autofixer will not be run. For these, you will need to\\nmanually fix the output, or migrate the code to `@compiled/react`.\\n\\n### Type annotations\\n\\nType annotations in the arrow function are not supported; you will need to remediate the lint error\\nmanually. For example:\\n\\n```tsx\\ntype Props = {\\n\\tmyColor: string;\\n\\tsomeColor: string;\\n};\\n\\nstyled.div({\\n\\tcolor: ({ myColor }: Props) => myColor,\\n\\tbackgroundColor: (props: Props) => props.someColor,\\n});\\n```\\n\\ncould be refactored as\\n\\n```tsx\\ntype Props = {\\n\\tmyColor: string;\\n\\tsomeColor: string;\\n};\\n\\nstyled.div((props: Props) => ({\\n\\tcolor: props.myColor,\\n\\tbackgroundColor: props.someColor,\\n}));\\n```\\n\\n### Special syntax in function parameters\\n\\nRest elements, default values, and so on in the parameter of an arrow function will need to be\\nremediated manually. For example:\\n\\n```tsx\\nstyled.div({\\n\\tcolor: ({ myColor = \'#fff\' }) => myColor,\\n\\tbackgroundColor: ({ myColor = \'#aaa\' }) => myColor,\\n});\\n```\\n\\ncould be refactored as\\n\\n```tsx\\nstyled.div((props) => ({\\n\\tcolor: myColor ?? \'#fff\',\\n\\tbackgroundColor: myColor ?? \'#aaa\',\\n}));\\n```\\n\\n## Examples\\n\\n### Incorrect\\n\\n```tsx\\nimport styled from \'styled-components\';\\n\\nstyled.div({\\n\\tcolor: ({ myColor }) => myColor,\\n\\tbackgroundColor: (props) => props.someColor,\\n});\\n\\nstyled.div({\\n\\tcolor: `url(/tmp/${({ coolProp }) => coolProp}.png)`,\\n});\\n```\\n\\n### Correct\\n\\n```tsx\\nimport styled from \'@emotion/styled\';\\n\\nstyled.div((props) => ({\\n\\tcolor: props.myColor,\\n\\tbackgroundColor: props.someColor,\\n}));\\n\\nstyled.div((props) => ({\\n\\tcolor: url(`/tmp/${coolProp}.png`),\\n}));\\n```\\n\\n## When not to use it\\n\\nYou do not need this rule if you are not using a codebase that has a violating library as it will\\nnever do anything.\\n"}',
|
|
363
|
+
ruleName: 'convert-props-syntax',
|
|
364
|
+
description: 'Blocks dynamic styling syntax that is unsupported by `styled-components@<4` and `@emotion/styled`,'
|
|
365
|
+
}, {
|
|
366
|
+
content: '{"ruleName":"enforce-style-prop","description":"Blocks providing static values through the `style` prop, which should only be used to provide","content":"# enforce-style-prop\\n\\nBlocks providing static values through the `style` prop, which should only be used to provide\\ndynamic values (values unknown at build time).\\n\\nUse the `css` prop for providing static values instead.\\n\\n## Examples\\n\\n### Incorrect\\n\\n```tsx\\nimport { token } from \'@atlaskit/tokens\';\\n\\nconst Component = () => (\\n\\t<div\\n\\t\\tstyle={{\\n\\t\\t\\tmargin: 0,\\n\\t\\t\\tcolor: token(\'color.text.danger\'),\\n\\t\\t}}\\n\\t/>\\n);\\n```\\n\\n### Correct\\n\\nAlthough `token` is a function call, it is statically resolvable by Compiled and should not be used\\nin the `style` prop.\\n\\n```tsx\\nimport { css } from \'@compiled/react\';\\nimport { token } from \'@atlaskit/tokens\';\\n\\ntype Props = { width: string };\\n\\nconst baseStyles = css({ margin: 0, color: token(\'color.text.danger\') });\\n\\nconst Component = ({ width }: Props) => (\\n\\t<div\\n\\t\\tcss={baseStyles}\\n\\t\\tstyle={{\\n\\t\\t\\twidth: props.width,\\n\\t\\t\\t\'--my-nested-width\': props.width,\\n\\t\\t}}\\n\\t/>\\n);\\n```\\n"}',
|
|
367
|
+
ruleName: 'enforce-style-prop',
|
|
368
|
+
description: 'Blocks providing static values through the `style` prop, which should only be used to provide'
|
|
369
|
+
}, {
|
|
370
|
+
content: "{\"ruleName\":\"local-cx-xcss\",\"description\":\"Blocks the `cx()` function from being used outside of the `xcss` prop. This aids tracking which\",\"content\":\"# local-cx-xcss\\n\\nBlocks the `cx()` function from being used outside of the `xcss` prop. This aids tracking which\\nstyles are applied.\\n\\nUse the `cx()` function when passing multiple styles to the `xcss` prop. This provides more robust\\ntype checking than the conventional array syntax:\\n\\n```tsx\\nimport { cssMap, cx } from '@compiled/react';\\nimport { token } from '@atlaskit/tokens';\\nimport { Component } from 'some-package';\\n\\nconst styles = cssMap({\\n\\ttext: { color: token('color.text') },\\n\\tprimary: { color: token('color.text.brand') },\\n});\\n\\n<Component xcss={cx(isPrimary && styles.text, !isPrimary && styles.primary)} />;\\n```\\n\\nThe `cx()` function is only checked when imported from `@compiled/react` or `@atlaskit/css`.\\n\\n## Examples\\n\\n### Incorrect\\n\\n```tsx\\nimport { cssMap, cx } from '@compiled/react';\\nimport { token } from '@atlaskit/tokens';\\n\\nconst styles = cssMap({\\n\\ttext: { color: token('color.text') },\\n\\tbg: { background: token('color.background.neutral') },\\n});\\n\\nconst joinedStyles = cx(styles.text, styles.bg);\\n\\n<Button xcss={joinedStyles} />;\\n```\\n\\n### Correct\\n\\n```tsx\\nimport { cssMap, cx } from '@compiled/react';\\n\\nconst styles = cssMap({\\n\\ttext: { color: token('color.text') },\\n\\tbg: { background: token('color.background.neutral') },\\n});\\n\\n<Button xcss={cx(styles.text, styles.bg)} />;\\n```\\n\"}",
|
|
371
|
+
ruleName: 'local-cx-xcss',
|
|
372
|
+
description: 'Blocks the `cx()` function from being used outside of the `xcss` prop. This aids tracking which'
|
|
373
|
+
}, {
|
|
374
|
+
content: '{"ruleName":"no-array-arguments","description":"Blocks passing array arguments to style declaration functions.","content":"# no-array-arguments\\n\\nBlocks passing array arguments to style declaration functions.\\n\\n## Examples\\n\\n### Incorrect\\n\\n```tsx\\nimport { css } from \'@compiled/react\';\\n\\nconst styles = css([{ width: 100 }, { height: 100 }]);\\n```\\n\\n```tsx\\nimport { styled } from \'@compiled/react\';\\n\\nconst styles = css([{ width: 100 }, ...items]);\\n```\\n\\n### Correct\\n\\n```tsx\\nimport { css } from \'@compiled/react\';\\n\\nconst styles = css({ width: 100 }, { height: 100 });\\n```\\n\\n```tsx\\nimport { css } from \'@compiled/react\';\\n\\nconst styles = css({ width: 100 }, ...items);\\n```\\n\\n## Options\\n\\n### `importSources: string[]`\\n\\nBy default, this rule will check styles using:\\n\\n- `@atlaskit/css`\\n- `@atlaskit/primitives`\\n- `@compiled/react`\\n- `@emotion/react`\\n- `@emotion/core`\\n- `@emotion/styled`\\n- `styled-components`\\n\\nOverride this list with the `importSources` option, which accepts an array of package names.\\n"}',
|
|
375
|
+
ruleName: 'no-array-arguments',
|
|
376
|
+
description: 'Blocks passing array arguments to style declaration functions.'
|
|
377
|
+
}, {
|
|
378
|
+
content: "{\"ruleName\":\"no-classname-prop\",\"description\":\"Blocks the `className` prop, which encourages unsafe global styles and cannot be statically\",\"content\":\"# no-classname-prop\\n\\nBlocks the `className` prop, which encourages unsafe global styles and cannot be statically\\nresolved.\\n\\nUse the `css` prop for styling, with props for configuration and `xcss` for bounded overrides.\\n\\n## Examples\\n\\n### Incorrect\\n\\n```tsx\\n<div className=\\\"my-class\\\">\\n```\\n\\n```tsx\\n<MyComponent className={isDisabled ? 'disabled' : undefined} />\\n```\\n\\n### Correct\\n\\n```tsx\\nimport { css } from '@compiled/react';\\nimport { token } from '@atlaskit/tokens';\\n\\nconst myStyles = css({ padding: token('space.100') });\\n\\n<div css={myStyles} />;\\n```\\n\\n```tsx\\n<MyComponent isDisabled={isDisabled} />\\n```\\n\\n```tsx\\nimport { Checkbox } from '@atlaskit/checkbox';\\n\\n<Checkbox xcss={{ alignItems: 'center' }} />;\\n```\\n\\nPass-through `props.xcss` are allowed, expecting this to be typed, refer to\\n[@atlaskit/css](https://atlassian.design/components/css/overview#building-reusable-components)\\n\\n```tsx\\nimport { StrictXCSSProp } from '@atlaskit/css';\\n\\nconst Component = (props: { xcss?: StrictXCSSProp<'color', never> }) => (\\n\\t<div className={props.xcss} />\\n);\\n```\\n\\n## FAQ\\n\\n### What if I'm using `className` to target elements with JavaScript?\\n\\nThere are some cases where a selector is required to integrate with a 3rd party library, such as\\nlegacy code using jQuery.\\n\\nUse a `ref` if possible. Otherwise, if you _must_ have a selector, use a `data-*` attribute that\\ngives enough context and is unique enough, for example `data-editor-table-target=\\\"true\\\"`.\\n\"}",
|
|
379
|
+
ruleName: 'no-classname-prop',
|
|
380
|
+
description: 'Blocks the `className` prop, which encourages unsafe global styles and cannot be statically'
|
|
381
|
+
}, {
|
|
382
|
+
content: "{\"ruleName\":\"no-container-queries\",\"description\":\"Blocks `@container` at-rules\",\"content\":\"# no-container-queries\\n\\nBlocks `@container` at-rules\\n([container queries](https://developer.mozilla.org/en-US/docs/Web/CSS/@container)), which are\\nunsafe.\\n\\nContainer queries are unsafe because they:\\n\\n- break the rules of scope\\n- aren't deterministic\\n- aren't type-safe\\n- aren't fully supported across our frontend tech stacks\\n\\nUse [media queries](https://atlassian.design/components/primitives/responsive/breakpoints/examples),\\na\\n[WidthObserver](https://atlaskit.atlassian.com/packages/design-system/width-detector/docs/migration-guide),\\nor a custom [ResizeObserver](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver)\\ninstead.\\n\\n## Examples\\n\\n### Incorrect\\n\\n```tsx\\nimport { css } from '@compiled/react';\\nimport { token } from '@atlaskit/tokens';\\n\\nconst headingStyles = css({\\n\\t'@container (width > 400px)': {\\n\\t\\tfont: token('font.heading.large'),\\n\\t},\\n});\\n```\\n\\n### Correct\\n\\n#### Media queries\\n\\n```tsx\\nimport { css } from '@compiled/react';\\nimport { media } from '@atlaskit/primitives/responsive';\\nimport { token } from '@atlaskit/tokens';\\n\\nconst headingStyles = css({\\n\\t[media.above.sm]: {\\n\\t\\tfont: token('font.heading.large'),\\n\\t},\\n});\\n```\\n\\n#### WidthObserver\\n\\n```tsx\\nimport { useState } from 'react';\\nimport { css, cssMap } from '@compiled/react';\\nimport throttle from 'lodash/throttle';\\nimport { WidthObserver } from '@atlaskit/width-detector';\\nimport { token } from '@atlaskit/tokens';\\n\\nconst containerStyles = css({\\n\\t// Required for the `WidthObserver`, which is absolutely positioned\\n\\tposition: 'relative',\\n});\\n\\nconst headingStyles = cssMap({\\n\\tsmall: {\\n\\t\\tfont: token('font.heading.small'),\\n\\t},\\n\\tlarge: {\\n\\t\\tfont: token('font.heading.large'),\\n\\t},\\n});\\n\\nconst ResponsiveH2 = () => {\\n\\tconst [width = 0, setWidth] = useState<number | undefined>(undefined);\\n\\tconst throttledSetWidth = throttle(setWidth, 50);\\n\\n\\treturn (\\n\\t\\t<div css={containerStyles}>\\n\\t\\t\\t<WidthObserver setWidth={throttledSetWidth} />\\n\\t\\t\\t<h2 css={width < 400 ? headingStyles.small : headingStyles.large}>Title</h2>\\n\\t\\t</div>\\n\\t);\\n};\\n```\\n\\n## Options\\n\\n### `importSources: string[]`\\n\\nBy default, this rule will check styles using:\\n\\n- `@atlaskit/css`\\n- `@atlaskit/primitives`\\n- `@compiled/react`\\n- `@emotion/react`\\n- `@emotion/core`\\n- `@emotion/styled`\\n- `styled-components`\\n\\nOverride this list with the `importSources` option, which accepts an array of package names.\\n\"}",
|
|
383
|
+
ruleName: 'no-container-queries',
|
|
384
|
+
description: 'Blocks `@container` at-rules'
|
|
385
|
+
}, {
|
|
386
|
+
content: '{"ruleName":"no-css-tagged-template-expression","description":"Disallows any `css` tagged template expressions that originate from a CSS-in-JS library, including","content":"# @atlaskit/design-system/no-css-tagged-template-expression\\n\\nDisallows any `css` tagged template expressions that originate from a CSS-in-JS library, including\\n`@atlaskit/css`, `@compiled/react`, Emotion, and `styled-components`.\\n\\nThis rule is maintained by another package and configured here; refer to\\nhttps://atlassian.design/components/eslint-plugin-design-system/no-css-tagged-template-expression/usage\\nfor more details.\\n"}',
|
|
387
|
+
ruleName: 'no-css-tagged-template-expression',
|
|
388
|
+
description: 'Disallows any `css` tagged template expressions that originate from a CSS-in-JS library, including'
|
|
389
|
+
}, {
|
|
390
|
+
content: "{\"ruleName\":\"no-dynamic-styles\",\"description\":\"Blocks dynamic styles (function expressions) in style declarations.\",\"content\":\"# no-dynamic-styles\\n\\nBlocks dynamic styles (function expressions) in style declarations.\\n\\nThis ensures that style declarations:\\n\\n- are statically analyzable\\n- can be efficiently extracted into atomic CSS\\n- are more readable and deterministic, thus easier to maintain\\n\\n## Examples\\n\\n### Incorrect\\n\\n```tsx\\nimport { styled } from '@compiled/react';\\n\\nconst Component = styled.div<{ width: number }>((props) => ({\\n\\twidth: props.width,\\n}));\\n```\\n\\n```tsx\\nimport styled from 'styled-components';\\n\\nconst Component = styled.div<{ width: number }>({\\n\\twidth: (props) => props.width,\\n});\\n```\\n\\n```tsx\\nimport styled from 'styled-components';\\n\\nconst Container = styled.div<{ hasPadding: boolean }>({\\n\\tpadding: ({ hasPadding }) => (hasPadding ? token('space.100', '8px') : token('space.0', '0px')),\\n});\\n```\\n\\nThe following example shows the code leading to a bug. In this scenario Compiled transforms the\\nwhole function into the result of its first `return` statement (static string\\n`'0 0 0 1px magenta'`):\\n\\n```tsx\\nimport { styled } from '@compiled/react';\\n\\nconst Component = styled.li({\\n\\tboxShadow: (props) => {\\n\\t\\tif (props.isSelected) {\\n\\t\\t\\treturn '0 0 0 1px magenta';\\n\\t\\t}\\n\\n\\t\\treturn '0 0 0 1px green';\\n\\t},\\n});\\n```\\n\\nSee more about this issue\\n[here](https://compiledcssinjs.com/docs/limitations#returning-static-values-from-a-dynamic-property).\\n\\n### Correct\\n\\nDefine all styles statically, and dynamically apply them using the `css` prop. Use the `style` prop\\nfor values that are only known at runtime.\\n\\nFor further guidance, consult our\\n[migration guide](https://atlassian.design/components/eslint-plugin-ui-styling-standard/migration-guide).\\n\\n#### Flags\\n\\nIf you have a style that is on/off depending on a prop, use the `css` prop to conditionally apply\\nit.\\n\\n```tsx\\nimport { css } from '@compiled/react';\\n\\nconst baseStyles = css({ padding: token('space.0') });\\nconst hasPaddingStyles = css({ padding: token('space.100') });\\n\\nconst Container = ({ hasPadding = false }: { hasPadding?: boolean }) => {\\n\\treturn <div css={[baseStyles, hasPadding && hasPaddingStyles]} />;\\n};\\n```\\n\\n#### Variants\\n\\nIf you have variants which are known ahead of time, use `cssMap` to define them and the `css` prop\\nto conditionally apply it.\\n\\n```tsx\\nimport { css } from '@compiled/react';\\n\\nconst baseStyles = css({ width: 100 });\\nconst stylesMap = cssMap({\\n primary: {\\n background: token('color.background.brand.bold'),\\n '&:hover': { background: token('color.background.brand.bold.hovered') },\\n },\\n error: {\\n background: token('color.background.warning.bold'),\\n '&:hover': { background: token('color.background.warning.bold.hovered') },\\n }\\n});\\n\\nconst Wrapper = ({ appearance = 'primary' }: { appearance?: 'primary' | 'error' }) => (\\n <div css={[baseStyles, stylesMap[appearance]} />\\n);\\n```\\n\\n#### Dynamic values\\n\\nIf you have styles which are truly dynamic, use the `style` prop.\\n\\nThis approach should be used as a last resort.\\n\\n```tsx\\nimport { css } from '@compiled/react';\\n\\nconst Component = ({ width }: { width: number }) => {\\n\\treturn <div style={{ width }} />;\\n};\\n```\\n\\n```tsx\\nimport { css } from '@compiled/react';\\n\\nconst containerStyles = css({\\n\\t'&::before': {\\n\\t\\twidth: 'var(--ak-example-width)',\\n\\t},\\n});\\n\\nfunction Example({ width }: { width: number }) {\\n\\treturn <div css={containerStyles} style={{ '--ak-example-width': `${width}px` }} />;\\n}\\n```\\n\\n## Options\\n\\n### `importSources: string[]`\\n\\nBy default, this rule will check styles using:\\n\\n- `@atlaskit/css`\\n- `@atlaskit/primitives`\\n- `@compiled/react`\\n- `@emotion/react`\\n- `@emotion/core`\\n- `@emotion/styled`\\n- `styled-components`\\n\\nOverride this list with the `importSources` option, which accepts an array of package names.\\n\"}",
|
|
391
|
+
ruleName: 'no-dynamic-styles',
|
|
392
|
+
description: 'Blocks dynamic styles (function expressions) in style declarations.'
|
|
393
|
+
}, {
|
|
394
|
+
content: '{"ruleName":"no-empty-styled-expression","description":"Forbids any styled expression to be used when passing empty arguments to styled.div() (or other JSX","content":"# @atlaskit/design-system/no-empty-styled-expression\\n\\nForbids any styled expression to be used when passing empty arguments to styled.div() (or other JSX\\nelements).\\n\\nThis rule is maintained by another package and configured here; refer to\\nhttps://atlassian.design/components/eslint-plugin-design-system/no-empty-styled-expression/usage for\\nmore details.\\n"}',
|
|
395
|
+
ruleName: 'no-empty-styled-expression',
|
|
396
|
+
description: 'Forbids any styled expression to be used when passing empty arguments to styled.div() (or other JSX'
|
|
397
|
+
}, {
|
|
398
|
+
content: '{"ruleName":"no-exported-css","description":"Forbid exporting `css` function calls. Exporting `css` function calls can result in unexpected","content":"# @atlaskit/design-system/no-exported-css\\n\\nForbid exporting `css` function calls. Exporting `css` function calls can result in unexpected\\nbehaviour at runtime, and is not statically analysable.\\n\\nThis rule is maintained by another package and configured here; refer to\\nhttps://atlassian.design/components/eslint-plugin-design-system/no-exported-css/usage for more\\ndetails.\\n"}',
|
|
399
|
+
ruleName: 'no-exported-css',
|
|
400
|
+
description: 'Forbid exporting `css` function calls. Exporting `css` function calls can result in unexpected'
|
|
401
|
+
}, {
|
|
402
|
+
content: '{"ruleName":"no-exported-keyframes","description":"Forbid exporting `keyframes` function calls. Exporting `css` function calls can result in unexpected","content":"# @atlaskit/design-system/no-exported-keyframes\\n\\nForbid exporting `keyframes` function calls. Exporting `css` function calls can result in unexpected\\nbehaviour at runtime, and is not statically analysable.\\n\\nThis rule is maintained by another package and configured here; refer to\\nhttps://atlassian.design/components/eslint-plugin-design-system/no-exported-keyframes/usage for more\\ndetails.\\n"}',
|
|
403
|
+
ruleName: 'no-exported-keyframes',
|
|
404
|
+
description: 'Forbid exporting `keyframes` function calls. Exporting `css` function calls can result in unexpected'
|
|
405
|
+
}, {
|
|
406
|
+
content: "{\"ruleName\":\"no-exported-styles\",\"description\":\"Blocks exports of `css`, `cssMap`, `keyframes`, `styled`, `xcss` styles, which are unsafe.\",\"content\":\"# no-exported-styles\\n\\nBlocks exports of `css`, `cssMap`, `keyframes`, `styled`, `xcss` styles, which are unsafe.\\n\\nUse alongside `no-imported-style-values` which blocks consumption of imported styles.\\n\\nCompiled style declarations are null at runtime, so using imported styles will cause unexpected\\nerrors.\\n\\nCo-locate style definitions with their usage instead. This will also improve code readability,\\nmaintainability and build performance.\\n\\n## Examples\\n\\n### Incorrect\\n\\n```tsx\\nimport { css } from '@compiled/react';\\n\\nexport const styles = css({});\\n\\nexport default css({});\\n```\\n\\n```tsx\\nimport { keyframes } from '@compiled/react';\\n\\nexport const animation = keyframes({});\\n\\nexport default keyframes({});\\n```\\n\\n```tsx\\nimport { css } from '@compiled/react';\\nimport { token } from '@atlaskit/tokens';\\n\\nconst colorStyles = css({\\n\\tcolor: token('color.text'),\\n});\\n\\nconst styles = {\\n\\tprimary: {\\n\\t\\ttext: {\\n\\t\\t\\tcolor,\\n\\t\\t},\\n\\t},\\n};\\n\\nexport default styles.primary.text.color;\\n```\\n\\n### Correct\\n\\nCo-locate styles with components to improve code readability, linting, and build performance.\\n\\n```tsx\\nimport { css } from '@compiled/react';\\n\\nconst styles = css({});\\n\\nexport const Component = () => <div css={styles} />;\\n```\\n\\n```tsx\\nimport { css, keyframes } from '@compiled/react';\\n\\nconst animation = keyframes({});\\nconst styles = css({ animate: `${animation} 1s ease-in` });\\n\\nexport const Component = () => <div css={styles} />;\\n```\\n\\n## Options\\n\\n### `importSources: string[]`\\n\\nBy default, this rule will check styles using:\\n\\n- `@atlaskit/css`\\n- `@atlaskit/primitives`\\n- `@compiled/react`\\n- `@emotion/react`\\n- `@emotion/core`\\n- `@emotion/styled`\\n- `styled-components`\\n\\nOverride this list with the `importSources` option, which accepts an array of package names.\\n\"}",
|
|
407
|
+
ruleName: 'no-exported-styles',
|
|
408
|
+
description: 'Blocks exports of `css`, `cssMap`, `keyframes`, `styled`, `xcss` styles, which are unsafe.'
|
|
409
|
+
}, {
|
|
410
|
+
content: '{"ruleName":"no-global-styles","description":"Blocks global styles through CSS-in-JS and CSS module imports.","content":"# no-global-styles\\n\\nBlocks global styles through CSS-in-JS and CSS module imports.\\n\\nUse local styles so that style dependencies are statically resolvable.\\n\\nThe only global styling that should be used is `@atlaskit/css-reset`.\\n\\n## Examples\\n\\n### Incorrect\\n\\n```tsx\\nimport { Global } from \'@emotion/react\';\\n\\n<Global\\n\\tstyles={{\\n\\t\\t\'.some-class\': {\\n\\t\\t\\tfontSize: 50,\\n\\t\\t\\ttextAlign: \'center\',\\n\\t\\t},\\n\\t}}\\n/>;\\n```\\n\\n```tsx\\nimport { createGlobalStyle } from \'styled-components\';\\n\\nconst GlobalStyle = createGlobalStyle({\\n\\tbody: {\\n\\t\\tmargin: 0,\\n\\t},\\n});\\n```\\n\\n```tsx\\nimport { injectGlobal } from \'styled-components\';\\n\\ninjectGlobal({\\n\\tbody: {\\n\\t\\tmargin: 0,\\n\\t},\\n});\\n```\\n\\n```tsx\\n<style>\\n\\t{`\\n .some-class {\\n color: red;\\n }\\n `}\\n</style>\\n```\\n\\n### Correct\\n\\n```tsx\\nimport \'@atlaskit/css-reset\';\\n```\\n"}',
|
|
411
|
+
ruleName: 'no-global-styles',
|
|
412
|
+
description: 'Blocks global styles through CSS-in-JS and CSS module imports.'
|
|
413
|
+
}, {
|
|
414
|
+
content: '{"ruleName":"no-important-styles","description":"Blocks the `!important` flag in style declarations.","content":"# no-important-styles\\n\\nBlocks the `!important` flag in style declarations.\\n\\nProperly composed styles will never need an `!important` flag. It is used to override specificity\\nwhen working across different scopes, and the UI Styling Standard enforces styles with minimal\\nscope.\\n\\nThe use of `!important` is a code smell and greatly impacts readability and determinism.\\n\\n## Examples\\n\\n### Incorrect\\n\\n```js\\nimport { css } from \'@compiled/react\';\\nimport { token } from \'@atlaskit/tokens\';\\n\\nconst styles = css({\\n\\tcolor: `${token(\'color.text.danger\')}!important`,\\n});\\n```\\n\\n### Correct\\n\\n```js\\nimport { css } from \'@compiled/react\';\\nimport { token } from \'@atlaskit/tokens\';\\n\\nconst styles = css({\\n\\tcolor: token(\'color.text.danger\'),\\n});\\n```\\n"}',
|
|
415
|
+
ruleName: 'no-important-styles',
|
|
416
|
+
description: 'Blocks the `!important` flag in style declarations.'
|
|
417
|
+
}, {
|
|
418
|
+
content: "{\"ruleName\":\"no-imported-style-values\",\"description\":\"Blocks imported style values in `css`, `cssMap`, `styled`, `keyframes` and `xcss` calls.\",\"content\":\"# no-imported-style-values\\n\\nBlocks imported style values in `css`, `cssMap`, `styled`, `keyframes` and `xcss` calls.\\n\\nUse alongside `no-exported-styles` which blocks exporting styles.\\n\\nCompiled style declarations are null at runtime, so using imported styles will cause unexpected\\nerrors.\\n\\nCo-locate style definitions with their usage instead. This will also improve code readability and\\nbuild performance.\\n\\n## Examples\\n\\n### Incorrect\\n\\n```tsx\\nimport { css } from '@compiled/react';\\nimport { colors, getColor } from '../shared';\\n\\nconst styles = css({\\n\\tcolor: getColor('red'),\\n\\tbackgroundColor: colors['red'],\\n});\\n```\\n\\n```tsx\\nimport { css } from '@compiled/react';\\nimport { ff } from '@atlaskit/ff';\\nimport { buttonStyles, cssShared, HEIGHT, colorKey } from '../shared';\\n\\nconst sharedObject = { padding: 0 };\\n\\nconst styles = css({\\n\\t...cssShared,\\n\\t...sharedObject,\\n\\theight: `${HEIGHT}px`,\\n\\twidth: ff('…') ? `${HEIGHT}px` : undefined,\\n});\\n```\\n\\nImporting styles to use in style composition is not allowed.\\n\\n```tsx\\nimport { css } from '@compiled/react';\\nimport { token } from '@atlaskit/tokens';\\nimport { buttonStyles } from '../shared';\\n\\nconst styles = css({\\n\\tcolor: token('color.text'),\\n});\\n\\nconst Component = () => <div css={[styles, buttonStyles]} />;\\n```\\n\\nImporting styles to pass to the style prop is also not allowed.\\n\\n```tsx\\nimport { importedWidth } from '../shared';\\n\\nconst Component = () => <div style={{ width: importedWidth }} />;\\n```\\n\\n### Correct\\n\\nCo-locate styles with components to improve code readability, linting, and build performance.\\n\\n```tsx\\nimport { css } from '@compiled/react';\\nimport { token } from '@atlaskit/tokens';\\n\\nconst styles = css({\\n\\tcolor: token('color.text'),\\n\\tpadding: token('space.150'),\\n});\\n\\nconst Component = () => <div css={styles} />;\\n```\\n\\n```tsx\\nimport { keyframes } from '@compiled/react';\\n\\nconst animation = keyframes({});\\nconst styles = css({ animate: `${animation} 1s ease-in` });\\n\\nconst Component = () => <div css={styles} />;\\n```\\n\\n## Options\\n\\n### `allowedDynamicKeys: [string, string][]`\\n\\nUse this to allow specified imports as dynamic keys, in addition to the built-in allow-list.\\n\\nEach value should be a two-element array. The first item is the entrypoint, and the second item is a\\nnamed export.\\n\\nDefault imports are not supported.\\n\\n```tsx\\n// eslint.config.cjs\\n\\n// ...\\n rules: {\\n '@atlaskit/eslint-plugin-ui-styling-standard/no-unsafe-values': [\\n 'error',\\n {\\n allowedDynamicKeys: [\\n ['@atlaskit/primitives/responsive', 'media'],\\n ]\\n },\\n ],\\n // ...\\n },\\n// ...\\n```\\n\\n### `allowedFunctionCalls: [string, string][]`\\n\\nUse this to allow specific functions to be called, in addition to the built-in allow-list.\\n\\nEach value should be a two-element array. The first item is the entrypoint, and the second item is a\\nnamed export.\\n\\nDefault imports are not currently supported.\\n\\n```tsx\\n// eslint.config.cjs\\n\\n// ...\\n rules: {\\n '@atlaskit/eslint-plugin-ui-styling-standard/no-unsafe-values': [\\n 'error',\\n {\\n allowedFunctionCalls: [\\n ['@atlaskit/tokens', 'token'],\\n ]\\n },\\n ],\\n // ...\\n },\\n// ...\\n```\\n\\n### `importSources: string[]`\\n\\nBy default, this rule will check styles using:\\n\\n- `@atlaskit/css`\\n- `@atlaskit/primitives`\\n- `@compiled/react`\\n- `@emotion/react`\\n- `@emotion/core`\\n- `@emotion/styled`\\n- `styled-components`\\n\\nOverride this list with the `importSources` option, which accepts an array of package names.\\n\"}",
|
|
419
|
+
ruleName: 'no-imported-style-values',
|
|
420
|
+
description: 'Blocks imported style values in `css`, `cssMap`, `styled`, `keyframes` and `xcss` calls.'
|
|
421
|
+
}, {
|
|
422
|
+
content: '{"ruleName":"no-invalid-css-map","description":"Ensure that all usages of the cssMap API are valid, and enforces the format of the object that is","content":"# @atlaskit/design-system/no-invalid-css-map\\n\\nEnsure that all usages of the cssMap API are valid, and enforces the format of the object that is\\npassed to cssMap. This is intended to be used alongside TypeScript\'s type-checking.\\n\\nThis rule is maintained by another package and configured here; refer to\\nhttps://atlassian.design/components/eslint-plugin-design-system/no-invalid-css-map/usage for more\\ndetails.\\n"}',
|
|
423
|
+
ruleName: 'no-invalid-css-map',
|
|
424
|
+
description: 'Ensure that all usages of the cssMap API are valid, and enforces the format of the object that is'
|
|
425
|
+
}, {
|
|
426
|
+
content: '{"ruleName":"no-keyframes-tagged-template-expression","description":"Disallows any `keyframes` tagged template expressions that originate from a CSS-in-JS library,","content":"# @atlaskit/design-system/no-keyframes-tagged-template-expression\\n\\nDisallows any `keyframes` tagged template expressions that originate from a CSS-in-JS library,\\nincluding `@atlaskit/css`, `@compiled/react`, Emotion, and `styled-components`.\\n\\nThis rule is maintained by another package and configured here; refer to\\nhttps://atlassian.design/components/eslint-plugin-design-system/no-keyframes-tagged-template-expression/usage\\nfor more details.\\n"}',
|
|
427
|
+
ruleName: 'no-keyframes-tagged-template-expression',
|
|
428
|
+
description: 'Disallows any `keyframes` tagged template expressions that originate from a CSS-in-JS library,'
|
|
429
|
+
}, {
|
|
430
|
+
content: "{\"ruleName\":\"no-nested-selectors\",\"description\":\"Blocks nested selectors in style declarations.\",\"content\":\"# no-nested-selectors\\n\\nBlocks nested selectors in style declarations.\\n\\nUse styles which do not require context from other elements.\\n\\n## Examples\\n\\n### Incorrect\\n\\n```tsx\\nimport { css } from '@compiled/react';\\nimport { token } from '@atlaskit/tokens';\\n\\nconst styles = css({\\n\\th2: {\\n\\t\\tfont: token('font.heading.large'),\\n\\t},\\n});\\n\\nconst Component = () => (\\n\\t<div css={styles}>\\n\\t\\t<h2>Heading</h2>\\n\\t</div>\\n);\\n```\\n\\n```tsx\\nimport { styled } from '@compiled/react';\\nimport { token } from '@atlaskit/tokens';\\n\\nconst Table = styled.table({\\n\\tborder: `1px solid ${token('color.border')}`,\\n\\ttd: {\\n\\t\\tpadding: token('space.100'),\\n\\t},\\n});\\n```\\n\\n```tsx\\nimport { styled } from '@compiled/react';\\nimport { token } from '@atlaskit/tokens';\\n\\nconst Component = styled.div({\\n\\t'.myclass': {\\n\\t\\tpadding: token('space.100'),\\n\\t},\\n});\\n```\\n\\n### Correct\\n\\n```tsx\\nimport { css } from '@compiled/react';\\nimport { token } from '@atlaskit/tokens';\\n\\nconst headingStyles = css({\\n\\tfont: token('font.heading.large'),\\n});\\n\\nconst Component = () => (\\n\\t<div>\\n\\t\\t<h2 css={headingStyles}>Heading</h2>\\n\\t</div>\\n);\\n```\\n\\n```tsx\\nimport { css } from '@compiled/react';\\nimport { token } from '@atlaskit/tokens';\\n\\nconst tableStyles = css({\\n\\tborder: `1px solid ${token('color.border')}`,\\n});\\n\\nconst tdStyles = css({\\n\\tpadding: token('space.100'),\\n});\\n```\\n\\n## Options\\n\\n### `importSources: string[]`\\n\\nBy default, this rule will check styles using:\\n\\n- `@atlaskit/css`\\n- `@atlaskit/primitives`\\n- `@compiled/react`\\n- `@emotion/react`\\n- `@emotion/core`\\n- `@emotion/styled`\\n- `styled-components`\\n\\nOverride this list with the `importSources` option, which accepts an array of package names.\\n\"}",
|
|
431
|
+
ruleName: 'no-nested-selectors',
|
|
432
|
+
description: 'Blocks nested selectors in style declarations.'
|
|
433
|
+
}, {
|
|
434
|
+
content: "{\"ruleName\":\"no-styled\",\"description\":\"Blocks the `styled` API, which creates unnecessary indirection.\",\"content\":\"# no-styled\\n\\nBlocks the `styled` API, which creates unnecessary indirection.\\n\\nThis indirection:\\n\\n- obfuscates which tag is being rendered\\n- adds linting complexity\\n- promotes exported styles\\n- can complicate refactoring\\n\\nUse the `css` API instead. It has better performance and clarity.\\n\\n## Examples\\n\\n### Incorrect\\n\\n```tsx\\nimport styled from 'styled-components';\\n\\nconst Component = styled.div`\\n\\tcolor: red;\\n`;\\nexport default styled.div({ color: 'red' });\\n```\\n\\n```tsx\\nimport styled2 from '@emotion/styled';\\n\\nexport const Component = styled2('div')`…`;\\n```\\n\\n```tsx\\nimport styled from 'styled-components';\\nimport { styled as styled3 } from '@compiled/react';\\n\\nconst Component = styled.div`color: red;`\\nexport const ComponentTwo = styled3(Component)({ … });\\n```\\n\\n```tsx\\nimport styled from 'styled-components';\\n\\nexport default styled.div.attrs((props) => ({ 'data-testid': props.testId }))({\\n\\tcolor: 'red',\\n});\\n```\\n\\n```tsx\\nimport styled from 'styled-components';\\n\\nexport default styled.div.attrs((props) => ({ 'data-testid': props.testId }))`\\n\\tcolor: red;\\n`;\\n```\\n\\n### Correct\\n\\n```tsx\\nimport { css, jsx } from '@emotion/react';\\nimport { token } from '@atlaskit/tokens';\\n\\nconst styles = css({ color: token('color.text.subtlest') });\\n\\nconst Component = ({ children }) => {\\n\\treturn <div css={styles}>{children}</div>;\\n};\\n```\\n\\n```tsx\\nimport { Box, xcss } from '@atlaskit/primitives';\\n\\nconst styles = xcss({\\n\\tcolor: 'color.text.subtlest',\\n});\\n\\nconst Component = ({ children }) => {\\n\\treturn <Box xcss={styles}>{children}</Box>;\\n};\\n```\\n\\n## FAQ\\n\\n### How will I extend like `styled(Button)`?\\n\\nDon't modify the styles of components you don't own, unless they provide an explicit bounded\\ninterface for doing so — such as the `xcss` prop.\\n\\nUse props (excluding `className` which is prohibited) to modify component styles instead.\\n\\nThe Atlassian Design System, for example, no longer supports `styled(Button)` because it is unsafe\\nfor us to evolve the system with.\\n\"}",
|
|
435
|
+
ruleName: 'no-styled',
|
|
436
|
+
description: 'Blocks the `styled` API, which creates unnecessary indirection.'
|
|
437
|
+
}, {
|
|
438
|
+
content: '{"ruleName":"no-styled-tagged-template-expression","description":"Disallows any `styled` tagged template expressions that originate from from a CSS-in-JS library,","content":"# @atlaskit/design-system/no-styled-tagged-template-expression\\n\\nDisallows any `styled` tagged template expressions that originate from from a CSS-in-JS library,\\nincluding `@atlaskit/css`, `@compiled/react`, Emotion, and `styled-components`.\\n\\nThis rule is maintained by another package and configured here; refer to\\nhttps://atlassian.design/components/eslint-plugin-design-system/no-styled-tagged-template-expression/usage\\nfor more details.\\n"}',
|
|
439
|
+
ruleName: 'no-styled-tagged-template-expression',
|
|
440
|
+
description: 'Disallows any `styled` tagged template expressions that originate from from a CSS-in-JS library,'
|
|
441
|
+
}, {
|
|
442
|
+
content: "{\"ruleName\":\"no-unsafe-selectors\",\"description\":\"Blocks unsafe CSS selectors.\",\"content\":\"# no-unsafe-selectors\\n\\nBlocks unsafe CSS selectors.\\n\\nUse alongside\\n[no-nested-selectors](https://atlassian.design/components/eslint-plugin-ui-styling-standard/no-nested-selectors/usage)\\nwhich blocks nested CSS selectors.\\n\\nBlocking unsafe selectors enables static analysis and also prevents regressions and incidents when\\nmigrating styles at scale.\\n\\n## Examples\\n\\n### Keyframes\\n\\n#### Incorrect\\n\\nDon't use `@keyframes` at-rules in styles.\\n\\n```tsx\\nimport { css } from '@compiled/react';\\n\\ncss({\\n\\t'@keyframes fadeIn': {\\n\\t\\tfrom: {\\n\\t\\t\\topacity: 0,\\n\\t\\t},\\n\\t\\tto: {\\n\\t\\t\\topacity: 1,\\n\\t\\t},\\n\\t},\\n\\tanimation: '1s ease-in fadeIn',\\n});\\n```\\n\\n#### Correct\\n\\nUse the `keyframes` API.\\n\\n```tsx\\nimport { css, keyframes } from '@compiled/react';\\n\\nconst fadeIn = keyframes({\\n\\tfrom: {\\n\\t\\topacity: 0,\\n\\t},\\n\\tto: {\\n\\t\\topacity: 1,\\n\\t},\\n});\\n\\ncss({\\n\\tanimation: `1s ease-in ${fadeIn}`,\\n});\\n```\\n\\n### Legacy pseudo-element syntax\\n\\n#### Incorrect\\n\\nDon't use the legacy single colon syntax for pseudo-elements.\\n\\nThis issue is autofixable.\\n\\n```tsx\\nimport { css } from '@compiled/react';\\n\\ncss({\\n\\t'&:after': {\\n\\t\\tcontent: '\\\"\\\"',\\n\\t},\\n});\\n```\\n\\n#### Correct\\n\\nUse the double colon syntax for pseudo-elements.\\n\\n```tsx\\nimport { css } from '@compiled/react';\\n\\ncss({\\n\\t'&::after': {\\n\\t\\tcontent: '\\\"\\\"',\\n\\t},\\n});\\n```\\n\\n### Increased specificity selectors\\n\\n#### Incorrect\\n\\nDon't use the nesting selector to increase specificity of styles.\\n\\n```tsx\\nimport { css } from '@compiled/react';\\nimport { token } from '@atlaskit/tokens';\\n\\ncss({\\n\\t'&&': {\\n\\t\\tcolor: token('color.text'),\\n\\t},\\n});\\n```\\n\\n#### Correct\\n\\nUse styles that do not require increased specificity.\\n\\n```tsx\\nimport { css } from '@compiled/react';\\nimport { token } from '@atlaskit/tokens';\\n\\ncss({\\n\\tcolor: token('color.text'),\\n});\\n```\\n\\n### At-rules\\n\\n#### Incorrect\\n\\nDon't use at-rules in styles (see **Correct** below for exceptions).\\n\\n```tsx\\nimport { css } from '@compiled/react';\\n\\ncss({\\n\\t'@scope (.article-body) to (figure)': {\\n\\t\\timg: {\\n\\t\\t\\tdisplay: 'block',\\n\\t\\t},\\n\\t},\\n});\\n```\\n\\n#### Correct\\n\\nUse only allowed at-rules:\\n\\n- `@media` (through our\\n [breakpoints](https://atlassian.design/components/primitives/responsive/breakpoints/examples))\\n- `@property`\\n- `@supports`\\n\\n```tsx\\nimport { css } from '@compiled/react';\\nimport { media } from '@atlaskit/primitives/responsive';\\n\\ncss({\\n\\t[media.above.sm]: {\\n\\t\\tdisplay: 'block',\\n\\t},\\n});\\n```\\n\\n### Restricted pseudo-selectors\\n\\n#### Incorrect\\n\\nDon't use pseudo-classes which take arguments or implicitly rely on external context.\\n\\n```tsx\\nimport { css } from '@compiled/react';\\nimport { token } from '@atlaskit/tokens';\\n\\ncss({\\n\\t'&:hover': {\\n\\t\\tbackgroundColor: token('color.background.neutral.hovered'),\\n\\t},\\n\\t'&:not(:hover)': {\\n\\t\\tbackgroundColor: token('color.background.neutral'),\\n\\t}\\n\\t'&:first-child': {\\n\\t\\tfontWeight: token('font.weight.bold'),\\n\\t},\\n});\\n```\\n\\n#### Correct\\n\\n```tsx\\nimport { css } from '@compiled/react';\\nimport { token } from '@atlaskit/tokens';\\n\\ntype Props = { isFirstChild: boolean };\\n\\nconst baseStyles = css({\\n\\tbackgroundColor: token('color.background.neutral'),\\n\\t'&:hover': {\\n\\t\\tbackgroundColor: token('color.background.neutral.hovered'),\\n\\t},\\n});\\n\\nconst firstChildStyles = css({\\n\\tfontWeight: token('font.weight.bold'),\\n});\\n\\nconst Component = ({ isFirstChild }: Props) => (\\n\\t<div css={[baseStyles, isFirstChild && firstChildStyles]} />\\n);\\n```\\n\\n### Ambiguous pseudo-selectors\\n\\n#### Incorrect\\n\\nDon't use pseudo-selectors without a leading selector, as they are ambiguous and interpreted\\ndifferently between contexts.\\n\\nFor example some contexts will treat `:hover` as `&:hover` while others will treat it as `& :hover`\\n(which targets descendants).\\n\\nThis issue is autofixable. By default a nesting selector `&` is added unless the\\n`shouldAlwaysInsertNestingSelectorForAmbiguousPseudos` option is disabled.\\n\\n```tsx\\nimport { css } from '@compiled/react';\\n\\ncss({\\n\\t/**\\n\\t * This pseudo-class has no leading selector and is ambiguous.\\n\\t */\\n\\t':hover': {},\\n\\n\\t/**\\n\\t * In some contexts the above is treated as implicitly containing a nesting selector.\\n\\t */\\n\\t'&:hover': {},\\n\\n\\t/**\\n\\t * In other contexts it is treated as a descendant selector.\\n\\t *\\n\\t * (The selectors below are equivalent.)\\n\\t */\\n\\t'*:hover': {},\\n\\t'& :hover': {},\\n\\t'& *:hover': {},\\n});\\n```\\n\\n#### Correct\\n\\nUse explicit selectors. Do not rely on implicit or undefined behavior for pseudo-selectors.\\n\\n```tsx\\n\\n```\\n\\n### Grouped at-rules\\n\\n#### Incorrect\\n\\nDon't group at-rules with the `cssMap` API.\\n\\n````tsx\\nimport { cssMap } from '@compiled/react';\\n\\n```tsx\\ncssMap({\\n\\tsuccess: {\\n\\t\\t'@media': {\\n\\t\\t\\t'(min-width: 900px)': {},\\n\\t\\t\\t'(min-width: 1200px)': {},\\n\\t\\t},\\n\\t},\\n});\\n````\\n\\n#### Correct\\n\\nWrite flattened at-rules instead.\\n\\n```tsx\\ncssMap({\\n\\tsuccess: {\\n\\t\\tselectors: {\\n\\t\\t\\t'&:not(:active)': {\\n\\t\\t\\t\\tbackgroundColor: 'white',\\n\\t\\t\\t},\\n\\t\\t},\\n\\t},\\n});\\n```\\n\\n### Correct\\n\\n```tsx\\nconst fadeIn = keyframes({\\n\\tfrom: {\\n\\t\\topacity: 0,\\n\\t},\\n\\tto: {\\n\\t\\topacity: 1,\\n\\t},\\n});\\n\\ncss({\\n\\tanimationName: fadeIn,\\n});\\n```\\n\\n```tsx\\ncss({\\n\\t'::after': {\\n\\t\\tcontent: '\\\"\\\"',\\n\\t\\twidth: 100,\\n\\t\\theight: 100,\\n\\t\\tbackgroundColor: 'red',\\n\\t},\\n});\\n```\\n\\n```tsx\\ncss({\\n\\t'&:first-of-type': {\\n\\t\\twidth: 100,\\n\\t},\\n});\\n```\\n\\n```tsx\\ncss({\\n\\t'&:hover': {},\\n});\\n```\\n\\n```tsx\\ncssMap({\\n\\tsuccess: {\\n\\t\\t'@media (min-width: 900px)': {},\\n\\t\\t'@media (min-width: 1200px)': {},\\n\\t},\\n});\\n```\\n\\n```tsx\\ncssMap({\\n\\tsuccess: {\\n\\t\\tbackgroundColor: 'white',\\n\\t\\t'&:active': {\\n\\t\\t\\tbackgroundColor: 'green',\\n\\t\\t},\\n\\t},\\n});\\n```\\n\\n## Options\\n\\n### `importSources: string[]`\\n\\nBy default, this rule will check styles using:\\n\\n- `@atlaskit/css`\\n- `@atlaskit/primitives`\\n- `@compiled/react`\\n- `@emotion/react`\\n- `@emotion/core`\\n- `@emotion/styled`\\n- `styled-components`\\n\\nOverride this list with the `importSources` option, which accepts an array of package names.\\n\\n### `shouldAlwaysInsertNestingSelectorForAmbiguousPseudos: boolean`\\n\\nBy default this rule will always fix ambiguous pseudo-selectors by inserting a leading `&` (nesting\\nselector).\\n\\nSet `shouldAlwaysInsertNestingSelectorForAmbiguousPseudos` to `false` to disable this auto-fix. When\\ndisabled, a suggestion will be provided instead of an auto-fix.\\n\"}",
|
|
443
|
+
ruleName: 'no-unsafe-selectors',
|
|
444
|
+
description: 'Blocks unsafe CSS selectors.'
|
|
445
|
+
}, {
|
|
446
|
+
content: "{\"ruleName\":\"no-unsafe-values\",\"description\":\"Blocks styles that are difficult or impossible to statically analyze.\",\"content\":\"# no-unsafe-values\\n\\nBlocks styles that are difficult or impossible to statically analyze.\\n\\n## Examples\\n\\n### Function calls\\n\\n#### Incorrect\\n\\nFunction calls are blocked as arguments or as values, unless they are specified in\\n`allowedFunctionCalls` (or in the default list).\\n\\n```tsx\\nimport { css } from '@compiled/react';\\n\\nfunction getStyles() {\\n\\treturn { width: 100 };\\n}\\n\\nconst styles = css(getStyles());\\n```\\n\\n```tsx\\nimport { css } from '@compiled/react';\\n\\nfunction getWidth() {\\n\\treturn 100;\\n}\\n\\nconst styles = css({\\n\\twidth: getWidth(),\\n});\\n```\\n\\n#### Correct\\n\\nUse inline literals for static values.\\n\\n```tsx\\nimport { css } from '@compiled/react';\\n\\nconst styles = css({ width: 100 });\\n```\\n\\nUse the `style` prop for dynamic values.\\n\\n```tsx\\nconst Component = ({ width }) => <div style={{ width }} />;\\n```\\n\\nSome functions such as `tokens()` are allowed.\\n\\n```tsx\\nimport { css } from '@compiled/react';\\nimport { token } from '@atlaskit/tokens';\\n\\nconst styles = css({ padding: token('space.100') });\\n```\\n\\n### Dynamic keys\\n\\n#### Incorrect\\n\\nDynamic keys are blocked, unless they are specified in `allowedDynamicKeys` (or in the default\\nlist).\\n\\n```tsx\\nimport { css } from '@compiled/react';\\n\\nconst HOVER_SELECTOR = '&:hover';\\nconst MARGIN = 'margin';\\n\\nconst styles = css({\\n\\t[HOVER_SELECTOR]: {\\n\\t\\t[MARGIN]: 0,\\n\\t},\\n\\t[`${HOVER_SELECTOR} > p`]: {\\n\\t\\twidth: 100,\\n\\t},\\n});\\n```\\n\\n#### Correct\\n\\nUse literal values for pseudo-states and property names.\\n\\nDon't use nested selectors, apply styles directly instead.\\n\\n```tsx\\nimport { css } from '@compiled/react';\\n\\nconst styles = css({\\n\\t'&:hover': {\\n\\t\\tmargin: 0,\\n\\t},\\n});\\n\\nconst paragraphStyles = css({\\n\\twidth: 100,\\n});\\n```\\n\\n### Variables\\n\\n#### Incorrect\\n\\nVariables are only allowed as values if they:\\n\\n- have a simple, static value\\n- are defined in the same file\\n\\n```tsx\\nimport { css } from '@compiled/react';\\nimport { HEIGHT } from '../shared';\\n\\nconst styles = css({\\n\\theight: HEIGHT,\\n});\\n```\\n\\n#### Correct\\n\\nUse inlined values.\\n\\n```tsx\\nimport { css } from '@compiled/react';\\n\\nconst styles = css({\\n\\theight: '32px',\\n});\\n```\\n\\nAlternatively, define variables in the same file.\\n\\n```tsx\\nimport { css } from '@compiled/react';\\n\\nconst HEIGHT = '32px';\\n\\nconst styles = css({\\n\\theight: HEIGHT,\\n});\\n```\\n\\n### Object access\\n\\n#### Incorrect\\n\\nDon't access object members in values.\\n\\n```tsx\\nimport { css } from '@compiled/react';\\nimport { token } from '@atlaskit/tokens';\\n\\nconst colors = {\\n\\ttext: token('color.text'),\\n};\\n\\nconst styles = css({\\n\\tcolor: colors.text,\\n});\\n```\\n\\n#### Correct\\n\\nUse inlined values.\\n\\n```tsx\\nimport { css } from '@compiled/react';\\nimport { token } from '@atlaskit/tokens';\\n\\nconst styles = css({\\n\\tcolor: token('color.text'),\\n});\\n```\\n\\n### Spread elements\\n\\n#### Incorrect\\n\\nDon't use the spread operator in styles.\\n\\n```tsx\\nimport { css } from '@compiled/react';\\nimport { token } from '@atlaskit/tokens';\\n\\nconst subtleTextStyles = {\\n\\tcolor: token('color.text.subtle'),\\n};\\n\\nconst styles = css({\\n\\t...subtleTextStyles,\\n\\tmargin: 0,\\n});\\n```\\n\\n#### Correct\\n\\nUse the `css` prop to compose styles.\\n\\n```tsx\\nimport { css } from '@compiled/react';\\nimport { token } from '@atlaskit/tokens';\\n\\nconst subtleTextStyles = {\\n\\tcolor: token('color.text.subtle'),\\n};\\n\\nconst styles = css({\\n\\tmargin: 0,\\n});\\n\\nconst Component = () => <div css={[subtleTextStyles, styles]} />;\\n```\\n\\n### Array values\\n\\n#### Incorrect\\n\\nDon't use array values. This syntax is not supported by Compiled, or most other CSS-in-JS libraries.\\n\\n```tsx\\nimport { css } from '@compiled/react';\\nimport { token } from '@atlaskit/tokens';\\n\\nconst boldMixin = { fontWeight: token('font.weight.bold') };\\n\\nconst styles = css({\\n\\t'&::before': [boldMixin, { color: token('color.text.danger') }],\\n});\\n```\\n\\n#### Correct\\n\\nUse a single object with inlined styles.\\n\\n```tsx\\nimport { css } from '@compiled/react';\\nimport { token } from '@atlaskit/tokens';\\n\\nconst styles = css({\\n\\t'&::before': {\\n\\t\\tfontWeight: token('font.weight.bold'),\\n\\t\\tcolor: token('color.text.danger'),\\n\\t},\\n});\\n```\\n\\n## Options\\n\\n### `allowedDynamicKeys: [string, string][]`\\n\\nUse this to allow specified imports as dynamic keys, in addition to the built-in allow-list.\\n\\nEach value should be a two-element array. The first item is the entrypoint, and the second item is a\\nnamed export.\\n\\nDefault imports are not supported.\\n\\n```tsx\\n// eslint.config.cjs\\n\\n// ...\\n rules: {\\n '@atlaskit/eslint-plugin-ui-styling-standard/no-unsafe-values': [\\n 'error',\\n {\\n allowedDynamicKeys: [\\n ['@atlaskit/primitives/responsive', 'media'],\\n ]\\n },\\n ],\\n // ...\\n },\\n// ...\\n```\\n\\n### `allowedFunctionCalls: [string, string][]`\\n\\nUse this to allow specific functions to be called, in addition to the built-in allow-list.\\n\\nEach value should be a two-element array. The first item is the entrypoint, and the second item is a\\nnamed export.\\n\\nDefault imports are not currently supported.\\n\\n```tsx\\n// eslint.config.cjs\\n\\n// ...\\n rules: {\\n '@atlaskit/eslint-plugin-ui-styling-standard/no-unsafe-values': [\\n 'error',\\n {\\n allowedFunctionCalls: [\\n ['@atlaskit/tokens', 'token'],\\n ]\\n },\\n ],\\n // ...\\n },\\n// ...\\n```\\n\\n### `importSources: string[]`\\n\\nBy default, this rule will check styles using:\\n\\n- `@atlaskit/css`\\n- `@atlaskit/primitives`\\n- `@compiled/react`\\n- `@emotion/react`\\n- `@emotion/core`\\n- `@emotion/styled`\\n- `styled-components`\\n\\nOverride this list with the `importSources` option, which accepts an array of package names.\\n\"}",
|
|
447
|
+
ruleName: 'no-unsafe-values',
|
|
448
|
+
description: 'Blocks styles that are difficult or impossible to statically analyze.'
|
|
449
|
+
}, {
|
|
450
|
+
content: "{\"ruleName\":\"no-unused-cssmap-properties\",\"description\":\"Detects unused properties in `cssMap` style objects that are not exported. This helps maintain clean\",\"content\":\"# no-unused-cssmap-properties\\n\\nDetects unused properties in `cssMap` style objects that are not exported. This helps maintain clean\\ncode by identifying style variants that are defined but never used in the component.\\n\\nWhen using `cssMap` from `@compiled/react` or `@atlaskit/css`, it's common to define multiple style\\nvariants. Over time, some variants may become unused as code evolves. This rule identifies those\\nunused properties to help keep your codebase clean and maintainable.\\n\\nThe rule only applies to non-exported `cssMap` objects, since exported styles may be used by other\\nmodules.\\n\\n## Examples\\n\\n### Incorrect\\n\\n```tsx\\nimport { cssMap } from '@compiled/react';\\n\\nconst styles = cssMap({\\n\\troot: { color: 'red' },\\n\\tunused: { background: 'blue' }, // Error: unused property\\n});\\n\\n<div css={styles.root} />;\\n```\\n\\n```tsx\\nimport { cssMap } from '@atlaskit/css';\\n\\nconst boxStyles = cssMap({\\n\\troot: { borderWidth: '1px' },\\n\\tactive: { borderColor: 'blue' },\\n\\tdisabled: { opacity: 0.5 }, // Error: unused property\\n});\\n\\n<Box css={boxStyles.root}>\\n\\t<Box css={boxStyles.active}>Content</Box>\\n</Box>;\\n```\\n\\n### Correct\\n\\n```tsx\\nimport { cssMap } from '@compiled/react';\\n\\nconst styles = cssMap({\\n\\troot: { color: 'red' },\\n\\tactive: { background: 'blue' },\\n});\\n\\n<div css={styles.root} />;\\n<div css={styles.active} />;\\n```\\n\\n```tsx\\nimport { cssMap } from '@atlaskit/css';\\n\\n// Exported styles are not checked (may be used in other files)\\nexport const styles = cssMap({\\n\\troot: { color: 'red' },\\n\\tunused: { background: 'blue' },\\n});\\n```\\n\\n```tsx\\nimport { cssMap } from '@compiled/react';\\n\\nconst styles = cssMap({\\n\\troot: { color: 'red' },\\n\\tactive: { background: 'blue' },\\n});\\n\\n// Using the entire object marks all properties as used\\nconst allStyles = { ...styles };\\n```\\n\\n## Options\\n\\nThis rule has no configuration options.\\n\"}",
|
|
451
|
+
ruleName: 'no-unused-cssmap-properties',
|
|
452
|
+
description: 'Detects unused properties in `cssMap` style objects that are not exported. This helps maintain clean'
|
|
453
|
+
}, {
|
|
454
|
+
content: "{\"ruleName\":\"use-compiled\",\"description\":\"Blocks CSS-in-JS libraries other than `@compiled/react`, including Emotion and styled-components.\",\"content\":\"# use-compiled\\n\\nBlocks CSS-in-JS libraries other than `@compiled/react`, including Emotion and styled-components.\\n\\n**WARNING** It may be unsafe to mix usages of `@compiled/react` with other CSS-in-JS libraries on\\nthe same component. When converting to `@compiled/react` verify ALL changes. For this reason, the\\nautofixer has been disabled by default, but it may be useful to enable to empower a migration.\\n\\n## Examples\\n\\n### Incorrect\\n\\n```tsx\\n/**\\n * @jsxRuntime classic\\n * @jsx jsx\\n */\\nimport { css } from '@emotion/core';\\nimport { jsx } from '@emotion/react';\\nimport styled from '@emotion/styled';\\n```\\n\\n```tsx\\nimport styled, { css } from 'styled-components';\\n```\\n\\n### Correct\\n\\nWe expect usage of `xcss` with `@atlaskit/primitives` when working with Primitives, and `css` with\\n`@compiled/react` when working with custom or native code.\\n\\n```tsx\\n/**\\n * @jsxRuntime classic\\n * @jsx jsx\\n */\\nimport { jsx, css, styled } from '@compiled/react';\\n\\nconst styles = css({ color: 'var(--ds-color-text)' });\\nexport default () => <div css={styles}>…</div>;\\n```\\n\\n```tsx\\nimport { xcss, Box } from '@atlaskit/primitives';\\n\\nconst styles = xcss({ color: 'color.text' });\\nexport default () => <Box xcss={styles}>…</Box>;\\n```\\n\\n## Options\\n\\n### `canAutoFix: boolean`\\n\\nDetermines whether or not the autofixer is enabled.\\n\\nDefaults to `false` due to safety concerns when mixing Compiled and other CSS-in-JS libraries on the\\nsame component.\\n\\nEven when enabled, the autofixer will only convert usages that are deemed safe. Currently this is\\nlimited to purely static styles where all keys and values are simple literals.\\n\"}",
|
|
455
|
+
ruleName: 'use-compiled',
|
|
456
|
+
description: 'Blocks CSS-in-JS libraries other than `@compiled/react`, including Emotion and styled-components.'
|
|
353
457
|
}];
|