fix: preserve bound media query styles when converting builder to mitosis #1644
Conversation
🦋 Changeset detectedLatest commit: 1cb7328 The changes in this PR will be included in the next version bump. This PR includes changesets to release 2 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
| 'responsiveStyles.small.left': 'state.left', | ||
| 'responsiveStyles.small.top': 'state.top', | ||
| 'responsiveStyles.large.color': 'state.color', | ||
| 'style.fontSize': 'state.fontSize', |
There was a problem hiding this comment.
I wanted to show that the presence of responsiveStyles. doesn't interfere with other styles bound using style.
☁️ Nx Cloud ReportCI is running/has finished running commands for commit 1cb7328. As they complete they will appear below. Click to see the status, the terminal output, and the build insights. 📂 See all runs for this CI Pipeline Execution ✅ Successfully ran 4 targetsSent with 💌 from NxCloud. |
| const [_, size, prop] = key.split('.'); | ||
| const mediaKey = `@media (max-width: ${sizes[size as Size].max}px)`; | ||
|
|
||
| const objKey = `'${mediaKey}'`; |
There was a problem hiding this comment.
just out of curiosity more than anything, does wrapping this do anything as opposed to using responsiveStyles[mediaKey]?
There was a problem hiding this comment.
The key needs to be surrounded in quotes because it has spaces/special characters. Here's what it looks like without the extra quotes:
- Expected
+ Received
{
"style": {
"bindingType": "expression",
- "code": "{ fontSize: state.fontSize, '@media (max-width: 640px)': {\"left\":\"state.left\",\"top\":\"state.top\"}, '@media (max-width: 1200px)': {\"color\":\"state.color\"}, }",
+ "code": "{ fontSize: state.fontSize, @media (max-width: 640px): {\"left\":\"state.left\",\"top\":\"state.top\"}, @media (max-width: 1200px): {\"color\":\"state.color\"}, }",
"type": "single",
},
}Though this is a good reminder that I should document why this is needed.
There was a problem hiding this comment.
documented here: 8d7ae81
also switched to using double quotes for consistency with the rest of the object (shouldn't make any functional difference)
|
Added the follow up ticket per our discussion earlier today: https://builder-io.atlassian.net/browse/ENG-7569 |
Description
https://builder-io.atlassian.net/browse/ENG-7491
Bound media query styles are not preserved when converting Builder to Mitosis. This PR addresses the problem by ensuring that bound media query styles are included in the Mitosis node when bound using
responsiveStyles.[SIZE].[CSS PROP].Make sure to follow the PR preparation steps in CONTRIBUTING.md before submitting your PR:
yarn fmt:prettier.yarn test:updateyarn g:changesetand follow the CLI instructions. Alternatively, use the Changeset Github Bot to create the file.