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

Commit

Permalink
Merge pull request #98 from styled-components/readme/webpack-loader-r…
Browse files Browse the repository at this point in the history
…eference

Add reference to stylelint-custom-processor-loader to README
  • Loading branch information
mxstbr committed Aug 16, 2017
2 parents c9d5168 + 10708f5 commit fbf7805
Showing 1 changed file with 7 additions and 0 deletions.
7 changes: 7 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -59,8 +59,13 @@ Now you can lint your CSS by running this script! 🎉
npm run lint:css
```

### Webpack

For use with Webpack you can use the [`stylelint-custom-processor-loader`](https://github.com/emilgoldsmith/stylelint-custom-processor-loader).

### Syntax notes
#### Turning rules off from within your CSS

Turning off rules with `stylelint-disable`-like comments (see the [stylelint documentation](https://stylelint.io/user-guide/configuration/#turning-rules-off-from-within-your-css) for all allowed syntax) is fully supported inside and outside of the tagged template literals, do note though that what actually happens behind the scene is that all `stylelint-(disable|enable)` comments are moved into the compiled css that is actually linted, so something like this:


Expand Down Expand Up @@ -89,9 +94,11 @@ const Wrapper = styled.div`
would throw a stylelint error similar to `All rules have already been disabled (CssSyntaxError)`.

#### Interpolation linting

We do not currently support linting interpolations as it could be a big performance hit though we aspire to have at least partial support in the future. You can of course lint your own mixins in their separate files, but it won't be linted in context, the implementation currently just inserts relevant dummy values. This, we are afraid, means you won't be able to lint cases such as `declaration-block-no-duplicate-properties` etc. and won't be able to lint outside mixins such as [polished](https://github.com/styled-components/polished).

#### Template literal style and indentation

In order to have stylelint correctly apply indentation rules we need to do a bit of opinionated preprocessing on the `styled-components` styles, which results in us only officially supporting one coding style when it comes to `styled-components` tagged template literals. This style consists of always placing the closing backtick on the base level of indentation as follows:

**Right**
Expand Down

0 comments on commit fbf7805

Please sign in to comment.