CSS Houdini

Usage

Check each project's README.md.

If you develops at first, Run this:

sh tools/scripts/setup

npm run website

start website site with webpack-sev-server

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

npx nx run <packageName>:build --watch

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

npm run commit

npm run build css-houdini-ripple

or

npm run build:all

npm run build:website

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 変数の名称

Name		Name	Last commit message	Last commit date
Latest commit History 71 Commits
.github/workflows		.github/workflows
.vscode		.vscode
__czfe		__czfe
packages		packages
tools		tools
typings		typings
website		website
.czferc.js		.czferc.js
.czrc		.czrc
.editorconfig		.editorconfig
.eslintrc.json		.eslintrc.json
.gitignore		.gitignore
.prettierignore		.prettierignore
.prettierrc		.prettierrc
.tool-versions		.tool-versions
CHANGELOG.md		CHANGELOG.md
README.md		README.md
jest.config.js		jest.config.js
jest.preset.js		jest.preset.js
nx.json		nx.json
package-lock.json		package-lock.json
package.json		package.json
ship.config.js		ship.config.js
tsconfig.base.json		tsconfig.base.json
workspace.json		workspace.json