Skip to content

v4.0.0

Latest
Compare
Choose a tag to compare
@frenic frenic released this 11 Aug 14:32
· 20 commits to master since this release

Major changes

  • 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',
      },
    });

Changelog

  • 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 {
        // ...
      }
    }