Version 8.0

.nvmrc

@@ -1 +1 @@
-v16.14.2
+v18.12.1

.storybook/main.js

@@ -1,4 +1,7 @@
 module.exports = {
+  core: {
+    builder: 'webpack5',
+  },
   stories: ['../**/*.story.js'],
   addons: [
     '@storybook/addon-actions',

.storybook/webpack.config.js

@@ -9,7 +9,11 @@ module.exports = async ({ config }) => {
   // Storysource-addon
   config.module.rules.push({
     test: /\.story\.jsx?$/,
-    loaders: [require.resolve('@storybook/source-loader')],
+    use: [
+      {
+        loader: require.resolve('@storybook/source-loader')
+      }
+    ],
     enforce: 'pre',
   })
   // Sass
@@ -39,5 +43,12 @@ module.exports = async ({ config }) => {
       src: path.resolve(__dirname, '../src'),
     },
   }
+  // Required for Node ^18.12.1 to resolve an OpenSSL configuraiton deprecation.
+  // See: https://stackoverflow.com/questions/69692842/error-message-error0308010cdigital-envelope-routinesunsupported/73465262#73465262
+  config.output = {
+    ...config.output,
+    hashFunction: 'xxhash64',
+  }
+
   return config
 }

.travis.yml

@@ -1,4 +1,5 @@
 language: node_js
+dist: focal
 cache: yarn
 before_script:
   - 'yarn lint --max-warnings=0'

README.md

@@ -27,6 +27,7 @@ Documentation and usage info can be found in [docs.md](docs.md).
 - [v5.0.0](migration-guides/v5.0.0.md)
 - [v6.0.0](migration-guides/v6.0.0.md)
 - [v7.0.0](migration-guides/v7.0.0.md)
+- [v8.0.0](migration-guides/v8.0.0.md)
 
 ## Contribution
 

migration-guides/v8.0.0.md

@@ -0,0 +1,29 @@
+# v8.0.0 Migration Guide
+
+This version contains the following breaking changes:
+
+1. Upgraded Node version to 18.12.1
+2. Removed `node-sass` in favor of `sass`
+3. Upgraded webpack and related loaders
+
+Further explanation of each item is detailed below.
+
+---
+
+## 1. Upgraded Node version to 18.12.1
+
+Typically, the Node version of an application can be updated without any breaking change. However, Node 18 requires an upgraded version of `glibc`. This has impact on both Travis and the existing `node-sass` executable.
+
+For Travis, the default distribution used for builds and test execution does not have the version of `glibc` required by Node 18. To resolve this issue, a specific distribution is specified in the `.travis.yml` configuration file that has the correct `glibc` version.
+
+`node-sass` has been deprecated and the latest version does not support the later `glibc` version (an exception is generated when one tries to execute `node-sass` with the later Node version). To resolve this, `node-sass` was removed and `sass` (Dart Sass, the currently active Sass implementation) was added. This change required an additional update to the `build:styles` script to use `sass` for style builds.
+
+Finally, this version of `lp-components` will not support older Node versions. You must use Node version ^18.12.1.
+
+## 2. Removed `node-sass` in favor of `sass`
+
+As mentioned above, `node-sass` was removed in favor of `sass`. Additionally, the latest version of `style-loader` was included in this version of `lp-components`.
+
+## 3. Upgraded webpack and related loaders
+
+The Node upgrade [mentioned above](#1-upgraded-node-version-to-18121) also fixed an OpenSSL issue. That fix required that the latest version of Webpack be used, along with configuration of a specific hashing function. To accommodate this change, webpack was upgraded to ^5.75.0 and the `css-loader`, `style-loader`, and `sass-loader` were also upgraded to their latest versions.

package.json

@@ -1,8 +1,8 @@
 {
   "name": "@launchpadlab/lp-components",
-  "version": "7.0.2",
+  "version": "8.0.0",
   "engines": {
-    "node": "^14.19 || ^16.14"
+    "node": "^18.12"
   },
   "description": "Our Components",
   "main": "lib/index.js",
@@ -20,7 +20,7 @@
     "build": "yarn build:cjs && yarn build:esm && yarn build:styles",
     "build:cjs": "babel src --out-dir lib",
     "build:esm": "BABEL_ENV=esm babel src --out-dir esm",
-    "build:styles": "cp -r src/styles lib/styles && node-sass src/styles/ -o lib/styles",
+    "build:styles": "cp -r src/styles lib/styles && sass src/styles:lib/styles",
     "build:development": "BABEL_ENV=esm babel src --watch --out-dir esm",
     "clean": "rm -rf lib esm",
     "docs": "documentation build src/index.js -f md -o docs.md",
@@ -67,31 +67,33 @@
     "@storybook/addon-storysource": "^6.4.22",
     "@storybook/addon-viewport": "^6.4.22",
     "@storybook/addons": "^6.4.22",
+    "@storybook/builder-webpack5": "^6.5.14",
+    "@storybook/manager-webpack5": "^6.5.14",
     "@storybook/react": "^6.4.22",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.6.7",
-    "babel-loader": "^8.2.4",
+    "babel-loader": "^9.1.0",
     "bourbon": "^7.2.0",
     "bourbon-neat": "^4.0.0",
     "core-js": "^3.21.1",
-    "css-loader": "^5.2.7",
+    "css-loader": "^6.7.2",
     "documentation": "^13.2.5",
     "enzyme": "^3.2.0",
     "eslint": "^7.32.0",
     "husky": "^7.0.4",
     "jest": "^25.1.0",
     "jest-canvas-mock": "^2.1.1",
     "lint-staged": "^13.0.3",
-    "node-sass": "^6.0.1",
     "prettier": "^2.7.1",
     "react": "^17.0.0",
     "react-dom": "^17.0.0",
     "recompose": "^0.30.0",
     "redux": "^4.1.2",
     "regenerator-runtime": "^0.13.9",
-    "sass-loader": "^10.2.1",
+    "sass": "^1.56.1",
+    "sass-loader": "^13.2.0",
     "size-limit": "^7.0.8",
-    "style-loader": "^2.0.0",
-    "webpack": "^4.39.2"
+    "style-loader": "^3.3.1",
+    "webpack": "^5.75.0"
   },
   "peerDependencies": {
     "react": "^16.14.0 || ^17.0.0"