sass-migratorlisted

Migrate a Dockerized, Makefile-driven Drupal theme's SCSS off deprecated Dart Sass syntax with sass-migrator, and clear the deprecation warnings at the source. Use when the user mentions sass-migrator, migrating @import to @use/@forward, the Sass module system, or Dart Sass deprecation warnings (mixed-decls, slash-div / division, strict-unary, legacy color functions). Covers the migrator run order, the fixes the migrator can NOT do (cross-file @extend, CSS max()/min() shims, mixed-decls source fixes), and a compiled-CSS non-regression harness that proves the output is unchanged. IMPORTANT: all builds MUST go through Makefile/npm targets inside the node container, never on the host.
JMAILLY/claude-migration-skills · ★ 0 · Web & Frontend · score 70

Install: claude install-skill JMAILLY/claude-migration-skills

# SCSS modernization with sass-migrator (Dockerized Drupal theme) Migrate a Drupal theme's SCSS off the deprecated bits of Dart Sass (`@import`, `/` division, ambiguous unary minus, `mixed-decls`) and clear every warning **without changing a single byte of the computed CSS**. Reference run: `akena.com` (theme `frontend`, 120 `.scss` files, ~500 rules). This skill pairs with `gulp-to-vite` — do the Gulp→Vite migration first (it gives you `make npm-build`), then this to modernize the SCSS the new build compiles. ## Golden rule: everything goes through the container Dockerized + Makefile-driven. Compile inside the `node` service, never on the host — the host `sass` CLI often pulls a broken `@parcel/watcher` on Apple Silicon (`No prebuild ... darwin-arm64`), which is **not** a code bug. | Need | Command | |---|---| | Production build (warning count) | `make npm-build` | | One entrypoint, ALL warnings (verbose) | `docker compose … exec -T node npx sass --verbose --no-source-map <in>.scss <out>.css` | | Run a migrator | `npx sass-migrator <migrator> --migrate-deps <entry>.scss …` (host is fine — it only rewrites source) | `make npm-build` only prints the **first 5** warnings per deprecation then `WARNING: N repetitive deprecation warnings omitted`. To see the full list use a verbose `npx sass` compile in the container. ## Order of operations 1. **module** — `@import` → `@use`/`@forward` + namespacing. 2. **division** — `/` → `math.div()` / multiplication. 3. **strict-unary*