Merge pull request #733 from mkszepp/fix-less

Fix less import & improve docs for less / css
cibernox · Jan 4, 2024 · 34afa9a · 34afa9a
2 parents 4628688 + c713070
commit 34afa9a
Show file tree

Hide file tree

Showing 7 changed files with 30 additions and 17 deletions.
diff --git a/docs/app/templates/public-pages/docs/installation.hbs b/docs/app/templates/public-pages/docs/installation.hbs
@@ -7,9 +7,7 @@
 </p>
 
 <div class='highlight'>
-  <pre>
-    <code class='language-text' data-lang='text'>$ ember install ember-basic-dropdown</code>
-  </pre>
+  <pre><code class='language-text' data-lang='text'>$ ember install ember-basic-dropdown</code></pre>
 </div>
 
 <p>
@@ -24,18 +22,21 @@
   In this component will be rendered the dropdown 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>:
+  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="css" @code="import 'ember-basic-dropdown/styles';" />
 
+<p>
+  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>
+
+{{!-- template-lint-disable no-potential-path-strings --}}
+<CodeBlock @language="css" @code="@import 'ember-basic-dropdown/vendor/ember-basic-dropdown.css';" />
+
 <p>
   However, if you are using SASS or LESS you need to add an import statement to your styles.
 </p>
@@ -44,7 +45,13 @@
   <CodeBlock @language="scss" @code={{snippet.source}} />
 {{/let}}
 
-<br />
+<p>
+  If you are using LESS there is also necessary to register the <code>paths</code> in <code>lessOptions</code>
+</p>
+
+{{#let (get-code-snippet "installation-2.js") as |snippet|}}
+  <CodeBlock @language="js" @code={{snippet.source}} />
+{{/let}}
 
 <p>
   The styles of the addon are

diff --git a/docs/app/templates/snippets/installation-2.js b/docs/app/templates/snippets/installation-2.js
@@ -0,0 +1,6 @@
+// ember-cli-build.js
+let app = new EmberApp({
+  lessOptions: {
+    paths: ['node_modules/ember-basic-dropdown/'],
+  },
+});
diff --git a/docs/ember-cli-build.js b/docs/ember-cli-build.js
@@ -8,7 +8,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.
     },
     prember: {
       urls: crawl,

diff --git a/ember-basic-dropdown/_index.less b/ember-basic-dropdown/_index.less
diff --git a/ember-basic-dropdown/_index.scss b/ember-basic-dropdown/_index.scss
@@ -1,2 +1,2 @@
-@import './scss/variables';
-@import './scss/base';
+@import './scss/variables.scss';
+@import './scss/base.scss';
diff --git a/ember-basic-dropdown/ember-basic-dropdown.less b/ember-basic-dropdown/ember-basic-dropdown.less
@@ -0,0 +1,2 @@
+@import './less/variables.less';
+@import './less/base.less';
diff --git a/ember-basic-dropdown/package.json b/ember-basic-dropdown/package.json
@@ -18,7 +18,7 @@
       "default": "./dist/*.js"
     },
     "./addon-main.js": "./addon-main.cjs",
-    "./_index.less": "./_index.less",
+    "./ember-basic-dropdown.less": "./ember-basic-dropdown.less",
     "./_index.scss": "./_index.scss",
     "./less/base.less": "./less/base.less",
     "./scss/base.scss": "./scss/base.scss",
@@ -35,11 +35,11 @@
   },
   "files": [
     "_index.scss",
-    "_index.less",
     "addon-main.cjs",
     "blueprints",
     "declarations",
     "dist",
+    "ember-basic-dropdown.less",
     "less",
     "scss",
     "vendor"