From 03b3054fff38d44aad9c57b89ed974afe7afce75 Mon Sep 17 00:00:00 2001
From: Markus Sanin <markus.sanin@zeppelin-group.com>
Date: Wed, 3 Jan 2024 08:12:23 +0100
Subject: [PATCH] Add additional option for css import

---
 .../public-pages/docs/installation.hbs        | 21 ++++++++++---------
 docs/ember-cli-build.js                       |  2 +-
 2 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/docs/app/templates/public-pages/docs/installation.hbs b/docs/app/templates/public-pages/docs/installation.hbs
index 431fea9e2..42ebcf7f5 100644
--- a/docs/app/templates/public-pages/docs/installation.hbs
+++ b/docs/app/templates/public-pages/docs/installation.hbs
@@ -6,9 +6,7 @@
 </p>
 
 <div class="highlight">
-  <pre>
-    <code class="language-text" data-lang="text">$ ember install ember-power-select</code>
-  </pre>
+  <pre class="language-command"><code class="language-command">$ ember install ember-power-select</code></pre>
 </div>
 
 <p>
@@ -27,17 +25,20 @@
   In this component will be rendered the power select content.
 </p>
 
-<div class='highlight'>
-  <pre>
-    <code class='language-text' data-lang='text'>&lt;BasicDropdownWormhole /&gt;</code>
-  </pre>
-</div>
+<CodeBlock @language="hbs" @code="<BasicDropdownWormhole />" />
+
+<p>
+  If you use vanilla CSS, you need to add the following line into <code>app.js</code> or in any route/controller/component <code>.js/.ts</code> file:
+</p>
+
+<CodeBlock @language="js" @code="import 'ember-power-select/styles';" />
 
 <p>
-  If you use vanilla CSS, you need to add the following line into <code>app.js</code>:
+  Instead of adding the styling in an <code>.js</code> file and depending from your build config you can also add the css in any template/component css file by using following line
 </p>
 
-<CodeBlock @language="css" @code="import 'ember-power-select/styles';" />
+{{!-- template-lint-disable no-potential-path-strings --}}
+<CodeBlock @language="css" @code="@import 'ember-power-select/vendor/ember-power-select.css';" />
 
 <p>
   However, if you are using SASS or LESS you need to add an import statement to your styles.
diff --git a/docs/ember-cli-build.js b/docs/ember-cli-build.js
index 1cca4cd28..3fad766e3 100644
--- a/docs/ember-cli-build.js
+++ b/docs/ember-cli-build.js
@@ -7,7 +7,7 @@ module.exports = function (defaults) {
     'ember-cli-babel': { enableTypeScriptTransform: true },
     snippetPaths: ['app/components/snippets', 'app/templates/snippets/'],
     'ember-prism': {
-      components: ['scss', 'javascript'], //needs to be an array, or undefined.
+      components: ['scss', 'javascript', 'handlebars', 'markup-templating'], //needs to be an array, or undefined.
     },
     autoImport: {
       watchDependencies: ['ember-power-select'],