Optimize imports of css, styled and utils

[Tyderion]

Currently transformed inputs for those functions are as follows:

import { css } from "next-yak/internal"

css``

If we optimize and use same trick as used in #154 and import it the following way:

import * as __yak from "next-yak/internal"

__yak.css``

Webpack will better optimize bundle size because it can use (minified, e.g.) s.As instead of (0, s.As) to access those functions

[chklauser]

@Tyderion isn't this implemented with your PR #154 ? Is there an aspect to this that is still open?

[Tyderion]

I think this is only implemented for imports of styled.xxx), but not for other functions (utilities). These could be migrated to this new pattern too and that's what this issue is about
@jantimon the other imports were not optimized as well right?

[Mad-Kat]

Yes exactly.

The idea was that all functions get the same treatment as @Tyderion did with styled.xyz in #154.

So the current transpilation of the functions e.g.

import { styled, css, __yak_unitPostFix } from "next-yak/internal";
import * as __yak from "next-yak/internal";

would get transpiled to

import * as __yak from "next-yak/internal";

and used accordingly. This would help for minification.

[jantimon]

does this really make a difference for minification?

[Mad-Kat]

Maybe. In the ideal world it shouldn't have any implications on bundle size. I thought that less characters in this approach (without explicit this binding) maybe would have an impact, but practically speaking creating a prod minification for our class names would have the way bigger effect.

I think this Issue is still valid for the case that we then have only one import for all yak specific utility functions (besides the CSS module import) instead of two, but this is also not very important 😅

What do you think @jantimon?