emotion-js/facepaint

First CSS property in list must specify all slots

staylor opened this issue · 2 comments

staylor commented

If I do not specify 4 values for the first property, rules will get output out of order, which causes precedence issues:

const mqSection = facepaint([
  themeUtils.breakpoint.medium,
  themeUtils.breakpoint.mediumLarge,
  '@media print',
]);
const responsiveSection = mqSection({
  // first prop has to have same length as facepaint list
  background: [themeUtils.color.white, themeUtils.color.white, 'transparent'],
  borderBottom: [`1px solid ${themeUtils.color.gray60}`, null, 0],
  height: ['36px', '35px'],
  padding: ['8px 15px 3px', '11px 15px 6px', '4px 15px 2px'],
});

See:

.css-1evbtg0 {
  background: #fff;
  border-bottom: 1px solid #e2e2e2;
  height: 36px;
  padding: 8px 15px 3px;
  position: relative;
}
@media (min-width:1024px) {
  .css-1evbtg0 {
    background: transparent;
    border-bottom: 0; 
    height: 35px;
    padding: 4px 15px 2px;
  }
}
@media print{
  .css-1evbtg0 {
    border-bottom: 0;
    height: 35px;
    padding: 4px 15px 2px;
  }
}
/* correct values, but is now overwriting 1024px */
@media (min-width:720px) {
  .css-1evbtg0 {
    height: 35px;
    padding: 11px 15px 6px;
  }
}

when I specify this it works fine:

background: [themeUtils.color.white, themeUtils.color.white, 'transparent', 'transparent']

This library is awesome, thank you for it.

emmatown commented

I can't seem to reproduce this, could you provide a CodeSandbox?

staylor commented

ok, finally got an example: https://w7w977qmww.codesandbox.io/

once you add more values to the first rule background, the media queries re-order properly
https://codesandbox.io/s/w7w977qmww

  • 👍2