43081j / 43081j/postcss-styled-components

Some errors not reported

Offen
#2 3 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
Vorherrschende Sprache
TypeScript
Sterne
12
Forks
1
PR-Merge-Kennzahlen
Keine gemergten PRs in 30 T.

Beschreibung

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.

Beitragsleitfaden

Für dieses Repository ist kein Beitragsleitfaden indexiert

Rechercherichtung

The issue shows that `css` tagged template literals are not being linted. Start by examining the parser in the source code to see how it processes different template literal tags. Run the provided Replit demo to reproduce the bug. Look for tests related to styled-components and emotion to understand the expected behavior. The fix likely involves updating the parser to recognize and process the `css` tag.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
typescript
Bereich
testing-qa, tooling
Issue-Typ
Bug
Schwierigkeit
3/5
Geschätzter Aufwand
1-2 Tage
Aktivitätsstatus
Veraltet
Klarheit
Klar beschrieben
Anfängerfreundlichkeit
65/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.