Closed bob-difronzo closed 1 year ago
Thank you for a detailed report!
This was a terrible issue. Since release of this package Stylelint couldn't lint inside css
interpolations 🤦
I fixed the problem in 0.3.2
.
Thank you for the quick response! That's all working now. 😄
When running Stylelint on the following code with
"unit-allowed-list": ["rem"]
set, it reports no errors instead of✖ Unexpected unit "px"
:It only seems to happen when the
css
tagged template is used within the interpolation of another tagged template because this does report the correct error:Here are the versions I am using:
postcss-styled-syntax@0.3.1
stylelint@15.1.0
styled-components@5.3.6
node@18.14.0
npm@8.18.3
## Full reproduction
### `package.json`
```json { "name": "styled-syntax-nested-issue", "version": "1.0.0", "private": true, "type": "module", "main": "index.js", "scripts": { "lint": "stylelint index.js" }, "license": "ISC", "dependencies": { "styled-components": "5.3.6" }, "devDependencies": { "postcss-styled-syntax": "0.3.1", "stylelint": "15.1.0" } } ```### `.stylelintrc.json`
```json { "customSyntax": "postcss-styled-syntax", "rules": { "unit-allowed-list": ["rem"] } } ```### `index.js`
```js import styled, { css } from 'styled-components'; const someCondition = Math.random() > 0.5; const Works1 = styled.div` padding: 1px; `; const Works2 = styled.div( () => css` padding: 1px; ` ); const Works3 = styled.div(() => someCondition ? css` padding: 1px; ` : css` padding: 2px; ` ); const DoesNotWork1 = styled.div` ${css` padding: 1px; `} `; const DoesNotWork2 = styled.div` ${ someCondition ? css` padding: 1px; ` : css` padding: 2px; ` } `; const DoesNotWork3 = styled.div( () => css` ${ someCondition ? css` padding: 1px; ` : css` padding: 2px; ` } ` ); const DoesNotWork4 = styled.div` ${() => css` padding: 1px; `} `; ```### `.vscode/settings.json`
```json { "stylelint.validate": ["javascript"] } ```