v4.0.0

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

@glitz/[email protected]

Features

• Smart deep style composition

@glitz/[email protected]

Features

• Shorthand objects resolves to longform
• Font faces through the fontFamily property
• Atomic style option
• Helper functions for pseudo and media styles
• Use animationName property as alternative to the @keyframes property