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: [email protected] (dart-sass), [email protected]
• ❌ 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
);