When default_admin was merged into core, the CSS that was compiled from Sass was merged in wholesale. This means its a lot harder to debug and work with.

Task

We need to refactor these CSS files to make them modern

  • use PostCSS media
  • Nesting
  • Variables
  • etc

Luckily, the Sass files are 1:1 for the CSS files - meaning there are no partials. We don't have to redo all the compilation etc.

Testing steps

  • There should now be a corresponding postCSS file for every regular css file in the following directories
    • migration/css/components/
    • migration/css/layout/
    • migration/css/theme/
  • The new files should be using CSS nesting
  • The new files use the admin theme's default spacing variables where it can. These are a 1:1 with Gin's spacing variables. These are defined in core/themes/default_admin/css/base/variables.pcss.css
  • We removed -webkit- prefixes from the PostCSS. Note these were also removed from PostCSS in core/themes/default_admin/migration/css/base
  • We converted the manual breakpoints to use PostCSS media, and defined the new breakpoints in core/themes/default_admin/migration/css/base/media-queries.pcss.css.
  • migration/media/sprite.svg is now deleted, since it is no longer being used
  • Also test dark mode and accent-color functionality. This should all continue to work as before
  • These changes should not result in any visual changes, fixes, etc. You can verify that there are no visual changes by using a visual regression tool: https://github.com/mherchel/ddev-drupal-admin-vrt
  • Note this is NOT the final resting place for these files. And there are plenty of preexisting bugs still within these files. Fixing these is out of scope for this issue.
CommentFileSizeAuthor
#3 gin-sass-conversion.md12.67 KBmherchel

Issue fork drupal-3583057

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

mherchel created an issue. See original summary.

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented
Title: Undo the Sass compilation for components, and then convert to PostCSS » Undo the Sass compilation for components, layout, and theme and then convert to PostCSS
mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented
Issue summary: View changes
StatusFileSize
new gin-sass-conversion.md12.67 KB

Working with Claude code and generated a plan.

Prompt below, and plan document attached. 

This is a Drupal HEAD site. Soon to be Drupal 12. I'm working on cleaning up the CSS in core/themes/default_admin.

Today's task is to create a plan to convert the files in the following directories to PostCSS.

core/themes/default_admin/migration/css/components
core/themes/default_admin/migration/css/layout
core/themes/default_admin/migration/css/theme
These files were originally generated from Sass in the Gin theme. You can see the original code at /themes/gin/styles

These files need to be consistent with Drupal core. So they need to be compatible with Drupal core's PostCSS plugins, which uses PostCSS Preset ENV. You can see the compile step at core/scripts/css/compile.js

The plan will need to make sure

Media queries (see core/themes/default_admin/migration/css/base/media-queries.pcss.css)
Unconvert any variables
colors
spacing
etc
Make use of CSS nesting (including parent selector)
Can you output the plan as gin-sass-conversion.md? Ask me questions as necessary.

mherchel opened merge request !15386

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented
Assigned: Unassigned » mherchel
Status: Active » Needs work

Still lots of work to be done, but the majority of it is in the MR above. Now that #3582826: Untangle gin.css is done, we can get busy!

I'll likely get back to this tomorrow.

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented
Status: Needs work » Needs review

Pushed a number of linting/cspell fixes. Lets see if it passes

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented
Issue summary: View changes

Tests passing! Updating issue summary.

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented
Issue summary: View changes
mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented
Issue summary: View changes
mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented
Title: Undo the Sass compilation for components, layout, and theme and then convert to PostCSS » Convert the compiled CSS in default_admin's components, layout, and theme to modern PostCSS
bernardm28’s picture

bernardm28 commented
Status: Needs review » Reviewed & tested by the community

The automated tool passed the test ddev vrt. There were only two false positives, and it was just a string wrapping around.
Poked around the site in dark mode and switched the accent color, and everything seems to work as expected.
Hover, states seem to behave similarly as well.
Some of the CSS files seemed to output PCSS syntax, so I commented on that.