`css` prop does not work when @emotion/react is added as dependency

[filipebarcos]

Expected Behavior

css property work even when app has @emotion/react as dependency

Current Behavior

Currently, if you have plain app that does not depend on @emotion/react, css prop from <VGSCollectForm> and its fields work like a charm. Although, if your app has @emotion/react as dependency the prop gets overloaded.

Possible Solution

Rename css prop to customStyles could work.

Steps to Reproduce (for bugs)

I created this sample app to reproduce it: https://github.com/filipebarcos/my-vgs-app

Context

We're trying to launch our VGS form with our custom styles and currently, we can't style the form field fonts, for example.

[flor-master]

Hi @filipebarcos, could you provide more details about the issue or what you are trying to do? I ran your example successfully without any errors. I also tried applying styles from @emotion/react to the Collect iframe wrapper like this, and it also worked on my end.

import { Global } from '@emotion/react'
 <Global
  styles={{
    '.vgs-collect-iframe-wr': {
      height: '42px',
      width: '320px',
      border: 'solid 1px;'
    },
    '.vgs-collect-iframe-wr iframe': {
      widrth: '100%',
      height: '100%'
    }
  }}
/>

Env: Node: 18.20.3 Vite: 5.4.9

[filipebarcos]

Hi @flor-master

We have an internal lib that uses @emotion/react to set/configure styles. I just tried the code in my repo, I also see it working. This is interesting because it wasn't before. I'll try again in our app and I'll report back

In our app, we're on this env:

Node: v20.17.0
Vite: 5.4.10

which is slightly different from what I have on the repo I shared.

[filipebarcos]

Only now I'm getting back to you @flor-master, apologies for the delay.

I pushed a few changes to the repo mentioned and I see it not replicating the styles https://github.com/filipebarcos/my-vgs-app/blob/main/src/App.jsx#L39

[flor-master]

Thanks for the update, now i see the issue, let me take a look

[flor-master]

Looks like @emotion/react removed css property from the component and tried to apply it as the default CSS style. We will provide the fix in the next version or share a workaround, soon

[flor-master]

Hi! It seems that @emotion/react treats the css property as a reserved attribute, and unfortunately, there’s no way to change this. What @emotion/react does isn’t compatible with how the CollectJS SDK operates.

To resolve this issue, we’ve implemented a fallback in version 1.3.1. To use it, simply replace css with style.

[flor-master]

Example:

  <VGSCollectForm.TextField
    name="text"
    placeholder="Text"
    style={{color: 'red'}}
  />

[filipebarcos]

Hi @flor-master I completely missed these updates! thank you! This is mostly working, but I'm still having trouble setting @font-face for these fields.

I've been following https://www.verygoodsecurity.com/docs/vgs-collect/js/customization#web-fonts-support, but that is not really working, maybe a cors issue?

const vgsFieldStyles = {
  "@font-face": {
    "font-family": "GraphikRegular",
    "font-style": "normal",
    "font-weight": "400",
    "font-display": "swap",
    src: 'local("GraphikRegular"), local("GraphikRegular") url(https://cdn.tremendous.com/fonts/Graphik-Regular-Web.woff2) format("woff2")',
  },
  "font-family": "GraphikRegular",
  "font-style": "normal",
  "font-weight": 400,
  color: "#18181B",
  "letter-spacing": "0.03em",
  fontSize: "16px",
};

Btw, I'm also getting a type error: Type '{ fontFamily: string; fontSize: string; }' is not assignable to type 'Record<string, any> & string', even when I try a simpler style:

const vgsFieldStyles = {
  fontFamily: "Verdana",
  fontSize: "20px",
};

EDIT: I also tried the same example from the docs: https://www.verygoodsecurity.com/docs/vgs-collect/js/customization#web-fonts-support, but that didn't work either

[flor-master]

Hi @filipebarcos I'm back with updates I merged an example with font-face here -> https://github.com/verygoodsecurity/collect-js-react/blob/main/example/src/features/CustomPayload.tsx#L26-L37

I download font-face from Google Fonts. Unfortunately, I can't test your example because your CDN restricted my location

[flor-master]

Type '{ fontFamily: string; fontSize: string; }' is not assignable to type 'Record<string, any> & string'

To resolve it - update collect-js-react wrapper and rebuild example project

[filipebarcos]

~Updated, maybe I'm doing some wrong config, but could you try my font again? We updated our CDN configuration~

EDIT: I actually had a mis config locally when using font-face. Now fixed. This fix solved for us. Thank you