kripod/otion

CSS specificity

secretlifeof opened this issue · 2 comments

secretlifeof commented

Description

Good morning Kripod!

I am trying to do some benchmarking with your library and noticed that there is an issue with specificity when combining different CSS classes like below.

import { css } from 'otion'

const classNames = css({
  borderColor: 'transparent',
  borderStyle: 'solid',
  borderTopWidth: '0',
})

const Box = () => {
  return (
    <div
      className={`${css({
        borderBottomColor: 'green',
      })} ${classNames}`}
    />
  )
}

This should have borderBottomColor as the borderColor, but it is transparent.

Environment

Does this command work? It outputs this:
npx: installed 1 in 3.159schMetadata: sill resolveWithNewModule isexe@2.0.0 checking installable status
npx: installed 73 in 8.305s

"otion": "^0.6.2",
"react": "^16.8.6",
"react-dom": "^16.8.6",

kripod commented

Thank you for opening this issue!

Unfortunately, class composition is not yet implemented as a feature, and thus, only different properties should be mixed within a className.

Please follow #47 for proposed solutions.

secretlifeof commented

I think this is different than the solutions related to #47. It is related to a global className specificity. What I meant was that BorderBottomColor should always overwrite borderColor.

Like your rulePrecedence.

Border has specificity 1
BorderColor has specificity 2
BorderBottomColor has specificity 3

Looking forward to your version 1 and 2.

Thank you again for taking the time to put this library together!