Skip to content

Remove deprecated @import commands from SASS files#6426

Merged
artf merged 7 commits intoGrapesJS:devfrom
sirbeagle:update-sass-deprecated-imports
Mar 10, 2025
Merged

Remove deprecated @import commands from SASS files#6426
artf merged 7 commits intoGrapesJS:devfrom
sirbeagle:update-sass-deprecated-imports

Conversation

@sirbeagle
Copy link
Contributor

@sirbeagle sirbeagle commented Feb 27, 2025

This PR is to address the deprecation of the @import in the SASS processor we are using - details are here.

The idea here is to remove the use of @import statements in sass files and remove nested calls that assume a parent style is available and instead reference shared parent items with @use.

I used the sass-migrator tool as a starting point and then did a bunch of refactoring of how the files are being called. I did break some items into new files (gjs_main_mixins.scss, gjs_category_general.scss, etc) so that other _gjs files could @use them to do things like extending a style.

While I did move stuff around a bit, I did my best not to touch the content or order of styles unless if was absolutely necessary. Obviously these changes touch a core component of the library so we'll need to test the heck out of it if we decide to proceed.

sirbeagle and others added 5 commits February 27, 2025 15:53
…calls that assume a parent style is available and instead reference shared parent items with @use
GrapesJS#6424)

* Add height CSS for Safari not showing layer icons (GrapesJS#6394)

* Missed the drag icon

---------

Co-authored-by: Chris Benjamin <cbenjamin@stormseed.com>
@sirbeagle
Copy link
Contributor Author

I have built the compiled CSS files both with the existing dev branch and with this PR and compared them using cssdiff. The resulting files are about identical, the difference being that sometimes when defining multiple rules (separated by comma) the order may be different even though the rule is the same:

image

As far as I can tell this doesn't affect the styles at all, and it only is happening when multiple selectors are defined like above. I'm still checking everything over but I think this might be ready to go shortly.

@sirbeagle sirbeagle changed the title [WIP] Remove @import commands from SASS files Remove deprecated @import commands from SASS files Mar 6, 2025
@sirbeagle
Copy link
Contributor Author

I have gotten the output grapes.min.css to produce the same content as the dev branch with the exception of the order changes of multiple selector definitions mentioned in the comment above (the red / green image). I think this might be ready to go.

Copy link
Member

@artf artf left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Checked locally and looks all good, awesome work 👏

@artf artf merged commit 60163cb into GrapesJS:dev Mar 10, 2025
3 checks passed
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.

2 participants