Awesome

stylelint-processor-glamorous

Lint glamorous and related css-in-js with stylelint

Installation

$ yarn add stylelint stylelint-config-standard stylelint-processor-glamorous --dev

You can use styleiint-config-recomended or your own custom config. Certain rules that enforce formatting rules will be ignored.

Add .stylelintrc to the root of your project:

{
  "processors": ["stylelint-processor-glamorous"],
  "extends": "stylelint-config-standard"
}

That's it. You can now run stylelint from the command line.

$ yarn stylelint 'src/**/*.js'

What gets linted

• Glamorous component factories

    import glamorous from 'glamorous'; // choose any name for the defaut export
  
    const Component = glamorous.div({ ... });
    const OtherComponent = glamorous('div')({ ... })
  

• CSS attributes

    <Div css={{ ... }}/>
  

• Annotated object literals.

  export const styles = 
    // @css
    {
      ...
    }
  

  The @css comment tells the processor that its a style object. Make sure you put it right before the opening brace.

Integrating with other css-in-js libraries

You can use @css to lint any object. Hoverver, if you stick to the styled pattern, you won't need to add annotations to your code.

  import styled from 'my-fav-cssinjs-lib';

  const Component = styled.div({ ... })
  const OtherComponent = styled('div')({ ... })  

Contributing

Contributions of any kind are always welcome.

LICENSE: MIT