diff --git a/gulpfile.js b/gulpfile.js index 51186ebfa98f6103312bbf86e4f1190f2a20880a..a10179e46f9a6207d8a90ff24ddab5eee2e7a7b5 100755 --- a/gulpfile.js +++ b/gulpfile.js @@ -23,30 +23,6 @@ const postcss = require("gulp-postcss"); const tailwindcss = require("tailwindcss"); const rename = require("gulp-rename"); const assets = require("postcss-assets"); -const postcssPurgecss = require("@fullhuman/postcss-purgecss")({ - content: [ - "./source/**/*.mustache", - "./source/**/*.json", - "./source/**/*.js", - "./source/**/*.vue", - "./public/**/*.html", - ], - defaultExtractor: (content) => content.match(/[A-Za-z0-9-_:/]+/g) || [], - whitelistPatterns: [ - /(sm|md|lg|xl)?(\\:)?w-\d\d?$/, // width - /(sm|md|lg|xl)?(\\:)?h-\d\d?$/, // height - /(sm|md|lg|xl)?(\\:)m.?-\d\d?$/, // margins - /(sm|md|lg|xl)?(\\:)p.?-\d\d?$/, // paddings - /max-w-*/, // maximum width - /grid-cols-\d\d?/, // grid columns - /col-span-\d\d?/, // grid spans - /row-span-\d\d?/, // grid spans - /grid-flow/, // grid flow - /(sm|md|lg|xl)(\\:)text-.*/, - // /text-*/, - /ico--*/, // icons - ], -}); function resolvePath(pathInput) { @@ -222,30 +198,7 @@ function reloadJS(done) { * TAILWIND AND POSTCSS TASKS ******************************************************/ -gulp.task("tailwind-postcss:build", function (done) { - return gulp - .src("./source/css/style.pcss") - .pipe( - postcss([ - require("postcss-import"), - tailwindcss("./tailwind.config.js"), - require("postcss-nested"), - // require('postcss-preset-env'), - require("postcss-custom-properties"), - require("autoprefixer"), - assets({ - basePath: "source/", - loadPaths: ["images/"], - }), - require("postcss-clean"), - ]) - ) - .pipe(rename("styles.css")) - .pipe(gulp.dest(resolvePath(paths().public.css))) - .on("end", done); -}); - -gulp.task("tailwind-postcss:build:production", function (done) { +gulp.task("tailwind-postcss", function (done) { return gulp .src("./source/css/style.pcss") .pipe( @@ -261,7 +214,6 @@ gulp.task("tailwind-postcss:build:production", function (done) { loadPaths: ["images/"], }), require("postcss-clean"), - postcssPurgecss, ]) ) .pipe(rename("styles.css")) @@ -296,7 +248,7 @@ function watch () { gulp.watch( postcssPaths, {useFsEvents: false}, - gulp.series("tailwind-postcss:build", reloadCSS) + gulp.series("tailwind-postcss", reloadCSS) ); console.log("Watching following source files:", jsPaths.concat(postcssPaths)); @@ -378,7 +330,8 @@ const buildJSBundle = (env) => { exclude: "node_modules/**/*", target: { chrome: 71, - firefox: 64 + firefox: 64, + edge: 19 }, }), commonjs(), @@ -425,13 +378,13 @@ gulp.task('rollup:build:production', buildJSBundle("production")); gulp.task( "site:build", - gulp.parallel("tailwind-postcss:build", "patternlab:build", "rollup:build") + gulp.parallel("tailwind-postcss", "patternlab:build", "rollup:build") ); gulp.task( "site:build:production", // Build patternlab first to have all the necessary CSS classes ready for auto purge. - gulp.series("patternlab:build", gulp.parallel("tailwind-postcss:build:production", "rollup:build:production")) + gulp.series("patternlab:build", gulp.parallel("tailwind-postcss", "rollup:build:production")) ); /****************************************************** diff --git a/package.json b/package.json index f71ba7299467fd5d3d58eee9b10c4b91a986a593..2b680c3d18af4b1517ccceb942dfdfdbc13a492b 100755 --- a/package.json +++ b/package.json @@ -35,8 +35,8 @@ "scripts": { "postinstall": "node scripts/postinstall.js", "gulp": "gulp -- ", - "develop": "gulp patternlab:serve", - "build": "gulp", + "develop": "NODE_ENV=development gulp patternlab:serve", + "build": "NODE_ENV=production gulp", "make-version": "scripts/make-version.sh", "update-iconset": "scripts/update-iconset.js" }, diff --git a/tailwind.config.js b/tailwind.config.js index dd7c0315d09cf4adab6a64f9fe611d0dffe91279..0525920fe3ba3fe5f24721cc30677b3fdafe5d88 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -6,6 +6,30 @@ const lighen = (clr, val) => Color(clr).lighten(val).rgb().string(); const darken = (clr, val) => Color(clr).darken(val).rgb().string(); module.exports = { + purge: { + content: [ + "./source/**/*.mustache", + "./source/**/*.json", + "./source/**/*.js", + "./source/**/*.vue", + "./public/**/*.html", + ], + options: { + whitelistPatterns: [ + /^((sm|md|lg|xl)\:)?w-\d\d?/, + /^((sm|md|lg|xl)\:)?h-\d\d?/, + /^((sm|md|lg|xl)\:)?m.?-\d\d?/, + /^((sm|md|lg|xl)\:)?p.?-\d\d?/, + /^((sm|md|lg|xl)\:)?grid-cols-*/, + /^((sm|md|lg|xl)\:)?col-span-*/, + /^((sm|md|lg|xl)\:)?row-span-*/, + /^((sm|md|lg|xl)\:)?grid-flow-*/, // grid flow + /^text-*/, + /^max-w-*/, // maximum width + /ico--*/, // icons + ], + } + }, theme: { extend: { maxWidth: {