From 1388a950389c7be571c716f6dc701005f172da53 Mon Sep 17 00:00:00 2001 From: Adam Piontek Date: Fri, 2 Jul 2021 12:51:36 -0400 Subject: [PATCH] replace tailwind with bootstrap: initial webpack config for development --- assets/css/_bs-load.scss | 50 ++++++++++++++++++++++++++++++++++++++++ assets/css/app.css | 5 ---- assets/css/app.scss | 13 +++++++++++ assets/js/main.js | 10 ++++++-- footer.php | 2 +- header.php | 2 +- package.json | 1 - postcss.config.js | 4 ++++ webpack.config.js | 38 ++++++++---------------------- 9 files changed, 86 insertions(+), 39 deletions(-) create mode 100644 assets/css/_bs-load.scss delete mode 100644 assets/css/app.css create mode 100644 assets/css/app.scss create mode 100644 postcss.config.js diff --git a/assets/css/_bs-load.scss b/assets/css/_bs-load.scss new file mode 100644 index 0000000..78984f6 --- /dev/null +++ b/assets/css/_bs-load.scss @@ -0,0 +1,50 @@ +/* Bootstrap custom variable overrides */ +@import "bs-custom"; + +// Required || Configuration +@import "../node_modules/bootstrap/scss/functions"; +@import "../node_modules/bootstrap/scss/variables"; + +/* Bootstrap custom variable overrides */ +@import "bs-colors"; + +// Required || Configuration -- CONTINUED +@import "../node_modules/bootstrap/scss/mixins"; +@import "../node_modules/bootstrap/scss/utilities"; + +// Optional || Layout & components +@import "../node_modules/bootstrap/scss/root"; +@import "../node_modules/bootstrap/scss/reboot"; +@import "../node_modules/bootstrap/scss/type"; +@import "../node_modules/bootstrap/scss/images"; +@import "../node_modules/bootstrap/scss/containers"; +@import "../node_modules/bootstrap/scss/grid"; +// @import "../node_modules/bootstrap/scss/tables"; +@import "../node_modules/bootstrap/scss/forms"; +@import "../node_modules/bootstrap/scss/buttons"; +@import "../node_modules/bootstrap/scss/transitions"; +// @import "../node_modules/bootstrap/scss/dropdown"; +// @import "../node_modules/bootstrap/scss/button-group"; +@import "../node_modules/bootstrap/scss/nav"; +@import "../node_modules/bootstrap/scss/navbar"; +// @import "../node_modules/bootstrap/scss/card"; +// @import "../node_modules/bootstrap/scss/accordion"; +// @import "../node_modules/bootstrap/scss/breadcrumb"; +// @import "../node_modules/bootstrap/scss/pagination"; +// @import "../node_modules/bootstrap/scss/badge"; +// @import "../node_modules/bootstrap/scss/alert"; +// @import "../node_modules/bootstrap/scss/progress"; +// @import "../node_modules/bootstrap/scss/list-group"; +// @import "../node_modules/bootstrap/scss/close"; +// @import "../node_modules/bootstrap/scss/toasts"; +// @import "../node_modules/bootstrap/scss/modal"; +// @import "../node_modules/bootstrap/scss/tooltip"; +// @import "../node_modules/bootstrap/scss/popover"; +// @import "../node_modules/bootstrap/scss/carousel"; +// @import "../node_modules/bootstrap/scss/spinners"; + +// Helpers +@import "../node_modules/bootstrap/scss/helpers"; + +// Utilities +@import "../node_modules/bootstrap/scss/utilities/api"; diff --git a/assets/css/app.css b/assets/css/app.css deleted file mode 100644 index 2fa4095..0000000 --- a/assets/css/app.css +++ /dev/null @@ -1,5 +0,0 @@ -@import "tailwindcss/base"; -@import "tailwindcss/components"; -@import "tailwindcss/utilities"; -@import "whitelist/whitelist.css"; -@import "conditional/conditional.css"; diff --git a/assets/css/app.scss b/assets/css/app.scss new file mode 100644 index 0000000..03aaf7d --- /dev/null +++ b/assets/css/app.scss @@ -0,0 +1,13 @@ +// @import "tailwindcss/base"; +// @import "tailwindcss/components"; +// @import "tailwindcss/utilities"; +// @import "whitelist/whitelist.css"; +// @import "conditional/conditional.css"; + +// /* Fonts */ +// @import "fonts"; + +// /* Load Bootstrap v5 and customizations */ +// @import "bs-load"; + +@import "../../node_modules/bootstrap/scss/bootstrap.scss" \ No newline at end of file diff --git a/assets/js/main.js b/assets/js/main.js index f795ad9..f16ecf0 100644 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -1,5 +1,11 @@ -// Build CSS -import '../css/app.css' +// Import SCSS +import '../css/app.scss' + +// Import Bootstrap JS +import 'bootstrap/js/dist/collapse'; +import 'bootstrap/js/dist/alert'; +import 'bootstrap/js/dist/button'; +import 'bootstrap/js/dist/dropdown'; // Import JS Modules import menu_init from './modules/menu' diff --git a/footer.php b/footer.php index 530ad1d..bd52712 100644 --- a/footer.php +++ b/footer.php @@ -19,7 +19,7 @@ namespace WP_73k;
-

WP Tailwind is a utility-first starter theme for WordPress by Freeshifter LLC and is totally free! Contribute on GitHub

+

73k.us is © 2021 by Adam Piontek

diff --git a/header.php b/header.php index 618f14d..76f385b 100644 --- a/header.php +++ b/header.php @@ -44,7 +44,7 @@ namespace WP_73k; $tag = 'h1'; } - printf( '<%1$s class="text-h1 m-0">%3$s', + printf( '<%1$s class="h1 m-0">%3$s', $tag, esc_url( home_url( '/' ) ), esc_html( get_bloginfo( 'name' ) ) diff --git a/package.json b/package.json index 9b65f2b..8984774 100644 --- a/package.json +++ b/package.json @@ -38,7 +38,6 @@ "cross-env": "^7.0.2", "css-loader": "^5.x", "css-minimizer-webpack-plugin": "^3.x", - "cssnano": "^4.1.10", "imagemin-webpack-plugin": "^2.4.2", "mini-css-extract-plugin": "^1.x", "postcss": "^8.2.6", diff --git a/postcss.config.js b/postcss.config.js new file mode 100644 index 0000000..83c2be1 --- /dev/null +++ b/postcss.config.js @@ -0,0 +1,4 @@ +module.exports = { + parser: require("postcss-scss"), + plugins: [require("autoprefixer")], +}; diff --git a/webpack.config.js b/webpack.config.js index 8179106..a8560e2 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -21,7 +21,6 @@ const post_css_plugins = [ // Add PurgeCSS for production builds. if ( isProduction ) { - post_css_plugins.push(require('cssnano')); post_css_plugins.push( PurgeCSS({ content: [ @@ -32,9 +31,9 @@ if ( isProduction ) { './assets/scss/whitelist/*.css', './../../mu-plugins/app/src/components/**/*.php', ], - css: [ - './node_modules/tailwindcss/dist/base.css' - ], + // css: [ + // './node_modules/tailwindcss/dist/base.css' + // ], // Use Extractor configuration from Tailwind Docs // https://tailwindcss.com/docs/controlling-file-size#setting-up-purge-css-manually defaultExtractor: content => { @@ -74,28 +73,11 @@ const config = { { test: /\.[s]?css$/, use: [ - MiniCssExtractPlugin.loader, - { - loader: 'css-loader', - options: { - importLoaders: 1, - sourceMap: ! isProduction - } - }, - { - loader: 'sass-loader' - }, - { - loader: 'postcss-loader', - options: { - sourceMap: isProduction || false, - postcssOptions: { - parser: require("postcss-scss"), - plugins: post_css_plugins, - } - }, - } - ], + MiniCssExtractPlugin.loader, + "css-loader", + "sass-loader", + "postcss-loader", + ], } ] }, @@ -110,9 +92,7 @@ const config = { } }, plugins: [ - new MiniCssExtractPlugin({ - filename: `[name]${prefix}.css`, - }), + new MiniCssExtractPlugin({ filename: `[name]${prefix}.css` }), new CopyWebpackPlugin({ patterns: [{ from: './assets/images/',