Skip to content

Conversation

@indus
Copy link

@indus indus commented Jul 18, 2024

Sass's behavior for declarations that appear after nested
rules will be changing to match the behavior specified by CSS in an upcoming version. To keep the existing behavior, move the declaration above the nested rule. To opt into the new behavior, wrap the declaration in & {}.

More info: https://sass-lang.com/d/mixed-decls

There may be more locations where these changes should be made - but this one is the only one that gives an error in my codebase

> Sass's behavior for declarations that appear after nested
rules will be changing to match the behavior specified by CSS in an upcoming
version. To keep the existing behavior, move the declaration above the nested
rule. To opt into the new behavior, wrap the declaration in `& {}`.

> More info: https://sass-lang.com/d/mixed-decls
@pauloxnet
Copy link
Contributor

I came here to propose the same fix. Thanks for doing this already.

bunnymatic pushed a commit to bunnymatic/pico that referenced this pull request Nov 29, 2024
problem
------

we get a pile of css deprecation warnings

solution
------

Follow the instructions from the warnings to get quiet them up.

changes
-------

* Applied Pico PR's (via patch) picocss#575 and picocss#596
* Update sass files to include `sass:color`, `sass:list` etc as required to avoid global methods
* Move from `color.red`, `color.green`, `color.blue` to `color.channel` as suggested by deprecation warnings
* bumped sass to 1.81
* rebuild css (with `yarn build`)
@lucaslarroche
Copy link
Member

@indus, I'm conflicted on this — while we do need to address this future breaking change, simply adding & {} everywhere results in multiple :root {} blocks in the final CSS. That makes the files harder to read, heavier, and could also lead to longer browser render times.

For now, I’ll silence the warning when compiling Sass. Open to revisiting if we find a cleaner way to handle it.
sass --silence-deprecation=mixed-decls

@lucaslarroche
Copy link
Member

Hey @indus, after looking into this further, I found that @nstringham’s approach in PR #596 provides a clean solution by reordering declarations instead of adding extra & {} wrappers. This keeps the final CSS lighter and more readable.

I’ll likely move forward with that fix, but I appreciate your contribution and the discussion around this!

@lucaslarroche lucaslarroche mentioned this pull request Mar 9, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants