Skip to content

2.4.0: CSS literals

Compare
Choose a tag to compare
@houd1ni houd1ni released this 17 Mar 15:55
· 150 commits to master since this release

Now, it's perfectly valid, 'cause css returns a style object.

// Somewhere above: import { css } from 'fela-vue'

computed: {
  style() {
    const value = 40
    return css`
        my-class: {
          margin: 10px 5px;
          padding 11 // spaces could be used instead of colons.
          margin-left: ${value}
          margin-right: 10px
          >*:first-of-type {
            margin: 0
          }
       }
    `
  }
}

// and another use case:
computed: {
  style() {
    const value = 40
    return {
        myClass: css`
          margin: 10px 5px;
          padding 11
          margin-left: ${value}
          margin-right: 10px
          >*:first-of-type {
            margin: 0
          }
        `
      }
  }
}