feat: upgrade sass architecture

- Modularized the Sass architecture to enhance code maintainability and reduce the output file size
- Replaced deprecated `@import` with `@use` / `@forward`

.github/workflows/style-lint.yml

@@ -1,25 +0,0 @@
-name: Style Lint
-
-on:
-  push:
-    branches:
-      - master
-      - "hotfix/*"
-    paths: ["_sass/**/*.scss"]
-  pull_request:
-    paths: ["_sass/**/*.scss"]
-
-jobs:
-  stylelint:
-    runs-on: ubuntu-latest
-
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-
-      - name: Setup Node
-        uses: actions/setup-node@v4
-        with:
-          node-version: lts/*
-      - run: npm i
-      - run: npm test

.gitignore

@@ -23,5 +23,5 @@ package-lock.json
 !.vscode/tasks.json
 
 # Misc
-_sass/vendor
+_sass/vendors
 assets/js/dist

.stylelintrc.json

@@ -0,0 +1,31 @@
+{
+  "ignoreFiles": ["_sass/vendors/**"],
+  "extends": "stylelint-config-standard-scss",
+  "rules": {
+    "no-descending-specificity": null,
+    "shorthand-property-no-redundant-values": null,
+    "at-rule-no-vendor-prefix": null,
+    "property-no-vendor-prefix": null,
+    "selector-no-vendor-prefix": null,
+    "value-no-vendor-prefix": null,
+    "color-function-notation": "legacy",
+    "alpha-value-notation": "number",
+    "selector-not-notation": "simple",
+    "color-hex-length": "long",
+    "declaration-block-single-line-max-declarations": 3,
+    "scss/operator-no-newline-after": null,
+    "rule-empty-line-before": [
+      "always",
+      {
+        "ignore": ["after-comment", "first-nested"]
+      }
+    ],
+    "value-keyword-case": [
+      "lower",
+      {
+        "ignoreProperties": ["/^\\$/"]
+      }
+    ],
+    "media-feature-range-notation": "prefix"
+  }
+}

_sass/main.bundle.scss

@@ -1,2 +1,2 @@
-@use 'vendor/bootstrap';
+@use 'vendors/bootstrap';
 @use 'main';

_sass/pages/_home.scss

@@ -44,7 +44,7 @@
       padding: 1rem;
 
       @include bp.md {
-        padding: 1.75rem 1.75rem 1.25rem 1.75rem;
+        padding: 1.75rem 1.75rem 1.25rem;
       }
 
       .card-title {

package.json

@@ -68,44 +68,6 @@
       ]
     }
   },
-  "stylelint": {
-    "ignoreFiles": [
-      "_sass/vendor/**"
-    ],
-    "extends": "stylelint-config-standard-scss",
-    "rules": {
-      "no-descending-specificity": null,
-      "shorthand-property-no-redundant-values": null,
-      "at-rule-no-vendor-prefix": null,
-      "property-no-vendor-prefix": null,
-      "selector-no-vendor-prefix": null,
-      "value-no-vendor-prefix": null,
-      "color-function-notation": "legacy",
-      "alpha-value-notation": "number",
-      "selector-not-notation": "simple",
-      "color-hex-length": "long",
-      "declaration-block-single-line-max-declarations": 3,
-      "scss/operator-no-newline-after": null,
-      "rule-empty-line-before": [
-        "always",
-        {
-          "ignore": [
-            "after-comment",
-            "first-nested"
-          ]
-        }
-      ],
-      "value-keyword-case": [
-        "lower",
-        {
-          "ignoreProperties": [
-            "/^\\$/"
-          ]
-        }
-      ],
-      "media-feature-range-notation": "prefix"
-    }
-  },
   "release": {
     "branches": [
       "production"

purgecss.js

@@ -1,13 +1,13 @@
 const fs = require('fs').promises;
 const { PurgeCSS } = require('purgecss');
-const DIST_PATH = '_sass/vendor';
+const DIST_PATH = '_sass/vendors';
+const output = `${DIST_PATH}/_bootstrap.scss`;
 
 const config = {
   content: ['_includes/**/*.html', '_layouts/**/*.html', '_javascript/**/*.js'],
   css: ['node_modules/bootstrap/dist/css/bootstrap.min.css'],
   keyframes: true,
   variables: true,
-  output: `${DIST_PATH}/bootstrap.css`,
   // The `safelist` should be changed appropriately for future development
   safelist: {
     standard: [/^collaps/, /^w-/, 'shadow', 'border', 'kbd'],
@@ -20,7 +20,7 @@ function main() {
     .then(() => fs.mkdir(DIST_PATH))
     .then(() => new PurgeCSS().purge(config))
     .then((result) => {
-      return fs.writeFile(`${DIST_PATH}/bootstrap.scss`, result[0].css);
+      return fs.writeFile(output, result[0].css);
     })
     .catch((err) => {
       console.error('Error during PurgeCSS process:', err);

tools/init.sh

@@ -92,7 +92,7 @@ init_files() {
   npm i && npm run build
 
   # track the CSS/JS output
-  _sedi "/^_sass\/vendor/d" .gitignore
+  _sedi "/^_sass\/vendors/d" .gitignore
   _sedi "/^assets\/js\/dist/d" .gitignore
 }
 

tools/release.sh

@@ -15,7 +15,7 @@ NODE_SPEC="package.json"
 CHANGELOG="docs/CHANGELOG.md"
 CONFIG="_config.yml"
 
-CSS_DIST="_sass/vendor"
+CSS_DIST="_sass/vendors"
 JS_DIST="assets/js/dist"
 
 FILES=(