css
css copied to clipboard
Published
20 hours ago •
primer
primer
`@import` and global built-in functions are deprecated in Sass
Describe the bug
Sass is deprecating the @import and global built-in functions
https://sass-lang.com/documentation/breaking-changes/import/
https://sass-lang.com/documentation/breaking-changes/color-functions/
To Reproduce Steps to reproduce the behavior:
- Create a new project that require
@primer/cssfrom NPM - Install the Dart Sass compiler (
npm i sass) - Create a new SCSS file that imports
@primer/css - Try to compile that file
- See deprecation notices
There is an automatic migration tool
$ npm install -g sass-migrator
$ sass-migrator module --migrate-deps your-entrypoint.scss
See https://github.com/sass/sass/issues/3513 See also other affected projects, https://github.com/twbs/bootstrap/issues/40962
Deprecation Warning: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
More info and automated migrator: https://sass-lang.com/d/import
╷
14 │ @import './color-modes/index.scss';
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
node_modules/@primer/css/index.scss 14:9 @import
assets/sass/vendor.scss 1:9 @use
assets/sass/styles.scss 1:1 root stylesheet
Deprecation Warning: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
More info and automated migrator: https://sass-lang.com/d/import
╷
15 │ @import './primitives/index.scss';
│ ^^^^^^^^^^^^^^^^^^^^^^^^^
╵
node_modules/@primer/css/index.scss 15:9 @import
assets/sass/vendor.scss 1:9 @use
assets/sass/styles.scss 1:1 root stylesheet
Deprecation Warning: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
More info and automated migrator: https://sass-lang.com/d/import
╷
18 │ @import './core/index.scss';
│ ^^^^^^^^^^^^^^^^^^^
╵
node_modules/@primer/css/index.scss 18:9 @import
assets/sass/vendor.scss 1:9 @use
assets/sass/styles.scss 1:1 root stylesheet
Deprecation Warning: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
More info and automated migrator: https://sass-lang.com/d/import
╷
19 │ @import './product/index.scss';
│ ^^^^^^^^^^^^^^^^^^^^^^
╵
node_modules/@primer/css/index.scss 19:9 @import
assets/sass/vendor.scss 1:9 @use
assets/sass/styles.scss 1:1 root stylesheet
Deprecation Warning: Global built-in functions are deprecated and will be removed in Dart Sass 3.0.0.
Use map.merge instead.
More info and automated migrator: https://sass-lang.com/d/import
╷
83 │ $spacer-map-extended: map-merge(
│ ┌───────────────────────^
84 │ │ (0: 0,
85 │ │ 1: $spacer-1,
86 │ │ 2: $spacer-2,
87 │ │ 3: $spacer-3,
88 │ │ 4: $spacer-4,
89 │ │ 5: $spacer-5,
90 │ │ 6: $spacer-6,
91 │ │ ),
92 │ │ $spacers-large,
93 │ │ ) !default;
│ └─^
╵
node_modules/@primer/css/support/variables/layout.scss 83:23 @import
node_modules/@primer/css/support/index.scss 3:9 @import
node_modules/@primer/css/core/index.scss 9:9 @import
node_modules/@primer/css/index.scss 18:9 @import
assets/sass/vendor.scss 1:9 @use
assets/sass/styles.scss 1:1 root stylesheet
Deprecation Warning: Global built-in functions are deprecated and will be removed in Dart Sass 3.0.0.
Use map.merge instead.
More info and automated migrator: https://sass-lang.com/d/import
╷
220 │ $spacer-map-rem-extended: map-merge(
│ ┌───────────────────────────^
221 │ │ (0: 0,
222 │ │ 1: var(--base-size-4, 4px),
223 │ │ 2: var(--base-size-8, 8px),
224 │ │ 3: var(--base-size-16, 16px),
225 │ │ 4: var(--base-size-24, 24px),
226 │ │ 5: var(--base-size-32, 32px),
227 │ │ 6: var(--base-size-40, 40px),
228 │ │ ),
229 │ │ $spacers-large-rem,
230 │ │ ) !default;
│ └─^
╵
node_modules/@primer/css/support/variables/layout.scss 220:27 @import
node_modules/@primer/css/support/index.scss 3:9 @import
node_modules/@primer/css/core/index.scss 9:9 @import
node_modules/@primer/css/index.scss 18:9 @import
assets/sass/vendor.scss 1:9 @use
assets/sass/styles.scss 1:1 root stylesheet
Deprecation Warning: Global built-in functions are deprecated and will be removed in Dart Sass 3.0.0.
Use map.get instead.
More info and automated migrator: https://sass-lang.com/d/import
╷
10 │ $value: map-get($breakpoints, $breakpoint);
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
node_modules/@primer/css/support/mixins/layout.scss 10:13 breakpoint()
node_modules/@primer/css/forms/form-control.scss 72:5 @import
node_modules/@primer/css/forms/index.scss 2:9 @import
node_modules/@primer/css/core/index.scss 19:9 @import
node_modules/@primer/css/index.scss 18:9 @import
assets/sass/vendor.scss 1:9 @use
assets/sass/styles.scss 1:1 root stylesheet
Deprecation Warning: Global built-in functions are deprecated and will be removed in Dart Sass 3.0.0.
Use map.get instead.
More info and automated migrator: https://sass-lang.com/d/import
╷
52 │ @media (max-width: #{map-get($breakpoints, 'md') - 0.02px}) {
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
node_modules/@primer/css/layout/app-frame.scss 52:28 @import
node_modules/@primer/css/layout/index.scss 2:9 @import
node_modules/@primer/css/core/index.scss 20:9 @import
node_modules/@primer/css/index.scss 18:9 @import
assets/sass/vendor.scss 1:9 @use
assets/sass/styles.scss 1:1 root stylesheet
Deprecation Warning: Global built-in functions are deprecated and will be removed in Dart Sass 3.0.0.
Use map.keys instead.
More info and automated migrator: https://sass-lang.com/d/import
╷
17 │ @each $breakpoint in map-keys($breakpoints) {
│ ^^^^^^^^^^^^^^^^^^^^^^
╵
node_modules/@primer/css/layout/grid.scss 17:22 @import
node_modules/@primer/css/layout/index.scss 4:9 @import
node_modules/@primer/css/core/index.scss 20:9 @import
node_modules/@primer/css/index.scss 18:9 @import
assets/sass/vendor.scss 1:9 @use
assets/sass/styles.scss 1:1 root stylesheet
Hey @jonrohan! 👋
By chance, do you have more context on this issue? I see there was a PR linked, but was closed out 🤔
Describe the bug Sass is deprecating the
@importand global built-in functions https://sass-lang.com/documentation/breaking-changes/import/ https://sass-lang.com/documentation/breaking-changes/color-functions/To Reproduce Steps to reproduce the behavior:
- Create a new project that require
@primer/cssfrom NPM- Install the Dart Sass compiler (
npm i sass)- Create a new SCSS file that imports
@primer/css- Try to compile that file
- See deprecation notices
There is an automatic migration tool
$ npm install -g sass-migrator $ sass-migrator module --migrate-deps your-entrypoint.scssSee https://github.com/sass/sass/issues/3513 See also other affected projects, https://github.com/twbs/bootstrap/issues/40962
