From c2dc20038ef3a1bb79ca5a10ae79415a17cf2f17 Mon Sep 17 00:00:00 2001 From: Xianming Zhong Date: Sat, 31 Aug 2019 02:35:35 +0800 Subject: [PATCH 1/3] Add docs for options --- README.md | 49 +++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 49 insertions(+) diff --git a/README.md b/README.md index 73b6bec..ab35e7a 100644 --- a/README.md +++ b/README.md @@ -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)!** From 4df2f18ed67a400887bc50d48f45c08bf9123c7f Mon Sep 17 00:00:00 2001 From: Xianming Zhong Date: Sat, 31 Aug 2019 02:49:47 +0800 Subject: [PATCH 2/3] Add list items, fix link and mention stylelint@10 feature --- README.md | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index ab35e7a..cc583e8 100644 --- a/README.md +++ b/README.md @@ -66,7 +66,7 @@ And it also has some options. Their default values are, } ``` -Combining with `moduleName`, `importName` and `strict`, you can tell the processor what kinds of tagged template literals to lint. +- 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'; @@ -85,9 +85,9 @@ 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. +- `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). +- `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) @@ -104,7 +104,7 @@ Component.extend``; ### 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. @@ -112,6 +112,8 @@ If your project includes `yarn.lock` or `package-lock.json`, an alternative caus 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). From e472b03a23a56333fa821b29cf8823c9ebb726cb Mon Sep 17 00:00:00 2001 From: Xianming Zhong Date: Sun, 1 Sep 2019 10:27:42 +0800 Subject: [PATCH 3/3] Add a comment --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index cc583e8..c379a42 100644 --- a/README.md +++ b/README.md @@ -71,7 +71,7 @@ And it also has some options. Their default values are, ``` import styled, { css, keyframes } from 'styled-components'; -// `importName` from `moduleName` +// `importName` from `moduleName`, which means where `styled` comes from styled(Component)``; styled('div')``; styled.div``;