improve(dev): support tailwind jit mode (logseq#1473)

gulpfile.js

@@ -1,11 +1,9 @@
 const fs = require('fs')
+const utils = require('util')
 const cp = require('child_process')
+const exec = utils.promisify(cp.exec)
 const path = require('path')
 const gulp = require('gulp')
-const postcss = require('gulp-postcss')
-const concat = require('gulp-concat')
-const cached = require('gulp-cached')
-const remember = require('gulp-remember')
 const cleanCSS = require('gulp-clean-css')
 const del = require('del')
 
@@ -14,46 +12,17 @@ const resourcesPath = path.join(__dirname, 'resources')
 const sourcePath = path.join(__dirname, 'src/main/frontend')
 const resourceFilePath = path.join(resourcesPath, '**')
 
-const tailwindCoreEntry = path.join(__dirname, 'tailwind.css')
-const tailwindBuildEntry = path.join(sourcePath, '**/*.css')
-const tailwind = {
-  paths: [tailwindCoreEntry, tailwindBuildEntry],
-  outputDir: path.join(outputPath, 'css'),
-  outputName: 'tailwind.build.css',
-}
-
 const css = {
-  async watchCSS () {
-    // remove tailwind core css
-    await new Promise((resolve) => {
-      css._buildTailwind(
-        tailwind.paths.shift(),
-        'tailwind.core.css'
-      )
-        .on('end', resolve)
-    })
-
-    return gulp.watch(
-      tailwind.paths, { ignoreInitial: false },
-      css._buildTailwind.bind(null, void 0, void 0))
+  watchCSS () {
+    return exec(`yarn css:watch`, {})
   },
 
   buildCSS (...params) {
     return gulp.series(
-      css._buildTailwind.bind(null, tailwindCoreEntry, 'tailwind.core.css'),
-      css._buildTailwind.bind(null, tailwindBuildEntry, 'tailwind.build.css'),
+      () => exec(`yarn css:build`, {}),
       css._optimizeCSSForRelease)(...params)
   },
 
-  _buildTailwind (entry, output) {
-    return gulp.src(entry || tailwind.paths)
-      .pipe(cached('postcss-' + entry))
-      .pipe(postcss())
-      .pipe(remember('postcss-' + entry))
-      .pipe(concat(output || tailwind.outputName))
-      .pipe(gulp.dest(tailwind.outputDir))
-  },
-
   _optimizeCSSForRelease () {
     return gulp.src(path.join(outputPath, 'css', 'style.css'))
       .pipe(cleanCSS())

package.json

@@ -4,25 +4,25 @@
     "private": true,
     "main": "static/electron.js",
     "devDependencies": {
+        "@tailwindcss/jit": "^0.1.1",
         "@tailwindcss/ui": "0.7.2",
         "@types/gulp": "^4.0.7",
         "cross-env": "^7.0.3",
         "cssnano": "^4.1.10",
         "del": "^6.0.0",
         "gulp": "^4.0.2",
         "gulp-clean-css": "^4.3.0",
-        "gulp-concat": "^2.6.1",
-        "gulp-postcss": "^9.0.0",
-        "gulp-remember": "^1.0.1",
         "npm-run-all": "^4.1.5",
-        "postcss": "8.2.1",
-        "postcss-cli": "8.3.0",
-        "postcss-nested": "^5.0.1",
-        "purgecss": "3.0.0",
+        "postcss": "8.2.8",
+        "postcss-cli": "8.3.1",
+        "postcss-import": "^14.0.0",
+        "postcss-import-ext-glob": "^2.0.1",
+        "postcss-nested": "5.0.5",
+        "purgecss": "4.0.2",
         "shadow-cljs": "2.11.11",
         "stylelint": "^13.8.0",
         "stylelint-config-standard": "^20.0.0",
-        "tailwindcss": "2.0.1"
+        "tailwindcss": "2.0.3"
     },
     "scripts": {
         "watch": "run-p gulp:build gulp:watch cljs:watch",
@@ -41,6 +41,8 @@
         "style:lint": "stylelint \"src/**/*.css\" ",
         "gulp:watch": "gulp watch",
         "gulp:build": "cross-env NODE_ENV=production gulp build",
+        "css:build": "postcss tailwind.all.css -o static/css/tailwind.build.css --verbose",
+        "css:watch": "npm run css:build -- --watch --env development",
         "cljs:watch": "clojure -M:cljs watch app publishing electron",
         "cljs:electron-watch": "clojure -M:cljs watch app electron",
         "cljs:release": "clojure -M:cljs release app publishing electron",

postcss.config.js

@@ -1,6 +1,8 @@
 module.exports = (ctx) => ({
   plugins: [
-    require('postcss-nested'),
-    require('tailwindcss')('tailwind.config.js'),
+    require('postcss-nested')({}),
+    require('postcss-import-ext-glob')({}),
+    require('postcss-import')({}),
+    require('@tailwindcss/jit')('tailwind.config.js'),
   ],
 })

resources/css/style.css

@@ -10,7 +10,6 @@
 @import "./table.css";
 @import "./datepicker.css";
 @import "./highlight.css";
-@import "./tailwind.core.css"; /* Build by gulp. Check `_buildTailwind` for more detail */
 @import "./tooltip.css";
 @import "./common.css";
 @import "./tailwind.build.css"; /* Build by gulp. Check `_buildTailwind` for more detail */

resources/css/style.dev.css

@@ -11,5 +11,4 @@
 @import "./datepicker.css";
 @import "./highlight.css";
 @import "./tooltip.css";
-@import "./tailwind.core.css"; /* Build by gulp. Check `_buildTailwind` for more detail */
 @import "./common.css";

tailwind.all.css

@@ -0,0 +1,5 @@
+@import "tailwindcss/base";
+@import "tailwindcss/components";
+@import "tailwindcss/utilities";
+
+@import-glob "src/main/frontend/**/*.css";