Twin + Goober

[pix2D]

https://github.com/cristianbote/goober

Perhaps this would be a good alternative to styled-components / emotion? The bundle size and performance difference sounds very tempting... not sure what is missing in terms of features to achieve that (if anything).

[ben-rogerson]

Hey Dan

Have you seen the example with Goober + Preact?

I'm a big fan of Goober and really keen on adding more.

How about I add these examples to the lineup next?

• Next + Goober (TypeScript)
• Gatsby + Goober (TypeScript)

[ben-rogerson]

Hey dan, I think it might be down to goober support for the interpolation, I've posted some workarounds in that issue 👍

[pix2D]

Hey Ben, thanks but I'm not sure that's my issue because just a normal tw="" in the HTML didn't work either. I had to revert back to styled-components for now (somehow that always works, funny how that goes 🥲), I'll investigate this again when there's a full Next + Goober + TS example. Thanks for your continued hard work on all this! 👍

[ben-rogerson]

I've just added the tw/css props to the Goober example using @agney/babel-plugin-goober-css-prop. That goober + next + typescript example is coming soon 👍

[pix2D]

So with webpack4 adding the above made everything work now! 🎉 With webpack5 it also does work (styling is applied and so on), but in the browser (only) there's the following error:

Uncaught TypeError: i is not a function
    l goober.js:1
    React 17
        renderWithHooks
        mountIndeterminateComponent
        beginWork
        callCallback
        invokeGuardedCallbackDev
        invokeGuardedCallback
        beginWork$1
        performUnitOfWork
        workLoopSync
        renderRootSync
        performSyncWorkOnRoot
        scheduleUpdateOnFiber
        updateContainer
        legacyRenderSubtreeIntoContainer
        unbatchedUpdates
        legacyRenderSubtreeIntoContainer
        hydrate
    renderReactElement index.tsx:530
    doRender index.tsx:800
    _callee2$ index.tsx:425
    Babel 8
        tryCatch
        invoke
        defineIteratorMethods
        asyncGeneratorStep
        _next
        _asyncToGenerator
        _asyncToGenerator
        _render
    render index.js:495
    <anonymous> next-dev.js:85
    displayContent fouc.js:14
    displayContent fouc.js:5
    <anonymous> next-dev.js:84
    promise callback* next-dev.js:31
    NextJS 7
        js
        factory
        __webpack_require__
        __webpack_exec__
        <anonymous>
        webpackJsonpCallback
        <anonymous>

[ben-rogerson]

hey dan, sorrry I missed this - cheers for the heads up, I'll find a fix/workaround in the "Next + Goober (TypeScript)" example