V4!

[danieldelcore]

Main branch for all changes related to Trousers v4 🎉

Original issue: #83 Closes: #83 #80 #79 #74 #67 #13

In a nutshell 🌰

Trousers in its current form solves a lot of problems for me, but it's becoming clear that it needs to be rearchitected in order to solve some of its the short-comings and modernize it a bit.

V4 has a large focus on:

1. Providing a build-time alternative to avoid runtime as much as possible
2. Utilise css variables for theming to improve runtime
3. Lean into the CSS prop as an API to help us achieve the above

Features

• 🎉 Build-time, near-zero runtime via babel marco! 🎉
• CSS-var based theming
• Leaning into the CSS prop
• Zero config SSR
• Modifier predicates are passed into the underlying element via modifier props $primary
• Less dependency on React
• No longer dependant on hooks
• Dynamic properties can be applied to css vars to avoid remounting styles
• Runtime version of the library is faster
• Smaller overall
• New package structure
• Collector API improved
• Styled API

Examples

React

/** @jsx jsx */
import { css, jsx } from '@trousers/react';

const styles = css('button', { backgroundColor: 'var(--theme-background-color)' })
  .modifier('primary', {     backgroundColor: '#f95b5b' })
   .modifier('disabled', { backgroundColor: 'red' });

const Button = props => 
 <button css={styles} $primary={props.primary} $disabled={props.disabled}>
    {props.children}
 </button>;

export default Button;

Macro (build-time only)

import { css } from '@trousers/macro';

const styles = css('button', { backgroundColor: 'var(--theme-background-color)' })
  .modifier('primary', {     backgroundColor: '#f95b5b' })
   .modifier('disabled', { backgroundColor: 'red' });

const Button = props => 
 <button css={styles} $primary={props.primary} $disabled={props.disabled}>
    {props.children}
 </button>;

export default Button;

[changeset-bot[bot]]

⚠️ No Changeset found

Latest commit: ded6c10b0016d2b276dcdff1f771dd2afa75f46c

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[MrBirb]

Daniel will you ever come back to finish this?

[danieldelcore]

Hey @MrBirb , i definitely want to come back to this and get it over the line. I think this is already very close I just need to do some more thorough testing :)

[MrBirb]

Thank you! Can’t wait for this to land!

[danieldelcore]

Hey @MrBirb , it would be sweet if you could help me dogfood the current alpha version and LMK what you think!

this should be available in 4.0.0-alpha6

[MrBirb]

Sure thing! I will try this in the weekend!