From 0726744ee4e14b7e6223273fe7cdc2b4a8c77e3f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Michal=20Bryxi=CC=81?= Date: Wed, 23 Apr 2025 09:33:44 +0200 Subject: [PATCH 1/2] fix: Refactor global variables MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 ``` --- addon/styles/_variables.scss | 2 ++ addon/styles/addon.scss | 3 --- .../components/_docs-viewer-x-current-page-index.scss | 6 ++++-- 3 files changed, 6 insertions(+), 5 deletions(-) create mode 100644 addon/styles/_variables.scss diff --git a/addon/styles/_variables.scss b/addon/styles/_variables.scss new file mode 100644 index 000000000..f73361d83 --- /dev/null +++ b/addon/styles/_variables.scss @@ -0,0 +1,2 @@ +// Global settings +$site-container: 1400px; diff --git a/addon/styles/addon.scss b/addon/styles/addon.scss index 1278f927f..5d2406b68 100644 --- a/addon/styles/addon.scss +++ b/addon/styles/addon.scss @@ -1,6 +1,3 @@ -// Global settings -$site-container: 1400px; - @tailwind base; @tailwind components; @tailwind utilities; diff --git a/addon/styles/components/_docs-viewer-x-current-page-index.scss b/addon/styles/components/_docs-viewer-x-current-page-index.scss index d93c6b54a..5253faa3c 100644 --- a/addon/styles/components/_docs-viewer-x-current-page-index.scss +++ b/addon/styles/components/_docs-viewer-x-current-page-index.scss @@ -1,5 +1,7 @@ +@use '../variables' as vars; + .AddonDocs-DocsViewer-CurrentPageIndex { - width: calc(((100% - #{$site-container}) / 2) + 14rem); - padding-right: calc((100% - #{$site-container}) / 2); + width: calc(((100% - #{vars.$site-container}) / 2) + 14rem); + padding-right: calc((100% - #{vars.$site-container}) / 2); min-width: 14rem; } From e0106bc04732b83d186049d4f9cde62b5e729b15 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Michal=20Bryxi=CC=81?= Date: Wed, 23 Apr 2025 09:34:42 +0200 Subject: [PATCH 2/2] fix: Migrate away from SASS @import MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- addon/styles/addon.scss | 27 ++++++++++--------- .../styles/components/_docs-viewer-x-nav.scss | 8 +++--- 2 files changed, 19 insertions(+), 16 deletions(-) diff --git a/addon/styles/addon.scss b/addon/styles/addon.scss index 5d2406b68..fd0ae7be3 100644 --- a/addon/styles/addon.scss +++ b/addon/styles/addon.scss @@ -1,23 +1,24 @@ +@use "sass:meta"; @tailwind base; @tailwind components; @tailwind utilities; -@import './tailwind/components/docs-brand-colors'; -@import './tailwind/components/docs-btn'; -@import './tailwind/components/docs-container'; -@import './tailwind/components/docs-md'; +@include meta.load-css('tailwind/components/docs-brand-colors'); +@include meta.load-css('tailwind/components/docs-btn'); +@include meta.load-css('tailwind/components/docs-container'); +@include meta.load-css('tailwind/components/docs-md'); -@import './utilities/masks'; -@import './utilities/nudge'; +@include meta.load-css('utilities/masks'); +@include meta.load-css('utilities/nudge'); -@import './components/docs-header-search-box'; -@import './components/docs-hero'; -@import './components/docs-keyboard-shortcuts'; -@import './components/docs-viewer-x-current-page-index'; -@import './components/docs-viewer-x-nav'; -@import './components/modal-dialog'; +@include meta.load-css('components/docs-header-search-box'); +@include meta.load-css('components/docs-hero'); +@include meta.load-css('components/docs-keyboard-shortcuts'); +@include meta.load-css('components/docs-viewer-x-current-page-index'); +@include meta.load-css('components/docs-viewer-x-nav'); +@include meta.load-css('components/modal-dialog'); -@import 'syntax'; +@include meta.load-css('syntax'); // Figure out how to do this in tailwind .docs-fill-current { diff --git a/addon/styles/components/_docs-viewer-x-nav.scss b/addon/styles/components/_docs-viewer-x-nav.scss index 4a4abf4c0..bc678b07f 100644 --- a/addon/styles/components/_docs-viewer-x-nav.scss +++ b/addon/styles/components/_docs-viewer-x-nav.scss @@ -1,6 +1,8 @@ +@use '../variables' as vars; + .AddonDocs-DocsViewer-Nav { - @media (min-width: $site-container) { - width: calc(((100% - #{$site-container}) / 2) + 288px); - padding-left: calc((100% - #{$site-container}) / 2); + @media (min-width: vars.$site-container) { + width: calc(((100% - #{vars.$site-container}) / 2) + 288px); + padding-left: calc((100% - #{vars.$site-container}) / 2); } }