Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feature/upgrade css tree 3.0.0 with formal CSS nesting handling #1281

Merged
merged 4 commits into from
Sep 20, 2024
Merged

feature/upgrade css tree 3.0.0 with formal CSS nesting handling #1281

merged 4 commits into from
Sep 20, 2024

Conversation

thescientist13
Copy link
Member

@thescientist13 thescientist13 commented Sep 13, 2024 •
edited
Loading

Related Issue

resolves #1283

Summary of Changes

  1. Upgrade to the new CSS Tree v3.0.0 release and adjust parsing as needed
  2. Formal support for the & (NestedSelector)

TODO

  1. Confirm behavior of MediaQuery node + modifier
  2. validate / test case behavior for nested CSS with & - feature/upgrade css tree 3.0.0 with formal CSS nesting handling #1281 (comment)
  3. website responsiveness is broken

Interestingly, it looks like NestedSelector is supported in v2 as well

!!?!?!?!?!? { node: { type: 'NestingSelector', loc: null } }
^C
➜  www.greenwoodjs.dev git:(content/issue-33-guides-content) ✗ npm ls css-tree
[email protected] /Users/owenbuckley/Workspace/project-evergreen/www.greenwoodjs.dev
├─┬ @greenwood/[email protected]
│ └── [email protected]
└─┬ [email protected]
  └── [email protected] deduped

So if we can't land this upgrade in time for v0.37.0, we should at least cherry-pick over the nesting support

@thescientist13 thescientist13 added enhancement Improve something existing (e.g. no docs, new APIs, etc) CLI dependencies Pull requests that update a dependency file labels Sep 13, 2024
@thescientist13 thescientist13 added this to the 1.0 milestone Sep 13, 2024
@thescientist13
Copy link
Member Author

thescientist13 commented Sep 14, 2024 •
edited
Loading

As far as nesting goes, it seems with both 2.x and 3.x versions, with this CSS / HTML

<html>
  <head>
    <style>
      h2 {
        & span {
          color: red;
        }
      }
      
      h3 {
        span {
          color: blue;
        }
      }
    </style>
  </head>
  <body>
    <h2>This is the second heading that <span>should be red</span>.</h2>
    <h3>This is the second heading that <span>should be blue</span>.</h3>
  </body>
</html>

We get parse errors for the non & styles

Parse error: Colon is expected
    6 |
    7 |h3 {
    8 |  span {
--------------^
    9 |    color: blue;
   10 |  }

And comes out the other side "somewhat" correct, albeit missing the &

h2{ span{color:red}}h3{span {
    color: blue;
  }}

Screenshot 2024-09-14 at 8 35 11 AM
Screenshot 2024-09-14 at 8 34 59 AM

Not sure how to get the & back, though even MDN seems to indicate it is optional?

For the non & use case, seems like there is an open issue for that - csstree/csstree#268

@thescientist13 thescientist13 changed the title enhancement/upgrade css tree 3.0.0 enhancement/upgrade css tree 3.0.0 and CSS nesting Sep 14, 2024
@thescientist13 thescientist13 linked an issue Sep 14, 2024 that may be closed by this pull request
CSS optimization workflow parity during development (inlining @import statements) #1257
Closed
@thescientist13 thescientist13 removed a link to an issue Sep 14, 2024
CSS optimization workflow parity during development (inlining @import statements) #1257
Closed
@thescientist13 thescientist13 changed the title enhancement/upgrade css tree 3.0.0 and CSS nesting enhancement/upgrade css tree 3.0.0 with formal CSS nesting handling Sep 14, 2024
@thescientist13 thescientist13 marked this pull request as ready for review September 14, 2024 18:24
@thescientist13 thescientist13 mentioned this pull request Sep 18, 2024
Closed
@thescientist13 thescientist13 linked an issue Sep 20, 2024 that may be closed by this pull request
support CSS nesting syntax (with the & selector) #1283
Closed
@thescientist13 thescientist13 added feature New feature or request and removed enhancement Improve something existing (e.g. no docs, new APIs, etc) alpha.7 v0.30.0 labels Sep 20, 2024
@thescientist13 thescientist13 changed the title enhancement/upgrade css tree 3.0.0 with formal CSS nesting handling feature/upgrade css tree 3.0.0 with formal CSS nesting handling Sep 20, 2024
@thescientist13 thescientist13 force-pushed the enhancement/upgrade-css-tree-3.0.0 branch from 606f82f to 5a87944 Compare September 20, 2024 22:32
@thescientist13 thescientist13 merged commit 76ff3a1 into release/0.30.0 Sep 20, 2024
8 checks passed
@thescientist13 thescientist13 deleted the enhancement/upgrade-css-tree-3.0.0 branch September 20, 2024 22:57
@thescientist13 thescientist13 mentioned this pull request Oct 8, 2024
Merged
3 tasks
thescientist13 added a commit that referenced this pull request Nov 2, 2024
@thescientist13
feature/upgrade css tree 3.0.0 with formal CSS nesting handling (#1281)
9853168 
* upgrade to css-tree 3.0.0

* update comment

* nesting selector CSS optimization support

* cleanup
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
CLI dependencies Pull requests that update a dependency file feature New feature or request
Projects
No open projects
[Greenwood] Phase 9 - Standards and Conventions
Status: ✅ Done
Milestone
1.0
Development

Successfully merging this pull request may close these issues.

support CSS nesting syntax (with the & selector)
1 participant
@thescientist13