Beta 0.1.0-canary.0

[jonathantneal]

ACTUALLY, DO MERGE

This PR updates Stitches to produce object-oriented CSS. This also enables all of the features from the react version into the core version. This also updates several features to enhance the powers of components, themes, keyframes, and global css. This also fully enables CSS at-rules, adding support for @supports conditionals within components, and @import, @font-face, and @register rules in global CSS.

More details to come...

ACTUALLY, DO MERGE

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 221fbab:

Sandbox	Source
Stitches CI: Next.js	Configuration

[cometkim]

Could you share what you have considered with the community? I prefer Atomic CSS, but I respect stitches' long-standing research and decision and I'm just curious about it.

Edit: Also I maintain gatsby-theme-stitches. If the behavior changes, I need to know because I have to reconsider the appropriate way to integrate it with Gatsby.

[jonathantneal]

Hi, @cometkim! Thanks for following closely.

The changes to the API are relatively minor, and there will be a migration post, but this PR is a work in progress and not yet ready for review. There are still issues to work out before its time for show-and-tell.

Still, I’m excited that you noticed! So, let me say a few things. First, the pitch to move from producing atomic CSS to object-oriented CSS was not made lightly. Next, because atomic classes begin life as standard css rules, this version can still be used to create atomic classes — when utility classes are the right fit for your app, site, or team.

In the meantime, this draft PR gives me a chance to work out any PR-specific issues, and maybe catch some eager eyes. 👀

[peduarte]

We'll prob write a blog post expanding on why we switched from atomic CSS to object-oriented CSS. In a nutshell, the main problems with atomic CSS were:

• Lots and lots of specificity issues
• Forced us into making strong opinions within the lib, like decide the specificity order of pseudo-classes
• Poor debugging experience
• Bloated bundle size to accommodate for lots of edge cases
• Inability to create global rules and global declarations like @font-face, @import, etc.

In the beta version, we have:

• Reduced bundle size from 8kb to less than 3kb
• Not opinionated - you just write CSS and expect the CSS you wrote
• Excellent debugging experience, inc class names "hints" for variants and overrides
• Fully implemented token parsing
• Supports all features of CSS, like @font-face, @import, @supports, etc.

Stitches was never about it being atomic. It was about the DX, the API, and performance. All of those are now better than ever. It went from 8kb to less than 3kb. The performance is incredible - we'll have some benchmarks on this.

[peduarte]

The plan is:

• Merge this to canary branch
• Release 0.1.0-canary.0
• Test with our own products, design system
• Test with our early adopters <3
• Iron out rough edges