From 22887860df9d9b7c7babd6b60ddc5961faf44246 Mon Sep 17 00:00:00 2001 From: Runjuu Date: Thu, 29 Oct 2020 19:14:27 +0800 Subject: [PATCH] feat(dev): better support for processing tailwind css MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - support use tailwind’s most features. - support write css right next to the components. --- gulpfile.js | 35 ++ package.json | 7 + postcss.config.js | 3 +- shadow-cljs.edn | 5 - styles.src.css | 8 - tailwind.config.js | 4 +- tailwind.css | 9 +- yarn.lock | 1327 ++++++++++++++++++++++++++++++++++++++++++-- 8 files changed, 1344 insertions(+), 54 deletions(-) create mode 100644 gulpfile.js delete mode 100644 styles.src.css diff --git a/gulpfile.js b/gulpfile.js new file mode 100644 index 000000000..5a89b055f --- /dev/null +++ b/gulpfile.js @@ -0,0 +1,35 @@ +const gulp = require('gulp') +const postcss = require('gulp-postcss') +const concat = require('gulp-concat') +const merge = require('merge-stream') +const cleanCSS = require('gulp-clean-css') + +const tailwind = { + entryPath: './tailwind.css', + cssPath: './src/**/*.css', + outputDir: './resources/static/css/', + outputName: 'tailwind.min.css', +} + +function buildCSS() { + return merge(gulp.src(tailwind.entryPath), gulp.src(tailwind.cssPath)) + .pipe(postcss()) + .pipe(concat(tailwind.outputName)) + .pipe(gulp.dest(tailwind.outputDir)) +} + +function watchCSS() { + return gulp.watch([tailwind.entryPath, tailwind.cssPath], { ignoreInitial: false }, buildCSS) +} + +function optimizeCSSForRelease() { + return gulp.src('./resources/static/css/style.css') + .pipe(cleanCSS()) + .pipe(gulp.dest('./resources/static/')) +} + +const releaseCSS = gulp.series(buildCSS, optimizeCSSForRelease) + +exports.watchCSS = watchCSS +exports.buildCSS = buildCSS +exports.releaseCSS = releaseCSS diff --git a/package.json b/package.json index 689f35d50..6281841c4 100644 --- a/package.json +++ b/package.json @@ -6,6 +6,11 @@ "@fullhuman/postcss-purgecss": "^2.1.2", "@tailwindcss/ui": "^0.1.3", "cssnano": "^4.1.10", + "gulp": "^4.0.2", + "gulp-clean-css": "^4.3.0", + "gulp-concat": "^2.6.1", + "gulp-postcss": "^9.0.0", + "merge-stream": "^2.0.0", "postcss": "^7.0.21", "postcss-cli": "^6.1.3", "purgecss": "^2.1.0", @@ -13,6 +18,8 @@ "tailwindcss": "^1.3.4" }, "scripts": { + "watch:css": "gulp watchCSS", + "release:css": "NODE_ENV=production gulp releaseCSS", "watch": "clojure -A:cljs watch app publishing", "release": "clojure -A:cljs release app publishing", "watch-app": "clojure -A:cljs watch app", diff --git a/postcss.config.js b/postcss.config.js index c503ef662..e850255fa 100644 --- a/postcss.config.js +++ b/postcss.config.js @@ -9,7 +9,8 @@ module.exports = (ctx) => ({ '../resources/static/js/main.js', // etc. ], - // https://tailwindcss.com/docs/controlling-file-size#setting-up-purgecss + + // https://tailwindcss.com/docs/controlling-file-size#understanding-the-regex // without this we miss keeping eg. `w-1/2` defaultExtractor: (content) => content.match(/[\w-/:]+(?