chore(www): migrate to emotion 10

[DSchau]

Description

Migrate www/ to emotion 10

[DSchau]

Marking this a WIP - I tested it for all of 5 minutes 🤷‍♂️

Will revisit this later today.

[t2ca]

As discussed previously here:

#10291 (comment)

The code below will break:

www/src/components/navigation-mobile.js

const getNavItemStyles = ({ isPartiallyCurrent }) =>
  isPartiallyCurrent
    ? {
        className: css({
          ...styles.link.default,
          ...styles.link.active,
          ...styles.svg.active,
        }),
      }
    : {
        className: css({
          ...styles.link.default,
          ...styles.svg.default,
        }),
      }

In my project, i just used the activeStyle prop in the Link component below:

const MobileNavItem = ({ linkTo, label, icon }) => (
  <Link to={linkTo} getProps={getNavItemStyles}>
    <span dangerouslySetInnerHTML={{ __html: icon }} />
    <div>{label}</div>
  </Link>
)

[t2ca]

Couldn't we do something like this

const MobileNavItem = ({ linkTo, label, icon }) => (
  <Link
    to={linkTo}
    css={{ ...styles.link.default, ...styles.svg.default }}
    activeStyle={{ ...styles.link.active, ...styles.svg.active }}
  >
    <span dangerouslySetInnerHTML={{ __html: icon }} />
    <div>{label}</div>
  </Link>
)

[DSchau]

@t2ca no - unfortunately. We use custom syntax (e.g. && for specificity) and other things.

I'm thinking of just adding an attribute that we can style against. See 7c6a0cc

[wardpeet]

no breaking things, just adding a few comments. I'll approve anyway

[wardpeet]

shouldn't we move to createRef?

[DSchau]

What's the benefit? Shouldn't these work exactly the same?

[wardpeet]

no benefit just following best practices

The examples below have been updated to use the React.createRef() API introduced in React 16.3. If you are using an earlier release of React, we recommend using callback refs instead.
https://reactjs.org/docs/refs-and-the-dom.html

it was more like oh he changes innerRef to ref, maybe update using createRef too but no biggy 😄

[DSchau]

Ah! I've always thought that createRef was providing an alternate/better mechanism to string refs, e.g. ref="someValue". I didn't know if it's preferred over callback refs, but rather just seems to be an alternate API?

[wardpeet]

At the moment there is no real benefit for it but I can imagine that they will deprecate old behaviour in the next release as with createRef the framework has a bit more control

[wardpeet]

i'm not a fan of this syntax though 😋 (just preference)

[DSchau]

How would you change it? (I don't like it that much either!)

[wardpeet]

const getProps = ({ isPartiallyCurrent }) => {
  if (!isPartiallyCurrent ) {
    return
  }
  return { "data-active": true }
}

it's more code but the minifier takes care of it.

[Kosai106]

@wardpeet Why start with the falsy value in your if rather than the opposite? It saves 1 character by removing the !.

const getProps = ({ isPartiallyCurrent }) => {
  if (isPartiallyCurrent) {
    return { "data-active": true }
  }
  return
}

[wardpeet]

It's just the code style I use. It's called Return Early. I like to put meaningless returns like error state or null returns at the top and actual code that I should care about in the happy path at the bottom.

Let's not go into the world of micro-benchmarking it's most of the time not worth it. In this example, there will be nothing to win as a minifier just fixes this.

your snippet:

const getProps = ({ isPartiallyCurrent }) => {
  if (isPartiallyCurrent) {
    return { "data-active": true }
  }
  return
}

minification:

const getProps=({isPartiallyCurrent:t})=>{if(t)return{"data-active":!0}};

my snippet:

const getProps = ({ isPartiallyCurrent }) => {
  if (!isPartiallyCurrent ) {
    return
  }
  return { "data-active": true }
}

minification:

const getProps=({isPartiallyCurrent:t})=>{if(t)return{"data-active":!0}};

[Kosai106]

@wardpeet No no, don't worry, I was simply asking out of curiosity. Thanks for the clarification. 😄

[wardpeet]

no breaking things, just adding a few comments. I'll approve anyway

[fk]

<3 🙏