💄 Lint glamorous and related css-in-js with stylelint
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
src fix: suppress javascript syntax errors Mar 26, 2018
.npmignore feat: improve support for other css-in-js libraries Mar 26, 2018
LICENSE init Feb 16, 2018
yarn.lock init Feb 16, 2018



Lint glamorous and related css-in-js with stylelint

Build Status


$ 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')({ ... })  


Contributions of any kind are always welcome.