@atlaskit/eslint-plugin-ui-styling-standard
TypeScript icon, indicating that this package has built-in type declarations

1.0.0 • Public • Published

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 eslint.config.cjs 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 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
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
@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

Readme

Keywords

none

Package Sidebar

Install

npm i @atlaskit/eslint-plugin-ui-styling-standard

Weekly Downloads

50

Version

1.0.0

License

Apache-2.0

Unpacked Size

526 kB

Total Files

179

Last publish

Collaborators

  • atlassianartifactteam
  • atlaskit-user