@atlaskit/eslint-plugin-ui-styling-standard
v0.11.3
Published
The eslint plugin to enforce and educate on Atlassian's UI Styling Standard
Downloads
1,945
Readme
Atlassian UI Styling Standard ESLint Plugin
The UI Styling Standard plugin utilizes rules from across Atlassian, Open Source, and more, to define what the standard for writing styles at Atlassian should look like.
Installation
Not intended for use outside the Atlassian frontend repository.
Rules
| Rule | Description | Recommended | Fixable | Suggestions |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- | ------- | ----------- |
| 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-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-unsafe-values | Disallows styles that are difficult/impossible to statically anaylze. | 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 | |
| @compiled/no-suppress-xcss | Disallows supressing type violations when using the xcss prop. | Yes | | |
| @compiled/no-js-xcss | Disallows using xcss prop inside JavaScript files. | 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-exported-css | Forbid exporting css
function calls. Exporting css
function calls can result in unexpected behaviour at runtime, and is not statically analysable. | Yes | | |
| @atlaskit/design-system/no-exported-keyframes | Forbid exporting keyframes
function calls. Exporting css
function calls can result in unexpected behaviour at runtime, and is not statically analysable. | 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 | | |