trousers

Major Changes

• e6a3323: # Version 3 🎉

  This is Trousers' biggest update yet!

  Including:

  • Support for the CSS prop 👩‍🎤
  • Mono-repo setup and decomposition 📦
  • Object notation CSS 🍞
  • Theme CSS var package 🎨
  • insertRule 🏹
  • Smaller bundles 🐭
  • Custom style collectors 🕺
  • Trousers package with all exports for backwards compatibility

  Removed

  • withStyles HOC (please use css prop for class components)

  Developer experience

  • Adds storybook-addon-performance
  • Adds react-stable-ref to test for re-renders
  • Adds atlassian/changesets
  • Adds manypkg

• c9c8187: Trousers v3!

  • CSS prop 👩‍🎤
  • Mono-repo setup and decomposition 📦
  • Object notation CSS 🍞
  • Theme CSS var package 🎨
  • prod mode support for insertRule 🏹
  • Smaller bundles 🐭
  • Support for custom style collectors 🕺
  • Trousers package with all exports for backwards compatibility

  Dev

  • Adds storybook-addon-performance
  • Adds react-stable-ref to test for re-renders
  • Adds atlassian/changesets

Patch Changes

• Updated dependencies [e6a3323]
• Updated dependencies [c9c8187]
  • @trousers/[email protected]
  • @trousers/[email protected]

🐛Fixes issues with unwanted rerenders https://github.com/danieldelcore/trousers/pull/38
🔧 Removes the elementName getter, in favour of a name property on the style definition https://github.com/danieldelcore/trousers/pull/36
📃 Minor changes to the misc storybook example https://github.com/danieldelcore/trousers/pull/36

Adds the ability to create named modifiers

New API looks like...

const styles = styleCollector('button')
  .element``
  .modifier('primary', props => props.primary)`
    color: red;
  `;

This approach uses method overloading to allow the modifier name to be optional and provide backward compatibility. Which means, this is also allowed and works 🎉

const styles = styleCollector('button')
  .element``
  .modifier('props => props.primary)`
    color: red;
  `;

Improvements 💪

🌏 Reworked globals ✅
⚡️ Performance improvements ✅
🎨 Fix paint flashing ✅
👾 Improved SSR API ✅
🐭 Reduced bundle size ✅
📃 Better docs ✅
⚔️ Battle tested ✅

Breaking changes 💥

• useGlobal renamed to useGlobals
• useTrousers alias removed, please use useStyles
• withTrousers alias removed, please use withStyles
• trousers alias removed, please use styleCollector
• severStyleRegistry.get() now returns React Nodes

Misc 🎁

• TypeScript users no longer have to pass all generic types to useStyles, css and styleCollector
• Render flashing is now gone, courtesy of useLayoutEffect
• Removed murmurhash in favour of a small hand-rolled alternative
• useGlobals will now accept an array of styles
• Unit tests everywhere!