tyankatsu0105 / css-houdini

CSS Houdini

CSS Houdini

Usage

Check each project's README.md.

Development

Setup

If you develops at first, Run this:

sh tools/scripts/setup

Website

npm run website

start website site with webpack-sev-server

Create Package

npx nx g @nrwl/node:library <packageName> --publishable --importPath="@tyankatsu0105/<packageName>" --rootDir="packages/<packageName>/src"

Build Watch

npx nx run <packageName>:build --watch

# ex) npx nx run css-houdini-stripe:build --watch

Commit

npm run commit

Build

Packages

npm run build css-houdini-ripple

or

npm run build:all

Website

npm run build:website

Memo

• CSS Houdini とは、ピクセルパイプラインの各ステップに hook して CSS の拡張を可能にする API 郡のこと
  • CSSOM にアクセスできる API は、どれもレンダリングが終わったあとの操作
  • しかし、Houdini でレンダリングまで待たずに各プロセスにフックとして機能を登録して、CSS の拡張ができる
• PaintWorklet.registerPaint()で処理を書いた class を登録して、CSS.PaintWorklet.addModule()で PaintWorklet に登録した class を追加して使えるようにするっぽい
  • registerPaint に渡す引数は、(name, paintCtrl)らしい https://drafts.css-houdini.org/css-paint-api-1/
• paintWorklet.addModule で name の指定ができないので、インストールしたモジュール間で命名のバッティングが起こりそう
  • registerPaint の第一引数の名称
  • registerProperty で登録した CSS 変数の名称

CSS.registerProperty

• https://developer.mozilla.org/ja/docs/Web/API/CSS/RegisterProperty
• https://csstree.github.io/docs/syntax/

Links

• (6) Extending CSS with Houdini - YouTube
• CSS Houdini | MDN
• CSS.paintWorklet (静的プロパティ) - Web API | MDN
• una/extra.css: A CSS Houdini Paint library for those who want to make their sites a little extra 💁🏻‍♀️
• CSS.registerProperty() - Web API | MDN
• Houdini – CSS の秘密を解き明かすもの  |  Web  |  Google Developers
• Exploring the CSS Paint API | Bobrov Dev
• CSS Houdini: Properties, Values, and the Paint API | Aysha Anggraini