replace tailwind with bootstrap: initial webpack config for development

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";

assets/css/app.css

@@ -1,5 +0,0 @@
-@import "tailwindcss/base";
-@import "tailwindcss/components";
-@import "tailwindcss/utilities";
-@import "whitelist/whitelist.css";
-@import "conditional/conditional.css";

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"

assets/js/main.js

@@ -1,5 +1,11 @@
-// Build CSS
+// Import SCSS
-import '../css/app.css'
+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'

footer.php

@@ -19,7 +19,7 @@ namespace WP_73k;
 					<div class="lg:flex lg:justify-between">
 						<div class="lg:w-1/4 text-center lg:text-left">
 							<div class="text-xl">
-								<p class="text-sm">WP Tailwind is a utility-first starter theme for WordPress by <a href="https://www.freeshifter.com">Freeshifter LLC</a> and is totally free! <a href="https://www.github.com/freeshifter/wp-73k">Contribute on GitHub</a></a></p>
+								<p class="text-sm">73k.us is &copy; 2021 by Adam Piontek</p>
 							</div>
 						</div>
 					</div>

header.php

@@ -44,7 +44,7 @@ namespace WP_73k;
 				$tag = 'h1';
 			}
 
-			printf( '<%1$s class="text-h1 m-0"><a class="text-xl no-underline uppercase" href="%2$s" rel="home">%3$s</a></%1$s>',
+			printf( '<%1$s class="h1 m-0"><a class="text-xl no-underline uppercase" href="%2$s" rel="home">%3$s</a></%1$s>',
 				$tag,
 				esc_url( home_url( '/' ) ),
 				esc_html( get_bloginfo( 'name' ) )

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",

postcss.config.js

@@ -0,0 +1,4 @@
+module.exports = {
+  parser: require("postcss-scss"),
+  plugins: [require("autoprefixer")],
+};

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: [
+			// css: [
-				'./node_modules/tailwindcss/dist/base.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,
+          MiniCssExtractPlugin.loader,
-					{
+          "css-loader",
-						loader: 'css-loader',
+          "sass-loader",
-						options: {
+          "postcss-loader",
-							importLoaders: 1,
+        ],
-							sourceMap: ! isProduction
-						}
-					},
-					{
-						loader: 'sass-loader'
-					},
-					{
-						loader: 'postcss-loader',
-						options: {
-							sourceMap: isProduction || false,
-							postcssOptions: {
-                parser: require("postcss-scss"),
-                plugins: post_css_plugins,
-              }
-						},
-					}
-				],
 			}
 		]
 	},
@@ -110,9 +92,7 @@ const config = {
 		}
 	},
 	plugins: [
-		new MiniCssExtractPlugin({
+		new MiniCssExtractPlugin({ filename: `[name]${prefix}.css` }),
-			filename: `[name]${prefix}.css`,
-		}),
 		new CopyWebpackPlugin({
 			patterns: [{
                         	from: './assets/images/',