MEMO.md

TODO

• extension 眺めてみる

  • https://github.com/tailwindlabs/tailwindcss-intellisense
  • https://engineering.linecorp.com/ja/blog/uit-enhancement-vscode
  • https://github.com/imliam/vscode-inline-parameters

• 作るものを決める

  • css のプロパティ名からサジェストしてほしい
  • CSSファイルを一発でTailwindクラス名に変換してほしい（その逆も）

• 作ってみる

  • https://code.visualstudio.com/api/get-started/your-first-extension
  • https://github.com/microsoft/vscode-extension-samples/tree/main/completions-sample
  • https://code.visualstudio.com/docs/editor/intellisense
  • 大量生産
    • corePlugins.js: 定義ファイル
      • addUtilities: そのままの定義なので一番簡単そう
      • createUtilityPlugin: config.full.js　との合わせ技だった気がする
      • [-] addDefaults: ？ --tw- 系のやつしかないしやらなくていいかも
      • matchUtilities: ？
        • 例外系をもうちょっと救済する(２プロパティ以上あるやつは代表値を使うなど)

        # Valueが複雑な場合
        - box-shadow -> shadow
        - box-shadow -> ring
        - filter -> blur
        - filter -> brightness
        - filter -> contrast
        
        # 案①Valueを省略してしまう
        box-shadow:[default] (shadow)
        box-shadow:[md] (shadow-md)
        box-shadow:[sm] (shadow-sm)
        
        # 実装案
        - VALUE: var( があったら[modifier]にしてしまう
        - FIELD:　@defaults　があったら消す　
        - FIELD:　--tw　があったら消す
        

    • config.full.js: 設定ファイルの完全系（STUB）
    • color が取れてない
      • snippet 方式でサジェスト
        • color
        • background-color
        • border-color
        • none, inherit, white, black 系にも modifier 付けてしまってる問題
  • 任意の値系のサジェストいい感じに
  • 設定ファイル読み取ってカスタムThemeをサジェスト
  • 言語認識、発火条件
  • 設定ファイル化

• Naming

  • Headwind (reverse)
  • Tailwind Completion for CSSer