search

scottish-government-design-system / design-system

Design System for the Scottish Government and other Scottish public sector bodies
https://designsystem.gov.scot
MIT License
25 stars 11 forks source link

Getting warnings when transpiling with dart sass #7

Closed msuperina closed 2 years ago

msuperina commented 2 years ago

We are building our CSS using the Dart Sass API on version sass@^1.38.2.

sass.renderSync({ 
    file: path.resolve(SRC_FOLDER, 'sass', 'index.scss'),
    includePaths: [path.resolve(ROOT_PATH, 'node_modules')]
});

We are importing the Design System Pattern Library in the first line of index.scss by doing @import "@scottish-government/pattern-library/src/pattern-library";.

Below is an example of the warnings we are getting. They all seem related to usage of / for division.

DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($root-font-size, 1px)

More info and automated migrator: https://sass-lang.com/d/slash-div

  ╷
7 │     height: calc(24em/#{$root-font-size/1px});
  │                         ^^^^^^^^^^^^^^^^^^^
  ╵
    node_modules\@scottish-government\pattern-library\src\base\icon\_icon.scss 7:25  @import
    node_modules\@scottish-government\pattern-library\src\base\_all-base.scss 100:9  @import
    node_modules\@scottish-government\pattern-library\src\pattern-library.scss 3:9   @import
    src\sass\index.scss 1:9

Is there anything we need to do on our side around configuration and how to import the library ? Or is this an issue with the library ?

jsutcliffe commented 2 years ago

Hello, thanks for raising this. Use of "/" for division has been superseded in dart-sass only. While other Sass implementations (libsass, node-sass, etc) are largely deprecated, there may be Design System users still using them and if the Design System migrates to the new math.div() function anyone not using dart-sass will be unable to compile the CSS.

The documentation on the Design System site currently recommends using node-sass, which is now deprecated. I'll take an action to update that recommendation to dart-sass, as it's the reference Sass implementation, but use of "/" in division is likely to be retained in the Design System for some time.

For reference, here is an explanation of this breaking change: https://sass-lang.com/documentation/breaking-changes/slash-div

msuperina commented 2 years ago

Thank you for the quick reply and taking action on your side. We can live with the warnings now that we know you know 😄