Skip to content
This repository was archived by the owner on Feb 8, 2024. It is now read-only.

Enable babel-plugin-styled-components in production and tests #697

Merged
gzdunek merged 1 commit into from
Mar 25, 2022
Merged

Enable babel-plugin-styled-components in production and tests #697

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
7 changes: 5 additions & 2 deletions packages/build/.babelrc.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,10 +42,13 @@ module.exports = {
development: {
plugins: [
...plugins,
'babel-plugin-styled-components',
['babel-plugin-styled-components', { displayName: true, ssr: false }],
Copy link
Copy Markdown
Member

@ravicious ravicious Mar 25, 2022 •
edited
Loading

Choose a reason for hiding this comment

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

Wow, displayName is amazing for Teleterm where adding React DevTools is a bit of a pain. 🙏

This option enhances the attached CSS class name on each component with richer output to help identify your components in the DOM without React DevTools. In your page source you'll see: <button class="Button-asdf123 asdf123" /> instead of just <button class="asdf123" />.

Copy link
Copy Markdown
Contributor Author

@gzdunek gzdunek Mar 25, 2022

Choose a reason for hiding this comment

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

True, but I just want to add that there is no change for generated classnames.
This plugin generated displayName by default (so { displayName: true } in dev mode doesn't change anything - I added it for informative purposes).

],
},
},
presets: makePresents(),
plugins,
plugins: [
...plugins,
['babel-plugin-styled-components', { displayName: false, ssr: false }],
],
};