All notable changes to this project will be documented in this file.
Bug fixes
aspectRatio: <number>
no longer incorrectly transpiles to<number>px
in CSSaspectRatio: <number>
is no longer a Flow error
New features
- You can now use
zacs:style
on all elements '.foo, .bar': {}
CSS-only stylesetsborder: [1, 'red']
shorthand- You can now use shorthands and
web/native: {}
scopes insidezacs:style={}
attribute. Note that this only works if an object literal is passed. You can transform any such style object withzacs._experimental_resolve({ ... })
<zacs.view />
and<zacs.text />
anonymous ZACS elements- You can now use
...mixin
syntax in stylesheets instead of_mixin: mixin
- On React Native, stylesheet mixins can now be arbitrary expressions and ZACS will generate more efficient representation
Performance
- Overriden properties are now stripped on native to save space and silence Hermes warnings
StyleSheet.create()
is now stripped in production (it doesn't really do anything in modern RN)- More efficient React Native imports of Text and View
- New
{experimentalStripEmpty: true}
setting - if set, stylesets that are empty won't be emitted at all - Optimizes colors in React Native in production
Bug fixes
- Fix
zacs.styled('UppercaseBuiltin')
, e.g.'RCTText'
- Fix unnecessary
require('react-native')
insertions - Fix broken
zacs.styled({ web: ..., native: zacs.text })
- Fix
-ms-
-prefixed CSS properties
Other
keepDeclarations
option is removed. Now, declarations are always kept in dev mode (to aid debuggability and to fix React Refresh by default), and always stripped in production mode.__zacs_original_name
debug attribute is now placed at the beginning of output elementsclassName={}
is now consistently placed beforestyle={}
- stylesheets: try to preserve comments in output
- BREAKING: If you use Flow, you need to upgrade to >=0.199.0
- Officially release
zacs.stylesheet({})
- Flow typing improvements -
zacs.styled()
now returns correctly typed React component in most cases
- You can now declare multiple unconditional styles by passing an array of stylesets/class names
- You can now add extra styles to a ZACS component via
zacs:style={{ attr: value }}
syntax - Strip ZACS declarations (
const Foo = zacs.foo(...)
) and ZACS import from output code by default. PasskeepDeclarations: true
in Babel config to revert to previous behavior. - Fix buggy behavior on
zacs.createXXX
components with bothzacs:inherit
andzacs:style
props whitelisted - Improved validation and error messages
- Improved Flow typing (likely to reveal new errors)
- Allow styling namespaced components, e.g.
zacs.style(Modal.Text, style.root)
- Add Flow types
- Fix issue with web installation
- Initial release of
zacs