Merge pull request logseq#1499 from logseq/improve/css-development

improve(dev): css development flow
jackode · Mar 19, 2021 · 9659495 · 9659495
2 parents de67d70 + ec6733d
commit 9659495
Show file tree

Hide file tree

Showing 8 changed files with 40 additions and 11 deletions.
diff --git a/gulpfile.js b/gulpfile.js
@@ -20,14 +20,26 @@ const css = {
   buildCSS (...params) {
     return gulp.series(
       () => exec(`yarn css:build`, {}),
-      css._optimizeCSSForRelease)(...params)
+      css._optimizeVendorCSSForRelease,
+      css._optimizeMainCSSForRelease
+    )(...params)
   },
 
   _optimizeCSSForRelease () {
     return gulp.src(path.join(outputPath, 'css', 'style.css'))
       .pipe(cleanCSS())
       .pipe(gulp.dest(path.join(outputPath, 'css')))
   },
+  _optimizeVendorCSSForRelease () {
+    return gulp.src(path.join(outputPath, 'css', 'vendor.css'))
+      .pipe(cleanCSS())
+      .pipe(gulp.dest(path.join(outputPath, 'css')))
+  },
+  _optimizeMainCSSForRelease () {
+    return gulp.src(path.join(outputPath, 'css', 'main.css'))
+      .pipe(cleanCSS())
+      .pipe(gulp.dest(path.join(outputPath, 'css')))
+  }
 }
 
 const common = {
@@ -40,7 +52,7 @@ const common = {
   },
 
   keepSyncResourceFile () {
-    return gulp.watch(resourceFilePath, { ignoreInitial: false }, common.syncResourceFile)
+    return gulp.watch(resourceFilePath, { ignoreInitial: true }, common.syncResourceFile)
   }
 }
 
@@ -89,5 +101,5 @@ exports.electronMaker = async () => {
 }
 
 exports.clean = common.clean
-exports.watch = gulp.parallel(common.keepSyncResourceFile, css.watchCSS)
+exports.watch = gulp.series(common.syncResourceFile, gulp.parallel(common.keepSyncResourceFile, css.watchCSS))
 exports.build = gulp.series(common.clean, common.syncResourceFile, css.buildCSS)
diff --git a/package.json b/package.json
@@ -25,8 +25,8 @@
         "tailwindcss": "2.0.3"
     },
     "scripts": {
-        "watch": "run-p gulp:build gulp:watch cljs:watch",
-        "electron-watch": "run-p gulp:build gulp:watch cljs:electron-watch",
+        "watch": "run-p gulp:watch cljs:watch",
+        "electron-watch": "run-p gulp:watch cljs:electron-watch",
         "release": "run-s gulp:build cljs:release",
         "watch-app": "run-p gulp:watch cljs:watch-app",
         "release-app": "run-s gulp:build cljs:release-app",
@@ -41,8 +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",
+        "css:build": "postcss tailwind.all.css -o static/css/main.css --verbose --env production",
+        "css:watch": "postcss tailwind.all.css -o static/css/main.css --verbose --watch",
         "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",

diff --git a/public/index.html b/public/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html><head><meta charset="utf-8"><meta content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no" name="viewport"><link href="/static/css/style.css" rel="stylesheet" type="text/css"><link href="/static/img/logo.png" rel="shortcut icon" type="image/png"><link href="/static/img/logo.png" rel="shortcut icon" sizes="192x192"><link href="/static/img/logo.png" rel="apple-touch-icon"><meta content="Logseq" name="apple-mobile-web-app-title"><meta content="yes" name="apple-mobile-web-app-capable"><meta content="yes" name="apple-touch-fullscreen"><meta content="black-translucent" name="apple-mobile-web-app-status-bar-style"><meta content="yes" name="mobile-web-app-capable"><meta content="summary" name="twitter:card"><meta content="A local-first knowledge base which can be synced using Git." name="twitter:description"><meta content="@logseq" name="twitter:site"><meta content="A local-first knowledge base." name="twitter:title"><meta content="https://asset.logseq.com/static/img/logo.png" name="twitter:image:src"><meta content="A local-first knowledge base which can be synced using Git." name="twitter:image:alt"><meta content="A local-first knowledge base." property="og:title"><meta content="site" property="og:type"><meta content="https://logseq.com" property="og:url"><meta content="https://asset.logseq.com/static/img/logo.png" property="og:image"><meta content="A local-first knowledge base which can be synced using Git." property="og:description"><title>Logseq: A local-first knowledge base</title><meta content="logseq" property="og:site_name"><meta description="A local-first knowledge base which can be synced using Git."></head><body><div id="root"><svg class="ls-center" fill="none" height="300" viewbox="0 0 300 300" width="300"><g filter="url(#filter0_d)"><path class="fade-in one" d="M85.2474 196.999C78.9469 195.427 75.5941 186.78 77.7586 177.685C79.9232 168.589 86.7856 162.49 93.0861 164.061C99.3866 165.632 102.739 174.279 100.575 183.375C98.4102 192.47 91.5479 198.57 85.2474 196.999Z" fill="white"></path><path class="fade-in one" d="M159.307 218.517C159.091 225.031 149.797 229.996 138.548 229.605C127.298 229.214 118.354 223.616 118.57 217.102C118.786 210.587 128.081 205.623 139.33 206.014C150.579 206.404 159.523 212.002 159.307 218.517Z" fill="white"></path><path class="fade-in one" d="M96.8481 135.55C101.197 138.758 100.722 147.042 95.7864 154.053C90.8513 161.065 83.3252 164.149 78.9764 160.941C74.6276 157.734 75.103 149.45 80.0381 142.438C84.9732 135.426 92.4993 132.343 96.8481 135.55Z" fill="white"></path><path class="fade-in one" d="M114.449 221.038C111.977 230.437 99.6731 236.491 86.9668 234.559C74.2605 232.626 65.9638 223.44 68.4357 214.04C70.9075 204.641 83.2119 198.587 95.9182 200.52C108.625 202.452 116.921 211.638 114.449 221.038Z" fill="white"></path><path class="fade-in one" d="M85.8103 132.35C75.571 131.027 67.8608 120.196 68.589 108.16C69.3173 96.123 78.2083 87.438 88.4476 88.7613C98.6869 90.0845 106.397 100.915 105.669 112.951C104.941 124.988 96.0496 133.673 85.8103 132.35Z" fill="white"></path><path class="fade-in two" d="M209.177 221.12C206.705 230.519 194.401 236.573 181.694 234.641C168.988 232.708 160.691 223.522 163.163 214.123C165.635 204.723 177.939 198.669 190.646 200.602C203.352 202.534 211.649 211.72 209.177 221.12Z" fill="white"></path><path class="fade-in two" d="M135.635 151.371C129.334 149.799 125.982 141.152 128.146 132.057C130.311 122.961 137.173 116.862 143.474 118.433C149.774 120.004 153.127 128.651 150.962 137.747C148.798 146.842 141.935 152.942 135.635 151.371Z" fill="white"></path><path class="fade-in two" d="M209.694 172.889C209.478 179.403 200.184 184.368 188.935 183.977C177.686 183.586 168.742 177.988 168.958 171.473C169.174 164.959 178.468 159.995 189.717 160.386C200.966 160.776 209.91 166.374 209.694 172.889Z" fill="white"></path><path class="fade-in two" d="M147.236 89.9221C151.584 93.1296 151.109 101.414 146.174 108.425C141.239 115.437 133.713 118.521 129.364 115.313C125.015 112.106 125.49 103.822 130.426 96.81C135.361 89.7984 142.887 86.7146 147.236 89.9221Z" fill="white"></path><path class="fade-in two" d="M164.837 175.41C162.365 184.809 150.061 190.863 137.354 188.931C124.648 186.998 116.351 177.812 118.823 168.412C121.295 159.013 133.599 152.959 146.306 154.892C159.012 156.824 167.309 166.01 164.837 175.41Z" fill="white"></path><path class="fade-in three" d="M136.198 86.7217C125.958 85.3985 118.248 74.5682 118.977 62.5316C119.705 50.4949 128.596 41.81 138.835 43.1332C149.074 44.4564 156.785 55.2867 156.056 67.3234C155.328 79.36 146.437 88.045 136.198 86.7217Z" fill="white"></path><path class="fade-in three" d="M259.564 175.492C257.092 184.891 244.788 190.945 232.082 189.013C219.375 187.08 211.079 177.894 213.551 168.495C216.023 159.095 228.327 153.041 241.033 154.974C253.739 156.906 262.036 166.092 259.564 175.492Z" fill="white"></path></g><defs><filter color-interpolation-filters="sRGB" filterunits="userSpaceOnUse" height="200" id="filter0_d" width="200" x="64" y="43"><feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"></feColorMatrix><feOffset dy="4"></feOffset><feGaussianBlur stddeviation="2"></feGaussianBlur><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"></feColorMatrix><feBlend in2="BackgroundImageFix" mode="normal" result="effect1_dropShadow"></feBlend><feBlend in2="effect1_dropShadow" in="SourceGraphic" mode="normal" result="shape"></feBlend></filter></defs></svg></div><script>window.user=null;</script><script src="/static/js/magic_portal.js"></script><script>let worker = new Worker("/static/js/worker.js");
+<html><head><meta charset="utf-8"><meta content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no" name="viewport"><link href="/static/css/vendor.css" rel="stylesheet" type="text/css"><link href="/static/css/main.css" rel="stylesheet" type="text/css"><link href="/static/img/logo.png" rel="shortcut icon" type="image/png"><link href="/static/img/logo.png" rel="shortcut icon" sizes="192x192"><link href="/static/img/logo.png" rel="apple-touch-icon"><meta content="Logseq" name="apple-mobile-web-app-title"><meta content="yes" name="apple-mobile-web-app-capable"><meta content="yes" name="apple-touch-fullscreen"><meta content="black-translucent" name="apple-mobile-web-app-status-bar-style"><meta content="yes" name="mobile-web-app-capable"><meta content="summary" name="twitter:card"><meta content="A local-first knowledge base which can be synced using Git." name="twitter:description"><meta content="@logseq" name="twitter:site"><meta content="A local-first knowledge base." name="twitter:title"><meta content="https://asset.logseq.com/static/img/logo.png" name="twitter:image:src"><meta content="A local-first knowledge base which can be synced using Git." name="twitter:image:alt"><meta content="A local-first knowledge base." property="og:title"><meta content="site" property="og:type"><meta content="https://logseq.com" property="og:url"><meta content="https://asset.logseq.com/static/img/logo.png" property="og:image"><meta content="A local-first knowledge base which can be synced using Git." property="og:description"><title>Logseq: A local-first knowledge base</title><meta content="logseq" property="og:site_name"><meta description="A local-first knowledge base which can be synced using Git."></head><body><div id="root"><svg class="ls-center" fill="none" height="300" viewbox="0 0 300 300" width="300"><g filter="url(#filter0_d)"><path class="fade-in one" d="M85.2474 196.999C78.9469 195.427 75.5941 186.78 77.7586 177.685C79.9232 168.589 86.7856 162.49 93.0861 164.061C99.3866 165.632 102.739 174.279 100.575 183.375C98.4102 192.47 91.5479 198.57 85.2474 196.999Z" fill="white"></path><path class="fade-in one" d="M159.307 218.517C159.091 225.031 149.797 229.996 138.548 229.605C127.298 229.214 118.354 223.616 118.57 217.102C118.786 210.587 128.081 205.623 139.33 206.014C150.579 206.404 159.523 212.002 159.307 218.517Z" fill="white"></path><path class="fade-in one" d="M96.8481 135.55C101.197 138.758 100.722 147.042 95.7864 154.053C90.8513 161.065 83.3252 164.149 78.9764 160.941C74.6276 157.734 75.103 149.45 80.0381 142.438C84.9732 135.426 92.4993 132.343 96.8481 135.55Z" fill="white"></path><path class="fade-in one" d="M114.449 221.038C111.977 230.437 99.6731 236.491 86.9668 234.559C74.2605 232.626 65.9638 223.44 68.4357 214.04C70.9075 204.641 83.2119 198.587 95.9182 200.52C108.625 202.452 116.921 211.638 114.449 221.038Z" fill="white"></path><path class="fade-in one" d="M85.8103 132.35C75.571 131.027 67.8608 120.196 68.589 108.16C69.3173 96.123 78.2083 87.438 88.4476 88.7613C98.6869 90.0845 106.397 100.915 105.669 112.951C104.941 124.988 96.0496 133.673 85.8103 132.35Z" fill="white"></path><path class="fade-in two" d="M209.177 221.12C206.705 230.519 194.401 236.573 181.694 234.641C168.988 232.708 160.691 223.522 163.163 214.123C165.635 204.723 177.939 198.669 190.646 200.602C203.352 202.534 211.649 211.72 209.177 221.12Z" fill="white"></path><path class="fade-in two" d="M135.635 151.371C129.334 149.799 125.982 141.152 128.146 132.057C130.311 122.961 137.173 116.862 143.474 118.433C149.774 120.004 153.127 128.651 150.962 137.747C148.798 146.842 141.935 152.942 135.635 151.371Z" fill="white"></path><path class="fade-in two" d="M209.694 172.889C209.478 179.403 200.184 184.368 188.935 183.977C177.686 183.586 168.742 177.988 168.958 171.473C169.174 164.959 178.468 159.995 189.717 160.386C200.966 160.776 209.91 166.374 209.694 172.889Z" fill="white"></path><path class="fade-in two" d="M147.236 89.9221C151.584 93.1296 151.109 101.414 146.174 108.425C141.239 115.437 133.713 118.521 129.364 115.313C125.015 112.106 125.49 103.822 130.426 96.81C135.361 89.7984 142.887 86.7146 147.236 89.9221Z" fill="white"></path><path class="fade-in two" d="M164.837 175.41C162.365 184.809 150.061 190.863 137.354 188.931C124.648 186.998 116.351 177.812 118.823 168.412C121.295 159.013 133.599 152.959 146.306 154.892C159.012 156.824 167.309 166.01 164.837 175.41Z" fill="white"></path><path class="fade-in three" d="M136.198 86.7217C125.958 85.3985 118.248 74.5682 118.977 62.5316C119.705 50.4949 128.596 41.81 138.835 43.1332C149.074 44.4564 156.785 55.2867 156.056 67.3234C155.328 79.36 146.437 88.045 136.198 86.7217Z" fill="white"></path><path class="fade-in three" d="M259.564 175.492C257.092 184.891 244.788 190.945 232.082 189.013C219.375 187.08 211.079 177.894 213.551 168.495C216.023 159.095 228.327 153.041 241.033 154.974C253.739 156.906 262.036 166.092 259.564 175.492Z" fill="white"></path></g><defs><filter color-interpolation-filters="sRGB" filterunits="userSpaceOnUse" height="200" id="filter0_d" width="200" x="64" y="43"><feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"></feColorMatrix><feOffset dy="4"></feOffset><feGaussianBlur stddeviation="2"></feGaussianBlur><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"></feColorMatrix><feBlend in2="BackgroundImageFix" mode="normal" result="effect1_dropShadow"></feBlend><feBlend in2="effect1_dropShadow" in="SourceGraphic" mode="normal" result="shape"></feBlend></filter></defs></svg></div><script>window.user=null;</script><script src="/static/js/magic_portal.js"></script><script>let worker = new Worker("/static/js/worker.js");
 const portal = new MagicPortal(worker);
 (async () => {
   const git = await portal.get('git');

diff --git a/resources/css/main.css b/resources/css/main.css
@@ -0,0 +1 @@
+/* Build by gulp. Check `_buildTailwind` for more detail */
diff --git a/resources/css/vendor.css b/resources/css/vendor.css
@@ -0,0 +1,13 @@
+@charset "utf-8";
+@import "./inter.css";
+@import "./reveal.min.css";
+@import "./reveal_black.min.css";
+@import "./fonts.css";
+@import "./excalidraw.min.css";
+@import "./katex.min.css";
+@import "./codemirror.min.css";
+@import "./animation.css";
+@import "./table.css";
+@import "./datepicker.css";
+@import "./highlight.css";
+@import "./tooltip.css";
diff --git a/resources/electron-dev.html b/resources/electron-dev.html
@@ -3,7 +3,8 @@
 <head>
   <meta charset="utf-8">
   <meta content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no" name="viewport">
-  <link href="./css/style.css" rel="stylesheet" type="text/css">
+  <link href="./css/vendor.css" rel="stylesheet" type="text/css">
+  <link href="./css/main.css" rel="stylesheet" type="text/css">
   <link href="./img/logo.png" rel="shortcut icon" type="image/png">
   <link href="./img/logo.png" rel="shortcut icon" sizes="192x192">
   <link href="./img/logo.png" rel="apple-touch-icon">
@@ -26,6 +27,7 @@
   <title>Logseq: A local-first knowledge base</title>
   <meta content="logseq" property="og:site_name">
   <meta content="A local-first knowledge base which can be synced using Git." name="description">
+  <script>window.localStorage.getItem('http-entry-port') && (location.href = 'http://localhost:' + window.localStorage.getItem('http-entry-port'))</script>
 </head>
 <body>
 <div id="root">

diff --git a/resources/electron.html b/resources/electron.html
@@ -3,7 +3,8 @@
 <head>
   <meta charset="utf-8">
   <meta content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no" name="viewport">
-  <link href="./css/style.css" rel="stylesheet" type="text/css">
+  <link href="./css/vendor.css" rel="stylesheet" type="text/css">
+  <link href="./css/main.css" rel="stylesheet" type="text/css">
   <link href="./img/logo.png" rel="shortcut icon" type="image/png">
   <link href="./img/logo.png" rel="shortcut icon" sizes="192x192">
   <link href="./img/logo.png" rel="apple-touch-icon">

diff --git a/tailwind.all.css b/tailwind.all.css
@@ -1,5 +1,5 @@
 @import "tailwindcss/base";
 @import "tailwindcss/components";
-@import "tailwindcss/utilities";
 @import "resources/css/common.css";
 @import-glob "src/main/frontend/**/*.css";
+@import "tailwindcss/utilities";
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		/* Build by gulp. Check `_buildTailwind` for more detail */