demos: move to module only

demos/package.json

@@ -2,6 +2,7 @@
   "name": "tiptap-demos",
   "version": "0.0.0",
   "private": true,
+  "type": "module",
   "scripts": {
     "start": "vite --host",
     "build": "yarn ts && vite build",
@@ -22,7 +23,7 @@
     "@vitejs/plugin-react-refresh": "^1.3.6",
     "@vitejs/plugin-vue": "^1.9.0",
     "autoprefixer": "^10.3.5",
-    "globby": "^11.0.4",
+    "globby": "^12.0.2",
     "iframe-resizer": "^4.3.2",
     "postcss": "^8.3.7",
     "react": "^17.0.2",

demos/postcss.config.js

@@ -1,6 +1,10 @@
-module.exports = {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
+import tailwind from 'tailwindcss'
+import autoprefixer from 'autoprefixer'
+import tailwindConfig from './tailwind.config.js'
+
+export default {
+  plugins: [
+    tailwind(tailwindConfig),
+    autoprefixer,
+  ],
 }

demos/tailwind.config.js

@@ -1,6 +1,6 @@
-const defaultTheme = require('tailwindcss/defaultTheme')
+import defaultTheme from 'tailwindcss/defaultTheme.js'
 
-module.exports = {
+export default {
   mode: 'jit',
   purge: [
     './preview/**/*.{vue,js,ts,jsx,tsx}',

demos/vite.config.ts

@@ -6,10 +6,11 @@ import {
 } from 'path'
 import { v4 as uuid } from 'uuid'
 import fs from 'fs'
-import globby from 'globby'
+import { globbySync } from 'globby'
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import reactRefresh from '@vitejs/plugin-react-refresh'
+import postcss from './postcss.config.js'
 // import checker from 'vite-plugin-checker'
 
 const includeDependencies = fs.readFileSync('./includeDependencies.txt')
@@ -23,9 +24,13 @@ export default defineConfig({
     include: includeDependencies,
   },
 
+  css: {
+    postcss,
+  },
+
   build: {
     rollupOptions: {
-      input: globby.sync('./**/index.html', {
+      input: globbySync('./**/index.html', {
         ignore: ['dist'],
       }),
     },
@@ -68,12 +73,10 @@ export default defineConfig({
       },
       load(id) {
         if (id === '@demos') {
-          const demos = globby
-            .sync('./src/*/*', { onlyDirectories: true })
+          const demos = globbySync('./src/*/*', { onlyDirectories: true })
             .map(demoPath => {
               const name = demoPath.replace('./src/', '')
-              const tabs = globby
-                .sync(`./src/${name}/*`, { onlyDirectories: true })
+              const tabs = globbySync(`./src/${name}/*`, { onlyDirectories: true })
                 .map(tabPath => ({
                   name: basename(tabPath),
                 }))
@@ -99,14 +102,13 @@ export default defineConfig({
       load(id) {
         if (id.startsWith('source!')) {
           const path = id.split('!!')[0].replace('source!', '')
-          const files = globby
-            .sync(`${path}/**/*`, {
-              ignore: [
-                '**/index.html',
-                '**/*.spec.js',
-                '**/*.spec.ts',
-              ],
-            })
+          const files = globbySync(`${path}/**/*`, {
+            ignore: [
+              '**/index.html',
+              '**/*.spec.js',
+              '**/*.spec.ts',
+            ],
+          })
             .map(filePath => {
               const name = filePath.replace(`${path}/`, '')
 
@@ -165,7 +167,7 @@ export default defineConfig({
 
   resolve: {
     alias: [
-      ...globby.sync('../packages/*', { onlyDirectories: true })
+      ...globbySync('../packages/*', { onlyDirectories: true })
         .map(name => name.replace('../packages/', ''))
         .map(name => {
           return { find: `@tiptap/${name}`, replacement: resolve(`../packages/${name}/src/index.ts`) }