Migrate dart-sass to modern Sass

[Piliuta]

🚀 Migrate to Dart Sass and Modern Build System (v3.0.0)

Summary

This PR modernizes the Solid CSS framework by migrating from the deprecated node-sass to dart-sass, implementing the modern Sass module system, and replacing Grunt with npm scripts. This ensures compatibility with Node.js 22+ and eliminates all deprecation warnings.

🔴 Breaking Changes

• Sass Module System: All files now use @use/@forward instead of @import
• Custom Builds: Projects that import Solid's internal Sass files must update to use @use syntax
• Node.js Version: Now requires Node.js 14+ (tested on Node.js 22)
• Build System: Grunt replaced with npm scripts (no functional impact for consumers)

✨ What Changed

Dependencies

• ✅ Added: sass@1.97.0 (dart-sass), lightningcss-cli@1.28.1
• ❌ Removed: node-sass, grunt, grunt-sass, grunt-dart-sass, all grunt plugins
• 📉 Impact: 98% fewer dependencies (370 → 21 packages), 0 vulnerabilities (was 42)

Sass Modernization

• Converted all @import → @use/@forward module system
• Added built-in module imports: sass:color, sass:map, sass:math
• Replaced deprecated functions:
  • darken()/lighten() → color.adjust($color, $lightness: ±X%)
  • map-get()/map-has-key() → map.get()/map.has-key()
  • / division → math.div()
  • percentage() → math.percentage()
• Optimized module structure: removed redundant imports from aggregator files
• Standardized import order: built-in modules before local modules

Build System

Before: Grunt + 7 plugins + legacy Sass API
After: npm scripts + Sass CLI + LightningCSS

New Scripts:

npm run build              # Full production build
npm run dev                # Watch mode for development
npm run sass:compile       # Compile Sass only
npm run css:minify         # Minify CSS
npm run lint:scss          # Check Sass syntax

Package Configuration

• Added modern exports field for proper module resolution
• Added files field to reduce published package size
• Enhanced keywords for better npm discoverability
• Added .editorconfig for consistent code formatting
• Added .nvmrc to pin Node.js version (22)
• Added CHANGELOG.md following Keep a Changelog format

📊 Results

Metric	Before	After	Change
Dependencies	370 packages	21 packages	-98%
Vulnerabilities	42	0	-100%
Build warnings	Multiple deprecations	0	✅
CSS size (uncompressed)	108KB	108KB	No change
CSS size (minified)	82KB	82KB	No change
Build time	~3-4s	~2-3s	~25% faster

✅ Testing

• Clean build from scratch succeeds
• All CSS output is identical (diff verified)
• No Sass deprecation warnings
• No security vulnerabilities
• Build scripts work on macOS (Node 22)

📝 Migration Guide for Consumers

If you're using the pre-built CSS (most users):

No changes needed! Just update the package version.

If you're importing Sass files:

Before:

@import "~bf-solid/_lib/solid";

After:

@use "~bf-solid/_lib/solid";

If you're overriding variables:

Before:

$fill-red: #custom;
@import "~bf-solid/_lib/solid";

After:

@use "~bf-solid/_lib/solid" with (
  $fill-red: #custom
);

[Copilot]

Pull request overview

This PR modernizes the Solid CSS framework by migrating from the deprecated node-sass to dart-sass (v1.97.0), implementing the modern Sass module system (@use/@forward instead of @import), and replacing the Grunt build system with npm scripts. This is a major version bump to 3.0.0 due to breaking changes in the Sass module system.

Key changes:

• Build tooling: Replaced Grunt + 7 plugins with npm scripts + Sass CLI + LightningCSS, reducing dependencies by 98% (370 → 21 packages) and eliminating 42 security vulnerabilities
• Sass modernization: Converted all files to use @use/@forward module system and replaced deprecated Sass functions (darken/lighten → color.adjust, / division → math.div, percentage → math.percentage, map-get → map.get)
• Package improvements: Added modern exports configuration, .editorconfig, .nvmrc, enhanced keywords, and comprehensive CHANGELOG.md

Reviewed changes

Copilot reviewed 50 out of 52 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
package.json	Major version bump, replaced node-sass with sass 1.97.0, removed Grunt dependencies, added new npm build scripts, enhanced package metadata
package-lock.json	New lockfile with minimal modern dependencies (21 vs 370 packages)
npm-shrinkwrap.json	Removed legacy shrinkwrap file
Gruntfile.js	Removed Grunt build configuration
CHANGELOG.md	Added comprehensive changelog following Keep a Changelog format
.nvmrc	Added Node version pinning (v22)
.editorconfig	Added editor configuration for consistent code style
.npmignore	Updated to use modern file exclusion patterns
_lib/solid.scss	Changed from @import to @forward for main entry point
_lib/*-helpers.scss	Converted aggregator files to use @forward instead of @import
_lib/*-utilities.scss	Converted aggregator files to use @forward instead of @import
_lib/*-components.scss	Converted aggregator files to use @forward instead of @import
_lib/*-base.scss	Converted aggregator files to use @forward instead of @import
_lib/solid-helpers/_mixins.scss	Added sass:map module, converted map-get/map-has-key to map.get/map.has-key, improved error messages
_lib/**/typography/*.scss	Added @use imports for solid-helpers, converted color functions
_lib/**/layout/*.scss	Added @use imports for solid-helpers
_lib/**/grid/*.scss	Added sass:math module, converted division and percentage functions
_lib/**/colors/*.scss	Added @use imports for solid-helpers
lib/solid-utilities/*.scss	Added @use imports, converted deprecated Sass functions (darken/lighten → color.adjust)
lib/solid-components/*.scss	Added @use imports, converted deprecated color functions, fixed indentation issues
lib/solid-base/*.scss	Added @use imports, converted deprecated color functions

Files not reviewed (1)

• npm-shrinkwrap.json: Language not supported

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.