Problem/Motivation

Following with latest changes from Drupal core package.json file

Warning: LibSass and Node Sass are deprecated. While they will continue to receive maintenance releases indefinitely, there are no plans to add additional features or compatibility with any new CSS or Sass features. Projects that still use it should move onto Dart Sass.
https://www.npmjs.com/package/node-sass

  • The maintainers no longer recommend LibSass for new Sass projects. Use Dart Sass instead.
  • The maintainers recommend all existing LibSass users make plans to eventually move onto Dart Sass, and that all Sass libraries make plans to eventually drop support for LibSass.
  • The maintainers are no longer planning to add any new features to LibSass, including compatibility with new CSS features.
  • LibSass and Node Sass will continue to be maintained indefinitely on a best-effort basis, including fixing major bugs and security issues and maintaining compatibility with the latest Node versions.

Proposed resolution

Switch to using webpack, as was done for the maintainer's other module varbase_layout_builder

Remaining tasks

User interface changes

API changes

Data model changes

Issue fork bootstrap_styles-3282120

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

Abdullah Yassin created an issue. See original summary.

rhovland’s picture

rhovland
he/him
Primary language English
Location Oregon
commented
Version: 1.0.x-dev » 1.2.x-dev

rhovland opened merge request !69

rhovland’s picture

rhovland
he/him
Primary language English
Location Oregon
commented

I switched over to Dart Sass.

The package node-sass-magic-importer was removed. It's only used function was to support glob syntax in @import. The places where globs were used all files were specified.

The package nodemon was removed. Dart Sass has built in support for watching and compiling changes. Changed watch script to make use of it.

Updated autoprefixer to the latest version. It doesn't seem to be used in the project though.

I recompiled the CSS. There were no significant changes besides some code style changes. Color hex values are compiled into rgb values. blank lines between selectors were removed. Map files were generated which will help with debugging the resulting CSS.

rhovland’s picture

rhovland
he/him
Primary language English
Location Oregon
commented
Status: Active » Needs review
rhovland’s picture

rhovland
he/him
Primary language English
Location Oregon
commented

I don't think adding the node constraint is advisable. Dart Sass already has a node version constraint in it. If someone tries to install it on an incompatible version they'll be told their node version is too old.

sass/package.json:
"engines":{"node":">=14.0.0"}

rhovland’s picture

rhovland
he/him
Primary language English
Location Oregon
commented
Title: Switch from deprecated Node Sass to Dart Sass compiler and change minimum node version to 16.0 and later in the Bootstrap Styles module » Switch from deprecated Node Sass to Webpack
Issue summary: View changes
rhovland’s picture

rhovland
he/him
Primary language English
Location Oregon
commented
Status: Needs review » Needs work

After discussing this with the maintainer on Slack, they would like to migrate to using Webpack for this module and others as they did in another one of their modules
https://git.drupalcode.org/project/varbase_layout_builder/-/blob/10.1.x/...

aaronchristian’s picture

aaronchristian commented

Yep, we have this internally working with webpack/yarn as well.

I need to find the time to port this over, shouldn't take too long though!