style.js

.className = {
  text-align: center,
  color: #000,
  &.hasClassName: {
    color: red
  }
};

これならパースしてJSのObject化しやすい

アンパサンドはそれでよさそうだけど、子要素の入れ子記述はどうしたらいいんかの。直接の子要素とか隣接セレクタはそのまま書けそうだけど。

.className = {
  >.child: {prop: value},  // Child combinator
  +.next: {prop: value},  // Next-sibling combinator
  " .child": {prop: value}, // quoting include space...?
};

コメントありがとうございます！

Sassと同じにしようかなぁと考えてます

.className = {
  .child: { prop : value }
}

あそっか、別にスペースとかはいらなくてよかったんだ。

となると他は擬似クラスとか擬似要素の構文が気になるけど、これもそのまま書けば大丈夫そうなのかな

.className = {
  .child:nth-child(n): { prop : value },
  .child::after: { prop : value },
  .child:not(:nth-child(n)): { prop : value }
};

読みづらさがでなくもない…

Sassで書いてもツラいところは同じことになりそうですね＞＜
変数とテンプレートリテラル使って展開したら短く書けそうですね

e.g.

var child = function (n) { return `nth-child(${n})`; };
var after = "::after";
var notChild = function (n) { return `not(:nth-child(${n}))`; };

.className = {
  `.child${child(n)}`: { prop : value },
  `.child${after}`: { prop : value }
  `.child${notChild(n)})`: { prop : value }
};

CSSの文脈に限り、テンプレートリテラルに必要な ` を省略する機能も提供できそう

LGTM！
変数を使うのはありですねー。でもJSってオブジェクトのキー側にfunctionは使えるんでしたっけ？
Sassだとインターポレーションでセレクタやプロパティに変数をうめこむのができますけども。

可能にします 😼

この構文をトランスパイルしてJSにして、実行結果のObjectをCSSにするイメージなので
なんとかできそう。あとは良い名前を考えてじわじわやっていきます〜

可能にします 😼

ｶｯｺｲｲ...///