1.1.1 • Published 3 years ago
eslint-plugin-force-theme-colors v1.1.1
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"};`