Switch to Sass for jsPsych styles and inline fonts

.changeset/ten-coats-repair.md

@@ -0,0 +1,5 @@
+---
+"jspsych": patch
+---
+
+Inline Open Sans web font in `jspsych.css` to be GDPR compliant (see #2153)

packages/jspsych/.gitignore

@@ -0,0 +1 @@
+css/

packages/jspsych/package.json

@@ -23,8 +23,10 @@
     "test": "jest",
     "test:watch": "npm test -- --watch",
     "tsc": "tsc",
-    "build": "rollup --config",
+    "build:js": "rollup --config",
-    "build:watch": "npm run build -- --watch",
+    "build:styles": "webpack-cli",
+    "build": "run-p build:js build:styles",
+    "build:watch": "run-p \"build:js -- --watch\" \"build:styles watch\"",
     "prepack": "cp ../../README.md ."
   },
   "repository": {
@@ -43,7 +45,18 @@
     "random-words": "^1.1.1"
   },
   "devDependencies": {
+    "@fontsource/open-sans": "4.5.3",
     "@jspsych/config": "^1.1.0",
-    "@types/dom-mediacapture-record": "^1.0.11"
+    "@types/dom-mediacapture-record": "^1.0.11",
+    "base64-inline-loader": "^2.0.1",
+    "css-loader": "^6.6.0",
+    "mini-css-extract-plugin": "^2.5.3",
+    "npm-run-all": "^4.1.5",
+    "sass": "^1.43.5",
+    "sass-loader": "^12.4.0",
+    "webpack": "^5.68.0",
+    "webpack-cli": "^4.9.2",
+    "webpack-remove-empty-scripts": "^0.7.2",
+    "replace-in-file-webpack-plugin": "^1.0.6"
   }
 }

packages/jspsych/src/index.scss

@@ -5,7 +5,10 @@
  * experiments look polished without any additional styles.
  */
 
-@import url(https://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700);
+@import "@fontsource/open-sans/400-italic.css";
+@import "@fontsource/open-sans/700-italic.css";
+@import "@fontsource/open-sans/400.css";
+@import "@fontsource/open-sans/700.css";
 
 /* Container holding jsPsych content */
 

packages/jspsych/webpack.config.cjs

@@ -0,0 +1,42 @@
+/**
+ * Webpack configuration to compile `src/index.scss` => `css/jspsych.css` and inline font files
+ */
+
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const RemoveEmptyScriptsPlugin = require("webpack-remove-empty-scripts");
+const ReplaceInFileWebpackPlugin = require("replace-in-file-webpack-plugin");
+const path = require("path");
+
+const outputPath = path.resolve(__dirname, "css");
+const outputFilename = "jspsych.css";
+
+module.exports = {
+  mode: "development",
+  entry: "./src/index.scss",
+  output: { path: outputPath },
+  plugins: [
+    new MiniCssExtractPlugin({ filename: outputFilename }),
+    new RemoveEmptyScriptsPlugin(),
+    new ReplaceInFileWebpackPlugin([
+      // Remove .woff format in favor of .woff2
+      {
+        dir: outputPath,
+        files: [outputFilename],
+        rules: [{ search: /, url\(.*\) format\('woff'\)/g, replace: "" }],
+      },
+    ]),
+  ],
+  module: {
+    rules: [
+      {
+        test: /\.woff2?(\?[a-z0-9=&.]+)?$/,
+        use: ["base64-inline-loader"],
+        type: "javascript/auto",
+      },
+      {
+        test: /\.scss$/,
+        use: [{ loader: MiniCssExtractPlugin.loader }, "css-loader", "sass-loader"],
+      },
+    ],
+  },
+};