rogden · bkjohnson · Jan 21, 2024 · Jan 21, 2024 · Jan 21, 2024 · Jan 21, 2024
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -1,7 +1,8 @@
 module.exports = {
   root: true,
   env: {
-    node: true
+    node: true,
+    es2022: true,
   },
   'extends': [
     'plugin:vue/essential',
@@ -11,7 +12,4 @@ module.exports = {
     'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
   },
-  parserOptions: {
-    parser: 'babel-eslint'
-  }
 }
diff --git a/babel.config.js b/babel.config.js
diff --git a/cli/export.js b/cli/export.js
diff --git a/cli/index.js b/cli/index.js
@@ -1,6 +1,9 @@
 #!/usr/bin/env node
 const { resolveConfigPath } = require('../lib/tailwindConfigUtils')
 const program = require('commander')
+const { createServer, build } = require('vite')
+const { resolve } = require('path')
+
 program
   .option('-c, --config <path>', 'Path to your Tailwind config file', './tailwind.config.js')
 
@@ -9,23 +12,36 @@ program
   .description('Serve the viewer')
   .option('-p, --port <port>', 'Port to run the viewer on', 3000)
   .option('-o, --open', 'Open the viewer in default browser')
-  .action(args => {
-    require('../server')({
-      port: args.port,
-      tailwindConfigProvider: () => {
-        const configPath = resolveConfigPath(program.config)
-        delete require.cache[configPath]
-        return require(configPath)
-      },
-      shouldOpen: args.open
-    }).start()
+  .action(async args => {
+    process.env = { ...process.env, VITE_TCV_CONFIG: program.config };
+
+    const server = await createServer({
+      root: resolve(__dirname, '../'),
+      configFile: resolve(__dirname, '../vite.config.js'),
+      server: {
+        publicDir: resolve(__dirname, '../'),
+        port: args.port,
+        open: args.open
+      }
+    })
+
+    await server.listen()
+    server.printUrls()
   })
 
 program
   .command('export [outputDir]')
   .description('Create a static export of the viewer')
-  .action((outputDir = './tcv-build') => {
-    require('./export')(outputDir, resolveConfigPath(program.config))
+  .action(async (outputDir = './tcv-build') => {
+    process.env = { ...process.env, VITE_TCV_CONFIG: program.config };
+
+    await build({
+      root: resolve(__dirname, '../'),
+      configFile: resolve(__dirname, '../vite.config.js'),
+      build: {
+        outDir: resolve(outputDir)
+      }
+    })
   })
 
 program.parse(process.argv)
diff --git a/docs/assets/index-TREAqDGA.css b/docs/assets/index-TREAqDGA.css
diff --git a/docs/assets/index-equpejj-.js b/docs/assets/index-equpejj-.js
diff --git a/docs/config.6ce3d239.json b/docs/config.6ce3d239.json
diff --git a/docs/css/app.a4ea028b.css b/docs/css/app.a4ea028b.css
diff --git a/docs/index.html b/docs/index.html
@@ -1,3 +1,27 @@
-<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><link rel=icon href=favicon.ico><title>tailwind-config-viewer</title><script>window.__TCV_CONFIG = {
-      configPath: './config.6ce3d239.json'
-    }</script><link href=css/app.a4ea028b.css rel=preload as=style><link href=js/app.dc5ecb43.js rel=preload as=script><link href=js/chunk-vendors.6cab5322.js rel=preload as=script><link href=css/app.a4ea028b.css rel=stylesheet></head><body><noscript><strong>We're sorry but tailwind-config-viewer doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=js/chunk-vendors.6cab5322.js></script><script src=js/app.dc5ecb43.js></script></body></html>
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width,initial-scale=1.0">
+  <link rel="icon" href="/favicon.ico">
+  <title>tailwind-config-viewer</title>
+  <script>
+    window.__TCV_CONFIG = {
+      configPath: './config.json'
+    }
+  </script>
+  <script type="module" crossorigin src="/assets/index-equpejj-.js"></script>
+  <link rel="stylesheet" crossorigin href="/assets/index-TREAqDGA.css">
+</head>
+
+<body>
+  <noscript>
+    <strong>We're sorry but tailwind-config-viewer doesn't work properly without JavaScript enabled. Please enable it to
+      continue.</strong>
+  </noscript>
+  <div id="app"></div>
+</body>
+
+</html>
diff --git a/docs/js/app.dc5ecb43.js b/docs/js/app.dc5ecb43.js
diff --git a/docs/js/app.dc5ecb43.js.map b/docs/js/app.dc5ecb43.js.map
diff --git a/docs/js/chunk-vendors.6cab5322.js b/docs/js/chunk-vendors.6cab5322.js
diff --git a/docs/js/chunk-vendors.6cab5322.js.map b/docs/js/chunk-vendors.6cab5322.js.map
diff --git a/public/index.html → index.html b/public/index.html → index.html
@@ -5,13 +5,8 @@
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width,initial-scale=1.0">
-  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+  <link rel="icon" href="/favicon.ico">
   <title>tailwind-config-viewer</title>
-  <script>
-    window.__TCV_CONFIG = {
-      configPath: './config.json'
-    }
-  </script>
 </head>
 
 <body>
@@ -20,7 +15,7 @@
       continue.</strong>
   </noscript>
   <div id="app"></div>
-  <!-- built files will be auto injected -->
+  <script type="module" src="/src/main.js"></script>
 </body>
 
 </html>
diff --git a/lib/tailwindConfigUtils.js b/lib/tailwindConfigUtils.js
@@ -17,11 +17,6 @@ const resolveConfig = config => {
   return transformConfig(resolveTailwindConfig(config))
 }
 
-const resolveConfigToJson = configPath => {
-  const tailwindConfig = require(configPath)
-  return JSON.stringify(resolveConfig(tailwindConfig))
-}
-
 const transformConfig = config => {
   config.tailwindVersion = tailwindVersion
   config.theme = replaceWithOverrides(config.theme)
@@ -82,6 +77,4 @@ const removeDisabledCorePlugins = (config) => {
 module.exports = {
   resolveConfig,
   resolveConfigPath,
-  resolveConfigToJson,
-  transformConfig
 }