43081j / 43081j/postcss-styled-components

Declarations that use interpolations with Props seem to be ignored

未关闭
#8 4 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看
主要语言
TypeScript
星标
12
派生
1
PR 合并指标
30 天内没有已合并 PR

描述

Emotion allows changing styles based on Props ( https://emotion.sh/docs/styled#changing-based-on-props ).
Right now declarations using this synthax seem to be ignored by the linter.

I think that for example the following cases should result in an error:

Example 1:
https://stylelint.io/user-guide/rules/declaration-block-no-duplicate-properties

```
const Button = styled.button`
color: ${props => (props.primary ? 'hotpink' : 'turquoise')};
color: ${props => (props.primary ? 'hotpink' : 'turquoise')};
`
```

Example 2:
https://stylelint.io/user-guide/rules/color-no-invalid-hex

```
const Button = styled.button`
color: ${(props) => (props.primary ? '#f00' : '#00')};
`;
```

贡献指南

这个仓库没有索引到贡献指南

调研方向

该 issue 涉及 linter 忽略 styled-components 中使用 Props 插值的样式声明。查看 postcss-styled-components syntax plugin 中的 parser,了解它目前如何处理 template literal 插值。应添加测试用例,以验证使用 Props 时能够捕获重复属性和无效十六进制颜色规则。检查测试套件中现有的 styled-components 解析示例。

由索引模型根据 Issue 内容生成。

评估

领域
devtools, testing-qa
Issue 类型
缺陷
难度
3/5
预计耗时
1-2 天
活跃度
停滞
描述清晰度
描述清楚
新手友好度
55/100

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。