- From: Dennis Kats via GitHub <sysbot+gh@w3.org>
- Date: Fri, 23 Dec 2022 14:04:14 +0000
- To: public-css-archive@w3.org
Perhaps I'm lacking creativity here, but assuming the nesting proposal is going with Option 3, I expect the styles pane to behave pretty much identically to what's generated by SCSS, maybe with some added icon to indicate the presence of nesting. This is because the first thing I check for when debugging nested CSS is what my nested selectors were "desugared" into. So for nested CSS such as the following: <img src="https://user-images.githubusercontent.com/3473945/209331707-bd9221a7-30bd-4143-986f-d6041ef406ce.png" alt="css nesting option 3 example" width="300"/> The styles pane should appear as: <img src="https://user-images.githubusercontent.com/3473945/209340896-eabbe672-fe48-49a1-a9b0-ffeedaab1733.jpg" alt="css nesting styles pane example" width="500"/> In order to assist developers in inspecting how their selectors were desugared, I think it would be best to add context to the Sources panel. Specifically, it would be helpful to see what "&" is equal to at every level of nesting. I imagine this can either be viewable via a tooltip when hovering over a "&": <img src="https://user-images.githubusercontent.com/3473945/209345493-fc4504fb-7a4e-4a4d-af5b-e8bef97c845d.jpg" alt="css nesting sources tab tooltip example" width="500"/> Or it can be displayed inline when the line is selected: <img src="https://user-images.githubusercontent.com/3473945/209347602-023a0fc1-167c-4310-a47d-dbb31ff2a061.jpg" alt="css nesting sources tab inline example" width="500"/> -- GitHub Notification of comment by denk0403 Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/8236#issuecomment-1363979054 using your GitHub account -- Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Friday, 23 December 2022 14:04:15 UTC