elm-css

elm-css copied to clipboard

Hi! I was wondering what's the proper way of mixing styles which have properties in common. I've read #345 but in the following example:

sCell : Style
sCell =
   Css.batch
       [ minWidth (px sCellWidth)
       , height (px sCellHeight)
       , alignSelf flexStart
       , boxSizing borderBox
       , border3 (px sCellBorder) solid (hex "000000")
       , backgroundColor (hex "FFFFFF")
       , textAlign center
       , lineHeight (px (sCellHeight - 2 * sCellPadding))
       , padding (px sCellPadding)
       ]

sMainCell : Style
sMainCell =
   Css.batch
       [ sCell
       , minWidth (px (4 * sCellWidth))
       , position sticky
       , left (px 0)
       , zIndex (int 1)
       ]

sMailCell includes sCell but also declares minWidth. I want main's minWidth declaration to override the one included via sCell but instead both minWidth properties end up appearing in the generated class and the browsers picks one without a deterministic criteria (or that's what it seems).

Which makes me wonder if I'm using the library as expected? Or what's the best way to model something like this:

.cell {
  min-width: $cell-width;
  height: $cell-height;
  align-self: flex-start;
  box-sizing: border-box;
  border: $cell-border solid black;
  background: white;
  text-align: center;
  line-height: calc(#{$cell-height} - 2 * #{$cell-padding});
  padding: $cell-padding;
  
  &.header {
    color: white;
    background: black;
  }
  
  &.main {
    min-width: calc(4 * #{$cell-width});
    position: sticky;
    left: 0;
    z-index: 1;
  }
  
  &.month {
    text-align: left;
    min-width: calc(28 * #{$cell-width});
    
    .month-text {
      position: sticky;
      left: calc(4 * #{$cell-width} + #{$cell-padding});
    }
  }
  
  &.week {
    min-width: calc(7 * #{$cell-width});
    text-align: left;
  }
  
  &.tech {
    text-align: right;
  }
}

Here is the CSS output I get on Chrome

Hm, is this happening when you do Css.batch [ sCell, sMainCell ] or are you combining them a different way?

This happens when both sCell and sMailCell get applied to an html element by using the css function. For example:

div [ css [ sCell, sMainCell ] ] [ text "Hello!" ]