Add new PostCSS fallback config (#2457)

* add new fallback config * Create swift-moles-jump.md
primer · Jun 9, 2023 · 352ed7b · 352ed7b
1 parent 344224f
commit 352ed7b
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 9 deletions.
diff --git a/.changeset/swift-moles-jump.md 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
@@ -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
@@ -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
@@ -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"