Details of bundle changes

Generated by 🚫 dangerJS against 44b8dcf

I'm not sure how to handle cases like:

https://github.com/mui-org/material-ui/blob/7a4bd5807959b0069be9b5f40ba80eaae9ace2c8/docs/src/pages/components/slider/CustomizedSlider.tsx#L15

width: 300 + parseInt(theme.spacing(6).slice(0, -2));

😄

It's the problem that @joshwooding raised here: #16205 (comment)

How about if theme.spacing() accepted the unit to append, and treated an empty string as a special case?:

> theme.spacing(1)
'8px'
> theme.spacing([1, 'rem'])
'8rem'
> theme.spacing([1, ''])
8

I have tried to benchmark what the others are doing here.

• styled-system: nothing. Last year they removed the px unit in V5 styled-system/styled-system#513, which is fine for the JavaScript syntax but not for the CSS template one: https://codesandbox.io/s/immutable-wildflower-9txlp?file=/src/App.js.
• xstyled: I couldn't find anything related.
• spacing-helper: It looks a lot like what we provide. No solution.

How about if theme.spacing() accepted the unit to append, and treated an empty string as a special case?:

I think that it would leak the intent, so not working.

I wonder if the best answer here isn't on CSS land: calc(). If you take the above example, the motivation is to have 300px and 2 spacing unit (in whatever CSS unit) on each side. @mbrookes Would it work, it seems to?

@mbrookes Would it work, it seems to?

Perfect - it even works in IE.

Hmm:

padding: theme.spacing(0.5, 0, 0.5, `${Math.max(0, theme.spacing(1) - 3)}px`),

CSS max() isn't supported in IE: https://caniuse.com/?search=max()

Also:

    [theme.breakpoints.up(600 + theme.spacing(2) * 2)]: {
      width: 600,
      marginLeft: 'auto',
      marginRight: 'auto',
    },

@mbrookes For the first case we can use px, and the second a breakpoint value, md?

I'm not sure what the second was about (and I wrote it! 😅 ) – it seems to work just the same with 'md'.

I don't understand what you mean for the first - it is in px?

I don't understand what you mean for the first - it is in px?

Sorry for the confusion, I meant using hardcoded pixels, not. The value from the theme.