Lightweight CSS-in-JS library with high performance written in TypeScript
MIT License
Bot releases are visible (Hide)
The compose()
prop has been removed and will now automatically apply style to the closest styled element e.g. <styled.Div />
function InnerComponent(props) {
return <styled.Div />; // Renders to `<div class="a" />` without `props.compose()`
}
const StyledComponent = styled(InnerComponent, { color: 'red' });
Use multiple font faces within the same family and results in fontFamily
property being required
const Component = styled.div({
fontFamily: [
{
fontFamily: '"MyFont"',
fontWeight: 'normal',
src: "url(https://domain.tld/font-regular.woff2) format('woff2')",
},
{
fontFamily: '"MyFont"',
fontWeight: 'bold',
src: "url(https://domain.tld/font-bold.woff2) format('woff2')",
},
'sans-serif',
],
});
Support for attribute selectors (helper function pseudo()
has been renamed to selector()
to handle both pseudo and attribute selectors)
const Component = styled.div({
'[disabled]': {
display: 'none',
},
});
Support for attribute selectors.
const Component = styled.div({
'[disabled]': {
display: 'none',
},
});
Support for @supports
condition rules.
const className = styled.div({
'@supports (display: grid)': {
display: 'grid',
},
'@supports not (display: grid)': {
display: 'flex',
},
});
Arguments to decorators are deprecated to favor a more readable way to use them
// Deprecated
const StyledComponent = someDecorator(
anotherDecorator(styled.Div, { color: 'red' })
);
// Recommended
const StyledComponent = styled.div(someDecorator, anotherDecorator, {
color: 'red',
});
Generate a static style.css
using a new Typescript transformer: @glitz/static
const Component () {
return <styled.Div css={{ color: 'red' }} />
}
// Component will be rewritten and style added to a static `style.css` file
const Component () {
return <div className="a" />
}
Support for React stream rendering on server using ReactDOM.renderToNodeStream()
<styled.Div css={{ color: 'red' }} />
// This will render into this on the server
<style data-glitz>.a{color:red}</style>
<div class="a" />
Types are integrated in @glitz/core
and @glitz/type
is removed
import { Style } from '@glitz/core';
declare module '@glitz/core' {
interface Theme {
// ...
}
}
Published by frenic over 6 years ago
Features
Published by frenic over 6 years ago
Features
fontFamily
propertyanimationName
property as alternative to the @keyframes
property