Builds, but no working CSS yet

ChrRubin · ChrRubin · commit 99f58ad52788 · 2022-01-08T15:31:24.000+08:00
diff --git a/package.json b/package.json
@@ -18,6 +18,7 @@
   },
   "devDependencies": {
     "@fullhuman/postcss-purgecss": "^4.0.3",
+    "@sveltejs/vite-plugin-svelte": "^1.0.0-next.34",
     "@tsconfig/svelte": "^2.0.1",
     "@types/chrome": "^0.0.149",
     "@typescript-eslint/eslint-plugin": "4",
@@ -50,6 +51,8 @@
     "tailwindcss": "^2.2.7",
     "ts-loader": "^9.2.4",
     "typescript": "^4.3.5",
+    "vite": "^2.7.10",
+    "vite-plugin-web-extension": "^1.0.3",
     "webpack": "^5.47.0",
     "webpack-cli": "^4.7.2",
     "webpack-ext-reloader": "^1.1.8"
diff --git a/postcss.config.js b/postcss.config.js
@@ -1,50 +1,50 @@
-const extractor = require('smelte/src/utils/css-extractor.js');
-const tailwindConfig = require('./tailwind.config.js');
+// const extractor = require('smelte/src/utils/css-extractor.js');
+// const tailwindConfig = require('./tailwind.config.js');
 
-const safelistSelectors = [
-  'html',
-  'body',
-  'stroke-primary',
-  'mode-dark',
-  // Components with custom color prop might need its color to be whitelisted too
-  'bg-blue-500',
-  'hover:bg-blue-400'
-];
+// const safelistSelectors = [
+//   'html',
+//   'body',
+//   'stroke-primary',
+//   'mode-dark',
+//   // Components with custom color prop might need its color to be whitelisted too
+//   'bg-blue-500',
+//   'hover:bg-blue-400'
+// ];
 
-const safelistPatterns = [
-  // for JS ripple
-  /ripple/,
-  // date picker
-  /w-.\/7/,
-  // I'm guessing it doesn't correlate p-2.5 with p-2\.5
-  /^[mphw]\w?-\d\.5$/
-];
+// const safelistPatterns = [
+//   // for JS ripple
+//   /ripple/,
+//   // date picker
+//   /w-.\/7/,
+//   // I'm guessing it doesn't correlate p-2.5 with p-2\.5
+//   /^[mphw]\w?-\d\.5$/
+// ];
 
-module.exports = (minify = false) => {
-  const postcss = [];
-  return [
-    require('postcss-import')(),
-    require('postcss-url')(),
-    require('postcss-input-range')(),
-    require('autoprefixer')(),
-    require('tailwindcss')(tailwindConfig),
-    ...postcss,
-    minify && require('cssnano')({
-      preset: 'default'
-    }),
-    // Always tree shake CSS even in development mode for ~99% size reduction
-    require('@fullhuman/postcss-purgecss')({
-      content: ['./**/*.svelte'],
-      extractors: [
-        {
-          extractor,
-          extensions: ['svelte']
-        }
-      ],
-      safelist: {
-        standard: safelistSelectors,
-        deep: safelistPatterns
-      }
-    })
-  ].filter(Boolean);
-};
+// module.exports = (minify = false) => {
+//   const postcss = [];
+//   return [
+//     require('postcss-import')(),
+//     require('postcss-url')(),
+//     require('postcss-input-range')(),
+//     require('autoprefixer')(),
+//     require('tailwindcss')(tailwindConfig),
+//     ...postcss,
+//     minify && require('cssnano')({
+//       preset: 'default'
+//     }),
+//     // Always tree shake CSS even in development mode for ~99% size reduction
+//     require('@fullhuman/postcss-purgecss')({
+//       content: ['./**/*.svelte'],
+//       extractors: [
+//         {
+//           extractor,
+//           extensions: ['svelte']
+//         }
+//       ],
+//       safelist: {
+//         standard: safelistSelectors,
+//         deep: safelistPatterns
+//       }
+//     })
+//   ].filter(Boolean);
+// };
diff --git a/src/assets/logo-128.png b/src/assets/logo-128.png
diff --git a/src/assets/logo-48.png b/src/assets/logo-48.png
diff --git a/src/assets/logo.png b/src/assets/logo.png
diff --git a/src/changelog.js b/src/changelog.js
@@ -1,4 +1,4 @@
-exports.updates = [
+export const updates = [
   {
     version: 'v1.0.x',
     comments: 'First release of HyperChat!'
diff --git a/src/hyperchat.html b/src/hyperchat.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons&display=swap" rel="stylesheet">
+  <script defer="defer" type="module" src="/hyperchat.ts"></script>
+</head>
+
+<body>
+</body>
+
+</html>
diff --git a/src/hyperchat.ts b/src/hyperchat.ts
@@ -1,5 +1,6 @@
 import Hyperchat from './components/Hyperchat.svelte';
-import 'smelte/src/tailwind.css';
+// TODO: CSS
+// import 'smelte/src/tailwind.css';
 
 const hyperchat = new Hyperchat({
   target: document.body
diff --git a/src/manifest.json b/src/manifest.json
@@ -17,14 +17,14 @@
         "https://www.youtube.com/live_chat_replay*"
       ],
       "js": [
-        "chat-interceptor.bundle.js",
-        "chat-injector.bundle.js"
+        "ts/chat-interceptor.ts",
+        "ts/chat-injector.ts"
       ],
       "all_frames": true
     }
   ],
   "background": {
-    "scripts": ["chat-background.bundle.js"],
+    "scripts": ["ts/chat-background.ts"],
     "persistent": true
   },
   "browser_action": {
diff --git a/svelte.config.js b/svelte.config.js
@@ -1,12 +1,5 @@
 const sveltePreprocess = require('svelte-preprocess');
-const postcssPlugins = require('./postcss.config.js');
 
 module.exports = {
-  preprocess: sveltePreprocess({
-    transformers: {
-      postcss: {
-        plugins: postcssPlugins()
-      }
-    }
-  })
+  preprocess: sveltePreprocess()
 };
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -1,40 +1,40 @@
-const smelteTailwind = require('smelte/tailwind.config.js');
+// const smelteTailwind = require('smelte/tailwind.config.js');
 
-const colors = {
-  primary: '#2196F3',
-  secondary: '#3f51b5',
-  error: '#f44336',
-  success: '#4caf50',
-  alert: '#ff9800',
-  blue: '#2196f3',
-  dark: '#212121'
-};
+// const colors = {
+//   primary: '#2196F3',
+//   secondary: '#3f51b5',
+//   error: '#f44336',
+//   success: '#4caf50',
+//   alert: '#ff9800',
+//   blue: '#2196f3',
+//   dark: '#212121'
+// };
 
-const smelteConfig = {
-  colors,
-  darkMode: true,
-  theme: {
-    extend: {
-      colors: {
-        member: {
-          light: '#0E5D10',
-          dark: '#04B301'
-        },
-        moderator: {
-          light: '#2441C0',
-          dark: '#A0BDFC'
-        },
-        owner: {
-          light: '#866518',
-          dark: '#FFD600'
-        },
-        deleted: {
-          light: '#6E6B6B',
-          dark: '#898888'
-        }
-      }
-    }
-  }
-};
+// const smelteConfig = {
+//   colors,
+//   darkMode: true,
+//   theme: {
+//     extend: {
+//       colors: {
+//         member: {
+//           light: '#0E5D10',
+//           dark: '#04B301'
+//         },
+//         moderator: {
+//           light: '#2441C0',
+//           dark: '#A0BDFC'
+//         },
+//         owner: {
+//           light: '#866518',
+//           dark: '#FFD600'
+//         },
+//         deleted: {
+//           light: '#6E6B6B',
+//           dark: '#898888'
+//         }
+//       }
+//     }
+//   }
+// };
 
-module.exports = smelteTailwind(smelteConfig);
+// module.exports = smelteTailwind(smelteConfig);
diff --git a/tsconfig.json b/tsconfig.json
@@ -10,19 +10,17 @@
     "lib": [
       "DOM"
     ],
-    "target": "ES6",
-    "resolveJsonModule": true,
-    "typeRoots": [
-      "./node_modules/@types"
-    ]
+    "target": "ES2017",
+    "resolveJsonModule": true
   },
   "include": [
     "src/**/*",
     "*.js",
-    "utils/**/*"
+    "utils/**/*",
+    "vite.config.js"
   ],
   "exclude": [
     "node_modules",
     "build"
   ]
-}
+}
diff --git a/vite.config.js b/vite.config.js
@@ -0,0 +1,28 @@
+import { defineConfig } from 'vite';
+import { svelte } from '@sveltejs/vite-plugin-svelte';
+import browserExtension from 'vite-plugin-web-extension';
+import path from 'path';
+
+export default defineConfig({
+  root: 'src',
+  build: {
+    outDir: path.resolve(__dirname, 'dist'),
+    emptyOutDir: true
+  },
+  plugins: [
+    browserExtension({
+      manifest: path.resolve(__dirname, 'src/manifest.json'),
+      assets: 'assets',
+      watchFilePaths: [
+        path.resolve(__dirname, 'src/manifest.json')
+      ],
+      additionalInputs: [
+        'hyperchat.html'
+      ]
+
+    }),
+    svelte({
+      configFile: path.resolve(__dirname, 'svelte.config.js')
+    })
+  ]
+});
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-exports.updates = [`
	`1`	`+export const updates = [`
`2`	`2`	`{`
`3`	`3`	`version: 'v1.0.x',`
`4`	`4`	`comments: 'First release of HyperChat!'`