stylelint-processor-glamorous

Lint glamorous and related css-in-js with stylelint

Build Status

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

Stylelint Processor Glamorous

:lipstick: Lint glamorous and related css-in-js with stylelint

Stylelint Processor Glamorous Info

⭐ Stars18
🔗 Source Codegithub.com
🕒 Last Update3 years ago
🕒 Created5 years ago
🐞 Open Issues17
➗ Star-Issue Ratio1
😎 Authorzabute