# UI Styling Standard ESLint Plugin
The UI Styling Standard is a set of principles to guide styling UI code across Atlassian's frontend
codebases and ecosystem.
These are the current ESLint rules that enforce and help comply with the UI Styling Standard today,
but more are planned to support the standard over time.
## Installation
You must use the recommended config to follow the styling standards at Atlassian, which will ensure
compatability and performance with the design system.
```diff
module.exports = {
extends: [
+ 'plugin:@atlaskit/ui-styling-standard/recommended',
],
};
```
We don't recommended maintaining your own configuration. If you do not use our config you will need
to specify individual rules and configuration. Add the plugin to your `eslint.config.cjs` file and
enable individual rules as you're ready to adopt.
```diff
module.exports = {
plugins: [
+ '@atlaskit/ui-styling-standard',
],
rules: [
+ '@atlaskit/ui-styling-standard/convert-props-syntax': 'warn',
+ '@atlaskit/design-system/local-cx-xcss': 'error',
],
};
```
## Rules
| Rule | Description | Recommended | Fixable | Suggestions |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- | ------- | ----------- |
| atlaskit-theme | Ban certain usages of `@atlaskit/theme` that `@compiled/react` does not understand | Yes | | |
| convert-props-syntax | Convert props syntax that is unsupported by styled-components@<4 or @emotion/styled to props syntax that is supported. This is useful when used in conjunction with `no-styled-tagged-template-expression`, as output from the latter may use props syntax unsupported by those libraries. | Yes | Yes | |
| enforce-style-prop | Disallows usage of static styles in the `style` attribute in components | Yes | | |
| local-cx-xcss | Ensures the cx() function, which is part of the XCSS API, is only used within the xcss prop. This aids tracking what styles are applied to a jsx element. | Yes | | |
| no-array-arguments | Prevents usage of array arguments to style declaration functions | Yes | Yes | |
| no-classname-prop | Disallows usage of the `className` prop in JSX | Yes | | |
| no-container-queries | Prevents usage of @container query within css styling | Yes | | |
| no-dynamic-styles | Disallows use of dynamic styles in CSS-in-JS calls | Yes | | |
| no-exported-styles | Disallows exports of css, keyframes, styled and xcss | Yes | | |
| no-global-styles | Prevents global styles through CSS-in-JS or CSS module imports | Yes | | |
| no-important-styles | Disallows important style declarations | Yes | | |
| no-imported-style-values | Disallows imports of style values | Yes | | |
| no-nested-selectors | Prevents usage of nested selectors within css styling | Yes | | |
| no-styled | Disallows usage of the `styled` imports | Yes | | |
| no-unsafe-selectors | Disallows use of nested styles in `css` functions. | Yes | Yes | Yes |
| no-unsafe-values | Disallows styles that are difficult/impossible to statically anaylze. | Yes | | |
| no-unused-cssmap-properties | Detects unused properties in cssMap style objects that are not exported. Helps maintain clean code by identifying style variants that are defined but never used. | Yes | | |
| use-compiled | Ensures usage of `@compiled/react` or `@atlaskit/css` instead of other CSS-in-JS libraries | Yes | Yes | |
| @atlaskit/design-system/consistent-css-prop-usage | Ensures consistency with `css` and `xcss` prop usages | Yes | Yes | |
| @atlaskit/design-system/no-css-tagged-template-expression | Disallows any `css` tagged template expressions that originate from Emotion, Styled Components or Compiled | Yes | Yes | |
| @atlaskit/design-system/no-keyframes-tagged-template-expression | Disallows any `keyframe` tagged template expressions that originate from Emotion, Styled Components or Compiled | Yes | Yes | |
| @atlaskit/design-system/no-styled-tagged-template-expression | Disallows any `styled` tagged template expressions that originate from Emotion, Styled Components or Compiled | Yes | Yes | |
| @atlaskit/design-system/no-empty-styled-expression | Forbids any styled expression to be used when passing empty arguments to styled.div() (or other JSX elements). | Yes | | |
| @atlaskit/design-system/no-invalid-css-map | Checks the validity of a CSS map created through cssMap. This is intended to be used alongside TypeScript's type-checking. | Yes | | |