🐛 Bug - `v3.63.3` breaks Button and Select styles

[gregoralbrecht]

Forma 36 bug report

Summary

You are probably already aware of it, but @contentful/forma-36-react-components@3.63.3 breaks some styles for me. I didn't do anything differently with v3.63.2 and it works.

I started working on a UI extension yesterday which looks like this:

import {
  Button,
  SelectField,
  Option,
} from '@contentful/forma-36-react-components'

const Sidebar = () => {
  return (
    <div className={styles.container}>
      <div className={styles.select}>
        <SelectField
          id="selectEnvironment"
          name="selectEnvironment"
          labelText="Select environment"
          onChange={event => setEnv(event.target.value)}
          width="full"
          willBlurOnEsc
        >
          <Option value="next">Next</Option>
          <Option value="production">Production</Option>
        </SelectField>
      </div>
      <Button
        buttonType="primary"
        isFullWidth
        onClick={() => console.info(`Deploying to ${env}...`)}
      >
        Deploy content
      </Button>
    </div>
  )
}

After running yarn install again today, I saw broken styles:

v3.63.3

v3.63.2

[denkristoffer]

Hi @gregoralbrecht, thanks for reporting this. Just to be sure, are you importing both the styles and tokens in the project?

[gregoralbrecht]

@denkristoffer Yes, I imported them in the root component. The only thing that changed between these two screenshots was that I ran yarn add @contentful/forma-36-react-components@3.63.2 which fixed the missing styles. It's weird, though, because the <Tabs>, <Tab>, and <TabPanel> still worked.

[denkristoffer]

3.63.3 doesn't contain any changes that should affect this, so my initial thought is that there's something else going on as well, perhaps an update of some underlying dependency. Would it be possible for you to share the two lock files before and after updating?

[gregoralbrecht]

Sorry, I can't share the lock file since this is client work. If you can't reproduce this it might be an issue on our end, though. Just wanted to raise in case you wanted to know :)

[denkristoffer]

@gregoralbrecht Would you be able to upgrade to the latest version and see if the problem is still there?

[denkristoffer]

Nevermind, the issue has been found and is being worked on 🙂

[gregoralbrecht]

Sorry for the late reply. Glad you found it, makes sense it was missing CSS variables. Thanks for fixing it! :)