Add PostCSS color var fallback for upcoming CSS work (#3278)

* add fallback plugin

* Update rollup.config.js

Co-authored-by: Josh Black <joshblack@github.com>

* remove fallbacks from source

* add back conflict free package-lock

* use lockfileVersion 3

---------

Co-authored-by: Josh Black <joshblack@github.com>
Co-authored-by: Siddharth Kshetrapal <siddharthkp@github.com>

package.json

@@ -228,6 +228,7 @@
     "mdast-util-to-string": "3.1.1",
     "micromark-extension-frontmatter": "1.0.0",
     "micromark-extension-mdxjs": "1.0.0",
+    "postcss-custom-properties-fallback": "^1.0.2",
     "prettier": "2.8.1",
     "react": "18.2.0",
     "react-dnd": "14.0.4",

rollup.config.js

@@ -7,6 +7,8 @@ import glob from 'fast-glob'
 import {visualizer} from 'rollup-plugin-visualizer'
 import postcss from 'rollup-plugin-postcss'
 import packageJson from './package.json'
+import postcssCustomPropertiesFallback from 'postcss-custom-properties-fallback'
+const importedJSONFromPrimitives = require('@primer/primitives/tokens-next-private/fallbacks/color-fallbacks.json')
 
 const input = new Set([
   // "exports"
@@ -116,6 +118,13 @@ const baseConfig = {
       extract: 'components.css',
       autoModules: false,
       modules: {generateScopedName: 'prc_[local]-[hash:base64:5]'},
+      plugins: [
+        postcssCustomPropertiesFallback({
+          importFrom: {
+            customProperties: importedJSONFromPrimitives,
+          },
+        }),
+      ],
     }),
   ],
 }

src/drafts/CSSComponent/component.module.css

@@ -1,7 +1,7 @@
 .component {
-  background-color: var(--bgColor-default, var(--color-canvas-default));
-  color: var(--fgColor-muted, var(--color-fg-muted));
-  border: 1px solid var(--borderColor-default, var(--color-border-default));
+  background-color: var(--bgColor-default);
+  color: var(--fgColor-muted);
+  border: 1px solid var(--borderColor-default);
   width: fit-content;
   padding: var(--control-xsmall-paddingBlock) var(--control-xsmall-paddingInline-normal);
 }