Convert imported css to inline (js-style) css

[dhowe]

So we need to use inline (react-style) css for components that we will send in email (OceanProfile and AvatarComponent so far).

The css code here was originally scss (from OceanProfile.scss), which I converted to css and it appears to work ok.

But we need it to be react-inline-style. With an online converter I get the inline styles below, but they don't work the same (at least the rotate transform fails).

const styles = {
  "OceanProfile": {
    "backgroundColor": "#fff",
    "color": "#21c0fc",
    "width": "100vw",
    "position": "fixed"
  },
  "OceanProfile_h6": {
    "color": "#21c0fc",
    "fontSize": "18px",
    "textAlign": "left",
    "marginBottom": "10px"
  },
  "OceanProfile_h6_strong": {
    "color": "#21c0fc",
    "fontWeight": "bold"
  },
  "OceanProfile__OceanIcons": {
    "marginRight": "40px",
    "marginLeft": "20px",
    "height": "320px"
  },
  "OceanProfile__OceanText": {
    "maxWidth": "500px",
    "marginRight": "50px"
  },
  "OceanProfile__OceanSliders": {
    "marginLeft": "auto",
    "marginRight": "auto",
    "display": "flex"
  },
  "OceanProfile__OceanSliders__textSliderText": {
    "color": "#21c0fc",
    "width": "120px",
    "textAlign": "center",
    "height": "auto",
    "overflow": "visible"
  },
  "OceanProfile__OceanSliders__textSliderText_p": {
    "color": "#21c0fc",
    "fontSize": "12px",
    "textAlign": "center",
    "width": "100%"
  },
  "OceanProfile__OceanSliders__textSliderText__iconText": {
    "width": "100%",
    "textAlign": "center",
    "marginTop": "-90px"
  },
  "OceanProfile__OceanSliders__textSliderText__sliderContainer": {
    "height": "200px",
    "display": "inline-flex",
    "paddingTop": "50px"
  },
  "OceanProfile__OceanSliders__textSliderText__slider": {
    "transform": "rotate(270deg)",
    "height": "5px",
    "width": "92px",
    "marginRight": "-6px"
  },
  "OceanProfile__OceanSliders__textSliderText_div_class___MuiSlider_track": {
    "backgroundColor": "#21c0fc"
  },
  "OceanProfile__OceanSliders__textSliderText_div_class___MuiSlider_track___class___MuiSlider_trackBefore": {
    "borderTopLeftRadius": "0",
    "borderBottomLeftRadius": "0"
  },
  "OceanProfile__OceanSliders__textSliderText_div_class___MuiSlider_track___class___MuiSlider_trackAfter": {
    "opacity": "0",
    "borderTopRightRadius": "0",
    "borderBottomRightRadius": "0"
  },
  "OceanProfile__OceanSliders__textSliderText_button_class___MuiButtonBase": {
    "width": "30px",
    "height": "30px",
    "backgroundColor": "#21c0fc",
    "border": "solid #21c0fc 3px",
    "display": "none"
  },
  "OceanProfile__OceanSliders__textSliderText_button_class___MuiButtonBase___class___MuiSlider_activated": {
    "width": "30px",
    "height": "30px",
    "backgroundColor": "#21c0fc",
    "border": "solid #21c0fc 3px",
    "boxShadow": "none"
  },
  "content__OceanProfile": {
    "marginLeft": "-100px",
    "position": "relative"
  },
  "content__OceanProfile_h6": {
    "color": "#21c0fc",
    "fontSize": "18px",
    "textAlign": "left",
    "marginBottom": "10px"
  },
  "content__OceanProfile_h6_strong": {
    "color": "#21c0fc",
    "fontWeight": "bold"
  }
}

[dhowe]

@cqx931 note that if it is impossible to include any of that css as inline-react code, then we may have to use this file, which is injected into the head of the generated html file (in spectre-mail project which, for now, is a separate repo)

[cqx931]

A few useful resources for material-ui server-side rendering: https://material-ui.com/styles/api/#serverstylesheets https://material-ui.com/guides/server-rendering/

https://material-ui.com/guides/minimizing-bundle-size/

[cqx931]

Please check: https://github.com/dhowe/spectre-mail/pull/1 Fixed svg and got the material-ui jss to be correctly rendered for server-side.

It still doesn't look like exactly the same as the spectre client-side at the moment but we can tweak those details later.

[dhowe]

this is excellent work... next steps would be to get the avatar and text from the comment into the template, then I can hook it up to the mailer stuff

1. is there anything to be done about the amount of css that ends up in the email ?
2. how do we deal with the import-css line that is in the current jsx templates ?

@cqx931 let me know your schedule

[cqx931]

1. yes, there are some strategies for minimizing the bundle size for material UI. I can take a look into that to make sure the email size won't get too big from the design.

2. Can you point me to the import-css line that is in the current jsx templates?

[cqx931]

Something like purgecss would also be helpful to remove unused css. https://github.com/FullHuman/purgecss-webpack-plugin

[dhowe]

closing this as discussed in other tickets