fix

MozillaFoundation · Apr 25, 2024 · 3c2953d · 3c2953d
1 parent f636aef
commit 3c2953d
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 29 deletions.
diff --git a/package.json b/package.json
@@ -7,10 +7,12 @@
     "node": "20.x"
   },
   "scripts": {
-    "build": "run-s build:clean && run-p build:common build:js:prod && npm run postcss:build && npm run postcss:font",
+    "copy-font-css": "shx cp source/sass/new-font.css network-api/networkapi/frontend/_font/new-font.css",
+    "build": "run-s build:clean && run-p build:common build:js:prod && npm run postcss:build && npm run copy-font-css",
     "build:clean": "shx rm -rf network-api/networkapi/temp/frontend && shx rm -rf network-api/networkapi/frontend && shx mkdir -p network-api/networkapi/frontend/_js",
-    "build:common": "run-p build:images build:css build:contribute",
+    "build:common": "run-p build:images build:css build:font build:contribute",
     "build:contribute": "shx cp contribute.json network-api/networkapi/frontend/",
+    "build:font": "shx rm -rf network-api/networkapi/frontend/_font && shx cp -r source/font network-api/networkapi/frontend/_font",
     "build:images": "shx rm -rf network-api/networkapi/frontend/_images && shx cp -r source/images network-api/networkapi/frontend/_images",
     "build:js:dev": "node esbuild.config.js -- --node-env development",
     "build:js:prod": "node esbuild.config.js -- --node-env production",
@@ -37,7 +39,6 @@
     "lint:css:network": "stylelint \"network-api/networkapi/{,!(frontend)/**/}*.css\" --custom-syntax postcss-scss",
     "postcss:build": "postcss network-api/networkapi/temp/frontend/_css/*.css --dir network-api/networkapi/frontend/_css --verbose",
     "postcss:watch": "TAILWIND_MODE=watch postcss network-api/networkapi/temp/frontend/_css/*.css --dir network-api/networkapi/frontend/_css --watch --verbose",
-    "postcss:font": "postcss source/sass/new-font.css --o network-api/networkapi/frontend/_font/new-font.css --verbose",
     "optimize:svg": "svgo --multipass --folder ./source/images/ --recursive",
     "optimize:jpg": "find source/images -type f -name '*.jpg' -print0 | xargs -0 -n 1 -P 6 -I '{}' guetzli --quality 93 '{}' '{}'",
     "optimize:png": "find source/images -type f -name '*.png' -print0 | xargs -0 -n 1 -P 6 optipng",
@@ -60,7 +61,7 @@
     "start": "docker-compose up",
     "sync": "browser-sync start --proxy \"localhost:8000\" --reload-debounce 50 --files \"./network-api/networkapi/**/*.html\" \"./network-api/networkapi/frontend/_css/*.css\" \"./network-api/networkapi/frontend/_js/*.js\"",
     "test": "npm run lint",
-    "watch": "run-s build:clean && run-p build:common postcss:font && run-p build:js:dev postcss:watch watch:**",
+    "watch": "run-s build:clean && run-p build:common && run-p build:js:dev postcss:watch copy-font-css watch:**",
     "watch:images": "chokidar \"source/images/**/*\" -c \"npm run build:images\"",
     "watch:scss": "chokidar \"source/**/*.scss\" -c \"npm run build:css\""
   },
@@ -115,7 +116,6 @@
     "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-react": "^7.34.1",
     "optipng-bin": "^9.0.0",
-    "postcss-custom-properties": "^8.0.11",
     "prettier": "^3.2.5",
     "stylelint": "^15.11.0",
     "stylelint-config-standard": "^34.0.0",

diff --git a/postcss.config.js b/postcss.config.js
@@ -2,23 +2,6 @@ let commonPlugins = [
   require("postcss-import"),
   require("tailwindcss"),
   require("autoprefixer"),
-  require("postcss-custom-properties")({
-    importFrom: [
-      {
-        customProperties: {
-          "--asset-domain": process.env.ASSET_DOMAIN,
-          "--font-sans-300": `url("${process.env.FONT_SANS_300 || ""}")`,
-          "--font-sans-400": `url("${process.env.FONT_SANS_400 || ""}")`,
-          "--font-sans-700": `url("${process.env.FONT_SANS_700 || ""}")`,
-          "--font-semi-slab-300": `url("${process.env.FONT_SEMI_SLAB_300 || ""}")`,
-          "--font-semi-slab-400": `url("${process.env.FONT_SEMI_SLAB_400 || ""}")`,
-          "--font-semi-slab-600": `url("${process.env.FONT_SEMI_SLAB_600 || ""}")`,
-          "--font-semi-slab-700": `url("${process.env.FONT_SEMI_SLAB_700 || ""}")`,
-        },
-      },
-    ],
-    preserve: false,
-  }),
 ];
 
 let prodPlugins = [

diff --git a/source/sass/new-font.css b/source/sass/new-font.css
@@ -10,23 +10,26 @@ body {
     font-family: Nunito Sans;
     font-style: normal;
     font-weight: 300;
-    src: var(--font-sans-300) format("woff2");
+    src: url("https://mofo-assets-staging.s3.amazonaws.com/test-font/Sans/Normal/MozillaSansNormalBETA03-Light.woff2")
+        format("woff2");
 }
 
 @font-face {
     font-display: swap;
     font-family: Nunito Sans;
     font-style: normal;
     font-weight: 400;
-    src: var(--font-sans-400) format("woff2");
+    src: url("https://mofo-assets-staging.s3.amazonaws.com/test-font/Sans/Normal/MozillaSansNormalBETA03-Regular.woff2")
+        format("woff2");
 }
 
 @font-face {
     font-display: swap;
     font-family: Nunito Sans;
     font-style: normal;
     font-weight: 700;
-    src: var(--font-sans-700) format("woff2");
+    src: url("https://mofo-assets-staging.s3.amazonaws.com/test-font/MozillaSansNormalBETA03-Bold.woff2")
+        format("woff2");
 }
 
 @font-face {
@@ -58,15 +61,17 @@ body {
     font-family: Zilla Slab;
     font-style: normal;
     font-weight: 300;
-    src: var(--font-semi-slab-300) format("woff2");
+    src: url("https://mofo-assets-staging.s3.amazonaws.com/test-font/Semi-Slab/Normal/MozillaSemi-SlabNormalBETA03-Light.woff2")
+        format("woff2");
 }
 
 @font-face {
     font-display: swap;
     font-family: Zilla Slab;
     font-style: normal;
     font-weight: 400;
-    src: var(--font-semi-slab-400) format("woff2");
+    src: url("https://mofo-assets-staging.s3.amazonaws.com/test-font/Semi-Slab/Normal/MozillaSemi-SlabNormalBETA03-Regular.woff2")
+        format("woff2");
 }
 
 /* @font-face {
@@ -81,13 +86,15 @@ body {
     font-family: Zilla Slab;
     font-style: normal;
     font-weight: 600;
-    src: var(--font-semi-slab-600) format("woff2");
+    src: url(".https://mofo-assets-staging.s3.amazonaws.com/test-font/Semi-Slab/Normal/MozillaSemi-SlabNormalBETA03-Semibold.woff2")
+        format("woff2");
 }
 
 @font-face {
     font-display: swap;
     font-family: Zilla Slab;
     font-style: normal;
     font-weight: 700;
-    src: var(--font-semi-slab-700) format("woff2");
+    src: url("https://mofo-assets-staging.s3.amazonaws.com/test-font/Semi-Slab/Normal/MozillaSemi-SlabNormalBETA03-Bold.woff2")
+        format("woff2");
 }