@atlaskit/eslint-plugin-ui-styling-standard NPM

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.

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 .eslintrc.js file and enable individual rules as you're ready to adopt.

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
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-values	Disallows styles that are difficult/impossible to statically anaylze.	Yes
use-compiled	Ensures usage of `@compiled/react` 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
@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