SASS Deprecations - Address Deprecated Functions In The NSW Design System

by ADMIN 74 views

The NSW Design System is currently facing several SASS deprecations that need to be addressed to ensure long-term maintainability and prevent breaking changes in future SASS updates. As a proactive measure, it is essential to identify and address these deprecations to maintain compatibility with modern SASS features and prevent urgent fixes later.

Understanding the Key Deprecations

The key deprecations affecting our stack include:

Global Built-in Functions (global-builtin)

Some globally available functions will require explicit namespace prefixes (e.g., sass:math, sass:string). This change aims to improve the organization and maintainability of SASS code by requiring explicit namespace prefixes for globally available functions.

@import Deprecation (import)

@import is being phased out in favor of @use and @forward. This change aims to improve the performance and organization of SASS code by allowing for more efficient and modular imports.

Mixed Declarations (mixed-decls)

Variables and mixins/functions cannot be declared in the same scope. This change aims to improve the organization and maintainability of SASS code by requiring separate scopes for variables and mixins/functions.

Deprecated Colour Functions (color-functions)

Functions like adjust-hue(), scale-color(), adjust-color(), and change-color() are being replaced with sass:color functions. This change aims to improve the organization and maintainability of SASS code by providing a more consistent and efficient way of working with colors.

Impact of Not Addressing Deprecations

If these deprecations are not addressed, future versions of SASS will:

  • Remove support for these features, potentially breaking the build.
  • Require a restructuring of how we manage styles due to the @import deprecation.
  • Require refactoring across multiple components due to the updating of colour functions.

Proposed Solution

To address these deprecations, the following steps are proposed:

Audit the Entire Codebase

  • Identify all instances of deprecated functions and imports.
  • Refactor @import to @use and @forward.
  • Migrate colour-related functions to sass:color.
  • Ensure all global functions are properly namespaced (e.g., math.div() instead of /).
  • Update documentation and developer guidelines to align with the new SASS best practices.

Refactor @import

  • Replace @import with @use where applicable.
  • Update @import statements to use @use and @forward.

Migrate Colour Functions

  • Update colour-related functions to use sass:color functions.
  • Refactor across multiple components to ensure consistency.

Update Documentation

  • Update documentation and developer guidelines to align with the new SASS best practices.
  • Ensure all contributors are aware of the changes and updates.

Next Steps

To address these deprecations, the following steps are required:

  • [ ] Identify all instances of deprecated functions.
  • [ ] Replace @import with @use where applicable.
  • [ ] Migrate deprecated colour functions.
  • [ ] Run tests to confirm no regressions.
  • [ ] Update documentation for contributors.

Additional Context

In our previous article, we discussed the key deprecations affecting the NSW Design System and proposed a solution to address these issues. In this article, we will answer some frequently asked questions (FAQs) related to SASS deprecations and provide additional context to help you better understand the impact and solution.

Q: What are SASS deprecations, and why are they important?

A: SASS deprecations refer to features or functions that are being removed or replaced in future versions of SASS. These deprecations are important because they can break your code and cause issues in the future if not addressed.

Q: What are the key deprecations affecting the NSW Design System?

A: The key deprecations affecting the NSW Design System include:

  • Global Built-in Functions (global-builtin)
  • @import Deprecation (import)
  • Mixed Declarations (mixed-decls)
  • Deprecated Colour Functions (color-functions)

Q: What is the impact of not addressing these deprecations?

A: If these deprecations are not addressed, future versions of SASS will:

  • Remove support for these features, potentially breaking the build.
  • Require a restructuring of how we manage styles due to the @import deprecation.
  • Require refactoring across multiple components due to the updating of colour functions.

Q: How do I identify deprecated functions in my code?

A: To identify deprecated functions in your code, you can use the following methods:

  • Use the SASS linter to identify deprecated functions.
  • Run a code audit to identify deprecated functions.
  • Review your code and look for functions that are marked as deprecated.

Q: How do I refactor @import to @use and @forward?

A: To refactor @import to @use and @forward, you can follow these steps:

  • Replace @import with @use where applicable.
  • Update @import statements to use @use and @forward.
  • Ensure that all imports are properly namespaced.

Q: How do I migrate colour functions to sass:color?

A: To migrate colour functions to sass:color, you can follow these steps:

  • Update colour-related functions to use sass:color functions.
  • Refactor across multiple components to ensure consistency.
  • Ensure that all colour functions are properly namespaced.

Q: How do I update documentation and developer guidelines to align with the new SASS best practices?

A: To update documentation and developer guidelines to align with the new SASS best practices, you can follow these steps:

  • Review the SASS documentation and update your documentation accordingly.
  • Update developer guidelines to reflect the new SASS best practices.
  • Ensure that all contributors are aware of the changes and updates.

Q: What are the next steps to address these deprecations?

A: The next steps to address these deprecations are:

  • Identify all instances of deprecated functions.
  • Replace @import with @use where applicable.
  • Migrate deprecated colour functions.
  • Run tests to confirm no regressions.
  • Update documentation for contributors.

Q: Why is it important to address these deprecations proactively?

A: Addressing these deprecations proactively is important because it ensures smooth future upgrades and maintains compatibility with modern SASS features. By addressing these issues early, we can prevent urgent fixes later when SASS fully deprecates these features.