pgn-viewer icon indicating copy to clipboard operation
pgn-viewer copied to clipboard

Update SCSS to fix Dart SCSS deprecation warnings

Open Copilot opened this issue 6 months ago • 3 comments

This PR updates all SCSS files to use modern Dart SCSS syntax, eliminating deprecation warnings that were being issued by newer SCSS compilers.

Changes Made

1. Fixed Global Built-in Function Usage

  • Replaced deprecated global mix() function calls with color.mix()
  • Added @use 'sass:color'; import to access the color module

2. Modernized Import System

  • Converted all @import statements to @use statements with proper namespacing
  • Variables are maintained in _lichess-pgn-viewer.vars.scss (companion to the main lib file)
  • Main lib file imports variables and all partials using modern @use syntax
  • Partials that need variables import the vars file directly to avoid circular dependencies
  • No @forward statements needed

3. Fixed Minor Bug

  • Corrected missing $ prefix in _fbt.scss variable reference (lpv-fbt-hover$lpv-fbt-hover)

Before

Deprecation Warning [import]: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
Deprecation Warning [global-builtin]: Global built-in functions are deprecated and will be removed in Dart Sass 3.0.0.
Use color.mix instead.
Warning: 17 repetitive deprecation warnings omitted.

After

[2025-08-25 16:44] Compiled scss/lichess-pgn-viewer.scss to demo/lichess-pgn-viewer.css.

The generated CSS output remains functionally identical - all color mixing computations produce the same results, and all variables resolve correctly.

Fixes #45.


💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

Copilot avatar Aug 22 '25 10:08 Copilot