From 56f70e7c671a14b3bf47bc16537a637421ea95cb Mon Sep 17 00:00:00 2001 From: Josh Smith Date: Tue, 17 Nov 2020 19:56:49 +1300 Subject: [PATCH 1/5] feat(package.json): upgrade min package versions --- package.json | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/package.json b/package.json index 80ee1d7..da13da9 100644 --- a/package.json +++ b/package.json @@ -45,21 +45,21 @@ "core-js": "3.6.5", "js-event-bus": "^1.0.3", "regenerator-runtime": "^0.13.7", - "tailwindcss": "^1.9.4", + "tailwindcss": "^1.9.6", "vue": "^2.6.12" }, "devDependencies": { "@babel/core": "^7.12.3", "@babel/plugin-transform-modules-commonjs": "^7.12.1", "@babel/preset-env": "^7.12.1", - "@batch/craft-webpack": "^1.3.0", - "@testing-library/dom": "^7.26.0", - "@testing-library/jest-dom": "^5.11.4", - "@testing-library/user-event": "^12.1.8", - "@testing-library/vue": "^5.1.0", + "@batch/craft-webpack": "^1.4.3", + "@testing-library/dom": "^7.26.6", + "@testing-library/jest-dom": "^5.11.6", + "@testing-library/user-event": "^12.2.2", + "@testing-library/vue": "^5.3.1", "babel-core": "^7.0.0-bridge.0", - "babel-jest": "^26.5.2", - "jest": "^26.5.3", + "babel-jest": "^26.6.3", + "jest": "^26.6.3", "vue-jest": "^3.0.7" }, "author": "Josh Smith ", From 32e1221aa6d12207c0982386eb6c3b2a73811c0e Mon Sep 17 00:00:00 2001 From: Josh Smith Date: Tue, 17 Nov 2020 19:58:11 +1300 Subject: [PATCH 2/5] chore(app.js): prettier formatting --- src/js/app.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/js/app.js b/src/js/app.js index efc0786..f7b42f2 100755 --- a/src/js/app.js +++ b/src/js/app.js @@ -12,12 +12,12 @@ const main = async () => { return { Vue, - axios + axios, }; }; // Execute async function -main().then(components => { +main().then((components) => { const { Vue, axios } = components; // Add a global instance of axios to Vue @@ -29,11 +29,11 @@ main().then(components => { el: "#app", components: { HelloWorld: () => - import(/* webpackChunkName: "HelloWorld" */ "../vue/HelloWorld.vue") + import(/* webpackChunkName: "HelloWorld" */ "../vue/HelloWorld.vue"), }, mounted() { window.app.emit("vue-mounted"); - } + }, }); /* eslint-enable no-unused-vars */ }); From 2448efcd09143b92fe3137d286590d67f1264ea3 Mon Sep 17 00:00:00 2001 From: Josh Smith Date: Tue, 17 Nov 2020 20:02:56 +1300 Subject: [PATCH 3/5] feat(tailwindcss): modularised tailwind imports --- src/css/app-base.css | 12 ++++++++++++ src/css/app-components.css | 21 +++++++++++++++++++++ src/css/app-utilities.css | 6 ++++++ src/css/app.css | 10 ---------- src/js/app.js | 6 ++++-- 5 files changed, 43 insertions(+), 12 deletions(-) create mode 100755 src/css/app-base.css create mode 100755 src/css/app-components.css create mode 100755 src/css/app-utilities.css delete mode 100755 src/css/app.css diff --git a/src/css/app-base.css b/src/css/app-base.css new file mode 100755 index 0000000..4945a13 --- /dev/null +++ b/src/css/app-base.css @@ -0,0 +1,12 @@ +/** + * This injects Tailwind's base styles, which is a combination of + * Normalize.css and some additional base styles. + */ +@import "tailwindcss/base"; + +/** + * Here we add custom base styles, applied after the tailwind-base + * classes + * + */ +@import "./fonts.css"; diff --git a/src/css/app-components.css b/src/css/app-components.css new file mode 100755 index 0000000..d56acfc --- /dev/null +++ b/src/css/app-components.css @@ -0,0 +1,21 @@ +/** + * This injects any component classes registered by plugins. + * + */ +@import "tailwindcss/components"; + +/** + * Here we add custom component classes; stuff we want loaded + * *before* the utilities so that the utilities can still + * override them. + * + */ + +/* @import components/my-component.css */ + +/** + * Include styles for individual pages + * + */ + +/* @import pages/home.css */ diff --git a/src/css/app-utilities.css b/src/css/app-utilities.css new file mode 100755 index 0000000..9a33ec7 --- /dev/null +++ b/src/css/app-utilities.css @@ -0,0 +1,6 @@ +/** + * This injects all of Tailwind's utility classes, generated based on your + * config file. + * + */ +@import "tailwindcss/utilities"; diff --git a/src/css/app.css b/src/css/app.css deleted file mode 100755 index 5147faa..0000000 --- a/src/css/app.css +++ /dev/null @@ -1,10 +0,0 @@ -@import './fonts.css'; - -@import 'tailwindcss/base'; -@import 'tailwindcss/components'; - -/* Component includes go here */ - -@import 'tailwindcss/utilities'; - -/* Utility includes go here */ diff --git a/src/js/app.js b/src/js/app.js index f7b42f2..af04162 100755 --- a/src/js/app.js +++ b/src/js/app.js @@ -1,5 +1,7 @@ /* eslint-disable no-unused-vars */ -import styles from "../css/app.css"; +import "#css/app-base.css"; +import "#css/app-components.css"; +import "#css/app-utilities.css"; /* eslint-enable no-unused-vars */ const main = async () => { @@ -29,7 +31,7 @@ main().then((components) => { el: "#app", components: { HelloWorld: () => - import(/* webpackChunkName: "HelloWorld" */ "../vue/HelloWorld.vue"), + import(/* webpackChunkName: "HelloWorld" */ "#vue/HelloWorld.vue"), }, mounted() { window.app.emit("vue-mounted"); From 82137f2b446279f1c8464396ab40e2bec986fc68 Mon Sep 17 00:00:00 2001 From: Josh Smith Date: Wed, 18 Nov 2020 09:25:50 +1300 Subject: [PATCH 4/5] chore(app.js): remove unneeded eslint hints --- src/js/app.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/js/app.js b/src/js/app.js index af04162..ddd48d8 100755 --- a/src/js/app.js +++ b/src/js/app.js @@ -1,8 +1,6 @@ -/* eslint-disable no-unused-vars */ import "#css/app-base.css"; import "#css/app-components.css"; import "#css/app-utilities.css"; -/* eslint-enable no-unused-vars */ const main = async () => { // Async load dependencies From eb61ec266cf0964f278e48396eca5942feb5e4cc Mon Sep 17 00:00:00 2001 From: Josh Smith Date: Thu, 19 Nov 2020 16:02:49 +1300 Subject: [PATCH 5/5] feat(styles): add base css structure --- src/css/app-base.css | 3 ++- src/css/app-components.css | 9 +-------- src/css/app-utilities.css | 6 ++++++ src/css/{ => base}/fonts.css | 0 src/css/base/variables.css | 3 +++ src/css/components/my-component.css | 3 +++ src/css/utilities/my-utility.css | 3 +++ 7 files changed, 18 insertions(+), 9 deletions(-) rename src/css/{ => base}/fonts.css (100%) create mode 100644 src/css/base/variables.css create mode 100644 src/css/components/my-component.css create mode 100644 src/css/utilities/my-utility.css diff --git a/src/css/app-base.css b/src/css/app-base.css index 4945a13..23541ef 100755 --- a/src/css/app-base.css +++ b/src/css/app-base.css @@ -9,4 +9,5 @@ * classes * */ -@import "./fonts.css"; +@import "./base/fonts.css"; +@import "./base/variables.css"; diff --git a/src/css/app-components.css b/src/css/app-components.css index d56acfc..5978ade 100755 --- a/src/css/app-components.css +++ b/src/css/app-components.css @@ -11,11 +11,4 @@ * */ -/* @import components/my-component.css */ - -/** - * Include styles for individual pages - * - */ - -/* @import pages/home.css */ +@import "./components/my-component.css"; diff --git a/src/css/app-utilities.css b/src/css/app-utilities.css index 9a33ec7..6bebe72 100755 --- a/src/css/app-utilities.css +++ b/src/css/app-utilities.css @@ -4,3 +4,9 @@ * */ @import "tailwindcss/utilities"; + +/** + * Here we add custom utility classes + * + */ +@import "./utilities/my-utility.css"; diff --git a/src/css/fonts.css b/src/css/base/fonts.css similarity index 100% rename from src/css/fonts.css rename to src/css/base/fonts.css diff --git a/src/css/base/variables.css b/src/css/base/variables.css new file mode 100644 index 0000000..f6ee02b --- /dev/null +++ b/src/css/base/variables.css @@ -0,0 +1,3 @@ +/** + * Variables + */ diff --git a/src/css/components/my-component.css b/src/css/components/my-component.css new file mode 100644 index 0000000..7a7cd25 --- /dev/null +++ b/src/css/components/my-component.css @@ -0,0 +1,3 @@ +/** + * Example component + */ diff --git a/src/css/utilities/my-utility.css b/src/css/utilities/my-utility.css new file mode 100644 index 0000000..690155d --- /dev/null +++ b/src/css/utilities/my-utility.css @@ -0,0 +1,3 @@ +/** + * Example utility + */