Lazy evaluate head styles

[vidhu]

Is your feature request related to a problem? Please describe

I have a custom head component which emits Heading styles. It also emits heading styles in a media query i.e

add('style', `
  h1 {
    font-size: 26px;
  }

  @media only screen and (max-width:480px) {
    h1 {
      font-size: 20px;
    }
  }
`)

The issue is I need to hardcode the breakpoint. If the breakpoint is changed using a <mj-breakpoint/> component, then this would not work as expected.

Describe the solution you'd like

I propose (and happy to submit a PR) to allow adding a function to the list of styles add('style', (breakpoint) => string) which would be executed in the skeleton. This would allow lazy evaluation of any styles and use the globalDatas as a context.

To solve the above use case with this new change, the code would look like

add('style', (breakpoint) => `
  h1 {
    font-size: 26px;
  }

  @media only screen and (max-width:${breakpoint}) {
    h1 {
      font-size: 20px;
    }
  }
`)

During execution, this would mean all the head components including the breakpoint has been evaluated before this style is "lazy evaluated" in the skeleton

Again, I'm happy to submit a PR as a PoC and continue on it if you like the proposal.

Describe alternatives you've considered
I dont see any other alternative to emitting styles from a head component and taking the breakpoint into account

[iRyusa]

Hi @vidhu !

That would be really cool to have something like this ! As globalDatas (we really need to rename that var 😬) can be altered during mj-head processing, it totally need lazy evaluation for this 👍

[vidhu]

@iRyusa Thanks for the go ahead. I opened a PR. Let me know what you think

[kmcb777]

the PR has been merged and released so we can close this one