hudochenkov / postcss-styled-syntax

PostCSS syntax for CSS-in-JS like styled-components
MIT License
74 stars 4 forks source link

Stylelint not reporting errors on nested css templates. #7

Closed bob-difronzo closed 1 year ago

bob-difronzo commented 1 year ago

When running Stylelint on the following code with "unit-allowed-list": ["rem"] set, it reports no errors instead of ✖ Unexpected unit "px":

const StyledDiv = styled.div`
  ${css`
    padding: 1px;
  `}
`;

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:

const StyledDiv = styled.div(
  () => css`
    padding: 1px;
  `
);

Here are the versions I am using:

## 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"] } ```
hudochenkov commented 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.

bob-difronzo commented 1 year ago

Thank you for the quick response! That's all working now. 😄