CSS Map alternative compilation approach

[liamqma]

This PR presents a different compilation approach compared to #1492.

It transforms

const styles = cssMap({
  danger: {
      color: 'red',
      backgroundColor: 'red'
  },
  success: {
    color: 'green',
    backgroundColor: 'green'
  }
});
<div css={css([styles[variant]) />

to

const styles = {
  danger: "_syaz5scu _bfhk5scu",
  success: "_syazbf54 _bfhkbf54",
};
<div className={ax([styles[variant]) />

The benefits are:

• dramatically simplify evaluation as we no longer evaluate styles[variant].
• paves the way for transforming css the same way as cssMap.
  In the future, we can transform

const foo = css({ 
    color: 'red' 
})

const bar = cssMap({
    danger: {
       color: 'red'
    },
    success: {
      color: 'green'
    }
});

<div css={css([foo, bar[variant]])} />

to

const foo = ".a";

const bar = {
    danger:".a",
    success: ".b",
}
<div className={ax([foo, bar[variant]])} />

[changeset-bot]

🦋 Changeset detected

Latest commit: 717b429

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 11 packages

Name	Type
@compiled/babel-plugin	Minor
@compiled/webpack-app	Minor
@compiled/parcel-app	Minor
@compiled/react	Minor
@compiled/parcel-transformer	Patch
@compiled/webpack-loader	Patch
@compiled/parcel-optimizer-test-app	Patch
@compiled/parcel-transformer-test-app	Patch
@compiled/parcel-transformer-test-compress-class-name-app	Patch
@compiled/parcel-transformer-test-custom-resolver-app	Patch
@compiled/parcel-transformer-test-extract-app	Patch

Not sure what this means? Click here to learn what changesets are.

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

[JakeLane]

Is it worth statically embedding this? We can reduce the amount of runtime code by directly injecting the classnames we know here

[liamqma]

Good idea 👍

[liamqma]

I want to minimise statical evaluation (which is 🐰🕳️). I am going to leave this job to the bundler.

I just tested a JFE Webpack/Parcel prod build. It inlines the variable well.

const foo = { bar: '.aaaabbbb' }
<div className={foo.bar} />

to

<div className={'.aaaabbbb'} />

[JakeLane]

Can you please add some unit tests for correct usage of the API and some VR tests?

[JakeLane]

What happens if the key is not in the css map?

[liamqma]

then class name will be undefined and stripped out by ax. The idea is to reply on type safety to detect problems, instead of build-time errors.

[dddlr]

makes sense, I assume that should help reduce the impact on build time

[liamqma]

Can you please add some unit tests for correct usage of the API and some VR tests?

Sure!

[JakeLane]

Nice work!