fix: update script to generate PDF.js mixin SCSS

packages/discovery-styles/package.json

@@ -12,7 +12,7 @@
     "build": "sass --load-path=node_modules --load-path=../../node_modules scss/index.scss css/index.css",
     "start": "yarn run build --watch",
     "analyze": "yarn run g:analyze css/index.css",
-    "update-styles-from-pdfjs": "scripts/update-styles-from-pdfjs.sh"
+    "update-styles-from-pdfjs": "yarn node scripts/update-styles-from-pdfjs.js"
   },
   "files": [
     "css/**/*",

packages/discovery-styles/scripts/update-styles-from-pdfjs.js

@@ -0,0 +1,82 @@
+#! /usr/bin/env node
+
+/**
+ * This script updates PDF text layer CSS from the `pdfjs-dist` npm package
+ *
+ * When you upgrade the `pdfjs-dist` package, you have to run this script
+ * to include the style changes.
+ *
+ * Usage: $ yarn node ./scripts/update-styles-from-pdfjs.js
+ * - You must run `yarn` to install `pdfjs-dist` package before running
+ */
+
+const fs = require('node:fs');
+const path = require('node:path');
+const postcss = require('postcss');
+const prettier = require('prettier');
+
+const args = process.argv;
+const scriptPath = args[1];
+const pkgDir = path.join(path.dirname(scriptPath), '..');
+
+// resolves to `.../pdfjs-dist/build/pdf.mjs` (value of `main` in its `package.json`)
+const pdfJsFile = require.resolve('pdfjs-dist');
+// pdfjs textLayer styles
+const originalPdfjsWebCss = path.join(path.dirname(pdfJsFile), '../web/pdf_viewer.css');
+const outputPdfjsWebScss = path.join(
+  pkgDir,
+  'scss/components/document-preview/_pdfjs_web_mixins.scss'
+);
+
+genPdfjsScss(originalPdfjsWebCss, outputPdfjsWebScss);
+
+/**
+ * Generate mixin SCSS for pdfjs web.css .textLayer styles
+ * @param {string} originalPdfjsWebCss original pdfjs web css
+ * @param {string} outputPdfjsWebScss output scss
+ */
+async function genPdfjsScss(originalPdfjsWebCss, outputPdfjsWebScss) {
+  // load the original style
+  const cssText = fs.readFileSync(originalPdfjsWebCss, { encoding: 'utf-8' });
+  const cssRoot = postcss.parse(cssText);
+
+  // remove rules not related to .textLayer
+  cssRoot.walkRules(rule => {
+    if (rule.selector.includes('.textLayer')) {
+      return;
+    }
+    rule.remove();
+  });
+
+  // remove empty @ rules
+  cssRoot.walkAtRules(rule => {
+    if (rule.nodes.length === 0) {
+      rule.remove();
+    }
+  });
+
+  // keep copyright comment
+  cssRoot.walkComments(comment => {
+    if (comment.text.includes('Copyright')) {
+      return;
+    }
+    comment.remove();
+  });
+
+  // write mixin scss
+  const generatedCss = `
+/* DO NOT EDIT. THIS FILE IS AUTOMATICALLY GENERATED FROM \`update-styles-from-pdfjs.sh\`. */
+@mixin pdfjsTextLayer {
+  // CSS from ~pdfjs-dist/web/pdf_viewer.css for scoped style
+  ${cssRoot.toString()}
+}
+`;
+
+  // run prettier
+  const options = await prettier.resolveConfig(outputPdfjsWebScss);
+  const formattedCss = await prettier.format(generatedCss, { ...options, parser: 'scss' });
+
+  // output SCSS file
+  fs.writeFileSync(outputPdfjsWebScss, formattedCss, { encoding: 'utf-8' });
+  console.log(`Wrote file ${outputPdfjsWebScss}`);
+}