@rebilly/instruments 3.6.0-beta.0 → 3.7.0-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rebilly/instruments",
-  "version": "3.6.0-beta.0",
+  "version": "3.7.0-beta.0",
   "author": "Rebilly",
   "main": "dist/index.js",
   "unpkg": "dist/index.min.js",
@@ -25,7 +25,6 @@
     "lodash.merge": "^4.6.2",
     "popostmate": "^1.6.4",
     "postcss": "^8.4.5",
-    "postcss-css-variables": "^0.18.0",
     "rebilly-js-sdk": "^44.4.0",
     "values.js": "^2.0.0"
   },

package/src/functions/mount/setup-framepay-theme.js

@@ -1,13 +1,37 @@
 import css from 'css';
-import postcss from 'postcss';
-import cssvariables from 'postcss-css-variables';
 import camelCase from 'lodash.camelcase';
 
-const resolveCssVars = async (rawCss) => postcss([
-  cssvariables({ preserve: false })
-  ])
-  .process(rawCss, { from: undefined })
-  .then(output => output.css);
+function processCSS(rawCss) {
+  const cssMap = {};
+ [...rawCss.matchAll(/(--rebilly.*(?=:))[:\s](.*(?=;))/g)]
+   .forEach(item => {
+     cssMap[item[1]] = item[2].trim();
+   });
+ 
+ function parseValue(value) {
+   const cssVariables = value.match(/var\((.+?)\)/g);
+   if(cssVariables) {
+     let cssValue = value;
+     cssVariables.forEach(variable => {
+       const cssVarName = variable.match(/\((.*)\)/i)[1];
+       cssValue = value.replace(variable, cssMap[cssVarName]);
+     });
+     return parseValue(cssValue);
+   }
+   return value
+ }
+
+ return Object.entries(cssMap)
+   .map(([key, value]) => [key, parseValue(value)]);
+}
+
+function replaceCssVars(rawCss) {
+  processCSS(rawCss).forEach(([key, value]) => {
+    rawCss = rawCss.split(`var(${key})`).join(value);
+  });
+
+  return rawCss;
+}
 
 const getStyleProps = (ast, selector) => {
   const { rules } = ast.stylesheet;
@@ -44,7 +68,7 @@ export default async ({
     ${options.css || ''}
   `;
 
-  const resolvedCss = await resolveCssVars(fullCss);
+  const resolvedCss = replaceCssVars(fullCss);
   const cssAst = css.parse(resolvedCss);
 
   const cssSelectors = {
@@ -102,4 +126,4 @@ export default async ({
   }
 
   return framepayStyle;
-}
+}

package/src/style/vendor/framepay.js

@@ -20,7 +20,7 @@ export const framepayStyle = () => `
       box-shadow: none;
     }
 
-    .rebilly-instruments-framepay .rebilly-framepay.rebilly-framepay-digital-wallet {
+    .rebilly-instruments-framepay .rebilly-framepay.rebilly-framepay-google-pay {
       min-height: auto;
       border: none;
       margin: 0;