Skip to content
This repository was archived by the owner on May 14, 2021. It is now read-only.

Add docs for options and fix something #279

Merged
merged 3 commits into from
Sep 1, 2019
Merged
Changes from 2 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
53 changes: 52 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,55 @@ Now use those in your `.stylelintrc` and run stylelint with your JavaScript file

> **NOTE:** The processor works with Flow- and TypeScript-typed files too! (we'll assume TypeScript usage if your files end in `.ts` or `.tsx`)

And it also has some options. Their default values are,

```json
{
"processors": [["stylelint-processor-styled-components", {
"moduleName": "styled-components",
"importName": "default",
"strict": false,
"ignoreFiles": [],
"parserPlugins": [
"jsx",
"objectRestSpread",
["decorators", { "decoratorsBeforeExport": true }],
"classProperties",
"exportExtensions",
"asyncGenerators",
"functionBind",
"functionSent",
"dynamicImport",
"optionalCatchBinding",
"optionalChaining"
]
}]]
}
```

- Combining with `moduleName`, `importName` and `strict`, you can tell the processor what kinds of tagged template literals to lint.

```
import styled, { css, keyframes } from 'styled-components';

// `importName` from `moduleName`
styled(Component)``;
styled('div')``;
styled.div``;

// any other imports from `moduleName` (if `strict` is true, they will not be linted)
css``;
keyframes``;

// special extend calls, which have been deprecated in styled-components v4
Component.extend``;

```

- `ignoreFiles` is passed to [micromatch](https://github.com/micromatch/micromatch#api) as the second parameter, which means one or more glob patterns for matching.

- `parserPlugins` is used to make the processor's parser be able to parse new syntaxes. All available babel parser plugins and related options can be found in [Babel's website](https://babeljs.io/docs/en/babel-parser#plugins).

## [Documentation](https://www.styled-components.com/docs/tooling#stylelint)

**Further documentation for this processor lives on [the styled-components website](https://www.styled-components.com/docs/tooling#stylelint)!**
Expand All @@ -55,14 +104,16 @@ Now use those in your `.stylelintrc` and run stylelint with your JavaScript file

### Why does it throw `Unexpected token`? Even thought the file didn't import `styled-components`.

You can custom babel plugins by `option.parserPlugins` now. An API example is [our test](https://github.com/styled-components/stylelint-processor-styled-components/blob/master/test/options.test.js#L211). But if someone can implement #231, that will be much better.
You can custom babel plugins by `option.parserPlugins` now. An API example is [our test](https://github.com/styled-components/stylelint-processor-styled-components/blob/master/test/options.test.js#L211). But if someone can implement [#231](https://github.com/styled-components/stylelint-processor-styled-components/issues/231), that will be much better.

If your project includes `yarn.lock` or `package-lock.json`, an alternative cause can be that babel related dependencies, i.e. `@babel/parser` and `@babel/traverse`, are outdated, especially when linting files with new TypeScript syntaxes. You can upgrade them by removing their entries in the lockfile and reinstall dependencies.

### Why does it throw unexpected lint errors?

The processor can not always parse interpolations with right things. But you can use [interpolation-tagging](https://www.styled-components.com/docs/tooling#interpolation-tagging) to help it. If you have ideas to make it more intelligent, feel free to send a PR or share your solution by an new issue.

What's more, if set `syntax: css-in-js` in stylelint@10, it can extract styles from `styled-components` without this processor. Even though there are still lots of differences with this processor, we hope this processor's abilities can be migrated to stylelint totally in the future.

### I don't want specified tagged template literal to be parsed, i.e. `css`.

You can set `option.strict`. More examples are in [#258](https://github.com/styled-components/stylelint-processor-styled-components/pull/258).
Expand Down