Skip to content

Commit 9866f4a

Browse files
authored
Silence sass errors (#1674)
* fix: Refactor global variables It's not possible to migrate away from `@import` because: ``` pnpx sass-migrator module --migrate-deps addon/styles/addon.scss ... Error: This stylesheet was loaded by a nested import in addon/styles/addon.scss. The module system only supports loading nested CSS using the load-css() mixin, which doesn't allow access to variables from the outer stylesheet. ╷ 2 │ width: calc(((100% - #{$site-container}) / 2) + 14rem); │ ^^^^^^^^^^^^^^^ ╵ addon/styles/components/_docs-viewer-x-current-page-index.scss 2:26 root stylesheet ``` * fix: Migrate away from SASS @import This finally silences: ``` [test:ember] [test:ember] ╷ [test:ember] 9 │ @import './tailwind/components/docs-btn'; [test:ember] │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ [test:ember] ╵ [test:ember] addon/styles/addon.scss#sass 9:9 root stylesheet [test:ember] [test:ember] DEPRECATION WARNING: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0. ``` Fixes: #1673
1 parent 07e4f9d commit 9866f4a

File tree

4 files changed

+25
-21
lines changed

4 files changed

+25
-21
lines changed

addon/styles/_variables.scss

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
// Global settings
2+
$site-container: 1400px;

addon/styles/addon.scss

Lines changed: 14 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,24 @@
1-
// Global settings
2-
$site-container: 1400px;
3-
1+
@use "sass:meta";
42
@tailwind base;
53
@tailwind components;
64
@tailwind utilities;
75

8-
@import './tailwind/components/docs-brand-colors';
9-
@import './tailwind/components/docs-btn';
10-
@import './tailwind/components/docs-container';
11-
@import './tailwind/components/docs-md';
6+
@include meta.load-css('tailwind/components/docs-brand-colors');
7+
@include meta.load-css('tailwind/components/docs-btn');
8+
@include meta.load-css('tailwind/components/docs-container');
9+
@include meta.load-css('tailwind/components/docs-md');
1210

13-
@import './utilities/masks';
14-
@import './utilities/nudge';
11+
@include meta.load-css('utilities/masks');
12+
@include meta.load-css('utilities/nudge');
1513

16-
@import './components/docs-header-search-box';
17-
@import './components/docs-hero';
18-
@import './components/docs-keyboard-shortcuts';
19-
@import './components/docs-viewer-x-current-page-index';
20-
@import './components/docs-viewer-x-nav';
21-
@import './components/modal-dialog';
14+
@include meta.load-css('components/docs-header-search-box');
15+
@include meta.load-css('components/docs-hero');
16+
@include meta.load-css('components/docs-keyboard-shortcuts');
17+
@include meta.load-css('components/docs-viewer-x-current-page-index');
18+
@include meta.load-css('components/docs-viewer-x-nav');
19+
@include meta.load-css('components/modal-dialog');
2220

23-
@import 'syntax';
21+
@include meta.load-css('syntax');
2422

2523
// Figure out how to do this in tailwind
2624
.docs-fill-current {
Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
1+
@use '../variables' as vars;
2+
13
.AddonDocs-DocsViewer-CurrentPageIndex {
2-
width: calc(((100% - #{$site-container}) / 2) + 14rem);
3-
padding-right: calc((100% - #{$site-container}) / 2);
4+
width: calc(((100% - #{vars.$site-container}) / 2) + 14rem);
5+
padding-right: calc((100% - #{vars.$site-container}) / 2);
46
min-width: 14rem;
57
}
Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
1+
@use '../variables' as vars;
2+
13
.AddonDocs-DocsViewer-Nav {
2-
@media (min-width: $site-container) {
3-
width: calc(((100% - #{$site-container}) / 2) + 288px);
4-
padding-left: calc((100% - #{$site-container}) / 2);
4+
@media (min-width: vars.$site-container) {
5+
width: calc(((100% - #{vars.$site-container}) / 2) + 288px);
6+
padding-left: calc((100% - #{vars.$site-container}) / 2);
57
}
68
}

0 commit comments

Comments
 (0)