feat: add support for @starting-style at-rule

[michaelabrahamian]

What is this change?

Adding support for the @starting-style at-rule.

Why are we making this change?

So it can be used in animations! Compiled currently throws an exception as it isn't aware of the property.

How are we making this change?

• Mostly just adding starting-style to some lists.

• The csstype dev dependency needed to be added so we could satisfy the Record<AtRules, boolean> type here.

  • @starting-style was only added to the AtRules type in version 3.1.3 of csstype: https://github.com/frenic/csstype/blame/fb448e21733ac5cb52523d3b678fdbbe1f9b42f2/index.js.flow#L3573
    • This project was previously not depending on csstype explicitly - an older version was being transitively used from @types/react: https://github.com/atlassian-labs/compiled/blob/master/yarn.lock#L4364
  • This meant I also had to add @scope, as it was also added in version 3.1.3
  • Alternatively, we could just locally extend the type with Record<AtRules | '@starting-style', boolean>. Let me know what you think 🙏

---

PR checklist

Don't delete me!

I have...

• Updated or added applicable tests
• Updated the documentation in website/ - N/A
• Added a changeset (if making any changes that affect Compiled's behaviour)

TODO:

• confirm about adding csstype dependency
• confirm what's going on with the failing test

[changeset-bot]

🦋 Changeset detected

Latest commit: 21413e5

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

This PR includes changesets to release 6 packages

Name	Type
@compiled/babel-plugin	Minor
@compiled/css	Minor
@compiled/parcel-transformer	Patch
@compiled/webpack-loader	Patch
@compiled/babel-plugin-strip-runtime	Minor
@compiled/parcel-optimizer	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

[netlify]

✅ Deploy Preview for compiled-css-in-js ready!

Name	Link
🔨 Latest commit	21413e5
🔍 Latest deploy log	https://app.netlify.com/sites/compiled-css-in-js/deploys/679813f1190ba600089bea60
😎 Deploy Preview	https://deploy-preview-1786--compiled-css-in-js.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[michaelabrahamian]

context: mentioned in the PR description, but will repeat here:

The csstype dependency needed to be added so we could satisfy the Record<AtRules, boolean> type here.

• @starting-style was only added to the AtRules type in version 3.1.3 of csstype: https://github.com/frenic/csstype/blame/fb448e21733ac5cb52523d3b678fdbbe1f9b42f2/index.js.flow#L3573
  • This project was previously not depending on csstype explicitly - an older version was being transitively used from @types/react: https://github.com/atlassian-labs/compiled/blob/master/yarn.lock#L4364
• This meant I also had to add @scope, as it was also added in version 3.1.3
• Alternatively, we could just locally extend the type with Record<AtRules | '@starting-style', boolean>. Let me know what you think 🙏

[michaelabrahamian]

question: this assertion isn't working out as I'd expect... Any ideas what I'm doing wrong? Is the input style syntax not valid?

[michaelabrahamian]

Interestingly, if I change the input to nest another property under @starting-style, e.g.:

const styles = cssMap({
  success: {
    color: 'red',
    '@starting-style': {
      div: {
        color: 'blue',
      }
    },
  },
});

It outputs this:

@starting-style div{._1gzq13q2{color:blue}}

Which makes me think the plugin is doing something wrong? It should be this:

@starting-style { div{._1gzq13q2{color:blue}} }

[michaelabrahamian]

To sanity check, I tried @font-face, which is an at-rule with a similar syntax to @starting-style:

const styles = cssMap({
  success: {
    color: 'red',
    '@font-face': {
      fontFamily: 'Trickster',
    },
  },
});

This outputs:

@font-face font-family: Trickster

Which seems like the same problem.

The @media test seems to work around this through nesting:

const styles = cssMap({
  success: {
    color: 'red',
    '@media': {
      'screen and (min-width: 500px)': {
        color: 'blue',
      },
    },
  },
});

Outputs:

@media screen and (min-width:500px){._1qhm13q2{color:blue}}

Which is valid syntax for @media... But @starting-style (and @font-face) don't accept args, so doesn't make sense here.

[michaelabrahamian]

context: @scope was also added as it is a member of the AtRules type in the updated version of csstype. Needed to satisfy the Record type.