eslint-plugin-force-theme-colors

1.1.1 • Public • Published

eslint-plugin-force-theme-colors

This plugin is meant to force the use of variables from the styled theme, and avoid using the color values directly.

usage

Add the plugin to your eslint plugins, and set the rules or use the recommended config:

{
  // ... rest of config
  "plugins": [
    // ... other plugins
    "force-theme-colors"
  ],
  "extends": [
    // ... other extends
    "plugin:force-theme-colors/recommended"
  ]
}

force-theme-colors

Valid:

const myStyle = css`color: ${({ theme }) => theme.colors.blue};`
const Component = styled.div`color: ${({ theme }) => theme.colors.red};`
const myStyle = css`color: ${theme.colors.blue};`
const Component = styled.div`color: ${theme.colors.red};`

Invalid:

const myStyle = css`color: blue;`
const myStyle = css`color: #0000ff;`
const myStyle = css`color: rgb(0, 0, 255);`
const myStyle = css`color: rgba(0, 0, 255, 0);`
const myStyle = css`color: ${isBlue ? "blue" : "red"};`

Readme

Keywords

none

Package Sidebar

Install

npm i eslint-plugin-force-theme-colors

Weekly Downloads

44

Version

1.1.1

License

GPL-3.0-or-later

Unpacked Size

1.52 MB

Total Files

4

Last publish

Collaborators

  • martini97