imasanari/molcss

Atomic CSS-in-JS Library.

molcss's Issues

疑似クラスの適用順、マージの仕様を変更する

次リリース（予定: v0.2.0）で、擬似クラスや同等のcss指定の際の適用順とマージ仕様を変更する。

コード例

const className = css`
  color: red;
  &:hover {
    color: blue;
  }
  &[data-active] {
    color: green;
  }
  & span {
    color: white;
  }
`

これまで

適用順はソート順のため、記載された順番と異なることがある。

const className = "c0 c1a c2b c3c"

.c0 { color: red; }
.c2b[data-active] { color: green; }
.c1a:hover { color: blue; }
.c3c span { color: white; }

これから

自身のクラスに対する同じプロパティは同じグループとなり、cssの適用順は記載順となる。

const className = "c0 c1a"

.c0 { color: red; }
.c0:hover { color: blue; }
.c0[data-active] { color: green; }
.c1a span { color: white; }

影響として、mergeStyle の際のマージルールが変更になる。

mergeStyle(
  css`color: red;`,
  css`&:hover{ color: blue; }`,
  css`&[data-active]{ color: green; }`
)

上記のコードはこれまでの場合、3つすべてのcssが適用されたクラス名となる（ただし、同じ詳細度のcssはソート順のため、記載順と異なることがある）。

一方でこれからは、上記cssはすべて「自分自身のcolorプロパティに関するルール」であり、最後の1つのみ適用されたクラス名となる。