refactor: convert SCSS to PostCSS

This will be required in the future for something.

app/javascript/dashboard/auth.scss

@@ -1,7 +1,5 @@
-@use "sass:color";
-
 body.auth {
-  background: color.adjust(#039, $saturation: -25%);
+  background: color(#039 s(- 25%));
 
   svg {
     fill: white;

app/javascript/packs/dashboard.js

@@ -1,5 +1,5 @@
-import "bootstrap/scss/bootstrap.scss";
-import "bootstrap-icons/font/bootstrap-icons.scss";
+import "bootstrap/dist/css/bootstrap.min.css";
+import "bootstrap-icons/font/bootstrap-icons.min.css";
 import Rails from "@rails/ujs";
 Rails.start();
 

app/javascript/six/components/button.scss

@@ -1,4 +1,4 @@
-@import "../layout/responsive";
+@import "../layout/responsive.scss";
 
 :root {
   --button-background: white;

app/javascript/six/components/explorer.scss

@@ -1,4 +1,4 @@
-@import "../layout/responsive";
+@import "../layout/responsive.scss";
 
 .explorer {
   padding: 15px;

app/javascript/six/components/footer.scss

@@ -1,4 +1,4 @@
-@import "../layout/responsive";
+@import "../layout/responsive.scss";
 
 .footer {
   background-color: var(--footer-background-color);

app/javascript/six/components/forumcta.scss

@@ -1,4 +1,4 @@
-@import "../layout/responsive";
+@import "../layout/responsive.scss";
 
 .forumcta {
   border: 1px solid var(--makigas-brand-washed-out);

app/javascript/six/components/jumbo.scss

@@ -1,4 +1,4 @@
-@import "../layout/responsive";
+@import "../layout/responsive.scss";
 
 :root {
   --jumbo-background: var(--makigas-brand-darker);

app/javascript/six/components/navbar.scss

@@ -1,4 +1,4 @@
-@import "../layout/responsive";
+@import "../layout/responsive.scss";
 
 $navbar-size: 40px;
 

app/javascript/six/components/search/index.scss

@@ -1,7 +1,7 @@
-@import "../../layout/responsive";
-@import "./bar";
-@import "./box";
-@import "./empty";
-@import "./filters";
-@import "./pill";
-@import "./result";
+@import "../../layout/responsive.scss";
+@import "./bar.scss";
+@import "./box.scss";
+@import "./empty.scss";
+@import "./filters.scss";
+@import "./pill.scss";
+@import "./result.scss";

app/javascript/six/components/topicthumb.scss

@@ -1,4 +1,4 @@
-@import "../layout/responsive";
+@import "../layout/responsive.scss";
 
 .topicthumb {
   background: var(--topic-color-washed-out);

app/javascript/six/components/videoexplorer.scss

@@ -1,4 +1,4 @@
-@import "../layout/responsive";
+@import "../layout/responsive.scss";
 
 .videoexplorer {
   &__list {

app/javascript/six/components/videoinfo.scss

@@ -1,4 +1,4 @@
-@import "../layout/responsive";
+@import "../layout/responsive.scss";
 
 .videoinfo {
   &__pldata {

app/javascript/six/front.scss

@@ -1,4 +1,4 @@
-@import "layout/responsive";
-@import "front/block";
-@import "front/hero";
-@import "front/topics";
+@import "layout/responsive.scss";
+@import "front/block.scss";
+@import "front/hero.scss";
+@import "front/topics.scss";

app/javascript/six/layout/base.scss

@@ -1,4 +1,4 @@
-@import "./responsive";
+@import "./responsive.scss";
 
 body {
   min-height: 100vh;

esbuild.mjs

@@ -1,13 +1,13 @@
 import * as esbuild from "esbuild";
-import { sassPlugin } from "esbuild-sass-plugin";
+import postcss from "esbuild-postcss";
 
 const options = {
   entryPoints: ["app/javascript/packs/dashboard.js", "app/javascript/packs/six.js"],
   bundle: true,
   sourcemap: true,
   logLevel: "info",
   outdir: "app/assets/builds",
-  target: ["firefox57"],
+  target: ["es2020"],
   platform: "browser",
   loader: {
     ".png": "file",
@@ -17,7 +17,7 @@ const options = {
     ".eot": "file",
     ".ttf": "file",
   },
-  plugins: [sassPlugin()],
+  plugins: [postcss()],
 };
 
 if (process.argv.indexOf("--watch") > -1 || process.argv.indexOf("-w") > -1) {

package.json

@@ -13,20 +13,26 @@
     "bootstrap": "^5.3.0",
     "bootstrap-icons": "^1.10.5",
     "esbuild": "^0.18.12",
-    "esbuild-sass-plugin": "^2.10.0",
     "klaro": "^0.7.18",
     "normalize.css": "^8.0.1",
     "string-width": "<5.0.0",
     "youtube-player": "^5.6.0"
   },
   "devDependencies": {
     "@types/rails__ujs": "^6.0.1",
+    "esbuild-postcss": "^0.0.4",
     "eslint": "^8.44.0",
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-prettier": "^5.0.0",
+    "postcss": "^8.4.35",
+    "postcss-advanced-variables": "^3.0.1",
+    "postcss-color-function": "^4.1.0",
+    "postcss-import": "^16.0.1",
+    "postcss-nested": "^6.0.1",
+    "postcss-scss": "^4.0.9",
+    "postcss-strip-inline-comments": "^0.1.5",
     "prettier": "^3.0.0",
     "rimraf": "^5.0.1",
-    "sass": "^1.63.3",
     "string-width-cjs": "^5.1.1",
     "stylelint": "^15.10.1",
     "stylelint-config-standard-scss": "^10.0.0",

postcss.config.js

@@ -1,12 +1,10 @@
 module.exports = {
-  plugins: [
-    require('postcss-import'),
-    require('postcss-flexbugs-fixes'),
-    require('postcss-preset-env')({
-      autoprefixer: {
-        flexbox: 'no-2009'
-      },
-      stage: 3
-    })
-  ]
-}
+  syntax: "postcss-scss",
+  plugins: {
+    "postcss-nested": {},
+    "postcss-import": {},
+    "postcss-advanced-variables": {},
+    "postcss-strip-inline-comments": {},
+    "postcss-color-function": {},
+  },
+};