chore(NPM): package updates including new "vanilla extract" lib in pr…

…eparation for CSS refactor in data grid bookshelf (inline styling) (PR #1706)

.stylelintrc.json

@@ -17,6 +17,7 @@
         "function-url-quotes": null,
         "font-family-name-quotes": null,
         "no-descending-specificity": null,
+        "selector-not-notation": null,
         "at-rule-no-unknown": [
             true,
             {

package.json

@@ -20,8 +20,8 @@
     "postinstall": "npm run pinCompromisedColorPackage && npm run electron-build",
     "pinCompromisedColorPackage": "(npm ls colors || echo \"NPM LS?\") && rimraf node_modules/electron-rebuild/node_modules/colors && rimraf node_modules/dir-compare/node_modules/colors",
     "pinCompromisedColorPackage_": "find node_modules -maxdepth 100 -type d -name \"colors\" && npm ls colors",
-    "electron-build_": "npm rebuild --runtime=electron --target=19.0.1 --disturl=https://electronjs.org/headers --build-from-source",
-    "electron-build": "electron-rebuild --version=19.0.1 --disturl=https://electronjs.org/headers",
+    "electron-build_": "npm rebuild --runtime=electron --target=19.0.11 --disturl=https://electronjs.org/headers --build-from-source",
+    "electron-build": "electron-rebuild --version=19.0.11 --disturl=https://electronjs.org/headers",
     "rmDupeReactReduxTypes": "rimraf \"./node_modules/@types/react-redux/node_modules/@types/react\"",
     "build": "cross-env NODE_ENV=production webpack --config webpack.config.js && ncp src/package.json dist/package.json",
     "build:prod": "npm run lint && npm run build",
@@ -246,40 +246,40 @@
     "debounce": "^1.2.1",
     "debug": "^4.3.4",
     "divina-player-js": "git+https://github.com/readium/divina-player-js.git#4e1f859afb14b916923ec136af0284a72e22a990",
-    "dompurify": "^2.3.8",
-    "fetch-cookie": "^2.0.5",
+    "dompurify": "^2.3.10",
+    "fetch-cookie": "^2.1.0",
     "glob": "^8.0.3",
     "history": "^5.3.0",
-    "i18next": "^21.8.8",
+    "i18next": "^21.9.0",
     "inversify": "^6.0.1",
     "inversify-inject-decorators": "^3.1.0",
-    "jsdom": "^19.0.0",
+    "jsdom": "^20.0.0",
     "lunr": "^2.3.9",
     "lunr-languages": "^1.9.0",
     "match-sorter": "^6.3.1",
-    "mathjax": "^3.2.1",
+    "mathjax": "^3.2.2",
     "mime-types": "^2.1.35",
-    "nanoid": "^3.3.4",
-    "node-fetch": "^3.2.5",
+    "nanoid": "^4.0.0",
+    "node-fetch": "^3.2.10",
     "opds-feed-parser": "0.0.18",
     "r2-lcp-js": "^1.0.35",
     "r2-navigator-js": "^1.11.1",
     "r2-opds-js": "^1.0.39",
     "r2-shared-js": "^1.0.59",
-    "r2-streamer-js": "^1.0.42",
+    "r2-streamer-js": "^1.0.43",
     "r2-utils-js": "^1.0.31",
     "ramda": "^0.28.0",
     "react": "^17.0.2",
     "react-beautiful-dnd": "^13.1.0",
     "react-dom": "^17.0.2",
-    "react-dropzone": "^14.2.1",
+    "react-dropzone": "^14.2.2",
     "react-focus-lock": "^2.9.1",
     "react-redux": "^7.2.8",
     "react-router": "^6.3.0",
     "react-router-dom": "^6.3.0",
     "react-table": "^7.8.0",
     "redux": "^4.2.0",
-    "redux-first-history": "^5.0.9",
+    "redux-first-history": "^5.0.12",
     "redux-saga": "^1.1.3",
     "reflect-metadata": "^0.1.13",
     "regenerator-runtime": "^0.13.9",
@@ -296,20 +296,20 @@
     "yazl": "^2.5.1"
   },
   "devDependencies": {
-    "@babel/generator": "^7.18.2",
+    "@babel/generator": "^7.18.12",
     "@kogai/typed_i18n": "^0.6.0",
-    "@octokit/rest": "^18.12.0",
+    "@octokit/rest": "^19.0.3",
     "@types/classnames": "^2.3.1",
     "@types/commonmark": "^0.27.5",
     "@types/debounce": "^1.2.1",
     "@types/dompurify": "^2.3.3",
     "@types/glob": "^7.2.0",
-    "@types/jest": "^28.1.1",
-    "@types/jsdom": "^16.2.14",
+    "@types/jest": "^28.1.6",
+    "@types/jsdom": "^20.0.0",
     "@types/lunr": "^2.3.4",
     "@types/mime-types": "^2.1.1",
-    "@types/node": "^16.11.36",
-    "@types/ramda": "^0.28.14",
+    "@types/node": "^16.11.47",
+    "@types/ramda": "^0.28.15",
     "@types/react": "^17.0.43",
     "@types/react-beautiful-dnd": "^13.1.2",
     "@types/react-dom": "^17.0.14",
@@ -322,72 +322,75 @@
     "@types/tmp": "^0.2.3",
     "@types/urijs": "^1.19.19",
     "@types/uuid": "^8.3.4",
-    "@types/validator": "^13.7.3",
+    "@types/validator": "^13.7.5",
     "@types/xmldom": "^0.1.31",
-    "@types/yargs": "^17.0.10",
+    "@types/yargs": "^17.0.11",
     "@types/yauzl": "^2.10.0",
     "@types/yazl": "^2.4.2",
-    "@typescript-eslint/eslint-plugin": "^5.27.0",
-    "@typescript-eslint/parser": "^5.27.0",
+    "@typescript-eslint/eslint-plugin": "^5.33.0",
+    "@typescript-eslint/parser": "^5.33.0",
+    "@vanilla-extract/babel-plugin": "^1.1.7",
+    "@vanilla-extract/css": "^1.7.2",
+    "@vanilla-extract/webpack-plugin": "^2.1.11",
     "babel-loader": "^8.2.5",
     "babel-plugin-macros": "^3.1.0",
-    "concurrently": "^7.2.1",
+    "concurrently": "^7.3.0",
     "copy-webpack-plugin": "^11.0.0",
     "cross-env": "^7.0.3",
     "css-hot-loader": "^1.4.4",
     "css-loader": "^6.7.1",
     "devtron": "^1.4.0",
     "eclint": "^2.8.1",
-    "electron": "^19.0.3",
-    "electron-builder": "^23.0.3",
+    "electron": "^19.0.11",
+    "electron-builder": "^23.3.3",
     "electron-devtools-installer": "^3.2.0",
     "electron-notarize": "^1.2.1",
-    "electron-rebuild": "^3.2.7",
-    "eslint": "^8.17.0",
+    "electron-rebuild": "^3.2.9",
+    "eslint": "^8.21.0",
     "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-local-rules": "^1.1.0",
-    "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-react": "^7.30.0",
+    "eslint-plugin-local-rules": "^1.3.1",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-react": "^7.30.1",
     "eslint-plugin-unused-imports": "^2.0.0",
     "file-loader": "^6.2.0",
-    "fork-ts-checker-webpack-plugin": "^7.2.11",
+    "fork-ts-checker-webpack-plugin": "^7.2.13",
     "git-rev-sync": "^3.0.2",
-    "html-loader": "^3.1.0",
+    "html-loader": "^4.1.0",
     "html-webpack-plugin": "^5.5.0",
-    "i18next-json-sync": "^3.1.0",
-    "jest": "^28.1.0",
+    "i18next-json-sync": "^3.1.1",
+    "jest": "^28.1.3",
     "json-diff": "^0.9.0",
     "markdown-loader": "^8.0.0",
-    "mini-css-extract-plugin": "^2.6.0",
+    "mini-css-extract-plugin": "^2.6.1",
     "ncp": "^2.0.0",
     "node-loader": "^2.0.0",
-    "postcss": "^8.4.14",
+    "postcss": "^8.4.16",
     "postcss-import": "^14.1.0",
-    "postcss-loader": "^7.0.0",
-    "postcss-mixins": "^9.0.2",
-    "postcss-nesting": "^10.1.8",
-    "prettier": "^2.6.2",
+    "postcss-loader": "^7.0.1",
+    "postcss-mixins": "^9.0.3",
+    "postcss-nesting": "^10.1.10",
+    "prettier": "^2.7.1",
     "react-axe": "^3.5.4",
     "react-svg-loader": "^3.0.3",
     "redux-devtools-extension": "^2.13.9",
     "remote-redux-devtools": "^0.5.16",
     "rimraf": "^3.0.2",
     "style-loader": "^3.3.1",
-    "stylelint": "^14.8.5",
-    "stylelint-config-standard": "^25.0.0",
+    "stylelint": "^14.9.1",
+    "stylelint-config-standard": "^26.0.0",
     "svg-sprite-loader": "^6.0.11",
     "terser-webpack-plugin": "^5.3.3",
-    "ts-jest": "^28.0.4",
-    "ts-loader": "^9.3.0",
+    "ts-jest": "^28.0.7",
+    "ts-loader": "^9.3.1",
     "ts-prune": "^0.10.3",
     "ts-unused-exports": "^8.0.0",
-    "tsconfig-paths": "^4.0.0",
+    "tsconfig-paths": "^4.1.0",
     "typed-css-modules": "^0.7.2",
-    "typescript": "^4.7.3",
-    "webpack": "^5.73.0",
+    "typescript": "^4.7.4",
+    "webpack": "^5.74.0",
     "webpack-bundle-analyzer": "^4.5.0",
-    "webpack-cli": "^4.9.2",
-    "webpack-dev-server": "^4.9.1",
+    "webpack-cli": "^4.10.0",
+    "webpack-dev-server": "^4.9.3",
     "webpack-node-externals": "^3.0.0",
     "worker-loader": "^3.0.8"
   }

src/package.json

@@ -11,8 +11,8 @@
     "postinstall": "npm run pinCompromisedColorPackage && npm run electron-build",
     "pinCompromisedColorPackage": "(npm ls colors || echo \"NPM LS?\") && rimraf node_modules/electron-rebuild/node_modules/colors && rimraf node_modules/dir-compare/node_modules/colors",
     "pinCompromisedColorPackage_": "find node_modules -maxdepth 100 -type d -name \"colors\" && npm ls colors",
-    "electron-build_": "npm rebuild --runtime=electron --target=19.0.1 --disturl=https://electronjs.org/headers --build-from-source",
-    "electron-build": "electron-rebuild --version=19.0.1 --disturl=https://electronjs.org/headers"
+    "electron-build_": "npm rebuild --runtime=electron --target=19.0.11 --disturl=https://electronjs.org/headers --build-from-source",
+    "electron-build": "electron-rebuild --version=19.0.11 --disturl=https://electronjs.org/headers"
   },
   "repository": {
     "type": "git",
@@ -37,7 +37,7 @@
   "homepage": "https://github.com/edrlab/readium-desktop",
   "dependencies": {
     "bindings": "^1.5.0",
-    "mathjax": "^3.2.1",
+    "mathjax": "^3.2.2",
     "yargs": "^17.5.1"
   },
   "devDependencies": {

src/renderer/library/components/searchResult/AllPublicationPage.css.ts

@@ -0,0 +1,26 @@
+// ==LICENSE-BEGIN==
+// Copyright 2017 European Digital Reading Lab. All rights reserved.
+// Licensed to the Readium Foundation under one or more contributor license agreements.
+// Use of this source code is governed by a BSD-style license
+// that can be found in the LICENSE file exposed on Github (readium) in the project repository.
+// ==LICENSE-END==
+
+import { createTheme, style } from "@vanilla-extract/css";
+
+// https://vanilla-extract.style/documentation/
+
+export const [classThemeExample, vars] = createTheme({
+    color: {
+        brand: "blue",
+    },
+    font: {
+        main: "arial",
+    },
+});
+
+export const classStyleExample = style({
+    backgroundColor: vars.color.brand,
+    fontFamily: vars.font.main,
+    color: "white",
+    padding: 10,
+});

src/renderer/library/components/searchResult/AllPublicationPage.tsx

@@ -6,6 +6,10 @@
 // ==LICENSE-END==
 
 import "regenerator-runtime/runtime"; // for react-table (useAsyncDebounce()) see: https://github.com/TanStack/react-table/issues/2071#issuecomment-679999096
+
+// import { classThemeExample, classStyleExample } from "./AllPublicationPage.css";
+// import classNames from "classnames";
+
 import { Location } from "history";
 import SVG from "readium-desktop/renderer/common/components/SVG";
 // import * as SearchIcon from "readium-desktop/renderer/assets/icons/baseline-search-24px-grey.svg";
@@ -361,6 +365,9 @@ const CellGlobalFilter: React.FC<ITableCellProps_GlobalFilter> = (props) => {
         props.setGlobalFilter(v);
     }, 500);
 
+    // className={classNames(classThemeExample)}
+    // className={classNames(classStyleExample)}
+
     return (
         <div
             style={{

webpack.config.main.js

@@ -49,7 +49,7 @@ const _externalsCache = new Set();
 if (nodeEnv !== "production") {
     const nodeExternals = require("webpack-node-externals");
     const neFunc = nodeExternals({
-        allowlist: ["normalize-url", "node-fetch", "data-uri-to-buffer", /^fetch-blob/, /^formdata-polyfill/],
+        allowlist: ["nanoid", "normalize-url", "node-fetch", "data-uri-to-buffer", /^fetch-blob/, /^formdata-polyfill/],
         importType: function (moduleName) {
             if (!_externalsCache.has(moduleName)) {
                 console.log(`WEBPACK EXTERNAL (MAIN): [${moduleName}]`);

webpack.config.renderer-library.js

@@ -8,6 +8,7 @@ const path = require("path");
 const webpack = require("webpack");
 const HtmlWebpackPlugin = require("html-webpack-plugin");
 const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const { VanillaExtractPlugin } = require("@vanilla-extract/webpack-plugin");
 
 const preprocessorDirectives = require("./webpack.config-preprocessor-directives");
 
@@ -52,7 +53,7 @@ const _externalsCache = new Set();
 if (nodeEnv !== "production") {
     const nodeExternals = require("webpack-node-externals");
     const neFunc = nodeExternals({
-        allowlist: ["normalize-url", "node-fetch", "data-uri-to-buffer", /^fetch-blob/, /^formdata-polyfill/],
+        allowlist: ["nanoid", "normalize-url", "node-fetch", "data-uri-to-buffer", /^fetch-blob/, /^formdata-polyfill/],
         importType: function (moduleName) {
             if (!_externalsCache.has(moduleName)) {
                 console.log(`WEBPACK EXTERNAL (LIBRARY): [${moduleName}]`);
@@ -119,6 +120,7 @@ const cssLoaderConfig = [
     {
         loader: "css-loader",
         options: {
+            url: false,
             import: {
                 filter: (url, media, resourcePath) => {
                     console.log("css-loader IMPORT (LIBRARY): ", url, media, resourcePath);
@@ -366,6 +368,11 @@ if (nodeEnv !== "production") {
     // preprocessorDirectives.rendererLibraryBaseUrl (full HTTP locahost + port)
     config.output.publicPath = "/";
 
+    config.plugins.push(new VanillaExtractPlugin({
+        identifiers: "debug",
+    }));
+    // config.plugins.push("@vanilla-extract/babel-plugin");
+
     // if (_enableHot) {
     //     config.plugins.push(new webpack.HotModuleReplacementPlugin());
     // }
@@ -400,6 +407,11 @@ if (nodeEnv !== "production") {
     //     minimize: false,
     // };
 
+    config.plugins.push(new VanillaExtractPlugin({
+        identifiers: "debug", // "short"
+    }));
+    // config.plugins.push("@vanilla-extract/babel-plugin");
+
     config.plugins.push(new MiniCssExtractPlugin({
         filename: "styles_library.css",
     }));

webpack.config.renderer-pdf.js

@@ -45,7 +45,7 @@ const _externalsCache = new Set();
 if (nodeEnv !== "production") {
     const nodeExternals = require("webpack-node-externals");
     const neFunc = nodeExternals({
-        allowlist: ["normalize-url", "node-fetch", "data-uri-to-buffer", /^fetch-blob/, /^formdata-polyfill/],
+        allowlist: ["nanoid", "normalize-url", "node-fetch", "data-uri-to-buffer", /^fetch-blob/, /^formdata-polyfill/],
         importType: function (moduleName) {
             if (!_externalsCache.has(moduleName)) {
                 console.log(`WEBPACK EXTERNAL (PDF): [${moduleName}]`);

webpack.config.renderer-reader.js

@@ -53,7 +53,7 @@ const _externalsCache = new Set();
 if (nodeEnv !== "production") {
     const nodeExternals = require("webpack-node-externals");
     const neFunc = nodeExternals({
-        allowlist: ["normalize-url", "node-fetch", "data-uri-to-buffer", /^fetch-blob/, /^formdata-polyfill/],
+        allowlist: ["nanoid", "normalize-url", "node-fetch", "data-uri-to-buffer", /^fetch-blob/, /^formdata-polyfill/],
         importType: function (moduleName) {
             if (!_externalsCache.has(moduleName)) {
                 console.log(`WEBPACK EXTERNAL (READER): [${moduleName}]`);