@layout-css/eslint-plugin-styled-components v0.1.1

@layout-css/eslint-plugin-styled-components

An ESLint plugin to validate a styled-component's appearance is not modified during composition.

The following example will error because the Button component should not have its background color changed. This is likely to hover or focus states, or may break if future changes are made to the appearance of Button.

const MyButton = styled(Button)`
  background-color: red;
`;

Install

npm install @layout-css/eslint-plugin-styled-components --save-dev;

 -- or --

yarn add @layout-css/eslint-plugin-styled-components -D;

Configure ESLint

Add the plugin and rule to your ESLint config.

...
    plugins: ['@layout-css/styled-components'],
    rules: {
      '@layout-css/styled-components/no-modify-appearance': 'error',
    },
...

Note, in the above code, you may use the full package name, "@layout-css/eslint-plugin-styled-components", but this is shorter.

Configuring Styleable components

You may have some unstyled components that allow the appearance to be added later. You can disable ESLint per instance, or globally for certain component names.

Disable per line:

// esline-disable-line @layout-css/styled-components/no-modify-appearance
const Button = styled(Clickable)`
  color: ${color};
`;

Disable component names globally in ESLint config by adding them to the options:

{
    "rules": {
        "@layout-css/styled-components/no-modify-appearance": ["error", "Clickable", "Container"]
    }
}

Limitations

There are ambiguous cases where the linter may not understand which templates create valid or invalid css.

/* Not able to identify as valid. */
const MyButton = styled(Button)`
  margin-${props => props.align}: 50px;
`;

/* Not able to identify as invalid. */
const MyButton = styled(Button)`
  ${props => props.fillProp}: $color;
`;

Contributors

Based on work from https://github.com/styled-components/stylelint-processor-styled-components

License

Licensed under the MIT License, Copyright © 2019 Marc Robichaud. See LICENSE.md for more information.