43081j / 43081j/postcss-styled-components

Some errors not reported

Open
#2 3 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
12
Forks
1
PR merge metrics
No merged PRs in 30d

Description

Hi @43081j 👋 First of all, thanks for all of your hard work on this and also `postcss-js-core`, so amazing!

It appears that some Stylelint errors are not reported with `customSyntax: 'postcss-styled-components'` along with setting some standard rules using `extends: ['stylelint-config-recommended']` (eg. such as [`property-no-unknown`](https://github.com/stylelint/stylelint-config-recommended/blob/7aba0e798636fe3a5218951ed1095a8f96744a44/index.js#L36)):

```js
import styled, { css } from 'styled-components';

const Div = styled.div`
/* ✅ declaration-block-no-duplicate-properties reported */
color: red;
color: red;
/* ❌ property-no-unknown not reported */
booooorder: 1px solid red;
`;

const divStyles = css`
/* ❌ declaration-block-no-duplicate-properties not reported */
color: red;
color: red;
/* ❌ property-no-unknown not reported */
booooorder: 1px solid red;
`;
```

It seems like the `css` tagged template literals are possibly not checked at all? 🤔

This is also similarly broken when using Emotion:

```js
import { css } from '@emotion/react';
import styled from '@emotion/styled';

const Div = styled.div`
/* ✅ declaration-block-no-duplicate-properties reported */
color: red;
color: red;
/* ❌ property-no-unknown not reported */
booooorder: 1px solid red;
`;

const divStyles = css`
/* ❌ declaration-block-no-duplicate-properties not reported */
color: red;
color: red;
/* ❌ property-no-unknown not reported */
booooorder: 1px solid red;
`;
```

I've created an interactive demo of this on Replit.

To use it, change to the Shell tab on the right and run `npm install` and then `npm run lint`.

Demo (Replit): https://replit.com/@karlhorky/customSyntax-postcss-styled-components#styled-components.js

Screenshot 2022-12-30 at 23 17 36

---

Note that this does not use the nesting or other features of Sass (eg. to test out #1) because I haven't been able to get `customSyntax: "postcss-styled-components/scss"` working yet, as I mentioned here:

- https://github.com/43081j/postcss-styled-components/pull/1#issuecomment-1368102189

I will open new issues about any problems with these features once I can get the other entrypoints working.

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.