Tech support
This page documents the essential technologies and tools which must be used when working with or consuming Mesh components.
React
All components are built using React and is therefore a dependency for Mesh.
We currently have support for Version 18 of React and above.
As version 18 was released in 2022, we do not maintain support for earlier versions of React.
React Version 18.0.0 introduced no breaking changes in regard to how you work with the Mesh Design System. Please let us know if you have any issues.
Styled Components
Styled-components is a popular CSS-in-JS library for styling React components using tagged template literals. It allows developers to write actual CSS code to style components, making it easier to manage and maintain styles in large applications. The library has gone through several updates, with version 6 introducing new features and improvements.
However, there are some drawbacks and limitations associated with the latest version, which have led us to sticking with version 5. These issues primarily include:
Integrated Types and Missing Defaults: For TypeScript users, the instability and lack of proper type definitions in the latest version can be a significant problem. This can lead to type errors and issues that can be hard to debug and resolve. In version 6, types are integrated directly with styled-components, resulting in the removal of the community-maintained type definitions (@types/styled-components). Additionally, certain default exports are missing, and the version lacks adequate maintenance. For further details, refer to the GitHub issue.
Unsupported CSS Interpolations: CSS interpolations are not supported within the styled function. For more information, see the related GitHub issue.
Maintenance Issues: There have been concerns about the maintenance of the library. Frequent updates, breaking changes, and inadequate communication from the maintainers can cause instability in projects relying on the library.
Given these concerns, it is suggested to use version 5 of styled-components for the time being.
Since the mesh components utilize styled-components version 5, switching to version 6 in your project may result in the following warning:
No More Automatic Prop Filtering: In styled-components version 5, any props not explicitly defined in a styled component were automatically filtered out before being passed to the underlying HTML element. However, in version 6, this automatic filtering has been removed, and all props will be forwarded to the underlying component or HTML element by default. Consequently, if you pass props that are invalid for the associated HTML element, you may encounter console warnings, as these props will no longer be filtered out automatically.