feat: support @use by replacing @import to fix SASS deprecations (#…

…308)
ghiscoding · Oct 23, 2024 · 186d21a · 186d21a
1 parent f5bba00
commit 186d21a
Show file tree

Hide file tree

Showing 9 changed files with 217 additions and 161 deletions.
diff --git a/packages/demo/src/examples/example11.scss b/packages/demo/src/examples/example11.scss
@@ -1 +1,12 @@
-@import 'multiple-select-vanilla/dist/styles/sass/themes/bootstrap.scss';
+// 1- with legacy @import
+// $ms-primary-color: red;
+// $ms-checkbox-color: red;
+// $ms-parent-form-control-padding: 5px;
+// @import 'multiple-select-vanilla/dist/styles/sass/themes/bootstrap.scss';
+
+// 2- or with modern @use
+// @use 'multiple-select-vanilla/dist/styles/sass/themes/bootstrap.scss' with (
+//     $ms-parent-form-control-padding: 5px,
+//     $ms-primary-color: orange,
+//     $ms-checkbox-color: orange,
+// );
diff --git a/packages/demo/src/getting-started.html b/packages/demo/src/getting-started.html
@@ -29,13 +29,13 @@ <h5>CDN</h5>
     <div style="background: #f7f7f7; padding: 10px">
       <pre>
 &lt;!-- Latest compiled and minified CSS --&gt;
-&lt;link href=&quot;<span style="color:#880000">https://cdn.jsdelivr.net/npm/[email protected]/dist/styles/css/multiple-select.css</span>&quot; rel=&quot;<span style="color:#880000">stylesheet</span>&quot;&gt;
+&lt;link href=&quot;<span style="color:#0a3069">https://cdn.jsdelivr.net/npm/[email protected]/dist/styles/css/multiple-select.css</span>&quot; rel=&quot;<span style="color:#0a3069">stylesheet</span>&quot;&gt;
 
 &lt;!-- (ESM requires <span style="color:#d63384">type=&quot;module&quot;</span>) Latest compiled and minified JavaScript --&gt;
-&lt;script type=&quot;module&quot; src=&quot;<span style="color:#880000">https://cdn.jsdelivr.net/npm/[email protected]/dist/browser/multiple-select.js</span>&quot;&gt;&lt;/script&gt;
+&lt;script type=&quot;module&quot; src=&quot;<span style="color:#0a3069">https://cdn.jsdelivr.net/npm/[email protected]/dist/browser/multiple-select.js</span>&quot;&gt;&lt;/script&gt;
 
 &lt;!-- (CJS requires <span style="color:#d63384">.cjs</span> extension) Latest compiled and minified JavaScript --&gt;
-&lt;script src=&quot;<span style="color:#880000">https://cdn.jsdelivr.net/npm/[email protected]/dist/browser/multiple-select.cjs</span>&quot;&gt;&lt;/script&gt;</pre>
+&lt;script src=&quot;<span style="color:#0a3069">https://cdn.jsdelivr.net/npm/[email protected]/dist/browser/multiple-select.cjs</span>&quot;&gt;&lt;/script&gt;</pre>
     </div>
 
     <quote>
@@ -59,26 +59,49 @@ <h5>CommonJS <code>require()</code> / ESM <code>import from</code></h5>
     <div style="background: #f7f7f7; padding: 10px">
 <pre>
 // CommonJS
-const { multipleSelect } = require('multiple-select-vanilla');
-multipleSelect('.multiple-select', {/*...*/});
+<span style="color:#cf222e">const</span> { multipleSelect } = <span style="color:#6639ba">require</span>(<span style="color:#0a3069">'multiple-select-vanilla'</span>);
+<span style="color:#6639ba">multipleSelect</span>(<span style="color:#0a3069">'.multiple-select'</span>, {<span style="color:#a0a1a7">/*...*/</span>});
 
 // ESM
-import { multipleSelect } from 'multiple-select-vanilla';
-multipleSelect('.multiple-select', {/*...*/});
+<span style="color:#cf222e">import</span> { multipleSelect } <span style="color:#cf222e">from</span> <span style="color:#0a3069">'multiple-select-vanilla'</span>;
+<span style="color:#6639ba">multipleSelect</span>(<span style="color:#0a3069">'.multiple-select'</span>, {<span style="color:#a0a1a7">/*...*/</span>});
 </pre>
     </div>
+
+  <br>
 
   <section>
-    <h5>Code Sample</h5>
-    <div class="col-sm-10 col-lg-8">
-      <iframe
-        style="height: 100%; width: 60%; position: absolute"
-        src="data:text/html;charset=utf-8,
-        <head><base target='_blank' /></head>
-        <body><script src='https://gist.github.com/ghiscoding/786008e40a13d64a1cf813aff8a3d8dc.js'></script>
-        </body>"
-      >
-      </iframe>
+    <h5>CSS / SASS Styling Themes</h5>
+    <p>Load default or Bootstrap Theme style via either the <code>@use</code> (modern) or <code>@import</code> (legacy)</p>
+
+    1- with modern <code>@use</code> approach
+    <div style="background: #f7f7f7; padding: 10px">
+<pre>
+  <span style="color:#cf222e">@use</span> <span style="color:#0a3069">'multiple-select-vanilla/dist/styles/sass/multiple-select.scss'</span> <span style="color:#cf222e">with</span> (
+    <span style="color:#986801">$ms-primary-color</span>: red,
+    <span style="color:#986801">$ms-checkbox-color</span>: red,
+  );
+</pre>
+    </div>
+
+    2- with legacy <code>@import</code> approach
+    <div style="background: #f7f7f7; padding: 10px">
+<pre>
+  <span style="color:#986801">$ms-primary-color</span>: red;
+  <span style="color:#986801">$ms-checkbox-color</span>: red;
+  <span style="color:#cf222e">@import</span> <span style="color:#0a3069">'multiple-select-vanilla/dist/styles/sass/multiple-select.scss'</span>;
+</pre>
+    </div>
+
+    3- same goes for the Bootstrap Theme
+    <div style="background: #f7f7f7; padding: 10px">
+<pre>
+  <span style="color:#cf222e">@use</span> <span style="color:#0a3069">'multiple-select-vanilla/dist/styles/sass/themes/bootstrap.scss'</span> <span style="color:#cf222e">with</span> (
+    <span style="color:#986801">$ms-parent-form-control-padding</span>: 5px,
+    <span style="color:#986801">$ms-primary-color</span>: orange,
+    <span style="color:#986801">$ms-checkbox-color</span>: orange,
+  );
+</pre>
     </div>
   </section>
 </div>
diff --git a/packages/demo/src/options/options33.ts b/packages/demo/src/options/options33.ts
@@ -1,5 +1,4 @@
 import { type MultipleSelectInstance, multipleSelect } from 'multiple-select-vanilla';
-import 'multiple-select-vanilla/dist/styles/sass/themes/bootstrap.scss';
 
 export default class Example {
   ms: MultipleSelectInstance[] = [];

diff --git a/packages/demo/src/style.scss b/packages/demo/src/style.scss
@@ -1,11 +1,25 @@
 @use 'sass:math';
 
-// $body-color: #ccc;
-$primary: teal;
-$btn-color: #fff;
-
-@import 'bootstrap';
-@import 'multiple-select-vanilla/dist/styles/css/multiple-select.css';
+@use 'bootstrap' with (
+  $primary: teal,
+  $btn-color: #fff,
+);
+
+// -- multiple ways to load CSS/SASS files via either @import (legacy) or @use (modern) 
+// --
+// @import 'multiple-select-vanilla/dist/styles/css/multiple-select.css';
+// @use 'multiple-select-vanilla/dist/styles/css/multiple-select.css';
+@use 'multiple-select-vanilla/dist/styles/css/themes/bootstrap.css' as ms;
+// @use 'multiple-select-vanilla/dist/styles/sass/multiple-select.scss';
+// @use 'multiple-select-vanilla/dist/styles/sass/multiple-select.scss' with (
+//     $ms-primary-color: red,
+//     $ms-checkbox-color: red,
+// );
+// @use 'multiple-select-vanilla/dist/styles/sass/themes/bootstrap.scss' as mb with (
+//     $ms-parent-form-control-padding: 5px,
+//     $ms-primary-color: orange,
+//     $ms-checkbox-color: orange,
+// );
 
 $navbar-height: 60px;
 $side-menu-width: 250px;

diff --git a/packages/multiple-select-vanilla/build-watch.mjs b/packages/multiple-select-vanilla/build-watch.mjs
@@ -77,7 +77,11 @@ async function runCompilation(changedFiles) {
       }
       if (filename.startsWith('_')) {
         // when _variables changes, let's rebuild all SASS files instead of just one
-        execSync('pnpm run sass:build');
+        try {
+          execSync('pnpm run sass:build');
+        } catch (e) {
+          console.error(`SASS error: ${e}`);
+        }
       } else {
         const basePath = path.join(process.cwd(), '/src/styles');
         const absoluteFilePath = path.relative(basePath, changedFile);

diff --git a/packages/multiple-select-vanilla/src/styles/_variables.scss b/packages/multiple-select-vanilla/src/styles/_variables.scss
@@ -1,10 +1,10 @@
-@use 'sass:color';
-
 /*
  * Multiple-Select-Vanilla SASS variables.
  * You can also CSS variables by simply replacing `$ms-` prefix with `--ms-`
  */
 
+@use 'sass:color';
+
 // this is the only variable without $ms prefix and exists so that user could use 
 // the same Bootstrap primary color without declaring $ms-primary-color variable (which also exists)
 $primary-color: #149085 !default;