From 352ed7b75585c686c996a5e7c2c29e20e41d0672 Mon Sep 17 00:00:00 2001
From: Katie Langerman <18661030+langermank@users.noreply.github.com>
Date: Fri, 9 Jun 2023 11:13:04 -0700
Subject: [PATCH] Add new PostCSS fallback config (#2457)

* add new fallback config

* Create swift-moles-jump.md
---
 .changeset/swift-moles-jump.md |  5 +++++
 package.json                   |  2 +-
 postcss.config.cjs             | 29 +++++++++++++++++++++++++----
 yarn.lock                      |  8 ++++----
 4 files changed, 35 insertions(+), 9 deletions(-)
 create mode 100644 .changeset/swift-moles-jump.md

diff --git a/.changeset/swift-moles-jump.md b/.changeset/swift-moles-jump.md
new file mode 100644
index 0000000000..ea6cce305e
--- /dev/null
+++ b/.changeset/swift-moles-jump.md
@@ -0,0 +1,5 @@
+---
+"@primer/css": patch
+---
+
+Add new PostCSS fallback config
diff --git a/package.json b/package.json
index 9d943a391c..51f4030ddd 100644
--- a/package.json
+++ b/package.json
@@ -42,7 +42,7 @@
     "storybook": "cd docs && yarn && yarn storybook"
   },
   "dependencies": {
-    "@primer/primitives": "^7.11.10",
+    "@primer/primitives": "^7.11.12",
     "@primer/view-components": "^0.1.0"
   },
   "devDependencies": {
diff --git a/postcss.config.cjs b/postcss.config.cjs
index a2eb2de8ae..17ff747390 100644
--- a/postcss.config.cjs
+++ b/postcss.config.cjs
@@ -3,7 +3,8 @@ const sass = require('@csstools/postcss-sass')
 const scss = require('postcss-scss')
 const scssImport = require('postcss-import')
 const { join } = require('path')
-const importedJSONFromPrimitives = require('./node_modules/@primer/primitives/tokens-next-private/fallbacks/color-fallbacks.json')
+const path = require('path')
+const fs = require('fs')
 
 module.exports = {
   map: {
@@ -20,9 +21,29 @@ module.exports = {
     }),
     autoprefixer,
     require('postcss-custom-properties-fallback')({
-      importFrom: {
-        customProperties: importedJSONFromPrimitives
-      },
+      importFrom: [
+        () => {
+          const primitiveFallbacks = [
+            'color-fallbacks.json',
+            'base/size/size.json',
+            'base/typography/typography.json',
+            'functional/size/border.json',
+            'functional/size/breakpoints.json',
+            'functional/size/size-coarse.json',
+            'functional/size/size-fine.json',
+            'functional/size/size.json',
+            'functional/size/viewport.json',
+            'functional/typography/typography.json',
+          ]
+          let customProperties = {}
+          for (const filePath of primitiveFallbacks) {
+            const fileData = fs.readFileSync(path.join(__dirname, './node_modules/@primer/primitives/tokens-next-private/fallbacks/', filePath), 'utf8')
+            customProperties = {...customProperties, ...JSON.parse(fileData)}
+          }
+
+          return { customProperties: customProperties };
+        }
+      ]
     }),
   ]
 }
diff --git a/yarn.lock b/yarn.lock
index fc0be236fb..626a64f682 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -960,10 +960,10 @@
   resolved "https://registry.yarnpkg.com/@primer/behaviors/-/behaviors-1.3.4.tgz#04498185ad4504d85081d4288c74dc3f0e507c8b"
   integrity sha512-j6PhkDD1IdL9xrlKbUQ3YEM74B7Fgr1mIZJ6JaYJjM1Mvdutd/nBouM8SnwFZdBBbS+ZRfGhnx3plr833Pvf1Q==
 
-"@primer/primitives@^7.11.10":
-  version "7.11.10"
-  resolved "https://registry.yarnpkg.com/@primer/primitives/-/primitives-7.11.10.tgz#9572358f1209dcd2ce3f1f0de12188dffae038e5"
-  integrity sha512-KwChxyp4qbLojZx5Nz8RUElM9K+ObzZWvzkYEu76TC4qEsqb9wW7n78jyov5WhUh5+qj2Qac1iCsPfeTQG5YBw==
+"@primer/primitives@^7.11.12":
+  version "7.11.12"
+  resolved "https://registry.yarnpkg.com/@primer/primitives/-/primitives-7.11.12.tgz#1a36354e789f8cc3c178b66b2d100b64d4fb209d"
+  integrity sha512-AvTiuLHvvby2KPZbwwJ7GrtRJYgWyepF6XAOMw7G7Kc2iP3E32OHmaFukwh3gY+OqwcxY7st2tHWll2brk1vfQ==
 
 "@primer/stylelint-config@^12.4.0":
   version "12.7.0"