kss-node / kss-node/kss-node

kss.js script does not handle :not() pseudo class properly

Open
#266 5 comments 0 reactions 0 assignees View on GitHub
bug
Dominant language
JavaScript
Stars
1.5k
Forks
265
PR merge metrics
No merged PRs in 30d

Description

While implementing a 3rd party script as part of a component, I initially couldn't get the script to work right.
Some sleuthing later I found that the (S)CSS contained a rule `&:not(:first-child)`, which resulted in a rule `&:not(.pseudo-class-first-child)`.
Barring some special cases, thats always going to be true, which breaks stuff.

I solved the problem for myself by rewriting from `a { x &:not(:first-child) { y }}` to `a { y &:first-child { x }}`, but I can imagine there are other cases where such a solution is less feasible.

From the way kss-node seems to work I imagine conceptually simple solutions, like not generating 'unrequested' pseudo-classes are technically unfeasible, but maybe something can be done with comments, in the way linters use them to disable checks for specific parts of the code?

Contributor guide

No contributing guide indexed for this repository

Research direction

No file or test is identified in the report; start by tracing kss-node's handling of nested :not(:first-child) rules. Reproduce the reported transformation and define done as preserving the intended selector without breaking other pseudo-class cases, then add or run coverage for that case.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, javascript
Domain
documentation, frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.