https://github.com/zabute/stylelint-processor-glamorous
:lipstick: Lint glamorous and related css-in-js with stylelint
https://github.com/zabute/stylelint-processor-glamorous
css-in-js glamorous linter stylelint stylelint-processor
Last synced: about 1 year ago
JSON representation
:lipstick: Lint glamorous and related css-in-js with stylelint
- Host: GitHub
- URL: https://github.com/zabute/stylelint-processor-glamorous
- Owner: zabute
- License: mit
- Created: 2018-02-16T03:05:39.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2023-01-04T22:48:28.000Z (over 3 years ago)
- Last Synced: 2024-10-29T07:41:13.369Z (over 1 year ago)
- Topics: css-in-js, glamorous, linter, stylelint, stylelint-processor
- Language: JavaScript
- Homepage:
- Size: 1.06 MB
- Stars: 17
- Watchers: 2
- Forks: 0
- Open Issues: 19
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# stylelint-processor-glamorous
> Lint [glamorous](https://github.com/paypal/glamorous) and related css-in-js with [stylelint](https://github.com/stylelint/stylelint)
[](https://travis-ci.org/zabute/stylelint-processor-glamorous)
## Installation
```sh
$ 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](/src/ignoredRules.js).
### Add ```.stylelintrc``` to the root of your project:
```json
{
"processors": ["stylelint-processor-glamorous"],
"extends": "stylelint-config-standard"
}
```
That's it. You can now run stylelint from the command line.
```sh
$ yarn stylelint 'src/**/*.js'
```
## What gets linted
- Glamorous component factories
```js
import glamorous from 'glamorous'; // choose any name for the defaut export
const Component = glamorous.div({ ... });
const OtherComponent = glamorous('div')({ ... })
```
- CSS attributes
```jsx
```
- Annotated object literals.
```js
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.
```js
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](/LICENSE)