HoshinoKoji/jsPsych
1
0
Fork 0
mirror of https://github.com/jspsych/jsPsych.git synced 2025-05-10 11:10:54 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge pull request #2504 from jspsych/patch-inline-fonts

Browse Source 
Switch to Sass for jsPsych styles and inline fonts
This commit is contained in:
bjoluc 2022-03-12 11:44:12 +01:00 committed by GitHub
commit b2ee5293ad
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 4530 additions and 7003 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/ten-coats-repair.md Normal file
View File

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

11461
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

1
packages/jspsych/.gitignore vendored Normal file
View File

@ -0,0 +1 @@
css/

19
packages/jspsych/package.json
View File

@ -23,8 +23,10 @@
"test": "jest",
"test:watch": "npm test -- --watch",
"tsc": "tsc",
"build": "rollup --config",
"build:watch": "npm run build -- --watch",
"build:js": "rollup --config",
"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": {
@ -44,8 +46,19 @@
"seedrandom": "^3.0.5"
},
"devDependencies": {
"@fontsource/open-sans": "4.5.3",
"@jspsych/config": "^1.1.0",
"@types/dom-mediacapture-record": "^1.0.11",
"@types/seedrandom": "^3.0.1"
"@types/seedrandom": "^3.0.1",
"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"
}
}

5
packages/jspsych/css/jspsych.css → packages/jspsych/src/index.scss
View File

@ -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 */

42
packages/jspsych/webpack.config.cjs Normal file
View File

@ -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"],
},
],
},
};