Merge pull request #179 from logseq/feat/modular-css

feat: modular css

.gitignore

@@ -12,22 +12,9 @@ pom.xml.asc
 .hg/
 
 node_modules/
-/resources/static/js/*.map
-/resources/static/js/main.js
-/resources/static/js/cljs-runtime
-/resources/static/js/manifest.edn
-/resources/static/js/publishing/*.map
-/resources/static/js/publishing/main.js
-/resources/static/js/publishing/cljs-runtime
-/resources/static/js/publishing/manifest.edn
-/resources/static/style.css
-/resources/static/js/publishing/code-editor.js
-/resources/static/js/code-editor.js
-/resources/static/js/publishing
+static/
 
 .cpcache/
-/target
-/checkouts
 /src/gen
 
 *.iml
@@ -39,7 +26,5 @@ node_modules/
 .DS_Store
 report.html
 strings.csv
-/resources/static/css/tailwind.min.css
-resources/static/style.css
 
 .calva

gulpfile.js

@@ -0,0 +1,58 @@
+const path = require('path')
+const gulp = require('gulp')
+const postcss = require('gulp-postcss')
+const concat = require('gulp-concat')
+const cleanCSS = require('gulp-clean-css')
+const del = require('del')
+
+const outputPath = path.join(__dirname, 'static')
+const resourcesPath = path.join(__dirname, 'resources')
+const sourcePath = path.join(__dirname, 'src')
+const resourceFilePath = path.join(resourcesPath, '**')
+
+const tailwind = {
+  paths: [path.join(__dirname, 'tailwind.css'), path.join(sourcePath, '**/*.css')],
+  outputDir: path.join(outputPath, 'css'),
+  outputName: 'tailwind.build.css',
+}
+
+const css = {
+  watchCSS() {
+    return gulp.watch(tailwind.paths, { ignoreInitial: false }, css._buildTailwind)
+  },
+
+  buildCSS(...params) {
+    return gulp.series(css._buildTailwind, css._optimizeCSSForRelease)(...params)
+  },
+
+  _buildTailwind() {
+    return gulp.src(tailwind.paths)
+      .pipe(postcss())
+      .pipe(concat(tailwind.outputName))
+      .pipe(gulp.dest(tailwind.outputDir))
+  },
+
+  _optimizeCSSForRelease() {
+    return gulp.src(path.join(outputPath, 'css', 'style.css'))
+      .pipe(cleanCSS())
+      .pipe(gulp.dest(path.join(outputPath, 'css')))
+  },
+}
+
+const common = {
+  clean() {
+    return del(outputPath)
+  },
+
+  syncResourceFile() {
+    return gulp.src(resourceFilePath).pipe(gulp.dest(outputPath))
+  },
+
+  keepSyncResourceFile() {
+    return gulp.watch(resourceFilePath, { ignoreInitial: false }, common.syncResourceFile)
+  }
+}
+
+exports.clean = common.clean
+exports.watch = gulp.parallel(common.keepSyncResourceFile, css.watchCSS)
+exports.build = gulp.series(common.syncResourceFile, css.buildCSS)

package.json

@@ -3,9 +3,14 @@
     "version": "0.0.1",
     "private": true,
     "devDependencies": {
-        "@fullhuman/postcss-purgecss": "^2.1.2",
         "@tailwindcss/ui": "^0.1.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",
+        "npm-run-all": "^4.1.5",
         "postcss": "^7.0.21",
         "postcss-cli": "^6.1.3",
         "purgecss": "^2.1.0",
@@ -13,13 +18,21 @@
         "tailwindcss": "^1.3.4"
     },
     "scripts": {
-        "watch": "clojure -A:cljs watch app publishing",
-        "release": "clojure -A:cljs release app publishing",
-        "watch-app": "clojure -A:cljs watch app",
-        "release-app": "clojure -A:cljs release app",
-        "debug": "clojure -A:cljs release app --debug",
-        "report": "clojure -A:cljs run shadow.cljs.build-report app report.html",
-        "clean": "/usr/bin/rm -rf target; /usr/bin/rm -rf ./resources/static/js/compiled; /usr/bin/rm -rf ./resources/static/js/cljs-runtime; /usr/bin/rm -rf ./resources/static/js/publishing; /usr/bin/rm -rf ./resources/static/js/main.js;"
+        "watch": "run-p cljs:watch gulp:watch",
+        "release": "run-s cljs:release gulp:build",
+        "watch-app": "run-p cljs:watch-app gulp:watch",
+        "release-app": "run-s cljs:release-app gulp:build",
+        "dev-release-app": "run-s cljs:dev-release-app gulp:build",
+        "clean": "gulp clean",
+        "gulp:watch": "gulp watch",
+        "gulp:build": "NODE_ENV=production gulp build",
+        "cljs:watch": "clojure -A:cljs watch app publishing",
+        "cljs:release": "clojure -A:cljs release app publishing",
+        "cljs:watch-app": "clojure -A:cljs watch app",
+        "cljs:release-app": "clojure -A:cljs release app",
+        "cljs:dev-release-app": "clojure -A:cljs release app --config-merge '{:closure-defines {frontend.config/DEV-RELEASE true}}'",
+        "cljs:debug": "clojure -A:cljs release app --debug",
+        "cljs:report": "clojure -A:cljs run shadow.cljs.build-report app report.html"
     },
     "dependencies": {
         "codemirror": "^5.58.1",

postcss.config.js

@@ -3,16 +3,5 @@ module.exports = (ctx) => ({
     require("autoprefixer"),
     require("tailwindcss")("tailwind.config.js"),
     ctx.env === "production" ? require("cssnano")({ preset: "default" }) : null,
-    ctx.env === "production"
-      ? require("@fullhuman/postcss-purgecss")({
-        content: [
-          '../resources/static/js/main.js',
-          // etc.
-        ],
-        // https://tailwindcss.com/docs/controlling-file-size#setting-up-purgecss
-        // without this we miss keeping eg. `w-1/2`
-        defaultExtractor: (content) => content.match(/[\w-/:]+(?<!:)/g) || [],
-      })
-      : null,
   ],
 });

resources/static/css/common.css → resources/css/common.css

@@ -875,13 +875,13 @@ iframe {
 .aspect-ratio-square {
     padding-top: 100%;
 }
-.aspect-ratio-16/9 {
+.aspect-ratio-16\/9 {
     padding-top: 56.25%;
 }
-.aspect-ratio-4/3 {
+.aspect-ratio-4\/3 {
     padding-top: 75%;
 }
-.aspect-ratio-21/9 {
+.aspect-ratio-21\/9 {
     padding-top: 42.86%;
 }
 

resources/static/css/datepicker.css → resources/css/datepicker.css

@@ -227,3 +227,4 @@
 }
 /*----------------------------------------------------------------------------------------
   END OF DATE PICKER SECTION...
+----------------------------------------------------------------------------------------*/

resources/css/inter.css

@@ -0,0 +1,200 @@
+@font-face {
+  font-family: 'Inter';
+  font-style:  normal;
+  font-weight: 100;
+  font-display: swap;
+  src: url("/static/fonts/inter/Inter-Thin.woff2?v=3.15") format("woff2"),
+       url("/static/fonts/inter/Inter-Thin.woff?v=3.15") format("woff");
+}
+@font-face {
+  font-family: 'Inter';
+  font-style:  italic;
+  font-weight: 100;
+  font-display: swap;
+  src: url("/static/fonts/inter/Inter-ThinItalic.woff2?v=3.15") format("woff2"),
+       url("/static/fonts/inter/Inter-ThinItalic.woff?v=3.15") format("woff");
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style:  normal;
+  font-weight: 200;
+  font-display: swap;
+  src: url("/static/fonts/inter/Inter-ExtraLight.woff2?v=3.15") format("woff2"),
+       url("/static/fonts/inter/Inter-ExtraLight.woff?v=3.15") format("woff");
+}
+@font-face {
+  font-family: 'Inter';
+  font-style:  italic;
+  font-weight: 200;
+  font-display: swap;
+  src: url("/static/fonts/inter/Inter-ExtraLightItalic.woff2?v=3.15") format("woff2"),
+       url("/static/fonts/inter/Inter-ExtraLightItalic.woff?v=3.15") format("woff");
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style:  normal;
+  font-weight: 300;
+  font-display: swap;
+  src: url("/static/fonts/inter/Inter-Light.woff2?v=3.15") format("woff2"),
+       url("/static/fonts/inter/Inter-Light.woff?v=3.15") format("woff");
+}
+@font-face {
+  font-family: 'Inter';
+  font-style:  italic;
+  font-weight: 300;
+  font-display: swap;
+  src: url("/static/fonts/inter/Inter-LightItalic.woff2?v=3.15") format("woff2"),
+       url("/static/fonts/inter/Inter-LightItalic.woff?v=3.15") format("woff");
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style:  normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("/static/fonts/inter/Inter-Regular.woff2?v=3.15") format("woff2"),
+       url("/static/fonts/inter/Inter-Regular.woff?v=3.15") format("woff");
+}
+@font-face {
+  font-family: 'Inter';
+  font-style:  italic;
+  font-weight: 400;
+  font-display: swap;
+  src: url("/static/fonts/inter/Inter-Italic.woff2?v=3.15") format("woff2"),
+       url("/static/fonts/inter/Inter-Italic.woff?v=3.15") format("woff");
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style:  normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url("/static/fonts/inter/Inter-Medium.woff2?v=3.15") format("woff2"),
+       url("/static/fonts/inter/Inter-Medium.woff?v=3.15") format("woff");
+}
+@font-face {
+  font-family: 'Inter';
+  font-style:  italic;
+  font-weight: 500;
+  font-display: swap;
+  src: url("/static/fonts/inter/Inter-MediumItalic.woff2?v=3.15") format("woff2"),
+       url("/static/fonts/inter/Inter-MediumItalic.woff?v=3.15") format("woff");
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style:  normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url("/static/fonts/inter/Inter-SemiBold.woff2?v=3.15") format("woff2"),
+       url("/static/fonts/inter/Inter-SemiBold.woff?v=3.15") format("woff");
+}
+@font-face {
+  font-family: 'Inter';
+  font-style:  italic;
+  font-weight: 600;
+  font-display: swap;
+  src: url("/static/fonts/inter/Inter-SemiBoldItalic.woff2?v=3.15") format("woff2"),
+       url("/static/fonts/inter/Inter-SemiBoldItalic.woff?v=3.15") format("woff");
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style:  normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url("/static/fonts/inter/Inter-Bold.woff2?v=3.15") format("woff2"),
+       url("/static/fonts/inter/Inter-Bold.woff?v=3.15") format("woff");
+}
+@font-face {
+  font-family: 'Inter';
+  font-style:  italic;
+  font-weight: 700;
+  font-display: swap;
+  src: url("/static/fonts/inter/Inter-BoldItalic.woff2?v=3.15") format("woff2"),
+       url("/static/fonts/inter/Inter-BoldItalic.woff?v=3.15") format("woff");
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style:  normal;
+  font-weight: 800;
+  font-display: swap;
+  src: url("/static/fonts/inter/Inter-ExtraBold.woff2?v=3.15") format("woff2"),
+       url("/static/fonts/inter/Inter-ExtraBold.woff?v=3.15") format("woff");
+}
+@font-face {
+  font-family: 'Inter';
+  font-style:  italic;
+  font-weight: 800;
+  font-display: swap;
+  src: url("/static/fonts/inter/Inter-ExtraBoldItalic.woff2?v=3.15") format("woff2"),
+       url("/static/fonts/inter/Inter-ExtraBoldItalic.woff?v=3.15") format("woff");
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style:  normal;
+  font-weight: 900;
+  font-display: swap;
+  src: url("/static/fonts/inter/Inter-Black.woff2?v=3.15") format("woff2"),
+       url("/static/fonts/inter/Inter-Black.woff?v=3.15") format("woff");
+}
+@font-face {
+  font-family: 'Inter';
+  font-style:  italic;
+  font-weight: 900;
+  font-display: swap;
+  src: url("/static/fonts/inter/Inter-BlackItalic.woff2?v=3.15") format("woff2"),
+       url("/static/fonts/inter/Inter-BlackItalic.woff?v=3.15") format("woff");
+}
+
+/* -------------------------------------------------------
+Variable font.
+Usage:
+
+  html { font-family: 'Inter', sans-serif; }
+  @supports (font-variation-settings: normal) {
+    html { font-family: 'Inter var', sans-serif; }
+  }
+*/
+@font-face {
+  font-family: 'Inter var';
+  font-weight: 100 900;
+  font-display: swap;
+  font-style: normal;
+  font-named-instance: 'Regular';
+  src: url("/static/fonts/inter/Inter-roman.var.woff2?v=3.15") format("woff2");
+}
+@font-face {
+  font-family: 'Inter var';
+  font-weight: 100 900;
+  font-display: swap;
+  font-style: italic;
+  font-named-instance: 'Italic';
+  src: url("/static/fonts/inter/Inter-italic.var.woff2?v=3.15") format("woff2");
+}
+
+
+/* --------------------------------------------------------------------------
+[EXPERIMENTAL] Multi-axis, single variable font.
+
+Slant axis is not yet widely supported (as of February 2019) and thus this
+multi-axis single variable font is opt-in rather than the default.
+
+When using this, you will probably need to set font-variation-settings
+explicitly, e.g.
+
+  * { font-variation-settings: "slnt" 0deg }
+  .italic { font-variation-settings: "slnt" 10deg }
+
+*/
+@font-face {
+  font-family: 'Inter var experimental';
+  font-weight: 100 900;
+  font-display: swap;
+  font-style: oblique 0deg 10deg;
+  src: url("/static/fonts/inter/Inter.var.woff2?v=3.15") format("woff2");
+}

resources/static/css/style.css → resources/css/style.css

@@ -1,9 +1,9 @@
 @charset "utf-8";
-@import "../fonts/inter/inter.css";
+@import "./inter.css";
 @import "./reveal.min.css";
 @import "./reveal_black.min.css";
 @import "./katex.min.css";
-@import "./tailwind.min.css";
+@import "./tailwind.build.css"; /* Build by gulp. Check `_buildTailwind` for more detail */
 @import "./common.css";
 @import "./datepicker.css";
 @import "./highlight.css";

resources/static/css/inter.css

@@ -1,200 +0,0 @@
-@font-face {
-  font-family: 'Inter';
-  font-style:  normal;
-  font-weight: 100;
-  font-display: swap;
-  src: url("Inter-Thin-BETA.woff2") format("woff2"),
-       url("Inter-Thin-BETA.woff") format("woff");
-}
-@font-face {
-  font-family: 'Inter';
-  font-style:  italic;
-  font-weight: 100;
-  font-display: swap;
-  src: url("Inter-ThinItalic-BETA.woff2") format("woff2"),
-       url("Inter-ThinItalic-BETA.woff") format("woff");
-}
-
-@font-face {
-  font-family: 'Inter';
-  font-style:  normal;
-  font-weight: 200;
-  font-display: swap;
-  src: url("Inter-ExtraLight-BETA.woff2") format("woff2"),
-       url("Inter-ExtraLight-BETA.woff") format("woff");
-}
-@font-face {
-  font-family: 'Inter';
-  font-style:  italic;
-  font-weight: 200;
-  font-display: swap;
-  src: url("Inter-ExtraLightItalic-BETA.woff2") format("woff2"),
-       url("Inter-ExtraLightItalic-BETA.woff") format("woff");
-}
-
-@font-face {
-  font-family: 'Inter';
-  font-style:  normal;
-  font-weight: 300;
-  font-display: swap;
-  src: url("Inter-Light-BETA.woff2") format("woff2"),
-       url("Inter-Light-BETA.woff") format("woff");
-}
-@font-face {
-  font-family: 'Inter';
-  font-style:  italic;
-  font-weight: 300;
-  font-display: swap;
-  src: url("Inter-LightItalic-BETA.woff2") format("woff2"),
-       url("Inter-LightItalic-BETA.woff") format("woff");
-}
-
-@font-face {
-  font-family: 'Inter';
-  font-style:  normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url("Inter-Regular.woff2") format("woff2"),
-       url("Inter-Regular.woff") format("woff");
-}
-@font-face {
-  font-family: 'Inter';
-  font-style:  italic;
-  font-weight: 400;
-  font-display: swap;
-  src: url("Inter-Italic.woff2") format("woff2"),
-       url("Inter-Italic.woff") format("woff");
-}
-
-@font-face {
-  font-family: 'Inter';
-  font-style:  normal;
-  font-weight: 500;
-  font-display: swap;
-  src: url("Inter-Medium.woff2") format("woff2"),
-       url("Inter-Medium.woff") format("woff");
-}
-@font-face {
-  font-family: 'Inter';
-  font-style:  italic;
-  font-weight: 500;
-  font-display: swap;
-  src: url("Inter-MediumItalic.woff2") format("woff2"),
-       url("Inter-MediumItalic.woff") format("woff");
-}
-
-@font-face {
-  font-family: 'Inter';
-  font-style:  normal;
-  font-weight: 600;
-  font-display: swap;
-  src: url("Inter-SemiBold.woff2") format("woff2"),
-       url("Inter-SemiBold.woff") format("woff");
-}
-@font-face {
-  font-family: 'Inter';
-  font-style:  italic;
-  font-weight: 600;
-  font-display: swap;
-  src: url("Inter-SemiBoldItalic.woff2") format("woff2"),
-       url("Inter-SemiBoldItalic.woff") format("woff");
-}
-
-@font-face {
-  font-family: 'Inter';
-  font-style:  normal;
-  font-weight: 700;
-  font-display: swap;
-  src: url("Inter-Bold.woff2") format("woff2"),
-       url("Inter-Bold.woff") format("woff");
-}
-@font-face {
-  font-family: 'Inter';
-  font-style:  italic;
-  font-weight: 700;
-  font-display: swap;
-  src: url("Inter-BoldItalic.woff2") format("woff2"),
-       url("Inter-BoldItalic.woff") format("woff");
-}
-
-@font-face {
-  font-family: 'Inter';
-  font-style:  normal;
-  font-weight: 800;
-  font-display: swap;
-  src: url("Inter-ExtraBold.woff2") format("woff2"),
-       url("Inter-ExtraBold.woff") format("woff");
-}
-@font-face {
-  font-family: 'Inter';
-  font-style:  italic;
-  font-weight: 800;
-  font-display: swap;
-  src: url("Inter-ExtraBoldItalic.woff2") format("woff2"),
-       url("Inter-ExtraBoldItalic.woff") format("woff");
-}
-
-@font-face {
-  font-family: 'Inter';
-  font-style:  normal;
-  font-weight: 900;
-  font-display: swap;
-  src: url("Inter-Black.woff2") format("woff2"),
-       url("Inter-Black.woff") format("woff");
-}
-@font-face {
-  font-family: 'Inter';
-  font-style:  italic;
-  font-weight: 900;
-  font-display: swap;
-  src: url("Inter-BlackItalic.woff2") format("woff2"),
-       url("Inter-BlackItalic.woff") format("woff");
-}
-
-/* -------------------------------------------------------
-Variable font.
-Usage:
-
-  html { font-family: 'Inter', sans-serif; }
-  @supports (font-variation-settings: normal) {
-    html { font-family: 'Inter var', sans-serif; }
-  }
-*/
-@font-face {
-  font-family: 'Inter var';
-  font-weight: 100 900;
-  font-display: swap;
-  font-style: normal;
-  font-named-instance: 'Regular';
-  src: url("Inter-upright.var.woff2") format("woff2");
-}
-@font-face {
-  font-family: 'Inter var';
-  font-weight: 100 900;
-  font-display: swap;
-  font-style: italic;
-  font-named-instance: 'Italic';
-  src: url("Inter-italic.var.woff2") format("woff2");
-}
-
-
-/* --------------------------------------------------------------------------
-[EXPERIMENTAL] Multi-axis, single variable font.
-
-Slant axis is not yet widely supported (as of February 2019) and thus this
-multi-axis single variable font is opt-in rather than the default.
-
-When using this, you will probably need to set font-variation-settings
-explicitly, e.g.
-
-  * { font-variation-settings: "slnt" 0deg }
-  .italic { font-variation-settings: "slnt" 10deg }
-
-*/
-@font-face {
-  font-family: 'Inter var experimental';
-  font-weight: 100 900;
-  font-display: swap;
-  font-style: oblique 0deg 10deg;
-  src: url("Inter.var.woff2") format("woff2");
-}

resources/static/fonts/inter/inter.css

@@ -1,200 +0,0 @@
-@font-face {
-  font-family: 'Inter';
-  font-style:  normal;
-  font-weight: 100;
-  font-display: swap;
-  src: url("Inter-Thin.woff2?v=3.15") format("woff2"),
-       url("Inter-Thin.woff?v=3.15") format("woff");
-}
-@font-face {
-  font-family: 'Inter';
-  font-style:  italic;
-  font-weight: 100;
-  font-display: swap;
-  src: url("Inter-ThinItalic.woff2?v=3.15") format("woff2"),
-       url("Inter-ThinItalic.woff?v=3.15") format("woff");
-}
-
-@font-face {
-  font-family: 'Inter';
-  font-style:  normal;
-  font-weight: 200;
-  font-display: swap;
-  src: url("Inter-ExtraLight.woff2?v=3.15") format("woff2"),
-       url("Inter-ExtraLight.woff?v=3.15") format("woff");
-}
-@font-face {
-  font-family: 'Inter';
-  font-style:  italic;
-  font-weight: 200;
-  font-display: swap;
-  src: url("Inter-ExtraLightItalic.woff2?v=3.15") format("woff2"),
-       url("Inter-ExtraLightItalic.woff?v=3.15") format("woff");
-}
-
-@font-face {
-  font-family: 'Inter';
-  font-style:  normal;
-  font-weight: 300;
-  font-display: swap;
-  src: url("Inter-Light.woff2?v=3.15") format("woff2"),
-       url("Inter-Light.woff?v=3.15") format("woff");
-}
-@font-face {
-  font-family: 'Inter';
-  font-style:  italic;
-  font-weight: 300;
-  font-display: swap;
-  src: url("Inter-LightItalic.woff2?v=3.15") format("woff2"),
-       url("Inter-LightItalic.woff?v=3.15") format("woff");
-}
-
-@font-face {
-  font-family: 'Inter';
-  font-style:  normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url("Inter-Regular.woff2?v=3.15") format("woff2"),
-       url("Inter-Regular.woff?v=3.15") format("woff");
-}
-@font-face {
-  font-family: 'Inter';
-  font-style:  italic;
-  font-weight: 400;
-  font-display: swap;
-  src: url("Inter-Italic.woff2?v=3.15") format("woff2"),
-       url("Inter-Italic.woff?v=3.15") format("woff");
-}
-
-@font-face {
-  font-family: 'Inter';
-  font-style:  normal;
-  font-weight: 500;
-  font-display: swap;
-  src: url("Inter-Medium.woff2?v=3.15") format("woff2"),
-       url("Inter-Medium.woff?v=3.15") format("woff");
-}
-@font-face {
-  font-family: 'Inter';
-  font-style:  italic;
-  font-weight: 500;
-  font-display: swap;
-  src: url("Inter-MediumItalic.woff2?v=3.15") format("woff2"),
-       url("Inter-MediumItalic.woff?v=3.15") format("woff");
-}
-
-@font-face {
-  font-family: 'Inter';
-  font-style:  normal;
-  font-weight: 600;
-  font-display: swap;
-  src: url("Inter-SemiBold.woff2?v=3.15") format("woff2"),
-       url("Inter-SemiBold.woff?v=3.15") format("woff");
-}
-@font-face {
-  font-family: 'Inter';
-  font-style:  italic;
-  font-weight: 600;
-  font-display: swap;
-  src: url("Inter-SemiBoldItalic.woff2?v=3.15") format("woff2"),
-       url("Inter-SemiBoldItalic.woff?v=3.15") format("woff");
-}
-
-@font-face {
-  font-family: 'Inter';
-  font-style:  normal;
-  font-weight: 700;
-  font-display: swap;
-  src: url("Inter-Bold.woff2?v=3.15") format("woff2"),
-       url("Inter-Bold.woff?v=3.15") format("woff");
-}
-@font-face {
-  font-family: 'Inter';
-  font-style:  italic;
-  font-weight: 700;
-  font-display: swap;
-  src: url("Inter-BoldItalic.woff2?v=3.15") format("woff2"),
-       url("Inter-BoldItalic.woff?v=3.15") format("woff");
-}
-
-@font-face {
-  font-family: 'Inter';
-  font-style:  normal;
-  font-weight: 800;
-  font-display: swap;
-  src: url("Inter-ExtraBold.woff2?v=3.15") format("woff2"),
-       url("Inter-ExtraBold.woff?v=3.15") format("woff");
-}
-@font-face {
-  font-family: 'Inter';
-  font-style:  italic;
-  font-weight: 800;
-  font-display: swap;
-  src: url("Inter-ExtraBoldItalic.woff2?v=3.15") format("woff2"),
-       url("Inter-ExtraBoldItalic.woff?v=3.15") format("woff");
-}
-
-@font-face {
-  font-family: 'Inter';
-  font-style:  normal;
-  font-weight: 900;
-  font-display: swap;
-  src: url("Inter-Black.woff2?v=3.15") format("woff2"),
-       url("Inter-Black.woff?v=3.15") format("woff");
-}
-@font-face {
-  font-family: 'Inter';
-  font-style:  italic;
-  font-weight: 900;
-  font-display: swap;
-  src: url("Inter-BlackItalic.woff2?v=3.15") format("woff2"),
-       url("Inter-BlackItalic.woff?v=3.15") format("woff");
-}
-
-/* -------------------------------------------------------
-Variable font.
-Usage:
-
-  html { font-family: 'Inter', sans-serif; }
-  @supports (font-variation-settings: normal) {
-    html { font-family: 'Inter var', sans-serif; }
-  }
-*/
-@font-face {
-  font-family: 'Inter var';
-  font-weight: 100 900;
-  font-display: swap;
-  font-style: normal;
-  font-named-instance: 'Regular';
-  src: url("Inter-roman.var.woff2?v=3.15") format("woff2");
-}
-@font-face {
-  font-family: 'Inter var';
-  font-weight: 100 900;
-  font-display: swap;
-  font-style: italic;
-  font-named-instance: 'Italic';
-  src: url("Inter-italic.var.woff2?v=3.15") format("woff2");
-}
-
-
-/* --------------------------------------------------------------------------
-[EXPERIMENTAL] Multi-axis, single variable font.
-
-Slant axis is not yet widely supported (as of February 2019) and thus this
-multi-axis single variable font is opt-in rather than the default.
-
-When using this, you will probably need to set font-variation-settings
-explicitly, e.g.
-
-  * { font-variation-settings: "slnt" 0deg }
-  .italic { font-variation-settings: "slnt" 10deg }
-
-*/
-@font-face {
-  font-family: 'Inter var experimental';
-  font-weight: 100 900;
-  font-display: swap;
-  font-style: oblique 0deg 10deg;
-  src: url("Inter.var.woff2?v=3.15") format("woff2");
-}

resources/static/js/module-loader.edn

@@ -1 +0,0 @@
-{:module-uris {:main [], :code-editor ["/static/js/code-editor.js"]}, :module-infos {:main nil, :code-editor #{:main}}}

resources/static/js/module-loader.json

@@ -1 +0,0 @@
-{"module-uris":{"main":[],"code-editor":["/static/js/code-editor.js"]},"module-infos":{"main":null,"code-editor":["main"]}}

shadow-cljs.edn

@@ -11,18 +11,13 @@
              {:entries [frontend.extensions.code]
               :depends-on #{:main}}}
 
-   :output-dir "./resources/static/js"
+   :output-dir "./static/js"
    :asset-path "/static/js"
    :release {:asset-path "https://asset.logseq.com/static/js"}
    :compiler-options {:infer-externs :auto
                       :output-feature-set :es6
                       :externs ["datascript/externs.js"
                                 "externs.js"]}
-   ;; TODO: purge-css not working properly
-   ;; :build-hooks [(shadow.hooks/purge-css
-   ;;                {:css-source "node_modules/@tailwindcss/ui/dist/tailwind-ui.min.css"
-   ;;                 :js-globs   ["resources/static/js/*.js"]
-   ;;                 :public-dir    "resources/static/css"})]
    :devtools
    ;; before live-reloading any code call this function
    {:before-load frontend.core/stop
@@ -39,7 +34,7 @@
 
    :release {:asset-path "https://asset.logseq.com/static/js"}
 
-   :output-dir "../resources/static/js/publishing"
+   :output-dir "./static/js/publishing"
    :asset-path "/static/js"
 
    :closure-defines {frontend.config/PUBLISHING true}

src/main/frontend/config.cljs

@@ -4,7 +4,10 @@
             [frontend.state :as state]
             [frontend.util :as util]))
 
-(defonce dev? ^boolean goog.DEBUG)
+(goog-define DEV-RELEASE false)
+(defonce dev-release? DEV-RELEASE)
+(defonce dev? ^boolean (or dev-release? goog.DEBUG))
+
 (goog-define PUBLISHING false)
 (defonce publishing? PUBLISHING)
 

src/main/frontend/extensions/code.cljs

@@ -137,10 +137,8 @@
                  (when-let [pos-meta (::pos-meta state)]
                    (reset! pos-meta (last (:rum/args state)))))}
   [state config id attr code pos_meta]
-  [:div.relative
-   [:div.absolute.top-0.right-0.p-1.text-sm.text-gray-500
-    {:style {:z-index 2
-             :background "white"}}
+  [:div.extensions__code
+   [:div.extensions__code-lang
     (let [mode (get attr :data-lang "javascript")]
       (if (= mode "text/x-clojure")
         "clojure"

src/main/frontend/extensions/code.css

@@ -0,0 +1,9 @@
+.extensions__code {
+    @apply relative
+}
+
+.extensions__code-lang {
+    @apply absolute top-0 right-0 p-1 text-sm text-gray-500;
+    z-index: 2;
+    background: white;
+}

styles.src.css

@@ -1,8 +0,0 @@
-@tailwind base;
-@tailwind components;
-
-.green-example {
-    @apply text-green-700 bg-green-200;
-}
-
-@tailwind utilities;

tailwind.config.js

@@ -1,6 +1,8 @@
 module.exports = {
-  theme: {
-    extend: {},
-  },
+  purge: [
+    './src/**/*.js',
+    './src/**/*.cljs',
+    './resources/**/*.html',
+  ],
   plugins: [require("@tailwindcss/ui")],
 };

tailwind.css

@@ -1,6 +1,3 @@
-@charset "utf-8";
-/* purgecss start ignore */
-@tailwind  base;
-@tailwind  components;
-/* purgecss end ignore */
-@tailwind  utilities;
+@tailwind base;
+@tailwind components;
+@tailwind utilities;