chenglou / chenglou/RCSS

Mapping generated CSS classes to JavaScript files

Open
#26 3 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
284
Forks
17
PR merge metrics
No merged PRs in 30d

Description

With traditional stylesheets, in Chrome I can select an element, look at its styles, and see where they came from (i.e., which file). It'd be great if there were a similar process for RCSS (i.e., a way to figure out which JavaScript file generated a certain RCSS class). I can think of two ways of doing this:
1. The generated CSS class name somehow encapsulates the JavaScript file from which it was generated. For example, if it was generated in tooltip.jsx, then the classname might be `c0-tooltip`.
2. The generated tag somehow encapsulates the JavaScript file from which it was generated. I'm really not sure if there's a useful way to do this, but it might be attractive if there's some attribute we can add and have the Chrome devtools pick up without additional work.

Contributor guide

No contributing guide indexed for this repository

Research direction

Start by tracing how RCSS generates class names and inserts style tags, then compare the two proposed approaches: encoding the JavaScript source in class names or adding source metadata to style tags. Done means a generated RCSS class can be traced to the JavaScript file that produced it through Chrome inspection.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.