Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: don't generate styled-jsx randomized classes in jest snapshots #332

Merged
merged 2 commits into from
Mar 25, 2020
Merged

fix: don't generate styled-jsx randomized classes in jest snapshots #332

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6228c58
fix: don't generate styled-jsx randomized classes in jest snapshots
amcgee Mar 25, 2020
2fac1ce
chore: also mock global and resolve functions, macro entrypoint
amcgee Mar 25, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 17 additions & 3 deletions cli/config/app.babel.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,8 +24,22 @@ module.exports = {

// Automatically include a React import when JSX is present
require('babel-plugin-react-require'),

// Always build in "production" mode even when styled-jsx runtime may select "development"
[require('styled-jsx/babel'), { optimizeForSpeed: true }],
],
env: {
production: {
plugins: [
[require('styled-jsx/babel'), { optimizeForSpeed: true }],
]
},
development: {
plugins: [
[require('styled-jsx/babel'), { optimizeForSpeed: true }],
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@varl should we turn optimizeForSpeed off here?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Note this is for both apps and libraries, but I think it should be safe to build without optimizeForSpeed when the build output is in development...?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Anyway, will merge this and we can consider later.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The tricky thing is when production-mode components and development-mode components interact on the same page. Since styled-jsx is a singleton, that causes problems as production/development components inject CSS differently and are not compatible.

]
},
test: {
plugins: [
require('styled-jsx/babel-test')
]
}
}
}
1 change: 1 addition & 0 deletions cli/config/jest.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,5 +8,6 @@ module.exports = {
'\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': require.resolve(
'./jest.file.mock.js'
),
'^styled-jsx/(css|macro)$': require.resolve('./jest.styled-jsx-css.mock.js')
},
}
5 changes: 5 additions & 0 deletions cli/config/jest.styled-jsx-css.mock.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
const css = () => ''
css.global = () => ''
css.resolve = () => ''

module.exports = css
amcgee marked this conversation as resolved.
Show resolved Hide resolved