From ea578c4207ed760ac45175dda9ff1dc8d5ddf497 Mon Sep 17 00:00:00 2001
From: Lisbet Alvarez <107949262+lisbet-alvarez@users.noreply.github.com>
Date: Tue, 18 Jun 2024 09:29:26 -0700
Subject: [PATCH] =?UTF-8?q?fix:=20=F0=9F=90=9B=20styles=20import=20file=20?=
 =?UTF-8?q?not=20being=20found=20(#2353)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 addons/rose/addon/styles/addon.scss |  2 +-
 addons/rose/index.js                | 28 +++++++++++++++++++++++++---
 2 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/addons/rose/addon/styles/addon.scss b/addons/rose/addon/styles/addon.scss
index b7c296e7d..d9496c886 100644
--- a/addons/rose/addon/styles/addon.scss
+++ b/addons/rose/addon/styles/addon.scss
@@ -3,6 +3,6 @@
  * SPDX-License-Identifier: BUSL-1.1
  */
 
-@import '@hashicorp/design-system-components.css';
+@import '@hashicorp/design-system-components';
 @import 'hds/themes/dark-mode';
 @import 'hds/overrides';
diff --git a/addons/rose/index.js b/addons/rose/index.js
index 940d07259..e1b4f1afb 100644
--- a/addons/rose/index.js
+++ b/addons/rose/index.js
@@ -13,14 +13,13 @@ module.exports = {
   name: require('./package').name,
   included(app) {
     this._super.included.apply(this, arguments);
-    app.import(
-      'node_modules/@hashicorp/design-system-components/dist/styles/@hashicorp/design-system-components.css',
-    );
+
     app.import('node_modules/codemirror/lib/codemirror.css');
     app.import('node_modules/codemirror/theme/monokai.css');
     app.import('node_modules/codemirror/addon/lint/lint.css');
     app.import('node_modules/jsonlint/lib/jsonlint.js');
 
+    this.includeHDSStyles(app);
     this.includeFlightIcons(app);
     this.includePublic(app);
     this.setupSVGO(app);
@@ -37,6 +36,29 @@ module.exports = {
       .contentFor(type, config);
   },
 
+  /**
+   * Finds the HDS styles folder and includes it into the running
+   * application's `sassOptions.includePaths`.
+   */
+  includeHDSStyles(app) {
+    const tokensPath =
+      '../../node_modules/@hashicorp/design-system-tokens/dist/products/css';
+    const hdsPath =
+      '../../node_modules/@hashicorp/design-system-components/dist/styles';
+    const iconsPath =
+      '../../node_modules/@hashicorp/ember-flight-icons/dist/styles';
+
+    // Setup default sassOptions on the running application
+    app.options.sassOptions = app.options.sassOptions || {};
+    app.options.sassOptions.includePaths =
+      app.options.sassOptions.includePaths || [];
+
+    // Include the addon styles
+    app.options.sassOptions.includePaths.push(tokensPath);
+    app.options.sassOptions.includePaths.push(hdsPath);
+    app.options.sassOptions.includePaths.push(iconsPath);
+  },
+
   /**
    * Finds the structure-icons folder and includes it into the
    * ember-inline-svg addon.