Merge pull request #31 from mailcarrierapp/feat/vite

Replace mix with vite

Author: danilopolani

bun.lockb

@@ -1,11 +1,7 @@
 {
-  "private": true,
+  "type": "module",
   "scripts": {
-    "dev": "mix watch",
-    "watch": "mix watch",
-    "watch-poll": "mix watch -- --watch-options-poll=3000",
-    "hot": "mix watch --hot",
-    "build": "mix --production"
+    "build": "vite build"
   },
   "devDependencies": {
     "@codemirror/lang-html": "^6.4.8",
@@ -15,13 +11,14 @@
     "autoprefixer": "^10.4.17",
     "codemirror": "^6.0.1",
     "highlight.js": "^11.9.0",
-    "laravel-mix": "^6.0.6",
+    "laravel-vite-plugin": "^1.0.2",
     "postcss": "^8.4.33",
     "postcss-nesting": "^12.0.2",
     "resolve-url-loader": "^5.0.0",
-    "sass": "^1.70.0",
     "sass-loader": "^12.1.0",
     "tailwindcss": "^3.4.1",
-    "thememirror": "^2.0.1"
+    "thememirror": "^2.0.1",
+    "vite": "^5.2.9",
+    "vite-plugin-static-copy": "^1.0.2"
   }
 }

package.json

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

postcss.config.js

@@ -0,0 +1,38 @@
+.hljs.theme-dark {
+    color: #abb2bf;
+    background: #282c34;
+}
+.hljs.theme-dark .hljs-comment, .hljs.theme-dark .hljs-quote {
+    color: #5c6370;
+    font-style: italic;
+}
+.hljs.theme-dark .hljs-doctag, .hljs.theme-dark .hljs-keyword, .hljs.theme-dark .hljs-formula {
+    color: #c678dd;
+}
+.hljs.theme-dark .hljs-section, .hljs.theme-dark .hljs-name, .hljs.theme-dark .hljs-selector-tag, .hljs.theme-dark .hljs-deletion, .hljs.theme-dark .hljs-subst {
+    color: #e06c75;
+}
+.hljs.theme-dark .hljs-literal {
+    color: #56b6c2;
+}
+.hljs.theme-dark .hljs-string, .hljs.theme-dark .hljs-regexp, .hljs.theme-dark .hljs-addition, .hljs.theme-dark .hljs-attribute, .hljs.theme-dark .hljs-meta .hljs-string {
+    color: #98c379;
+}
+.hljs.theme-dark .hljs-attr, .hljs.theme-dark .hljs-variable, .hljs.theme-dark .hljs-template-variable, .hljs.theme-dark .hljs-type, .hljs.theme-dark .hljs-selector-class, .hljs.theme-dark .hljs-selector-attr, .hljs.theme-dark .hljs-selector-pseudo, .hljs.theme-dark .hljs-number {
+    color: #d19a66;
+}
+.hljs.theme-dark .hljs-symbol, .hljs.theme-dark .hljs-bullet, .hljs.theme-dark .hljs-link, .hljs.theme-dark .hljs-meta, .hljs.theme-dark .hljs-selector-id, .hljs.theme-dark .hljs-title {
+    color: #61aeee;
+}
+.hljs.theme-dark .hljs-built_in, .hljs.theme-dark .hljs-title.class_, .hljs.theme-dark .hljs-class .hljs-title {
+    color: #e6c07b;
+}
+.hljs.theme-dark .hljs-emphasis {
+    font-style: italic;
+}
+.hljs.theme-dark .hljs-strong {
+    font-weight: bold;
+}
+.hljs.theme-dark .hljs-link {
+    text-decoration: underline;
+}

resources/css/highlight.scss

@@ -0,0 +1,38 @@
+.hljs.theme-light {
+    color: #383a42;
+    background: #fafafa;
+}
+.hljs.theme-light .hljs-comment, .hljs.theme-light .hljs-quote {
+    color: #a0a1a7;
+    font-style: italic;
+}
+.hljs.theme-light .hljs-doctag, .hljs.theme-light .hljs-keyword, .hljs.theme-light .hljs-formula {
+    color: #a626a4;
+}
+.hljs.theme-light .hljs-section, .hljs.theme-light .hljs-name, .hljs.theme-light .hljs-selector-tag, .hljs.theme-light .hljs-deletion, .hljs.theme-light .hljs-subst {
+    color: #e45649;
+}
+.hljs.theme-light .hljs-literal {
+    color: #0184bb;
+}
+.hljs.theme-light .hljs-string, .hljs.theme-light .hljs-regexp, .hljs.theme-light .hljs-addition, .hljs.theme-light .hljs-attribute, .hljs.theme-light .hljs-meta .hljs-string {
+    color: #50a14f;
+}
+.hljs.theme-light .hljs-attr, .hljs.theme-light .hljs-variable, .hljs.theme-light .hljs-template-variable, .hljs.theme-light .hljs-type, .hljs.theme-light .hljs-selector-class, .hljs.theme-light .hljs-selector-attr, .hljs.theme-light .hljs-selector-pseudo, .hljs.theme-light .hljs-number {
+    color: #986801;
+}
+.hljs.theme-light .hljs-symbol, .hljs.theme-light .hljs-bullet, .hljs.theme-light .hljs-link, .hljs.theme-light .hljs-meta, .hljs.theme-light .hljs-selector-id, .hljs.theme-light .hljs-title {
+    color: #4078f2;
+}
+.hljs.theme-light .hljs-built_in, .hljs.theme-light .hljs-title.class_, .hljs.theme-light .hljs-class .hljs-title {
+    color: #c18401;
+}
+.hljs.theme-light .hljs-emphasis {
+    font-style: italic;
+}
+.hljs.theme-light .hljs-strong {
+    font-weight: bold;
+}
+.hljs.theme-light .hljs-link {
+    text-decoration: underline;
+}

resources/css/hljs-dark.css

@@ -1,5 +1,6 @@
 @import "../../vendor/filament/filament/resources/css/theme.css";
-
+@import "./hljs-dark.css";
+@import "./hljs-light.css";
 @config '../../tailwind.config.js';
 
 .button-send-test svg {