Skip to content

Commit 186d21a

Browse files
ghiscodingghiscoding
authored
feat: support @use by replacing @import to fix SASS deprecations (#308)
1 parent f5bba00 commit 186d21a

File tree

9 files changed

+217
-161
lines changed

9 files changed

+217
-161
lines changed

‎packages/demo/src/examples/example11.scss‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,12 @@
1-
@import 'multiple-select-vanilla/dist/styles/sass/themes/bootstrap.scss';
1+
// 1- with legacy @import
2+
// $ms-primary-color: red;
3+
// $ms-checkbox-color: red;
4+
// $ms-parent-form-control-padding: 5px;
5+
// @import 'multiple-select-vanilla/dist/styles/sass/themes/bootstrap.scss';
6+
7+
// 2- or with modern @use
8+
// @use 'multiple-select-vanilla/dist/styles/sass/themes/bootstrap.scss' with (
9+
// $ms-parent-form-control-padding: 5px,
10+
// $ms-primary-color: orange,
11+
// $ms-checkbox-color: orange,
12+
// );

‎packages/demo/src/getting-started.html‎

Lines changed: 40 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -29,13 +29,13 @@ <h5>CDN</h5>
2929
<div style="background: #f7f7f7; padding: 10px">
3030
<pre>
3131
&lt;!-- Latest compiled and minified CSS --&gt;
32-
&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;
32+
&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;
3333

3434
&lt;!-- (ESM requires <span style="color:#d63384">type=&quot;module&quot;</span>) Latest compiled and minified JavaScript --&gt;
35-
&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;
35+
&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;
3636

3737
&lt;!-- (CJS requires <span style="color:#d63384">.cjs</span> extension) Latest compiled and minified JavaScript --&gt;
38-
&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>
38+
&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>
3939
</div>
4040

4141
<quote>
@@ -59,26 +59,49 @@ <h5>CommonJS <code>require()</code> / ESM <code>import from</code></h5>
5959
<div style="background: #f7f7f7; padding: 10px">
6060
<pre>
6161
// CommonJS
62-
const { multipleSelect } = require('multiple-select-vanilla');
63-
multipleSelect('.multiple-select', {/*...*/});
62+
<span style="color:#cf222e">const</span> { multipleSelect } = <span style="color:#6639ba">require</span>(<span style="color:#0a3069">'multiple-select-vanilla'</span>);
63+
<span style="color:#6639ba">multipleSelect</span>(<span style="color:#0a3069">'.multiple-select'</span>, {<span style="color:#a0a1a7">/*...*/</span>});
6464

6565
// ESM
66-
import { multipleSelect } from 'multiple-select-vanilla';
67-
multipleSelect('.multiple-select', {/*...*/});
66+
<span style="color:#cf222e">import</span> { multipleSelect } <span style="color:#cf222e">from</span> <span style="color:#0a3069">'multiple-select-vanilla'</span>;
67+
<span style="color:#6639ba">multipleSelect</span>(<span style="color:#0a3069">'.multiple-select'</span>, {<span style="color:#a0a1a7">/*...*/</span>});
6868
</pre>
6969
</div>
70+
71+
<br>
7072

7173
<section>
72-
<h5>Code Sample</h5>
73-
<div class="col-sm-10 col-lg-8">
74-
<iframe
75-
style="height: 100%; width: 60%; position: absolute"
76-
src="data:text/html;charset=utf-8,
77-
<head><base target='_blank' /></head>
78-
<body><script src='https://gist.github.com/ghiscoding/786008e40a13d64a1cf813aff8a3d8dc.js'></script>
79-
</body>"
80-
>
81-
</iframe>
74+
<h5>CSS / SASS Styling Themes</h5>
75+
<p>Load default or Bootstrap Theme style via either the <code>@use</code> (modern) or <code>@import</code> (legacy)</p>
76+
77+
1- with modern <code>@use</code> approach
78+
<div style="background: #f7f7f7; padding: 10px">
79+
<pre>
80+
<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> (
81+
<span style="color:#986801">$ms-primary-color</span>: red,
82+
<span style="color:#986801">$ms-checkbox-color</span>: red,
83+
);
84+
</pre>
85+
</div>
86+
87+
2- with legacy <code>@import</code> approach
88+
<div style="background: #f7f7f7; padding: 10px">
89+
<pre>
90+
<span style="color:#986801">$ms-primary-color</span>: red;
91+
<span style="color:#986801">$ms-checkbox-color</span>: red;
92+
<span style="color:#cf222e">@import</span> <span style="color:#0a3069">'multiple-select-vanilla/dist/styles/sass/multiple-select.scss'</span>;
93+
</pre>
94+
</div>
95+
96+
3- same goes for the Bootstrap Theme
97+
<div style="background: #f7f7f7; padding: 10px">
98+
<pre>
99+
<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> (
100+
<span style="color:#986801">$ms-parent-form-control-padding</span>: 5px,
101+
<span style="color:#986801">$ms-primary-color</span>: orange,
102+
<span style="color:#986801">$ms-checkbox-color</span>: orange,
103+
);
104+
</pre>
82105
</div>
83106
</section>
84107
</div>

‎packages/demo/src/options/options33.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import { type MultipleSelectInstance, multipleSelect } from 'multiple-select-vanilla';
2-
import 'multiple-select-vanilla/dist/styles/sass/themes/bootstrap.scss';
32

43
export default class Example {
54
ms: MultipleSelectInstance[] = [];

‎packages/demo/src/style.scss‎

Lines changed: 20 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,25 @@
11
@use 'sass:math';
22

3-
// $body-color: #ccc;
4-
$primary: teal;
5-
$btn-color: #fff;
6-
7-
@import 'bootstrap';
8-
@import 'multiple-select-vanilla/dist/styles/css/multiple-select.css';
3+
@use 'bootstrap' with (
4+
$primary: teal,
5+
$btn-color: #fff,
6+
);
7+
8+
// -- multiple ways to load CSS/SASS files via either @import (legacy) or @use (modern)
9+
// --
10+
// @import 'multiple-select-vanilla/dist/styles/css/multiple-select.css';
11+
// @use 'multiple-select-vanilla/dist/styles/css/multiple-select.css';
12+
@use 'multiple-select-vanilla/dist/styles/css/themes/bootstrap.css' as ms;
13+
// @use 'multiple-select-vanilla/dist/styles/sass/multiple-select.scss';
14+
// @use 'multiple-select-vanilla/dist/styles/sass/multiple-select.scss' with (
15+
// $ms-primary-color: red,
16+
// $ms-checkbox-color: red,
17+
// );
18+
// @use 'multiple-select-vanilla/dist/styles/sass/themes/bootstrap.scss' as mb with (
19+
// $ms-parent-form-control-padding: 5px,
20+
// $ms-primary-color: orange,
21+
// $ms-checkbox-color: orange,
22+
// );
923

1024
$navbar-height: 60px;
1125
$side-menu-width: 250px;

‎packages/multiple-select-vanilla/build-watch.mjs‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,11 @@ async function runCompilation(changedFiles) {
7777
}
7878
if (filename.startsWith('_')) {
7979
// when _variables changes, let's rebuild all SASS files instead of just one
80-
execSync('pnpm run sass:build');
80+
try {
81+
execSync('pnpm run sass:build');
82+
} catch (e) {
83+
console.error(`SASS error: ${e}`);
84+
}
8185
} else {
8286
const basePath = path.join(process.cwd(), '/src/styles');
8387
const absoluteFilePath = path.relative(basePath, changedFile);

‎packages/multiple-select-vanilla/src/styles/_variables.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
@use 'sass:color';
2-
31
/*
42
* Multiple-Select-Vanilla SASS variables.
53
* You can also CSS variables by simply replacing `$ms-` prefix with `--ms-`
64
*/
75

6+
@use 'sass:color';
7+
88
// this is the only variable without $ms prefix and exists so that user could use
99
// the same Bootstrap primary color without declaring $ms-primary-color variable (which also exists)
1010
$primary-color: #149085 !default;

0 commit comments

Comments
 (0)