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

Support ignoring rules outside of TTL #67

Merged
Show file tree
Hide file tree
Changes from all 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
2 changes: 1 addition & 1 deletion .lintstagedrc
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{
"{src,test}/**/*.{js,jsx}": [
"{src/**/*.{js,jsx},test/*.{js,jsx}}": [
"prettier --print-width 100 --tab-width 2 --no-semi --single-quote --write",
"git add",
"eslint"
Expand Down
14 changes: 9 additions & 5 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -60,29 +60,33 @@ npm run lint:css

### Syntax notes
#### Turning rules off from within your CSS
In order for `stylelint-processor-styled-components` to parse your `stylelint-disable` comments (see the [stylelint documentation](https://stylelint.io/user-guide/configuration/#turning-rules-off-from-within-your-css) for all allowed syntax) they must be inside the actual Styled Components CSS as such:
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:


**Wrong**:
```
/* stylelint-disable color-named */
/* stylelint-disable */
import React from 'react';
import styled from 'styled-components';

const Wrapper = styled.div`
/* stylelint-disable */
background-color: red;
`;
```
**Right**:
or even
```
/* stylelint-disable */
import React from 'react';
import styled from 'styled-components';

const Wrapper = styled.div`
/* stylelint-disable color-named */
/* stylelint-disable-next-line */
background-color: red;
`;
```

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).

Expand Down
Loading