Merge branch 'main' into 174-seo

* main:
  fix: Get stylelint working again (#182)
  feat: Next 12 upgrade (#180)
  feat: bumping husky to version 7 (#179)

.vscode/settings.json

@@ -2,22 +2,8 @@
   // Global default is to use VS Code prettier plugin
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "editor.formatOnSave": true,
-  // For our JS and SCSS Files, we want project defined versions
-  // "[javascript]": {
-  //   "editor.formatOnSave": false
-  // },
-  // "[javascriptreact]": {
-  //   "editor.formatOnSave": false
-  // },
-  // "[typescript]": {
-  //   "editor.formatOnSave": false
-  // },
-  // "[typescriptreact]": {
-  //   "editor.formatOnSave": false
-  // },
-  "[scss]": {
-    "editor.formatOnSave": false
-  },
+  // As of version 14, stylelint needs to be told to validate SCSS
+  "stylelint.validate": ["css", "scss"],
   // Turn on auto-fixing for project defined linters.
   "editor.codeActionsOnSave": {
     // For ESLint

website/.githooks/post-merge.sh → website/.husky/post-merge

@@ -1,4 +1,5 @@
 #!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
 
 function changed {
   git diff --name-only HEAD@{1} HEAD | grep "^$1" > /dev/null 2>&1
@@ -7,6 +8,3 @@ function changed {
 if changed 'yarn.lock'; then
   echo "📦 yarn.lock changed. Run yarn install to bring your dependencies up to date."
 fi
-
-# todo: check for changes to acf-json folder
-chmod -R 777 ../wordpress/wp-content/themes/headless/acf-json

website/.husky/pre-commit

@@ -0,0 +1,5 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+cd website
+yarn lint-staged

website/.stylelintrc.json

@@ -2,16 +2,24 @@
   "extends": [
     "stylelint-config-idiomatic-order",
     "stylelint-config-standard",
+    "stylelint-config-standard-scss",
     "stylelint-prettier/recommended"
   ],
   "fix": true,
   "formatter": "verbose",
   "plugins": ["stylelint-scss"],
   "rules": {
-    "at-rule-no-unknown": null,
-    "scss/at-rule-no-unknown": true,
     "selector-pseudo-class-no-unknown": null,
     "max-nesting-depth": 3,
+    "scss/comment-no-empty": null,
+    "selector-class-pattern": null,
+    "selector-id-pattern": null,
+    "scss/at-import-no-partial-leading-underscore": null,
+    "scss/dollar-variable-pattern": null,
+    "scss/no-global-function-names": null,
+    "scss/at-extend-no-missing-placeholder": null,
+    "declaration-block-no-redundant-longhand-properties": null,
+    "color-function-notation": "legacy",
     "at-rule-empty-line-before": [
       "always",
       {

website/package.json

@@ -15,50 +15,45 @@
     "stylelint:fix": "npx stylelint '**/*.scss' --fix",
     "eslint": "npx eslint '**/*.{js,jsx,ts,tsx}'",
     "eslint:fix": "npx eslint '**/*.{js,jsx,ts,tsx}' --fix",
-    "analyze": "cross-env ANALYZE=true yarn build"
+    "analyze": "cross-env ANALYZE=true yarn build",
+    "prepare": "cd .. && husky install website/.husky && chmod ug+x website/.husky/* || true"
   },
   "author": "Patronage.org",
   "license": "private",
   "dependencies": {
-    "@popperjs/core": "^2.9.3",
-    "bootstrap": "^5.1.0",
+    "@popperjs/core": "^2.10.2",
+    "bootstrap": "^5.1.3",
     "classnames": "^2.3.1",
-    "dayjs": "^1.10.6",
+    "dayjs": "^1.10.7",
     "isomorphic-unfetch": "^3.1.0",
-    "next": "^11.1.0",
-    "next-seo": "^4.26.0",
+    "next": "^12.0.4",
+    "next-seo": "^4.28.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-icons": "^4.2.0",
-    "sass": "^1.38.1",
-    "slugify": "^1.6.0",
+    "react-icons": "^4.3.1",
+    "sass": "^1.43.4",
+    "slugify": "^1.6.2",
     "widont": "^0.3.3"
   },
   "devDependencies": {
-    "@next/bundle-analyzer": "^11.1.0",
+    "@next/bundle-analyzer": "^12.0.4",
     "babel-eslint": "^10.1.0",
     "cross-env": "^7.0.3",
-    "eslint": "^7.32.0",
-    "eslint-config-next": "^11.1.0",
+    "eslint": "<8.0.0",
+    "eslint-config-next": "^12.0.4",
     "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-import": "^2.24.2",
-    "eslint-plugin-react": "^7.24.0",
-    "eslint-plugin-react-hooks": "^4.2.0",
-    "husky": "^4.3.8",
-    "lint-staged": "^11.1.2",
-    "prettier": "^2.3.2",
-    "stylelint": "^13.13.1",
+    "eslint-plugin-import": "^2.25.3",
+    "eslint-plugin-react": "^7.27.1",
+    "eslint-plugin-react-hooks": "^4.3.0",
+    "husky": "^7.0.4",
+    "lint-staged": "^12.0.3",
+    "prettier": "^2.4.1",
+    "stylelint": "^14.1.0",
     "stylelint-config-idiomatic-order": "^8.1.0",
-    "stylelint-config-prettier": "^8.0.2",
-    "stylelint-config-standard": "^22.0.0",
-    "stylelint-prettier": "^1.2.0",
-    "stylelint-scss": "^3.20.1"
-  },
-  "husky": {
-    "hooks": {
-      "pre-commit": "lint-staged",
-      "post-merge": "./.githooks/post-merge.sh"
-    }
+    "stylelint-config-prettier": "^9.0.3",
+    "stylelint-config-standard-scss": "^3.0.0",
+    "stylelint-prettier": "^2.0.0",
+    "stylelint-scss": "^4.0.0"
   },
   "lint-staged": {
     "*.{js,jsx,ts,tsx}": "eslint --fix",

website/src/components/Footer.module.scss

@@ -1,4 +1,4 @@
-@import 'styles/_scaffold';
+@import 'styles/scaffold';
 
 .footer {
   border-top: 4px solid $primary;

website/src/components/Header.module.scss

@@ -1,4 +1,4 @@
-@import 'styles/_scaffold';
+@import 'styles/scaffold';
 
 .header {
   padding-top: 30px;
@@ -47,6 +47,7 @@
   background: rgba($primary, 1);
   color: $white;
   opacity: 0;
+
   // transition: all 0.5s ease-in-out;
   // transition: opacity 1.35s ease-in-out;
   transition: opacity 1s ease-in-out;

website/src/components/flex/FlexBlockquote.module.scss

@@ -1,4 +1,4 @@
-@import 'styles/_scaffold';
+@import 'styles/scaffold';
 
 .quote {
   font-style: italic;

website/src/components/flex/FlexHero.module.scss

@@ -1,3 +1,3 @@
-@import 'styles/_scaffold';
+@import 'styles/scaffold';
 
 // .hero-image {}

website/src/components/flex/FlexWysiwyg.module.scss

@@ -1,4 +1,4 @@
-@import 'styles/_scaffold';
+@import 'styles/scaffold';
 
 //
 // Variants

website/src/components/post/PostBody.module.scss

@@ -1,4 +1,5 @@
-@import 'styles/_scaffold.scss';
+@import 'styles/scaffold';
+
 // WordPress Generated Classes
 // http://codex.wordpress.org/CSS#WordPress_Generated_Classes
 

website/src/components/post/PostFooter.module.scss

@@ -1,4 +1,4 @@
-@import 'styles/_scaffold.scss';
+@import 'styles/scaffold';
 
 .post-footer {
   margin-top: 20px;

website/src/components/post/PostHeader.module.scss

@@ -1,4 +1,4 @@
-@import 'styles/_scaffold.scss';
+@import 'styles/scaffold';
 
 .post-header {
   h1 {

website/src/styles/_custom.scss

@@ -44,6 +44,7 @@ $purple: #9145cd;
 $color-email: #138bfd;
 $color-facebook: #3b5998;
 $color-twitter: #55acee;
+
 // bootstrap theme colors
 // must restate defaults in order to merge in our custom
 $primary: $blue;

website/src/styles/_scaffold.scss

@@ -1,5 +1,5 @@
 @import 'styles/shared/utils';
 @import '~bootstrap/scss/functions';
 @import '~bootstrap/scss/variables';
-@import 'styles/_custom.scss';
+@import 'styles/custom';
 @import '~bootstrap/scss/mixins';

website/src/styles/shared/_type.scss

@@ -11,6 +11,7 @@ h1 {
     text-decoration: none;
   }
 }
+
 // Bottom margin only
 
 h1,

website/src/styles/shared/_utils.scss

@@ -1,4 +1,4 @@
-@use "sass:math"; // for / div replacement
+@use 'sass:math'; // for / div replacement
 
 // foundation's function
 // https://gist.github.com/kylewebdev/f36acbfd2e9257d88253
@@ -11,9 +11,11 @@ $rem-base: 16px;
 @function convert-to-rem($value, $base-value: $rem-base) {
   $value: math.div(strip-unit($value), strip-unit($base-value)) * 1rem;
 
-  @if ($value == 0) {
+  @if $value == 0 {
     $value: 0;
-  } // Turn 0rem into 0
+  }
+
+  // Turn 0rem into 0
 
   @return $value;
 }