Use Gulp to compile Sass with Node instead of Compass and Ruby Gems

Created on 8 August 2024, 4 months ago
Updated 13 August 2024, 3 months ago

Problem/Motivation

The Bluecheese theme uses Compass to compile CSS which has been unsupported since 2015 and it requires rubygems to run. Because Compass is legacy, it does not validate modern CSS3 syntax so it currently is not able to compile modern CSS.

Steps to reproduce

Add some CSS3 to a sass file such as declaring a CSS3 variable.
Run compass compile
Note error messages regarding the CSS3 syntax.

Proposed resolution

- Stop using Compass to compile and remove all rubygem dependencies.
- Set up a Gulpfile with NOde package dependencies to compile Sass using Gulp
- Find node packages or non-rubygem dependent ways to cover existing mixins for:
- Susy One
- Compass mixins
- Breakpoint mixins
- Compass reset

Additional cleanup: Remove Sass for Drupal 7 panels that are no longer in use.

Remaining tasks

In future follow-up we could refactor Sass to not require Compass, Susy and Breakpoint mixins.
Update readme file so that others can easily contribute changes to Sass.

User interface changes

none.

API changes

none.

Data model changes

none.

๐Ÿ“Œ Task
Status

Fixed

Version

1.0

Component

Code

Created by

๐Ÿ‡บ๐Ÿ‡ธUnited States biz123

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

  • Issue created by @biz123
  • Pipeline finished with Success
    4 months ago
    Total: 131s
    #248300
  • Pipeline finished with Success
    4 months ago
    Total: 132s
    #249283
  • Pipeline finished with Success
    4 months ago
    Total: 177s
    #249292
  • Pipeline finished with Success
    4 months ago
    Total: 163s
    #249497
  • ๐Ÿ‡บ๐Ÿ‡ธUnited States spicy.werewolf

    spicy.werewolf โ†’ made their first commit to this issueโ€™s fork.

  • Status changed to Needs review 4 months ago
  • ๐Ÿ‡บ๐Ÿ‡ธUnited States spicy.werewolf
  • Status changed to Needs work 3 months ago
  • ๐Ÿ‡บ๐Ÿ‡ธUnited States agentrickard Georgia (US)

    I find these test instructions incomplete:

    * How do I install yarn? Is yarn install sufficient?

    * Should I run the commands inside or outside of DDEV?

    Regardless of where I run the command, I get lots of warnings:

    Warning: In order to avoid variable namspace collisions, we have updated the way to change settings for Breakpoint. Please change all instances of `$breakpoint-to-ems: {{setting}}` to `@include breakpoint-set('to ems', {{setting}})`. Variable settings, as well as this warning will be deprecated in a future release.
        node_modules/breakpoint-sass/stylesheets/breakpoint/_legacy-settings.scss 16:7  legacy-settings-warning()
        node_modules/breakpoint-sass/stylesheets/_breakpoint.scss 41:3                  breakpoint()
        sass/partials/drupalorg/redesign2018/_view-redesign-case-studies.scss 9:3       @import
        sass/styles.scss 95:9                                                           root stylesheet
    
    Warning: 63 repetitive deprecation warnings omitted.
    
  • Status changed to RTBC 3 months ago
  • ๐Ÿ‡บ๐Ÿ‡ธUnited States agentrickard Georgia (US)

    I missed the note about the warnings โ€“ I think this is ready for to commit to the "palantir" branch and then we can work on cleanup.

  • Pipeline finished with Skipped
    3 months ago
    #252070
  • Status changed to Fixed 3 months ago
  • ๐Ÿ‡บ๐Ÿ‡ธUnited States agentrickard Georgia (US)

    Merged to "palantir".

  • Status changed to Fixed 3 months ago
  • ๐Ÿ‡บ๐Ÿ‡ธUnited States spicy.werewolf
Production build 0.71.5 2024