Update tp-font-face to use Dart Sass (#811)

thumbtack · Apr 27, 2022 · 7ec0e86 · 7ec0e86
1 parent 8e86238
commit 7ec0e86
Show file tree

Hide file tree

Showing 6 changed files with 70 additions and 41 deletions.
diff --git a/jest.setup.js b/jest.setup.js
@@ -11,36 +11,44 @@ beforeAll(() => {
     // Stub `window.scroll` since Jest will fail otherwise. This may change in the future.
     global.scroll = () => true;
 
-    // Mock `window.IntersectionObserver` using code from these two places:
-    // https://github.com/thebuilder/react-intersection-observer/blob/e31086c713615f3cfbe60eaa13491adcee3d41c2/src/test-utils.ts#L83
-    // https://jestjs.io/docs/en/manual-mocks#mocking-methods-which-are-not-implemented-in-jsdom
-    Object.defineProperty(window, 'IntersectionObserver', {
-        writable: true,
-        value: jest.fn((cb, options) => {
-            const instance = {
-                thresholds: Array.isArray(options.threshold)
-                    ? options.threshold
-                    : [options.threshold],
-                root: options.root,
-                rootMargin: options.rootMargin,
-                time: Date.now(),
-                observe: jest.fn(element => {
-                    instanceMap.set(element, instance);
-                    observerMap.set(element, cb);
-                }),
-                unobserve: jest.fn(element => {
-                    instanceMap.delete(element);
-                    observerMap.delete(element);
-                }),
-                disconnect: jest.fn(),
-            };
-            return instance;
-        }),
-    });
+    // Some tests are run in the Jest `node` environment, where `window` is not defined, and these
+    // mocks are not needed.
+    if (typeof window !== 'undefined') {
+        // Mock `window.IntersectionObserver` using code from these two places:
+        // https://github.com/thebuilder/react-intersection-observer/blob/e31086c713615f3cfbe60eaa13491adcee3d41c2/src/test-utils.ts#L83
+        // https://jestjs.io/docs/en/manual-mocks#mocking-methods-which-are-not-implemented-in-jsdom
+        Object.defineProperty(window, 'IntersectionObserver', {
+            writable: true,
+            value: jest.fn((cb, options) => {
+                const instance = {
+                    thresholds: Array.isArray(options.threshold)
+                        ? options.threshold
+                        : [options.threshold],
+                    root: options.root,
+                    rootMargin: options.rootMargin,
+                    time: Date.now(),
+                    observe: jest.fn(element => {
+                        instanceMap.set(element, instance);
+                        observerMap.set(element, cb);
+                    }),
+                    unobserve: jest.fn(element => {
+                        instanceMap.delete(element);
+                        observerMap.delete(element);
+                    }),
+                    disconnect: jest.fn(),
+                };
+                return instance;
+            }),
+        });
+    }
 });
 
 afterEach(() => {
-    window.IntersectionObserver.mockClear();
-    instanceMap.clear();
-    observerMap.clear();
+    // Some tests are run in the Jest `node` environment, where `window` is not defined, and these
+    // mocks are not needed.
+    if (typeof window !== 'undefined') {
+        window.IntersectionObserver.mockClear();
+        instanceMap.clear();
+        observerMap.clear();
+    }
 });
diff --git a/packages/thumbprint-font-face/CHANGELOG.md b/packages/thumbprint-font-face/CHANGELOG.md
@@ -2,6 +2,11 @@
 
 ## Unreleased
 
+### Fixed
+
+-   [Patch] Update to use Dart Sass.
+-   [Patch] Rewrite unit test in TypeScript.
+
 ## 1.0.15 - 2020-07-14
 
 ### Fixed

diff --git a/...rint-font-face/__snapshots__/test.js.snap → ...rint-font-face/__snapshots__/test.ts.snap b/...rint-font-face/__snapshots__/test.js.snap → ...rint-font-face/__snapshots__/test.ts.snap
@@ -2,15 +2,15 @@
 
 exports[`works if variable is provided 1`] = `
 "@font-face {
-  font-family: 'Mark';
+  font-family: \\"Mark\\";
   font-weight: 400;
   font-display: swap;
-  src: local(\\"Mark, Avenir, Helvetica, Arial, sans-serif\\"), url(https://example.com/fonts/mark/mark-tt-subset.woff2) format(\\"woff2\\"), url(https://example.com/fonts/mark/mark-tt-subset.woff) format(\\"woff\\"); }
-
+  src: local(\\"Mark, Avenir, Helvetica, Arial, sans-serif\\"), url(https://example.com/fonts/mark/mark-tt-subset.woff2) format(\\"woff2\\"), url(https://example.com/fonts/mark/mark-tt-subset.woff) format(\\"woff\\");
+}
 @font-face {
-  font-family: 'Mark';
+  font-family: \\"Mark\\";
   font-weight: 700;
   font-display: swap;
-  src: local(\\"Mark, Avenir, Helvetica, Arial, sans-serif\\"), url(https://example.com/fonts/mark/mark-tt-subset-bold.woff2) format(\\"woff2\\"), url(https://example.com/fonts/mark/mark-tt-subset-bold.woff) format(\\"woff\\"); }
-"
+  src: local(\\"Mark, Avenir, Helvetica, Arial, sans-serif\\"), url(https://example.com/fonts/mark/mark-tt-subset-bold.woff2) format(\\"woff2\\"), url(https://example.com/fonts/mark/mark-tt-subset-bold.woff) format(\\"woff\\");
+}"
 `;
diff --git a/packages/thumbprint-font-face/package.json b/packages/thumbprint-font-face/package.json
@@ -28,6 +28,7 @@
     },
     "devDependencies": {
         "node-sass-tilde-importer": "2.0.0-alpha.1",
+        "sass": "^1.51.0",
         "tmp": "^0.1.0"
     }
 }
diff --git a/packages/thumbprint-font-face/test.js → packages/thumbprint-font-face/test.ts b/packages/thumbprint-font-face/test.js → packages/thumbprint-font-face/test.ts
@@ -1,15 +1,21 @@
-const sass = require('node-sass');
-const fs = require('fs');
-const importer = require('node-sass-tilde-importer');
-const tmp = require('tmp');
+/**
+ * dart-sass only runs in the Jest `node` environment.
+ * See: https://github.com/sass/dart-sass/issues/710
+ * @jest-environment node
+ */
+
+import sass, { LegacyImporter } from 'sass';
+import fs from 'fs';
+import importer from 'node-sass-tilde-importer';
+import tmp from 'tmp';
 
 it('throws error if variable is not provided correctly', () => {
     let error = null;
 
     try {
         sass.renderSync({
             file: 'packages/thumbprint-font-face/_index.scss',
-            importer,
+            importer: importer as LegacyImporter<'sync'>,
         }).css.toString();
     } catch (e) {
         error = e;
@@ -32,7 +38,7 @@ it('works if variable is provided', () => {
     const css = sass
         .renderSync({
             file: file.name,
-            importer,
+            importer: importer as LegacyImporter<'sync'>,
         })
         .css.toString();
     expect(css).toMatchSnapshot();

diff --git a/yarn.lock b/yarn.lock
@@ -18678,6 +18678,15 @@ sass@^1.49.9:
     immutable "^4.0.0"
     source-map-js ">=0.6.2 <2.0.0"
 
+sass@^1.51.0:
+  version "1.51.0"
+  resolved "https://registry.yarnpkg.com/sass/-/sass-1.51.0.tgz#25ea36cf819581fe1fe8329e8c3a4eaaf70d2845"
+  integrity sha512-haGdpTgywJTvHC2b91GSq+clTKGbtkkZmVAb82jZQN/wTy6qs8DdFm2lhEQbEwrY0QDRgSQ3xDurqM977C3noA==
+  dependencies:
+    chokidar ">=3.0.0 <4.0.0"
+    immutable "^4.0.0"
+    source-map-js ">=0.6.2 <2.0.0"
+
 sax@^1.2.4, sax@~1.2.4:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"