PIE - v1.18.0 - Fix various windows issues (sass and builds) (#44)

jamieomaguire · xander-marjoram · ashleynolan · web-flow · commit a8890233be3f · 2022-11-04T09:30:34.000Z
* remove dist on yarn dev

* use rimraf package

* Downgrade yarn to v1 and re-structure yarn scripts

* update readme

* fake commit

* another test commit

* use test:ci in husky

* remove temp scss change

* update versions and changelogs

* fix typo

* use actions/cache@v3

* update install command

* try to fix yarn install

* try to fix yarn install again

* rebuild yarn lock

* convert build.sh to javascript in pie-icons

* revert to using yarn test in pre-commit

* remove test from pre-commit

* update changelogs

* lock node version at 16

* update changelog

* add quotes to mkdir for windows

* update changelog to explain yarn downgrade

* BREAKING: revert yarn downgrade

* Yarn 2+ Husky config

* RACE CONDITION: sass reload works but out of order with browser reload

* add trivial delay to page reload

* Use eleventy-sass plugin

* Add version hashing (and cleaning of old versions)

* update readme and clean dist on yarn dev command

* change heading used in readme

* update changelogs

* add back yarn 2 requirement and steps to readme

* Update README.md

Co-authored-by: Xander Marjoram &lt;xander.marjoram@outlook.com&gt;

* add back in removed package manager line

* move licence line back to original place

* Update apps/pie-microsite/CHANGELOG.md

Co-authored-by: Ashley Watson-Nolan &lt;ashley.watson-nolan@justeattakeaway.com&gt;

* Update apps/pie-microsite/CHANGELOG.md

Co-authored-by: Ashley Watson-Nolan &lt;ashley.watson-nolan@justeattakeaway.com&gt;

Co-authored-by: Xander Marjoram &lt;xander.marjoram@outlook.com&gt;
Co-authored-by: Ashley Watson-Nolan &lt;ashley.watson-nolan@justeattakeaway.com&gt;
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
@@ -31,7 +31,7 @@ jobs:
       # Restore node_modules if cache exists. If not, cache is created at end of build.
       - name: Cache Node Modules
         id: cache-node-modules
-        uses: actions/cache@v2
+        uses: actions/cache@v3
         with:
           path: '**/node_modules'
           key: node-modules-${{ hashFiles('**/yarn.lock') }}
@@ -56,14 +56,14 @@ jobs:
       # Restore node_modules - Cache should exist as one was created in previous 'install' job
       - name: Cache Node Modules
         id: cache-node-modules
-        uses: actions/cache@v2
+        uses: actions/cache@v3
         with:
           path: '**/node_modules'
           key: node-modules-${{ hashFiles('**/yarn.lock') }}
       # Restore Turborepo's 'dist' cache - If not, cache is created at end of build.
       - name: Cache Turborepo Dist
         id: turborepo-dist-cache
-        uses: actions/cache@v2
+        uses: actions/cache@v3
         with:
           path: .turbo
           key: turborepo-dist-cache-${{ github.ref_name }}-${{ github.sha }}
@@ -101,14 +101,14 @@ jobs:
         # Restore node_modules - Cache should exist as one was created in previous 'install' job
         - name: Cache Node Modules
           id: cache-node-modules
-          uses: actions/cache@v2
+          uses: actions/cache@v3
           with:
             path: '**/node_modules'
             key: node-modules-${{ hashFiles('**/yarn.lock') }}
         # Restore Turborepo's 'dist' cache - If not, cache is created at end of build.
         - name: Cache Turborepo Dist
           id: turborepo-dist-cache
-          uses: actions/cache@v2
+          uses: actions/cache@v3
           with:
             path: .turbo
             key: turborepo-dist-cache-${{ github.ref_name }}-${{ github.sha }}
diff --git a/.gitignore b/.gitignore
@@ -153,3 +153,5 @@ esm
 .turbo
 build/**
 dist/**
+
+.plugin-clean
diff --git a/.husky/pre-commit b/.husky/pre-commit
@@ -17,4 +17,3 @@ git-secrets --pre_commit_hook -- "$@"
 
 yarn lint:scripts
 yarn lint:style
-yarn test
diff --git a/.nvmrc b/.nvmrc
@@ -0,0 +1 @@
+v16
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -3,6 +3,21 @@
 The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
+
+v1.18.0
+------------------------------
+*November 1, 2022*
+
+### Added
+- `nvmrc` file to lock the node version at 16 for local development
+
+### Changed
+- Use `actions/cache@v3` instead of `v2` to use Node 16 (was 12 before)
+
+### Removed
+- Remove `test` command in `husky` to prevent building entire monorepo on each commit
+
+
 v1.17.0
 ------------------------------
 *October 22, 2022*
diff --git a/README.md b/README.md
@@ -21,7 +21,7 @@
 
 ## To Run
 
-- From the root run `yarn dev`
+- From the root run `yarn dev --filter=YOUR_PROJECT_NAME` (otherwise it will try to run all projects in dev mode)
 
 ## Helpful Links
 
@@ -33,3 +33,20 @@
 #### Turborepo
 
 - https://turborepo.org/docs
+
+---
+
+## Running project-level commands that rely on root-level dependencies
+If you have a project-level command, such as `yarn lint:style` within the pie-microsite project, you will see that it has `run -T` in front of the `stylelint` command.
+
+This is because `stylelint` is a root-level dependency (so it can shared across monorepo projects). The problem is that if you cd into `/apps/pie-microsite` and run the command, you will get a `command not found` error because `stylelint` does not exist at the project level.
+
+Using the `run -T` expression will tell yarn to look in the root of the repository for that dependency.
+
+Example:
+
+```
+"lint:style": "run -T stylelint ./src/**/*.{css,scss}"
+```
+
+[Yarn docs reference for this](https://yarnpkg.com/getting-started/qa#how-to-share-scripts-between-workspaces)
diff --git a/apps/pie-microsite/.eleventy.js b/apps/pie-microsite/.eleventy.js
@@ -6,15 +6,12 @@ const {
 } = require('./src/_11ty');
 
 module.exports = eleventyConfig => {
-  // Watch target scss folder for all changes.
-  eleventyConfig.addWatchTarget('src/assets/styles/');
-
   // Copy over img directory to dist directory.
   eleventyConfig.addPassthroughCopy({ 'src/assets/img': 'assets/img' });
 
   // Plugins
   plugins.addAllPlugins(eleventyConfig);
-  
+
   // Filters
   filters.addAllFilters(eleventyConfig);
 
diff --git a/apps/pie-microsite/CHANGELOG.md b/apps/pie-microsite/CHANGELOG.md
@@ -4,6 +4,22 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
 
+v1.18.0
+------------------------------
+*November 1, 2022*
+
+### Added
+- `eleventy-plugin-rev` to hash CSS
+
+### Changed
+- Re-structure yarn scripts for sass watching and compilation
+- Clear the previously compiled css in `/dist` when running `yarn dev` command to correctly reload on SCSS changes when serving
+- Use Eleventy plugins to compile SCSS to CSS (`eleventy-sass`, `eleventy-plugin-rev` and `eleventy-plugin-clean`)
+
+### Removed
+- Old sass and post-css yarn scripts
+
+
 v1.17.0
 ------------------------------
 *October 26, 2022*
diff --git a/apps/pie-microsite/package.json b/apps/pie-microsite/package.json
@@ -1,28 +1,27 @@
 {
   "name": "pie-microsite",
   "description": "todo",
-  "version": "1.17.0",
+  "version": "1.18.0",
   "main": "index.js",
   "keywords": [],
   "author": "JustEatTakeaway - Vue Design System Team",
   "license": "MIT",
   "packageManager": "yarn@3.2.1",
   "scripts": {
-    "watch:sass": "sass --watch --load-path=../../node_modules/ src/assets/styles:dist/assets/styles",
-    "watch:eleventy": "eleventy --serve",
-    "build:sass": "sass --load-path=../../node_modules/ src/assets/styles:dist/assets/styles",
-    "build:eleventy": "eleventy",
-    "dev": "npm-run-all build:sass --parallel watch:sass watch:eleventy post-css",
-    "build": "npm-run-all build:eleventy build:sass post-css",
-    "lint:style": "stylelint ./src/**/*.{css,scss}",
-    "lint:style:fix": "yarn lint:style --fix",
-    "post-css": "postcss dist/assets/styles/main.css -o dist/assets/styles/main.css --use autoprefixer --use cssnano"
+    "build": "eleventy",
+    "clean:dist": "run -T rimraf dist",
+    "dev": "yarn clean:dist && eleventy --serve",
+    "lint:style": "run -T stylelint ./src/**/*.{css,scss}",
+    "lint:style:fix": "yarn lint:style --fix"
   },
   "browserslist": [
     "extends @justeat/browserslist-config-fozzie"
   ],
   "devDependencies": {
-    "@11ty/eleventy": "1.0.1",
-    "@11ty/eleventy-navigation": "^0.3.3"
+    "@11ty/eleventy": "1.0.2",
+    "@11ty/eleventy-navigation": "0.3.5",
+    "eleventy-plugin-clean": "1.1.3",
+    "eleventy-plugin-rev": "1.0.2",
+    "eleventy-sass": "2.1.3"
   }
 }
diff --git a/apps/pie-microsite/src/_11ty/plugins/index.js b/apps/pie-microsite/src/_11ty/plugins/index.js
@@ -1,11 +1,34 @@
 const eleventyNavigationPlugin = require('@11ty/eleventy-navigation');
 
+const eleventySass = require('eleventy-sass');
+const eleventyPluginRev = require('eleventy-plugin-rev');
+const eleventyPluginClean = require('eleventy-plugin-clean');
+
+const postcss = require('postcss');
+const autoprefixer = require('autoprefixer');
+const cssnano = require('cssnano');
+
 /**
  * Adds all 11ty plugins
- * @param {object} eleventyConfig 
+ * @param {object} eleventyConfig
  */
 const addAllPlugins = eleventyConfig => {
   eleventyConfig.addPlugin(eleventyNavigationPlugin);
+  eleventyConfig.addPlugin(eleventyPluginRev);
+  eleventyConfig.addPlugin(eleventyPluginClean);
+  eleventyConfig.addPlugin(eleventySass, {
+    postcss: postcss([
+      autoprefixer,
+      cssnano
+    ]),
+    rev: true,
+    sass: {
+      loadPaths: [
+        '../../node_modules/'
+      ],
+      sourceMap: true,
+    }
+  });
 };
 
 module.exports = {
diff --git a/apps/pie-microsite/src/_includes/head-common.njk b/apps/pie-microsite/src/_includes/head-common.njk
@@ -27,4 +27,4 @@
         font-feature-settings: "tnum"; /* Enable tabular numbers */
     }
 </style>
-<link rel="stylesheet" href="{{ '/assets/styles/main.css' | url }}" />
+<link rel="stylesheet" href="{{ '/assets/styles/main.css' | rev | url }}" />
diff --git a/package.json b/package.json
@@ -1,11 +1,12 @@
 {
   "name": "pie",
   "description": "JustEatTakeaway",
-  "version": "1.17.0",
+  "version": "1.18.0",
   "keywords": [],
   "author": "JustEatTakeaway - Vue Design System Team",
   "license": "MIT",
   "packageManager": "yarn@3.2.1",
+  "private": true,
   "engines": {
     "node": "^16"
   },
@@ -49,6 +50,7 @@
     "pinst": "3.0.0",
     "postcss": "8.4.16",
     "postcss-cli": "10.0.0",
+    "rimraf": "3.0.2",
     "sass": "1.54.0",
     "stylelint": "14.9.1",
     "stylelint-config-standard-scss": "5.0.0",
diff --git a/packages/tools/pie-icons/CHANGELOG.md b/packages/tools/pie-icons/CHANGELOG.md
@@ -3,6 +3,13 @@
 The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
+
+Latest – to be added to the next release
+------------------------------
+### Changed
+- Convert `build.sh` to `build.js` to enable Windows users to build the project locally
+
+
 v2.0.0-beta.2
 ------------------------------
 *October 7, 2022*
diff --git a/packages/tools/pie-icons/bin/build.js b/packages/tools/pie-icons/bin/build.js
@@ -0,0 +1,34 @@
+const { execSync } = require('child_process');
+
+console.log('Clearing old svgs');
+execSync('npx rimraf src/assets/optimised');
+
+console.log('Making src/assets/optimised directory');
+execSync('mkdir "src/assets/optimised"');
+
+// Process SVG files (Optimise)
+console.log('Optimising SVGS');
+execSync('npx babel-node bin/process-svgs.js');
+
+// Create dist directory
+console.log('Creating dist directory');
+execSync('npx rimraf dist');
+execSync('mkdir dist');
+
+// Build icons.json
+console.log('Building icons.json');
+execSync('npx babel-node bin/build-icons-json.js');
+
+// Create dist/icons directory
+console.log('Creating dist/icons directory');
+execSync('npx rimraf dist/icons');
+execSync('mkdir "dist/icons"');
+
+// Build SVG icons
+console.log('Building SVG icons');
+execSync('npx babel-node bin/build-svgs.js');
+
+// Build JavaScript library
+console.log('Building JavaScript library');
+execSync('npx webpack --output-filename pie-icons.js --mode development');
+execSync('npx webpack --output-filename pie-icons.min.js --mode production');
diff --git a/packages/tools/pie-icons/bin/build.sh b/packages/tools/pie-icons/bin/build.sh
diff --git a/packages/tools/pie-icons/package.json b/packages/tools/pie-icons/package.json
@@ -14,7 +14,7 @@
   ],
   "scripts": {
     "nodemon": "nodemon --config ./nodemon.json",
-    "build": "./bin/build.sh",
+    "build": "node ./bin/build.js",
     "prepare": "yarn build && yarn test:coverage",
     "clean": "rimraf -rf ./dist/*",
     "prepublishOnly": "yarn run build",
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -17,4 +17,3 @@ git-secrets --pre_commit_hook -- "$@"`
`17`	`17`
`18`	`18`	`yarn lint:scripts`
`19`	`19`	`yarn lint:style`
`20`		`-yarn test`