Merge branch 'release/2.4.27' into craft-webpack

CHANGELOG.md

@@ -1,5 +1,15 @@
 # nystudio107/craft Change Log
 
+## 2.4.27 - 2021.03.22
+### Added
+* Added `make` command aliases
+
+### Changed
+* Use `@tailwindcss/jit` for the CSS generation
+
+### Fixed
+* Fix webpack buildchain pipeline
+
 ## 2.4.26 - 2021.03.07
 ### Changed
 * Use aliases for import paths

Makefile

@@ -0,0 +1,19 @@
+CONTAINER?=$(shell basename $(CURDIR))_php_1
+
+.PHONY: build dev pulldb restoredb up
+
+build: up
+	cd scripts/ && ./docker_prod_build.sh
+dev: up
+pulldb: up
+	cd scripts/ && ./docker_pull_db.sh
+restoredb: up
+	cd scripts/ && ./docker_restore_db.sh \
+		$(filter-out $@,$(MAKECMDGOALS))
+up:
+	if [ ! "$$(docker ps -q -f name=$${CONTAINER})" ]; then \
+        docker-compose up; \
+    fi
+%:
+	@:
+# ref: https://stackoverflow.com/questions/6273608/how-to-pass-argument-to-makefile-from-command-line

README.md

@@ -11,7 +11,7 @@ The project is based on [Craft CMS](https://CraftCMS.com) using a unique `templa
 * [webpack 5](https://webpack.js.org/) is used for the build system as per [An Annotated webpack 4 Config for Frontend Web Development](https://nystudio107.com/blog/an-annotated-webpack-4-config-for-frontend-web-development)
 * [TypeScript](https://www.typescriptlang.org/) for strictly typed JavaScript code
 * [Vue.js 3.0](https://vuejs.org/) is used for some of the interactive bits on the website, and Vue.js 3.x allows us to leverage the [Composition API](https://composition-api.vuejs.org/) 
-* [Tailwind CSS](https://tailwindcss.com/) for the site-wide CSS with CSS splitting as per the [Speeding Up Tailwind CSS Builds](https://nystudio107.com/blog/speeding-up-tailwind-css-builds) article
+* [Tailwind CSS](https://tailwindcss.com/) for the site-wide CSS using the [@tailwindcss/jit](https://blog.tailwindcss.com/just-in-time-the-next-generation-of-tailwind-css)
 * JSON-LD structured data as per [Annotated JSON-LD Structured Data Examples](https://nystudio107.com/blog/annotated-json-ld-structured-data-examples)
 * [Google AMP](https://developers.google.com/amp/) versions of the podcast episode and other pages
 * Image transforms are done via a [Serverless Image Handler](https://aws.amazon.com/solutions/serverless-image-handler/) lambda function, as described in the [Setting Up Your Own Image Transform Service](https://nystudio107.com/blog/setting-up-your-own-image-transform-service) article
@@ -56,28 +56,30 @@ You'll need Docker desktop for your platform installed to run the project in loc
 
 * Set up a `.env` file in the `cms/` directory, based off of the provided `example.env`
 * Set up a `.env.sh.` file in the `scripts/` directory, based off of the provided `example.env.sh`
-* Start up the site with `docker-compose up` (the first build will be somewhat lengthy)
+* Start up the site by typing `make dev` in terminal in the project's root directory (the first build will be somewhat lengthy)
 * Navigate to `http://localhost:8000` to use the site; the `webpack-dev-server` runs off of `http://localhost:8080`
 
 The CP login credentials are initially set as follows:
 
 Login: `[email protected]` \
 Password: `letmein`
 
-Obviously change these to whatever you like as needed
+Obviously change these to whatever you like as needed.
 
-**N.B.:** Without authorization & credentials (which are private), the `./docker_pull_db.sh` will not work. It's provided here for instructional purposes
+Build the production assets by typing `make build` to build the critical CSS, fonts, and other production assets. They will appear in `cms/web/dist/` (just double-click on the `report-legacy.html` and `report-modern.html` files to view them).
+
+**N.B.:** Without authorization & credentials (which are private), the `make pulldb` will not work (it just runs `scripts/docker_pull_db.sh`). It's provided here for instructional purposes.
 
 To update to the latest Composer packages (as constrained by the `cms/composer.json` semvers), do:
 ```
 rm cms/composer.lock
-docker-compose up
+make dev
 ```
 
 To update to the latest npm packages (as constrained by the `buildchain/package.json` semvers), do:
 ```
 rm buildchain/package-lock.json
-docker-compose up
+make dev
 ```
 
 To use Xdebug with VSCode install the [PHP Debug extension](https://marketplace.visualstudio.com/items?itemName=felixfbecker.php-debug ) and use the following configuration in your `.vscode/launch.json`:

buddy.yml

@@ -7,15 +7,15 @@
   actions:
     - action: "Execute: webpack build"
       type: "BUILD"
-      working_directory: "/buddy/$PROJECT_SHORTNAME"
-      docker_image_name: "nystudio107/webpack-dev-base"
-      docker_image_tag: "latest"
+      working_directory: "/buddy/${PROJECT_SHORTNAME}"
+      docker_image_name: "nystudio107/node-dev-base"
+      docker_image_tag: "14-alpine"
       execute_commands:
         - "cd buildchain"
-        - "npm ci"
+        - "npm install"
         - "npm run build"
       volume_mappings:
-        - "/:/buddy/$PROJECT_SHORTNAME"
+        - "/:/buddy/${PROJECT_SHORTNAME}"
       trigger_condition: "ALWAYS"
       shell: "BASH"
     - action: "Execute: composer install"
@@ -30,8 +30,6 @@
         - "echo \"memory_limit=-1\" >> /usr/local/etc/php/conf.d/buddy.ini"
         - "apk update && apk add git zip"
         - "curl -sS https://getcomposer.org/installer | php -- --install-dir=/usr/local/bin --filename=composer"
-        - "# php ext pdo_mysql"
-        - "docker-php-ext-install pdo_pgsql pgsql"
       volume_mappings:
         - "/:/buddy/$PROJECT_SHORTNAME"
       trigger_condition: "ALWAYS"
@@ -103,23 +101,6 @@
       trigger_condition: "ALWAYS"
       run_as_script: true
       shell: "BASH"
-    - action: "Send notification to nystudio107 channel"
-      type: "SLACK"
-      content: "[#$BUDDY_EXECUTION_ID] $BUDDY_EXECUTION_REVISION_SUBJECT - $BUDDY_EXECUTION_REVISION_COMMITTER_NAME"
-      blocks: "[{\"type\":\"section\",\"fields\":[{\"type\":\"mrkdwn\",\"text\":\"*Successful execution:* <$BUDDY_EXECUTION_URL|Execution #$BUDDY_EXECUTION_ID $BUDDY_EXECUTION_COMMENT>\"},{\"type\":\"mrkdwn\",\"text\":\"*Pipeline:* <$BUDDY_PIPELINE_URL|$BUDDY_PIPELINE_NAME>\"},{\"type\":\"mrkdwn\",\"text\":\"*Branch:* $BUDDY_EXECUTION_BRANCH\"},{\"type\":\"mrkdwn\",\"text\":\"*Project:* <$BUDDY_PROJECT_URL|$BUDDY_PROJECT_NAME>\"}]}]"
-      channel: "G6AKRT78V"
-      channel_name: "nystudio107"
-      trigger_condition: "ALWAYS"
-      integration_hash: "5ef0d26820cfeb531cb10738"
-    - action: "Send notification to nystudio107 channel"
-      type: "SLACK"
-      trigger_time: "ON_FAILURE"
-      content: "[#$BUDDY_EXECUTION_ID] $BUDDY_EXECUTION_REVISION_SUBJECT - $BUDDY_EXECUTION_REVISION_COMMITTER_NAME"
-      blocks: "[{\"type\":\"section\",\"fields\":[{\"type\":\"mrkdwn\",\"text\":\"*Failed execution:* <$BUDDY_EXECUTION_URL|Execution #$BUDDY_EXECUTION_ID $BUDDY_EXECUTION_COMMENT>\"},{\"type\":\"mrkdwn\",\"text\":\"*Pipeline:* <$BUDDY_PIPELINE_URL|$BUDDY_PIPELINE_NAME>\"},{\"type\":\"mrkdwn\",\"text\":\"*Branch:* $BUDDY_EXECUTION_BRANCH\"},{\"type\":\"mrkdwn\",\"text\":\"*Project:* <$BUDDY_PROJECT_URL|$BUDDY_PROJECT_NAME>\"}]}]"
-      channel: "G6AKRT78V"
-      channel_name: "nystudio107"
-      trigger_condition: "ALWAYS"
-      integration_hash: "5ef0d26820cfeb531cb10738"
   variables:
     - key: "PROJECT_SHORTNAME"
       value: "CHANGEME"

buildchain/package.json

@@ -44,7 +44,6 @@
   },
   "description": "Example Project brand website",
   "devDependencies": {
-    "autoprefixer": "^10.0.0",
     "@babel/core": "^7.12.3",
     "@babel/plugin-proposal-class-properties": "^7.12.1",
     "@babel/plugin-proposal-nullish-coalescing-operator": "^7.12.1",
@@ -57,11 +56,13 @@
     "@babel/register": "^7.12.1",
     "@babel/runtime": "^7.12.1",
     "@gfx/zopfli": "^1.0.15",
+    "@tailwindcss/jit": "latest",
     "@types/node": "^14.11.10",
     "@types/webpack-env": "^1.15.3",
     "@typescript-eslint/eslint-plugin": "^3.6.1",
     "@typescript-eslint/parser": "^3.6.1",
     "@vue/compiler-sfc": "^3.0.1",
+    "autoprefixer": "^10.0.0",
     "babel-loader": "^8.1.0",
     "clean-webpack-plugin": "^3.0.0",
     "compression-webpack-plugin": "^6.0.0",

buildchain/webpack-configs/postcss-loader.config.js

@@ -6,7 +6,7 @@ const path = require('path');
 
 // webpack plugins
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const TailwindCss = require('tailwindcss');
+const TailwindCssJit = require('@tailwindcss/jit');
 
 // return a webpack config
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -37,7 +37,7 @@ module.exports = (type = 'modern', settings) => {
                                         ['postcss-import', {
                                             path: ['./node_modules'],
                                         }],
-                                        TailwindCss('./tailwind.config.js'),
+                                        TailwindCssJit('./tailwind.config.js'),
                                         ['postcss-mixins', {
                                         }],
                                         ['postcss-nested', {

buildchain/webpack-settings/app.settings.js

@@ -13,9 +13,7 @@ module.exports = {
     entry: {
         'app': [
             '@/js/app.ts',
-            '@/css/app-base.pcss',
-            '@/css/app-components.pcss',
-            '@/css/app-utilities.pcss',
+            '@/css/app.pcss',
         ],
         'lazysizes-wrapper': [
             '@/js/utils/lazysizes-wrapper.ts',

docker-config/node-dev-webpack/Dockerfile

@@ -1,4 +1,4 @@
-FROM nystudio107/node-dev-base:12-alpine
+FROM nystudio107/node-dev-base:14-alpine
 
 WORKDIR /var/www/project/buildchain/
 

src/css/app-components.pcss → src/css/app.pcss

@@ -1,3 +1,15 @@
+/**
+ * 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
+ *
+ */
+
 /**
  * This injects any component classes registered by plugins.
  *
@@ -19,3 +31,16 @@
  *
  */
 @import './pages/homepage.pcss';
+
+/**
+ * This injects all of Tailwind's utility classes, generated based on your
+ * config file.
+ *
+ */
+@import 'tailwindcss/utilities';
+
+/**
+ * Include vendor css.
+ *
+ */
+@import 'vendor.pcss';