[ { "path": ".eslintrc.js", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n *\n */\n\nconst path = require('path');\n\nmodule.exports = {\n settings: {\n react: {\n pragma: 'React',\n version: '18.0',\n flowVersion: '0.261.2', // Flow version\n },\n 'ft-flow': {\n onlyFilesWithFlowAnnotation: true,\n },\n },\n // babel parser to support ES6/7 features\n parser: 'hermes-eslint',\n extends: ['plugin:ft-flow/recommended', 'prettier'],\n plugins: ['ft-flow', 'react', 'headers'],\n env: {\n browser: true,\n es6: true,\n jest: true,\n node: true,\n },\n ignorePatterns: [\n 'build',\n 'coverage',\n 'dist',\n 'flow-typed',\n 'lib',\n 'flow_modules',\n 'node_modules',\n 'next-env.d.ts',\n 'next.config.js',\n '**/__mocks__/snapshot*',\n '**/storybook-static/**',\n '**/examples/example-cli/src/**',\n '**/*.d.ts',\n '**/pages.gen.ts',\n ],\n overrides: [\n {\n files: ['*.ts', '*.tsx'],\n parser: '@typescript-eslint/parser',\n parserOptions: {\n ecmaVersion: 'latest',\n sourceType: 'module',\n ecmaFeatures: {\n jsx: true,\n },\n },\n rules: {\n 'ft-flow/space-after-type-colon': 'off',\n 'ft-flow/generic-spacing': 'off',\n 'ft-flow/no-types-missing-file-annotation': 'off',\n },\n },\n ],\n globals: {\n $Call: 'readonly',\n $Diff: 'readonly',\n $ElementType: 'readonly',\n $Exact: 'readonly',\n $FlowFixMe: 'readonly',\n $Keys: 'readonly',\n $NonMaybeType: 'readonly',\n $ObjMap: 'readonly',\n $ObjMapConst: 'readonly',\n $ObjMapi: 'readonly',\n $PropertyType: 'readonly',\n $ReactOnly: 'readonly',\n $ReactOnlyArray: 'readonly',\n $ReadOnlyMap: 'readonly',\n $ReadOnlySet: 'readonly',\n $Rest: 'readonly',\n $TupleMap: 'readonly',\n $Values: 'readonly',\n Partial: 'readonly',\n },\n rules: {\n 'headers/header-format': [\n 'error',\n {\n source: 'file',\n path: path.join(__dirname, './tools/eslint/copyright-header.txt'),\n },\n ],\n camelcase: 0,\n 'constructor-super': 2,\n 'default-case': [2, { commentPattern: '^no default$' }],\n eqeqeq: [2, 'allow-null'],\n 'handle-callback-err': [2, '^(err|error)$'],\n 'new-cap': [2, { newIsCap: true, capIsNew: false }],\n 'no-alert': 1,\n 'no-array-constructor': 2,\n 'no-caller': 2,\n 'no-case-declarations': 2,\n 'no-class-assign': 2,\n 'no-cond-assign': 2,\n 'no-const-assign': 2,\n 'no-control-regex': 2,\n 'no-debugger': 2,\n 'no-delete-var': 2,\n 'no-dupe-args': 2,\n 'no-dupe-class-members': 2,\n 'no-dupe-keys': 2,\n 'no-duplicate-case': 2,\n 'no-empty-character-class': 2,\n 'no-empty-pattern': 2,\n 'no-eval': 2,\n 'no-ex-assign': 2,\n 'no-extend-native': 2,\n 'no-extra-bind': 2,\n 'no-extra-boolean-cast': 2,\n 'no-fallthrough': 2,\n 'no-floating-decimal': 2,\n 'no-func-assign': 2,\n 'no-implied-eval': 2,\n 'no-inner-declarations': [2, 'functions'],\n 'no-invalid-regexp': 2,\n 'no-irregular-whitespace': 2,\n 'no-iterator': 2,\n 'no-label-var': 2,\n 'no-labels': [2, { allowLoop: false, allowSwitch: false }],\n 'no-lone-blocks': 2,\n 'no-loop-func': 2,\n 'no-multi-str': 2,\n 'no-native-reassign': 2,\n 'no-negated-in-lhs': 2,\n 'no-new': 2,\n 'no-new-func': 2,\n 'no-new-object': 2,\n 'no-new-require': 2,\n 'no-new-symbol': 2,\n 'no-new-wrappers': 2,\n 'no-obj-calls': 2,\n 'no-octal': 2,\n 'no-octal-escape': 2,\n 'no-path-concat': 2,\n 'no-proto': 2,\n 'no-redeclare': 2,\n 'no-regex-spaces': 2,\n 'no-return-assign': [2, 'except-parens'],\n 'no-script-url': 2,\n 'no-self-assign': 2,\n 'no-self-compare': 2,\n 'no-sequences': 2,\n 'no-shadow-restricted-names': 2,\n 'no-sparse-arrays': 2,\n 'no-this-before-super': 2,\n 'no-throw-literal': 2,\n 'no-undef': 0,\n 'no-undef-init': 2,\n 'no-unexpected-multiline': 2,\n 'no-unmodified-loop-condition': 2,\n 'no-unneeded-ternary': [2, { defaultAssignment: false }],\n 'no-unreachable': 2,\n 'no-unsafe-finally': 2,\n 'no-unused-vars': [\n 2,\n { vars: 'all', argsIgnorePattern: '^_', varsIgnorePattern: '^_' },\n ],\n 'no-useless-call': 2,\n 'no-useless-computed-key': 2,\n 'no-useless-concat': 2,\n 'no-useless-constructor': 2,\n 'no-useless-escape': 2,\n 'no-var': 2,\n 'no-with': 2,\n 'prefer-const': 2,\n 'prefer-rest-params': 2,\n quotes: [2, 'single', 'avoid-escape'],\n radix: 2,\n 'use-isnan': 2,\n 'valid-typeof': 2,\n yoda: [2, 'never'],\n\n // flow\n 'ft-flow/space-after-type-colon': [2, 'always', { allowLineBreak: true }],\n 'ft-flow/generic-spacing': 0,\n\n // react\n 'react/display-name': 0,\n 'react/jsx-no-bind': 0,\n 'react/jsx-no-duplicate-props': 2,\n 'react/jsx-no-undef': 2,\n 'react/jsx-pascal-case': 2,\n 'react/jsx-sort-props': 2,\n 'react/jsx-uses-react': 2,\n 'react/jsx-uses-vars': 2,\n 'react/no-did-mount-set-state': 0,\n 'react/no-did-update-set-state': 2,\n 'react/no-direct-mutation-state': 2,\n 'react/no-multi-comp': 0,\n 'react/no-string-refs': 2,\n 'react/no-unknown-property': 2,\n 'react/prefer-es6-class': 2,\n 'react/prop-types': 0,\n 'react/react-in-jsx-scope': 0,\n 'react/self-closing-comp': 2,\n 'react/sort-comp': 0,\n 'react/sort-prop-types': 2,\n 'react/wrap-multilines': 0,\n },\n};\n" }, { "path": ".flowconfig", "content": "[ignore]\n.*/build/.*\n.*/dist/.*\n.*/example-*/.*\n.*/lib/.*\n.*/malformed_package_json/.*\n\n[include]\n\n[lints]\n\n[options]\nexperimental.pattern_matching=true\nenums=true\nemoji=true\ncasting_syntax=as\nexact_by_default=true\nexperimental.const_params=true\nmodule.use_strict=true\nmunge_underscores=true\nmodule.name_mapper='^@stylexjs/babel-plugin$' -> '/packages/@stylexjs/babel-plugin/src/index.js'\nmodule.name_mapper='^@stylexjs/stylex$' -> '/packages/@stylexjs/stylex/src/stylex.js'\nmodule.name_mapper='^@stylexjs/shared$' -> '/packages/@stylexjs/shared/src/index.js'\nmodule.name_mapper='^style-value-parser$' -> '/packages/style-value-parser/src/index.js'\n; type-stubs\nmodule.system.node.resolve_dirname=flow_modules\nmodule.system.node.resolve_dirname=node_modules\n\n\n[strict]\n" }, { "path": ".github/CODEOWNERS", "content": "* @ezzak @Jta26 @mellyeliu @necolas @nmn @vincentriemer\n" }, { "path": ".github/CODE_OF_CONDUCT.md", "content": "# Code of Conduct\n\n## Our Pledge\n\nIn the interest of fostering an open and welcoming environment, we as\ncontributors and maintainers pledge to make participation in our project and our\ncommunity a harassment-free experience for everyone, regardless of age, body\nsize, disability, ethnicity, sex characteristics, gender identity and\nexpression, level of experience, education, socio-economic status, nationality,\npersonal appearance, race, religion, or sexual identity and orientation.\n\n## Our Standards\n\nExamples of behavior that contributes to creating a positive environment\ninclude:\n\n- Using welcoming and inclusive language\n- Being respectful of differing viewpoints and experiences\n- Gracefully accepting constructive criticism\n- Focusing on what is best for the community\n- Showing empathy towards other community members\n\nExamples of unacceptable behavior by participants include:\n\n- The use of sexualized language or imagery and unwelcome sexual attention or\n advances\n- Trolling, insulting/derogatory comments, and personal or political attacks\n- Public or private harassment\n- Publishing others' private information, such as a physical or electronic\n address, without explicit permission\n- Other conduct which could reasonably be considered inappropriate in a\n professional setting\n\n## Our Responsibilities\n\nProject maintainers are responsible for clarifying the standards of acceptable\nbehavior and are expected to take appropriate and fair corrective action in\nresponse to any instances of unacceptable behavior.\n\nProject maintainers have the right and responsibility to remove, edit, or reject\ncomments, commits, code, wiki edits, issues, and other contributions that are\nnot aligned to this Code of Conduct, or to ban temporarily or permanently any\ncontributor for other behaviors that they deem inappropriate, threatening,\noffensive, or harmful.\n\n## Scope\n\nThis Code of Conduct applies within all project spaces, and it also applies when\nan individual is representing the project or its community in public spaces.\nExamples of representing a project or community include using an official\nproject e-mail address, posting via an official social media account, or acting\nas an appointed representative at an online or offline event. Representation of\na project may be further defined and clarified by project maintainers.\n\nThis Code of Conduct also applies outside the project spaces when there is a\nreasonable belief that an individual's behavior may have a negative impact on\nthe project or its community.\n\n## Enforcement\n\nInstances of abusive, harassing, or otherwise unacceptable behavior may be\nreported by contacting the project team at . All\ncomplaints will be reviewed and investigated and will result in a response that\nis deemed necessary and appropriate to the circumstances. The project team is\nobligated to maintain confidentiality with regard to the reporter of an\nincident. Further details of specific enforcement policies may be posted\nseparately.\n\nProject maintainers who do not follow or enforce the Code of Conduct in good\nfaith may face temporary or permanent repercussions as determined by other\nmembers of the project's leadership.\n\n## Attribution\n\nThis Code of Conduct is adapted from the [Contributor Covenant][homepage],\nversion 1.4, available at\nhttps://www.contributor-covenant.org/version/1/4/code-of-conduct.html\n\n[homepage]: https://www.contributor-covenant.org\n\nFor answers to common questions about this code of conduct, see\nhttps://www.contributor-covenant.org/faq\n" }, { "path": ".github/CONTRIBUTING.md", "content": "# Contributing\n\n## Reporting Issues and Asking Questions\n\nBefore opening an issue, please search the issue tracker to make sure your issue\nhasn't already been reported. Please note that your issue may be closed if it\ndoesn't include the information requested in the issue template.\n\n## Getting started\n\nVisit the issue tracker to find a list of open issues that need attention.\n\nFork, then clone the repo:\n\n```\ngit clone https://github.com/your-username/stylex.git\n```\n\nMake sure you have yarn@1.22 and node@>=16 installed. Then install the package\ndependencies:\n\n```\nyarn install\n```\n\n## Automated tests\n\nTo run the linter:\n\n```\nyarn lint\n```\n\nTo run flow:\n\n```\nyarn flow\n```\n\n## Compile and build\n\nTo compile the source code:\n\n```\nyarn build\n```\n\nTo run all the tests (will build automatically):\n\n```\nyarn test\n```\n\n…in watch mode (will build only once):\n\n```\nyarn test --watch\n```\n\n## Documentation\n\nIf necessary, first build the StyleX packages (`yarn build`), then start the\ndocs locally:\n\n```\nyarn workspace docs start\n```\n\n### New Features\n\nPlease, familiarize yourself with\n[StyleX's goals and architectural principles](https://stylexjs.com/docs/learn/thinking-in-stylex/),\nand open an issue with a proposal when suggesting a new feature of behavioural\nchange. We don't want you to waste your efforts on a pull request that we won't\nwant to accept.\n\n## Pull requests\n\n**Before submitting a pull request**, please make sure the following is done:\n\n1. Fork the repository and create your branch from `main`.\n2. If you've added code that should be tested, add tests!\n3. If you've changed APIs, update the documentation.\n4. Ensure the tests pass (`yarn test`).\n\nYou can now submit a pull request, referencing any issues it addresses.\n\nPlease try to keep your pull request focused in scope and avoid including\nunrelated commits.\n\nAfter you have submitted your pull request, we'll try to get back to you as soon\nas possible. We may suggest some changes or improvements.\n\nThank you for contributing!\n\n## Typical Editor setup\n\n### VS Code\n\nIf you're using Visual Studio Code, we recommend the following setup for the\nbest experience.\n\n#### Extensions\n\nWe recommend you have the following extensions installed:\n\n- [Flow Language Support](https://marketplace.visualstudio.com/items?itemName=flowtype.flow-for-vscode)\n- [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)\n- [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)\n\n#### Turn off Typescript within JS files\n\nAdditionally, since StyleX is authored with the\n[Flow typesystem](https://flow.org), it is helpful to turn off Typescript\ntype-checking within Javascript files:\n\n```json\n{\n \"javascript.validate.enable\": false\n}\n```\n" }, { "path": ".github/ISSUE_TEMPLATE/bug.yml", "content": "name: Bug report\ndescription: File a bug report\nlabels: [\"bug\"]\nbody:\n - type: textarea\n attributes:\n label: Describe the issue\n description: Please provide a concise description of what you're experiencing. Providing screenshots is also helpful.\n validations:\n required: true\n - type: textarea\n attributes:\n label: Expected behavior\n description: Please provide a concise description of what you expected to happen.\n validations:\n required: true\n - type: textarea\n attributes:\n label: Steps to reproduce\n description: Please describe the precise steps needed to reproduce the behavior.\n placeholder: |\n Mention package versions and environment (platform, browser, etc)...\n 1. ...\n 2. ...\n validations:\n required: true\n - type: textarea\n attributes:\n label: Test case\n description: Please provide a reduced test case that reproduces the issue.\n validations:\n required: false\n - type: textarea\n attributes:\n label: Additional comments\n description: You're welcome to provide additional context and proposed solutions.\n" }, { "path": ".github/ISSUE_TEMPLATE/feature.yml", "content": "name: Feature request\ndescription: If you have a suggestion…\nlabels: [\"enhancement\"]\nbody:\n - type: textarea\n attributes:\n label: Describe the feature request\n description: Please provide a concise description of the request, potential solutions, and additional context.\n validations:\n required: true\n" }, { "path": ".github/PULL_REQUEST_TEMPLATE.md", "content": "## What changed / motivation ?\n\nPlease include relevant motivation and context\n\n## Linked PR/Issues\n\nFixes # (issue)\n\n## Additional Context\n\n\n\nScreenshots, Tests, Anything Else\n\n## Pre-flight checklist\n\n- [ ] I have read the contributing guidelines\n [Contribution Guidelines](https://github.com/facebook/stylex/blob/main/.github/CONTRIBUTING.md)\n- [ ] Performed a self-review of my code" }, { "path": ".github/workflows/benchmarks.yml", "content": "name: benchmarks\n\non: [pull_request]\n\njobs:\n perf:\n runs-on: ubuntu-latest\n steps:\n - uses: actions/checkout@v6\n with:\n fetch-depth: 50\n - uses: actions/setup-node@v6\n with:\n node-version: '22.x'\n cache: 'yarn'\n cache-dependency-path: yarn.lock\n - run: corepack prepare yarn@1.22.22 --activate\n - name: 'Setup temporary files'\n run: |\n echo \"BASE_JSON=$(mktemp)\" >> $GITHUB_ENV\n echo \"PATCH_JSON=$(mktemp)\" >> $GITHUB_ENV\n - name: 'Benchmark base'\n run: |\n git checkout -f ${{ github.event.pull_request.base.sha }}\n git clean -fdx\n yarn install --frozen-lockfile --silent\n if yarn workspace benchmarks run perf -- -o ${{ env.BASE_JSON }}; then\n echo \"Ran successfully on base branch\"\n else\n echo \"{}\" > ${{ env.BASE_JSON }} # Empty JSON as default\n echo \"Benchmark script not found on base branch, using default values\"\n fi\n - name: 'Benchmark patch'\n run: |\n git checkout -f ${{ github.event.pull_request.head.sha }}\n git clean -fdx\n yarn install --frozen-lockfile --silent\n yarn workspace benchmarks run perf -- -o ${{ env.PATCH_JSON }}\n echo \"Ran successfully on patch branch\"\n - name: 'Collect results'\n id: collect\n run: |\n echo \"table<> $GITHUB_OUTPUT\n yarn workspace benchmarks run compare -- ${{ env.BASE_JSON }} ${{ env.PATCH_JSON }} >> markdown\n cat markdown >> $GITHUB_OUTPUT\n echo \"EOF\" >> $GITHUB_OUTPUT\n - name: 'Post comment'\n uses: edumserrano/find-create-or-update-comment@v3\n with:\n issue-number: ${{ github.event.pull_request.number }}\n body-includes: ''\n comment-author: 'github-actions[bot]'\n body: |\n \n ### workflow: benchmarks/perf\n Comparison of performance test results, measured in operations per second. Larger is better.\n ${{ steps.collect.outputs.table }}\n edit-mode: replace\n\n size:\n runs-on: ubuntu-latest\n steps:\n - uses: actions/checkout@v6\n with:\n fetch-depth: 50\n - uses: actions/setup-node@v6\n with:\n node-version: '22.x'\n cache: 'yarn'\n cache-dependency-path: yarn.lock\n - run: corepack prepare yarn@1.22.22 --activate\n - name: 'Setup temporary files'\n run: |\n echo \"BASE_JSON=$(mktemp)\" >> $GITHUB_ENV\n echo \"PATCH_JSON=$(mktemp)\" >> $GITHUB_ENV\n - name: 'Benchmark base'\n run: |\n git checkout -f ${{ github.event.pull_request.base.sha }}\n git clean -fdx\n yarn install --frozen-lockfile --silent\n if yarn workspace benchmarks run size -- -o ${{ env.BASE_JSON }}; then\n echo \"Ran successfully on base branch\"\n else\n echo \"{}\" > ${{ env.BASE_JSON }} # Empty JSON as default\n echo \"Benchmark script not found on base branch, using default values\"\n fi\n - name: 'Benchmark patch'\n run: |\n git checkout -f ${{ github.event.pull_request.head.sha }}\n git clean -fdx\n yarn install --frozen-lockfile --silent\n yarn workspace benchmarks run size -- -o ${{ env.PATCH_JSON }}\n echo \"Ran successfully on patch branch\"\n - name: 'Collect results'\n id: collect\n run: |\n echo \"table<> $GITHUB_OUTPUT\n yarn workspace benchmarks run compare -- ${{ env.BASE_JSON }} ${{ env.PATCH_JSON }} >> markdown\n cat markdown >> $GITHUB_OUTPUT\n echo \"EOF\" >> $GITHUB_OUTPUT\n - name: 'Post comment'\n uses: edumserrano/find-create-or-update-comment@v3\n with:\n issue-number: ${{ github.event.pull_request.number }}\n body-includes: ''\n comment-author: 'github-actions[bot]'\n body: |\n \n ### workflow: benchmarks/size\n Comparison of minified (terser) and compressed (brotli) size results, measured in bytes. Smaller is better.\n ${{ steps.collect.outputs.table }}\n edit-mode: replace\n" }, { "path": ".github/workflows/tests.yml", "content": "name: tests\n\non:\n push:\n branches:\n - 'main'\n pull_request:\n types: [opened, synchronize, reopened]\n\njobs:\n flow:\n runs-on: ubuntu-latest\n steps:\n - uses: actions/checkout@v6\n - uses: actions/setup-node@v6\n with:\n node-version: '22.x'\n cache: 'yarn'\n cache-dependency-path: yarn.lock\n - run: corepack prepare yarn@1.22.22 --activate\n - run: yarn install --frozen-lockfile\n - run: yarn flow\n\n packages:\n runs-on: ubuntu-latest\n steps:\n - uses: actions/checkout@v6\n - uses: actions/setup-node@v6\n with:\n node-version: '22.x'\n cache: 'yarn'\n cache-dependency-path: yarn.lock\n - run: corepack prepare yarn@1.22.22 --activate\n - run: yarn install --frozen-lockfile\n - run: yarn test:packages\n\n prettier:\n runs-on: ubuntu-latest\n steps:\n - uses: actions/checkout@v6\n - uses: actions/setup-node@v6\n with:\n node-version: '22.x'\n cache: 'yarn'\n cache-dependency-path: yarn.lock\n - run: corepack prepare yarn@1.22.22 --activate\n - run: yarn install --frozen-lockfile\n - run: yarn prettier:report\n\n lint:\n runs-on: ubuntu-latest\n steps:\n - uses: actions/checkout@v6\n - uses: actions/setup-node@v6\n with:\n node-version: '22.x'\n cache: 'yarn'\n cache-dependency-path: yarn.lock\n - run: corepack prepare yarn@1.22.22 --activate\n - run: yarn install --frozen-lockfile\n - run: yarn lint:report\n\n spelling:\n runs-on: ubuntu-latest\n steps:\n - uses: actions/checkout@v6\n - uses: crate-ci/typos@master\n with:\n config: .github/workflows/typos.toml\n" }, { "path": ".github/workflows/typos.toml", "content": "[files]\nextend-exclude = [\n \"*.snap\",\n \"flow-typed/*\",\n # Too many false positives on inline snapshots\n \"packages/**/__tests__/\",\n # Fixture data has lots of typos\n \"packages/benchmarks/**/fixtures/\",\n]\n\n[default.extend-words]\n# Ignore false-positives\nstylex = \"stylex\"\nnd = \"nd\"\n" }, { "path": ".gitignore", "content": "*.log*\n.DS_Store\n.build\n.docusaurus\n.stylex\nbuild\ncoverage\ndist\nlib\nnode_modules\nstorybook-static" }, { "path": ".prettierignore", "content": ".build\n.docusaurus\n.next\n.stylex\nbuild\ncoverage\nlib\nflow_modules\nnode_modules\n**/__mocks__/snapshot*\npackages/benchmarks/size/fixtures/lotsOfStyles.js\nflow-typed\nexamples/example-storybook/storybook-static\nexamples/example-cli/src\npackages/docs/.source" }, { "path": ".vscode/extensions.json", "content": "{\n \"recommendations\": [\n \"flowtype.flow-for-vscode\"\n ]\n}" }, { "path": ".vscode/settings.json", "content": "{\n \"javascript.validate.enable\": false\n}" }, { "path": ".watchmanconfig", "content": "{}\n" }, { "path": "CHANGELOG.md", "content": "# Changelog\n\n## 0.18.1 (Mar 5, 2026)\n- Add simple `sx={}` JSX prop syntax as an alternative to `stylex.props`.\n- Fix `unplugin` `generateBundle` hook to use `emitFile` instead of direct bundle assignment.\n\n## 0.18.0 (Mar 3, 2026)\n- Add `stylex.env` API for compile-time constants and shareable design tokens.\n- New `create-stylex-app` CLI for scaffolding projects with `npx create-stylex-app`.\n- Add Bun support and improvements to the `unplugin` bundler plugin.\n- Support attribute selectors in `stylex.when` and conditional styles.\n- Fix priority calculation for compound pseudo selectors.\n\n## 0.17.5 (Jan 12. 2026)\n- New `no-conflicting-props` lint rule.\n- Add `disallowedPropertiesValidation` config to disable property compiler errors by default.\n- Preserve units in zero values for CSS variables.\n- Fix `unplugin` cache invalidation on style changes.\n- Add `env` compiler option to expose `stylex.env` compile-time constants.\n\n## 0.17.4 (Dec 18. 2025)\n- New playground within the docs website.\n- Fix named exports detection on Turbopack.\n\n## 0.17.3 (Dec 12, 2025)\n\n- Add docs for setup instructions.\n- Improve AST detection for `.stylex` named exports\n- Add browser rollup bundle.\n- Fix unplugin file suffix parsing.\n\n## 0.17.2 (Dec 1, 2025)\n\n- Pass importSources to babel plugin in `unplugin` plugin.\n- Fix custom typescript typedef mistake.\n\n## 0.17.1 (Nov 26, 2025)\n\n- Add support for compiling stylex from imported packages.\n- Add runtime injection support for `defineConsts` constants.\n- Show full debug file paths.\n- Fix media query ordering for queries with 'screen and'.\n- Add `debugFilePath` config option.\n- Fix unitless zoom bug for float values.\n- Fix props compilation for array mutations.\n\n## 0.17.0 (Nov 18, 2025)\n\n- Add docs for ESLint rules and `stylex.when` API.\n- Add `defineMarker()` for custom markers for selector combinators.\n- New unplugin bundler plugin implementation for various bundlers (Vite,\n Webpack, Rspack, Rollup, etc.).\n- Enhance `stylex.props` to precompile more often for better performance.\n- Order pseudo-classes and `stylex.when` selectors according to priorities in\n `sort-keys.\n- Add support for ternary and logical expressions in `valid-styles`.\n- Bump specificity of `stylex.when` selectors over defaults.\n- Add polyfill for logical float values in legacy mode.\n\n## 0.16.3 (Oct 27, 2025)\n\n- Add configs to `sort-keys` property ordering.\n- Create new `defineConsts` specific file extension.\n- Add `defineConsts` and various file extension support to `enforce-extension`.\n- Add config for custom module resolution.\n- Turn `enableMediaQueryOrder` on by default.\n- Updates to docs and Flow.\n\n## 0.16.2 (Oct 13, 2025)\n\n- Handle descendant selector styles in `valid-styles` rule.\n- Adjust descendant selector `.when` priorities.\n- Fix `defineVars` and `createTheme` at-rules priorities.\n- Update `defineConsts` types for non-stylex usage.\n\n## 0.16.1 (Oct 2, 2025)\n\n- New `no-lookahead-selector` lint rule to flag certain descendant and sibling\n selectors.\n- Fix priorities for descendant and sibling selectors.\n- Fix color functions for `valid-shorthands` rule.\n- Fix hoisting issues with duplicate keys in `create` calls.\n- Add storybook example.\n\n## 0.16.0 (Sep 25, 2025)\n\n- Added support for descendant and shared selectors.\n- Support CSS variable overrides with `defineConsts`.\n- Add `valid-styles` support to CSS variable overrides in `create` calls.\n- Replace `valid-styles` object check with Flow typing\n\n## 0.15.4 (Sep 7, 2025)\n\n- Add configuration modes to `processStylexRules`.\n- Support local resolved constants, `positionTry`, and '0' values in\n `valid-styles` ESLint rule.\n- Implement `defineConsts` for dynamic styles.\n- Create `.transformed` file extension for preresolved variables.\n\n## 0.15.3 (Aug 13, 2025)\n\n- Optimize precomputed `props` calls in JSX.\n- Fix class name construction for dynamic contextual styles.\n- Handle all unit values in media query rewriting.\n\n## 0.15.2 (Aug 1, 2025)\n\n- Exclude private dependencies from `@stylexjs/babel-plugin` package.\n- Reduce chances of dynamic variable name collisions.\n\n## 0.15.1 (Aug 1, 2025)\n\n### Fixes\n\n- Hoist stylex.create and static className objects to the top level for support\n inside functions.\n\n## 0.15.0 (Jul 31, 2025)\n\n### New features\n\n- Enable media query ordering and parsing behind `enableMediaQueryOrder` flag.\n- Integrate media query parser for automatic media query validation and\n normalization.\n\n### Fixes\n\n- Implement merging of width, height, and ranges in media query transformer.\n- Optimize dynamic styles output for conditionals and template literals.\n- Fix TypeScript types for `stylex.types.*` functions.\n- Fix opaque type issues for InlineStyles.\n\n## 0.14.3 (Jul 22, 2025)\n\n### Fixes\n\n- Do not emit class names for `null` or `undefined` dynamic styles.\n- Optimize dynamic styles output for binary and unary expressions.\n\n## 0.14.2 (Jul 14, 2025)\n\n### Fixes\n\n- ESLint plugin style validation for length properties (#1136)\n- Remove legacy RTL flipping of boxShadow, cursor, textShadow values.\n\n## 0.14.1 (Jul 3, 2025)\n\n### Fixes\n\n- Another fix for TypeScript types.\n\n## 0.14.0 (Jun 30, 2025)\n\n### New features\n\n- Add `viewTransitionClass` API for creating CSS View Transitions.\n- ESLint plugin includes `validImports` options for all rules.\n- ESLint plugin includes autofix for all remaining nonstandard CSS properties\n when using the `valid-styles` rule.\n\n### Breaking changes\n\n- Make `property-specificity` the default `styleResolution`.\n\n### Fixes\n\n- Fix theming in dev/debug mode.\n- Avoid putting certain `@-rules` in `@layer` blocks.\n- Fix type exports for TypeScript.\n\n## 0.13.1 (May 21, 2025)\n\n### Fixes\n\n- Export additional Types.\n\n## 0.13.0 (May 19, 2025)\n\n### New features\n\n- Add `positionTry` API for creating `@property-try` declarations.\n- Add `defineConsts` API for inlining constant values.\n- Re-write of the runtime style injection module to be more reliable.\n\n### Breaking changes\n\n- The `runtimeInjection` compiler option is now disabled by default when `dev`\n is true.\n- The ESLint rule `no-legacy-conditional-styles` is renamed to\n `no-legacy-contextual-styles`.\n- The `useRemForFontSize` compiler option is renamed to `enableFontSizePxToRem`.\n It is disabled by default and should not be used directly.\n- The `genConditionalClasses` compiler option is renamed to\n `enableInlinedConditionalMerge`. It is enabled by default and should not be\n used directly.\n- The `attrs` API is removed due to low usage and redundancy with the `props`\n API.\n\n### Fixes\n\n- Fix the TypeScript types for themes and types functions.\n- Fix the creation of duplicate classNames when defining nested pseudo-classes.\n- Fix that allows the ESLint plugin to support use of `importSources` object\n syntax in `validImports`.\n- Fix incorrect compiler error messages.\n- Fix a bug that incorrectly wrapped CSS variables in quotes when used in the\n `content` property.\n- Fix a bug in the `firstThatWorks` API when the last value was a variable.\n- Allow `importSources` to be configured in the PostCSS plugin for React Strict\n DOM compatibility.\n\n### Deprecations\n\n- Deprecate `@stylexjs/shared` package.\n\n## 0.12.0 (Apr 10, 2025)\n\n### New features\n\n- Hash keys in compiled style objects to reduce generated code size.\n- New eslint rule to flag use of legacy Media Query and pseudo-class syntax.\n\n### Fixes\n\n- Fix pseudo-elements bug in dynamic styles.\n- Performance improvements to `createTheme` compilation by caching object\n evaluation.\n- Disallow spreading in `create` calls.\n\n### Deprecations\n\n- Deprecate `@stylexjs/dev-runtime` package.\n- Deprecate `@stylexjs/esbuild-plugin` package.\n- Deprecate `@stylexjs/nextjs-plugin` package.\n- Deprecate `@stylexjs/open-props` package.\n- Deprecate `@stylexjs/webpack-plugin` package.\n\n## 0.11.1 (Mar 3, 2025)\n\n### Fixes\n\n- Fix `create` compilation regression for string and number keys.\n- Fix babel path resolution within monorepos.\n\n## 0.11.0 (Feb 27, 2025)\n" }, { "path": "LICENSE", "content": "MIT License\n\nCopyright (c) Meta Platforms, Inc. and affiliates.\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n" }, { "path": "README.md", "content": "# StyleX · [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/facebook/stylex/blob/main/LICENSE) [![npm version](https://img.shields.io/npm/v/@stylexjs/stylex.svg?style=flat)](https://www.npmjs.com/package/@stylexjs/stylex) [![tests](https://github.com/facebook/stylex/actions/workflows/tests.yml/badge.svg)](https://github.com/facebook/stylex/actions/workflows/tests.yml) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/facebook/stylex/blob/main/.github/CONTRIBUTING.md)\n\nStyleX is a JavaScript library for defining styles for optimized user\ninterfaces.\n\n## Documentation\n\n[Documentation Website](https://stylexjs.com)\n\nDocumentation for individual packages can be found in their respective README\nfiles. Start with\n[`@stylexjs/stylex`](https://github.com/facebook/stylex/blob/main/packages/@stylexjs/stylex).\n\n### Example\n\nHere is a simple example of StyleX use:\n\n```js\nimport * as stylex from '@stylexjs/stylex';\n\nconst styles = stylex.create({\n root: {\n padding: 10,\n },\n element: {\n backgroundColor: 'red',\n },\n});\n\nconst styleProps = stylex.props(styles.root, styles.element);\n```\n\n## Development\n\nThis is the development monorepo for StyleX.\n\n### Structure\n\n- `.github`\n - Contains workflows used by GitHub Actions.\n - Contains issue templates and contribution guidelines.\n- `examples`\n - Contains examples using StyleX and its integration with build tools.\n- `packages`\n - Contains the public and private packages managed in the monorepo.\n - [babel-plugin](https://github.com/facebook/stylex/blob/main/packages/@stylexjs/babel-plugin)\n - [benchmarks](https://github.com/facebook/stylex/blob/main/packages/benchmarks)\n - [cli](https://github.com/facebook/stylex/blob/main/packages/@stylexjs/cli)\n - [docs](https://github.com/facebook/stylex/blob/main/packages/docs)\n - [eslint-plugin](https://github.com/facebook/stylex/blob/main/packages/@stylexjs/eslint-plugin)\n - [postcss-plugin](https://github.com/facebook/stylex/blob/main/packages/@stylexjs/postcss-plugin)\n - [rollup-plugin](https://github.com/facebook/stylex/blob/main/packages/@stylexjs/rollup-plugin)\n - [scripts](https://github.com/facebook/stylex/blob/main/packages/scripts)\n - [shared](https://github.com/facebook/stylex/blob/main/packages/@stylexjs/babel-plugin/shared)\n - [style-value-parser](https://github.com/facebook/stylex/blob/main/packages/style-value-parser)\n - [stylex](https://github.com/facebook/stylex/blob/main/packages/@stylexjs/stylex)\n\n\n### Tasks\n\nFirst, `yarn install` the yarn workspace.\n\n- `build`\n - Use `yarn build` to run the build script in every package.\n - Use `yarn workspace build` to run the build script for a\n specific package.\n- `test`\n - Use `yarn test` to run tests for every package.\n - Use `yarn workspace test` to run the test script for a\n specific package. More details can be found in the contributing guide below.\n\n## Contributing\n\nDevelopment happens in the open on GitHub and we are grateful for contributions\nincluding bug fixes, improvements, and ideas.\n\n### Code of Conduct\n\nThis project expects all participants to adhere to Meta's OSS\n[Code of Conduct](https://opensource.fb.com/code-of-conduct/). Please read\nthe full text so that you can understand what actions will and will not be\ntolerated.\n\n### Contributing Guide\n\nRead the\n[contributing guide](https://github.com/facebook/stylex/blob/main/.github/CONTRIBUTING.md)\nto learn about our development process, how to propose bug fixes and\nimprovements, and how to build and test your changes.\n\n### Architectural Principles\n\nBefore proposing a change or addition to the StyleX API, you should familiarize\nyourself with the\n[goals and architectural principles](https://stylexjs.com/docs/learn/thinking-in-stylex/)\nof the project.\n\n### License\n\nStyleX is [MIT licensed](./LICENSE).\n" }, { "path": "examples/example-bun/.eslintrc.js", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n *\n */\n\nmodule.exports = {\n plugins: ['@stylexjs'],\n rules: {\n '@stylexjs/valid-styles': 'error',\n 'ft-flow/space-after-type-colon': 0,\n 'ft-flow/no-types-missing-file-annotation': 0,\n 'ft-flow/generic-spacing': 0,\n },\n};\n" }, { "path": "examples/example-bun/README.md", "content": "# StyleX with Bun\n\nThis example bundles a React app with Bun while compiling StyleX via\n`@stylexjs/unplugin`. The unplugin uses its esbuild adapter (Bun’s plugin API is\nesbuild-compatible) to compile StyleX at build time, aggregate the generated\nstyles, and append them to the CSS asset emitted from `src/global.css`.\n\n### Prerequisites\n\n- Bun 1.1+\n- `@stylexjs/unplugin`\n\n## Install dependencies\n\n```bash\nnpm install\n```\n\n## Build script (`scripts/build.mjs`)\n\nThe production build script wires the unplugin into `Bun.build`:\n\n```js\nimport stylex from '@stylexjs/unplugin';\n\nawait Bun.build({\n entrypoints: ['src/main.jsx'],\n outdir: 'dist',\n metafile: true,\n plugins: [\n stylex.esbuild({\n useCSSLayers: true,\n importSources: ['@stylexjs/stylex'],\n }),\n ],\n});\n```\n\n- `metafile: true` lets the plugin locate CSS assets emitted by Bun.\n- `useCSSLayers: true` wraps StyleX output in `@layer` declarations for\n predictable specificity.\n\n## CSS entry points\n\n- Production uses `src/global.css` so Bun emits a CSS asset; StyleX appends\n aggregated styles during `npm run example:build`.\n- Development writes `dist/stylex.dev.css`, which the Bun plugin rewrites on\n every StyleX transform so the dev server can hot-reload CSS.\n\n## Dev server integration\n\nThe Bun dev server uses `bunfig.toml` with `@stylexjs/unplugin/bun`, which\nwrites generated StyleX rules into `dist/stylex.dev.css` (marked with\n`--stylex-injection`).\n\n`dist/` is generated output and should remain gitignored.\n\n## Commands\n\n```bash\n# Production bundle + StyleX CSS extraction\nnpm run example:build\n\n# Bun dev server with HMR at http://localhost:3000\nnpm run example:dev\n\n# Serve the generated bundle (run example:build first)\nnpm run example:start\n```\n\nThe dev server uses Bun's fullstack mode, bundling `dist/index.dev.html` on\nrequest with `development: true` and the StyleX Bun plugin. Production builds\nwrite `dist/index.html` alongside the bundled assets.\n" }, { "path": "examples/example-bun/bunfig.toml", "content": "[serve.static]\nplugins = [\"@stylexjs/unplugin/bun\"]\n" }, { "path": "examples/example-bun/package.json", "content": "{\n \"private\": true,\n \"name\": \"example-bun\",\n \"version\": \"0.18.1\",\n \"description\": \"Example: StyleX with Bun via @stylexjs/unplugin\",\n \"main\": \"src/App.jsx\",\n \"scripts\": {\n \"example:build\": \"bun run scripts/build.mjs\",\n \"example:dev\": \"bun run scripts/dev.mjs\",\n \"example:start\": \"bun run scripts/start.mjs\",\n \"example:lint\": \"eslint \\\"**/*.{js,jsx}\\\"\"\n },\n \"license\": \"MIT\",\n \"dependencies\": {\n \"@stylexjs/stylex\": \"0.18.1\",\n \"react\": \"^19.2.0\",\n \"react-dom\": \"^19.2.0\"\n },\n \"devDependencies\": {\n \"@stylexjs/unplugin\": \"0.18.1\",\n \"@stylexjs/eslint-plugin\": \"0.18.1\",\n \"eslint\": \"^8.57.1\"\n }\n}\n" }, { "path": "examples/example-bun/scripts/build.mjs", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport path from 'path';\nimport { fileURLToPath } from 'url';\nimport stylex from '@stylexjs/unplugin';\n\nconst __filename = fileURLToPath(import.meta.url);\nconst __dirname = path.dirname(__filename);\n\nconst entrypoint = path.resolve(__dirname, '..', 'src', 'main.jsx');\nconst outdir = path.resolve(__dirname, '..', 'dist');\nconst htmlTemplate = path.resolve(__dirname, '..', 'src', 'index.html');\nconst htmlOutput = path.resolve(outdir, 'index.html');\n\nasync function build() {\n const result = await Bun.build({\n entrypoints: [entrypoint],\n outdir,\n target: 'browser',\n minify: true,\n metafile: true,\n plugins: [\n stylex.esbuild({\n useCSSLayers: true,\n importSources: ['@stylexjs/stylex'],\n unstable_moduleResolution: {\n type: 'commonJS',\n rootDir: path.resolve(__dirname, '../../..'),\n },\n }),\n ],\n });\n\n if (!result.success) {\n console.error('Bun build failed.');\n for (const message of result.logs) {\n console.error(message);\n }\n process.exit(1);\n }\n\n try {\n await Bun.write(htmlOutput, await Bun.file(htmlTemplate).text());\n } catch (error) {\n console.error('Failed to write dist/index.html.');\n console.error(error);\n process.exit(1);\n }\n}\n\nbuild();\n" }, { "path": "examples/example-bun/scripts/dev.mjs", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport path from 'path';\nimport { mkdir } from 'fs/promises';\nimport { fileURLToPath, pathToFileURL } from 'url';\n\nconst __filename = fileURLToPath(import.meta.url);\nconst __dirname = path.dirname(__filename);\n\nconst distDir = path.resolve(__dirname, '..', 'dist');\nconst htmlTemplate = path.resolve(__dirname, '..', 'src', 'index.dev.html');\nconst htmlOutput = path.resolve(distDir, 'index.dev.html');\n\nasync function dev() {\n await mkdir(distDir, { recursive: true });\n await Bun.write(htmlOutput, await Bun.file(htmlTemplate).text());\n const homepage = (await import(pathToFileURL(htmlOutput).href)).default;\n\n const port = Number(process.env.PORT) || 3000;\n\n const server = Bun.serve({\n port,\n development: true,\n routes: {\n '/': homepage,\n },\n });\n\n console.log(`Dev server running at http://localhost:${server.port}`);\n}\ndev();\n" }, { "path": "examples/example-bun/scripts/start.mjs", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport path from 'path';\nimport { fileURLToPath } from 'url';\n\nconst __filename = fileURLToPath(import.meta.url);\nconst __dirname = path.dirname(__filename);\n\nconst distDir = path.resolve(__dirname, '..', 'dist');\nconst port = Number(process.env.PORT) || 3000;\n\nconst server = Bun.serve({\n port,\n async fetch(request) {\n const url = new URL(request.url);\n const pathname = url.pathname === '/' ? '/index.html' : url.pathname;\n const filePath = path.join(distDir, pathname);\n const file = Bun.file(filePath);\n\n if (await file.exists()) {\n return new Response(file);\n }\n\n return new Response('Not found', { status: 404 });\n },\n});\n\nconsole.log(`Server running at http://localhost:${server.port}`);\n" }, { "path": "examples/example-bun/src/App.jsx", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport * as React from 'react';\nimport * as stylex from '@stylexjs/stylex';\nimport { colors, fonts, sizes } from './globalTokens.stylex';\n\nexport default function App() {\n return (\n
\n
\n StyleX + Bun + unplugin\n
\n
\n );\n}\n\nconst styles = stylex.create({\n main: {\n minHeight: '100vh',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n backgroundColor: colors.gray0,\n },\n card: {\n backgroundColor: colors.blue9,\n padding: sizes.spacing5,\n borderRadius: sizes.spacing2,\n justifyContent: 'center',\n display: 'flex',\n alignItems: 'center',\n color: colors.gray0,\n fontFamily: fonts.mono,\n },\n});\n" }, { "path": "examples/example-bun/src/global.css", "content": ":root {\n --stylex-injection: 0;\n}\n" }, { "path": "examples/example-bun/src/globalTokens.stylex.js", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport * as stylex from '@stylexjs/stylex';\n\nexport const colors = stylex.defineVars({\n pink7: '#d6336c',\n blue9: '#1864ab',\n gray0: '#999',\n});\n\nexport const fonts = stylex.defineVars({\n mono: 'Dank Mono,Operator Mono,Inconsolata,Fira Mono,ui-monospace,SF Mono,Monaco,Droid Sans Mono,Source Code Pro,monospace',\n});\n\nexport const sizes = stylex.defineVars({\n spacing5: '1.5rem',\n spacing2: '.5rem',\n});\n" }, { "path": "examples/example-bun/src/index.dev.html", "content": "\n\n \n @stylexjs/unplugin (bun dev)\n \n \n \n \n \n
\n \n \n\n" }, { "path": "examples/example-bun/src/index.html", "content": "\n\n \n @stylexjs/unplugin (bun)\n \n \n \n \n \n
\n \n \n\n" }, { "path": "examples/example-bun/src/main.jsx", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport './global.css';\nimport React from 'react';\nimport { createRoot } from 'react-dom/client';\nimport App from './App.jsx';\n\ncreateRoot(document.getElementById('root')).render();\n" }, { "path": "examples/example-cli/.gitignore", "content": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# stylex compiled\nsrc\n" }, { "path": "examples/example-cli/.stylex.json5", "content": "{\n input: ['./source'],\n output: ['./src'],\n cssBundleName: 'stylex_bundle.css',\n babelPresets: [\n ['@babel/preset-typescript', { allExtensions: true, isTSX: true }],\n // '@babel/preset-react',\n ],\n styleXConfig: {\n aliases: {\n '@/*': ['./source/*'],\n },\n },\n // watch: true,\n}\n" }, { "path": "examples/example-cli/README.md", "content": "# @stylexjs/cli example using StyleX\n\nTBD\n" }, { "path": "examples/example-cli/package.json", "content": "{\n \"private\": true,\n \"name\": \"example-cli\",\n \"version\": \"0.18.1\",\n \"scripts\": {\n \"example:build\": \"stylex --config .stylex.json5\"\n },\n \"dependencies\": {\n \"react\": \"^19.2.0\",\n \"react-dom\": \"^19.2.0\"\n },\n \"devDependencies\": {\n \"@babel/preset-react\": \"^7.25.7\",\n \"@babel/preset-typescript\": \"^7.25.7\",\n \"@stylexjs/cli\": \"0.18.1\",\n \"@types/react\": \"^19.2.6\",\n \"@types/react-dom\": \"^19.2.3\",\n \"typescript\": \"^5.9.3\"\n }\n}\n" }, { "path": "examples/example-cli/source/app/CardThemes.ts", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n * @format\n */\n\nimport * as stylex from '@stylexjs/stylex';\nimport { tokens } from './CardTokens.stylex';\n\nexport const minorOffset = stylex.createTheme(tokens, {\n arrowTransform: 'translateX(5px)',\n});\n\nexport const majorOffset = stylex.createTheme(tokens, {\n arrowTransform: 'translateX(10px)',\n});\n\nexport const reset = stylex.createTheme(tokens, {});\n" }, { "path": "examples/example-cli/source/app/CardTokens.stylex.ts", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n * @format\n */\n\nimport * as stylex from '@stylexjs/stylex';\n\nexport const tokens = stylex.defineVars({\n arrowTransform: 'translateX(0)',\n});\n" }, { "path": "examples/example-cli/source/app/Counter.tsx", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport {\n spacing,\n text,\n globalTokens as $,\n colors,\n} from '@/app/globalTokens.stylex';\nimport { useState } from 'react';\n\nexport default function Counter() {\n const [count, setCount] = useState(0);\n\n return (\n
\n setCount((c) => c - 1)}\n >\n -\n \n 99 && styles.largeNumber,\n )}\n >\n {count}\n
\n setCount((c) => c + 1)}\n >\n +\n \n \n );\n}\n\nconst DARK = '@media (prefers-color-scheme: dark)' as const;\n\nconst styles = stylex.create({\n container: {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n flexDirection: 'row',\n borderRadius: spacing.md,\n borderWidth: 1,\n borderStyle: 'solid',\n borderColor: colors.blue7,\n padding: spacing.xxxs,\n fontFamily: $.fontSans,\n gap: spacing.xs,\n },\n button: {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n height: '6rem',\n aspectRatio: 1,\n color: colors.blue7,\n backgroundColor: {\n default: colors.gray3,\n ':hover': colors.gray4,\n [DARK]: {\n default: colors.gray9,\n ':hover': colors.gray8,\n },\n },\n borderWidth: 0,\n borderStyle: 'none',\n borderRadius: spacing.xs,\n padding: spacing.xs,\n margin: spacing.xs,\n cursor: 'pointer',\n fontSize: text.h2,\n transform: {\n default: null,\n ':hover': 'scale(1.025)',\n ':active': 'scale(0.975)',\n },\n },\n count: {\n fontSize: text.h2,\n fontWeight: 100,\n color: colors.lime7,\n minWidth: '6rem',\n textAlign: 'center',\n fontFamily: $.fontMono,\n },\n largeNumber: {\n fontSize: text.h3,\n },\n});\n" }, { "path": "examples/example-cli/source/app/globalTokens.stylex.ts", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n *\n */\n\nimport * as stylex from '@stylexjs/stylex';\n\n/**\n * o--o o o o o-O-o o-o o--o o-o o o o-O-o o-o\n * | | | | | | \\ | o o |\\ | | |\n * O-o | | | | | O O-o | | | \\ | | o-o\n * | | | | | | / | o o | \\| | |\n * o O---o o-o o-O-o o-o o o-o o o o o--o\n *\n * Reference: https://utopia.fyi/type/calculator\n *\n * The following constants are used to calculate fluid typography.\n * Feel free to change these initial numbers to suit your needs.\n *\n * StyleX can compute all of this at compile time as all the information\n * is statically available in the same file and the only functions used are\n * the Math.pow and Math.round functions.\n *\n * NOTE: Any custom functions will not be able to be computed at compile time.\n */\nconst MIN_WIDTH = 320;\nconst MAX_WIDTH = 1240;\nconst MIN_SCALE = 1.2;\nconst MAX_SCALE = 1.333;\nconst MIN_BASE_SIZE = 16;\nconst MAX_BASE_SIZE = 20;\n\n// Font sizes in `rem` units\nconst MIN_FONT = {\n xxs: Math.round(MIN_BASE_SIZE / Math.pow(MIN_SCALE, 3) / 0.16) / 100,\n xs: Math.round(MIN_BASE_SIZE / Math.pow(MIN_SCALE, 2) / 0.16) / 100,\n sm: Math.round(MIN_BASE_SIZE / MIN_SCALE / 0.16) / 100,\n p: Math.round(MIN_BASE_SIZE / 4) / 4,\n h5: Math.round((MIN_BASE_SIZE * MIN_SCALE) / 0.16) / 100,\n h4: Math.round((MIN_BASE_SIZE * Math.pow(MIN_SCALE, 2)) / 0.16) / 100,\n h3: Math.round((MIN_BASE_SIZE * Math.pow(MIN_SCALE, 3)) / 0.16) / 100,\n h2: Math.round((MIN_BASE_SIZE * Math.pow(MIN_SCALE, 4)) / 0.16) / 100,\n h1: Math.round((MIN_BASE_SIZE * Math.pow(MIN_SCALE, 5)) / 0.16) / 100,\n};\n// Font sizes in `rem` units\nconst MAX_FONT = {\n xxs: Math.round(MAX_BASE_SIZE / Math.pow(MAX_SCALE, 3) / 0.16) / 100,\n xs: Math.round(MAX_BASE_SIZE / Math.pow(MAX_SCALE, 2) / 0.16) / 100,\n sm: Math.round(MAX_BASE_SIZE / MAX_SCALE / 0.16) / 100,\n p: Math.round(MAX_BASE_SIZE / 4) / 4,\n h5: Math.round((MAX_BASE_SIZE * MAX_SCALE) / 0.16) / 100,\n h4: Math.round((MAX_BASE_SIZE * Math.pow(MAX_SCALE, 2)) / 0.16) / 100,\n h3: Math.round((MAX_BASE_SIZE * Math.pow(MAX_SCALE, 3)) / 0.16) / 100,\n h2: Math.round((MAX_BASE_SIZE * Math.pow(MAX_SCALE, 4)) / 0.16) / 100,\n h1: Math.round((MAX_BASE_SIZE * Math.pow(MAX_SCALE, 5)) / 0.16) / 100,\n};\nconst SLOPE = {\n xxs: (16 * (MAX_FONT.xxs - MIN_FONT.xxs)) / (MAX_WIDTH - MIN_WIDTH),\n xs: (16 * (MAX_FONT.xs - MIN_FONT.xs)) / (MAX_WIDTH - MIN_WIDTH),\n sm: (16 * (MAX_FONT.sm - MIN_FONT.sm)) / (MAX_WIDTH - MIN_WIDTH),\n p: (16 * (MAX_FONT.p - MIN_FONT.p)) / (MAX_WIDTH - MIN_WIDTH),\n h5: (16 * (MAX_FONT.h5 - MIN_FONT.h5)) / (MAX_WIDTH - MIN_WIDTH),\n h4: (16 * (MAX_FONT.h4 - MIN_FONT.h4)) / (MAX_WIDTH - MIN_WIDTH),\n h3: (16 * (MAX_FONT.h3 - MIN_FONT.h3)) / (MAX_WIDTH - MIN_WIDTH),\n h2: (16 * (MAX_FONT.h2 - MIN_FONT.h2)) / (MAX_WIDTH - MIN_WIDTH),\n h1: (16 * (MAX_FONT.h1 - MIN_FONT.h1)) / (MAX_WIDTH - MIN_WIDTH),\n};\nconst INTERCEPT = {\n xxs: Math.round(100 * (MIN_FONT.xxs - SLOPE.xxs * (MIN_WIDTH / 16))) / 100,\n xs: Math.round(100 * (MIN_FONT.xs - SLOPE.xs * (MIN_WIDTH / 16))) / 100,\n sm: Math.round(100 * (MIN_FONT.sm - SLOPE.sm * (MIN_WIDTH / 16))) / 100,\n p: Math.round(100 * (MIN_FONT.p - SLOPE.p * (MIN_WIDTH / 16))) / 100,\n h5: Math.round(100 * (MIN_FONT.h5 - SLOPE.h5 * (MIN_WIDTH / 16))) / 100,\n h4: Math.round(100 * (MIN_FONT.h4 - SLOPE.h4 * (MIN_WIDTH / 16))) / 100,\n h3: Math.round(100 * (MIN_FONT.h3 - SLOPE.h3 * (MIN_WIDTH / 16))) / 100,\n h2: Math.round(100 * (MIN_FONT.h2 - SLOPE.h2 * (MIN_WIDTH / 16))) / 100,\n h1: Math.round(100 * (MIN_FONT.h1 - SLOPE.h1 * (MIN_WIDTH / 16))) / 100,\n};\n\n// prettier-ignore\nexport const text = stylex.defineVars({\n xxs: `clamp(${ Math.min(MIN_FONT.xxs) }rem, calc(${ INTERCEPT.xxs }rem + ${ Math.round(10000 * SLOPE.xxs) / 100 }vw), ${ Math.max(MAX_FONT.xxs) }rem)`,\n xs: `clamp(${ Math.min(MIN_FONT.xs ) }rem, calc(${ INTERCEPT.xs }rem + ${ Math.round(10000 * SLOPE.xs ) / 100 }vw), ${ Math.max(MAX_FONT.xs ) }rem)`,\n sm: `clamp(${ Math.min(MIN_FONT.sm ) }rem, calc(${ INTERCEPT.sm }rem + ${ Math.round(10000 * SLOPE.sm ) / 100 }vw), ${ Math.max(MAX_FONT.sm ) }rem)`,\n p: `clamp(${ Math.min(MIN_FONT.p ) }rem, calc(${ INTERCEPT.p }rem + ${ Math.round(10000 * SLOPE.p ) / 100 }vw), ${ Math.max(MAX_FONT.p ) }rem)`,\n h5: `clamp(${ Math.min(MIN_FONT.h5 ) }rem, calc(${ INTERCEPT.h5 }rem + ${ Math.round(10000 * SLOPE.h5 ) / 100 }vw), ${ Math.max(MAX_FONT.h5 ) }rem)`,\n h4: `clamp(${ Math.min(MIN_FONT.h4 ) }rem, calc(${ INTERCEPT.h4 }rem + ${ Math.round(10000 * SLOPE.h4 ) / 100 }vw), ${ Math.max(MAX_FONT.h4 ) }rem)`,\n h3: `clamp(${ Math.min(MIN_FONT.h3 ) }rem, calc(${ INTERCEPT.h3 }rem + ${ Math.round(10000 * SLOPE.h3 ) / 100 }vw), ${ Math.max(MAX_FONT.h3 ) }rem)`,\n h2: `clamp(${ Math.min(MIN_FONT.h2 ) }rem, calc(${ INTERCEPT.h2 }rem + ${ Math.round(10000 * SLOPE.h2 ) / 100 }vw), ${ Math.max(MAX_FONT.h2 ) }rem)`,\n h1: `clamp(${ Math.min(MIN_FONT.h1 ) }rem, calc(${ INTERCEPT.h1 }rem + ${ Math.round(10000 * SLOPE.h1 ) / 100 }vw), ${ Math.max(MAX_FONT.h1 ) }rem)`,\n});\n\n/**\n * o--o o o o o-O-o o-o o-o o--o O o-o o--o\n * | | | | | | \\ | | | / \\ / |\n * O-o | | | | | O o-o O--o o---oO O-o\n * | | | | | | / | | | | \\ |\n * o O---o o-o o-O-o o-o o--o o o o o-o o--o\n *\n * Reference: https://utopia.fyi/space/calculator\n *\n * Similar to the fluid typography, we can create fluid values for spacing.\n * Using similar formulas and similar scales.\n *\n * NOTE: It is common to have more varied needs for spacing than for font-size.\n * So feel free to add some more values by following the pattern below.\n *\n * EXCEPT: We are using `px` instead of `rem`\n * ------------------------------------------\n * When talking about font-size, it is the best practice to use\n * `rem` so that an end user can change the font-size using the\n * browser's font-size setting.\n *\n * However, when talking about spacing, it is the best practice to\n * use `px` because using `rems` here makes font-size behave like zoom.\n *\n * Users that prefer larger text, don't necessarily want larger spacing as well.\n *\n */\n\nconst MULT = {\n xxxs: 0.25,\n xxs: 0.5,\n xs: 0.75,\n sm: 1,\n md: 1.5,\n lg: 2,\n xl: 3,\n xxl: 4,\n xxxl: 6,\n xxxxl: 8,\n};\nconst MIN_SPACE = {\n xxxs: MULT.xxxs * MIN_BASE_SIZE,\n xxs: MULT.xxs * MIN_BASE_SIZE,\n xs: MULT.xs * MIN_BASE_SIZE,\n sm: MULT.sm * MIN_BASE_SIZE,\n md: MULT.md * MIN_BASE_SIZE,\n lg: MULT.lg * MIN_BASE_SIZE,\n xl: MULT.xl * MIN_BASE_SIZE,\n xxl: MULT.xxl * MIN_BASE_SIZE,\n xxxl: MULT.xxxl * MIN_BASE_SIZE,\n xxxxl: MULT.xxxxl * MIN_BASE_SIZE,\n};\nconst MAX_SPACE = {\n xxxs: MULT.xxxs * MAX_BASE_SIZE,\n xxs: MULT.xxs * MAX_BASE_SIZE,\n xs: MULT.xs * MAX_BASE_SIZE,\n sm: MULT.sm * MAX_BASE_SIZE,\n md: MULT.md * MAX_BASE_SIZE,\n lg: MULT.lg * MAX_BASE_SIZE,\n xl: MULT.xl * MAX_BASE_SIZE,\n xxl: MULT.xxl * MAX_BASE_SIZE,\n xxxl: MULT.xxxl * MAX_BASE_SIZE,\n xxxxl: MULT.xxxxl * MAX_BASE_SIZE,\n};\nconst SLOPE_SPACE = {\n xxxs: (MAX_SPACE.xxxs - MIN_SPACE.xxxs) / (MAX_WIDTH - MIN_WIDTH),\n xxs: (MAX_SPACE.xxs - MIN_SPACE.xxs) / (MAX_WIDTH - MIN_WIDTH),\n xs: (MAX_SPACE.xs - MIN_SPACE.xs) / (MAX_WIDTH - MIN_WIDTH),\n sm: (MAX_SPACE.sm - MIN_SPACE.sm) / (MAX_WIDTH - MIN_WIDTH),\n md: (MAX_SPACE.md - MIN_SPACE.md) / (MAX_WIDTH - MIN_WIDTH),\n lg: (MAX_SPACE.lg - MIN_SPACE.lg) / (MAX_WIDTH - MIN_WIDTH),\n xl: (MAX_SPACE.xl - MIN_SPACE.xl) / (MAX_WIDTH - MIN_WIDTH),\n xxl: (MAX_SPACE.xxl - MIN_SPACE.xxl) / (MAX_WIDTH - MIN_WIDTH),\n xxxl: (MAX_SPACE.xxxl - MIN_SPACE.xxxl) / (MAX_WIDTH - MIN_WIDTH),\n xxxxl: (MAX_SPACE.xxxxl - MIN_SPACE.xxxxl) / (MAX_WIDTH - MIN_WIDTH),\n};\n// rounded to the nearest 0.25px\nconst INTERCEPT_SPACE = {\n xxxs: Math.round(4 * (MIN_SPACE.xxxs - SLOPE_SPACE.xxxs * MIN_WIDTH)) / 4,\n xxs: Math.round(4 * (MIN_SPACE.xxs - SLOPE_SPACE.xxs * MIN_WIDTH)) / 4,\n xs: Math.round(4 * (MIN_SPACE.xs - SLOPE_SPACE.xs * MIN_WIDTH)) / 4,\n sm: Math.round(4 * (MIN_SPACE.sm - SLOPE_SPACE.sm * MIN_WIDTH)) / 4,\n md: Math.round(4 * (MIN_SPACE.md - SLOPE_SPACE.md * MIN_WIDTH)) / 4,\n lg: Math.round(4 * (MIN_SPACE.lg - SLOPE_SPACE.lg * MIN_WIDTH)) / 4,\n xl: Math.round(4 * (MIN_SPACE.xl - SLOPE_SPACE.xl * MIN_WIDTH)) / 4,\n xxl: Math.round(4 * (MIN_SPACE.xxl - SLOPE_SPACE.xxl * MIN_WIDTH)) / 4,\n xxxl: Math.round(4 * (MIN_SPACE.xxxl - SLOPE_SPACE.xxxl * MIN_WIDTH)) / 4,\n xxxxl: Math.round(4 * (MIN_SPACE.xxxxl - SLOPE_SPACE.xxxxl * MIN_WIDTH)) / 4,\n};\n\n// prettier-ignore\nexport const spacing = stylex.defineVars({\n xxxs: `clamp(${MIN_SPACE.xxxs }px, calc(${INTERCEPT_SPACE.xxxs }px + ${ Math.round(10000 * SLOPE_SPACE.xxxs ) / 100 }vw), ${MAX_SPACE.xxxs }px)`,\n xxs: `clamp(${MIN_SPACE.xxs }px, calc(${INTERCEPT_SPACE.xxs }px + ${ Math.round(10000 * SLOPE_SPACE.xxs ) / 100 }vw), ${MAX_SPACE.xxs }px)`,\n xs: `clamp(${MIN_SPACE.xs }px, calc(${INTERCEPT_SPACE.xs }px + ${ Math.round(10000 * SLOPE_SPACE.xs ) / 100 }vw), ${MAX_SPACE.xs }px)`,\n sm: `clamp(${MIN_SPACE.sm }px, calc(${INTERCEPT_SPACE.sm }px + ${ Math.round(10000 * SLOPE_SPACE.sm ) / 100 }vw), ${MAX_SPACE.sm }px)`,\n md: `clamp(${MIN_SPACE.md }px, calc(${INTERCEPT_SPACE.md }px + ${ Math.round(10000 * SLOPE_SPACE.md ) / 100 }vw), ${MAX_SPACE.md }px)`,\n lg: `clamp(${MIN_SPACE.lg }px, calc(${INTERCEPT_SPACE.lg }px + ${ Math.round(10000 * SLOPE_SPACE.lg ) / 100 }vw), ${MAX_SPACE.lg }px)`,\n xl: `clamp(${MIN_SPACE.xl }px, calc(${INTERCEPT_SPACE.xl }px + ${ Math.round(10000 * SLOPE_SPACE.xl ) / 100 }vw), ${MAX_SPACE.xl }px)`,\n xxl: `clamp(${MIN_SPACE.xxl }px, calc(${INTERCEPT_SPACE.xxl }px + ${ Math.round(10000 * SLOPE_SPACE.xxl ) / 100 }vw), ${MAX_SPACE.xxl }px)`,\n xxxl: `clamp(${MIN_SPACE.xxxl }px, calc(${INTERCEPT_SPACE.xxxl }px + ${ Math.round(10000 * SLOPE_SPACE.xxxl ) / 100 }vw), ${MAX_SPACE.xxxl }px)`,\n xxxxl: `clamp(${MIN_SPACE.xxxxl }px, calc(${INTERCEPT_SPACE.xxxxl }px + ${ Math.round(10000 * SLOPE_SPACE.xxxxl ) / 100 }vw), ${MAX_SPACE.xxxxl }px)`,\n});\n\n/**\n * Color Tokens\n */\nconst DARK_MODE = '@media (prefers-color-scheme: dark)';\n\nexport const globalTokens = stylex.defineVars({\n maxWidth: `${MAX_WIDTH}px`,\n fontMono: [\n 'ui-monospace',\n 'Menlo',\n 'Monaco',\n '\"Cascadia Mono\"',\n '\"Segoe UI Mono\"',\n '\"Roboto Mono\"',\n '\"Oxygen Mono\"',\n '\"Ubuntu Monospace\"',\n '\"Source Code Pro\"',\n '\"Fira Mono\"',\n '\"Droid Sans Mono\"',\n '\"Courier New\"',\n 'monospace',\n ].join(', '),\n fontSans: [\n '-apple-system',\n 'BlinkMacSystemFont',\n '\"Segoe UI\"',\n 'Roboto',\n '\"Helvetica Neue\"',\n 'Arial',\n '\"Noto Sans\"',\n 'sans-serif',\n '\"Apple Color Emoji\"',\n '\"Segoe UI Emoji\"',\n '\"Segoe UI Symbol\"',\n '\"Noto Color Emoji\"',\n ].join(', '),\n\n foregroundR: { default: '0', [DARK_MODE]: '255' },\n foregroundG: { default: '0', [DARK_MODE]: '255' },\n foregroundB: { default: '0', [DARK_MODE]: '255' },\n\n bgStartRGB: { default: 'rgb(214, 219, 220)', [DARK_MODE]: 'rgb(0, 0, 0)' },\n\n bgEndR: { default: '255', [DARK_MODE]: '0' },\n bgEndG: { default: '255', [DARK_MODE]: '0' },\n bgEndB: { default: '255', [DARK_MODE]: '0' },\n\n calloutRGB: { default: 'rgb(238, 240, 241)', [DARK_MODE]: 'rgb(20, 20, 20)' },\n calloutRGB50: {\n default: 'rgba(238, 240, 241, 0.5)',\n [DARK_MODE]: 'rgba(20, 20, 20, 0.5)',\n },\n\n calloutBorderR: { default: '172', [DARK_MODE]: '108' },\n calloutBorderG: { default: '175', [DARK_MODE]: '108' },\n calloutBorderB: { default: '176', [DARK_MODE]: '108' },\n\n cardR: { default: '180', [DARK_MODE]: '100' },\n cardG: { default: '185', [DARK_MODE]: '100' },\n cardB: { default: '188', [DARK_MODE]: '100' },\n\n cardBorderR: { default: '131', [DARK_MODE]: '200' },\n cardBorderG: { default: '134', [DARK_MODE]: '200' },\n cardBorderB: { default: '135', [DARK_MODE]: '200' },\n\n primaryGlow: {\n default: `conic-gradient(${[\n 'from 180deg at 50% 50%',\n '#16abff33 0deg',\n '#0885ff33 55deg',\n '#54d6ff33 120deg',\n '#0071ff33 160deg',\n 'transparent 360deg',\n ].join(', ')})`,\n [DARK_MODE]: 'radial-gradient(rgba(1, 65, 255, 0.4), rgba(1, 65, 255, 0))',\n },\n secondaryGlow: {\n default: 'radial-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, 0))',\n [DARK_MODE]: `linear-gradient(${[\n 'to bottom right',\n 'rgba(1, 65, 255, 0)',\n 'rgba(1, 65, 255, 0)',\n 'rgba(1, 65, 255, 0.3)',\n ].join(', ')})`,\n },\n});\n\nexport const scales = stylex.defineVars({\n small: 'scale(0.95)',\n medium: 'scale(1)',\n large: 'scale(1.2)',\n});\n\nexport const colors = stylex.defineVars({\n blue3: '#74c0fc',\n blue7: '#1c7ed6',\n gray3: '#dee2e6',\n gray4: '#ced4da',\n gray8: '#343a40',\n gray9: '#212529',\n lime7: '#74b816',\n});\n" }, { "path": "examples/example-cli/source/app/globals.css", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@layer reset {\n * {\n box-sizing: border-box;\n padding: 0;\n margin: 0;\n }\n}\n" }, { "path": "examples/example-cli/source/app/layout.tsx", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n *\n */\n\nimport './globals.css';\nimport { globalTokens as $ } from './globalTokens.stylex';\nimport * as stylex from '@stylexjs/stylex';\n\nexport const metadata = {\n title: 'Create Next App',\n description: 'Generated by create next app',\n};\n\nexport default function RootLayout({\n children,\n}: {\n children: React.ReactNode;\n}) {\n return (\n \n {children}\n \n );\n}\n\nconst DARK = '@media (prefers-color-scheme: dark)';\n\nconst styles = stylex.create({\n html: {\n colorScheme: 'light dark',\n },\n reset: {\n minHeight: '100%',\n margin: 0,\n padding: 0,\n },\n body: {\n color: `rgba(${$.foregroundR}, ${$.foregroundG}, ${$.foregroundB}, 1)`,\n backgroundImage: {\n default: 'linear-gradient(to bottom, rgb(214, 219, 220), white)',\n [DARK]: 'linear-gradient(to bottom, rgb(20, 22, 27), black)',\n },\n },\n});\n" }, { "path": "examples/example-cli/source/app/page.tsx", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n *\n */\n\nimport React from 'react';\nimport * as stylex from '@stylexjs/stylex';\nimport Card from '../components/Card';\nimport {\n globalTokens as $,\n spacing,\n text,\n scales,\n} from './globalTokens.stylex';\nimport Counter from './Counter';\n\nconst HOMEPAGE = 'https://stylexjs.com';\n\nexport default function Home() {\n return (\n
\n
\n

\n Get started by editing \n app/page.tsx\n

\n
\n
\n

\n Next.js App Dir♥️️StyleX\n

\n \n
\n\n
\n \n \n \n \n
\n
\n );\n}\n\nconst MEDIA_MOBILE = '@media (max-width: 700px)' as const;\nconst MEDIA_TABLET =\n '@media (min-width: 701px) and (max-width: 1120px)' as const;\n\nconst beat = stylex.keyframes({\n '0%': { transform: scales.medium },\n '10%': { transform: scales.large },\n '20%': { transform: scales.medium },\n '30%': { transform: scales.large },\n '40%': { transform: scales.medium },\n '90%': { transform: scales.small },\n '100%': { transform: scales.medium },\n});\n\nconst style = stylex.create({\n main: {\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'center',\n justifyContent: 'space-between',\n minHeight: '100vh',\n paddingTop: spacing.xxl,\n paddingBottom: {\n default: spacing.xxl,\n [MEDIA_MOBILE]: spacing.md,\n },\n },\n hero: {\n flexGrow: 1,\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'center',\n justifyContent: 'center',\n gap: spacing.xl,\n },\n h1: {\n fontSize: text.h1,\n lineHeight: 1,\n fontFamily: $.fontSans,\n fontWeight: 400,\n textAlign: 'center',\n display: 'flex',\n gap: spacing.md,\n whiteSpace: 'nowrap',\n flexDirection: {\n default: 'row',\n [MEDIA_MOBILE]: 'column',\n },\n },\n emoji: {\n position: 'relative',\n fontFamily: 'sans-serif',\n top: {\n default: 0,\n [MEDIA_MOBILE]: spacing.xxxs,\n },\n animationName: beat,\n animationDuration: '2s',\n animationIterationCount: 'infinite',\n animationTimingFunction: 'linear',\n },\n description: {\n display: 'inherit',\n justifyContent: 'inherit',\n alignItems: 'inherit',\n fontSize: text.sm,\n maxWidth: $.maxWidth,\n width: '100%',\n zIndex: 2,\n fontFamily: $.fontMono,\n },\n descLink: {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n gap: spacing.xxs,\n padding: { [MEDIA_MOBILE]: spacing.sm },\n },\n descP: {\n display: { [MEDIA_MOBILE]: 'flex' },\n position: {\n default: 'relative',\n [MEDIA_MOBILE]: 'fixed',\n },\n justifyContent: { [MEDIA_MOBILE]: 'center' },\n alignItems: { [MEDIA_MOBILE]: 'center' },\n width: { [MEDIA_MOBILE]: '100%' },\n margin: 0,\n paddingInline: spacing.sm,\n paddingTop: {\n default: spacing.sm,\n [MEDIA_MOBILE]: spacing.lg,\n },\n paddingBottom: {\n default: spacing.sm,\n [MEDIA_MOBILE]: spacing.md,\n },\n backgroundColor: $.calloutRGB50,\n backgroundImage: {\n default: null,\n [MEDIA_MOBILE]: `linear-gradient(to bottom, ${$.bgStartRGB}, ${$.calloutRGB50})`,\n },\n borderWidth: {\n default: '1px',\n [MEDIA_MOBILE]: '0',\n },\n borderStyle: 'solid',\n borderColor: `rgba(${$.calloutBorderR}, ${$.calloutBorderG}, ${$.calloutBorderB}, 0.3)`,\n borderBottomColor: {\n default: null,\n [MEDIA_MOBILE]: `rgba(${$.calloutBorderR}, ${$.calloutBorderG}, ${$.calloutBorderB}, 0.25)`,\n },\n borderRadius: {\n default: spacing.xs,\n [MEDIA_MOBILE]: 0,\n },\n inset: { [MEDIA_MOBILE]: '0 0 auto' },\n },\n code: {\n fontWeight: 700,\n fontFamily: $.fontMono,\n },\n grid: {\n display: 'grid',\n gridTemplateColumns: {\n default: 'repeat(4, minmax(25%, auto))',\n [MEDIA_MOBILE]: '1fr',\n [MEDIA_TABLET]: 'repeat(2, 50%)',\n },\n width: $.maxWidth,\n maxWidth: {\n default: '100%',\n [MEDIA_MOBILE]: 320,\n },\n textAlign: { [MEDIA_MOBILE]: 'center' },\n },\n});\n" }, { "path": "examples/example-cli/source/components/Card.tsx", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n *\n */\n\nimport * as stylex from '@stylexjs/stylex';\nimport {\n globalTokens as $,\n spacing,\n text,\n colors,\n} from '../app/globalTokens.stylex';\nimport { tokens } from '../app/CardTokens.stylex';\n\ntype Props = Readonly<{\n title: string;\n body: string;\n href: string;\n}>;\n\nexport default function Card({ title, body, href }: Props) {\n return (\n \n

\n {title} →\n

\n

{body}

\n \n );\n}\n\ntype TMobile = '@media (max-width: 700px)';\n\nconst MOBILE: TMobile = '@media (max-width: 700px)' as TMobile;\nconst REDUCE_MOTION = '@media (prefers-reduced-motion: reduce)' as const;\n\nconst bgDefault = `rgba(${$.cardR}, ${$.cardG}, ${$.cardB}, 0)` as const;\n\nconst styles = stylex.create({\n link: {\n display: {\n default: 'flex',\n [MOBILE]: 'block',\n },\n alignItems: 'center',\n justifyContent: 'flex-start',\n flexDirection: 'column',\n borderRadius: spacing.xs,\n backgroundColor: {\n default: bgDefault,\n ':hover': `rgba(${$.cardR}, ${$.cardG}, ${$.cardB}, 0.1)`,\n },\n borderWidth: 1,\n borderStyle: 'solid',\n borderColor: {\n default: `rgba(${$.cardBorderR}, ${$.cardBorderG}, ${$.cardBorderB}, 0)`,\n ':hover': `rgba(${$.cardBorderR}, ${$.cardBorderG}, ${$.cardBorderB}, 0.1)`,\n },\n color: 'inherit',\n fontFamily: $.fontSans,\n padding: spacing.sm,\n transitionProperty: 'background-color, border-color',\n transitionDuration: '400ms',\n textAlign: 'center',\n textDecoration: 'none',\n [tokens.arrowTransform]: {\n default: 'translateX(0)',\n ':hover': 'translateX(4px)',\n },\n },\n h2: {\n color: colors.blue3,\n fontSize: text.h4,\n fontWeight: 600,\n marginBottom: {\n default: spacing.xs,\n [MOBILE]: spacing.xxs,\n },\n },\n span: {\n display: 'inline-block',\n transitionProperty: 'transform',\n transform: tokens.arrowTransform,\n transitionDuration: {\n default: '200ms',\n [REDUCE_MOTION]: '0s',\n },\n },\n p: {\n margin: 0,\n opacity: 0.6,\n fontSize: text.p,\n textWrap: 'balance',\n lineHeight: 1.5,\n maxWidth: '30ch',\n },\n color: (color: string) => ({ color }),\n width: (width: string) => ({ width }),\n});\n" }, { "path": "examples/example-cli/tsconfig.json", "content": "{\n \"compilerOptions\": {\n \"lib\": [\"dom\", \"dom.iterable\", \"esnext\"],\n \"allowJs\": true,\n \"skipLibCheck\": true,\n \"strict\": true,\n \"noEmit\": true,\n \"esModuleInterop\": true,\n \"module\": \"esnext\",\n \"moduleResolution\": \"bundler\",\n \"resolveJsonModule\": true,\n \"isolatedModules\": true,\n \"jsx\": \"preserve\",\n \"incremental\": true,\n \"plugins\": [],\n \"paths\": {\n \"@/*\": [\"./source/*\"]\n }\n },\n \"exclude\": [\"node_modules\"]\n}\n" }, { "path": "examples/example-esbuild/.eslintrc.js", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n *\n */\n\nmodule.exports = {\n plugins: ['@stylexjs'],\n rules: {\n '@stylexjs/valid-styles': 'error',\n 'ft-flow/space-after-type-colon': 0,\n 'ft-flow/no-types-missing-file-annotation': 0,\n 'ft-flow/generic-spacing': 0,\n },\n};\n" }, { "path": "examples/example-esbuild/README.md", "content": "# StyleX with esbuild\n\nThis example bundles a React app with esbuild while compiling StyleX via\n`@stylexjs/unplugin`. The plugin extracts StyleX styles at build time,\naggregates them, and appends the result to an existing CSS file produced by\nesbuild.\n\n### Prerequisites\n\n- Node.js 18+\n- [`esbuild`](https://esbuild.github.io/) (installed locally)\n- `@stylexjs/unplugin`\n\n## Install dependencies\n\n```bash\nnpm install\n```\n\n## Build script (`scripts/build.mjs`)\n\nThe build script wires the unplugin into esbuild:\n\n```js\nimport stylex from '@stylexjs/unplugin';\n\nesbuild.build({\n entryPoints: ['src/App.jsx'],\n bundle: true,\n metafile: true,\n plugins: [\n stylex.esbuild({\n useCSSLayers: true,\n importSources: ['@stylexjs/stylex'],\n unstable_moduleResolution: { type: 'commonJS' },\n }),\n ],\n});\n```\n\n- `metafile: true` lets the plugin locate CSS assets emitted by esbuild.\n- `useCSSLayers: true` ensures the generated StyleX output is wrapped in CSS\n `@layer` declarations which enforces specificity. StyleX will use a polyfill\n based on ID selectors if omitted.\n\n## CSS entry point (`src/global.css`)\n\nThe project imports `src/global.css` so esbuild emits a CSS asset. The StyleX\nplugin appends the aggregated styles to that file during\n`npm run example:build`.\n\n## Commands\n\n```bash\n# Production bundle + CSS extraction\nnpm run example:build\n```\n\nUse `npm run example:build` whenever you need a fresh `public/dist` folder\ncontaining both the JS bundle and the StyleX-enriched CSS.\n" }, { "path": "examples/example-esbuild/package.json", "content": "{\n \"private\": true,\n \"name\": \"example-esbuild\",\n \"version\": \"0.18.1\",\n \"description\": \"Simple esbuild example for @stylexjs/unplugin\",\n \"main\": \"src/App.jsx\",\n \"scripts\": {\n \"example:build\": \"node scripts/build.mjs\",\n \"example:lint\": \"eslint \\\"**/*.{js,jsx}\\\"\"\n },\n \"license\": \"MIT\",\n \"dependencies\": {\n \"@stylexjs/stylex\": \"0.18.1\",\n \"react\": \"^19.2.0\",\n \"react-dom\": \"^19.2.0\"\n },\n \"devDependencies\": {\n \"@stylexjs/unplugin\": \"0.18.1\",\n \"@stylexjs/eslint-plugin\": \"0.18.1\",\n \"esbuild\": \"^0.27.0\",\n \"eslint\": \"^8.57.1\"\n }\n}\n" }, { "path": "examples/example-esbuild/public/index.html", "content": "\n\n \n @stylexjs/unplugin (esbuild)\n \n \n \n \n \n
\n \n \n\n" }, { "path": "examples/example-esbuild/scripts/build.mjs", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport path from 'path';\nimport { fileURLToPath } from 'url';\nimport esbuild from 'esbuild';\nimport stylex from '@stylexjs/unplugin';\n\nconst __filename = fileURLToPath(import.meta.url);\nconst __dirname = path.dirname(__filename);\n\nconst BUILD_DIR_NAME = 'public/dist';\nconst OUTFILE = `${BUILD_DIR_NAME}/bundle.js`;\n\nesbuild\n .build({\n entryPoints: [path.resolve(__dirname, '..', 'src/App.jsx')],\n bundle: true,\n outfile: OUTFILE,\n minify: true,\n metafile: true, // lets the plugin find CSS outputs, if any\n plugins: [\n // See all options in the babel plugin configuration docs:\n // https://stylexjs.com/docs/api/configuration/babel-plugin/\n stylex.esbuild({\n useCSSLayers: true,\n importSources: ['@stylexjs/stylex'],\n unstable_moduleResolution: {\n type: 'commonJS',\n rootDir: path.resolve(__dirname, '../../..'),\n },\n }),\n ],\n })\n .catch(() => process.exit(1));\n" }, { "path": "examples/example-esbuild/src/App.jsx", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n *\n */\n\n'use strict';\n\nimport './global.css';\nimport * as React from 'react';\nimport { createRoot } from 'react-dom/client';\nimport * as stylex from '@stylexjs/stylex';\nimport { colors, fonts, sizes } from './globalTokens.stylex';\n\nconst styles = stylex.create({\n main: {\n width: '100vw',\n height: '100vh',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n backgroundColor: colors.pink7,\n },\n card: {\n backgroundColor: colors.blue9,\n padding: sizes.spacing5,\n borderRadius: sizes.spacing2,\n justifyContent: 'center',\n display: 'flex',\n alignItems: 'center',\n color: colors.gray0,\n fontFamily: fonts.mono,\n },\n});\n\nfunction App() {\n return (\n
\n
\n Blue rounded rectangle\n
\n
\n );\n}\n\ncreateRoot(document.getElementById('root')).render();\n" }, { "path": "examples/example-esbuild/src/global.css", "content": ":root { --stylex-injection: 0; }" }, { "path": "examples/example-esbuild/src/globalTokens.stylex.js", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n *\n */\n\nimport * as stylex from '@stylexjs/stylex';\n\nexport const colors = stylex.defineVars({\n pink7: '#d6336c',\n blue9: '#1864ab',\n gray0: '#f8f9fa',\n});\n\nexport const fonts = stylex.defineVars({\n mono: 'Dank Mono,Operator Mono,Inconsolata,Fira Mono,ui-monospace,SF Mono,Monaco,Droid Sans Mono,Source Code Pro,monospace',\n});\n\nexport const sizes = stylex.defineVars({\n spacing5: '1.5rem',\n spacing2: '.5rem',\n});\n" }, { "path": "examples/example-nextjs/.eslintrc.js", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n *\n */\n\nmodule.exports = {\n plugins: ['@stylexjs'],\n rules: {\n // The Eslint rule still needs work, but you can\n // enable it to test things out.\n '@stylexjs/valid-styles': 'error',\n 'ft-flow/space-after-type-colon': 0,\n 'ft-flow/no-types-missing-file-annotation': 0,\n 'ft-flow/generic-spacing': 0,\n },\n};\n" }, { "path": "examples/example-nextjs/.gitignore", "content": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# dependencies\n/node_modules\n/.pnp\n.pnp.js\n.yarn/install-state.gz\n\n# testing\n/coverage\n\n# next.js\n/.next/\n/out/\n\n# production\n/build\n\n# misc\n.DS_Store\n*.pem\n\n# debug\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n\n# local env files\n.env*.local\n\n# vercel\n.vercel\n\n# typescript\n*.tsbuildinfo\nnext-env.d.ts\n" }, { "path": "examples/example-nextjs/README.md", "content": "# Next.js example using StyleX\n\nThis is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) which then uses\nthe StyleX Babel and PostCSS plugins to compile StyleX.\n\n## Getting Started\n\nFirst, run the development server:\n\n```bash\nnpm run example:dev\n# or\nyarn example:dev\n# or\npnpm example:dev\n# or\nbun example:dev\n```\n\nOpen [http://localhost:3000](http://localhost:3000) with your browser to see the result.\n\nYou can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.\n\nThis project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.\n\n## Setup\n\nEnabling StyleX compilation involves three steps:\n\n### Define the `babel.config.js` file\n\n```tsx\nconst path = require('path');\n\nconst dev = process.env.NODE_ENV !== 'production';\n\nmodule.exports = {\n presets: ['next/babel'],\n plugins: [\n [\n '@stylexjs/babel-plugin',\n // See all options in the babel plugin configuration docs:\n // https://stylexjs.com/docs/api/configuration/babel-plugin/\n {\n dev,\n runtimeInjection: false,\n enableInlinedConditionalMerge: true,\n treeshakeCompensation: true,\n aliases: {\n '@/*': [path.join(__dirname, '*')],\n },\n unstable_moduleResolution: {\n type: 'commonJS',\n },\n },\n ],\n ],\n};\n```\n\nEnsure that the `next/babel` preset is used as well as the `@stylexjs/babel-plugin` with your configuration.\nIt is preferable to use a JS/TS file for this config to help in the next part...\n\n### Define the `postcss.config.js`\n\n```tsx\nconst babelConfig = require('./babel.config');\n\nmodule.exports = {\n plugins: {\n '@stylexjs/postcss-plugin': {\n include: ['app/**/*.{js,jsx,ts,tsx}', 'components/**/*.{js,jsx,ts,tsx}'],\n babelConfig: {\n babelrc: false,\n parserOpts: {\n plugins: ['typescript', 'jsx'],\n },\n plugins: babelConfig.plugins,\n },\n useCSSLayers: true,\n },\n autoprefixer: {},\n },\n};\n```\n\nHere, the `@stylexjs/postcss-plugin` must be used and configured. The `include` property takes a list of glob patterns\nto find all the files where styles should be extracted.\n\n`babelConfig` should be configured with at least the same StyleX Babel plugin as in your Babel config. It is important\nto ensure that your Babel config file and your PostCSS config are configured with the same options, so it's usually\nbest to import your Babel config from your PostCSS config to share it.\n\n### Ensure a CSS file is imported by every route of your app\n\nIt's usually best to do this by global layout. The CSS file *must* contain the `@stylex` directive.\n\n```css\n/**\n * Any reset styles\n */\n@layer resets {\n * {\n box-sizing: border-box;\n padding: 0;\n margin: 0;\n }\n}\n\n/**\n * The @stylex directive is used by the @stylexjs/postcss-plugin.\n * It is automatically replaced with generated CSS during builds.\n */\n@stylex;\n```\n\n---\n\nOnce these two files are defines, Next.js will automatically use Babel to transform your JS file with the StyleX plugin\nand the PostCSS plugin will be used to generate your final CSS file\n" }, { "path": "examples/example-nextjs/app/InteractiveCard.tsx", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n *\n */\n\n'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport {\n spacing,\n text,\n globalTokens as $,\n colors,\n} from './globalTokens.stylex';\nimport { useState } from 'react';\n\nexport const redTheme = stylex.createTheme(colors, {\n accent: '#e03131',\n accentLight: 'rgba(224, 49, 49, 0.08)',\n accentFaded: 'rgba(224, 49, 49, 0.19)',\n});\n\nexport const greenTheme = stylex.createTheme(colors, {\n accent: '#2f9e44',\n accentLight: 'rgba(47, 158, 68, 0.08)',\n accentFaded: 'rgba(47, 158, 68, 0.19)',\n});\n\nexport const blueTheme = stylex.createTheme(colors, {\n accent: '#1c7ed6',\n accentLight: 'rgba(28, 126, 214, 0.08)',\n accentFaded: 'rgba(28, 126, 214, 0.19)',\n});\n\nexport const THEMES = [\n { name: 'Red', theme: redTheme },\n { name: 'Green', theme: greenTheme },\n { name: 'Blue', theme: blueTheme },\n] as const;\n\ntype Props = Readonly<{\n themeIndex: number;\n onThemeChange: (_index: number) => void;\n isDark: boolean;\n onDarkModeChange: (_isDark: boolean) => void;\n}>;\n\nexport default function InteractiveCard({\n themeIndex,\n onThemeChange,\n isDark,\n onDarkModeChange,\n}: Props) {\n const [count, setCount] = useState(0);\n\n return (\n
\n
Theme
\n
\n {THEMES.map((t, i) => (\n onThemeChange(i)}\n >\n \n {t.name}\n \n ))}\n
\n
\n
Mode
\n
\n onDarkModeChange(false)}\n >\n Light\n \n onDarkModeChange(true)}\n >\n Dark\n \n
\n
\n
Counter
\n
\n setCount((c) => c - 1)}\n >\n -\n \n 99 && styles.largeNumber,\n )}\n >\n {count}\n
\n setCount((c) => c + 1)}\n >\n +\n \n
\n
\n );\n}\n\nconst DARK = '@media (prefers-color-scheme: dark)' as const;\n\nconst styles = stylex.create({\n card: {\n display: 'flex',\n flexDirection: 'column',\n gap: spacing.sm,\n padding: spacing.lg,\n borderRadius: spacing.md,\n borderWidth: 2,\n borderStyle: 'solid',\n borderColor: colors.accent,\n backgroundColor: $.surfaceCard,\n boxShadow: $.surfaceCardShadow,\n fontFamily: $.fontSans,\n width: '100%',\n maxWidth: 400,\n transitionProperty: 'border-color, box-shadow',\n transitionDuration: '300ms',\n },\n label: {\n fontSize: text.xs,\n fontWeight: 700,\n textTransform: 'uppercase',\n letterSpacing: '0.05em',\n color: colors.accent,\n transitionProperty: 'color',\n transitionDuration: '300ms',\n },\n themeRow: {\n display: 'flex',\n justifyContent: 'center',\n gap: spacing.xs,\n },\n themeButton: {\n display: 'flex',\n alignItems: 'center',\n gap: spacing.xxs,\n paddingInline: spacing.sm,\n paddingBlock: spacing.xs,\n borderRadius: spacing.xs,\n borderWidth: 1,\n borderStyle: 'solid',\n borderColor: {\n default: colors.gray3,\n [DARK]: colors.gray8,\n },\n backgroundColor: {\n default: 'transparent',\n ':hover': {\n default: colors.gray2,\n [DARK]: colors.gray9,\n },\n },\n color: 'inherit',\n cursor: 'pointer',\n fontSize: text.sm,\n fontFamily: $.fontSans,\n transitionProperty: 'background-color, border-color',\n transitionDuration: '200ms',\n },\n themeButtonActive: {\n fontWeight: 600,\n borderColor: colors.accent,\n backgroundColor: colors.accentLight,\n },\n dot: {\n width: 10,\n height: 10,\n borderRadius: '50%',\n flexShrink: 0,\n backgroundColor: colors.accent,\n },\n divider: {\n height: 2,\n marginBlock: spacing.xxs,\n borderRadius: 1,\n backgroundColor: colors.accentFaded,\n transitionProperty: 'background-color',\n transitionDuration: '300ms',\n },\n counterRow: {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n gap: spacing.md,\n },\n counterButton: {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n width: 48,\n height: 48,\n borderRadius: spacing.xs,\n borderWidth: 1,\n borderStyle: 'solid',\n borderColor: colors.accent,\n color: colors.accent,\n backgroundColor: {\n default: 'transparent',\n ':hover': {\n default: colors.gray2,\n [DARK]: colors.gray9,\n },\n },\n cursor: 'pointer',\n fontSize: text.h4,\n fontWeight: 300,\n fontFamily: $.fontSans,\n transitionProperty: 'background-color, transform, color, border-color',\n transitionDuration: '200ms',\n transform: {\n default: null,\n ':active': 'scale(0.95)',\n },\n },\n count: {\n fontSize: text.h2,\n fontWeight: 200,\n minWidth: 80,\n textAlign: 'center',\n fontFamily: $.fontMono,\n color: colors.accent,\n transitionProperty: 'color',\n transitionDuration: '300ms',\n },\n largeNumber: {\n fontSize: text.h3,\n },\n});\n" }, { "path": "examples/example-nextjs/app/app.css", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@layer resets {\n * {\n box-sizing: border-box;\n padding: 0;\n margin: 0;\n }\n\n html {\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n }\n}\n\n/**\n * The @stylex directive is used by the @stylexjs/postcss-plugin.\n * It is automatically replaced with generated CSS during builds.\n */\n@stylex;\n" }, { "path": "examples/example-nextjs/app/darkMode.stylex.ts", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n *\n */\n\nimport * as stylex from '@stylexjs/stylex';\nimport { globalTokens } from './globalTokens.stylex';\n\nexport const darkTheme = stylex.createTheme(globalTokens, {\n foregroundR: '255',\n foregroundG: '255',\n foregroundB: '255',\n\n bgStartRGB: 'rgb(0, 0, 0)',\n\n bgEndR: '0',\n bgEndG: '0',\n bgEndB: '0',\n\n calloutRGB: 'rgb(20, 20, 20)',\n calloutRGB50: 'rgba(20, 20, 20, 0.5)',\n\n calloutBorderR: '108',\n calloutBorderG: '108',\n calloutBorderB: '108',\n\n cardR: '100',\n cardG: '100',\n cardB: '100',\n\n cardBorderR: '200',\n cardBorderG: '200',\n cardBorderB: '200',\n\n primaryGlow: 'radial-gradient(rgba(1, 65, 255, 0.4), rgba(1, 65, 255, 0))',\n secondaryGlow: `linear-gradient(${[\n 'to bottom right',\n 'rgba(1, 65, 255, 0)',\n 'rgba(1, 65, 255, 0)',\n 'rgba(1, 65, 255, 0.3)',\n ].join(', ')})`,\n\n surfaceBg: '#0f1117',\n surfaceCard: '#1a1b26',\n surfaceCardShadow: '0 4px 24px rgba(0,0,0,0.3)',\n surfaceHover: 'rgba(255,255,255,0.04)',\n});\n\nexport const lightTheme = stylex.createTheme(globalTokens, {\n foregroundR: '0',\n foregroundG: '0',\n foregroundB: '0',\n\n bgStartRGB: 'rgb(214, 219, 220)',\n\n bgEndR: '255',\n bgEndG: '255',\n bgEndB: '255',\n\n calloutRGB: 'rgb(238, 240, 241)',\n calloutRGB50: 'rgba(238, 240, 241, 0.5)',\n\n calloutBorderR: '172',\n calloutBorderG: '175',\n calloutBorderB: '176',\n\n cardR: '180',\n cardG: '185',\n cardB: '188',\n\n cardBorderR: '131',\n cardBorderG: '134',\n cardBorderB: '135',\n\n primaryGlow: `conic-gradient(${[\n 'from 180deg at 50% 50%',\n '#16abff33 0deg',\n '#0885ff33 55deg',\n '#54d6ff33 120deg',\n '#0071ff33 160deg',\n 'transparent 360deg',\n ].join(', ')})`,\n secondaryGlow:\n 'radial-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, 0))',\n\n surfaceBg: '#fafafa',\n surfaceCard: 'white',\n surfaceCardShadow: '0 4px 24px rgba(0,0,0,0.06)',\n surfaceHover: 'rgba(0,0,0,0.02)',\n});\n" }, { "path": "examples/example-nextjs/app/globalTokens.stylex.ts", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n *\n */\n\nimport * as stylex from '@stylexjs/stylex';\n\n/**\n * o--o o o o o-O-o o-o o--o o-o o o o-O-o o-o\n * | | | | | | \\ | o o |\\ | | |\n * O-o | | | | | O O-o | | | \\ | | o-o\n * | | | | | | / | o o | \\| | |\n * o O---o o-o o-O-o o-o o o-o o o o o--o\n *\n * Reference: https://utopia.fyi/type/calculator\n *\n * The following constants are used to calculate fluid typography.\n * Feel free to change these initial numbers to suit your needs.\n *\n * StyleX can compute all of this at compile time as all the information\n * is statically available in the same file and the only functions used are\n * the Math.pow and Math.round functions.\n *\n * NOTE: Any custom functions will not be able to be computed at compile time.\n */\nconst MIN_WIDTH = 320;\nconst MAX_WIDTH = 1240;\nconst MIN_SCALE = 1.2;\nconst MAX_SCALE = 1.333;\nconst MIN_BASE_SIZE = 16;\nconst MAX_BASE_SIZE = 20;\n\n// Font sizes in `rem` units\nconst MIN_FONT = {\n xxs: Math.round(MIN_BASE_SIZE / Math.pow(MIN_SCALE, 3) / 0.16) / 100,\n xs: Math.round(MIN_BASE_SIZE / Math.pow(MIN_SCALE, 2) / 0.16) / 100,\n sm: Math.round(MIN_BASE_SIZE / MIN_SCALE / 0.16) / 100,\n p: Math.round(MIN_BASE_SIZE / 4) / 4,\n h5: Math.round((MIN_BASE_SIZE * MIN_SCALE) / 0.16) / 100,\n h4: Math.round((MIN_BASE_SIZE * Math.pow(MIN_SCALE, 2)) / 0.16) / 100,\n h3: Math.round((MIN_BASE_SIZE * Math.pow(MIN_SCALE, 3)) / 0.16) / 100,\n h2: Math.round((MIN_BASE_SIZE * Math.pow(MIN_SCALE, 4)) / 0.16) / 100,\n h1: Math.round((MIN_BASE_SIZE * Math.pow(MIN_SCALE, 5)) / 0.16) / 100,\n};\n// Font sizes in `rem` units\nconst MAX_FONT = {\n xxs: Math.round(MAX_BASE_SIZE / Math.pow(MAX_SCALE, 3) / 0.16) / 100,\n xs: Math.round(MAX_BASE_SIZE / Math.pow(MAX_SCALE, 2) / 0.16) / 100,\n sm: Math.round(MAX_BASE_SIZE / MAX_SCALE / 0.16) / 100,\n p: Math.round(MAX_BASE_SIZE / 4) / 4,\n h5: Math.round((MAX_BASE_SIZE * MAX_SCALE) / 0.16) / 100,\n h4: Math.round((MAX_BASE_SIZE * Math.pow(MAX_SCALE, 2)) / 0.16) / 100,\n h3: Math.round((MAX_BASE_SIZE * Math.pow(MAX_SCALE, 3)) / 0.16) / 100,\n h2: Math.round((MAX_BASE_SIZE * Math.pow(MAX_SCALE, 4)) / 0.16) / 100,\n h1: Math.round((MAX_BASE_SIZE * Math.pow(MAX_SCALE, 5)) / 0.16) / 100,\n};\nconst SLOPE = {\n xxs: (16 * (MAX_FONT.xxs - MIN_FONT.xxs)) / (MAX_WIDTH - MIN_WIDTH),\n xs: (16 * (MAX_FONT.xs - MIN_FONT.xs)) / (MAX_WIDTH - MIN_WIDTH),\n sm: (16 * (MAX_FONT.sm - MIN_FONT.sm)) / (MAX_WIDTH - MIN_WIDTH),\n p: (16 * (MAX_FONT.p - MIN_FONT.p)) / (MAX_WIDTH - MIN_WIDTH),\n h5: (16 * (MAX_FONT.h5 - MIN_FONT.h5)) / (MAX_WIDTH - MIN_WIDTH),\n h4: (16 * (MAX_FONT.h4 - MIN_FONT.h4)) / (MAX_WIDTH - MIN_WIDTH),\n h3: (16 * (MAX_FONT.h3 - MIN_FONT.h3)) / (MAX_WIDTH - MIN_WIDTH),\n h2: (16 * (MAX_FONT.h2 - MIN_FONT.h2)) / (MAX_WIDTH - MIN_WIDTH),\n h1: (16 * (MAX_FONT.h1 - MIN_FONT.h1)) / (MAX_WIDTH - MIN_WIDTH),\n};\nconst INTERCEPT = {\n xxs: Math.round(100 * (MIN_FONT.xxs - SLOPE.xxs * (MIN_WIDTH / 16))) / 100,\n xs: Math.round(100 * (MIN_FONT.xs - SLOPE.xs * (MIN_WIDTH / 16))) / 100,\n sm: Math.round(100 * (MIN_FONT.sm - SLOPE.sm * (MIN_WIDTH / 16))) / 100,\n p: Math.round(100 * (MIN_FONT.p - SLOPE.p * (MIN_WIDTH / 16))) / 100,\n h5: Math.round(100 * (MIN_FONT.h5 - SLOPE.h5 * (MIN_WIDTH / 16))) / 100,\n h4: Math.round(100 * (MIN_FONT.h4 - SLOPE.h4 * (MIN_WIDTH / 16))) / 100,\n h3: Math.round(100 * (MIN_FONT.h3 - SLOPE.h3 * (MIN_WIDTH / 16))) / 100,\n h2: Math.round(100 * (MIN_FONT.h2 - SLOPE.h2 * (MIN_WIDTH / 16))) / 100,\n h1: Math.round(100 * (MIN_FONT.h1 - SLOPE.h1 * (MIN_WIDTH / 16))) / 100,\n};\n\n// prettier-ignore\nexport const text = stylex.defineVars({\n xxs: `clamp(${ Math.min(MIN_FONT.xxs) }rem, calc(${ INTERCEPT.xxs }rem + ${ Math.round(10000 * SLOPE.xxs) / 100 }vw), ${ Math.max(MAX_FONT.xxs) }rem)`,\n xs: `clamp(${ Math.min(MIN_FONT.xs ) }rem, calc(${ INTERCEPT.xs }rem + ${ Math.round(10000 * SLOPE.xs ) / 100 }vw), ${ Math.max(MAX_FONT.xs ) }rem)`,\n sm: `clamp(${ Math.min(MIN_FONT.sm ) }rem, calc(${ INTERCEPT.sm }rem + ${ Math.round(10000 * SLOPE.sm ) / 100 }vw), ${ Math.max(MAX_FONT.sm ) }rem)`,\n p: `clamp(${ Math.min(MIN_FONT.p ) }rem, calc(${ INTERCEPT.p }rem + ${ Math.round(10000 * SLOPE.p ) / 100 }vw), ${ Math.max(MAX_FONT.p ) }rem)`,\n h5: `clamp(${ Math.min(MIN_FONT.h5 ) }rem, calc(${ INTERCEPT.h5 }rem + ${ Math.round(10000 * SLOPE.h5 ) / 100 }vw), ${ Math.max(MAX_FONT.h5 ) }rem)`,\n h4: `clamp(${ Math.min(MIN_FONT.h4 ) }rem, calc(${ INTERCEPT.h4 }rem + ${ Math.round(10000 * SLOPE.h4 ) / 100 }vw), ${ Math.max(MAX_FONT.h4 ) }rem)`,\n h3: `clamp(${ Math.min(MIN_FONT.h3 ) }rem, calc(${ INTERCEPT.h3 }rem + ${ Math.round(10000 * SLOPE.h3 ) / 100 }vw), ${ Math.max(MAX_FONT.h3 ) }rem)`,\n h2: `clamp(${ Math.min(MIN_FONT.h2 ) }rem, calc(${ INTERCEPT.h2 }rem + ${ Math.round(10000 * SLOPE.h2 ) / 100 }vw), ${ Math.max(MAX_FONT.h2 ) }rem)`,\n h1: `clamp(${ Math.min(MIN_FONT.h1 ) }rem, calc(${ INTERCEPT.h1 }rem + ${ Math.round(10000 * SLOPE.h1 ) / 100 }vw), ${ Math.max(MAX_FONT.h1 ) }rem)`,\n});\n\n/**\n * o--o o o o o-O-o o-o o-o o--o O o-o o--o\n * | | | | | | \\ | | | / \\ / |\n * O-o | | | | | O o-o O--o o---oO O-o\n * | | | | | | / | | | | \\ |\n * o O---o o-o o-O-o o-o o--o o o o o-o o--o\n *\n * Reference: https://utopia.fyi/space/calculator\n *\n * Similar to the fluid typography, we can create fluid values for spacing.\n * Using similar formulas and similar scales.\n *\n * NOTE: It is common to have more varied needs for spacing than for font-size.\n * So feel free to add some more values by following the pattern below.\n *\n * EXCEPT: We are using `px` instead of `rem`\n * ------------------------------------------\n * When talking about font-size, it is the best practice to use\n * `rem` so that an end user can change the font-size using the\n * browser's font-size setting.\n *\n * However, when talking about spacing, it is the best practice to\n * use `px` because using `rems` here makes font-size behave like zoom.\n *\n * Users that prefer larger text, don't necessarily want larger spacing as well.\n *\n */\n\nconst MULT = {\n xxxs: 0.25,\n xxs: 0.5,\n xs: 0.75,\n sm: 1,\n md: 1.5,\n lg: 2,\n xl: 3,\n xxl: 4,\n xxxl: 6,\n xxxxl: 8,\n};\nconst MIN_SPACE = {\n xxxs: MULT.xxxs * MIN_BASE_SIZE,\n xxs: MULT.xxs * MIN_BASE_SIZE,\n xs: MULT.xs * MIN_BASE_SIZE,\n sm: MULT.sm * MIN_BASE_SIZE,\n md: MULT.md * MIN_BASE_SIZE,\n lg: MULT.lg * MIN_BASE_SIZE,\n xl: MULT.xl * MIN_BASE_SIZE,\n xxl: MULT.xxl * MIN_BASE_SIZE,\n xxxl: MULT.xxxl * MIN_BASE_SIZE,\n xxxxl: MULT.xxxxl * MIN_BASE_SIZE,\n};\nconst MAX_SPACE = {\n xxxs: MULT.xxxs * MAX_BASE_SIZE,\n xxs: MULT.xxs * MAX_BASE_SIZE,\n xs: MULT.xs * MAX_BASE_SIZE,\n sm: MULT.sm * MAX_BASE_SIZE,\n md: MULT.md * MAX_BASE_SIZE,\n lg: MULT.lg * MAX_BASE_SIZE,\n xl: MULT.xl * MAX_BASE_SIZE,\n xxl: MULT.xxl * MAX_BASE_SIZE,\n xxxl: MULT.xxxl * MAX_BASE_SIZE,\n xxxxl: MULT.xxxxl * MAX_BASE_SIZE,\n};\nconst SLOPE_SPACE = {\n xxxs: (MAX_SPACE.xxxs - MIN_SPACE.xxxs) / (MAX_WIDTH - MIN_WIDTH),\n xxs: (MAX_SPACE.xxs - MIN_SPACE.xxs) / (MAX_WIDTH - MIN_WIDTH),\n xs: (MAX_SPACE.xs - MIN_SPACE.xs) / (MAX_WIDTH - MIN_WIDTH),\n sm: (MAX_SPACE.sm - MIN_SPACE.sm) / (MAX_WIDTH - MIN_WIDTH),\n md: (MAX_SPACE.md - MIN_SPACE.md) / (MAX_WIDTH - MIN_WIDTH),\n lg: (MAX_SPACE.lg - MIN_SPACE.lg) / (MAX_WIDTH - MIN_WIDTH),\n xl: (MAX_SPACE.xl - MIN_SPACE.xl) / (MAX_WIDTH - MIN_WIDTH),\n xxl: (MAX_SPACE.xxl - MIN_SPACE.xxl) / (MAX_WIDTH - MIN_WIDTH),\n xxxl: (MAX_SPACE.xxxl - MIN_SPACE.xxxl) / (MAX_WIDTH - MIN_WIDTH),\n xxxxl: (MAX_SPACE.xxxxl - MIN_SPACE.xxxxl) / (MAX_WIDTH - MIN_WIDTH),\n};\n// rounded to the nearest 0.25px\nconst INTERCEPT_SPACE = {\n xxxs: Math.round(4 * (MIN_SPACE.xxxs - SLOPE_SPACE.xxxs * MIN_WIDTH)) / 4,\n xxs: Math.round(4 * (MIN_SPACE.xxs - SLOPE_SPACE.xxs * MIN_WIDTH)) / 4,\n xs: Math.round(4 * (MIN_SPACE.xs - SLOPE_SPACE.xs * MIN_WIDTH)) / 4,\n sm: Math.round(4 * (MIN_SPACE.sm - SLOPE_SPACE.sm * MIN_WIDTH)) / 4,\n md: Math.round(4 * (MIN_SPACE.md - SLOPE_SPACE.md * MIN_WIDTH)) / 4,\n lg: Math.round(4 * (MIN_SPACE.lg - SLOPE_SPACE.lg * MIN_WIDTH)) / 4,\n xl: Math.round(4 * (MIN_SPACE.xl - SLOPE_SPACE.xl * MIN_WIDTH)) / 4,\n xxl: Math.round(4 * (MIN_SPACE.xxl - SLOPE_SPACE.xxl * MIN_WIDTH)) / 4,\n xxxl: Math.round(4 * (MIN_SPACE.xxxl - SLOPE_SPACE.xxxl * MIN_WIDTH)) / 4,\n xxxxl: Math.round(4 * (MIN_SPACE.xxxxl - SLOPE_SPACE.xxxxl * MIN_WIDTH)) / 4,\n};\n\n// prettier-ignore\nexport const spacing = stylex.defineVars({\n xxxs: `clamp(${MIN_SPACE.xxxs }px, calc(${INTERCEPT_SPACE.xxxs }px + ${ Math.round(10000 * SLOPE_SPACE.xxxs ) / 100 }vw), ${MAX_SPACE.xxxs }px)`,\n xxs: `clamp(${MIN_SPACE.xxs }px, calc(${INTERCEPT_SPACE.xxs }px + ${ Math.round(10000 * SLOPE_SPACE.xxs ) / 100 }vw), ${MAX_SPACE.xxs }px)`,\n xs: `clamp(${MIN_SPACE.xs }px, calc(${INTERCEPT_SPACE.xs }px + ${ Math.round(10000 * SLOPE_SPACE.xs ) / 100 }vw), ${MAX_SPACE.xs }px)`,\n sm: `clamp(${MIN_SPACE.sm }px, calc(${INTERCEPT_SPACE.sm }px + ${ Math.round(10000 * SLOPE_SPACE.sm ) / 100 }vw), ${MAX_SPACE.sm }px)`,\n md: `clamp(${MIN_SPACE.md }px, calc(${INTERCEPT_SPACE.md }px + ${ Math.round(10000 * SLOPE_SPACE.md ) / 100 }vw), ${MAX_SPACE.md }px)`,\n lg: `clamp(${MIN_SPACE.lg }px, calc(${INTERCEPT_SPACE.lg }px + ${ Math.round(10000 * SLOPE_SPACE.lg ) / 100 }vw), ${MAX_SPACE.lg }px)`,\n xl: `clamp(${MIN_SPACE.xl }px, calc(${INTERCEPT_SPACE.xl }px + ${ Math.round(10000 * SLOPE_SPACE.xl ) / 100 }vw), ${MAX_SPACE.xl }px)`,\n xxl: `clamp(${MIN_SPACE.xxl }px, calc(${INTERCEPT_SPACE.xxl }px + ${ Math.round(10000 * SLOPE_SPACE.xxl ) / 100 }vw), ${MAX_SPACE.xxl }px)`,\n xxxl: `clamp(${MIN_SPACE.xxxl }px, calc(${INTERCEPT_SPACE.xxxl }px + ${ Math.round(10000 * SLOPE_SPACE.xxxl ) / 100 }vw), ${MAX_SPACE.xxxl }px)`,\n xxxxl: `clamp(${MIN_SPACE.xxxxl }px, calc(${INTERCEPT_SPACE.xxxxl }px + ${ Math.round(10000 * SLOPE_SPACE.xxxxl ) / 100 }vw), ${MAX_SPACE.xxxxl }px)`,\n});\n\n/**\n * Color Tokens\n */\nconst DARK_MODE = '@media (prefers-color-scheme: dark)';\n\nexport const globalTokens = stylex.defineVars({\n maxWidth: `${MAX_WIDTH}px`,\n fontMono: [\n 'ui-monospace',\n 'Menlo',\n 'Monaco',\n '\"Cascadia Mono\"',\n '\"Segoe UI Mono\"',\n '\"Roboto Mono\"',\n '\"Oxygen Mono\"',\n '\"Ubuntu Monospace\"',\n '\"Source Code Pro\"',\n '\"Fira Mono\"',\n '\"Droid Sans Mono\"',\n '\"Courier New\"',\n 'monospace',\n ].join(', '),\n fontSans: [\n '-apple-system',\n 'BlinkMacSystemFont',\n '\"Segoe UI\"',\n 'Roboto',\n '\"Helvetica Neue\"',\n 'Arial',\n '\"Noto Sans\"',\n 'sans-serif',\n '\"Apple Color Emoji\"',\n '\"Segoe UI Emoji\"',\n '\"Segoe UI Symbol\"',\n '\"Noto Color Emoji\"',\n ].join(', '),\n\n foregroundR: { default: '0', [DARK_MODE]: '255' },\n foregroundG: { default: '0', [DARK_MODE]: '255' },\n foregroundB: { default: '0', [DARK_MODE]: '255' },\n\n bgStartRGB: { default: 'rgb(214, 219, 220)', [DARK_MODE]: 'rgb(0, 0, 0)' },\n\n bgEndR: { default: '255', [DARK_MODE]: '0' },\n bgEndG: { default: '255', [DARK_MODE]: '0' },\n bgEndB: { default: '255', [DARK_MODE]: '0' },\n\n calloutRGB: { default: 'rgb(238, 240, 241)', [DARK_MODE]: 'rgb(20, 20, 20)' },\n calloutRGB50: {\n default: 'rgba(238, 240, 241, 0.5)',\n [DARK_MODE]: 'rgba(20, 20, 20, 0.5)',\n },\n\n calloutBorderR: { default: '172', [DARK_MODE]: '108' },\n calloutBorderG: { default: '175', [DARK_MODE]: '108' },\n calloutBorderB: { default: '176', [DARK_MODE]: '108' },\n\n cardR: { default: '180', [DARK_MODE]: '100' },\n cardG: { default: '185', [DARK_MODE]: '100' },\n cardB: { default: '188', [DARK_MODE]: '100' },\n\n cardBorderR: { default: '131', [DARK_MODE]: '200' },\n cardBorderG: { default: '134', [DARK_MODE]: '200' },\n cardBorderB: { default: '135', [DARK_MODE]: '200' },\n\n primaryGlow: {\n default: `conic-gradient(${[\n 'from 180deg at 50% 50%',\n '#16abff33 0deg',\n '#0885ff33 55deg',\n '#54d6ff33 120deg',\n '#0071ff33 160deg',\n 'transparent 360deg',\n ].join(', ')})`,\n [DARK_MODE]: 'radial-gradient(rgba(1, 65, 255, 0.4), rgba(1, 65, 255, 0))',\n },\n secondaryGlow: {\n default: 'radial-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, 0))',\n [DARK_MODE]: `linear-gradient(${[\n 'to bottom right',\n 'rgba(1, 65, 255, 0)',\n 'rgba(1, 65, 255, 0)',\n 'rgba(1, 65, 255, 0.3)',\n ].join(', ')})`,\n },\n\n surfaceBg: { default: '#fafafa', [DARK_MODE]: '#0f1117' },\n surfaceCard: { default: 'white', [DARK_MODE]: '#1a1b26' },\n surfaceCardShadow: {\n default: '0 4px 24px rgba(0,0,0,0.06)',\n [DARK_MODE]: '0 4px 24px rgba(0,0,0,0.3)',\n },\n surfaceHover: {\n default: 'rgba(0,0,0,0.02)',\n [DARK_MODE]: 'rgba(255,255,255,0.04)',\n },\n});\n\nexport const scales = stylex.defineVars({\n small: 'scale(0.95)',\n medium: 'scale(1)',\n large: 'scale(1.2)',\n});\n\nexport const colors = stylex.defineVars({\n accent: '#1c7ed6',\n accentLight: 'rgba(28, 126, 214, 0.08)',\n accentFaded: 'rgba(28, 126, 214, 0.19)',\n blue3: '#74c0fc',\n blue5: '#4285F4',\n blue7: '#1c7ed6',\n purple: '#5B45DE',\n purple6: '#7C6AE8',\n emerald: '#0ca678',\n gray2: '#e9ecef',\n gray3: '#dee2e6',\n gray4: '#ced4da',\n gray5: '#adb5bd',\n gray6: '#868e96',\n gray8: '#343a40',\n gray9: '#212529',\n lime7: '#74b816',\n});\n" }, { "path": "examples/example-nextjs/app/layout.tsx", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n *\n */\n\nimport './app.css';\nimport { globalTokens as $ } from '@/app/globalTokens.stylex';\nimport * as stylex from '@stylexjs/stylex';\n\nexport const metadata = {\n title: 'Next.js + StyleX',\n description: 'The expressive styling system for ambitious interfaces',\n};\n\nexport default function RootLayout({\n children,\n}: {\n children: React.ReactNode;\n}) {\n return (\n \n {children}\n \n );\n}\n\nconst styles = stylex.create({\n html: {\n colorScheme: 'light dark',\n },\n reset: {\n minHeight: '100%',\n margin: 0,\n padding: 0,\n },\n body: {\n backgroundColor: $.surfaceBg,\n },\n});\n" }, { "path": "examples/example-nextjs/app/page.tsx", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n *\n */\n\n'use client';\n\nimport React, { useState, useEffect } from 'react';\nimport * as stylex from '@stylexjs/stylex';\nimport Card from '@/components/Card';\nimport {\n globalTokens as $,\n spacing,\n text,\n colors,\n} from './globalTokens.stylex';\nimport InteractiveCard, { THEMES } from './InteractiveCard';\nimport { darkTheme, lightTheme } from './darkMode.stylex';\n\nconst HOMEPAGE = 'https://stylexjs.com';\n\nexport default function Home() {\n const [themeIndex, setThemeIndex] = useState(2);\n const [isDark, setIsDark] = useState(false);\n\n useEffect(() => {\n const mq = window.matchMedia('(prefers-color-scheme: dark)');\n setIsDark(mq.matches);\n const handler = (e: MediaQueryListEvent) => setIsDark(e.matches);\n mq.addEventListener('change', handler);\n return () => mq.removeEventListener('change', handler);\n }, []);\n\n return (\n \n
\n

\n Next.js + StyleX\n

\n

\n The expressive styling system for ambitious interfaces\n

\n \n
\n\n
\n \n \n \n \n
\n \n );\n}\n\nconst MEDIA_MOBILE = '@media (max-width: 700px)' as const;\nconst MEDIA_TABLET =\n '@media (min-width: 701px) and (max-width: 1120px)' as const;\nconst DARK = '@media (prefers-color-scheme: dark)' as const;\n\nconst style = stylex.create({\n main: {\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'center',\n justifyContent: 'center',\n gap: spacing.xxxl,\n minHeight: '100vh',\n paddingTop: spacing.xxxl,\n paddingBottom: {\n default: spacing.xxl,\n [MEDIA_MOBILE]: spacing.lg,\n },\n paddingInline: spacing.md,\n backgroundColor: $.surfaceBg,\n color: `rgba(${$.foregroundR}, ${$.foregroundG}, ${$.foregroundB}, 1)`,\n },\n hero: {\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'center',\n justifyContent: 'center',\n gap: spacing.lg,\n width: '100%',\n maxWidth: 480,\n },\n h1: {\n fontSize: text.h1,\n lineHeight: 1,\n fontFamily: $.fontSans,\n fontWeight: 700,\n textAlign: 'center',\n letterSpacing: '-0.02em',\n whiteSpace: 'nowrap',\n flexDirection: {\n default: 'row',\n [MEDIA_MOBILE]: 'column',\n },\n },\n plus: {\n fontWeight: 300,\n color: colors.accent,\n transitionProperty: 'color',\n transitionDuration: '300ms',\n },\n subtitle: {\n fontSize: text.p,\n lineHeight: 1.6,\n fontFamily: $.fontSans,\n textAlign: 'center',\n color: {\n default: colors.gray5,\n [DARK]: colors.gray6,\n },\n maxWidth: '36ch',\n textWrap: 'balance',\n },\n grid: {\n display: 'grid',\n gridTemplateColumns: {\n default: 'repeat(4, minmax(25%, auto))',\n [MEDIA_MOBILE]: '1fr',\n [MEDIA_TABLET]: 'repeat(2, 50%)',\n },\n gap: spacing.sm,\n width: $.maxWidth,\n maxWidth: {\n default: '100%',\n [MEDIA_MOBILE]: 320,\n },\n textAlign: { [MEDIA_MOBILE]: 'center' },\n },\n});\n" }, { "path": "examples/example-nextjs/babel.config.js", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nconst path = require('path');\n\nconst dev = process.env.NODE_ENV !== 'production';\n\nmodule.exports = {\n presets: ['next/babel'],\n plugins: [\n [\n '@stylexjs/babel-plugin',\n // See all options in the babel plugin configuration docs:\n // https://stylexjs.com/docs/api/configuration/babel-plugin/\n {\n dev,\n runtimeInjection: false,\n enableInlinedConditionalMerge: true,\n treeshakeCompensation: true,\n aliases: {\n '@/*': [path.join(__dirname, '*')],\n },\n unstable_moduleResolution: {\n type: 'commonJS',\n },\n },\n ],\n ],\n};\n" }, { "path": "examples/example-nextjs/components/Card.tsx", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n *\n */\n\nimport * as stylex from '@stylexjs/stylex';\nimport {\n globalTokens as $,\n spacing,\n text,\n colors,\n} from '@/app/globalTokens.stylex';\nimport { cardMarker, headingMarker } from './CardTokens.stylex';\n\ntype Props = Readonly<{\n title: string;\n body: string;\n href: string;\n}>;\n\nexport default function Card({ title, body, href }: Props) {\n return (\n \n

\n {title} →\n

\n

{body}

\n \n );\n}\n\ntype TMobile = '@media (max-width: 700px)';\n\nconst MOBILE: TMobile = '@media (max-width: 700px)' as TMobile;\nconst REDUCE_MOTION = '@media (prefers-reduced-motion: reduce)' as const;\n\nconst DARK = '@media (prefers-color-scheme: dark)' as const;\n\nconst styles = stylex.create({\n link: {\n display: {\n default: 'flex',\n [MOBILE]: 'block',\n },\n alignItems: 'center',\n justifyContent: 'flex-start',\n flexDirection: 'column',\n borderRadius: spacing.sm,\n backgroundColor: {\n default: 'transparent',\n ':hover': $.surfaceHover,\n },\n borderWidth: 1,\n borderStyle: 'solid',\n borderColor: {\n default: colors.gray2,\n ':hover': colors.accent,\n [DARK]: {\n default: colors.gray8,\n ':hover': colors.accent,\n },\n },\n color: 'inherit',\n fontFamily: $.fontSans,\n padding: spacing.md,\n transitionProperty: 'background-color, border-color, transform, box-shadow',\n transitionDuration: '300ms',\n textAlign: 'center',\n textDecoration: 'none',\n transform: {\n default: null,\n ':hover': 'translateY(-2px)',\n },\n boxShadow: {\n default: 'none',\n ':hover': '0 4px 16px rgba(0, 0, 0, 0.08)',\n },\n },\n h2: {\n color: colors.accent,\n fontSize: text.h4,\n fontWeight: 600,\n marginBottom: {\n default: spacing.xs,\n [MOBILE]: spacing.xxs,\n },\n transitionProperty: 'color',\n transitionDuration: '300ms',\n },\n span: {\n display: 'inline-block',\n transitionProperty: 'transform',\n transform: {\n default: null,\n [stylex.when.ancestor(':hover', cardMarker)]: 'translateX(10px)',\n [stylex.when.ancestor(':hover', headingMarker)]: 'translateX(4px)',\n },\n transitionDuration: {\n default: '200ms',\n [REDUCE_MOTION]: '0s',\n },\n },\n p: {\n margin: 0,\n opacity: 0.6,\n fontSize: text.p,\n textWrap: 'balance',\n lineHeight: 1.5,\n maxWidth: '30ch',\n },\n});\n" }, { "path": "examples/example-nextjs/components/CardTokens.stylex.ts", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n * @format\n */\n\nimport * as stylex from '@stylexjs/stylex';\n\nexport const cardMarker = stylex.defineMarker();\nexport const headingMarker = stylex.defineMarker();\n" }, { "path": "examples/example-nextjs/next.config.js", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n *\n */\n\n/** @type {import('next').NextConfig} */\n\nconst path = require('path');\n\nmodule.exports = {};\n" }, { "path": "examples/example-nextjs/package.json", "content": "{\n \"private\": true,\n \"name\": \"example-nextjs\",\n \"version\": \"0.18.1\",\n \"scripts\": {\n \"clean\": \"shx rm -rf .next\",\n \"example:build\": \"next build\",\n \"example:dev\": \"next dev\",\n \"example:lint\": \"next lint\",\n \"example:start\": \"next start\"\n },\n \"dependencies\": {\n \"@stylexjs/stylex\": \"0.18.1\",\n \"next\": \"^16.0.7\",\n \"react\": \"^19.0.0-rc-de68d2f4-20241204\",\n \"react-dom\": \"^19.0.0-rc-de68d2f4-20241204\"\n },\n \"devDependencies\": {\n \"autoprefixer\": \"^10.4.20\",\n \"@stylexjs/eslint-plugin\": \"0.18.1\",\n \"@stylexjs/postcss-plugin\": \"0.18.1\",\n \"@types/json-schema\": \"^7.0.15\",\n \"@types/node\": \"^22.7.6\",\n \"@types/react\": \"^18.3.0\",\n \"@types/react-dom\": \"^18.3.0\",\n \"@typescript-eslint/parser\": \"^8.48.1\",\n \"eslint\": \"^9.39.1\",\n \"eslint-config-next\": \"^16.0.6\",\n \"typescript\": \"^5.9.3\",\n \"client-only\": \"0.0.1\"\n }\n}\n" }, { "path": "examples/example-nextjs/postcss.config.js", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n *\n */\n\nconst babelConfig = require('./babel.config');\n\nmodule.exports = {\n plugins: {\n '@stylexjs/postcss-plugin': {\n include: ['app/**/*.{js,jsx,ts,tsx}', 'components/**/*.{js,jsx,ts,tsx}'],\n babelConfig: {\n babelrc: false,\n parserOpts: {\n plugins: ['typescript', 'jsx'],\n },\n plugins: babelConfig.plugins,\n },\n useCSSLayers: true,\n },\n autoprefixer: {},\n },\n};\n" }, { "path": "examples/example-nextjs/tsconfig.json", "content": "{\n \"compilerOptions\": {\n \"target\": \"es5\",\n \"lib\": [\n \"dom\",\n \"dom.iterable\",\n \"esnext\"\n ],\n \"allowJs\": true,\n \"skipLibCheck\": true,\n \"strict\": true,\n \"noEmit\": true,\n \"esModuleInterop\": true,\n \"module\": \"esnext\",\n \"moduleResolution\": \"bundler\",\n \"resolveJsonModule\": true,\n \"isolatedModules\": true,\n \"jsx\": \"react-jsx\",\n \"incremental\": true,\n \"plugins\": [\n {\n \"name\": \"next\"\n }\n ],\n \"paths\": {\n \"@/*\": [\n \"./*\"\n ]\n }\n },\n \"include\": [\n \"next-env.d.ts\",\n \"**/*.ts\",\n \"**/*.tsx\",\n \".next/types/**/*.ts\",\n \".next/dev/types/**/*.ts\"\n ],\n \"exclude\": [\n \"node_modules\"\n ]\n}\n" }, { "path": "examples/example-react-router/.gitignore", "content": ".DS_Store\nnode_modules\n.env\ndist\n" }, { "path": "examples/example-react-router/README.md", "content": "# React Router + RSC + StyleX\n\n⚠️ **EXPERIMENTAL**: This template demonstrates React Server Components with\nReact Router.\n\n## Highlights\n\n- 🧪 React Server Components powered by Vite’s RSC plugin\n- 🧵 Styling via [`@stylexjs/stylex`](https://stylexjs.com/) compiled by\n [`@stylexjs/unplugin`](https://www.npmjs.com/package/@stylexjs/unplugin)\n- 🧭 React Router 7 data APIs + server actions\n- ⚡️ Instant HMR during `example:dev`\n- 🔣 TypeScript out of the box\n\n## Scripts\n\n```bash\nnpm install # install dependencies\nnpm run example:dev # start Vite dev server with RSC + StyleX\nrm -rf dist && npm run example:build # optional clean + production build\nnpm run example:start # run the Express server using the dist/ output\nnpm run example:typecheck # type-check without emitting files\n```\n\nDev server runs on `http://localhost:5173` by default.\n\n## StyleX integration\n\nThe Vite config registers the StyleX unplugin before the RSC plugin so that both\nclient and server bundles share the same compiled CSS:\n\n```ts\nimport stylex from '@stylexjs/unplugin';\n\nexport default defineConfig({\n plugins: [\n stylex.vite({ useCSSLayers: true }),\n react(),\n rsc({\n /* ... */\n }),\n ],\n});\n```\n\n- `src/stylex.css` is imported from the root route. This ensures Vite always\n emits a CSS asset that the unplugin can append to.\n- During development the layout injects the virtual StyleX runtime and\n stylesheet so HMR picks up CSS changes without reloading:\n ```tsx\n {\n import.meta.env.DEV ? (\n <>\n \n \n \n);\n" }, { "path": "examples/example-redwoodsdk/src/app/components/Copy.tsx", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n'use client';\n\nimport { useState } from 'react';\nimport * as stylex from '@stylexjs/stylex';\n\nexport function Copy({ textToCopy }: { textToCopy: string }) {\n const [copied, setCopied] = useState(false);\n\n const handleCopy = () => {\n navigator.clipboard.writeText(textToCopy).then(() => {\n setCopied(true);\n setTimeout(() => setCopied(false), 2000);\n });\n };\n\n return (\n \n );\n}\n\nconst styles = stylex.create({\n copyButton: {\n backgroundColor: 'transparent',\n color: '#ffad48',\n borderWidth: 0,\n borderRadius: 4,\n paddingBlock: 4,\n paddingInline: 12,\n cursor: 'pointer',\n fontSize: 16,\n fontWeight: 700,\n ':hover': { backgroundColor: 'rgba(255,255,255,0.1)' },\n },\n});\n" }, { "path": "examples/example-redwoodsdk/src/app/headers.ts", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport { RouteMiddleware } from 'rwsdk/router';\n\nexport const setCommonHeaders =\n (): RouteMiddleware =>\n ({ response, rw: { nonce } }) => {\n if (!import.meta.env.VITE_IS_DEV_SERVER) {\n // Forces browsers to always use HTTPS for a specified time period (2 years)\n response.headers.set(\n 'Strict-Transport-Security',\n 'max-age=63072000; includeSubDomains; preload',\n );\n }\n\n // Forces browser to use the declared content-type instead of trying to guess/sniff it\n response.headers.set('X-Content-Type-Options', 'nosniff');\n\n // Stops browsers from sending the referring webpage URL in HTTP headers\n response.headers.set('Referrer-Policy', 'no-referrer');\n\n // Explicitly disables access to specific browser features/APIs\n response.headers.set(\n 'Permissions-Policy',\n 'geolocation=(), microphone=(), camera=()',\n );\n\n // Defines trusted sources for content loading and script execution:\n response.headers.set(\n 'Content-Security-Policy',\n `default-src 'self'; script-src 'self' 'unsafe-eval' 'nonce-${nonce}' https://challenges.cloudflare.com; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com; frame-ancestors 'self'; frame-src 'self' https://challenges.cloudflare.com; object-src 'none';`,\n );\n };\n" }, { "path": "examples/example-redwoodsdk/src/app/pages/Counter.tsx", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n'use client';\n\nimport { useState } from 'react';\nimport * as stylex from '@stylexjs/stylex';\n\nconst styles = stylex.create({\n container: {\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'center',\n justifyContent: 'center',\n gap: 10,\n padding: 10,\n },\n button: {\n backgroundColor: 'tomato',\n borderStyle: 'none',\n appearance: 'none',\n color: 'white',\n paddingInline: 20,\n paddingBlock: 10,\n borderRadius: 5,\n margin: 10,\n },\n count: {\n fontFamily: 'monospace',\n fontSize: 20,\n },\n});\n\nexport function Counter() {\n const [count, setCount] = useState(0);\n return (\n
\n setCount(count - 1)}\n >\n -\n \n {count}\n setCount(count + 1)}\n >\n +\n \n
\n );\n}\n" }, { "path": "examples/example-redwoodsdk/src/app/pages/Home.tsx", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport { Welcome } from './Welcome.js';\n\nexport const Home = () => {\n // _Feel free to delete this element and its import_\n return ;\n};\n" }, { "path": "examples/example-redwoodsdk/src/app/pages/Welcome.tsx", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport * as stylex from '@stylexjs/stylex';\nimport { Button } from '@stylexjs/shared-ui';\nimport { tokens } from '@stylexjs/shared-ui/tokens.stylex';\nimport { Copy } from '../components/Copy';\n\nexport const Welcome = () => {\n return (\n
\n
\n

Welcome to RedwoodSDK x StyleX

\n

\n You’ve just installed the starter project. Here’s what to do next.\n

\n
\n\n
\n
\n

Next steps

\n
    \n
  1. \n Read the{' '}\n \n Quick Start\n {' '}\n to learn the basics.\n
    2. \n
  2. \n Explore React Server Components and Server Functions in the{' '}\n \n Docs\n \n .\n
    3. \n
  3. \n Join the community to ask questions and share what you’re\n building.\n
    4. \n
\n
\n\n
\n

Deploy to Cloudflare

\n

\n RedwoodSDK runs on Cloudflare Workers. Here’s the quickest way to\n deploy.\n

\n
\n $\n pnpm release\n \n
\n

\n Need more detail? Read the{' '}\n \n Cloudflare deployment guide\n \n .\n

\n
\n
\n \n
\n
\n
\n );\n};\n\nconst opacity = (color: string, percentage: number) =>\n `color-mix(in oklab, ${color} ${percentage}%, transparent)`;\n\nconst styles = stylex.create({\n container: {\n maxWidth: 1100,\n marginInline: 'auto',\n paddingBlock: 80,\n paddingInline: 32,\n fontFamily:\n \"Noto Sans, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'\",\n color: '#1a1a1a',\n minHeight: '100vh',\n },\n header: { marginBottom: 64 },\n title: {\n fontFamily: 'Playfair Display, serif',\n fontSize: 64,\n fontWeight: 700,\n lineHeight: 0.9,\n margin: 0,\n },\n subtitle: {\n fontFamily:\n \"Noto Sans, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'\",\n fontSize: 26,\n marginTop: 12,\n },\n section: { marginBottom: 64 },\n sectionTitle: {\n fontFamily: 'Playfair Display, serif',\n fontSize: 40,\n fontWeight: 700,\n marginBottom: 16,\n },\n list: {\n listStylePosition: 'inside',\n listStyleType: 'decimal',\n paddingLeft: 0,\n fontSize: 20,\n lineHeight: 1.6,\n },\n listItem: { marginBottom: 12 },\n link: {\n color: '#f47238',\n fontWeight: 700,\n textDecorationLine: 'none',\n ':hover': { color: '#ffad48' },\n },\n codeBlock: {\n backgroundColor: '#1b1b1b',\n color: '#ffad48',\n padding: 16,\n borderRadius: 8,\n fontFamily:\n 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace',\n fontSize: 20,\n display: 'flex',\n alignItems: 'center',\n gap: 8,\n marginTop: 16,\n },\n codePrompt: { color: '#f47238' },\n code: { flexGrow: 1 },\n btn: {\n backgroundColor: {\n default: opacity(tokens.primaryColor, 50),\n ':hover': opacity(tokens.primaryColor, 95),\n },\n transform: {\n default: null,\n ':active': 'scale(0.97)',\n },\n transitionProperty: 'transform',\n transitionDuration: {\n default: '0.3s',\n ':active': '0.05s',\n },\n },\n});\n" }, { "path": "examples/example-redwoodsdk/src/app/root.css", "content": ":root { --stylex-injection: 0; }" }, { "path": "examples/example-redwoodsdk/src/app/shared/links.ts", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport { defineLinks } from 'rwsdk/router';\n\nexport const link = defineLinks(['/']);\n" }, { "path": "examples/example-redwoodsdk/src/client.tsx", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport { initClient } from 'rwsdk/client';\n\ninitClient();\n\nif (import.meta.env.DEV) {\n // @ts-ignore\n import('virtual:stylex:css-only');\n}\n" }, { "path": "examples/example-redwoodsdk/src/worker.tsx", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport { render, route } from 'rwsdk/router';\nimport { defineApp } from 'rwsdk/worker';\n\nimport './app/root.css';\nimport { Document } from '@/app/Document';\nimport { setCommonHeaders } from '@/app/headers';\nimport { Home } from '@/app/pages/Home';\nimport { Counter } from './app/pages/Counter';\n\nexport type AppContext = {};\n\nexport default defineApp([\n setCommonHeaders(),\n ({ ctx }) => {\n // setup ctx here\n ctx;\n },\n render(Document, [route('/', Home), route('/counter', Counter)]),\n]);\n" }, { "path": "examples/example-redwoodsdk/tsconfig.json", "content": "{\n \"compilerOptions\": {\n /* Visit https://aka.ms/tsconfig.json to read more about this file */\n\n /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */\n \"target\": \"es2021\",\n /* Specify a set of bundled library declaration files that describe the target runtime environment. */\n \"lib\": [\"DOM\", \"DOM.Iterable\", \"ESNext\", \"ES2022\"],\n /* Specify what JSX code is generated. */\n \"jsx\": \"react-jsx\",\n\n /* Specify what module code is generated. */\n \"module\": \"es2022\",\n /* Specify how TypeScript looks up a file from a given module specifier. */\n \"moduleResolution\": \"bundler\",\n /* Specify type package names to be included without being referenced in a source file. */\n \"types\": [\n \"@cloudflare/workers-types\",\n \"./worker-configuration.d.ts\",\n \"./types/rw.d.ts\",\n \"./types/vite.d.ts\"\n ],\n \"paths\": {\n \"@/*\": [\"./src/*\"]\n },\n /* Enable importing .json files */\n \"resolveJsonModule\": true,\n\n /* Enable error reporting in type-checked JavaScript files. */\n \"checkJs\": false,\n\n /* Disable emitting files from a compilation. */\n \"noEmit\": true,\n\n /* Ensure that each file can be safely transpiled without relying on other imports. */\n \"isolatedModules\": true,\n /* Allow 'import x from y' when a module doesn't have a default export. */\n \"allowSyntheticDefaultImports\": true,\n /* Ensure that casing is correct in imports. */\n \"forceConsistentCasingInFileNames\": true,\n\n /* Enable all strict type-checking options. */\n \"strict\": true,\n\n /* Skip type checking all .d.ts files. */\n \"skipLibCheck\": true\n },\n \"exclude\": [\"node_modules\", \".tmp\"]\n}\n" }, { "path": "examples/example-redwoodsdk/types/css.d.ts", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\ndeclare module '*.module.css' {\n const classes: { readonly [key: string]: string };\n export default classes;\n}\n\ndeclare module '*.css' {}\n\ndeclare module '*.css?url' {\n export default string;\n}\n" }, { "path": "examples/example-redwoodsdk/types/rw.d.ts", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport { AppContext } from '../src/worker';\n\ndeclare module 'rwsdk/worker' {\n // eslint-disable-next-line no-unused-vars\n interface DefaultAppContext extends AppContext {}\n}\n" }, { "path": "examples/example-redwoodsdk/types/vite.d.ts", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\ndeclare module '*?url' {\n const result: string;\n export default result;\n}\n" }, { "path": "examples/example-redwoodsdk/vite.config.mts", "content": "import { defineConfig } from 'vite';\nimport { redwood } from 'rwsdk/vite';\nimport { cloudflare } from '@cloudflare/vite-plugin';\nimport stylex from '@stylexjs/unplugin';\n\nexport default defineConfig({\n plugins: [\n cloudflare({\n viteEnvironment: { name: 'worker' },\n }),\n redwood(),\n // @ts-ignore\n stylex.vite({\n // Keep transforms on in dev, but only expose the CSS endpoint (no runtime/HTML injection)\n devMode: 'css-only',\n devPersistToDisk: true,\n dev: process.env.NODE_ENV === 'development',\n runtimeInjection: false,\n }),\n ],\n});\n" }, { "path": "examples/example-redwoodsdk/worker-configuration.d.ts", "content": "/* eslint-disable */\n// Generated by Wrangler by running `wrangler types --include-runtime false` (hash: 6b6db21c80ba9cfeb812f12bd8b8b3e4)\ndeclare namespace Cloudflare {\n interface GlobalProps {\n mainModule: typeof import('./src/worker');\n }\n interface Env {\n ASSETS: Fetcher;\n }\n}\ninterface Env extends Cloudflare.Env {}\n" }, { "path": "examples/example-redwoodsdk/wrangler.jsonc", "content": "{\n // Schema reference for wrangler configuration\n \"$schema\": \"node_modules/wrangler/config-schema.json\",\n\n // Name of your worker\n \"name\": \"__change_me__\",\n\n // Entry point for your worker\n \"main\": \"src/worker.tsx\",\n\n // Compatibility settings\n \"compatibility_date\": \"2025-08-21\",\n \"compatibility_flags\": [\"nodejs_compat\"],\n\n // Assets configuration\n \"assets\": {\n \"binding\": \"ASSETS\"\n },\n\n // Observability settings\n \"observability\": {\n \"enabled\": true\n },\n\n // Environment variables\n \"vars\": {\n // Add your environment variables here\n }\n}\n" }, { "path": "examples/example-rollup/README.md", "content": "# Rollup example using StyleX\n\nTBD\n" }, { "path": "examples/example-rollup/babel.config.mjs", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nconst config = {\n assumptions: {\n iterableIsArray: true,\n },\n comments: false,\n presets: [\n [\n '@babel/preset-react',\n {\n runtime: 'automatic',\n },\n ],\n '@babel/preset-flow',\n ],\n};\n\nexport default config;\n" }, { "path": "examples/example-rollup/index.html", "content": "\n\n\n \n \n StyleX with Rollup\n\n\n
\n \n\n\n" }, { "path": "examples/example-rollup/package.json", "content": "{\n \"private\": true,\n \"name\": \"example-rollup\",\n \"version\": \"0.18.1\",\n \"description\": \"A simple rollup example to test stylexjs/rollup-plugin\",\n \"main\": \"index.js\",\n \"scripts\": {\n \"example:build\": \"rollup --config ./rollup.config.mjs\",\n \"example:dev\": \"rollup --config ./rollup.config.mjs --watch\",\n \"example:serve\": \"serve\"\n },\n \"license\": \"MIT\",\n \"dependencies\": {\n \"@stylexjs/stylex\": \"0.18.1\",\n \"react\": \"^19.2.0\",\n \"react-dom\": \"^19.2.0\"\n },\n \"devDependencies\": {\n \"@babel/core\": \"^7.18.2\",\n \"@babel/preset-env\": \"^7.18.2\",\n \"@babel/preset-flow\": \"^7.27.1\",\n \"@babel/preset-react\": \"^7.17.12\",\n \"@rollup/plugin-babel\": \"^6.0.4\",\n \"@rollup/plugin-commonjs\": \"^26.0.1\",\n \"@rollup/plugin-node-resolve\": \"^15.2.3\",\n \"@rollup/plugin-replace\": \"^5.0.7\",\n \"@stylexjs/rollup-plugin\": \"0.18.1\",\n \"rollup\": \"^4.59.0\",\n \"serve\": \"^14.2.4\"\n }\n}\n" }, { "path": "examples/example-rollup/rollup.config.mjs", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { babel } from '@rollup/plugin-babel';\nimport commonjs from '@rollup/plugin-commonjs';\nimport resolve from '@rollup/plugin-node-resolve';\nimport replace from '@rollup/plugin-replace';\nimport stylexPlugin from '@stylexjs/rollup-plugin';\n\nconst babelPlugin = babel({\n babelHelpers: 'bundled',\n});\n\nconst config = {\n input: './src/index.js',\n output: {\n file: './.build/bundle.js',\n format: 'cjs',\n },\n // See all options in the babel plugin configuration docs:\n // https://stylexjs.com/docs/api/configuration/babel-plugin/\n plugins: [\n babelPlugin,\n resolve(),\n commonjs(),\n replace({\n 'process.env.NODE_ENV': JSON.stringify(\n process.env.NODE_ENV || 'development',\n ),\n preventAssignment: true,\n }),\n stylexPlugin({\n fileName: 'stylex.css',\n runtimeInjection: true,\n }),\n ],\n};\n\nexport default config;\n" }, { "path": "examples/example-rollup/src/App.js", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n'use strict';\n\nimport * as stylex from '@stylexjs/stylex';\n\nexport default function App() {\n return (\n
\n
Content
\n
\n );\n}\n\nconst styles = stylex.create({\n main: {\n width: '100vw',\n height: '100vh',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n backgroundColor: 'lightblue',\n },\n card: {\n backgroundColor: '#fefefe',\n padding: '1rem',\n borderRadius: 10,\n justifyContent: 'center',\n display: 'flex',\n alignItems: 'center',\n color: '#333',\n fontFamily: 'Arial',\n },\n});\n" }, { "path": "examples/example-rollup/src/index.js", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport React from 'react';\nimport ReactDOM from 'react-dom/client';\nimport App from './App';\n\nconst root = ReactDOM.createRoot(document.getElementById('root'));\n\nroot.render(\n \n \n ,\n);\n" }, { "path": "examples/example-rspack/README.md", "content": "# Rspack Example with StyleX\n\nThis project demonstrates how to run StyleX inside Rspack via `@stylexjs/unplugin`. The plugin compiles StyleX at build time and appends the generated CSS to the stylesheet emitted by `CssExtractRspackPlugin`.\n\n### Prerequisites\n- Node.js 18+\n- `@rspack/cli` / `@rspack/core`\n- `MiniCssExtractRspackPlugin` (bundled with Rspack) or another CSS extractor\n- `@stylexjs/unplugin`\n\n## Install dependencies\n\n```bash\nnpm install\n```\n\n## Rspack configuration (`rspack.config.js`)\n\n```javascript\nconst path = require('path');\nconst rspack = require('@rspack/core');\nconst stylex = require('@stylexjs/unplugin').default;\n\nmodule.exports = {\n entry: { app: path.resolve(__dirname, 'src/main.jsx') },\n plugins: [\n stylex.rspack({}),\n new rspack.CssExtractRspackPlugin({ filename: 'index.css' }),\n ],\n module: {\n rules: [\n { test: /\\.[jt]sx?$/, loader: 'builtin:swc-loader' },\n { test: /\\.css$/, use: [rspack.CssExtractRspackPlugin.loader, 'css-loader'] },\n ],\n },\n};\n```\n\n- `stylex.rspack()` injects the plugin into the webpack-compatible compiler hooks.\n- The CSS extract plugin ensures there is a concrete CSS asset for StyleX to append to.\n\n## CSS entry point (`src/global.css`)\n\nThe app imports `src/global.css` so every build produces `index.css`. The StyleX plugin appends its aggregated CSS to that file during both dev and production builds.\n\n## Commands\n\n```bash\n# Start the Rspack dev server with StyleX transforms\nnpm run example:dev\n\n# Production build with aggregated StyleX CSS in dist/index.css\nnpm run example:build\n```\n\nExecute the scripts from `examples/example-rspack`. The `dist/` output already contains the StyleX CSS merged into `index.css`.\n" }, { "path": "examples/example-rspack/package.json", "content": "{\n \"name\": \"example-rspack\",\n \"private\": true,\n \"version\": \"0.18.1\",\n \"description\": \"Example: StyleX with Rspack via @stylexjs/unplugin\",\n \"scripts\": {\n \"example:build\": \"rspack build --config ./rspack.config.js\",\n \"example:dev\": \"rspack serve --config ./rspack.config.js\"\n },\n \"dependencies\": {\n \"react\": \"^19.2.0\",\n \"react-dom\": \"^19.2.0\",\n \"@stylexjs/stylex\": \"0.18.1\"\n },\n \"devDependencies\": {\n \"@rspack/cli\": \"^1.6.4\",\n \"@rspack/core\": \"^1.6.4\",\n \"css-loader\": \"^7.1.2\",\n \"@stylexjs/unplugin\": \"0.18.1\"\n }\n}\n" }, { "path": "examples/example-rspack/public/index.html", "content": "\n\n \n \n \n StyleX + Rspack\n \n \n \n
\n \n \n \n\n" }, { "path": "examples/example-rspack/rspack.config.js", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n *\n */\n\nconst path = require('path');\nconst rspack = require('@rspack/core');\nconst stylex = require('@stylexjs/unplugin').default;\n\n/** @type {import('@rspack/core').Configuration} */\nmodule.exports = {\n mode: 'development',\n context: __dirname,\n entry: {\n app: path.resolve(__dirname, 'src/main.jsx'),\n },\n experiments: {\n // Disable built-in CSS experiment when using extract plugin\n css: false,\n },\n output: {\n path: path.resolve(__dirname, 'dist'),\n filename: 'bundle.js',\n clean: true,\n },\n resolve: {\n extensions: ['.js', '.jsx', '.ts', '.tsx'],\n },\n module: {\n rules: [\n {\n test: /\\.[jt]sx?$/,\n exclude: /node_modules/,\n loader: 'builtin:swc-loader',\n options: {\n jsc: {\n parser: { syntax: 'ecmascript', jsx: true },\n transform: { react: { runtime: 'automatic' } },\n },\n },\n },\n {\n test: /\\.css$/,\n use: [rspack.CssExtractRspackPlugin.loader, 'css-loader'],\n },\n ],\n },\n plugins: [\n // Use the unplugin adapter for Rspack/webpack\n stylex.rspack({}),\n new rspack.CssExtractRspackPlugin({ filename: 'index.css' }),\n ],\n devServer: {\n static: {\n directory: path.join(__dirname, 'public'),\n },\n port: 5174,\n },\n};\n" }, { "path": "examples/example-rspack/src/App.jsx", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport * as stylex from '@stylexjs/stylex';\n\nexport default function App() {\n return (\n
\n

StyleX + Rspack + unplugin

\n
\n );\n}\n\nconst styles = stylex.create({\n app: {\n minHeight: '100vh',\n display: 'grid',\n placeItems: 'center',\n backgroundColor: '#f7f5ff',\n },\n title: {\n color: 'rebeccapurple',\n fontSize: 32,\n fontWeight: 700,\n },\n});\n" }, { "path": "examples/example-rspack/src/global.css", "content": "/* Ensure Rspack produces a CSS asset to inject StyleX into */\n:root {\n --brand-color: #663399;\n}\n\nbody {\n margin: 0;\n font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell,\n Noto Sans, Helvetica, Arial, Apple Color Emoji, Segoe UI Emoji,\n Segoe UI Symbol;\n}\n\n" }, { "path": "examples/example-rspack/src/main.jsx", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport './global.css';\nimport React from 'react';\nimport { createRoot } from 'react-dom/client';\nimport App from './App.jsx';\n\nconst root = createRoot(document.getElementById('root'));\nroot.render();\n\n" }, { "path": "examples/example-storybook/.babelrc.cjs", "content": "const path = require('path')\n\nmodule.exports = {\n presets: [\n ['@babel/preset-react', {runtime: 'automatic'}],\n '@babel/preset-typescript'\n ],\n plugins: [\n [\n '@stylexjs/babel-plugin',\n {\n debug: process.env.NODE_ENV === 'development',\n unstable_moduleResolution: {\n type: 'commonJS'\n }\n }\n ]\n ]\n}\n" }, { "path": "examples/example-storybook/.storybook/main.ts", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n *\n */\nimport type { StorybookConfig } from '@storybook/react-vite';\nimport { join, dirname } from 'node:path';\n\nfunction getAbsolutePath(value: string): any {\n return dirname(require.resolve(join(value, 'package.json')));\n}\n\nconst config: StorybookConfig = {\n stories: [\n '../stories/**/*.mdx',\n '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)',\n ],\n addons: [\n getAbsolutePath('@storybook/addon-links'),\n getAbsolutePath('@storybook/addon-docs'),\n getAbsolutePath('@chromatic-com/storybook'),\n ],\n framework: {\n name: getAbsolutePath('@storybook/react-vite'),\n options: {},\n },\n\n typescript: {\n /* infer property docs from typescript types */\n reactDocgen: 'react-docgen-typescript',\n reactDocgenTypescriptOptions: {\n shouldExtractLiteralValuesFromEnum: true,\n shouldRemoveUndefinedFromOptional: true,\n propFilter: (prop) => {\n /* does property have documentation? */\n const hasDoc = prop.description !== '';\n\n /* is property defined in external dependency package? */\n const isExternal =\n prop.parent && /node_modules/.test(prop.parent.fileName);\n\n return hasDoc && !isExternal;\n },\n },\n },\n\n core: {\n /* use builder-vite for fast startup times and near-instant HMR */\n builder: {\n name: '@storybook/builder-vite',\n\n options: {\n /* use a different config for static build for self-contained setup to\n include external deps (like react) into the served package */\n viteConfigPath: './vite-storybook.config.ts',\n },\n },\n disableTelemetry: true,\n },\n};\n\nexport default config;\n" }, { "path": "examples/example-storybook/.storybook/preview.ts", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n *\n */\nimport '../stories/styles.css';\n\n/** @type { import('@storybook/react-vite').Preview } */\nconst preview = {\n parameters: {\n controls: {\n matchers: {\n color: /(background|color)$/i,\n date: /Date$/i,\n },\n },\n },\n};\n\nexport default preview;\n" }, { "path": "examples/example-storybook/.storybook/vitest.setup.ts", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n *\n */\nimport * as a11yAddonAnnotations from '@storybook/addon-a11y/preview';\nimport { setProjectAnnotations } from '@storybook/react-vite';\nimport * as projectAnnotations from './preview';\n\n// This is an important step to apply the right configuration when testing your stories.\n// More info at: https://storybook.js.org/docs/api/portable-stories/portable-stories-vitest#setprojectannotations\nsetProjectAnnotations([a11yAddonAnnotations, projectAnnotations]);\n" }, { "path": "examples/example-storybook/README.md", "content": "# Storybook example using StyleX\n\nThis is a [Storybook](https://storybook.js.org/) project that demonstrates how to use StyleX with component documentation and testing.\n\n## Getting Started\n\nFirst, run the development server:\n\n```bash\nnpm run storybook\n```\n\nOpen [http://localhost:6006](http://localhost:6006) with your browser to see the Storybook interface.\n\nYou can start editing the components by modifying files in the `stories/` directory. Storybook will automatically reload as you edit the files.\n\n## Static build of the Storybook\n\nTo build the static Storybook for deployment:\n\n```bash\nnpm run build-storybook\n```\n\n## Learn More\n\nTo learn more about Storybook and StyleX, take a look at the following resources:\n\n- [Storybook Documentation](https://storybook.js.org/docs) - learn about Storybook features and API.\n- [StyleX Documentation](https://stylexjs.com/docs) - learn about StyleX features and usage.\n- [Learn Storybook](https://storybook.js.org/tutorials) - interactive Storybook tutorials.\n\nYou can check out [the Storybook GitHub repository](https://github.com/storybookjs/storybook) and [the StyleX GitHub repository](https://github.com/facebook/stylex) - your feedback and contributions are welcome!" }, { "path": "examples/example-storybook/eslint.config.mjs", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n *\n */\nimport stylexPlugin from '@stylexjs/eslint-plugin';\nimport tseslint, { parser as typescriptParser } from 'typescript-eslint';\nimport storybookPlugin from 'eslint-plugin-storybook';\nimport importPlugin from 'eslint-plugin-import';\nimport { dirname } from 'node:path';\nimport { fileURLToPath } from 'node:url';\n\nconst __filename = fileURLToPath(import.meta.url);\nconst __dirname = dirname(__filename);\n\nconst typescriptPlugin = tseslint.config({\n files: ['**/*.ts', '**/*.tsx'],\n extends: [...tseslint.configs.recommended],\n rules: {\n '@typescript-eslint/no-unused-vars': [\n 'error',\n {\n caughtErrors: 'none',\n argsIgnorePattern: '^_',\n destructuredArrayIgnorePattern: '^_',\n varsIgnorePattern: '^_.',\n },\n ],\n '@typescript-eslint/object-curly-spacing': ['warn'],\n '@typescript-eslint/consistent-type-imports': ['error'],\n 'no-undef': 'off',\n },\n});\n\nexport default [\n {\n ignores: ['postcss.config.*', 'storybook-static/'],\n },\n {\n plugins: {\n '@stylexjs': stylexPlugin,\n ...typescriptPlugin,\n ...storybookPlugin.configs['flat/recommended'],\n import: importPlugin,\n },\n\n languageOptions: {\n parser: typescriptParser,\n parserOptions: {\n ecmaVersion: 12,\n sourceType: 'module',\n tsconfigRootDir: __dirname,\n ecmaFeatures: {\n jsx: true,\n },\n },\n },\n settings: {\n 'import/ignore': ['node_modules'],\n react: {\n version: 'detect',\n },\n },\n rules: {\n '@stylexjs/valid-styles': 'error',\n 'ft-flow/space-after-type-colon': 0,\n 'ft-flow/no-types-missing-file-annotation': 0,\n 'ft-flow/generic-spacing': 0,\n },\n },\n];\n" }, { "path": "examples/example-storybook/package.json", "content": "{\n \"private\": true,\n \"name\": \"example-storybook\",\n \"version\": \"0.18.1\",\n \"scripts\": {\n \"example:dev\": \"storybook dev -p 6006 --no-open\",\n \"storybook\": \"storybook dev -p 6006 --no-open\",\n \"build-storybook\": \"storybook build\",\n \"lint\": \"eslint . --ext .js,.jsx,.ts,.tsx\",\n \"lint:fix\": \"eslint . --ext .js,.jsx,.ts,.tsx --fix\"\n },\n \"devDependencies\": {\n \"@chromatic-com/storybook\": \"^4.1.1\",\n \"@storybook/addon-a11y\": \"^9.1.7\",\n \"@storybook/addon-docs\": \"^9.1.7\",\n \"@storybook/addon-links\": \"^9.1.7\",\n \"@storybook/addon-vitest\": \"^9.1.7\",\n \"@storybook/react-vite\": \"^9.1.7\",\n \"@stylexjs/babel-plugin\": \"0.18.1\",\n \"@stylexjs/eslint-plugin\": \"0.18.1\",\n \"@stylexjs/postcss-plugin\": \"0.18.1\",\n \"@stylexjs/stylex\": \"0.18.1\",\n \"@typescript-eslint/eslint-plugin\": \"^8.44.0\",\n \"@typescript-eslint/parser\": \"^8.44.0\",\n \"@vitejs/plugin-react\": \"^5.0.3\",\n \"@vitest/browser\": \"^4.0.13\",\n \"@vitest/coverage-v8\": \"^4.0.13\",\n \"autoprefixer\": \"^10.4.21\",\n \"eslint\": \"^9.36.0\",\n \"eslint-plugin-import\": \"^2.32.0\",\n \"eslint-plugin-storybook\": \"^9.1.7\",\n \"playwright\": \"^1.55.0\",\n \"postcss-nesting\": \"^13.0.2\",\n \"prop-types\": \"^15.8.1\",\n \"rollup-plugin-jsx-remove-attributes\": \"^3.1.1\",\n \"rollup-plugin-node-externals\": \"^8.1.1\",\n \"storybook\": \"^9.1.19\",\n \"typescript-eslint\": \"^8.44.0\",\n \"vite-plugin-dts\": \"^4.5.4\",\n \"vitest\": \"^4.0.13\"\n }\n}\n" }, { "path": "examples/example-storybook/postcss.config.mjs", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n *\n */\nimport autoprefixer from 'autoprefixer';\nimport nesting from 'postcss-nesting';\nimport stylex from '@stylexjs/postcss-plugin';\n\nimport babelConfig from './.babelrc.cjs';\n\n/** @type {import('postcss-load-config').Config} */\nconst config = {\n plugins: [\n nesting,\n stylex({\n include: ['stories/**/*.{ts,tsx}'],\n useCSSLayers: process.env.NODE_ENV !== 'production',\n babelConfig: {\n babelrc: false,\n parserOpts: {\n plugins: ['typescript', 'jsx'],\n },\n plugins: babelConfig.plugins,\n },\n }),\n autoprefixer,\n ],\n};\n\nexport default config;\n" }, { "path": "examples/example-storybook/stories/Button.stories.ts", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n *\n */\nimport { fn } from 'storybook/test';\n\nimport { Button } from './Button';\nimport { Meta, StoryObj } from '@storybook/react-vite';\n\n// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export\nconst meta: Meta = {\n title: 'Example/Button',\n component: Button,\n parameters: {\n // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout\n layout: 'centered',\n },\n // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs\n tags: ['autodocs'],\n // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args\n args: { onClick: fn() },\n argTypes: {\n variant: {\n control: { type: 'select' },\n options: ['primary', 'secondary', 'danger'],\n description: 'The variant of the button',\n },\n size: {\n control: { type: 'select' },\n options: ['small', 'medium', 'large'],\n },\n },\n};\nexport default meta;\n\ntype Story = StoryObj;\n// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args\nexport const Primary: Story = {\n args: {\n variant: 'primary',\n label: 'Primary Button',\n },\n};\n\nexport const Secondary: Story = {\n args: {\n variant: 'secondary',\n label: 'Secondary Button',\n },\n};\n\nexport const Danger: Story = {\n args: {\n variant: 'danger',\n label: 'Danger Button',\n },\n};\n\nexport const Small: Story = {\n args: {\n size: 'small',\n label: 'Small Button',\n },\n};\n\nexport const Medium: Story = {\n args: {\n size: 'medium',\n label: 'Medium Button',\n },\n};\n\nexport const Large: Story = {\n args: {\n size: 'large',\n label: 'Large Button',\n },\n};\n" }, { "path": "examples/example-storybook/stories/Button.tsx", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n *\n */\nimport { FC } from 'react';\nimport * as stylex from '@stylexjs/stylex';\n\nexport const buttonStyles = stylex.create({\n base: {\n fontFamily:\n '-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif',\n fontWeight: 500,\n cursor: 'pointer',\n borderWidth: 0,\n borderStyle: 'none',\n borderColor: 'transparent',\n borderRadius: 6,\n transition: 'all 0.2s ease',\n display: 'inline-flex',\n alignItems: 'center',\n justifyContent: 'center',\n textDecoration: 'none',\n transform: {\n default: 'translateY(0)',\n ':hover': 'translateY(-1px)',\n ':active': 'translateY(0)',\n },\n boxShadow: {\n default: 'none',\n ':hover': '0 4px 8px rgba(0, 0, 0, 0.12)',\n },\n },\n primary: {\n backgroundColor: {\n default: '#0066cc',\n ':hover': '#0052a3',\n },\n color: 'white',\n },\n secondary: {\n backgroundColor: {\n default: '#f5f5f5',\n ':hover': '#e8e8e8',\n },\n color: '#333',\n borderWidth: 1,\n borderStyle: 'solid',\n borderColor: '#ddd',\n },\n danger: {\n backgroundColor: {\n default: '#dc3545',\n ':hover': '#c82333',\n },\n color: 'white',\n },\n small: {\n fontSize: 12,\n padding: '6px 12px',\n minHeight: 28,\n },\n medium: {\n fontSize: 14,\n padding: '8px 16px',\n minHeight: 36,\n },\n large: {\n fontSize: 16,\n padding: '12px 24px',\n minHeight: 44,\n },\n});\n\ntype ButtonProps = {\n /**\n * The size of the button\n * @default 'medium'\n */\n size?: 'small' | 'medium' | 'large';\n /** The variant of the button\n * @default 'primary'\n */\n variant?: 'primary' | 'secondary' | 'danger';\n /**\n * The label of the button\n * @example 'Click me'\n */\n label: string;\n /**\n * Function to call when the button is clicked\n */\n onClick?: () => void;\n};\n\nexport const Button: FC = ({\n size = 'medium',\n variant = 'primary',\n label,\n onClick,\n}) => {\n return (\n \n {label}\n \n );\n};\n" }, { "path": "examples/example-storybook/stories/Card.stories.ts", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n *\n */\nimport type { Meta, StoryObj } from '@storybook/react';\nimport { Card } from './Card';\n\nconst meta: Meta = {\n title: 'Example/Card',\n component: Card,\n argTypes: {\n elevated: { control: 'boolean' },\n title: { control: 'text' },\n content: { control: 'text' },\n },\n parameters: {\n layout: 'centered',\n },\n tags: ['autodocs'],\n};\n\nexport default meta;\ntype Story = StoryObj;\n\nexport const Default: Story = {\n args: {\n title: 'Card Title',\n content: 'This is some example content for the card component.',\n },\n};\n\nexport const Elevated: Story = {\n args: {\n title: 'Elevated Card',\n content: 'This card has an elevated shadow effect.',\n elevated: true,\n },\n};\n" }, { "path": "examples/example-storybook/stories/Card.tsx", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n *\n */\nimport { FC } from 'react';\nimport * as stylex from '@stylexjs/stylex';\n\nexport const cardStyles = stylex.create({\n base: {\n backgroundColor: 'white',\n borderRadius: 8,\n padding: 16,\n boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)',\n borderWidth: 1,\n borderStyle: 'solid',\n borderColor: '#e0e0e0',\n maxWidth: 300,\n },\n title: {\n fontSize: 18,\n fontWeight: 'bold',\n marginBottom: 8,\n color: '#333',\n },\n content: {\n fontSize: 14,\n lineHeight: 1.5,\n color: '#666',\n },\n elevated: {\n boxShadow: '0 4px 8px rgba(0, 0, 0, 0.15)',\n },\n});\n\ntype CardProps = {\n title: string;\n content: string;\n elevated?: boolean;\n};\n\nexport const Card: FC = ({ title, content, elevated = false }) => {\n return (\n
\n

{title}

\n

{content}

\n
\n );\n};\n" }, { "path": "examples/example-storybook/stories/styles.css", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n *\n */\n/* StyleX styles will be injected here by PostCSS */\n@stylex;" }, { "path": "examples/example-storybook/vite-storybook.config.ts", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n *\n */\n/// \nimport react from '@vitejs/plugin-react';\nimport removeTestIdAttribute from 'rollup-plugin-jsx-remove-attributes';\nimport externals from 'rollup-plugin-node-externals';\nimport { defineConfig } from 'vite';\nimport dts from 'vite-plugin-dts';\nimport type { PluginOption, UserConfig } from 'vite';\n\nexport const plugins = [\n react({\n babel: {\n babelrc: true,\n },\n }),\n dts({\n entryRoot: 'stories/',\n }),\n removeTestIdAttribute({\n attributes: ['data-testid'],\n usage: 'vite',\n }),\n] as PluginOption[];\n\nexport const config: UserConfig = {\n plugins: [...plugins, externals()],\n};\n\n// https://vitejs.dev/config/\nexport default defineConfig(() => {\n return {\n ...config,\n };\n});\n" }, { "path": "examples/example-storybook/vitest.config.ts", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n *\n */\nimport path from 'node:path';\nimport { fileURLToPath } from 'node:url';\n\nimport { defineConfig } from 'vitest/config';\n\nimport { storybookTest } from '@storybook/addon-vitest/vitest-plugin';\n\nconst dirname =\n typeof __dirname !== 'undefined'\n ? __dirname\n : path.dirname(fileURLToPath(import.meta.url));\n\n// More info at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon\nexport default defineConfig({\n test: {\n projects: [\n {\n extends: true,\n plugins: [\n // The plugin will run tests for the stories defined in your Storybook config\n // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest\n storybookTest({ configDir: path.join(dirname, '.storybook') }),\n ],\n test: {\n name: 'storybook',\n browser: {\n enabled: true,\n headless: true,\n provider: 'playwright',\n instances: [{ browser: 'chromium' }],\n },\n setupFiles: ['.storybook/vitest.setup.ts'],\n },\n },\n ],\n },\n});\n" }, { "path": "examples/example-vite/README.md", "content": "# Vite Example with StyleX\n\nThis project shows how to wire StyleX into a Vite + React application using `@stylexjs/unplugin`. The plugin compiles StyleX at build time, aggregates the generated CSS, and injects it into the CSS emitted by Vite.\n\n### Prerequisites\n- Node.js 18+\n- [`vite`](https://vite.dev/) and `@vitejs/plugin-react`\n- `@stylexjs/unplugin`\n\n## Install dependencies\n\n```bash\nnpm install\n```\n\n## Vite configuration (`vite.config.mjs`)\n\n```javascript\nimport { defineConfig } from 'vite';\nimport react from '@vitejs/plugin-react';\nimport stylex from '@stylexjs/unplugin';\n\nexport default defineConfig({\n plugins: [stylex.vite(), react()],\n});\n```\n\n- `stylex.vite()` enables StyleX transforms for both dev and build.\n- React Fast Refresh continues to work because the StyleX plugin runs before `@vitejs/plugin-react`.\n\n## CSS entry point (`src/index.css`)\n\nThe app imports `src/index.css` so that Vite always emits a CSS asset. During `npm run example:build`, the StyleX plugin appends the aggregated styles to that file (defaulting to `style.css`/`index.css`).\n\n## Commands\n\n```bash\n# Start the Vite dev server with StyleX transforms\nnpm run example:dev\n\n# Production build with a single StyleX CSS injection\nnpm run example:build\n\n# Preview the production build locally\nnpm run example:serve\n```\n\nRun these scripts from `examples/example-vite`. The output `dist/` folder contains both the JS bundle and the StyleX-enriched CSS.\n" }, { "path": "examples/example-vite/index.html", "content": "\n\n \n \n \n StyleX + Vite\n \n \n
\n \n \n\n" }, { "path": "examples/example-vite/package.json", "content": "{\n \"name\": \"example-vite\",\n \"private\": true,\n \"version\": \"0.18.1\",\n \"description\": \"Example: StyleX with Vite via @stylexjs/unplugin\",\n \"scripts\": {\n \"example:dev\": \"vite\",\n \"example:build\": \"vite build\",\n \"example:serve\": \"vite preview\"\n },\n \"dependencies\": {\n \"react\": \"^19.2.0\",\n \"react-dom\": \"^19.2.0\",\n \"@stylexjs/stylex\": \"0.18.1\",\n \"@stylexjs/shared-ui\": \"0.18.1\"\n },\n \"devDependencies\": {\n \"vite\": \"^7.2.4\",\n \"@stylexjs/unplugin\": \"0.18.1\",\n \"@vitejs/plugin-react\": \"latest\"\n }\n}\n" }, { "path": "examples/example-vite/src/App.jsx", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport * as stylex from '@stylexjs/stylex';\nimport { Button } from '@stylexjs/shared-ui';\nimport { tokens } from '@stylexjs/shared-ui/tokens.stylex';\n\nexport default function App() {\n return (\n
\n

StyleX + Vite + unplugin

\n \n
\n );\n}\n\nconst styles = stylex.create({\n app: {\n minHeight: '100%',\n display: 'grid',\n placeItems: 'center',\n },\n title: {\n color: tokens.primaryColor,\n fontSize: 28,\n fontWeight: 700,\n },\n});\n" }, { "path": "examples/example-vite/src/index.css", "content": "/* Ensure a CSS asset exists for StyleX to append to at build time */\n:root { --bg: #f8f9fb; }\nhtml, body, #root { height: 100%; }\nbody { margin: 0; background: var(--bg); }\n\n" }, { "path": "examples/example-vite/src/main.jsx", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport './index.css';\nimport React from 'react';\nimport { createRoot } from 'react-dom/client';\nimport App from './App.jsx';\n\ncreateRoot(document.getElementById('root')).render();\n" }, { "path": "examples/example-vite/vite.config.mjs", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { defineConfig } from 'vite';\nimport stylex from '@stylexjs/unplugin';\nimport react from '@vitejs/plugin-react';\n\nexport default defineConfig({\n plugins: [stylex.vite(), react()],\n build: {\n // Ensure CSS is extracted into assets (default), we also import src/index.css\n },\n});\n" }, { "path": "examples/example-vite-react/.gitignore", "content": "# Logs\nlogs\n*.log\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\npnpm-debug.log*\nlerna-debug.log*\n\nnode_modules\ndist\ndist-ssr\n*.local\n\n# Editor directories and files\n.vscode/*\n!.vscode/extensions.json\n.idea\n.DS_Store\n*.suo\n*.ntvs*\n*.njsproj\n*.sln\n*.sw?\n" }, { "path": "examples/example-vite-react/README.md", "content": "# React + Vite + StyleX\n\nThis example is a TypeScript-ready React project that runs on Vite while compiling StyleX through `@stylexjs/unplugin`. The plugin extracts StyleX styles at build time and appends them to the CSS emitted by Vite, so the browser only downloads a single stylesheet.\n\n### Prerequisites\n- Node.js 18+\n- [`vite`](https://vite.dev/) with `@vitejs/plugin-react`\n- `typescript` and `tsc -b` for type-checking the build\n- `@stylexjs/unplugin`\n\n## Install dependencies\n\n```bash\nnpm install\n```\n\n## Vite configuration (`vite.config.ts`)\n\n```ts\nimport { defineConfig } from 'vite';\nimport react from '@vitejs/plugin-react';\nimport stylex from '@stylexjs/unplugin';\n\nexport default defineConfig({\n plugins: [stylex.vite(), react()],\n});\n```\n\n- `stylex.vite()` runs before the React plugin to keep Fast Refresh intact.\n- The TypeScript-aware ESLint + compiler setup already points to the correct `tsconfigRootDir`, so no extra configuration is required.\n\n## CSS entry point (`src/index.css`)\n\nThe root component imports `src/index.css`, ensuring that Vite emits a CSS file in both dev and build. During `npm run example:build`, the StyleX plugin appends its aggregated output to that asset (defaulting to `style.css`/`index.css`).\n\n## Commands\n\n```bash\n# HMR-ready dev server with StyleX transforms\nnpm run example:dev\n\n# Type-check + Vite build + StyleX CSS aggregation\nnpm run example:build\n\n# Preview the production build\nnpm run example:serve\n```\n\nUse `npm run lint` for ESLint checks (StyleX lint rules are included). Run all commands from `examples/example-vite-react`.\n" }, { "path": "examples/example-vite-react/eslint.config.js", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport js from '@eslint/js';\nimport globals from 'globals';\nimport reactHooks from 'eslint-plugin-react-hooks';\nimport reactRefresh from 'eslint-plugin-react-refresh';\nimport tseslint from 'typescript-eslint';\nimport { defineConfig, globalIgnores } from 'eslint/config';\nimport { dirname } from 'node:path';\nimport { fileURLToPath } from 'node:url';\n\nconst __filename = fileURLToPath(import.meta.url);\nconst __dirname = dirname(__filename);\n\nexport default defineConfig([\n globalIgnores(['dist']),\n {\n files: ['**/*.{ts,tsx}'],\n extends: [\n js.configs.recommended,\n tseslint.configs.recommended,\n reactHooks.configs['recommended-latest'],\n reactRefresh.configs.vite,\n ],\n languageOptions: {\n ecmaVersion: 2020,\n globals: globals.browser,\n parserOptions: {\n tsconfigRootDir: __dirname,\n },\n },\n },\n]);\n" }, { "path": "examples/example-vite-react/index.html", "content": "\n\n \n \n \n \n example-vite-react\n \n \n
\n \n \n\n" }, { "path": "examples/example-vite-react/package.json", "content": "{\n \"name\": \"example-vite-react\",\n \"private\": true,\n \"version\": \"0.18.1\",\n \"type\": \"module\",\n \"scripts\": {\n \"example:dev\": \"vite\",\n \"example:build\": \"tsc -b && vite build\",\n \"lint\": \"eslint .\",\n \"example:serve\": \"vite preview\"\n },\n \"dependencies\": {\n \"react\": \"^19.2.0\",\n \"react-dom\": \"^19.2.0\",\n \"@stylexjs/stylex\": \"0.18.1\",\n \"@stylexjs/shared-ui\": \"0.18.1\"\n },\n \"devDependencies\": {\n \"@eslint/js\": \"^9.36.0\",\n \"@types/node\": \"^24.6.0\",\n \"@types/react\": \"^19.2.6\",\n \"@types/react-dom\": \"^19.2.3\",\n \"@vitejs/plugin-react\": \"^5.0.4\",\n \"@stylexjs/unplugin\": \"0.18.1\",\n \"babel-plugin-react-compiler\": \"^1.0.0\",\n \"eslint\": \"^9.36.0\",\n \"eslint-plugin-react-hooks\": \"^5.2.0\",\n \"eslint-plugin-react-refresh\": \"^0.4.22\",\n \"globals\": \"^16.4.0\",\n \"typescript\": \"~5.9.3\",\n \"typescript-eslint\": \"^8.45.0\",\n \"vite\": \"^7.1.7\"\n }\n}\n" }, { "path": "examples/example-vite-react/src/App.tsx", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport { useState } from 'react';\nimport reactLogo from './assets/react.svg';\nimport viteLogo from '/vite.svg';\nimport * as stylex from '@stylexjs/stylex';\nimport { Button } from '@stylexjs/shared-ui';\nimport { tokens } from '@stylexjs/shared-ui/tokens.stylex';\n\nexport default function App() {\n const [count, setCount] = useState(0);\n\n return (\n
\n
\n
\n \n \n \n \n \n \n
\n

Vite + React

\n
\n \n setCount((count) => count + 1)}\n >\n count is {count}\n \n

\n Edit src/App.tsx and save to test HMR\n

\n
\n

\n Click on the Vite and React logos to learn more\n

\n
\n
\n );\n}\n\nconst spin = stylex.keyframes({\n from: { transform: 'rotate(0deg)' },\n to: { transform: 'rotate(360deg)' },\n});\n\nconst styles = stylex.create({\n container: {\n minHeight: '100vh',\n display: 'grid',\n placeItems: 'center',\n padding: '2rem',\n textAlign: 'center',\n },\n inner: {\n maxWidth: 1280,\n },\n logo: {\n height: '6em',\n padding: '1.5em',\n willChange: 'filter',\n transitionProperty: 'filter',\n transitionDuration: '300ms',\n filter: { ':hover': 'drop-shadow(0 0 2em #646cffaa)' },\n },\n reactLogo: {\n filter: { ':hover': 'drop-shadow(0 0 2em #61dafbaa)' },\n },\n animated: {\n animationName: { '@media (prefers-reduced-motion: no-preference)': spin },\n animationDuration: {\n '@media (prefers-reduced-motion: no-preference)': '20s',\n },\n animationTimingFunction: {\n '@media (prefers-reduced-motion: no-preference)': 'linear',\n },\n animationIterationCount: {\n '@media (prefers-reduced-motion: no-preference)': 'infinite',\n },\n },\n card: { padding: '2em' },\n readTheDocs: { color: '#888' },\n link: {\n fontWeight: 500,\n color: '#646cff',\n textDecoration: 'none',\n },\n linkHover: { color: { default: null, ':hover': '#535bf2' } },\n h1: { fontSize: '3.2em', lineHeight: '1.1', color: tokens.primaryColor },\n button: {\n borderRadius: 8,\n borderWidth: 1,\n borderStyle: 'solid',\n borderColor: 'transparent',\n padding: '0.6em 1.2em',\n fontSize: '1em',\n fontWeight: 500,\n fontFamily: 'inherit',\n backgroundColor: 'hotpink',\n color: 'white',\n cursor: 'pointer',\n transitionProperty: 'border-color',\n transitionDuration: '250ms',\n },\n buttonInteractive: {\n borderColor: { ':hover': '#646cff' },\n outline: { ':focus-visible': '4px auto -webkit-focus-ring-color' },\n },\n});\n" }, { "path": "examples/example-vite-react/src/index.css", "content": "/* Placeholder to ensure Vite emits a CSS asset for StyleX aggregation. */\n:root { --stylex-injection: 0; }\n" }, { "path": "examples/example-vite-react/src/main.tsx", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport { StrictMode } from 'react';\nimport { createRoot } from 'react-dom/client';\n// Keep a minimal CSS to ensure a CSS asset exists for StyleX injection\nimport './index.css';\nimport App from './App.tsx';\n\ncreateRoot(document.getElementById('root')!).render(\n \n \n ,\n);\n" }, { "path": "examples/example-vite-react/tsconfig.app.json", "content": "{\n \"compilerOptions\": {\n \"tsBuildInfoFile\": \"./node_modules/.tmp/tsconfig.app.tsbuildinfo\",\n \"target\": \"ES2022\",\n \"useDefineForClassFields\": true,\n \"lib\": [\"ES2022\", \"DOM\", \"DOM.Iterable\"],\n \"module\": \"ESNext\",\n \"types\": [\"vite/client\"],\n \"skipLibCheck\": true,\n\n /* Bundler mode */\n \"moduleResolution\": \"bundler\",\n \"allowImportingTsExtensions\": true,\n \"verbatimModuleSyntax\": true,\n \"moduleDetection\": \"force\",\n \"noEmit\": true,\n \"jsx\": \"react-jsx\",\n\n /* Linting */\n \"strict\": true,\n \"noUnusedLocals\": true,\n \"noUnusedParameters\": true,\n \"erasableSyntaxOnly\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"noUncheckedSideEffectImports\": true\n },\n \"include\": [\"src\"]\n}\n" }, { "path": "examples/example-vite-react/tsconfig.json", "content": "{\n \"files\": [],\n \"references\": [\n { \"path\": \"./tsconfig.app.json\" },\n { \"path\": \"./tsconfig.node.json\" }\n ]\n}\n" }, { "path": "examples/example-vite-react/tsconfig.node.json", "content": "{\n \"compilerOptions\": {\n \"tsBuildInfoFile\": \"./node_modules/.tmp/tsconfig.node.tsbuildinfo\",\n \"target\": \"ES2023\",\n \"lib\": [\"ES2023\"],\n \"module\": \"ESNext\",\n \"types\": [\"node\"],\n \"skipLibCheck\": true,\n\n /* Bundler mode */\n \"moduleResolution\": \"bundler\",\n \"allowImportingTsExtensions\": true,\n \"verbatimModuleSyntax\": true,\n \"moduleDetection\": \"force\",\n \"noEmit\": true,\n\n /* Linting */\n \"strict\": true,\n \"noUnusedLocals\": true,\n \"noUnusedParameters\": true,\n \"erasableSyntaxOnly\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"noUncheckedSideEffectImports\": true\n },\n \"include\": [\"vite.config.ts\"]\n}\n" }, { "path": "examples/example-vite-react/vite.config.ts", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport { defineConfig } from 'vite';\nimport react from '@vitejs/plugin-react';\nimport stylex from '@stylexjs/unplugin';\n\n// https://vite.dev/config/\nexport default defineConfig({\n plugins: [stylex.vite(), react({})],\n});\n" }, { "path": "examples/example-vite-rsc/.gitignore", "content": "node_modules\ndist\n" }, { "path": "examples/example-vite-rsc/README.md", "content": "# Vite + React Server Components + StyleX\n\nThis example layers\n[`@vitejs/plugin-rsc`](https://github.com/vitejs/vite-plugin-react/tree/main/packages/plugin-rsc)\non top of React, while `@stylexjs/unplugin` compiles StyleX at build time. Each\nRSC/SSR/client environment receives a single CSS asset with the aggregated\nStyleX output appended.\n\n### Prerequisites\n\n- Node.js 18+\n- Vite plus `@vitejs/plugin-rsc` and `@vitejs/plugin-react`\n- `@stylexjs/unplugin`\n\n## Install dependencies\n\n```bash\nnpm install\n```\n\n## Vite configuration (`vite.config.ts`)\n\n```ts\nimport rsc from '@vitejs/plugin-rsc';\nimport react from '@vitejs/plugin-react';\nimport { defineConfig } from 'vite';\nimport stylex from '@stylexjs/unplugin';\n\nexport default defineConfig({\n plugins: [\n rsc({\n /* RSC environment inputs configured below */\n }),\n react(),\n stylex.vite(),\n ],\n environments: {\n rsc: {\n build: {\n rollupOptions: { input: { index: './src/framework/entry.rsc.tsx' } },\n },\n },\n ssr: {\n build: {\n rollupOptions: { input: { index: './src/framework/entry.ssr.tsx' } },\n },\n },\n client: {\n build: {\n rollupOptions: {\n input: { index: './src/framework/entry.browser.tsx' },\n },\n },\n },\n },\n});\n```\n\n- `stylex.vite()` automatically runs for each environment, so every output\n bundle gets the correct CSS appended.\n- The example keeps the default plugin options, but you can pass `useCSSLayers`,\n custom import sources, etc. if needed.\n\n## CSS entry point (`src/index.css`)\n\nThe framework root imports `src/index.css` so each RSC build emits a CSS asset.\nDuring `npm run example:build`, the StyleX plugin appends the aggregated styles\nfrom both client and server components to that file.\n\n## Dev-only CSS/runtime injection\n\nRSC environments own their HTML shell, so `src/root.tsx` injects the virtual\nStyleX runtime and stylesheet while `import.meta.env.DEV` is true:\n\n```tsx\n{\n import.meta.env.DEV ? (\n <>\n \n rscStream,\n );\n\n // browser root component to (re-)render RSC payload as state\n function BrowserRoot() {\n const [payload, setPayload_] = React.useState(initialPayload);\n\n React.useEffect(() => {\n setPayload = (v) => React.startTransition(() => setPayload_(v));\n }, [setPayload_]);\n\n // re-fetch/render on client side navigation\n React.useEffect(() => {\n return listenNavigation(() => fetchRscPayload());\n }, []);\n\n return payload.root;\n }\n\n // re-fetch RSC and trigger re-rendering\n async function fetchRscPayload() {\n const payload = await createFromFetch(\n fetch(window.location.href),\n );\n setPayload(payload);\n }\n\n // register a handler which will be internally called by React\n // on server function request after hydration.\n setServerCallback(async (id, args) => {\n const url = new URL(window.location.href);\n const temporaryReferences = createTemporaryReferenceSet();\n const payload = await createFromFetch(\n fetch(url, {\n method: 'POST',\n body: await encodeReply(args, { temporaryReferences }),\n headers: {\n 'x-rsc-action': id,\n },\n }),\n { temporaryReferences },\n );\n setPayload(payload);\n return payload.returnValue;\n });\n\n // hydration\n const browserRoot = (\n \n \n \n );\n hydrateRoot(document, browserRoot, {\n formState: initialPayload.formState,\n });\n\n // implement server HMR by triggering re-fetch/render of RSC upon server code change\n if (import.meta.hot) {\n import.meta.hot.on('rsc:update', () => {\n fetchRscPayload();\n });\n }\n}\n\n// a little helper to setup events interception for client side navigation\nfunction listenNavigation(onNavigation: () => void) {\n window.addEventListener('popstate', onNavigation);\n\n const oldPushState = window.history.pushState;\n window.history.pushState = function (...args) {\n const res = oldPushState.apply(this, args);\n onNavigation();\n return res;\n };\n\n const oldReplaceState = window.history.replaceState;\n window.history.replaceState = function (...args) {\n const res = oldReplaceState.apply(this, args);\n onNavigation();\n return res;\n };\n\n function onClick(e: MouseEvent) {\n const link = (e.target as Element).closest('a');\n if (\n link &&\n link instanceof HTMLAnchorElement &&\n link.href &&\n (!link.target || link.target === '_self') &&\n link.origin === location.origin &&\n !link.hasAttribute('download') &&\n e.button === 0 && // left clicks only\n !e.metaKey && // open in new tab (mac)\n !e.ctrlKey && // open in new tab (windows)\n !e.altKey && // download\n !e.shiftKey &&\n !e.defaultPrevented\n ) {\n e.preventDefault();\n history.pushState(null, '', link.href);\n }\n }\n document.addEventListener('click', onClick);\n\n return () => {\n document.removeEventListener('click', onClick);\n window.removeEventListener('popstate', onNavigation);\n window.history.pushState = oldPushState;\n window.history.replaceState = oldReplaceState;\n };\n}\n\nmain();\n" }, { "path": "examples/example-vite-rsc/src/framework/entry.rsc.tsx", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport {\n renderToReadableStream,\n createTemporaryReferenceSet,\n decodeReply,\n loadServerAction,\n decodeAction,\n decodeFormState,\n} from '@vitejs/plugin-rsc/rsc';\nimport type { ReactFormState } from 'react-dom/client';\nimport { Root } from '../root.tsx';\n\n// The schema of payload which is serialized into RSC stream on rsc environment\n// and deserialized on ssr/client environments.\nexport type RscPayload = {\n // this demo renders/serializes/deserizlies entire root html element\n // but this mechanism can be changed to render/fetch different parts of components\n // based on your own route conventions.\n root: React.ReactNode;\n // server action return value of non-progressive enhancement case\n returnValue?: unknown;\n // server action form state (e.g. useActionState) of progressive enhancement case\n formState?: ReactFormState;\n};\n\n// the plugin by default assumes `rsc` entry having default export of request handler.\n// however, how server entries are executed can be customized by registering\n// own server handler e.g. `@cloudflare/vite-plugin`.\nexport default async function handler(request: Request): Promise {\n // handle server function request\n const isAction = request.method === 'POST';\n let returnValue: unknown | undefined;\n let formState: ReactFormState | undefined;\n let temporaryReferences: unknown | undefined;\n if (isAction) {\n // x-rsc-action header exists when action is called via `ReactClient.setServerCallback`.\n const actionId = request.headers.get('x-rsc-action');\n if (actionId) {\n const contentType = request.headers.get('content-type');\n const body = contentType?.startsWith('multipart/form-data')\n ? await request.formData()\n : await request.text();\n temporaryReferences = createTemporaryReferenceSet();\n const args = await decodeReply(body, { temporaryReferences });\n const action = await loadServerAction(actionId);\n returnValue = await action.apply(null, args);\n } else {\n // otherwise server function is called via `
`\n // before hydration (e.g. when javascript is disabled).\n // aka progressive enhancement.\n const formData = await request.formData();\n const decodedAction = await decodeAction(formData);\n const result = await decodedAction();\n formState = await decodeFormState(result, formData);\n }\n }\n\n // serialization from React VDOM tree to RSC stream.\n // we render RSC stream after handling server function request\n // so that new render reflects updated state from server function call\n // to achieve single round trip to mutate and fetch from server.\n const url = new URL(request.url);\n const rscPayload: RscPayload = {\n root: ,\n formState,\n returnValue,\n };\n const rscOptions = { temporaryReferences };\n const rscStream = renderToReadableStream(rscPayload, rscOptions);\n\n // respond RSC stream without HTML rendering based on framework's convention.\n // here we use request header `content-type`.\n // additionally we allow `?__rsc` and `?__html` to easily view payload directly.\n const isRscRequest =\n (!request.headers.get('accept')?.includes('text/html') &&\n !url.searchParams.has('__html')) ||\n url.searchParams.has('__rsc');\n\n if (isRscRequest) {\n return new Response(rscStream, {\n headers: {\n 'content-type': 'text/x-component;charset=utf-8',\n vary: 'accept',\n },\n });\n }\n\n // Delegate to SSR environment for html rendering.\n // The plugin provides `loadModule` helper to allow loading SSR environment entry module\n // in RSC environment. however this can be customized by implementing own runtime communication\n // e.g. `@cloudflare/vite-plugin`'s service binding.\n const ssrEntryModule = await import.meta.viteRsc.loadModule<\n typeof import('./entry.ssr.tsx')\n >('ssr', 'index');\n const htmlStream = await ssrEntryModule.renderHTML(rscStream, {\n formState,\n // allow quick simulation of javascript disabled browser\n debugNojs: url.searchParams.has('__nojs'),\n });\n\n // respond html\n return new Response(htmlStream, {\n headers: {\n 'Content-type': 'text/html',\n vary: 'accept',\n },\n });\n}\n\nif (import.meta.hot) {\n import.meta.hot.accept();\n}\n" }, { "path": "examples/example-vite-rsc/src/framework/entry.ssr.tsx", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport { createFromReadableStream } from '@vitejs/plugin-rsc/ssr';\nimport React from 'react';\nimport type { ReactFormState } from 'react-dom/client';\nimport { renderToReadableStream } from 'react-dom/server.edge';\nimport { injectRSCPayload } from 'rsc-html-stream/server';\nimport type { RscPayload } from './entry.rsc';\n\nexport async function renderHTML(\n rscStream: ReadableStream,\n options: {\n formState?: ReactFormState;\n nonce?: string;\n debugNojs?: boolean;\n },\n) {\n // duplicate one RSC stream into two.\n // - one for SSR (ReactClient.createFromReadableStream below)\n // - another for browser hydration payload by injecting .\n const [rscStream1, rscStream2] = rscStream.tee();\n\n // deserialize RSC stream back to React VDOM\n let payload: Promise | undefined;\n function SsrRoot() {\n // deserialization needs to be kicked off inside ReactDOMServer context\n // for ReactDomServer preinit/preloading to work\n payload ??= createFromReadableStream(rscStream1);\n return {React.use(payload).root};\n }\n\n // Add an empty component in between `SsrRoot` and user `root` to avoid React SSR bugs.\n // SsrRoot (use)\n // => FixSsrThenable\n // => root (which potentially has `lazy` + `use`)\n // https://github.com/facebook/react/issues/33937#issuecomment-3091349011\n function FixSsrThenable(props: React.PropsWithChildren) {\n return props.children;\n }\n\n // render html (traditional SSR)\n const bootstrapScriptContent =\n await import.meta.viteRsc.loadBootstrapScriptContent('index');\n const htmlStream = await renderToReadableStream(, {\n bootstrapScriptContent: options?.debugNojs\n ? undefined\n : bootstrapScriptContent,\n nonce: options?.nonce,\n formState: options?.formState,\n });\n\n let responseStream: ReadableStream = htmlStream;\n if (!options?.debugNojs) {\n // initial RSC stream is injected in HTML stream as \n // using utility made by devongovett https://github.com/devongovett/rsc-html-stream\n responseStream = responseStream.pipeThrough(\n injectRSCPayload(rscStream2, {\n nonce: options?.nonce,\n }),\n );\n }\n\n return responseStream;\n}\n" }, { "path": "examples/example-vite-rsc/src/index.css", "content": ":root { --stylex-injection: 0; }\n" }, { "path": "examples/example-vite-rsc/src/root.tsx", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport './index.css'; // keep minimal to ensure CSS asset exists in build\nimport viteLogo from '/vite.svg';\nimport { DevStyleXInject } from './DevStyleXInject';\nimport { getServerCounter, updateServerCounter } from './action.tsx';\nimport reactLogo from './assets/react.svg';\nimport { ClientCounter } from './client.tsx';\nimport * as stylex from '@stylexjs/stylex';\n\nexport function Root(props: { url: URL }) {\n return (\n \n \n \n \n \n Vite + RSC + StyleX\n \n \n \n \n \n \n );\n}\n\nfunction App(props: { url: URL }) {\n return (\n
\n
\n \n \"Vite\n \n \n \n \n
\n

Vite + RSC

\n
\n \n
\n
\n \n \n \n
\n
Request URL: {props.url?.href}
\n
    \n
  • \n Edit src/client.tsx to test client HMR.\n
    • \n
  • \n Edit src/root.tsx to test server HMR.\n
    • \n
  • \n Visit{' '}\n \n ?__rsc\n {' '}\n to view RSC stream payload.\n
    • \n
  • \n Visit{' '}\n \n ?__nojs\n {' '}\n to test server action without js enabled.\n
    • \n
\n
\n );\n}\n\nconst styles = stylex.create({\n root: {\n margin: 0,\n minHeight: '100vh',\n display: 'grid',\n placeItems: 'center',\n textAlign: 'center',\n },\n logo: {\n height: '6em',\n padding: '1.5em',\n willChange: 'filter',\n transitionProperty: 'filter',\n transitionDuration: '300ms',\n filter: {\n default: null,\n ':hover': 'drop-shadow(0 0 2em #646cffaa)',\n },\n },\n reactLogo: {\n filter: {\n default: null,\n ':hover': 'drop-shadow(0 0 2em #61dafbaa)',\n },\n },\n card: { padding: '2em' },\n readTheDocs: { color: '#888' },\n h1: { fontSize: '3.2em', lineHeight: '1.1' },\n link: { fontWeight: 500, color: '#646cff', textDecoration: 'none' },\n linkHover: { color: { ':hover': '#535bf2' } },\n button: {\n borderRadius: 8,\n borderWidth: 1,\n borderStyle: 'solid',\n borderColor: 'transparent',\n padding: '0.6em 1.2em',\n fontSize: '1em',\n fontWeight: 500,\n fontFamily: 'inherit',\n backgroundColor: 'green',\n color: 'white',\n cursor: 'pointer',\n transitionProperty: 'border-color',\n transitionDuration: '250ms',\n },\n});\n" }, { "path": "examples/example-vite-rsc/tsconfig.json", "content": "{\n \"compilerOptions\": {\n \"erasableSyntaxOnly\": true,\n \"allowImportingTsExtensions\": true,\n \"strict\": true,\n \"noUnusedLocals\": true,\n \"noUnusedParameters\": true,\n \"skipLibCheck\": true,\n \"verbatimModuleSyntax\": true,\n \"noEmit\": true,\n \"moduleResolution\": \"Bundler\",\n \"module\": \"ESNext\",\n \"target\": \"ESNext\",\n \"lib\": [\"ESNext\", \"DOM\", \"DOM.Iterable\"],\n \"types\": [\"vite/client\", \"@vitejs/plugin-rsc/types\"],\n \"jsx\": \"react-jsx\"\n }\n}\n" }, { "path": "examples/example-vite-rsc/vite.config.ts", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport rsc from '@vitejs/plugin-rsc';\nimport react from '@vitejs/plugin-react';\nimport { defineConfig } from 'vite';\nimport stylex from '@stylexjs/unplugin';\n\nexport default defineConfig({\n plugins: [\n rsc({\n // `entries` option is only a shorthand for specifying each `rollupOptions.input` below\n // > entries: { rsc, ssr, client },\n //\n // by default, the plugin setup request handler based on `default export` of `rsc` environment `rollupOptions.input.index`.\n // This can be disabled when setting up own server handler e.g. `@cloudflare/vite-plugin`.\n // > serverHandler: false\n }),\n\n // use any of react plugins https://github.com/vitejs/vite-plugin-react\n // to enable client component HMR\n react(),\n // @ts-expect-error\n stylex.vite({}),\n\n // use https://github.com/antfu-collective/vite-plugin-inspect\n // to understand internal transforms required for RSC.\n // import(\"vite-plugin-inspect\").then(m => m.default()),\n ],\n\n // specify entry point for each environment.\n // (currently the plugin assumes `rollupOptions.input.index` for some features.)\n environments: {\n // `rsc` environment loads modules with `react-server` condition.\n // this environment is responsible for:\n // - RSC stream serialization (React VDOM -> RSC stream)\n // - server functions handling\n rsc: {\n build: {\n rollupOptions: {\n input: {\n index: './src/framework/entry.rsc.tsx',\n },\n },\n },\n },\n\n // `ssr` environment loads modules without `react-server` condition.\n // this environment is responsible for:\n // - RSC stream deserialization (RSC stream -> React VDOM)\n // - traditional SSR (React VDOM -> HTML string/stream)\n ssr: {\n build: {\n rollupOptions: {\n input: {\n index: './src/framework/entry.ssr.tsx',\n },\n },\n },\n },\n\n // client environment is used for hydration and client-side rendering\n // this environment is responsible for:\n // - RSC stream deserialization (RSC stream -> React VDOM)\n // - traditional CSR (React VDOM -> Browser DOM tree mount/hydration)\n // - refetch and re-render RSC\n // - calling server functions\n client: {\n build: {\n rollupOptions: {\n input: {\n index: './src/framework/entry.browser.tsx',\n },\n },\n },\n },\n },\n});\n" }, { "path": "examples/example-waku/.gitignore", "content": "node_modules\ndist\n.env*\n*.tsbuildinfo\n.cache\n.DS_Store\n*.pem\n" }, { "path": "examples/example-waku/README.md", "content": "# Waku + StyleX\n\nThis example shows how to integrate StyleX into a Waku application. The Vite\nlayer powering Waku runs `@stylexjs/unplugin`, which compiles StyleX modules,\naggregates the generated CSS, and appends it to the emitted CSS assets so the\nbrowser only loads a single stylesheet.\n\n### Prerequisites\n\n- Node.js 18+\n- [`waku`](https://waku.gg) CLI/runtime\n- `@stylexjs/stylex` and `@stylexjs/unplugin`\n\n## Install dependencies\n\n```bash\nnpm install\n```\n\n## Waku/Vite configuration (`waku.config.ts`)\n\n```ts\nimport react from '@vitejs/plugin-react';\nimport stylex from '@stylexjs/unplugin';\nimport { defineConfig } from 'waku/config';\n\nexport default defineConfig({\n vite: {\n plugins: [\n stylex.vite({\n useCSSLayers: true,\n devMode: 'css-only',\n devPersistToDisk: true,\n runtimeInjection: false,\n }),\n react({ babel: { plugins: ['babel-plugin-react-compiler'] } }),\n ],\n },\n});\n```\n\n- `devMode: 'css-only'` exposes the `/virtual:stylex.css` endpoint in dev.\n- `devPersistToDisk` lets multiple Waku environments (client/server) share\n StyleX rules while developing.\n\n## CSS entry point (`src/global.css`)\n\n`src/global.css` keeps a minimal reset so Waku always emits at least one CSS\nasset. The StyleX plugin appends its aggregated output to that file during\n`npm run example:build`.\n\n## Dev-only CSS injection & HMR\n\nBecause Waku owns the root HTML shell, the layout mounts a tiny client component\nthat adds the dev stylesheet link _and_ triggers a JS import so Vite registers\nStyleX for HMR:\n\n```tsx\n// src/components/DevStyleXInject.tsx\nfunction DevStyleXInjectImpl() {\n useEffect(() => {\n import('virtual:stylex:css-only');\n }, []);\n return ;\n}\n\nexport const DevStyleXInject = import.meta.env.DEV\n ? DevStyleXInjectImpl\n : () => null;\n```\n\nAdd `` near the top of `src/pages/_layout.tsx`. The `link`\nensures the aggregated StyleX CSS loads in dev, and the `useEffect` import\nkeeps CSS hot reload working even though the root HTML is owned by Waku instead\nof Vite.\n\n## Commands\n\n```bash\n# Start the Waku dev server with live StyleX transforms\nnpm run example:dev\n\n# Production build (all Waku environments + aggregated StyleX CSS)\nnpm run example:build\n\n# Preview the production build\nnpm run example:serve\n```\n\nRun the scripts from `examples/example-waku`. The generated `dist/` output\nalready contains the StyleX CSS bundled into the Waku client assets.\n" }, { "path": "examples/example-waku/package.json", "content": "{\n \"name\": \"example-waku\",\n \"version\": \"0.18.1\",\n \"type\": \"module\",\n \"private\": true,\n \"scripts\": {\n \"example:dev\": \"waku dev\",\n \"example:build\": \"waku build\",\n \"example:serve\": \"waku start\"\n },\n \"dependencies\": {\n \"@stylexjs/stylex\": \"0.18.1\",\n \"react\": \"^19.2.3\",\n \"react-dom\": \"^19.2.3\",\n \"react-server-dom-webpack\": \"19.2.1\",\n \"waku\": \"1.0.0-alpha.0\",\n \"@stylexjs/shared-ui\": \"0.18.1\"\n },\n \"devDependencies\": {\n \"@stylexjs/unplugin\": \"0.18.1\",\n \"@types/react\": \"^19.2.7\",\n \"@types/react-dom\": \"^19.2.3\",\n \"@vitejs/plugin-react\": \"5.1.0\",\n \"babel-plugin-react-compiler\": \"1.0.0\",\n \"typescript\": \"5.9.3\"\n }\n}\n" }, { "path": "examples/example-waku/public/robots.txt", "content": "User-agent: *\nDisallow: /RSC/" }, { "path": "examples/example-waku/src/components/DevStyleXInject.tsx", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n'use client';\n\nimport { useEffect } from 'react';\n\nfunction DevStyleXInjectImpl() {\n useEffect(() => {\n if (import.meta.env.DEV) {\n // @ts-ignore\n import('virtual:stylex:css-only');\n }\n }, []);\n return ;\n}\n\nexport function DevStyleXInject({ cssHref }: { cssHref: string }) {\n return import.meta.env.DEV ? (\n \n ) : (\n \n );\n}\n" }, { "path": "examples/example-waku/src/components/counter.tsx", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport { useState } from 'react';\nimport { Button } from '@stylexjs/shared-ui';\nimport { tokens } from '@stylexjs/shared-ui/tokens.stylex';\n\nexport function Counter() {\n const [count, setCount] = useState(0);\n\n const handleIncrement = () => setCount((c) => c + 1);\n\n return (\n
\n
Count: {count}
\n \n
\n );\n}\n\nconst opacity = (color: string, percentage: number) =>\n `color-mix(in oklab, ${color} ${percentage}%, transparent)`;\n\nconst styles = stylex.create({\n wrapper: {\n marginBlockStart: '1rem',\n marginInline: '-1rem',\n borderWidth: 1,\n borderStyle: 'dashed',\n borderColor: '#60a5fa',\n backgroundColor: opacity(tokens.primaryColor, 5),\n borderRadius: 6,\n padding: '1rem',\n },\n button: {\n marginBlockStart: '0.5rem',\n borderWidth: 0,\n },\n});\n" }, { "path": "examples/example-waku/src/components/footer.tsx", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport * as stylex from '@stylexjs/stylex';\n\nexport const Footer = () => {\n return (\n
\n
\n visit{' '}\n \n waku.gg\n {' '}\n to learn more\n
\n
\n );\n};\n\nconst styles = stylex.create({\n container: {\n padding: '1.5rem',\n position: {\n default: 'static',\n '@media (min-width: 1024px)': 'fixed',\n },\n insetBlockEnd: {\n default: 'auto',\n '@media (min-width: 1024px)': 0,\n },\n insetInlineStart: {\n default: 'auto',\n '@media (min-width: 1024px)': 0,\n },\n },\n link: {\n marginTop: '1rem',\n display: 'inline-block',\n textDecorationLine: 'underline',\n color: '#2563eb',\n },\n});\n" }, { "path": "examples/example-waku/src/components/header.tsx", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport * as stylex from '@stylexjs/stylex';\nimport { Link } from 'waku';\n\nexport const Header = () => {\n return (\n
\n

\n \n Waku starter\n \n

\n
\n );\n};\n\nconst styles = stylex.create({\n container: {\n display: 'flex',\n alignItems: 'center',\n gap: '1rem',\n padding: '1.5rem',\n position: {\n default: null,\n '@media (min-width: 1024px)': 'fixed',\n },\n top: {\n default: null,\n '@media (min-width: 1024px)': 0,\n },\n insetInlineStart: {\n default: null,\n '@media (min-width: 1024px)': 0,\n },\n },\n title: {\n fontSize: '1.125rem',\n fontWeight: 700,\n letterSpacing: '-0.01em',\n margin: 0,\n },\n link: {\n color: '#0f172a',\n textDecorationLine: 'none',\n },\n});\n" }, { "path": "examples/example-waku/src/global.css", "content": "@layer reset {\n :root {\n color: #0f172a;\n font-family: 'Nunito', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',\n sans-serif;\n background-color: #f5f7fb;\n }\n\n body {\n margin: 0;\n min-height: 100vh;\n background-color: #f5f7fb;\n }\n\n #root,\n #app,\n #__waku {\n min-height: 100%;\n }\n}\n\n/* StyleX CSS from @stylexjs/unplugin will be appended here at build time. */\n" }, { "path": "examples/example-waku/src/pages/_layout.tsx", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport '../global.css';\n\nimport * as stylex from '@stylexjs/stylex';\nimport type { ReactNode } from 'react';\nimport { Footer } from '../components/footer';\nimport { Header } from '../components/header';\nimport { DevStyleXInject } from '../components/DevStyleXInject';\n\ntype RootLayoutProps = { children: ReactNode };\n\nexport default async function RootLayout({ children }: RootLayoutProps) {\n const data = await getData();\n\n return (\n
\n \n \n \n \n \n \n
\n
{children}
\n
\n
\n );\n}\n\nconst getData = async () => {\n const data = {\n description: 'An internet website!',\n icon: '/images/favicon.png',\n };\n\n return data;\n};\n\nexport const getConfig = async () => {\n return {\n render: 'static',\n } as const;\n};\n\nconst styles = stylex.create({\n root: {\n minHeight: '100vh',\n backgroundColor: '#f5f7fb',\n color: '#0f172a',\n fontFamily:\n \"'Nunito', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif\",\n },\n main: {\n display: 'flex',\n flexDirection: 'column',\n gap: '1.5rem',\n alignItems: 'center',\n margin: {\n default: '1.5rem',\n '@media (min-width: 1024px)': 0,\n },\n minHeight: {\n default: 'auto',\n '@media (min-width: 1024px)': '100svh',\n },\n justifyContent: {\n default: 'flex-start',\n '@media (min-width: 1024px)': 'center',\n },\n },\n});\n" }, { "path": "examples/example-waku/src/pages/about.tsx", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport * as stylex from '@stylexjs/stylex';\nimport { Link } from 'waku';\n\nexport default async function AboutPage() {\n const data = await getData();\n\n return (\n
\n {data.title}\n

{data.headline}

\n

{data.body}

\n \n Return home\n \n
\n );\n}\n\nconst getData = async () => {\n const data = {\n title: 'About',\n headline: 'About Waku',\n body: 'The minimal React framework',\n };\n\n return data;\n};\n\nexport const getConfig = async () => {\n return {\n render: 'static',\n } as const;\n};\n\nconst styles = stylex.create({\n section: {\n display: 'flex',\n flexDirection: 'column',\n gap: '1rem',\n minHeight: '16rem',\n minWidth: '16rem',\n },\n headline: {\n fontSize: '2.25rem',\n fontWeight: 700,\n letterSpacing: '-0.025em',\n margin: 0,\n },\n body: {\n margin: 0,\n color: '#1f2937',\n fontSize: '1rem',\n },\n link: {\n marginTop: '1rem',\n display: 'inline-block',\n textDecorationLine: 'underline',\n color: '#2563eb',\n },\n});\n" }, { "path": "examples/example-waku/src/pages/index.tsx", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport * as stylex from '@stylexjs/stylex';\nimport { Link } from 'waku';\nimport { Counter } from '../components/counter';\n\nexport default async function HomePage() {\n const data = await getData();\n\n return (\n
\n {data.title}\n

{data.headline}

\n

{data.body}

\n \n \n About page\n \n
\n );\n}\n\nconst getData = async () => {\n const data = {\n title: 'Waku',\n headline: 'Waku',\n body: 'Hello world!',\n };\n\n return data;\n};\n\nexport const getConfig = async () => {\n return {\n render: 'static',\n } as const;\n};\n\nconst styles = stylex.create({\n section: {\n display: 'flex',\n flexDirection: 'column',\n gap: '1rem',\n minHeight: '16rem',\n minWidth: '16rem',\n },\n headline: {\n fontSize: '2.25rem',\n fontWeight: 700,\n letterSpacing: '-0.025em',\n margin: 0,\n },\n body: {\n margin: 0,\n color: '#1f2937',\n fontSize: '1rem',\n },\n link: {\n marginTop: '1rem',\n display: 'inline-block',\n textDecorationLine: 'underline',\n color: '#2563eb',\n },\n});\n" }, { "path": "examples/example-waku/src/pages.gen.ts", "content": "// deno-fmt-ignore-file\n// biome-ignore format: generated types do not need formatting\n// prettier-ignore\nimport type { PathsForPages, GetConfigResponse } from 'waku/router';\n\n// prettier-ignore\nimport type { getConfig as File_About_getConfig } from './pages/about';\n// prettier-ignore\nimport type { getConfig as File_Index_getConfig } from './pages/index';\n\n// prettier-ignore\ntype Page =\n| ({ path: '/about' } & GetConfigResponse)\n| ({ path: '/' } & GetConfigResponse);\n\n// prettier-ignore\ndeclare module 'waku/router' {\n interface RouteConfig {\n paths: PathsForPages;\n }\n interface CreatePagesConfig {\n pages: Page;\n }\n}\n" }, { "path": "examples/example-waku/tsconfig.json", "content": "{\n \"compilerOptions\": {\n \"strict\": true,\n \"target\": \"esnext\",\n \"noEmit\": true,\n \"isolatedModules\": true,\n \"moduleDetection\": \"force\",\n \"downlevelIteration\": true,\n \"esModuleInterop\": true,\n \"module\": \"esnext\",\n \"moduleResolution\": \"bundler\",\n \"skipLibCheck\": true,\n \"noUncheckedIndexedAccess\": true,\n \"exactOptionalPropertyTypes\": true,\n \"jsx\": \"react-jsx\"\n }\n}\n" }, { "path": "examples/example-waku/waku.config.ts", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport react from '@vitejs/plugin-react';\nimport stylex from '@stylexjs/unplugin';\nimport { defineConfig } from 'waku/config';\n\nconst stylexPlugin = stylex.vite({\n debug: process.env.NODE_ENV === 'development',\n enableDebugClassNames: false,\n enableDevClassNames: false,\n useCSSLayers: true,\n devMode: 'css-only',\n devPersistToDisk: true,\n runtimeInjection: false,\n});\n\nexport default defineConfig({\n vite: {\n plugins: [\n // @ts-ignore\n stylexPlugin,\n // @ts-ignore\n react({\n babel: {\n // There is a bug with react compiler at the moment.\n // plugins: ['babel-plugin-react-compiler'],\n },\n }),\n ],\n },\n});\n" }, { "path": "examples/example-webpack/.babelrc.js", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nmodule.exports = {\n presets: ['@babel/preset-env', '@babel/preset-react'],\n};\n" }, { "path": "examples/example-webpack/.eslintrc.js", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nmodule.exports = {\n plugins: ['@stylexjs'],\n rules: {\n '@stylexjs/valid-styles': 'error',\n '@stylexjs/no-unused': 'error',\n '@stylexjs/valid-shorthands': 'warn',\n '@stylexjs/sort-keys': 'warn',\n },\n};\n" }, { "path": "examples/example-webpack/README.md", "content": "# Webpack Example with StyleX\n\nThis example demonstrates how to configure StyleX with Webpack for a React\napplication using `@stylexjs/unplugin`. The unplugin compiles StyleX at build\ntime, aggregates the CSS, and appends it to a CSS asset emitted by Webpack.\n\n### Prerequisites\n\nSet up the following tooling:\n\n- MiniCssExtractPlugin (or another CSS extractor) so Webpack produces a CSS\n asset for StyleX to append to.\n- A CSS file that is imported for every route of your app which contains any\n global styles such as a CSS reset.\n\n## Overview\n\nThis setup includes:\n\n- **Webpack** for bundling plus **MiniCssExtractPlugin** for CSS extraction\n- **@stylexjs/unplugin** for StyleX compilation + CSS aggregation\n- **ESLint** for StyleX-specific linting rules\n\n## Configuration Files\n\n### 1. Package Dependencies (`package.json`)\n\n```bash\n# Install runtime StyleX package\nnpm install @stylexjs/stylex\n\n# Install dev dependencies\nnpm install -D @stylexjs/unplugin @stylexjs/eslint-plugin\n```\n\n### 2. Babel Configuration (`.babelrc.js`)\n\nBabel now only needs to handle React/ES features. StyleX compilation is handled\nby the unplugin.\n\n```javascript\nmodule.exports = {\n presets: ['@babel/preset-env', '@babel/preset-react'],\n};\n```\n\n### 3. Webpack Configuration (`webpack.config.js`)\n\nRegister `@stylexjs/unplugin` so it can transform StyleX imports and append CSS\nto the extracted stylesheet.\n\n```javascript\nconst fs = require('node:fs');\nconst path = require('path');\nconst HtmlWebpackPlugin = require('html-webpack-plugin');\nconst MiniCssExtractPlugin = require('mini-css-extract-plugin');\nconst stylex = require('@stylexjs/unplugin').default;\nconst templatePath = path.resolve(__dirname, 'index.html');\n\nmodule.exports = {\n // ...\n devServer: {\n watchFiles: [templatePath, path.resolve(__dirname, 'src/**/*')],\n },\n module: {\n rules: [\n {\n test: /\\.(js|jsx)$/,\n exclude: /node_modules/,\n use: [{ loader: 'babel-loader' }],\n },\n {\n test: /\\.css$/,\n use: [MiniCssExtractPlugin.loader, 'css-loader'],\n },\n ],\n },\n plugins: [\n new HtmlWebpackPlugin({\n inject: true,\n templateContent: () => fs.readFileSync(templatePath, 'utf-8'),\n }),\n stylex.webpack({\n // Recommended\n useCSSLayers: true,\n }),\n new MiniCssExtractPlugin(),\n ],\n};\n```\n\n### 4. ESLint Configuration (`.eslintrc.js`)\n\nStyleX-specific linting rules:\n\n```javascript\nmodule.exports = {\n plugins: ['@stylexjs'],\n rules: {\n '@stylexjs/valid-styles': 'error',\n '@stylexjs/no-unused': 'error',\n '@stylexjs/valid-shorthands': 'warn',\n '@stylexjs/sort-keys': 'warn',\n },\n};\n```\n\n### 5. CSS entry point (`src/app.css`)\n\nEnsure there is at least one CSS file bundled by Webpack so the unplugin has an\ninjection target. StyleX CSS will be appended to this file automatically, and\nbecause the plugin is configured with `useCSSLayers: true`, the generated output\nrespects CSS layer ordering alongside your existing `@layer` blocks.\n\n## Commands\n\n```bash\n# Development server\nnpm run example:dev\n\n# Production build\nnpm run example:build\n\n# Serve built files\nnpm run example:serve\n```\n" }, { "path": "examples/example-webpack/index.html", "content": "\n\n\n \n \n \n React with webpack\n\n\n
\n\n" }, { "path": "examples/example-webpack/package.json", "content": "{\n \"private\": true,\n \"name\": \"example-webpack\",\n \"version\": \"0.18.1\",\n \"description\": \"Example: StyleX with Webpack via @stylexjs/unplugin\",\n \"main\": \"index.js\",\n \"scripts\": {\n \"example:dev\": \"webpack serve --config ./webpack.config.js --mode development\",\n \"example:serve\": \"serve dist\",\n \"example:build\": \"webpack --mode production\"\n },\n \"license\": \"MIT\",\n \"devDependencies\": {\n \"@babel/core\": \"^7.28.4\",\n \"@babel/preset-env\": \"^7.28.3\",\n \"@babel/preset-react\": \"^7.27.1\",\n \"@pmmmwh/react-refresh-webpack-plugin\": \"^0.6.1\",\n \"@stylexjs/eslint-plugin\": \"0.18.1\",\n \"@stylexjs/unplugin\": \"0.18.1\",\n \"babel-loader\": \"^10.0.0\",\n \"css-loader\": \"^7.1.2\",\n \"file-loader\": \"^6.2.0\",\n \"html-webpack-plugin\": \"^5.6.0\",\n \"mini-css-extract-plugin\": \"^2.9.4\",\n \"react-refresh\": \"^0.18.0\",\n \"serve\": \"^14.2.5\",\n \"webpack\": \"^5.101.3\",\n \"webpack-cli\": \"^6.0.1\",\n \"webpack-dev-server\": \"^5.2.2\"\n },\n \"dependencies\": {\n \"@stylexjs/stylex\": \"0.18.1\",\n \"react\": \"^19.1.1\",\n \"react-dom\": \"^19.1.1\"\n }\n}\n" }, { "path": "examples/example-webpack/src/App.jsx", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport React from 'react';\nimport webpackLogo from './assets/webpack.svg';\nimport stylexLogo from './assets/stylex.svg';\nimport * as stylex from '@stylexjs/stylex';\nimport { colors } from './tokens.stylex';\n\nimport './app.css';\nimport CtaButton from './components/CTAButton';\n\nexport default function App() {\n return (\n
\n
\n \n \n \n \n \n \n
\n

Webpack + StyleX

\n
\n \n Get Started\n \n \n Thinking in StyleX\n \n
\n
\n );\n}\n\nconst styles = stylex.create({\n main: {\n padding: '2rem',\n gap: '2rem',\n alignItems: 'center',\n display: 'flex',\n flexDirection: 'column',\n justifyContent: 'center',\n height: '100vh',\n },\n logoContainer: {\n gap: '2rem',\n display: 'flex',\n },\n logo: {\n transition: 'filter 300ms',\n filter: {\n default: null,\n ':hover': 'drop-shadow(0 0 2em #646cffaa)',\n },\n willChange: 'filter',\n height: '6em',\n },\n header: {\n color: colors.textPrimary,\n fontSize: '3.2em',\n lineHeight: 1.1,\n },\n card: {\n gap: '2rem',\n display: 'flex',\n },\n});\n" }, { "path": "examples/example-webpack/src/app.css", "content": "@layer reset {\n * {\n box-sizing: border-box;\n padding: 0;\n margin: 0;\n }\n\n body {\n background-color: #f5f3f7;\n font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;\n }\n\n @media (prefers-color-scheme: dark) {\n body {\n background-color: #242424;\n }\n }\n}\n\n/* StyleX CSS from @stylexjs/unplugin will be appended to this file at build time. */\n" }, { "path": "examples/example-webpack/src/components/CTAButton.jsx", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport * as React from 'react';\nimport * as stylex from '@stylexjs/stylex';\nimport { colors } from '../tokens.stylex';\n\nexport default function CtaButton({ children, color, to }) {\n return (\n \n {children}\n \n );\n}\nconst styles = stylex.create({\n base: {\n borderRadius: 8,\n paddingBlock: '0.75rem',\n paddingInline: '2rem',\n textDecoration: {\n default: 'none',\n ':hover': 'none',\n },\n alignItems: 'center',\n backgroundColor: colors.fg1,\n boxShadow: {\n default: '0 0 2px rgba(0,0,0,0.35)',\n ':hover': '0 0 10px rgba(0,0,0,0.75)',\n },\n color: colors.bg1,\n display: 'flex',\n fontWeight: 'bold',\n justifyContent: 'center',\n scale: {\n default: '1',\n ':hover': '1.02',\n ':active': '0.98',\n },\n transitionDuration: {\n default: '0.2s',\n ':active': '0.1s',\n },\n transitionProperty: 'scale, boxShadow',\n whiteSpace: 'nowrap',\n },\n pink: {\n backgroundColor: `hsl(${colors.pinkH}, ${colors.pinkS}, ${colors.pinkL})`,\n boxShadow: {\n default: `0 0 2px hsla(${colors.pinkH}, ${colors.pinkS}, ${colors.pinkL}, 0.35)`,\n ':hover': `0 0 10px hsla(${colors.pinkH}, ${colors.pinkS}, ${colors.pinkL}, 0.75)`,\n },\n color: colors.white,\n },\n blue: {\n backgroundColor: `hsl(${colors.cyanH}, ${colors.cyanS}, ${colors.cyanL})`,\n boxShadow: {\n default: `0 0 2px hsla(${colors.cyanH}, ${colors.cyanS}, ${colors.cyanL}, 0.35)`,\n ':hover': `0 0 10px hsla(${colors.cyanH}, ${colors.cyanS}, ${colors.cyanL}, 0.75)`,\n },\n color: colors.white,\n },\n});\n" }, { "path": "examples/example-webpack/src/index.js", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport React from 'react';\nimport { createRoot } from 'react-dom/client';\nimport App from './App';\n\nconst domNode = document.getElementById('app');\nconst root = createRoot(domNode);\nroot.render();\n" }, { "path": "examples/example-webpack/src/tokens.stylex.js", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport * as stylex from '@stylexjs/stylex';\n\nconst DARK = '@media (prefers-color-scheme: dark)';\n\nexport const colors = stylex.defineVars({\n textPrimary: { default: '#000', [DARK]: '#fff' },\n white: { default: '#fff', [DARK]: '#fff' },\n fg1: { default: 'hsl(0, 0%, 0%)', [DARK]: 'hsl(0, 0%, 100%)' },\n bg1: { default: 'hsl(276, 17%, 96%)', [DARK]: 'hsl(276, 17%, 96%)' },\n pinkH: 295,\n pinkS: '62%',\n pinkL: '60%',\n cyanH: 202,\n cyanS: '100%',\n cyanL: '50%',\n});\n" }, { "path": "examples/example-webpack/webpack.config.js", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n *\n */\nconst fs = require('node:fs');\nconst path = require('path');\nconst templatePath = path.resolve(__dirname, 'index.html');\nconst templateContent = () => fs.readFileSync(templatePath, 'utf-8');\nconst HtmlWebpackPlugin = require('html-webpack-plugin');\nconst ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');\nconst MiniCssExtractPlugin = require('mini-css-extract-plugin');\nconst stylex = require('@stylexjs/unplugin').default;\n\nconst config = (env, argv) => {\n const isHot = argv.hot;\n return {\n entry: {\n main: path.resolve(__dirname, 'src/index.js'),\n },\n output: {\n path: path.resolve(__dirname, './dist'),\n },\n devServer: {\n static: {\n directory: path.resolve(__dirname, 'dist'),\n },\n watchFiles: [templatePath, path.resolve(__dirname, 'src/**/*')],\n },\n module: {\n rules: [\n {\n test: /\\.(js|jsx)$/,\n exclude: /node_modules/,\n use: [\n {\n loader: require.resolve('babel-loader'),\n options: {\n plugins: [\n isHot && require.resolve('react-refresh/babel'),\n ].filter(Boolean),\n },\n },\n ],\n },\n {\n test: /\\.(css)$/,\n use: [MiniCssExtractPlugin.loader, 'css-loader'],\n },\n {\n test: /\\.svg$/i,\n issuer: /\\.[jt]sx?$/,\n use: ['file-loader'],\n },\n ],\n },\n resolve: {\n extensions: ['*', '.js', '.jsx'],\n },\n plugins: [\n new HtmlWebpackPlugin({\n inject: true,\n templateContent,\n }),\n stylex.webpack({\n useCSSLayers: true,\n }),\n new MiniCssExtractPlugin(),\n isHot && new ReactRefreshWebpackPlugin(),\n ].filter(Boolean),\n cache: true,\n };\n};\n\nmodule.exports = config;\n" }, { "path": "flow-typed/babel-plugins.js", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n * @flow strict\n */\n\n/* eslint-disable ft-flow/no-types-missing-file-annotation */\n/* eslint-disable no-unused-vars */\n\ndeclare module '@babel/plugin-syntax-typescript' {\n declare module.exports: any;\n}\n\ndeclare module '@babel/plugin-transform-typescript' {\n declare module.exports: any;\n}\n\ndeclare module '@babel/plugin-syntax-flow' {\n declare module.exports: any;\n}\n\ndeclare module '@babel/plugin-syntax-jsx' {\n declare module.exports: any;\n}\n\ndeclare module 'babel-plugin-syntax-hermes-parser' {\n declare module.exports: any;\n}\n" }, { "path": "flow-typed/environments/bom.js", "content": "/* BOM */\n\ndeclare class Screen {\n +availHeight: number;\n +availWidth: number;\n +availLeft: number;\n +availTop: number;\n +top: number;\n +left: number;\n +colorDepth: number;\n +pixelDepth: number;\n +width: number;\n +height: number;\n +orientation?: {\n lock(): Promise,\n unlock(): void,\n angle: number,\n onchange: () => mixed,\n type:\n | 'portrait-primary'\n | 'portrait-secondary'\n | 'landscape-primary'\n | 'landscape-secondary',\n ...\n };\n // deprecated\n mozLockOrientation?: (orientation: string | Array) => boolean;\n mozUnlockOrientation?: () => void;\n mozOrientation?: string;\n onmozorientationchange?: (...args: any[]) => mixed;\n}\n\ndeclare var screen: Screen;\n\ndeclare interface Crypto {\n // Not using $TypedArray as that would include Float32Array and Float64Array which are not accepted\n getRandomValues: <\n T:\n | Int8Array\n | Uint8Array\n | Uint8ClampedArray\n | Int16Array\n | Uint16Array\n | Int32Array\n | Uint32Array\n | BigInt64Array\n | BigUint64Array,\n >(\n typedArray: T,\n ) => T;\n randomUUID: () => string;\n}\ndeclare var crypto: Crypto;\n\ndeclare var window: any;\n\ntype GamepadButton = {\n pressed: boolean,\n value: number,\n ...\n};\ntype GamepadHapticActuator = {\n type: 'vibration',\n pulse(value: number, duration: number): Promise,\n ...\n};\ntype GamepadPose = {\n angularAcceleration: null | Float32Array,\n angularVelocity: null | Float32Array,\n hasOrientation: boolean,\n hasPosition: boolean,\n linearAcceleration: null | Float32Array,\n linearVelocity: null | Float32Array,\n orientation: null | Float32Array,\n position: null | Float32Array,\n ...\n};\ntype Gamepad = {\n axes: number[],\n buttons: GamepadButton[],\n connected: boolean,\n displayId?: number,\n hapticActuators?: GamepadHapticActuator[],\n hand?: '' | 'left' | 'right',\n id: string,\n index: number,\n mapping: string,\n pose?: null | GamepadPose,\n timestamp: number,\n ...\n};\n\n// deprecated\ntype BatteryManager = {\n +charging: boolean,\n +chargingTime: number,\n +dischargingTime: number,\n +level: number,\n onchargingchange: ?(event: any) => mixed,\n onchargingtimechange: ?(event: any) => mixed,\n ondischargingtimechange: ?(event: any) => mixed,\n onlevelchange: ?(event: any) => mixed,\n ...\n};\n\n// https://wicg.github.io/web-share\ntype ShareData = {\n title?: string,\n text?: string,\n url?: string,\n ...\n};\n\ntype PermissionName =\n | 'geolocation'\n | 'notifications'\n | 'push'\n | 'midi'\n | 'camera'\n | 'microphone'\n | 'speaker'\n | 'usb'\n | 'device-info'\n | 'background-sync'\n | 'bluetooth'\n | 'persistent-storage'\n | 'ambient-light-sensor'\n | 'accelerometer'\n | 'gyroscope'\n | 'magnetometer'\n | 'clipboard-read'\n | 'clipboard-write';\n\ntype PermissionState = 'granted' | 'denied' | 'prompt';\n\ntype PermissionDescriptor = {|\n name: PermissionName,\n|};\n\ntype DevicePermissionDescriptor = {|\n deviceId?: string,\n name: 'camera' | 'microphone' | 'speaker',\n|};\n\ntype MidiPermissionDescriptor = {|\n name: 'midi',\n sysex?: boolean,\n|};\n\ntype PushPermissionDescriptor = {|\n name: 'push',\n userVisibleOnly?: boolean,\n|};\n\ntype ClipboardPermissionDescriptor = {|\n name: 'clipboard-read' | 'clipboard-write',\n allowWithoutGesture: boolean,\n|};\n\ntype USBPermissionDescriptor = {|\n name: 'usb',\n filters: Array,\n exclusionFilters: Array,\n|};\n\ntype FileSystemHandlePermissionDescriptor = {|\n mode: 'read' | 'readwrite',\n|};\n\ndeclare class PermissionStatus extends EventTarget {\n onchange: ?(event: any) => mixed;\n +state: PermissionState;\n}\n\ndeclare class Permissions {\n query(\n permissionDesc:\n | DevicePermissionDescriptor\n | MidiPermissionDescriptor\n | PushPermissionDescriptor\n | ClipboardPermissionDescriptor\n | USBPermissionDescriptor\n | PermissionDescriptor,\n ): Promise;\n}\n\ntype MIDIPortType = 'input' | 'output';\ntype MIDIPortDeviceState = 'connected' | 'disconnected';\ntype MIDIPortConnectionState = 'open' | 'closed' | 'pending';\n\ntype MIDIOptions = {|\n sysex: boolean,\n software: boolean,\n|};\n\ntype MIDIMessageEvent$Init = Event$Init & {\n data: Uint8Array,\n ...\n};\n\ndeclare class MIDIMessageEvent extends Event {\n constructor(type: string, eventInitDict: MIDIMessageEvent$Init): void;\n +data: Uint8Array;\n}\n\ntype MIDIConnectionEvent$Init = Event$Init & {\n port: MIDIPort,\n ...\n};\n\ndeclare class MIDIConnectionEvent extends Event {\n constructor(type: string, eventInitDict: MIDIConnectionEvent$Init): void;\n +port: MIDIPort;\n}\n\ndeclare class MIDIPort extends EventTarget {\n +id: string;\n +manufacturer?: string;\n +name?: string;\n +type: MIDIPortType;\n +version?: string;\n +state: MIDIPortDeviceState;\n +connection: MIDIPortConnectionState;\n onstatechange: ?(ev: MIDIConnectionEvent) => mixed;\n open(): Promise;\n close(): Promise;\n}\n\ndeclare class MIDIInput extends MIDIPort {\n onmidimessage: ?(ev: MIDIMessageEvent) => mixed;\n}\n\ndeclare class MIDIOutput extends MIDIPort {\n send(data: Iterable, timestamp?: number): void;\n clear(): void;\n}\n\ndeclare class MIDIInputMap extends $ReadOnlyMap {}\n\ndeclare class MIDIOutputMap extends $ReadOnlyMap {}\n\ndeclare class MIDIAccess extends EventTarget {\n +inputs: MIDIInputMap;\n +outputs: MIDIOutputMap;\n +sysexEnabled: boolean;\n onstatechange: ?(ev: MIDIConnectionEvent) => mixed;\n}\n\ndeclare class NavigatorID {\n appName: 'Netscape';\n appCodeName: 'Mozilla';\n product: 'Gecko';\n appVersion: string;\n platform: string;\n userAgent: string;\n}\n\ndeclare class NavigatorLanguage {\n +language: string;\n +languages: $ReadOnlyArray;\n}\n\ndeclare class NavigatorContentUtils {\n registerContentHandler(mimeType: string, uri: string, title: string): void;\n registerProtocolHandler(protocol: string, uri: string, title: string): void;\n}\n\ndeclare class NavigatorCookies {\n +cookieEnabled: boolean;\n}\n\ndeclare class NavigatorPlugins {\n +plugins: PluginArray;\n +mimeTypes: MimeTypeArray;\n javaEnabled(): boolean;\n}\n\ndeclare class NavigatorOnLine {\n +onLine: boolean;\n}\n\ndeclare class NavigatorConcurrentHardware {\n +hardwareConcurrency: number;\n}\n\ndeclare class NavigatorStorage {\n storage?: StorageManager;\n}\n\ndeclare class StorageManager {\n persist: () => Promise;\n persisted: () => Promise;\n estimate?: () => Promise;\n getDirectory: () => Promise;\n}\n\ntype StorageManagerRegisteredEndpoint =\n | 'caches'\n | 'indexedDB'\n | 'localStorage'\n | 'serviceWorkerRegistrations'\n | 'sessionStorage';\n\ntype StorageManagerUsageDetails = {\n [StorageManagerRegisteredEndpoint]: number,\n};\n\ndeclare class StorageEstimate {\n constructor(\n usage: number,\n quota: number,\n usageDetails?: StorageManagerUsageDetails,\n ): void;\n +usage: number;\n +quota: number;\n\n // Not a part of the standard\n +usageDetails?: StorageManagerUsageDetails;\n}\n\ndeclare class Navigator\n mixins\n NavigatorID,\n NavigatorLanguage,\n NavigatorOnLine,\n NavigatorContentUtils,\n NavigatorCookies,\n NavigatorPlugins,\n NavigatorConcurrentHardware,\n NavigatorStorage\n{\n productSub: '20030107' | '20100101';\n vendor: '' | 'Google Inc.' | 'Apple Computer, Inc';\n vendorSub: '';\n\n activeVRDisplays?: VRDisplay[];\n appCodeName: 'Mozilla';\n buildID: string;\n doNotTrack: string | null;\n geolocation: Geolocation;\n mediaDevices?: MediaDevices;\n usb?: USB;\n maxTouchPoints: number;\n permissions: Permissions;\n // serviceWorker?: ServiceWorkerContainer;\n getGamepads?: () => Array;\n webkitGetGamepads?: Function;\n mozGetGamepads?: Function;\n mozGamepads?: any;\n gamepads?: any;\n webkitGamepads?: any;\n getVRDisplays?: () => Promise;\n registerContentHandler(mimeType: string, uri: string, title: string): void;\n registerProtocolHandler(protocol: string, uri: string, title: string): void;\n requestMIDIAccess?: (options?: MIDIOptions) => Promise;\n requestMediaKeySystemAccess?: (\n keySystem: string,\n supportedConfigurations: any[],\n ) => Promise;\n sendBeacon?: (url: string, data?: BodyInit) => boolean;\n vibrate?: (pattern: number | number[]) => boolean;\n mozVibrate?: (pattern: number | number[]) => boolean;\n webkitVibrate?: (pattern: number | number[]) => boolean;\n canShare?: (shareData?: ShareData) => boolean;\n share?: (shareData: ShareData) => Promise;\n clipboard: Clipboard;\n credentials?: CredMgmtCredentialsContainer;\n globalPrivacyControl?: boolean;\n\n // deprecated\n getBattery?: () => Promise;\n mozGetBattery?: () => Promise;\n\n // deprecated\n getUserMedia?: Function;\n webkitGetUserMedia?: Function;\n mozGetUserMedia?: Function;\n msGetUserMedia?: Function;\n\n // Gecko\n taintEnabled?: () => false;\n oscpu: string;\n}\n\ndeclare class Clipboard extends EventTarget {\n read(): Promise;\n readText(): Promise;\n write(data: $ReadOnlyArray): Promise;\n writeText(data: string): Promise;\n}\n\ndeclare var navigator: Navigator;\n\ndeclare class MimeType {\n type: string;\n description: string;\n suffixes: string;\n enabledPlugin: Plugin;\n}\n\ndeclare class MimeTypeArray {\n length: number;\n item(index: number): MimeType;\n namedItem(name: string): MimeType;\n [key: number | string]: MimeType;\n}\n\ndeclare class Plugin {\n description: string;\n filename: string;\n name: string;\n version?: string; // Gecko only\n length: number;\n item(index: number): MimeType;\n namedItem(name: string): MimeType;\n [key: number | string]: MimeType;\n}\n\ndeclare class PluginArray {\n length: number;\n item(index: number): Plugin;\n namedItem(name: string): Plugin;\n refresh(): void;\n [key: number | string]: Plugin;\n}\n\n// https://www.w3.org/TR/hr-time-2/#dom-domhighrestimestamp\n// https://developer.mozilla.org/en-US/docs/Web/API/DOMHighResTimeStamp\ndeclare type DOMHighResTimeStamp = number;\n\n// https://www.w3.org/TR/navigation-timing-2/\ndeclare class PerformanceTiming {\n connectEnd: number;\n connectStart: number;\n domainLookupEnd: number;\n domainLookupStart: number;\n domComplete: number;\n domContentLoadedEventEnd: number;\n domContentLoadedEventStart: number;\n domInteractive: number;\n domLoading: number;\n fetchStart: number;\n loadEventEnd: number;\n loadEventStart: number;\n navigationStart: number;\n redirectEnd: number;\n redirectStart: number;\n requestStart: number;\n responseEnd: number;\n responseStart: number;\n secureConnectionStart: number;\n unloadEventEnd: number;\n unloadEventStart: number;\n}\n\ndeclare class PerformanceNavigation {\n TYPE_NAVIGATE: 0;\n TYPE_RELOAD: 1;\n TYPE_BACK_FORWARD: 2;\n TYPE_RESERVED: 255;\n\n type: 0 | 1 | 2 | 255;\n redirectCount: number;\n}\n\ntype PerformanceEntryFilterOptions = {\n name: string,\n entryType: string,\n initiatorType: string,\n ...\n};\n\n// https://www.w3.org/TR/performance-timeline-2/\ndeclare class PerformanceEntry {\n name: string;\n entryType: string;\n startTime: DOMHighResTimeStamp;\n duration: DOMHighResTimeStamp;\n toJSON(): string;\n}\n\n// https://w3c.github.io/server-timing/#the-performanceservertiming-interface\ndeclare class PerformanceServerTiming {\n description: string;\n duration: DOMHighResTimeStamp;\n name: string;\n toJSON(): string;\n}\n\n// https://www.w3.org/TR/resource-timing-2/#sec-performanceresourcetiming\n// https://w3c.github.io/server-timing/#extension-to-the-performanceresourcetiming-interface\ndeclare class PerformanceResourceTiming extends PerformanceEntry {\n initiatorType: string;\n nextHopProtocol: string;\n workerStart: number;\n redirectStart: number;\n redirectEnd: number;\n fetchStart: number;\n domainLookupStart: number;\n domainLookupEnd: number;\n connectStart: number;\n connectEnd: number;\n secureConnectionStart: number;\n requestStart: number;\n responseStart: number;\n responseEnd: number;\n transferSize: string;\n encodedBodySize: number;\n decodedBodySize: number;\n serverTiming: Array;\n}\n\n// https://w3c.github.io/event-timing/#sec-performance-event-timing\ndeclare class PerformanceEventTiming extends PerformanceEntry {\n processingStart: number;\n processingEnd: number;\n cancelable: boolean;\n target: ?Node;\n interactionId: number;\n}\n\n// https://w3c.github.io/longtasks/#taskattributiontiming\ndeclare class TaskAttributionTiming extends PerformanceEntry {\n containerType: string;\n containerSrc: string;\n containerId: string;\n containerName: string;\n}\n\n// https://w3c.github.io/longtasks/#sec-PerformanceLongTaskTiming\ndeclare class PerformanceLongTaskTiming extends PerformanceEntry {\n attribution: $ReadOnlyArray;\n}\n\n// https://www.w3.org/TR/navigation-timing-2/\ndeclare class PerformanceNavigationTiming extends PerformanceResourceTiming {\n unloadEventStart: number;\n unloadEventEnd: number;\n domInteractive: number;\n domContentLoadedEventStart: number;\n domContentLoadedEventEnd: number;\n domComplete: number;\n loadEventStart: number;\n loadEventEnd: number;\n type: 'navigate' | 'reload' | 'back_forward' | 'prerender';\n redirectCount: number;\n}\n\n// https://www.w3.org/TR/user-timing/#extensions-performance-interface\ndeclare type PerformanceMarkOptions = {|\n detail?: mixed,\n startTime?: number,\n|};\n\ndeclare type PerformanceMeasureOptions = {|\n detail?: mixed,\n start?: number | string,\n end?: number | string,\n duration?: number,\n|};\n\ntype EventCountsForEachCallbackType =\n | (() => void)\n | ((value: number) => void)\n | ((value: number, key: string) => void)\n | ((value: number, key: string, map: Map) => void);\n\n// https://www.w3.org/TR/event-timing/#eventcounts\ndeclare interface EventCounts {\n size: number;\n\n entries(): Iterator<[string, number]>;\n forEach(callback: EventCountsForEachCallbackType): void;\n get(key: string): ?number;\n has(key: string): boolean;\n keys(): Iterator;\n values(): Iterator;\n}\n\ndeclare class Performance {\n eventCounts: EventCounts;\n\n // deprecated\n navigation: PerformanceNavigation;\n timing: PerformanceTiming;\n\n onresourcetimingbufferfull: (ev: any) => mixed;\n clearMarks(name?: string): void;\n clearMeasures(name?: string): void;\n clearResourceTimings(): void;\n getEntries(options?: PerformanceEntryFilterOptions): Array;\n getEntriesByName(name: string, type?: string): Array;\n getEntriesByType(type: string): Array;\n mark(name: string, options?: PerformanceMarkOptions): void;\n measure(\n name: string,\n startMarkOrOptions?: string | PerformanceMeasureOptions,\n endMark?: string,\n ): void;\n now(): DOMHighResTimeStamp;\n setResourceTimingBufferSize(maxSize: number): void;\n toJSON(): string;\n}\n\ndeclare var performance: Performance;\n\ntype PerformanceEntryList = PerformanceEntry[];\n\ndeclare interface PerformanceObserverEntryList {\n getEntries(): PerformanceEntryList;\n getEntriesByType(type: string): PerformanceEntryList;\n getEntriesByName(name: string, type: ?string): PerformanceEntryList;\n}\n\ntype PerformanceObserverInit = {\n entryTypes?: string[],\n type?: string,\n buffered?: boolean,\n ...\n};\n\ndeclare class PerformanceObserver {\n constructor(\n callback: (\n entries: PerformanceObserverEntryList,\n observer: PerformanceObserver,\n ) => mixed,\n ): void;\n\n observe(options: ?PerformanceObserverInit): void;\n disconnect(): void;\n takeRecords(): PerformanceEntryList;\n\n static supportedEntryTypes: string[];\n}\n\ndeclare class History {\n length: number;\n scrollRestoration: 'auto' | 'manual';\n state: any;\n back(): void;\n forward(): void;\n go(delta?: number): void;\n pushState(statedata: any, title: string, url?: string): void;\n replaceState(statedata: any, title: string, url?: string): void;\n}\n\ndeclare var history: History;\n\ndeclare class Location {\n ancestorOrigins: string[];\n hash: string;\n host: string;\n hostname: string;\n href: string;\n origin: string;\n pathname: string;\n port: string;\n protocol: string;\n search: string;\n assign(url: string): void;\n reload(flag?: boolean): void;\n replace(url: string): void;\n toString(): string;\n}\n\ndeclare var location: Location;\n\n///////////////////////////////////////////////////////////////////////////////\n\ndeclare class DOMParser {\n parseFromString(source: string | TrustedHTML, mimeType: string): Document;\n}\n\ntype FormDataEntryValue = string | File;\n\ndeclare class FormData {\n constructor(form?: HTMLFormElement, submitter?: HTMLElement | null): void;\n\n has(name: string): boolean;\n get(name: string): ?FormDataEntryValue;\n getAll(name: string): Array;\n\n set(name: string, value: string): void;\n set(name: string, value: Blob, filename?: string): void;\n set(name: string, value: File, filename?: string): void;\n\n append(name: string, value: string): void;\n append(name: string, value: Blob, filename?: string): void;\n append(name: string, value: File, filename?: string): void;\n\n delete(name: string): void;\n\n keys(): Iterator;\n values(): Iterator;\n entries(): Iterator<[string, FormDataEntryValue]>;\n}\n\ndeclare type IntersectionObserverEntry = {\n // boundingClientRect: DOMRectReadOnly,\n intersectionRatio: number,\n // intersectionRect: DOMRectReadOnly,\n isIntersecting: boolean,\n // rootBounds: DOMRectReadOnly,\n target: Element,\n time: DOMHighResTimeStamp,\n ...\n};\n\ndeclare type IntersectionObserverCallback = (\n entries: Array,\n observer: IntersectionObserver,\n) => mixed;\n\ndeclare type IntersectionObserverOptions = {\n root?: Node | null,\n rootMargin?: string,\n threshold?: number | Array,\n ...\n};\n\ndeclare class IntersectionObserver {\n constructor(\n callback: IntersectionObserverCallback,\n options?: IntersectionObserverOptions,\n ): void;\n root: Element | null;\n rootMargin: string;\n scrollMargin: string;\n thresholds: number[];\n observe(target: Element): void;\n unobserve(target: Element): void;\n takeRecords(): Array;\n disconnect(): void;\n}\n\ndeclare interface ResizeObserverSize {\n +inlineSize: number;\n +blockSize: number;\n}\n\ndeclare interface ResizeObserverEntry {\n /**\n * The Element whose size has changed.\n */\n +target: Element;\n /**\n * Element's content rect when ResizeObserverCallback is invoked.\n *\n * Legacy, may be deprecated in the future.\n */\n // +contentRect: DOMRectReadOnly;\n /**\n * An array containing the Element's border box size when\n * ResizeObserverCallback is invoked.\n */\n +borderBoxSize: $ReadOnlyArray;\n /**\n * An array containing the Element's content rect size when\n * ResizeObserverCallback is invoked.\n */\n +contentBoxSize: $ReadOnlyArray;\n /**\n * An array containing the Element's content rect size in integral device\n * pixels when ResizeObserverCallback is invoked.\n *\n * Not implemented in Firefox or Safari as of July 2021\n */\n +devicePixelContentBoxSize?: $ReadOnlyArray | void;\n}\n\n/**\n * ResizeObserver can observe different kinds of CSS sizes:\n * - border-box : size of box border area as defined in CSS2.\n * - content-box : size of content area as defined in CSS2.\n * - device-pixel-content-box : size of content area as defined in CSS2, in device\n * pixels, before applying any CSS transforms on the element or its ancestors.\n * This size must contain integer values.\n */\ntype ResizeObserverBoxOptions =\n | 'border-box'\n | 'content-box'\n | 'device-pixel-content-box';\n\ndeclare type ResizeObserverOptions = {\n box?: ResizeObserverBoxOptions,\n ...\n};\n\n/**\n * The ResizeObserver interface is used to observe changes to Element's size.\n */\ndeclare class ResizeObserver {\n constructor(\n callback: (\n entries: ResizeObserverEntry[],\n observer: ResizeObserver,\n ) => mixed,\n ): void;\n /**\n * Adds target to the list of observed elements.\n */\n observe(target: Element, options?: ResizeObserverOptions): void;\n /**\n * Removes target from the list of observed elements.\n */\n unobserve(target: Element): void;\n disconnect(): void;\n}\n\ndeclare class CloseEvent extends Event {\n code: number;\n reason: string;\n wasClean: boolean;\n}\n\ndeclare class WebSocket extends EventTarget {\n static CONNECTING: 0;\n static OPEN: 1;\n static CLOSING: 2;\n static CLOSED: 3;\n constructor(url: string, protocols?: string | Array): void;\n protocol: string;\n readyState: number;\n bufferedAmount: number;\n extensions: string;\n onopen: (ev: any) => mixed;\n onmessage: (ev: MessageEvent) => mixed;\n onclose: (ev: CloseEvent) => mixed;\n onerror: (ev: any) => mixed;\n binaryType: 'blob' | 'arraybuffer';\n url: string;\n close(code?: number, reason?: string): void;\n send(data: string): void;\n send(data: Blob): void;\n send(data: ArrayBuffer): void;\n send(data: $ArrayBufferView): void;\n CONNECTING: 0;\n OPEN: 1;\n CLOSING: 2;\n CLOSED: 3;\n}\n\ntype WorkerOptions = {\n type?: any,\n credentials?: CredentialsType,\n name?: string,\n ...\n};\n\ndeclare class Worker extends EventTarget {\n constructor(\n stringUrl: string | TrustedScriptURL,\n workerOptions?: WorkerOptions,\n ): void;\n onerror: null | ((ev: any) => mixed);\n onmessage: null | ((ev: MessageEvent) => mixed);\n onmessageerror: null | ((ev: MessageEvent) => mixed);\n postMessage(message: any, ports?: any): void;\n terminate(): void;\n}\n\ndeclare class SharedWorker extends EventTarget {\n constructor(stringUrl: string | TrustedScriptURL, name?: string): void;\n constructor(\n stringUrl: string | TrustedScriptURL,\n workerOptions?: WorkerOptions,\n ): void;\n port: MessagePort;\n onerror: (ev: any) => mixed;\n}\n\ndeclare function importScripts(...urls: Array): void;\n\ndeclare class WorkerGlobalScope extends EventTarget {\n self: this;\n location: WorkerLocation;\n navigator: WorkerNavigator;\n close(): void;\n importScripts(...urls: Array): void;\n onerror: (ev: any) => mixed;\n onlanguagechange: (ev: any) => mixed;\n onoffline: (ev: any) => mixed;\n ononline: (ev: any) => mixed;\n onrejectionhandled: (ev: PromiseRejectionEvent) => mixed;\n onunhandledrejection: (ev: PromiseRejectionEvent) => mixed;\n}\n\ndeclare class DedicatedWorkerGlobalScope extends WorkerGlobalScope {\n onmessage: (ev: MessageEvent) => mixed;\n onmessageerror: (ev: MessageEvent) => mixed;\n postMessage(message: any, transfer?: Iterable): void;\n}\n\ndeclare class SharedWorkerGlobalScope extends WorkerGlobalScope {\n name: string;\n onconnect: (ev: MessageEvent) => mixed;\n}\n\ndeclare class WorkerLocation {\n origin: string;\n protocol: string;\n host: string;\n hostname: string;\n port: string;\n pathname: string;\n search: string;\n hash: string;\n}\n\ndeclare class WorkerNavigator\n mixins\n NavigatorID,\n NavigatorLanguage,\n NavigatorOnLine,\n NavigatorConcurrentHardware,\n NavigatorStorage\n{\n permissions: Permissions;\n}\n\n// deprecated\ndeclare class XDomainRequest {\n timeout: number;\n onerror: () => mixed;\n onload: () => mixed;\n onprogress: () => mixed;\n ontimeout: () => mixed;\n +responseText: string;\n +contentType: string;\n open(method: 'GET' | 'POST', url: string): void;\n abort(): void;\n send(data?: string): void;\n\n statics: { create(): XDomainRequest, ... };\n}\n\ndeclare class XMLHttpRequest extends EventTarget {\n static LOADING: number;\n static DONE: number;\n static UNSENT: number;\n static OPENED: number;\n static HEADERS_RECEIVED: number;\n responseBody: any;\n status: number;\n readyState: number;\n responseText: string;\n responseXML: any;\n responseURL: string;\n ontimeout: ProgressEventHandler;\n statusText: string;\n onreadystatechange: (ev: any) => mixed;\n timeout: number;\n onload: ProgressEventHandler;\n response: any;\n withCredentials: boolean;\n onprogress: ProgressEventHandler;\n onabort: ProgressEventHandler;\n responseType: string;\n onloadend: ProgressEventHandler;\n upload: XMLHttpRequestEventTarget;\n onerror: ProgressEventHandler;\n onloadstart: ProgressEventHandler;\n msCaching: string;\n open(\n method: string,\n url: string,\n async?: boolean,\n user?: string,\n password?: string,\n ): void;\n send(data?: any): void;\n abort(): void;\n getAllResponseHeaders(): string;\n setRequestHeader(header: string, value: string): void;\n getResponseHeader(header: string): string;\n msCachingEnabled(): boolean;\n overrideMimeType(mime: string): void;\n LOADING: number;\n DONE: number;\n UNSENT: number;\n OPENED: number;\n HEADERS_RECEIVED: number;\n\n statics: { create(): XMLHttpRequest, ... };\n}\n\ndeclare class XMLHttpRequestEventTarget extends EventTarget {\n onprogress: ProgressEventHandler;\n onerror: ProgressEventHandler;\n onload: ProgressEventHandler;\n ontimeout: ProgressEventHandler;\n onabort: ProgressEventHandler;\n onloadstart: ProgressEventHandler;\n onloadend: ProgressEventHandler;\n}\n\ndeclare class XMLSerializer {\n serializeToString(target: Node): string;\n}\n\ndeclare class Geolocation {\n getCurrentPosition(\n success: (position: Position) => mixed,\n error?: (error: PositionError) => mixed,\n options?: PositionOptions,\n ): void;\n watchPosition(\n success: (position: Position) => mixed,\n error?: (error: PositionError) => mixed,\n options?: PositionOptions,\n ): number;\n clearWatch(id: number): void;\n}\n\ndeclare class Position {\n coords: Coordinates;\n timestamp: number;\n}\n\ndeclare class Coordinates {\n latitude: number;\n longitude: number;\n altitude?: number;\n accuracy: number;\n altitudeAccuracy?: number;\n heading?: number;\n speed?: number;\n}\n\ndeclare class PositionError {\n code: number;\n message: string;\n PERMISSION_DENIED: 1;\n POSITION_UNAVAILABLE: 2;\n TIMEOUT: 3;\n}\n\ntype PositionOptions = {\n enableHighAccuracy?: boolean,\n timeout?: number,\n maximumAge?: number,\n ...\n};\n\ntype AudioContextState = 'suspended' | 'running' | 'closed';\n\n// deprecated\ntype AudioProcessingEvent$Init = Event$Init & {\n playbackTime: number,\n inputBuffer: AudioBuffer,\n outputBuffer: AudioBuffer,\n ...\n};\n\n// deprecated\ndeclare class AudioProcessingEvent extends Event {\n constructor(type: string, eventInitDict: AudioProcessingEvent$Init): void;\n\n +playbackTime: number;\n +inputBuffer: AudioBuffer;\n +outputBuffer: AudioBuffer;\n}\n\ntype OfflineAudioCompletionEvent$Init = Event$Init & {\n renderedBuffer: AudioBuffer,\n ...\n};\n\ndeclare class OfflineAudioCompletionEvent extends Event {\n constructor(\n type: string,\n eventInitDict: OfflineAudioCompletionEvent$Init,\n ): void;\n\n +renderedBuffer: AudioBuffer;\n}\n\ndeclare class BaseAudioContext extends EventTarget {\n currentTime: number;\n destination: AudioDestinationNode;\n listener: AudioListener;\n sampleRate: number;\n state: AudioContextState;\n onstatechange: (ev: any) => mixed;\n createBuffer(\n numOfChannels: number,\n length: number,\n sampleRate: number,\n ): AudioBuffer;\n createBufferSource(myMediaElement?: HTMLMediaElement): AudioBufferSourceNode;\n createMediaElementSource(\n myMediaElement: HTMLMediaElement,\n ): MediaElementAudioSourceNode;\n createMediaStreamSource(stream: MediaStream): MediaStreamAudioSourceNode;\n createMediaStreamDestination(): MediaStreamAudioDestinationNode;\n\n // deprecated\n createScriptProcessor(\n bufferSize: number,\n numberOfInputChannels: number,\n numberOfOutputChannels: number,\n ): ScriptProcessorNode;\n\n createAnalyser(): AnalyserNode;\n createBiquadFilter(): BiquadFilterNode;\n createChannelMerger(numberOfInputs?: number): ChannelMergerNode;\n createChannelSplitter(numberOfInputs?: number): ChannelSplitterNode;\n createConstantSource(): ConstantSourceNode;\n createConvolver(): ConvolverNode;\n createDelay(maxDelayTime?: number): DelayNode;\n createDynamicsCompressor(): DynamicsCompressorNode;\n createGain(): GainNode;\n createIIRFilter(\n feedforward: Float32Array,\n feedback: Float32Array,\n ): IIRFilterNode;\n createOscillator(): OscillatorNode;\n createPanner(): PannerNode;\n createStereoPanner(): StereoPannerNode;\n createPeriodicWave(\n real: Float32Array,\n img: Float32Array,\n options?: { disableNormalization: boolean, ... },\n ): PeriodicWave;\n createStereoPanner(): StereoPannerNode;\n createWaveShaper(): WaveShaperNode;\n decodeAudioData(\n arrayBuffer: ArrayBuffer,\n decodeSuccessCallback: (decodedData: AudioBuffer) => mixed,\n decodeErrorCallback: (err: DOMError) => mixed,\n ): void;\n decodeAudioData(arrayBuffer: ArrayBuffer): Promise;\n}\n\ndeclare class AudioTimestamp {\n contextTime: number;\n performanceTime: number;\n}\n\ndeclare class AudioContext extends BaseAudioContext {\n constructor(options?: {|\n latencyHint?: 'balanced' | 'interactive' | 'playback' | number,\n sampleRate?: number,\n |}): AudioContext;\n baseLatency: number;\n outputLatency: number;\n getOutputTimestamp(): AudioTimestamp;\n resume(): Promise;\n suspend(): Promise;\n close(): Promise;\n createMediaElementSource(\n myMediaElement: HTMLMediaElement,\n ): MediaElementAudioSourceNode;\n createMediaStreamSource(\n myMediaStream: MediaStream,\n ): MediaStreamAudioSourceNode;\n createMediaStreamTrackSource(\n myMediaStreamTrack: MediaStreamTrack,\n ): MediaStreamTrackAudioSourceNode;\n createMediaStreamDestination(): MediaStreamAudioDestinationNode;\n}\n\ndeclare class OfflineAudioContext extends BaseAudioContext {\n startRendering(): Promise;\n suspend(suspendTime: number): Promise;\n length: number;\n oncomplete: (ev: OfflineAudioCompletionEvent) => mixed;\n}\n\ndeclare class AudioNode extends EventTarget {\n context: AudioContext;\n numberOfInputs: number;\n numberOfOutputs: number;\n channelCount: number;\n channelCountMode: 'max' | 'clamped-max' | 'explicit';\n channelInterpretation: 'speakers' | 'discrete';\n connect(audioNode: AudioNode, output?: number, input?: number): AudioNode;\n connect(destination: AudioParam, output?: number): void;\n disconnect(destination?: AudioNode, output?: number, input?: number): void;\n}\n\ndeclare class AudioParam extends AudioNode {\n value: number;\n defaultValue: number;\n setValueAtTime(value: number, startTime: number): this;\n linearRampToValueAtTime(value: number, endTime: number): this;\n exponentialRampToValueAtTime(value: number, endTime: number): this;\n setTargetAtTime(\n target: number,\n startTime: number,\n timeConstant: number,\n ): this;\n setValueCurveAtTime(\n values: Float32Array,\n startTime: number,\n duration: number,\n ): this;\n cancelScheduledValues(startTime: number): this;\n}\n\ndeclare class AudioDestinationNode extends AudioNode {\n maxChannelCount: number;\n}\n\ndeclare class AudioListener extends AudioNode {\n positionX: AudioParam;\n positionY: AudioParam;\n positionZ: AudioParam;\n forwardX: AudioParam;\n forwardY: AudioParam;\n forwardZ: AudioParam;\n upX: AudioParam;\n upY: AudioParam;\n upZ: AudioParam;\n setPosition(x: number, y: number, c: number): void;\n setOrientation(\n x: number,\n y: number,\n z: number,\n xUp: number,\n yUp: number,\n zUp: number,\n ): void;\n}\n\ndeclare class AudioBuffer {\n sampleRate: number;\n length: number;\n duration: number;\n numberOfChannels: number;\n getChannelData(channel: number): Float32Array;\n copyFromChannel(\n destination: Float32Array,\n channelNumber: number,\n startInChannel?: number,\n ): void;\n copyToChannel(\n source: Float32Array,\n channelNumber: number,\n startInChannel?: number,\n ): void;\n}\n\ndeclare class AudioBufferSourceNode extends AudioNode {\n buffer: AudioBuffer;\n detune: AudioParam;\n loop: boolean;\n loopStart: number;\n loopEnd: number;\n playbackRate: AudioParam;\n onended: (ev: any) => mixed;\n start(when?: number, offset?: number, duration?: number): void;\n stop(when?: number): void;\n}\n\ndeclare class CanvasCaptureMediaStream extends MediaStream {\n canvas: HTMLCanvasElement;\n requestFrame(): void;\n}\n\ntype DoubleRange = {\n max?: number,\n min?: number,\n ...\n};\n\ntype LongRange = {\n max?: number,\n min?: number,\n ...\n};\n\ntype ConstrainBooleanParameters = {\n exact?: boolean,\n ideal?: boolean,\n ...\n};\n\ntype ConstrainDOMStringParameters = {\n exact?: string | string[],\n ideal?: string | string[],\n ...\n};\n\ntype ConstrainDoubleRange = {\n ...DoubleRange,\n exact?: number,\n ideal?: number,\n ...\n};\n\ntype ConstrainLongRange = {\n ...LongRange,\n exact?: number,\n ideal?: number,\n ...\n};\n\ntype MediaTrackSupportedConstraints = {|\n width: boolean,\n height: boolean,\n aspectRatio: boolean,\n frameRate: boolean,\n facingMode: boolean,\n resizeMode: boolean,\n volume: boolean,\n sampleRate: boolean,\n sampleSize: boolean,\n echoCancellation: boolean,\n autoGainControl: boolean,\n noiseSuppression: boolean,\n latency: boolean,\n channelCount: boolean,\n deviceId: boolean,\n groupId: boolean,\n|};\n\ntype MediaTrackConstraintSet = {\n width?: number | ConstrainLongRange,\n height?: number | ConstrainLongRange,\n aspectRatio?: number | ConstrainDoubleRange,\n frameRate?: number | ConstrainDoubleRange,\n facingMode?: string | string[] | ConstrainDOMStringParameters,\n resizeMode?: string | string[] | ConstrainDOMStringParameters,\n volume?: number | ConstrainDoubleRange,\n sampleRate?: number | ConstrainLongRange,\n sampleSize?: number | ConstrainLongRange,\n echoCancellation?: boolean | ConstrainBooleanParameters,\n autoGainControl?: boolean | ConstrainBooleanParameters,\n noiseSuppression?: boolean | ConstrainBooleanParameters,\n latency?: number | ConstrainDoubleRange,\n channelCount?: number | ConstrainLongRange,\n deviceId?: string | string[] | ConstrainDOMStringParameters,\n groupId?: string | string[] | ConstrainDOMStringParameters,\n ...\n};\n\ntype MediaTrackConstraints = {\n ...MediaTrackConstraintSet,\n advanced?: Array,\n ...\n};\n\ntype DisplayMediaStreamConstraints = {\n video?: boolean | MediaTrackConstraints,\n audio?: boolean | MediaTrackConstraints,\n ...\n};\n\ntype MediaStreamConstraints = {\n audio?: boolean | MediaTrackConstraints,\n video?: boolean | MediaTrackConstraints,\n peerIdentity?: string,\n ...\n};\n\ntype MediaTrackSettings = {\n aspectRatio?: number,\n deviceId?: string,\n displaySurface?: 'application' | 'browser' | 'monitor' | 'window',\n echoCancellation?: boolean,\n facingMode?: string,\n frameRate?: number,\n groupId?: string,\n height?: number,\n logicalSurface?: boolean,\n sampleRate?: number,\n sampleSize?: number,\n volume?: number,\n width?: number,\n ...\n};\n\ntype MediaTrackCapabilities = {\n aspectRatio?: number | DoubleRange,\n deviceId?: string,\n echoCancellation?: boolean[],\n facingMode?: string,\n frameRate?: number | DoubleRange,\n groupId?: string,\n height?: number | LongRange,\n sampleRate?: number | LongRange,\n sampleSize?: number | LongRange,\n volume?: number | DoubleRange,\n width?: number | LongRange,\n ...\n};\n\ndeclare class MediaDevices extends EventTarget {\n ondevicechange: (ev: any) => mixed;\n enumerateDevices: () => Promise>;\n getSupportedConstraints: () => MediaTrackSupportedConstraints;\n getDisplayMedia: (\n constraints?: DisplayMediaStreamConstraints,\n ) => Promise;\n getUserMedia: (constraints: MediaStreamConstraints) => Promise;\n}\n\ndeclare class MediaDeviceInfo {\n +deviceId: string;\n +groupId: string;\n +kind: 'videoinput' | 'audioinput' | 'audiooutput';\n +label: string;\n}\n\ntype MediaRecorderOptions = {\n mimeType?: string,\n audioBitsPerSecond?: number,\n videoBitsPerSecond?: number,\n bitsPerSecond?: number,\n audioBitrateMode?: 'cbr' | 'vbr',\n ...\n};\n\ndeclare class MediaRecorder extends EventTarget {\n constructor(stream: MediaStream, options?: MediaRecorderOptions): void;\n +stream: MediaStream;\n +mimeType: string;\n +state: 'inactive' | 'recording' | 'paused';\n\n onstart: (ev: any) => mixed;\n onstop: (ev: any) => mixed;\n ondataavailable: (ev: any) => mixed;\n onpause: (ev: any) => mixed;\n onresume: (ev: any) => mixed;\n onerror: (ev: any) => mixed;\n\n +videoBitsPerSecond: number;\n +audioBitsPerSecond: number;\n +audioBitrateMode: 'cbr' | 'vbr';\n\n start(timeslice?: number): void;\n stop(): void;\n pause(): void;\n resume(): void;\n requestData(): void;\n\n static isTypeSupported(type: string): boolean;\n}\n\ndeclare class MediaStream extends EventTarget {\n active: boolean;\n ended: boolean;\n id: string;\n onactive: (ev: any) => mixed;\n oninactive: (ev: any) => mixed;\n onended: (ev: any) => mixed;\n onaddtrack: (ev: MediaStreamTrackEvent) => mixed;\n onremovetrack: (ev: MediaStreamTrackEvent) => mixed;\n addTrack(track: MediaStreamTrack): void;\n clone(): MediaStream;\n getAudioTracks(): MediaStreamTrack[];\n getTrackById(trackid?: string): ?MediaStreamTrack;\n getTracks(): MediaStreamTrack[];\n getVideoTracks(): MediaStreamTrack[];\n removeTrack(track: MediaStreamTrack): void;\n}\n\ndeclare class MediaStreamTrack extends EventTarget {\n enabled: boolean;\n id: string;\n kind: string;\n label: string;\n muted: boolean;\n readonly: boolean;\n readyState: 'live' | 'ended';\n remote: boolean;\n contentHint?: string;\n onstarted: (ev: any) => mixed;\n onmute: (ev: any) => mixed;\n onunmute: (ev: any) => mixed;\n onoverconstrained: (ev: any) => mixed;\n onended: (ev: any) => mixed;\n getConstraints(): MediaTrackConstraints;\n applyConstraints(constraints?: MediaTrackConstraints): Promise;\n getSettings(): MediaTrackSettings;\n getCapabilities(): MediaTrackCapabilities;\n clone(): MediaStreamTrack;\n stop(): void;\n}\n\ndeclare class MediaStreamTrackEvent extends Event {\n track: MediaStreamTrack;\n}\n\ndeclare class MediaElementAudioSourceNode extends AudioNode {}\ndeclare class MediaStreamAudioSourceNode extends AudioNode {}\ndeclare class MediaStreamTrackAudioSourceNode extends AudioNode {}\n\ndeclare class MediaStreamAudioDestinationNode extends AudioNode {\n stream: MediaStream;\n}\n\n// deprecated\ndeclare class ScriptProcessorNode extends AudioNode {\n bufferSize: number;\n onaudioprocess: (ev: AudioProcessingEvent) => mixed;\n}\n\ndeclare class AnalyserNode extends AudioNode {\n fftSize: number;\n frequencyBinCount: number;\n minDecibels: number;\n maxDecibels: number;\n smoothingTimeConstant: number;\n getFloatFrequencyData(array: Float32Array): Float32Array;\n getByteFrequencyData(array: Uint8Array): Uint8Array;\n getFloatTimeDomainData(array: Float32Array): Float32Array;\n getByteTimeDomainData(array: Uint8Array): Uint8Array;\n}\n\ndeclare class BiquadFilterNode extends AudioNode {\n frequency: AudioParam;\n detune: AudioParam;\n Q: AudioParam;\n gain: AudioParam;\n type:\n | 'lowpass'\n | 'highpass'\n | 'bandpass'\n | 'lowshelf'\n | 'highshelf'\n | 'peaking'\n | 'notch'\n | 'allpass';\n getFrequencyResponse(\n frequencyHz: Float32Array,\n magResponse: Float32Array,\n phaseResponse: Float32Array,\n ): void;\n}\n\ndeclare class ChannelMergerNode extends AudioNode {}\ndeclare class ChannelSplitterNode extends AudioNode {}\n\ntype ConstantSourceOptions = { offset?: number, ... };\ndeclare class ConstantSourceNode extends AudioNode {\n constructor(context: BaseAudioContext, options?: ConstantSourceOptions): void;\n offset: AudioParam;\n onended: (ev: any) => mixed;\n start(when?: number): void;\n stop(when?: number): void;\n}\n\ndeclare class ConvolverNode extends AudioNode {\n buffer: AudioBuffer;\n normalize: boolean;\n}\n\ndeclare class DelayNode extends AudioNode {\n delayTime: number;\n}\n\ndeclare class DynamicsCompressorNode extends AudioNode {\n threshold: AudioParam;\n knee: AudioParam;\n ratio: AudioParam;\n reduction: AudioParam;\n attack: AudioParam;\n release: AudioParam;\n}\n\ndeclare class GainNode extends AudioNode {\n gain: AudioParam;\n}\n\ndeclare class IIRFilterNode extends AudioNode {\n getFrequencyResponse(\n frequencyHz: Float32Array,\n magResponse: Float32Array,\n phaseResponse: Float32Array,\n ): void;\n}\n\ndeclare class OscillatorNode extends AudioNode {\n frequency: AudioParam;\n detune: AudioParam;\n type: 'sine' | 'square' | 'sawtooth' | 'triangle' | 'custom';\n start(when?: number): void;\n stop(when?: number): void;\n setPeriodicWave(periodicWave: PeriodicWave): void;\n onended: (ev: any) => mixed;\n}\n\ndeclare class StereoPannerNode extends AudioNode {\n pan: AudioParam;\n}\n\ndeclare class PannerNode extends AudioNode {\n panningModel: 'equalpower' | 'HRTF';\n distanceModel: 'linear' | 'inverse' | 'exponential';\n refDistance: number;\n maxDistance: number;\n rolloffFactor: number;\n coneInnerAngle: number;\n coneOuterAngle: number;\n coneOuterGain: number;\n setPosition(x: number, y: number, z: number): void;\n setOrientation(x: number, y: number, z: number): void;\n}\n\ndeclare class PeriodicWave extends AudioNode {}\ndeclare class WaveShaperNode extends AudioNode {\n curve: Float32Array;\n oversample: 'none' | '2x' | '4x';\n}\n\n// this part of spec is not finished yet, apparently\n// https://stackoverflow.com/questions/35296664/can-fetch-get-object-as-headers\ntype HeadersInit =\n | Headers\n | Array<[string, string]>\n | { [key: string]: string, ... };\n\n// TODO Heades and URLSearchParams are almost the same thing.\n// Could it somehow be abstracted away?\ndeclare class Headers {\n @@iterator(): Iterator<[string, string]>;\n constructor(init?: HeadersInit): void;\n append(name: string, value: string): void;\n delete(name: string): void;\n entries(): Iterator<[string, string]>;\n forEach(\n callback: (\n this: This,\n value: string,\n name: string,\n headers: Headers,\n ) => mixed,\n thisArg: This,\n ): void;\n get(name: string): null | string;\n has(name: string): boolean;\n keys(): Iterator;\n set(name: string, value: string): void;\n values(): Iterator;\n}\n\ndeclare class URLSearchParams {\n @@iterator(): Iterator<[string, string]>;\n\n size: number;\n\n constructor(\n init?:\n | string\n | URLSearchParams\n | Array<[string, string]>\n | { [string]: string, ... },\n ): void;\n append(name: string, value: string): void;\n delete(name: string, value?: string): void;\n entries(): Iterator<[string, string]>;\n forEach(\n callback: (\n this: This,\n value: string,\n name: string,\n params: URLSearchParams,\n ) => mixed,\n thisArg: This,\n ): void;\n get(name: string): null | string;\n getAll(name: string): Array;\n has(name: string, value?: string): boolean;\n keys(): Iterator;\n set(name: string, value: string): void;\n sort(): void;\n values(): Iterator;\n toString(): string;\n}\n\ntype CacheType =\n | 'default'\n | 'no-store'\n | 'reload'\n | 'no-cache'\n | 'force-cache'\n | 'only-if-cached';\ntype CredentialsType = 'omit' | 'same-origin' | 'include';\ntype ModeType = 'cors' | 'no-cors' | 'same-origin' | 'navigate';\ntype RedirectType = 'follow' | 'error' | 'manual';\ntype ReferrerPolicyType =\n | ''\n | 'no-referrer'\n | 'no-referrer-when-downgrade'\n | 'same-origin'\n | 'origin'\n | 'strict-origin'\n | 'origin-when-cross-origin'\n | 'strict-origin-when-cross-origin'\n | 'unsafe-url';\n\ntype ResponseType =\n | 'basic'\n | 'cors'\n | 'default'\n | 'error'\n | 'opaque'\n | 'opaqueredirect';\n\ntype BodyInit =\n | string\n | URLSearchParams\n | FormData\n | Blob\n | ArrayBuffer\n | $ArrayBufferView\n | ReadableStream;\n\ntype RequestInfo = Request | URL | string;\n\ntype RequestOptions = {\n body?: ?BodyInit,\n cache?: CacheType,\n credentials?: CredentialsType,\n headers?: HeadersInit,\n integrity?: string,\n keepalive?: boolean,\n method?: string,\n mode?: ModeType,\n redirect?: RedirectType,\n referrer?: string,\n referrerPolicy?: ReferrerPolicyType,\n signal?: ?AbortSignal,\n window?: any,\n ...\n};\n\ntype ResponseOptions = {\n status?: number,\n statusText?: string,\n headers?: HeadersInit,\n ...\n};\n\ndeclare class Response {\n constructor(input?: ?BodyInit, init?: ResponseOptions): void;\n clone(): Response;\n static error(): Response;\n static redirect(url: string, status?: number): Response;\n\n redirected: boolean;\n type: ResponseType;\n url: string;\n ok: boolean;\n status: number;\n statusText: string;\n headers: Headers;\n trailer: Promise;\n\n // Body methods and attributes\n bodyUsed: boolean;\n body: ?ReadableStream;\n\n arrayBuffer(): Promise;\n blob(): Promise;\n formData(): Promise;\n json(): Promise;\n text(): Promise;\n}\n\ndeclare class Request {\n constructor(input: RequestInfo, init?: RequestOptions): void;\n clone(): Request;\n\n url: string;\n\n cache: CacheType;\n credentials: CredentialsType;\n headers: Headers;\n integrity: string;\n method: string;\n mode: ModeType;\n redirect: RedirectType;\n referrer: string;\n referrerPolicy: ReferrerPolicyType;\n +signal: AbortSignal;\n\n // Body methods and attributes\n bodyUsed: boolean;\n\n arrayBuffer(): Promise;\n blob(): Promise;\n formData(): Promise;\n json(): Promise;\n text(): Promise;\n}\n\ndeclare function fetch(\n input: RequestInfo,\n init?: RequestOptions,\n): Promise;\n\ntype TextEncoder$availableEncodings =\n | 'utf-8'\n | 'utf8'\n | 'unicode-1-1-utf-8'\n | 'utf-16be'\n | 'utf-16'\n | 'utf-16le';\n\ndeclare class TextEncoder {\n constructor(encoding?: TextEncoder$availableEncodings): void;\n encode(buffer: string, options?: { stream: boolean, ... }): Uint8Array;\n encoding: TextEncoder$availableEncodings;\n}\n\ntype TextDecoder$availableEncodings =\n | '866'\n | 'ansi_x3.4-1968'\n | 'arabic'\n | 'ascii'\n | 'asmo-708'\n | 'big5-hkscs'\n | 'big5'\n | 'chinese'\n | 'cn-big5'\n | 'cp1250'\n | 'cp1251'\n | 'cp1252'\n | 'cp1253'\n | 'cp1254'\n | 'cp1255'\n | 'cp1256'\n | 'cp1257'\n | 'cp1258'\n | 'cp819'\n | 'cp866'\n | 'csbig5'\n | 'cseuckr'\n | 'cseucpkdfmtjapanese'\n | 'csgb2312'\n | 'csibm866'\n | 'csiso2022jp'\n | 'csiso2022kr'\n | 'csiso58gb231280'\n | 'csiso88596e'\n | 'csiso88596i'\n | 'csiso88598e'\n | 'csiso88598i'\n | 'csisolatin1'\n | 'csisolatin2'\n | 'csisolatin3'\n | 'csisolatin4'\n | 'csisolatin5'\n | 'csisolatin6'\n | 'csisolatin9'\n | 'csisolatinarabic'\n | 'csisolatincyrillic'\n | 'csisolatingreek'\n | 'csisolatinhebrew'\n | 'cskoi8r'\n | 'csksc56011987'\n | 'csmacintosh'\n | 'csshiftjis'\n | 'cyrillic'\n | 'dos-874'\n | 'ecma-114'\n | 'ecma-118'\n | 'elot_928'\n | 'euc-jp'\n | 'euc-kr'\n | 'gb_2312-80'\n | 'gb_2312'\n | 'gb18030'\n | 'gb2312'\n | 'gbk'\n | 'greek'\n | 'greek8'\n | 'hebrew'\n | 'hz-gb-2312'\n | 'ibm819'\n | 'ibm866'\n | 'iso_8859-1:1987'\n | 'iso_8859-1'\n | 'iso_8859-2:1987'\n | 'iso_8859-2'\n | 'iso_8859-3:1988'\n | 'iso_8859-3'\n | 'iso_8859-4:1988'\n | 'iso_8859-4'\n | 'iso_8859-5:1988'\n | 'iso_8859-5'\n | 'iso_8859-6:1987'\n | 'iso_8859-6'\n | 'iso_8859-7:1987'\n | 'iso_8859-7'\n | 'iso_8859-8:1988'\n | 'iso_8859-8'\n | 'iso_8859-9:1989'\n | 'iso_8859-9'\n | 'iso-2022-cn-ext'\n | 'iso-2022-cn'\n | 'iso-2022-jp'\n | 'iso-2022-kr'\n | 'iso-8859-1'\n | 'iso-8859-10'\n | 'iso-8859-11'\n | 'iso-8859-13'\n | 'iso-8859-14'\n | 'iso-8859-15'\n | 'iso-8859-16'\n | 'iso-8859-2'\n | 'iso-8859-3'\n | 'iso-8859-4'\n | 'iso-8859-5'\n | 'iso-8859-6-e'\n | 'iso-8859-6-i'\n | 'iso-8859-6'\n | 'iso-8859-7'\n | 'iso-8859-8-e'\n | 'iso-8859-8-i'\n | 'iso-8859-8'\n | 'iso-8859-9'\n | 'iso-ir-100'\n | 'iso-ir-101'\n | 'iso-ir-109'\n | 'iso-ir-110'\n | 'iso-ir-126'\n | 'iso-ir-127'\n | 'iso-ir-138'\n | 'iso-ir-144'\n | 'iso-ir-148'\n | 'iso-ir-149'\n | 'iso-ir-157'\n | 'iso-ir-58'\n | 'iso8859-1'\n | 'iso8859-10'\n | 'iso8859-11'\n | 'iso8859-13'\n | 'iso8859-14'\n | 'iso8859-15'\n | 'iso8859-2'\n | 'iso8859-3'\n | 'iso8859-4'\n | 'iso8859-6'\n | 'iso8859-7'\n | 'iso8859-8'\n | 'iso8859-9'\n | 'iso88591'\n | 'iso885910'\n | 'iso885911'\n | 'iso885913'\n | 'iso885914'\n | 'iso885915'\n | 'iso88592'\n | 'iso88593'\n | 'iso88594'\n | 'iso88595'\n | 'iso88596'\n | 'iso88597'\n | 'iso88598'\n | 'iso88599'\n | 'koi'\n | 'koi8_r'\n | 'koi8-r'\n | 'koi8-u'\n | 'koi8'\n | 'korean'\n | 'ks_c_5601-1987'\n | 'ks_c_5601-1989'\n | 'ksc_5601'\n | 'ksc5601'\n | 'l1'\n | 'l2'\n | 'l3'\n | 'l4'\n | 'l5'\n | 'l6'\n | 'l9'\n | 'latin1'\n | 'latin2'\n | 'latin3'\n | 'latin4'\n | 'latin5'\n | 'latin6'\n | 'latin9'\n | 'logical'\n | 'mac'\n | 'macintosh'\n | 'ms_kanji'\n | 'shift_jis'\n | 'shift-jis'\n | 'sjis'\n | 'sun_eu_greek'\n | 'tis-620'\n | 'unicode-1-1-utf-8'\n | 'us-ascii'\n | 'utf-16'\n | 'utf-16be'\n | 'utf-16le'\n | 'utf-8'\n | 'utf8'\n | 'visual'\n | 'windows-1250'\n | 'windows-1251'\n | 'windows-1252'\n | 'windows-1253'\n | 'windows-1254'\n | 'windows-1255'\n | 'windows-1256'\n | 'windows-1257'\n | 'windows-1258'\n | 'windows-31j'\n | 'windows-874'\n | 'windows-949'\n | 'x-cp1250'\n | 'x-cp1251'\n | 'x-cp1252'\n | 'x-cp1253'\n | 'x-cp1254'\n | 'x-cp1255'\n | 'x-cp1256'\n | 'x-cp1257'\n | 'x-cp1258'\n | 'x-euc-jp'\n | 'x-gbk'\n | 'x-mac-cyrillic'\n | 'x-mac-roman'\n | 'x-mac-ukrainian'\n | 'x-sjis'\n | 'x-user-defined'\n | 'x-x-big5';\n\ndeclare class TextDecoder {\n constructor(\n encoding?: TextDecoder$availableEncodings,\n options?: { fatal: boolean, ... },\n ): void;\n encoding: TextDecoder$availableEncodings;\n fatal: boolean;\n ignoreBOM: boolean;\n decode(\n buffer?: ArrayBuffer | $ArrayBufferView,\n options?: { stream: boolean, ... },\n ): string;\n}\n\ndeclare class TextDecoderStream {\n constructor(\n encoding?: TextDecoder$availableEncodings,\n options?: { fatal?: boolean, ignoreBOM?: boolean, ... },\n ): void;\n encoding: TextDecoder$availableEncodings;\n fatal: boolean;\n ignoreBOM: boolean;\n readable: ReadableStream;\n writable: WritableStream;\n}\n\ndeclare class MessagePort extends EventTarget {\n postMessage(message: any, transfer?: Iterable): void;\n start(): void;\n close(): void;\n\n onmessage: null | ((ev: MessageEvent) => mixed);\n onmessageerror: null | ((ev: MessageEvent) => mixed);\n}\n\ndeclare class MessageChannel {\n port1: MessagePort;\n port2: MessagePort;\n}\n\ndeclare class VRDisplay extends EventTarget {\n capabilities: VRDisplayCapabilities;\n depthFar: number;\n depthNear: number;\n displayId: number;\n displayName: string;\n isPresenting: boolean;\n stageParameters: null | VRStageParameters;\n\n cancelAnimationFrame(number): void;\n exitPresent(): Promise;\n getEyeParameters(VREye): VREyeParameters;\n getFrameData(VRFrameData): boolean;\n getLayers(): VRLayerInit[];\n requestAnimationFrame(cb: (number) => mixed): number;\n requestPresent(VRLayerInit[]): Promise;\n submitFrame(): void;\n}\n\ntype VRSource = HTMLCanvasElement;\n\ntype VRLayerInit = {\n leftBounds?: number[],\n rightBounds?: number[],\n source?: null | VRSource,\n ...\n};\n\ntype VRDisplayCapabilities = {\n canPresent: boolean,\n hasExternalDisplay: boolean,\n hasPosition: boolean,\n maxLayers: number,\n ...\n};\n\ntype VREye = 'left' | 'right';\n\ntype VRPose = {\n angularAcceleration?: Float32Array,\n angularVelocity?: Float32Array,\n linearAcceleration?: Float32Array,\n linearVelocity?: Float32Array,\n orientation?: Float32Array,\n position?: Float32Array,\n ...\n};\n\ndeclare class VRFrameData {\n leftProjectionMatrix: Float32Array;\n leftViewMatrix: Float32Array;\n pose: VRPose;\n rightProjectionMatrix: Float32Array;\n rightViewMatrix: Float32Array;\n timestamp: number;\n}\n\ntype VREyeParameters = {\n offset: Float32Array,\n renderWidth: number,\n renderHeight: number,\n ...\n};\n\ntype VRStageParameters = {\n sittingToStandingTransform: Float32Array,\n sizeX: number,\n sizeZ: number,\n ...\n};\n\ntype VRDisplayEventReason =\n | 'mounted'\n | 'navigation'\n | 'requested'\n | 'unmounted';\n\ntype VRDisplayEventInit = {\n display: VRDisplay,\n reason: VRDisplayEventReason,\n ...\n};\n\ndeclare class VRDisplayEvent extends Event {\n constructor(type: string, eventInitDict: VRDisplayEventInit): void;\n display: VRDisplay;\n reason?: VRDisplayEventReason;\n}\n\ndeclare class MediaQueryListEvent {\n matches: boolean;\n media: string;\n}\n\ndeclare type MediaQueryListListener = (MediaQueryListEvent) => void;\n\ndeclare class MediaQueryList extends EventTarget {\n matches: boolean;\n media: string;\n addListener: (MediaQueryListListener) => void;\n removeListener: (MediaQueryListListener) => void;\n onchange: MediaQueryListListener;\n}\n\ndeclare var matchMedia: (string) => MediaQueryList;\n\n// https://w3c.github.io/webappsec-credential-management/#idl-index\ndeclare type CredMgmtCredentialRequestOptions = {\n mediation?: 'silent' | 'optional' | 'required',\n signal?: AbortSignal,\n ...\n};\n\ndeclare type CredMgmtCredentialCreationOptions = { signal: AbortSignal, ... };\n\ndeclare interface CredMgmtCredential {\n id: string;\n type: string;\n}\n\ndeclare interface CredMgmtPasswordCredential extends CredMgmtCredential {\n password: string;\n}\n\ndeclare interface CredMgmtCredentialsContainer {\n get(option?: CredMgmtCredentialRequestOptions): Promise;\n store(credential: CredMgmtCredential): Promise;\n create(\n creationOption?: CredMgmtCredentialCreationOptions,\n ): Promise;\n preventSilentAccess(): Promise;\n}\n\ntype SpeechSynthesisErrorCode =\n | 'canceled'\n | 'interrupted'\n | 'audio-busy'\n | 'audio-hardware'\n | 'network'\n | 'synthesis-unavailable'\n | 'synthesis-failed'\n | 'language-unavailable'\n | 'voice-unavailable'\n | 'text-too-long'\n | 'invalid-argument'\n | 'not-allowed';\n\ndeclare class SpeechSynthesis extends EventTarget {\n +pending: boolean;\n +speaking: boolean;\n +paused: boolean;\n\n onvoiceschanged: ?(ev: Event) => mixed;\n\n speak(utterance: SpeechSynthesisUtterance): void;\n cancel(): void;\n pause(): void;\n resume(): void;\n getVoices(): Array;\n}\n\ndeclare var speechSynthesis: SpeechSynthesis;\n\ndeclare class SpeechSynthesisUtterance extends EventTarget {\n constructor(text?: string): void;\n\n text: string;\n lang: string;\n voice: SpeechSynthesisVoice | null;\n volume: number;\n rate: number;\n pitch: number;\n\n onstart: ?(ev: SpeechSynthesisEvent) => mixed;\n onend: ?(ev: SpeechSynthesisEvent) => mixed;\n onerror: ?(ev: SpeechSynthesisErrorEvent) => mixed;\n onpause: ?(ev: SpeechSynthesisEvent) => mixed;\n onresume: ?(ev: SpeechSynthesisEvent) => mixed;\n onmark: ?(ev: SpeechSynthesisEvent) => mixed;\n onboundary: ?(ev: SpeechSynthesisEvent) => mixed;\n}\n\ntype SpeechSynthesisEvent$Init = Event$Init & {\n utterance: SpeechSynthesisUtterance,\n charIndex?: number,\n charLength?: number,\n elapsedTime?: number,\n name?: string,\n ...\n};\n\ndeclare class SpeechSynthesisEvent extends Event {\n constructor(type: string, eventInitDict?: SpeechSynthesisEvent$Init): void;\n\n +utterance: SpeechSynthesisUtterance;\n charIndex: number;\n charLength: number;\n elapsedTime: number;\n name: string;\n}\n\ntype SpeechSynthesisErrorEvent$Init = SpeechSynthesisEvent$Init & {\n error: SpeechSynthesisErrorCode,\n ...\n};\n\ndeclare class SpeechSynthesisErrorEvent extends SpeechSynthesisEvent {\n constructor(\n type: string,\n eventInitDict?: SpeechSynthesisErrorEvent$Init,\n ): void;\n +error: SpeechSynthesisErrorCode;\n}\n\ndeclare class SpeechSynthesisVoice {\n +voiceURI: string;\n +name: string;\n +lang: string;\n +localService: boolean;\n +default: boolean;\n}\n\ntype SpeechRecognitionErrorCode =\n | 'no-speech'\n | 'aborted'\n | 'audio-capture'\n | 'not-allowed'\n | 'service-not-allowed'\n | 'bad-grammar'\n | 'language-not-supported';\n\ndeclare class SpeechGrammar {\n constructor(): void;\n\n src: string;\n weight?: number;\n}\n\ndeclare class SpeechGrammarList {\n +length: number;\n\n item(index: number): SpeechGrammar;\n addFromURI(src: string, weight?: number): void;\n addFromString(string: string, weight?: number): void;\n}\n\ndeclare class SpeechRecognitionAlternative {\n +transcript: string;\n +confidence: number;\n}\n\ndeclare class SpeechRecognitionResult {\n +isFinal: boolean;\n +length: number;\n\n item(index: number): SpeechRecognitionAlternative;\n}\n\ndeclare class SpeechRecognitionResultList {\n +length: number;\n\n item(index: number): SpeechRecognitionResult;\n}\n\ntype SpeechRecognitionEvent$Init = Event$Init & {\n emma: any,\n interpretation: any,\n resultIndex: number,\n results: SpeechRecognitionResultList,\n ...\n};\n\ndeclare class SpeechRecognitionEvent extends Event {\n constructor(type: string, eventInitDict?: SpeechRecognitionEvent$Init): void;\n\n +emma: any;\n +interpretation: any;\n +resultIndex: number;\n +results: SpeechRecognitionResultList;\n}\n\ntype SpeechRecognitionErrorEvent$Init = SpeechRecognitionEvent$Init & {\n error: SpeechRecognitionErrorCode,\n ...\n};\n\ndeclare class SpeechRecognitionErrorEvent extends SpeechRecognitionEvent {\n constructor(\n type: string,\n eventInitDict?: SpeechRecognitionErrorEvent$Init,\n ): void;\n +error: SpeechRecognitionErrorCode;\n +message: string;\n}\n\ndeclare class SpeechRecognition extends EventTarget {\n constructor(): void;\n\n +grammars: SpeechGrammar[];\n +lang: string;\n +continuous: boolean;\n +interimResults: boolean;\n +maxAlternatives: number;\n +serviceURI: string;\n\n onaudiostart: ?(ev: Event) => mixed;\n onaudioend: ?(ev: Event) => mixed;\n onend: ?(ev: Event) => mixed;\n onerror: ?(ev: Event) => mixed;\n onnomatch: ?(ev: Event) => mixed;\n onsoundstart: ?(ev: Event) => mixed;\n onsoundend: ?(ev: Event) => mixed;\n onspeechstart: ?(ev: Event) => mixed;\n onspeechend: ?(ev: Event) => mixed;\n onstart: ?(ev: Event) => mixed;\n\n abort(): void;\n start(): void;\n stop(): void;\n}\n\n/* Trusted Types\n * https://w3c.github.io/trusted-types/dist/spec/#trusted-types\n */\ndeclare class TrustedHTML {\n toString(): string;\n toJSON(): string;\n}\n\ndeclare class TrustedScript {\n toString(): string;\n toJSON(): string;\n}\n\ndeclare class TrustedScriptURL {\n toString(): string;\n toJSON(): string;\n}\n\ndeclare class TrustedTypePolicy {\n +name: string;\n createHTML(input: string, ...args: Array): TrustedHTML;\n createScript(input: string, ...args: Array): TrustedScript;\n createScriptURL(input: string, ...args: Array): TrustedScriptURL;\n}\n\ndeclare type TrustedTypePolicyOptions = {|\n createHTML?: (string, ...args: Array) => string,\n createScript?: (string, ...args: Array) => string,\n createScriptURL?: (string, ...args: Array) => string,\n|};\n\n// window.trustedTypes?: TrustedTypePolicyFactory\ndeclare class TrustedTypePolicyFactory {\n +emptyHTML: TrustedHTML;\n +emptyScript: TrustedScript;\n +defaultPolicy: ?TrustedTypePolicy;\n +isHTML: (value: mixed) => value is TrustedHTML;\n +isScript: (value: mixed) => value is TrustedScript;\n +isScriptURL: (value: mixed) => value is TrustedScriptURL;\n createPolicy(\n policyName: string,\n policyOptions?: TrustedTypePolicyOptions,\n ): TrustedTypePolicy;\n getAttributeType(\n tagName: string,\n attribute?: string,\n elementNS?: string,\n attrNS?: string,\n ): null | string;\n getPropertyType(\n tagName: string,\n property: string,\n elementNS?: string,\n ): null | string;\n}\n\n// https://wicg.github.io/webusb/\n// https://developer.mozilla.org/en-US/docs/Web/API/USBDevice\ndeclare class USBDevice {\n configuration: USBConfiguration;\n configurations: Array;\n deviceClass: number;\n deviceProtocol: number;\n deviceSubclass: number;\n deviceVersionMajor: number;\n deviceVersionMinor: number;\n deviceVersionSubminor: number;\n manufacturerName: ?string;\n opened: boolean;\n productId: number;\n productName: ?string;\n serialNumber: ?string;\n usbVersionMajor: number;\n usbVersionMinor: number;\n usbVersionSubminor: number;\n vendorId: number;\n claimInterface(interfaceNumber: number): Promise;\n clearHalt(direction: 'in' | 'out', endpointNumber: number): Promise;\n close(): Promise;\n controlTransferIn(\n setup: SetUpOptions,\n length: number,\n ): Promise;\n controlTransferOut(\n setup: SetUpOptions,\n data: ArrayBuffer,\n ): Promise;\n forget(): Promise;\n isochronousTransferIn(\n endpointNumber: number,\n packetLengths: Array,\n ): Promise;\n isochronousTransferOut(\n endpointNumber: number,\n data: ArrayBuffer,\n packetLengths: Array,\n ): Promise;\n open(): Promise;\n releaseInterface(interfaceNumber: number): Promise;\n reset(): Promise;\n selectAlternateInterface(\n interfaceNumber: number,\n alternateSetting: number,\n ): Promise;\n selectConfiguration(configurationValue: number): Promise;\n transferIn(\n endpointNumber: number,\n length: number,\n ): Promise;\n transferOut(\n endpointNumber: number,\n data: ArrayBuffer,\n ): Promise;\n}\n\ndeclare class USB extends EventTarget {\n getDevices(): Promise>;\n requestDevice(options: USBDeviceRequestOptions): Promise;\n}\n\ndeclare type USBDeviceFilter = {|\n vendorId?: number,\n productId?: number,\n classCode?: number,\n subclassCode?: number,\n protocolCode?: number,\n serialNumber?: string,\n|};\n\ndeclare type USBDeviceRequestOptions = {|\n filters: Array,\n exclusionFilters?: Array,\n|};\n\ndeclare class USBConfiguration {\n constructor(): void;\n configurationName: ?string;\n configurationValue: number;\n interfaces: $ReadOnlyArray;\n}\n\ndeclare class USBInterface {\n constructor(): void;\n interfaceNumber: number;\n alternate: USBAlternateInterface;\n alternates: Array;\n claimed: boolean;\n}\n\ndeclare class USBAlternateInterface {\n constructor(): void;\n alternateSetting: number;\n interfaceClass: number;\n interfaceSubclass: number;\n interfaceProtocol: number;\n interfaceName: ?string;\n endpoints: Array;\n}\n\ndeclare class USBEndpoint {\n constructor(): void;\n endpointNumber: number;\n direction: 'in' | 'out';\n type: 'bulk' | 'interrupt' | 'isochronous';\n packetSize: number;\n}\n\ndeclare class USBOutTransferResult {\n constructor(): void;\n bytesWritten: number;\n status: 'ok' | 'stall';\n}\n\ndeclare class USBInTransferResult {\n constructor(): void;\n data: DataView;\n status: 'ok' | 'stall' | 'babble';\n}\n\ndeclare class USBIsochronousInTransferResult {\n constructor(): void;\n data: DataView;\n packets: Array;\n}\n\ndeclare class USBIsochronousInTransferPacket {\n constructor(): void;\n data: DataView;\n status: 'ok' | 'stall' | 'babble';\n}\n\ndeclare class USBIsochronousOutTransferResult {\n constructor(): void;\n packets: Array;\n}\n\ndeclare class USBIsochronousOutTransferPacket {\n constructor(): void;\n bytesWritten: number;\n status: 'ok' | 'stall';\n}\n\ntype SetUpOptions = {\n requestType: string,\n recipient: string,\n request: number,\n value: number,\n index: number,\n ...\n};\n\ndeclare type FileSystemHandleKind = 'file' | 'directory';\n\n// https://wicg.github.io/file-system-access/#api-filesystemhandle\ndeclare class FileSystemHandle {\n +kind: FileSystemHandleKind;\n +name: string;\n\n isSameEntry: (other: FileSystemHandle) => Promise;\n queryPermission?: (\n descriptor: FileSystemHandlePermissionDescriptor,\n ) => Promise;\n requestPermission?: (\n descriptor: FileSystemHandlePermissionDescriptor,\n ) => Promise;\n}\n\n// https://fs.spec.whatwg.org/#api-filesystemfilehandle\ndeclare class FileSystemFileHandle extends FileSystemHandle {\n +kind: 'file';\n\n constructor(name: string): void;\n\n getFile(): Promise;\n createSyncAccessHandle(): Promise;\n createWritable(options?: {|\n keepExistingData?: boolean,\n |}): Promise;\n}\n\n// https://fs.spec.whatwg.org/#api-filesystemdirectoryhandle\ndeclare class FileSystemDirectoryHandle extends FileSystemHandle {\n +kind: 'directory';\n\n constructor(name: string): void;\n\n getDirectoryHandle(\n name: string,\n options?: {| create?: boolean |},\n ): Promise;\n getFileHandle(\n name: string,\n options?: {| create?: boolean |},\n ): Promise;\n removeEntry(name: string, options?: {| recursive?: boolean |}): Promise;\n resolve(possibleDescendant: FileSystemHandle): Promise | null>;\n\n // Async iterator functions\n @@asyncIterator(): AsyncIterator<[string, FileSystemHandle]>;\n entries(): AsyncIterator<[string, FileSystemHandle]>;\n keys(): AsyncIterator;\n values(): AsyncIterator;\n}\n\n// https://fs.spec.whatwg.org/#api-filesystemsyncaccesshandle\ndeclare class FileSystemSyncAccessHandle {\n close(): void;\n flush(): void;\n getSize(): number;\n read(buffer: ArrayBuffer, options?: {| at: number |}): number;\n truncate(newSize: number): void;\n write(buffer: ArrayBuffer, options?: {| at: number |}): number;\n}\n\n// https://streams.spec.whatwg.org/#default-writer-class\ndeclare class WritableStreamDefaultWriter {\n +closed: Promise;\n +desiredSize: number;\n +ready: Promise;\n\n constructor(): void;\n\n abort(reason?: string): Promise;\n close(): Promise;\n releaseLock(): void;\n write(chunk: any): Promise;\n}\n\n// https://streams.spec.whatwg.org/#ws-class\ndeclare class WriteableStream {\n +locked: boolean;\n\n constructor(): void;\n\n abort(reason: string): Promise;\n close(): Promise;\n getWriter(): WritableStreamDefaultWriter;\n}\n\n// https://fs.spec.whatwg.org/#dictdef-writeparams\ndeclare type FileSystemWriteableFileStreamDataTypes =\n | ArrayBuffer\n | $TypedArray\n | DataView\n | Blob\n | string;\n\n// https://fs.spec.whatwg.org/#dictdef-writeparams\ndeclare type FileSystemWriteableFileStreamData =\n | FileSystemWriteableFileStreamDataTypes\n | {|\n type: 'write',\n position?: number,\n data: FileSystemWriteableFileStreamDataTypes,\n |}\n | {|\n type: 'seek',\n position: number,\n data: FileSystemWriteableFileStreamDataTypes,\n |}\n | {|\n type: 'size',\n size: number,\n |};\n\n// https://fs.spec.whatwg.org/#api-filesystemwritablefilestream\ndeclare class FileSystemWritableFileStream extends WriteableStream {\n write(data: FileSystemWriteableFileStreamData): Promise;\n truncate(size: number): Promise;\n seek(position: number): Promise;\n}\n" }, { "path": "flow-typed/environments/cssom.js", "content": "declare class StyleSheet {\n disabled: boolean;\n +href: string;\n +media: MediaList;\n +ownerNode: Node;\n +parentStyleSheet: ?StyleSheet;\n +title: string;\n +type: string;\n}\n\ndeclare class StyleSheetList {\n @@iterator(): Iterator;\n length: number;\n [index: number]: StyleSheet;\n}\n\ndeclare class MediaList {\n @@iterator(): Iterator;\n mediaText: string;\n length: number;\n item(index: number): ?string;\n deleteMedium(oldMedium: string): void;\n appendMedium(newMedium: string): void;\n [index: number]: string;\n}\n\ndeclare class CSSStyleSheet extends StyleSheet {\n +cssRules: CSSRuleList;\n +ownerRule: ?CSSRule;\n deleteRule(index: number): void;\n insertRule(rule: string, index: number): number;\n replace(text: string): Promise;\n replaceSync(text: string): void;\n}\n\ndeclare class CSSGroupingRule extends CSSRule {\n +cssRules: CSSRuleList;\n deleteRule(index: number): void;\n insertRule(rule: string, index: number): number;\n}\n\ndeclare class CSSConditionRule extends CSSGroupingRule {\n conditionText: string;\n}\n\ndeclare class CSSMediaRule extends CSSConditionRule {\n +media: MediaList;\n}\n\ndeclare class CSSStyleRule extends CSSRule {\n selectorText: string;\n +style: CSSStyleDeclaration;\n}\n\ndeclare class CSSSupportsRule extends CSSConditionRule {}\n\ndeclare class CSSRule {\n cssText: string;\n +parentRule: ?CSSRule;\n +parentStyleSheet: ?CSSStyleSheet;\n +type: number;\n static STYLE_RULE: number;\n static MEDIA_RULE: number;\n static FONT_FACE_RULE: number;\n static PAGE_RULE: number;\n static IMPORT_RULE: number;\n static CHARSET_RULE: number;\n static UNKNOWN_RULE: number;\n static KEYFRAMES_RULE: number;\n static KEYFRAME_RULE: number;\n static NAMESPACE_RULE: number;\n static COUNTER_STYLE_RULE: number;\n static SUPPORTS_RULE: number;\n static DOCUMENT_RULE: number;\n static FONT_FEATURE_VALUES_RULE: number;\n static VIEWPORT_RULE: number;\n static REGION_STYLE_RULE: number;\n}\n\ndeclare class CSSKeyframeRule extends CSSRule {\n keyText: string;\n +style: CSSStyleDeclaration;\n}\n\ndeclare class CSSKeyframesRule extends CSSRule {\n name: string;\n +cssRules: CSSRuleList;\n appendRule(rule: string): void;\n deleteRule(select: string): void;\n findRule(select: string): CSSKeyframeRule | null;\n}\n\ndeclare class CSSRuleList {\n @@iterator(): Iterator;\n length: number;\n item(index: number): ?CSSRule;\n [index: number]: CSSRule;\n}\n\ndeclare class CSSStyleDeclaration {\n @@iterator(): Iterator;\n /* DOM CSS Properties */\n alignContent: string;\n alignItems: string;\n alignSelf: string;\n all: string;\n animation: string;\n animationDelay: string;\n animationDirection: string;\n animationDuration: string;\n animationFillMode: string;\n animationIterationCount: string;\n animationName: string;\n animationPlayState: string;\n animationTimingFunction: string;\n backdropFilter: string;\n webkitBackdropFilter: string;\n backfaceVisibility: string;\n background: string;\n backgroundAttachment: string;\n backgroundBlendMode: string;\n backgroundClip: string;\n backgroundColor: string;\n backgroundImage: string;\n backgroundOrigin: string;\n backgroundPosition: string;\n backgroundPositionX: string;\n backgroundPositionY: string;\n backgroundRepeat: string;\n backgroundSize: string;\n blockSize: string;\n border: string;\n borderBlockEnd: string;\n borderBlockEndColor: string;\n borderBlockEndStyle: string;\n borderBlockEndWidth: string;\n borderBlockStart: string;\n borderBlockStartColor: string;\n borderBlockStartStyle: string;\n borderBlockStartWidth: string;\n borderBottom: string;\n borderBottomColor: string;\n borderBottomLeftRadius: string;\n borderBottomRightRadius: string;\n borderBottomStyle: string;\n borderBottomWidth: string;\n borderCollapse: string;\n borderColor: string;\n borderImage: string;\n borderImageOutset: string;\n borderImageRepeat: string;\n borderImageSlice: string;\n borderImageSource: string;\n borderImageWidth: string;\n borderInlineEnd: string;\n borderInlineEndColor: string;\n borderInlineEndStyle: string;\n borderInlineEndWidth: string;\n borderInlineStart: string;\n borderInlineStartColor: string;\n borderInlineStartStyle: string;\n borderInlineStartWidth: string;\n borderLeft: string;\n borderLeftColor: string;\n borderLeftStyle: string;\n borderLeftWidth: string;\n borderRadius: string;\n borderRight: string;\n borderRightColor: string;\n borderRightStyle: string;\n borderRightWidth: string;\n borderSpacing: string;\n borderStyle: string;\n borderTop: string;\n borderTopColor: string;\n borderTopLeftRadius: string;\n borderTopRightRadius: string;\n borderTopStyle: string;\n borderTopWidth: string;\n borderWidth: string;\n bottom: string;\n boxDecorationBreak: string;\n boxShadow: string;\n boxSizing: string;\n breakAfter: string;\n breakBefore: string;\n breakInside: string;\n captionSide: string;\n clear: string;\n clip: string;\n clipPath: string;\n color: string;\n columns: string;\n columnCount: string;\n columnFill: string;\n columnGap: string;\n columnRule: string;\n columnRuleColor: string;\n columnRuleStyle: string;\n columnRuleWidth: string;\n columnSpan: string;\n columnWidth: string;\n contain: string;\n content: string;\n counterIncrement: string;\n counterReset: string;\n cursor: string;\n direction: string;\n display: string;\n emptyCells: string;\n filter: string;\n flex: string;\n flexBasis: string;\n flexDirection: string;\n flexFlow: string;\n flexGrow: string;\n flexShrink: string;\n flexWrap: string;\n float: string;\n font: string;\n fontFamily: string;\n fontFeatureSettings: string;\n fontKerning: string;\n fontLanguageOverride: string;\n fontSize: string;\n fontSizeAdjust: string;\n fontStretch: string;\n fontStyle: string;\n fontSynthesis: string;\n fontVariant: string;\n fontVariantAlternates: string;\n fontVariantCaps: string;\n fontVariantEastAsian: string;\n fontVariantLigatures: string;\n fontVariantNumeric: string;\n fontVariantPosition: string;\n fontWeight: string;\n grad: string;\n grid: string;\n gridArea: string;\n gridAutoColumns: string;\n gridAutoFlow: string;\n gridAutoPosition: string;\n gridAutoRows: string;\n gridColumn: string;\n gridColumnStart: string;\n gridColumnEnd: string;\n gridRow: string;\n gridRowStart: string;\n gridRowEnd: string;\n gridTemplate: string;\n gridTemplateAreas: string;\n gridTemplateRows: string;\n gridTemplateColumns: string;\n height: string;\n hyphens: string;\n imageRendering: string;\n imageResolution: string;\n imageOrientation: string;\n imeMode: string;\n inherit: string;\n initial: string;\n inlineSize: string;\n isolation: string;\n justifyContent: string;\n left: string;\n letterSpacing: string;\n lineBreak: string;\n lineHeight: string;\n listStyle: string;\n listStyleImage: string;\n listStylePosition: string;\n listStyleType: string;\n margin: string;\n marginBlockEnd: string;\n marginBlockStart: string;\n marginBottom: string;\n marginInlineEnd: string;\n marginInlineStart: string;\n marginLeft: string;\n marginRight: string;\n marginTop: string;\n marks: string;\n mask: string;\n maskType: string;\n maxBlockSize: string;\n maxHeight: string;\n maxInlineSize: string;\n maxWidth: string;\n minBlockSize: string;\n minHeight: string;\n minInlineSize: string;\n minWidth: string;\n mixBlendMode: string;\n mozTransform: string;\n mozTransformOrigin: string;\n mozTransitionDelay: string;\n mozTransitionDuration: string;\n mozTransitionProperty: string;\n mozTransitionTimingFunction: string;\n objectFit: string;\n objectPosition: string;\n offsetBlockEnd: string;\n offsetBlockStart: string;\n offsetInlineEnd: string;\n offsetInlineStart: string;\n opacity: string;\n order: string;\n orphans: string;\n outline: string;\n outlineColor: string;\n outlineOffset: string;\n outlineStyle: string;\n outlineWidth: string;\n overflow: string;\n overflowWrap: string;\n overflowX: string;\n overflowY: string;\n padding: string;\n paddingBlockEnd: string;\n paddingBlockStart: string;\n paddingBottom: string;\n paddingInlineEnd: string;\n paddingInlineStart: string;\n paddingLeft: string;\n paddingRight: string;\n paddingTop: string;\n pageBreakAfter: string;\n pageBreakBefore: string;\n pageBreakInside: string;\n perspective: string;\n perspectiveOrigin: string;\n pointerEvents: string;\n position: string;\n quotes: string;\n rad: string;\n resize: string;\n right: string;\n rubyAlign: string;\n rubyMerge: string;\n rubyPosition: string;\n scrollBehavior: string;\n scrollSnapCoordinate: string;\n scrollSnapDestination: string;\n scrollSnapPointsX: string;\n scrollSnapPointsY: string;\n scrollSnapType: string;\n shapeImageThreshold: string;\n shapeMargin: string;\n shapeOutside: string;\n tableLayout: string;\n tabSize: string;\n textAlign: string;\n textAlignLast: string;\n textCombineUpright: string;\n textDecoration: string;\n textDecorationColor: string;\n textDecorationLine: string;\n textDecorationStyle: string;\n textIndent: string;\n textOrientation: string;\n textOverflow: string;\n textRendering: string;\n textShadow: string;\n textTransform: string;\n textUnderlinePosition: string;\n top: string;\n touchAction: string;\n transform: string;\n transformOrigin: string;\n transformStyle: string;\n transition: string;\n transitionDelay: string;\n transitionDuration: string;\n transitionProperty: string;\n transitionTimingFunction: string;\n turn: string;\n unicodeBidi: string;\n unicodeRange: string;\n userSelect: string;\n verticalAlign: string;\n visibility: string;\n webkitOverflowScrolling: string;\n webkitTransform: string;\n webkitTransformOrigin: string;\n webkitTransitionDelay: string;\n webkitTransitionDuration: string;\n webkitTransitionProperty: string;\n webkitTransitionTimingFunction: string;\n whiteSpace: string;\n widows: string;\n width: string;\n willChange: string;\n wordBreak: string;\n wordSpacing: string;\n wordWrap: string;\n writingMode: string;\n zIndex: string;\n\n cssFloat: string;\n cssText: string;\n getPropertyPriority(property: string): string;\n getPropertyValue(property: string): string;\n item(index: number): string;\n [index: number]: string;\n length: number;\n parentRule: CSSRule;\n removeProperty(property: string): string;\n setProperty(property: string, value: ?string, priority: ?string): void;\n setPropertyPriority(property: string, priority: string): void;\n}\n" }, { "path": "flow-typed/environments/dom.js", "content": "/* Files */\n\ndeclare class Blob {\n constructor(\n blobParts?: Array,\n options?: {\n type?: string,\n endings?: string,\n ...\n },\n ): void;\n isClosed: boolean;\n size: number;\n type: string;\n close(): void;\n slice(start?: number, end?: number, contentType?: string): Blob;\n arrayBuffer(): Promise;\n text(): Promise;\n stream(): ReadableStream;\n}\n\ndeclare class FileReader extends EventTarget {\n +EMPTY: 0;\n +LOADING: 1;\n +DONE: 2;\n +error: null | DOMError;\n +readyState: 0 | 1 | 2;\n +result: null | string | ArrayBuffer;\n abort(): void;\n onabort: null | ((ev: ProgressEvent) => any);\n onerror: null | ((ev: ProgressEvent) => any);\n onload: null | ((ev: ProgressEvent) => any);\n onloadend: null | ((ev: ProgressEvent) => any);\n onloadstart: null | ((ev: ProgressEvent) => any);\n onprogress: null | ((ev: ProgressEvent) => any);\n readAsArrayBuffer(blob: Blob): void;\n readAsBinaryString(blob: Blob): void;\n readAsDataURL(blob: Blob): void;\n readAsText(blob: Blob, encoding?: string): void;\n}\n\ndeclare type FilePropertyBag = {\n type?: string,\n lastModified?: number,\n ...\n};\ndeclare class File extends Blob {\n constructor(\n fileBits: $ReadOnlyArray,\n filename: string,\n options?: FilePropertyBag,\n ): void;\n lastModified: number;\n name: string;\n}\n\ndeclare class FileList {\n @@iterator(): Iterator;\n length: number;\n item(index: number): File;\n [index: number]: File;\n}\n\ndeclare class DOMError {\n name: string;\n}\n\ndeclare interface ShadowRoot extends DocumentFragment {\n +delegatesFocus: boolean;\n +host: Element;\n // flowlint unsafe-getters-setters:off\n get innerHTML(): string;\n set innerHTML(value: string | TrustedHTML): void;\n // flowlint unsafe-getters-setters:error\n +mode: ShadowRootMode;\n\n // From DocumentOrShadowRoot Mixin.\n +styleSheets: StyleSheetList;\n adoptedStyleSheets: Array;\n}\n\ndeclare type ShadowRootMode = 'open' | 'closed';\n\ndeclare type ShadowRootInit = {\n delegatesFocus?: boolean,\n mode: ShadowRootMode,\n ...\n};\n\ndeclare type ScrollToOptions = {\n top?: number,\n left?: number,\n behavior?: 'auto' | 'smooth',\n ...\n};\n\ntype EventHandler = (event: Event) => mixed;\ntype EventListener = { handleEvent: EventHandler, ... } | EventHandler;\ntype MouseEventHandler = (event: MouseEvent) => mixed;\ntype MouseEventListener =\n | { handleEvent: MouseEventHandler, ... }\n | MouseEventHandler;\ntype FocusEventHandler = (event: FocusEvent) => mixed;\ntype FocusEventListener =\n | { handleEvent: FocusEventHandler, ... }\n | FocusEventHandler;\ntype KeyboardEventHandler = (event: KeyboardEvent) => mixed;\ntype KeyboardEventListener =\n | { handleEvent: KeyboardEventHandler, ... }\n | KeyboardEventHandler;\ntype InputEventHandler = (event: InputEvent) => mixed;\ntype InputEventListener =\n | { handleEvent: InputEventHandler, ... }\n | InputEventHandler;\ntype TouchEventHandler = (event: TouchEvent) => mixed;\ntype TouchEventListener =\n | { handleEvent: TouchEventHandler, ... }\n | TouchEventHandler;\ntype WheelEventHandler = (event: WheelEvent) => mixed;\ntype WheelEventListener =\n | { handleEvent: WheelEventHandler, ... }\n | WheelEventHandler;\ntype AbortProgressEventHandler = (event: ProgressEvent) => mixed;\ntype AbortProgressEventListener =\n | { handleEvent: AbortProgressEventHandler, ... }\n | AbortProgressEventHandler;\ntype ProgressEventHandler = (event: ProgressEvent) => mixed;\ntype ProgressEventListener =\n | { handleEvent: ProgressEventHandler, ... }\n | ProgressEventHandler;\ntype DragEventHandler = (event: DragEvent) => mixed;\ntype DragEventListener =\n | { handleEvent: DragEventHandler, ... }\n | DragEventHandler;\ntype PointerEventHandler = (event: PointerEvent) => mixed;\ntype PointerEventListener =\n | { handleEvent: PointerEventHandler, ... }\n | PointerEventHandler;\ntype AnimationEventHandler = (event: AnimationEvent) => mixed;\ntype AnimationEventListener =\n | { handleEvent: AnimationEventHandler, ... }\n | AnimationEventHandler;\ntype ClipboardEventHandler = (event: ClipboardEvent) => mixed;\ntype ClipboardEventListener =\n | { handleEvent: ClipboardEventHandler, ... }\n | ClipboardEventHandler;\ntype TransitionEventHandler = (event: TransitionEvent) => mixed;\ntype TransitionEventListener =\n | { handleEvent: TransitionEventHandler, ... }\n | TransitionEventHandler;\ntype MessageEventHandler = (event: MessageEvent) => mixed;\ntype MessageEventListener =\n | { handleEvent: MessageEventHandler, ... }\n | MessageEventHandler;\ntype BeforeUnloadEventHandler = (event: BeforeUnloadEvent) => mixed;\ntype BeforeUnloadEventListener =\n | { handleEvent: BeforeUnloadEventHandler, ... }\n | BeforeUnloadEventHandler;\ntype StorageEventHandler = (event: StorageEvent) => mixed;\ntype StorageEventListener =\n | { handleEvent: StorageEventHandler, ... }\n | StorageEventHandler;\ntype SecurityPolicyViolationEventHandler = (\n event: SecurityPolicyViolationEvent,\n) => mixed;\ntype SecurityPolicyViolationEventListener =\n | { handleEvent: SecurityPolicyViolationEventHandler, ... }\n | SecurityPolicyViolationEventHandler;\ntype USBConnectionEventHandler = (event: USBConnectionEvent) => mixed;\ntype USBConnectionEventListener =\n | { handleEvent: USBConnectionEventHandler, ... }\n | USBConnectionEventHandler;\n\ntype MediaKeySessionType = 'temporary' | 'persistent-license';\ntype MediaKeyStatus =\n | 'usable'\n | 'expired'\n | 'released'\n | 'output-restricted'\n | 'output-downscaled'\n | 'status-pending'\n | 'internal-error';\ntype MouseEventTypes =\n | 'contextmenu'\n | 'mousedown'\n | 'mouseenter'\n | 'mouseleave'\n | 'mousemove'\n | 'mouseout'\n | 'mouseover'\n | 'mouseup'\n | 'click'\n | 'dblclick';\ntype FocusEventTypes = 'blur' | 'focus' | 'focusin' | 'focusout';\ntype KeyboardEventTypes = 'keydown' | 'keyup' | 'keypress';\ntype InputEventTypes = 'input' | 'beforeinput';\ntype TouchEventTypes = 'touchstart' | 'touchmove' | 'touchend' | 'touchcancel';\ntype WheelEventTypes = 'wheel';\ntype AbortProgressEventTypes = 'abort';\ntype ProgressEventTypes =\n | 'abort'\n | 'error'\n | 'load'\n | 'loadend'\n | 'loadstart'\n | 'progress'\n | 'timeout';\ntype DragEventTypes =\n | 'drag'\n | 'dragend'\n | 'dragenter'\n | 'dragexit'\n | 'dragleave'\n | 'dragover'\n | 'dragstart'\n | 'drop';\ntype PointerEventTypes =\n | 'pointerover'\n | 'pointerenter'\n | 'pointerdown'\n | 'pointermove'\n | 'pointerup'\n | 'pointercancel'\n | 'pointerout'\n | 'pointerleave'\n | 'gotpointercapture'\n | 'lostpointercapture';\ntype AnimationEventTypes =\n | 'animationstart'\n | 'animationend'\n | 'animationiteration';\ntype ClipboardEventTypes = 'clipboardchange' | 'cut' | 'copy' | 'paste';\ntype TransitionEventTypes =\n | 'transitionrun'\n | 'transitionstart'\n | 'transitionend'\n | 'transitioncancel';\ntype MessageEventTypes = string;\ntype BeforeUnloadEventTypes = 'beforeunload';\ntype StorageEventTypes = 'storage';\ntype SecurityPolicyViolationEventTypes = 'securitypolicyviolation';\ntype USBConnectionEventTypes = 'connect' | 'disconnect';\ntype ToggleEventTypes = 'beforetoggle' | 'toggle';\ntype EventListenerOptionsOrUseCapture =\n | boolean\n | {\n capture?: boolean,\n once?: boolean,\n passive?: boolean,\n signal?: AbortSignal,\n ...\n };\n\ndeclare class EventTarget {\n addEventListener(\n type: MouseEventTypes,\n listener: MouseEventListener,\n optionsOrUseCapture?: EventListenerOptionsOrUseCapture,\n ): void;\n addEventListener(\n type: FocusEventTypes,\n listener: FocusEventListener,\n optionsOrUseCapture?: EventListenerOptionsOrUseCapture,\n ): void;\n addEventListener(\n type: KeyboardEventTypes,\n listener: KeyboardEventListener,\n optionsOrUseCapture?: EventListenerOptionsOrUseCapture,\n ): void;\n addEventListener(\n type: InputEventTypes,\n listener: InputEventListener,\n optionsOrUseCapture?: EventListenerOptionsOrUseCapture,\n ): void;\n addEventListener(\n type: TouchEventTypes,\n listener: TouchEventListener,\n optionsOrUseCapture?: EventListenerOptionsOrUseCapture,\n ): void;\n addEventListener(\n type: WheelEventTypes,\n listener: WheelEventListener,\n optionsOrUseCapture?: EventListenerOptionsOrUseCapture,\n ): void;\n addEventListener(\n type: AbortProgressEventTypes,\n listener: AbortProgressEventListener,\n optionsOrUseCapture?: EventListenerOptionsOrUseCapture,\n ): void;\n addEventListener(\n type: ProgressEventTypes,\n listener: ProgressEventListener,\n optionsOrUseCapture?: EventListenerOptionsOrUseCapture,\n ): void;\n addEventListener(\n type: DragEventTypes,\n listener: DragEventListener,\n optionsOrUseCapture?: EventListenerOptionsOrUseCapture,\n ): void;\n addEventListener(\n type: PointerEventTypes,\n listener: PointerEventListener,\n optionsOrUseCapture?: EventListenerOptionsOrUseCapture,\n ): void;\n addEventListener(\n type: AnimationEventTypes,\n listener: AnimationEventListener,\n optionsOrUseCapture?: EventListenerOptionsOrUseCapture,\n ): void;\n addEventListener(\n type: ClipboardEventTypes,\n listener: ClipboardEventListener,\n optionsOrUseCapture?: EventListenerOptionsOrUseCapture,\n ): void;\n addEventListener(\n type: TransitionEventTypes,\n listener: TransitionEventListener,\n optionsOrUseCapture?: EventListenerOptionsOrUseCapture,\n ): void;\n addEventListener(\n type: MessageEventTypes,\n listener: MessageEventListener,\n optionsOrUseCapture?: EventListenerOptionsOrUseCapture,\n ): void;\n addEventListener(\n type: BeforeUnloadEventTypes,\n listener: BeforeUnloadEventListener,\n optionsOrUseCapture?: EventListenerOptionsOrUseCapture,\n ): void;\n addEventListener(\n type: StorageEventTypes,\n listener: StorageEventListener,\n optionsOrUseCapture?: EventListenerOptionsOrUseCapture,\n ): void;\n addEventListener(\n type: SecurityPolicyViolationEventTypes,\n listener: SecurityPolicyViolationEventListener,\n optionsOrUseCapture?: EventListenerOptionsOrUseCapture,\n ): void;\n addEventListener(\n type: USBConnectionEventTypes,\n listener: USBConnectionEventListener,\n optionsOrUseCapture?: EventListenerOptionsOrUseCapture,\n ): void;\n addEventListener(\n type: string,\n listener: EventListener,\n optionsOrUseCapture?: EventListenerOptionsOrUseCapture,\n ): void;\n\n removeEventListener(\n type: MouseEventTypes,\n listener: MouseEventListener,\n optionsOrUseCapture?: EventListenerOptionsOrUseCapture,\n ): void;\n removeEventListener(\n type: FocusEventTypes,\n listener: FocusEventListener,\n optionsOrUseCapture?: EventListenerOptionsOrUseCapture,\n ): void;\n removeEventListener(\n type: KeyboardEventTypes,\n listener: KeyboardEventListener,\n optionsOrUseCapture?: EventListenerOptionsOrUseCapture,\n ): void;\n removeEventListener(\n type: InputEventTypes,\n listener: InputEventListener,\n optionsOrUseCapture?: EventListenerOptionsOrUseCapture,\n ): void;\n removeEventListener(\n type: TouchEventTypes,\n listener: TouchEventListener,\n optionsOrUseCapture?: EventListenerOptionsOrUseCapture,\n ): void;\n removeEventListener(\n type: WheelEventTypes,\n listener: WheelEventListener,\n optionsOrUseCapture?: EventListenerOptionsOrUseCapture,\n ): void;\n removeEventListener(\n type: AbortProgressEventTypes,\n listener: AbortProgressEventListener,\n optionsOrUseCapture?: EventListenerOptionsOrUseCapture,\n ): void;\n removeEventListener(\n type: ProgressEventTypes,\n listener: ProgressEventListener,\n optionsOrUseCapture?: EventListenerOptionsOrUseCapture,\n ): void;\n removeEventListener(\n type: DragEventTypes,\n listener: DragEventListener,\n optionsOrUseCapture?: EventListenerOptionsOrUseCapture,\n ): void;\n removeEventListener(\n type: PointerEventTypes,\n listener: PointerEventListener,\n optionsOrUseCapture?: EventListenerOptionsOrUseCapture,\n ): void;\n removeEventListener(\n type: AnimationEventTypes,\n listener: AnimationEventListener,\n optionsOrUseCapture?: EventListenerOptionsOrUseCapture,\n ): void;\n removeEventListener(\n type: ClipboardEventTypes,\n listener: ClipboardEventListener,\n optionsOrUseCapture?: EventListenerOptionsOrUseCapture,\n ): void;\n removeEventListener(\n type: TransitionEventTypes,\n listener: TransitionEventListener,\n optionsOrUseCapture?: EventListenerOptionsOrUseCapture,\n ): void;\n removeEventListener(\n type: MessageEventTypes,\n listener: MessageEventListener,\n optionsOrUseCapture?: EventListenerOptionsOrUseCapture,\n ): void;\n removeEventListener(\n type: BeforeUnloadEventTypes,\n listener: BeforeUnloadEventListener,\n optionsOrUseCapture?: EventListenerOptionsOrUseCapture,\n ): void;\n removeEventListener(\n type: StorageEventTypes,\n listener: StorageEventListener,\n optionsOrUseCapture?: EventListenerOptionsOrUseCapture,\n ): void;\n removeEventListener(\n type: SecurityPolicyViolationEventTypes,\n listener: SecurityPolicyViolationEventListener,\n optionsOrUseCapture?: EventListenerOptionsOrUseCapture,\n ): void;\n removeEventListener(\n type: USBConnectionEventTypes,\n listener: USBConnectionEventListener,\n optionsOrUseCapture?: EventListenerOptionsOrUseCapture,\n ): void;\n removeEventListener(\n type: string,\n listener: EventListener,\n optionsOrUseCapture?: EventListenerOptionsOrUseCapture,\n ): void;\n\n attachEvent?: (type: MouseEventTypes, listener: MouseEventListener) => void;\n attachEvent?: (type: FocusEventTypes, listener: FocusEventListener) => void;\n attachEvent?: (\n type: KeyboardEventTypes,\n listener: KeyboardEventListener,\n ) => void;\n attachEvent?: (type: InputEventTypes, listener: InputEventListener) => void;\n attachEvent?: (type: TouchEventTypes, listener: TouchEventListener) => void;\n attachEvent?: (type: WheelEventTypes, listener: WheelEventListener) => void;\n attachEvent?: (\n type: AbortProgressEventTypes,\n listener: AbortProgressEventListener,\n ) => void;\n attachEvent?: (\n type: ProgressEventTypes,\n listener: ProgressEventListener,\n ) => void;\n attachEvent?: (type: DragEventTypes, listener: DragEventListener) => void;\n attachEvent?: (\n type: PointerEventTypes,\n listener: PointerEventListener,\n ) => void;\n attachEvent?: (\n type: AnimationEventTypes,\n listener: AnimationEventListener,\n ) => void;\n attachEvent?: (\n type: ClipboardEventTypes,\n listener: ClipboardEventListener,\n ) => void;\n attachEvent?: (\n type: TransitionEventTypes,\n listener: TransitionEventListener,\n ) => void;\n attachEvent?: (\n type: MessageEventTypes,\n listener: MessageEventListener,\n ) => void;\n attachEvent?: (\n type: BeforeUnloadEventTypes,\n listener: BeforeUnloadEventListener,\n ) => void;\n attachEvent?: (\n type: StorageEventTypes,\n listener: StorageEventListener,\n ) => void;\n attachEvent?: (\n type: USBConnectionEventTypes,\n listener: USBConnectionEventListener,\n ) => void;\n attachEvent?: (type: string, listener: EventListener) => void;\n\n detachEvent?: (type: MouseEventTypes, listener: MouseEventListener) => void;\n detachEvent?: (type: FocusEventTypes, listener: FocusEventListener) => void;\n detachEvent?: (\n type: KeyboardEventTypes,\n listener: KeyboardEventListener,\n ) => void;\n detachEvent?: (type: InputEventTypes, listener: InputEventListener) => void;\n detachEvent?: (type: TouchEventTypes, listener: TouchEventListener) => void;\n detachEvent?: (type: WheelEventTypes, listener: WheelEventListener) => void;\n detachEvent?: (\n type: AbortProgressEventTypes,\n listener: AbortProgressEventListener,\n ) => void;\n detachEvent?: (\n type: ProgressEventTypes,\n listener: ProgressEventListener,\n ) => void;\n detachEvent?: (type: DragEventTypes, listener: DragEventListener) => void;\n detachEvent?: (\n type: PointerEventTypes,\n listener: PointerEventListener,\n ) => void;\n detachEvent?: (\n type: AnimationEventTypes,\n listener: AnimationEventListener,\n ) => void;\n detachEvent?: (\n type: ClipboardEventTypes,\n listener: ClipboardEventListener,\n ) => void;\n detachEvent?: (\n type: TransitionEventTypes,\n listener: TransitionEventListener,\n ) => void;\n detachEvent?: (\n type: MessageEventTypes,\n listener: MessageEventListener,\n ) => void;\n detachEvent?: (\n type: BeforeUnloadEventTypes,\n listener: BeforeUnloadEventListener,\n ) => void;\n detachEvent?: (\n type: StorageEventTypes,\n listener: StorageEventListener,\n ) => void;\n detachEvent?: (\n type: USBConnectionEventTypes,\n listener: USBConnectionEventListener,\n ) => void;\n detachEvent?: (type: string, listener: EventListener) => void;\n\n dispatchEvent(evt: Event): boolean;\n\n // Deprecated\n\n cancelBubble: boolean;\n initEvent(\n eventTypeArg: string,\n canBubbleArg: boolean,\n cancelableArg: boolean,\n ): void;\n}\n\n// https://dom.spec.whatwg.org/#dictdef-eventinit\ntype Event$Init = {\n bubbles?: boolean,\n cancelable?: boolean,\n composed?: boolean,\n /** Non-standard. See `composed` instead. */\n scoped?: boolean,\n ...\n};\n\n// https://dom.spec.whatwg.org/#interface-event\ndeclare class Event {\n constructor(type: string, eventInitDict?: Event$Init): void;\n /**\n * Returns the type of event, e.g. \"click\", \"hashchange\", or \"submit\".\n */\n +type: string;\n /**\n * Returns the object to which event is dispatched (its target).\n */\n +target: EventTarget; // TODO: nullable\n /** @deprecated */\n +srcElement: Element; // TODO: nullable\n /**\n * Returns the object whose event listener's callback is currently being invoked.\n */\n +currentTarget: EventTarget; // TODO: nullable\n /**\n * Returns the invocation target objects of event's path (objects on which\n * listeners will be invoked), except for any nodes in shadow trees of which\n * the shadow root's mode is \"closed\" that are not reachable from event's\n * currentTarget.\n */\n composedPath(): Array;\n\n +NONE: number;\n +AT_TARGET: number;\n +BUBBLING_PHASE: number;\n +CAPTURING_PHASE: number;\n /**\n * Returns the event's phase, which is one of NONE, CAPTURING_PHASE, AT_TARGET,\n * and BUBBLING_PHASE.\n */\n +eventPhase: number;\n\n /**\n * When dispatched in a tree, invoking this method prevents event from reaching\n * any objects other than the current object.\n */\n stopPropagation(): void;\n /**\n * Invoking this method prevents event from reaching any registered event\n * listeners after the current one finishes running and, when dispatched in a\n * tree, also prevents event from reaching any other objects.\n */\n stopImmediatePropagation(): void;\n\n /**\n * Returns true or false depending on how event was initialized. True if\n * event goes through its target's ancestors in reverse tree order, and\n * false otherwise.\n */\n +bubbles: boolean;\n /**\n * Returns true or false depending on how event was initialized. Its\n * return value does not always carry meaning, but true can indicate\n * that part of the operation during which event was dispatched, can\n * be canceled by invoking the preventDefault() method.\n */\n +cancelable: boolean;\n // returnValue: boolean; // legacy, and some subclasses still define it as a string!\n /**\n * If invoked when the cancelable attribute value is true, and while\n * executing a listener for the event with passive set to false, signals to\n * the operation that caused event to be dispatched that it needs to be\n * canceled.\n */\n preventDefault(): void;\n /**\n * Returns true if preventDefault() was invoked successfully to indicate\n * cancelation, and false otherwise.\n */\n +defaultPrevented: boolean;\n /**\n * Returns true or false depending on how event was initialized. True if\n * event invokes listeners past a ShadowRoot node that is the root of its\n * target, and false otherwise.\n */\n +composed: boolean;\n\n /**\n * Returns true if event was dispatched by the user agent, and false otherwise.\n */\n +isTrusted: boolean;\n /**\n * Returns the event's timestamp as the number of milliseconds measured relative\n * to the time origin.\n */\n +timeStamp: number;\n\n /** Non-standard. See Event.prototype.composedPath */\n +deepPath?: () => EventTarget[];\n /** Non-standard. See Event.prototype.composed */\n +scoped: boolean;\n\n /**\n * @deprecated\n */\n initEvent(type: string, bubbles: boolean, cancelable: boolean): void;\n}\n\ntype CustomEvent$Init = { ...Event$Init, detail?: any, ... };\n\ndeclare class CustomEvent extends Event {\n constructor(type: string, eventInitDict?: CustomEvent$Init): void;\n detail: any;\n\n // deprecated\n initCustomEvent(\n type: string,\n bubbles: boolean,\n cancelable: boolean,\n detail: any,\n ): CustomEvent;\n}\n\ntype UIEvent$Init = { ...Event$Init, detail?: number, view?: any, ... };\n\ndeclare class UIEvent extends Event {\n constructor(typeArg: string, uiEventInit?: UIEvent$Init): void;\n detail: number;\n view: any;\n}\n\ndeclare class CompositionEvent extends UIEvent {\n data: string | null;\n locale: string;\n}\n\ntype MouseEvent$MouseEventInit = {\n screenX?: number,\n screenY?: number,\n clientX?: number,\n clientY?: number,\n ctrlKey?: boolean,\n shiftKey?: boolean,\n altKey?: boolean,\n metaKey?: boolean,\n button?: number,\n buttons?: number,\n region?: string | null,\n relatedTarget?: EventTarget | null,\n ...\n};\n\ndeclare class MouseEvent extends UIEvent {\n constructor(\n typeArg: string,\n mouseEventInit?: MouseEvent$MouseEventInit,\n ): void;\n altKey: boolean;\n button: number;\n buttons: number;\n clientX: number;\n clientY: number;\n ctrlKey: boolean;\n metaKey: boolean;\n movementX: number;\n movementY: number;\n offsetX: number;\n offsetY: number;\n pageX: number;\n pageY: number;\n region: string | null;\n relatedTarget: EventTarget | null;\n screenX: number;\n screenY: number;\n shiftKey: boolean;\n x: number;\n y: number;\n getModifierState(keyArg: string): boolean;\n}\n\ndeclare class FocusEvent extends UIEvent {\n relatedTarget: ?EventTarget;\n}\n\ntype WheelEvent$Init = {\n ...MouseEvent$MouseEventInit,\n deltaX?: number,\n deltaY?: number,\n deltaZ?: number,\n deltaMode?: 0x00 | 0x01 | 0x02,\n ...\n};\n\ndeclare class WheelEvent extends MouseEvent {\n static +DOM_DELTA_PIXEL: 0x00;\n static +DOM_DELTA_LINE: 0x01;\n static +DOM_DELTA_PAGE: 0x02;\n\n constructor(type: string, eventInitDict?: WheelEvent$Init): void;\n +deltaX: number;\n +deltaY: number;\n +deltaZ: number;\n +deltaMode: 0x00 | 0x01 | 0x02;\n}\n\ndeclare class DragEvent extends MouseEvent {\n dataTransfer: ?DataTransfer; // readonly\n}\n\ntype PointerEvent$PointerEventInit = MouseEvent$MouseEventInit & {\n pointerId?: number,\n width?: number,\n height?: number,\n pressure?: number,\n tangentialPressure?: number,\n tiltX?: number,\n tiltY?: number,\n twist?: number,\n pointerType?: string,\n isPrimary?: boolean,\n ...\n};\n\ndeclare class PointerEvent extends MouseEvent {\n constructor(\n typeArg: string,\n pointerEventInit?: PointerEvent$PointerEventInit,\n ): void;\n pointerId: number;\n width: number;\n height: number;\n pressure: number;\n tangentialPressure: number;\n tiltX: number;\n tiltY: number;\n twist: number;\n pointerType: string;\n isPrimary: boolean;\n}\n\ndeclare class ProgressEvent extends Event {\n lengthComputable: boolean;\n loaded: number;\n total: number;\n\n // Deprecated\n initProgressEvent(\n typeArg: string,\n canBubbleArg: boolean,\n cancelableArg: boolean,\n lengthComputableArg: boolean,\n loadedArg: number,\n totalArg: number,\n ): void;\n}\n\ndeclare class PromiseRejectionEvent extends Event {\n promise: Promise;\n reason: any;\n}\n\ntype PageTransitionEventInit = {\n ...Event$Init,\n persisted: boolean,\n ...\n};\n\n// https://html.spec.whatwg.org/multipage/browsing-the-web.html#the-pagetransitionevent-interface\ndeclare class PageTransitionEvent extends Event {\n constructor(type: string, init?: PageTransitionEventInit): void;\n +persisted: boolean;\n}\n\n// used for websockets and postMessage, for example. See:\n// https://www.w3.org/TR/2011/WD-websockets-20110419/\n// and\n// https://www.w3.org/TR/2008/WD-html5-20080610/comms.html\n// and\n// https://html.spec.whatwg.org/multipage/comms.html#the-messageevent-interfaces\ndeclare class MessageEvent extends Event {\n data: mixed;\n origin: string;\n lastEventId: string;\n source: WindowProxy;\n}\n\n// https://w3c.github.io/uievents/#idl-keyboardeventinit\ntype KeyboardEvent$Init = {\n ...UIEvent$Init,\n /**\n * Initializes the `key` attribute of the KeyboardEvent object to the unicode\n * character string representing the meaning of a key after taking into\n * account all keyboard modifiers (such as shift-state). This value is the\n * final effective value of the key. If the key is not a printable character,\n * then it should be one of the key values defined in [UIEvents-Key](https://www.w3.org/TR/uievents-key/).\n *\n * NOTE: not `null`, this results in `evt.key === 'null'`!\n */\n key?: string | void,\n /**\n * Initializes the `code` attribute of the KeyboardEvent object to the unicode\n * character string representing the key that was pressed, ignoring any\n * keyboard modifications such as keyboard layout. This value should be one\n * of the code values defined in [UIEvents-Code](https://www.w3.org/TR/uievents-code/).\n *\n * NOTE: not `null`, this results in `evt.code === 'null'`!\n */\n code?: string | void,\n /**\n * Initializes the `location` attribute of the KeyboardEvent object to one of\n * the following location numerical constants:\n *\n * DOM_KEY_LOCATION_STANDARD (numerical value 0)\n * DOM_KEY_LOCATION_LEFT (numerical value 1)\n * DOM_KEY_LOCATION_RIGHT (numerical value 2)\n * DOM_KEY_LOCATION_NUMPAD (numerical value 3)\n */\n location?: number,\n /**\n * Initializes the `ctrlKey` attribute of the KeyboardEvent object to true if\n * the Control key modifier is to be considered active, false otherwise.\n */\n ctrlKey?: boolean,\n /**\n * Initializes the `shiftKey` attribute of the KeyboardEvent object to true if\n * the Shift key modifier is to be considered active, false otherwise.\n */\n shiftKey?: boolean,\n /**\n * Initializes the `altKey` attribute of the KeyboardEvent object to true if\n * the Alt (alternative) (or Option) key modifier is to be considered active,\n * false otherwise.\n */\n altKey?: boolean,\n /**\n * Initializes the `metaKey` attribute of the KeyboardEvent object to true if\n * the Meta key modifier is to be considered active, false otherwise.\n */\n metaKey?: boolean,\n /**\n * Initializes the `repeat` attribute of the KeyboardEvent object. This\n * attribute should be set to true if the the current KeyboardEvent is\n * considered part of a repeating sequence of similar events caused by the\n * long depression of any single key, false otherwise.\n */\n repeat?: boolean,\n /**\n * Initializes the `isComposing` attribute of the KeyboardEvent object. This\n * attribute should be set to true if the event being constructed occurs as\n * part of a composition sequence, false otherwise.\n */\n isComposing?: boolean,\n /**\n * Initializes the `charCode` attribute of the KeyboardEvent to the Unicode\n * code point for the event’s character.\n */\n charCode?: number,\n /**\n * Initializes the `keyCode` attribute of the KeyboardEvent to the system-\n * and implementation-dependent numerical code signifying the unmodified\n * identifier associated with the key pressed.\n */\n keyCode?: number,\n /** Initializes the `which` attribute */\n which?: number,\n ...\n};\n\n// https://w3c.github.io/uievents/#idl-keyboardevent\ndeclare class KeyboardEvent extends UIEvent {\n constructor(typeArg: string, init?: KeyboardEvent$Init): void;\n\n /** `true` if the Alt (alternative) (or \"Option\") key modifier was active. */\n +altKey: boolean;\n /**\n * Holds a string that identifies the physical key being pressed. The value\n * is not affected by the current keyboard layout or modifier state, so a\n * particular key will always return the same value.\n */\n +code: string;\n /** `true` if the Control (control) key modifier was active. */\n +ctrlKey: boolean;\n /**\n * `true` if the key event occurs as part of a composition session, i.e.,\n * after a `compositionstart` event and before the corresponding\n * `compositionend` event.\n */\n +isComposing: boolean;\n /**\n * Holds a [key attribute value](https://www.w3.org/TR/uievents-key/#key-attribute-value)\n * corresponding to the key pressed. */\n +key: string;\n /** An indication of the logical location of the key on the device. */\n +location: number;\n /** `true` if the meta (Meta) key (or \"Command\") modifier was active. */\n +metaKey: boolean;\n /** `true` if the key has been pressed in a sustained manner. */\n +repeat: boolean;\n /** `true` if the shift (Shift) key modifier was active. */\n +shiftKey: boolean;\n\n /**\n * Queries the state of a modifier using a key value.\n *\n * Returns `true` if it is a modifier key and the modifier is activated,\n * `false` otherwise.\n */\n getModifierState(keyArg?: string): boolean;\n\n /**\n * Holds a character value, for keypress events which generate character\n * input. The value is the Unicode reference number (code point) of that\n * character (e.g. event.charCode = event.key.charCodeAt(0) for printable\n * characters). For keydown or keyup events, the value of charCode is 0.\n *\n * @deprecated You should use KeyboardEvent.key instead, if available.\n */\n +charCode: number;\n /**\n * Holds a system- and implementation-dependent numerical code signifying\n * the unmodified identifier associated with the key pressed. Unlike the\n * `key` attribute, the set of possible values are not normatively defined.\n * Typically, these value of the keyCode SHOULD represent the decimal\n * codepoint in ASCII or Windows 1252, but MAY be drawn from a different\n * appropriate character set. Implementations that are unable to identify\n * a key use the key value 0.\n *\n * @deprecated You should use KeyboardEvent.key instead, if available.\n */\n +keyCode: number;\n /**\n * Holds a system- and implementation-dependent numerical code signifying\n * the unmodified identifier associated with the key pressed. In most cases,\n * the value is identical to keyCode.\n *\n * @deprecated You should use KeyboardEvent.key instead, if available.\n */\n +which: number;\n}\n\ntype InputEvent$Init = {\n ...UIEvent$Init,\n inputType?: string,\n data?: string,\n dataTransfer?: DataTransfer,\n isComposing?: boolean,\n ranges?: Array, // TODO: StaticRange\n ...\n};\n\ndeclare class InputEvent extends UIEvent {\n constructor(typeArg: string, inputEventInit: InputEvent$Init): void;\n +data: string | null;\n +dataTransfer: DataTransfer | null;\n +inputType: string;\n +isComposing: boolean;\n getTargetRanges(): Array; // TODO: StaticRange\n}\n\ndeclare class AnimationEvent extends Event {\n animationName: string;\n elapsedTime: number;\n pseudoElement: string;\n\n // deprecated\n\n initAnimationEvent: (\n type: 'animationstart' | 'animationend' | 'animationiteration',\n canBubble: boolean,\n cancelable: boolean,\n animationName: string,\n elapsedTime: number,\n ) => void;\n}\n\n// https://www.w3.org/TR/touch-events/#idl-def-Touch\ndeclare class Touch {\n clientX: number;\n clientY: number;\n identifier: number;\n pageX: number;\n pageY: number;\n screenX: number;\n screenY: number;\n target: EventTarget;\n}\n\n// https://www.w3.org/TR/touch-events/#idl-def-TouchList\n// TouchList#item(index) will return null if n > #length. Should #item's\n// return type just been Touch?\ndeclare class TouchList {\n @@iterator(): Iterator;\n length: number;\n item(index: number): null | Touch;\n [index: number]: Touch;\n}\n\n// https://www.w3.org/TR/touch-events/#touchevent-interface\ndeclare class TouchEvent extends UIEvent {\n altKey: boolean;\n changedTouches: TouchList;\n ctrlKey: boolean;\n metaKey: boolean;\n shiftKey: boolean;\n targetTouches: TouchList;\n touches: TouchList;\n}\n\n// https://www.w3.org/TR/clipboard-apis/#typedefdef-clipboarditemdata\n// Raw string | Blob are allowed per https://webidl.spec.whatwg.org/#es-promise\ntype ClipboardItemData = string | Blob | Promise;\n\ntype PresentationStyle = 'attachment' | 'inline' | 'unspecified';\n\ntype ClipboardItemOptions = {\n presentationStyle?: PresentationStyle,\n ...\n};\n\ndeclare class ClipboardItem {\n +types: $ReadOnlyArray;\n getType(type: string): Promise;\n constructor(\n items: { [type: string]: ClipboardItemData },\n options?: ClipboardItemOptions,\n ): void;\n}\n\n// https://w3c.github.io/clipboard-apis/ as of 15 May 2018\ntype ClipboardEvent$Init = {\n ...Event$Init,\n clipboardData: DataTransfer | null,\n ...\n};\n\ndeclare class ClipboardEvent extends Event {\n constructor(type: ClipboardEventTypes, eventInit?: ClipboardEvent$Init): void;\n +clipboardData: ?DataTransfer; // readonly\n}\n\n// https://www.w3.org/TR/2017/WD-css-transitions-1-20171130/#interface-transitionevent\ntype TransitionEvent$Init = {\n ...Event$Init,\n propertyName: string,\n elapsedTime: number,\n pseudoElement: string,\n ...\n};\n\ndeclare class TransitionEvent extends Event {\n constructor(\n type: TransitionEventTypes,\n eventInit?: TransitionEvent$Init,\n ): void;\n\n +propertyName: string; // readonly\n +elapsedTime: number; // readonly\n +pseudoElement: string; // readonly\n}\n\ndeclare class SecurityPolicyViolationEvent extends Event {\n +documentURI: string;\n +referrer: string;\n +blockedURI: string;\n +effectiveDirective: string;\n +violatedDirective: string;\n +originalPolicy: string;\n +sourceFile: string;\n +sample: string;\n +disposition: 'enforce' | 'report';\n +statusCode: number;\n +lineNumber: number;\n +columnNumber: number;\n}\n\n// https://developer.mozilla.org/en-US/docs/Web/API/Scheduler\ndeclare class TaskSignal extends AbortSignal {\n +priority: number;\n}\n\ntype SchedulerPostTaskOptions = {\n priority?: 'user-blocking' | 'user-visible' | 'background',\n signal?: TaskSignal | AbortSignal,\n delay?: number,\n};\n\ndeclare class Scheduler {\n postTask(\n callback: () => T,\n options?: SchedulerPostTaskOptions,\n ): Promise;\n yield(): Promise;\n}\n\n// https://developer.mozilla.org/en-US/docs/Web/API/Window/structuredClone\ndeclare function structuredClone(\n value: T,\n options?: {| transfer: any[] |},\n): T;\n\n// https://developer.mozilla.org/en-US/docs/Web/API/USBConnectionEvent\ndeclare class USBConnectionEvent extends Event {\n device: USBDevice;\n}\n\n// TODO: *Event\n\ndeclare class AbortController {\n constructor(): void;\n +signal: AbortSignal;\n abort(reason?: any): void;\n}\n\ndeclare class AbortSignal extends EventTarget {\n +aborted: boolean;\n +reason: any;\n abort(reason?: any): AbortSignal;\n onabort: (event: Event) => mixed;\n throwIfAborted(): void;\n timeout(time: number): AbortSignal;\n}\n\ndeclare class Node extends EventTarget {\n baseURI: ?string;\n childNodes: NodeList;\n firstChild: ?Node;\n +isConnected: boolean;\n lastChild: ?Node;\n nextSibling: ?Node;\n nodeName: string;\n nodeType: number;\n nodeValue: string;\n ownerDocument: Document;\n parentElement: ?Element;\n parentNode: ?Node;\n previousSibling: ?Node;\n rootNode: Node;\n textContent: string;\n appendChild(newChild: T): T;\n cloneNode(deep?: boolean): this;\n compareDocumentPosition(other: Node): number;\n contains(other: ?Node): boolean;\n getRootNode(options?: { composed: boolean, ... }): Node;\n hasChildNodes(): boolean;\n insertBefore(newChild: T, refChild?: ?Node): T;\n isDefaultNamespace(namespaceURI: string): boolean;\n isEqualNode(arg: Node): boolean;\n isSameNode(other: Node): boolean;\n lookupNamespaceURI(prefix: string): string;\n lookupPrefix(namespaceURI: string): string;\n normalize(): void;\n removeChild(oldChild: T): T;\n replaceChild(newChild: Node, oldChild: T): T;\n replaceChildren(...nodes: $ReadOnlyArray): void;\n static ATTRIBUTE_NODE: number;\n static CDATA_SECTION_NODE: number;\n static COMMENT_NODE: number;\n static DOCUMENT_FRAGMENT_NODE: number;\n static DOCUMENT_NODE: number;\n static DOCUMENT_POSITION_CONTAINED_BY: number;\n static DOCUMENT_POSITION_CONTAINS: number;\n static DOCUMENT_POSITION_DISCONNECTED: number;\n static DOCUMENT_POSITION_FOLLOWING: number;\n static DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC: number;\n static DOCUMENT_POSITION_PRECEDING: number;\n static DOCUMENT_TYPE_NODE: number;\n static ELEMENT_NODE: number;\n static ENTITY_NODE: number;\n static ENTITY_REFERENCE_NODE: number;\n static NOTATION_NODE: number;\n static PROCESSING_INSTRUCTION_NODE: number;\n static TEXT_NODE: number;\n\n // Non-standard\n innerText?: string;\n outerText?: string;\n}\n\ndeclare class NodeList {\n @@iterator(): Iterator;\n length: number;\n item(index: number): T;\n [index: number]: T;\n\n forEach(\n callbackfn: (this: This, value: T, index: number, list: NodeList) => any,\n thisArg: This,\n ): void;\n entries(): Iterator<[number, T]>;\n keys(): Iterator;\n values(): Iterator;\n}\n\ndeclare class NamedNodeMap {\n @@iterator(): Iterator;\n length: number;\n removeNamedItemNS(namespaceURI: string, localName: string): Attr;\n item(index: number): Attr;\n [index: number | string]: Attr;\n removeNamedItem(name: string): Attr;\n getNamedItem(name: string): Attr;\n setNamedItem(arg: Attr): Attr;\n getNamedItemNS(namespaceURI: string, localName: string): Attr;\n setNamedItemNS(arg: Attr): Attr;\n}\n\ndeclare class Attr extends Node {\n isId: boolean;\n specified: boolean;\n ownerElement: Element | null;\n value: string;\n name: string;\n namespaceURI: string | null;\n prefix: string | null;\n localName: string;\n}\n\ndeclare class HTMLCollection<+Elem: Element> {\n @@iterator(): Iterator;\n length: number;\n item(nameOrIndex?: any, optionalIndex?: any): Elem | null;\n namedItem(name: string): Elem | null;\n [index: number | string]: Elem;\n}\n\n// from https://www.w3.org/TR/custom-elements/#extensions-to-document-interface-to-register\n// See also https://github.com/w3c/webcomponents/\ntype ElementRegistrationOptions = {\n +prototype?: {\n // from https://www.w3.org/TR/custom-elements/#types-of-callbacks\n // See also https://github.com/w3c/webcomponents/\n +createdCallback?: () => mixed,\n +attachedCallback?: () => mixed,\n +detachedCallback?: () => mixed,\n +attributeChangedCallback?: (( // attribute is set\n attributeLocalName: string,\n oldAttributeValue: null,\n newAttributeValue: string,\n attributeNamespace: string,\n ) => mixed) &\n // attribute is changed\n ((\n attributeLocalName: string,\n oldAttributeValue: string,\n newAttributeValue: string,\n attributeNamespace: string,\n ) => mixed) &\n // attribute is removed\n ((\n attributeLocalName: string,\n oldAttributeValue: string,\n newAttributeValue: null,\n attributeNamespace: string,\n ) => mixed),\n ...\n },\n +extends?: string,\n ...\n};\n\ntype ElementCreationOptions = { is: string, ... };\n\ndeclare class MutationRecord {\n type: 'attributes' | 'characterData' | 'childList';\n target: Node;\n addedNodes: NodeList;\n removedNodes: NodeList;\n previousSibling: ?Node;\n nextSibling: ?Node;\n attributeName: ?string;\n attributeNamespace: ?string;\n oldValue: ?string;\n}\n\ntype MutationObserverInitRequired =\n | { childList: true, ... }\n | { attributes: true, ... }\n | { characterData: true, ... };\n\ndeclare type MutationObserverInit = MutationObserverInitRequired & {\n subtree?: boolean,\n attributeOldValue?: boolean,\n characterDataOldValue?: boolean,\n attributeFilter?: Array,\n ...\n};\n\ndeclare class MutationObserver {\n constructor(\n callback: (arr: Array, observer: MutationObserver) => mixed,\n ): void;\n observe(target: Node, options: MutationObserverInit): void;\n takeRecords(): Array;\n disconnect(): void;\n}\n\ndeclare class Document extends Node {\n // +timeline: DocumentTimeline;\n // getAnimations(): Array;\n +URL: string;\n adoptNode(source: T): T;\n anchors: HTMLCollection;\n applets: HTMLCollection;\n body: HTMLBodyElement | null;\n +characterSet: string;\n /**\n * Legacy alias of `characterSet`\n * @deprecated\n */\n +charset: string;\n close(): void;\n +contentType: string;\n cookie: string;\n createAttribute(name: string): Attr;\n createAttributeNS(namespaceURI: string | null, qualifiedName: string): Attr;\n createCDATASection(data: string): Text;\n createComment(data: string): Comment;\n createDocumentFragment(): DocumentFragment;\n createElement>(\n localName: TName,\n options?: string | ElementCreationOptions,\n ): HTMLElementTagNameMap[TName];\n createElementNS>(\n namespaceURI: 'http://www.w3.org/1999/xhtml',\n qualifiedName: TName,\n options?: string | ElementCreationOptions,\n ): HTMLElementTagNameMap[TName];\n createElementNS(\n namespaceURI: string | null,\n qualifiedName: string,\n options?: string | ElementCreationOptions,\n ): Element;\n createTextNode(data: string): Text;\n currentScript: HTMLScriptElement | null;\n dir: 'rtl' | 'ltr';\n +doctype: DocumentType | null;\n +documentElement: HTMLElement | null;\n documentMode: number;\n +documentURI: string;\n domain: string | null;\n embeds: HTMLCollection;\n exitFullscreen(): Promise;\n queryCommandSupported(cmdID: string): boolean;\n execCommand(cmdID: string, showUI?: boolean, value?: any): boolean;\n forms: HTMLCollection;\n fullscreenElement: Element | null;\n fullscreenEnabled: boolean;\n getElementsByClassName(classNames: string): HTMLCollection;\n getElementsByName(elementName: string): HTMLCollection;\n getElementsByTagName>(\n qualifiedName: TName,\n ): HTMLCollection;\n getElementsByTagNameNS>(\n namespaceURI: 'http://www.w3.org/1999/xhtml',\n qualifiedName: TName,\n ): HTMLCollection;\n getElementsByTagNameNS(\n namespaceURI: string | null,\n qualifiedName: string,\n ): HTMLCollection;\n head: HTMLHeadElement | null;\n images: HTMLCollection;\n +implementation: DOMImplementation;\n importNode(importedNode: T, deep: boolean): T;\n /**\n * Legacy alias of `characterSet`\n * @deprecated\n */\n +inputEncoding: string;\n lastModified: string;\n links: HTMLCollection;\n media: string;\n open(url?: string, name?: string, features?: string, replace?: boolean): any;\n readyState: string;\n referrer: string;\n scripts: HTMLCollection;\n scrollingElement: HTMLElement | null;\n title: string;\n visibilityState: 'visible' | 'hidden' | 'prerender' | 'unloaded';\n write(...content: Array): void;\n writeln(...content: Array): void;\n xmlEncoding: string;\n xmlStandalone: boolean;\n xmlVersion: string;\n\n registerElement(type: string, options?: ElementRegistrationOptions): any;\n getSelection(): Selection | null;\n\n // 6.4.6 Focus management APIs\n activeElement: HTMLElement | null;\n hasFocus(): boolean;\n\n // extension\n location: Location;\n createEvent(eventInterface: 'CustomEvent'): CustomEvent;\n createEvent(eventInterface: string): Event;\n createRange(): Range;\n elementFromPoint(x: number, y: number): HTMLElement | null;\n elementsFromPoint(x: number, y: number): Array;\n defaultView: any;\n +compatMode: 'BackCompat' | 'CSS1Compat';\n hidden: boolean;\n\n // Pointer Lock specification\n exitPointerLock(): void;\n pointerLockElement: Element | null;\n\n // from ParentNode interface\n childElementCount: number;\n children: HTMLCollection;\n firstElementChild: ?Element;\n lastElementChild: ?Element;\n append(...nodes: Array): void;\n prepend(...nodes: Array): void;\n\n querySelector>(\n selector: TSelector,\n ): HTMLElementTagNameMap[TSelector] | null;\n querySelectorAll>(\n selector: TSelector,\n ): NodeList;\n // Interface DocumentTraversal\n // http://www.w3.org/TR/2000/REC-DOM-Level-2-Traversal-Range-20001113/traversal.html#Traversal-Document\n\n // Not all combinations of RootNodeT and whatToShow are logically possible.\n // The bitmasks NodeFilter.SHOW_CDATA_SECTION,\n // NodeFilter.SHOW_ENTITY_REFERENCE, NodeFilter.SHOW_ENTITY, and\n // NodeFilter.SHOW_NOTATION are deprecated and do not correspond to types\n // that Flow knows about.\n\n // NodeFilter.SHOW_ATTRIBUTE is also deprecated, but corresponds to the\n // type Attr. While there is no reason to prefer it to Node.attributes,\n // it does have meaning and can be typed: When (whatToShow &\n // NodeFilter.SHOW_ATTRIBUTE === 1), RootNodeT must be Attr, and when\n // RootNodeT is Attr, bitmasks other than NodeFilter.SHOW_ATTRIBUTE are\n // meaningless.\n createNodeIterator(\n root: RootNodeT,\n whatToShow: 2,\n filter?: NodeFilterInterface,\n ): NodeIterator;\n createTreeWalker(\n root: RootNodeT,\n whatToShow: 2,\n filter?: NodeFilterInterface,\n entityReferenceExpansion?: boolean,\n ): TreeWalker;\n\n // NodeFilter.SHOW_PROCESSING_INSTRUCTION is not implemented because Flow\n // does not currently define a ProcessingInstruction class.\n\n // When (whatToShow & NodeFilter.SHOW_DOCUMENT === 1 || whatToShow &\n // NodeFilter.SHOW_DOCUMENT_TYPE === 1), RootNodeT must be Document.\n createNodeIterator(\n root: RootNodeT,\n whatToShow: 256,\n filter?: NodeFilterInterface,\n ): NodeIterator;\n createNodeIterator(\n root: RootNodeT,\n whatToShow: 257,\n filter?: NodeFilterInterface,\n ): NodeIterator;\n createNodeIterator(\n root: RootNodeT,\n whatToShow: 260,\n filter?: NodeFilterInterface,\n ): NodeIterator;\n createNodeIterator(\n root: RootNodeT,\n whatToShow: 261,\n filter?: NodeFilterInterface,\n ): NodeIterator;\n createNodeIterator(\n root: RootNodeT,\n whatToShow: 384,\n filter?: NodeFilterInterface,\n ): NodeIterator;\n createNodeIterator(\n root: RootNodeT,\n whatToShow: 385,\n filter?: NodeFilterInterface,\n ): NodeIterator;\n createNodeIterator(\n root: RootNodeT,\n whatToShow: 388,\n filter?: NodeFilterInterface,\n ): NodeIterator;\n createNodeIterator(\n root: RootNodeT,\n whatToShow: 389,\n filter?: NodeFilterInterface,\n ): NodeIterator;\n createNodeIterator(\n root: RootNodeT,\n whatToShow: 512,\n filter?: NodeFilterInterface,\n ): NodeIterator;\n createNodeIterator(\n root: RootNodeT,\n whatToShow: 513,\n filter?: NodeFilterInterface,\n ): NodeIterator;\n createNodeIterator(\n root: RootNodeT,\n whatToShow: 516,\n filter?: NodeFilterInterface,\n ): NodeIterator;\n createNodeIterator(\n root: RootNodeT,\n whatToShow: 517,\n filter?: NodeFilterInterface,\n ): NodeIterator;\n createNodeIterator(\n root: RootNodeT,\n whatToShow: 640,\n filter?: NodeFilterInterface,\n ): NodeIterator;\n createNodeIterator(\n root: RootNodeT,\n whatToShow: 641,\n filter?: NodeFilterInterface,\n ): NodeIterator;\n createNodeIterator(\n root: RootNodeT,\n whatToShow: 644,\n filter?: NodeFilterInterface,\n ): NodeIterator;\n createNodeIterator(\n root: RootNodeT,\n whatToShow: 645,\n filter?: NodeFilterInterface,\n ): NodeIterator;\n createNodeIterator(\n root: RootNodeT,\n whatToShow: 768,\n filter?: NodeFilterInterface,\n ): NodeIterator;\n createNodeIterator(\n root: RootNodeT,\n whatToShow: 769,\n filter?: NodeFilterInterface,\n ): NodeIterator;\n createNodeIterator(\n root: RootNodeT,\n whatToShow: 772,\n filter?: NodeFilterInterface,\n ): NodeIterator;\n createNodeIterator(\n root: RootNodeT,\n whatToShow: 773,\n filter?: NodeFilterInterface,\n ): NodeIterator;\n createNodeIterator(\n root: RootNodeT,\n whatToShow: 896,\n filter?: NodeFilterInterface,\n ): NodeIterator;\n createNodeIterator(\n root: RootNodeT,\n whatToShow: 897,\n filter?: NodeFilterInterface,\n ): NodeIterator;\n createNodeIterator(\n root: RootNodeT,\n whatToShow: 900,\n filter?: NodeFilterInterface,\n ): NodeIterator;\n createNodeIterator(\n root: RootNodeT,\n whatToShow: 901,\n filter?: NodeFilterInterface,\n ): NodeIterator<\n RootNodeT,\n DocumentType | Document | Element | Text | Comment,\n >;\n createTreeWalker(\n root: RootNodeT,\n whatToShow: 256,\n filter?: NodeFilterInterface,\n entityReferenceExpansion?: boolean,\n ): TreeWalker;\n createTreeWalker(\n root: RootNodeT,\n whatToShow: 257,\n filter?: NodeFilterInterface,\n entityReferenceExpansion?: boolean,\n ): TreeWalker;\n createTreeWalker(\n root: RootNodeT,\n whatToShow: 260,\n filter?: NodeFilterInterface,\n entityReferenceExpansion?: boolean,\n ): TreeWalker;\n createTreeWalker(\n root: RootNodeT,\n whatToShow: 261,\n filter?: NodeFilterInterface,\n entityReferenceExpansion?: boolean,\n ): TreeWalker;\n createTreeWalker(\n root: RootNodeT,\n whatToShow: 384,\n filter?: NodeFilterInterface,\n entityReferenceExpansion?: boolean,\n ): TreeWalker;\n createTreeWalker(\n root: RootNodeT,\n whatToShow: 385,\n filter?: NodeFilterInterface,\n entityReferenceExpansion?: boolean,\n ): TreeWalker;\n createTreeWalker(\n root: RootNodeT,\n whatToShow: 388,\n filter?: NodeFilterInterface,\n entityReferenceExpansion?: boolean,\n ): TreeWalker;\n createTreeWalker(\n root: RootNodeT,\n whatToShow: 389,\n filter?: NodeFilterInterface,\n entityReferenceExpansion?: boolean,\n ): TreeWalker;\n createTreeWalker(\n root: RootNodeT,\n whatToShow: 512,\n filter?: NodeFilterInterface,\n entityReferenceExpansion?: boolean,\n ): TreeWalker;\n createTreeWalker(\n root: RootNodeT,\n whatToShow: 513,\n filter?: NodeFilterInterface,\n entityReferenceExpansion?: boolean,\n ): TreeWalker;\n createTreeWalker(\n root: RootNodeT,\n whatToShow: 516,\n filter?: NodeFilterInterface,\n entityReferenceExpansion?: boolean,\n ): TreeWalker;\n createTreeWalker(\n root: RootNodeT,\n whatToShow: 517,\n filter?: NodeFilterInterface,\n entityReferenceExpansion?: boolean,\n ): TreeWalker;\n createTreeWalker(\n root: RootNodeT,\n whatToShow: 640,\n filter?: NodeFilterInterface,\n entityReferenceExpansion?: boolean,\n ): TreeWalker;\n createTreeWalker(\n root: RootNodeT,\n whatToShow: 641,\n filter?: NodeFilterInterface,\n entityReferenceExpansion?: boolean,\n ): TreeWalker;\n createTreeWalker(\n root: RootNodeT,\n whatToShow: 644,\n filter?: NodeFilterInterface,\n entityReferenceExpansion?: boolean,\n ): TreeWalker;\n createTreeWalker(\n root: RootNodeT,\n whatToShow: 645,\n filter?: NodeFilterInterface,\n entityReferenceExpansion?: boolean,\n ): TreeWalker;\n createTreeWalker(\n root: RootNodeT,\n whatToShow: 768,\n filter?: NodeFilterInterface,\n entityReferenceExpansion?: boolean,\n ): TreeWalker;\n createTreeWalker(\n root: RootNodeT,\n whatToShow: 769,\n filter?: NodeFilterInterface,\n entityReferenceExpansion?: boolean,\n ): TreeWalker;\n createTreeWalker(\n root: RootNodeT,\n whatToShow: 772,\n filter?: NodeFilterInterface,\n entityReferenceExpansion?: boolean,\n ): TreeWalker;\n createTreeWalker(\n root: RootNodeT,\n whatToShow: 773,\n filter?: NodeFilterInterface,\n entityReferenceExpansion?: boolean,\n ): TreeWalker;\n createTreeWalker(\n root: RootNodeT,\n whatToShow: 896,\n filter?: NodeFilterInterface,\n entityReferenceExpansion?: boolean,\n ): TreeWalker;\n createTreeWalker(\n root: RootNodeT,\n whatToShow: 897,\n filter?: NodeFilterInterface,\n entityReferenceExpansion?: boolean,\n ): TreeWalker;\n createTreeWalker(\n root: RootNodeT,\n whatToShow: 900,\n filter?: NodeFilterInterface,\n entityReferenceExpansion?: boolean,\n ): TreeWalker;\n createTreeWalker(\n root: RootNodeT,\n whatToShow: 901,\n filter?: NodeFilterInterface,\n entityReferenceExpansion?: boolean,\n ): TreeWalker;\n\n // When (whatToShow & NodeFilter.SHOW_DOCUMENT_FRAGMENT === 1), RootNodeT\n // must be a DocumentFragment.\n createNodeIterator(\n root: RootNodeT,\n whatToShow: 1024,\n filter?: NodeFilterInterface,\n ): NodeIterator;\n createNodeIterator(\n root: RootNodeT,\n whatToShow: 1025,\n filter?: NodeFilterInterface,\n ): NodeIterator;\n createNodeIterator(\n root: RootNodeT,\n whatToShow: 1028,\n filter?: NodeFilterInterface,\n ): NodeIterator;\n createNodeIterator(\n root: RootNodeT,\n whatToShow: 1029,\n filter?: NodeFilterInterface,\n ): NodeIterator;\n createNodeIterator(\n root: RootNodeT,\n whatToShow: 1152,\n filter?: NodeFilterInterface,\n ): NodeIterator;\n createNodeIterator(\n root: RootNodeT,\n whatToShow: 1153,\n filter?: NodeFilterInterface,\n ): NodeIterator;\n createNodeIterator(\n root: RootNodeT,\n whatToShow: 1156,\n filter?: NodeFilterInterface,\n ): NodeIterator;\n createNodeIterator(\n root: RootNodeT,\n whatToShow: 1157,\n filter?: NodeFilterInterface,\n ): NodeIterator;\n createTreeWalker(\n root: RootNodeT,\n whatToShow: 1024,\n filter?: NodeFilterInterface,\n entityReferenceExpansion?: boolean,\n ): TreeWalker;\n createTreeWalker(\n root: RootNodeT,\n whatToShow: 1025,\n filter?: NodeFilterInterface,\n entityReferenceExpansion?: boolean,\n ): TreeWalker;\n createTreeWalker(\n root: RootNodeT,\n whatToShow: 1028,\n filter?: NodeFilterInterface,\n entityReferenceExpansion?: boolean,\n ): TreeWalker;\n createTreeWalker(\n root: RootNodeT,\n whatToShow: 1029,\n filter?: NodeFilterInterface,\n entityReferenceExpansion?: boolean,\n ): TreeWalker;\n createTreeWalker(\n root: RootNodeT,\n whatToShow: 1152,\n filter?: NodeFilterInterface,\n entityReferenceExpansion?: boolean,\n ): TreeWalker;\n createTreeWalker(\n root: RootNodeT,\n whatToShow: 1153,\n filter?: NodeFilterInterface,\n entityReferenceExpansion?: boolean,\n ): TreeWalker;\n createTreeWalker(\n root: RootNodeT,\n whatToShow: 1156,\n filter?: NodeFilterInterface,\n entityReferenceExpansion?: boolean,\n ): TreeWalker;\n createTreeWalker(\n root: RootNodeT,\n whatToShow: 1157,\n filter?: NodeFilterInterface,\n entityReferenceExpansion?: boolean,\n ): TreeWalker;\n\n // In the general case, RootNodeT may be any Node and whatToShow may be\n // NodeFilter.SHOW_ALL or any combination of NodeFilter.SHOW_ELEMENT,\n // NodeFilter.SHOW_TEXT and/or NodeFilter.SHOW_COMMENT\n createNodeIterator(\n root: RootNodeT,\n whatToShow: 1,\n filter?: NodeFilterInterface,\n ): NodeIterator;\n createNodeIterator(\n root: RootNodeT,\n whatToShow: 4,\n filter?: NodeFilterInterface,\n ): NodeIterator;\n createNodeIterator(\n root: RootNodeT,\n whatToShow: 5,\n filter?: NodeFilterInterface,\n ): NodeIterator;\n createNodeIterator(\n root: RootNodeT,\n whatToShow: 128,\n filter?: NodeFilterInterface,\n ): NodeIterator;\n createNodeIterator(\n root: RootNodeT,\n whatToShow: 129,\n filter?: NodeFilterInterface,\n ): NodeIterator;\n createNodeIterator(\n root: RootNodeT,\n whatToShow: 132,\n filter?: NodeFilterInterface,\n ): NodeIterator;\n createNodeIterator(\n root: RootNodeT,\n whatToShow: 133,\n filter?: NodeFilterInterface,\n ): NodeIterator;\n createTreeWalker(\n root: RootNodeT,\n whatToShow: 1,\n filter?: NodeFilterInterface,\n entityReferenceExpansion?: boolean,\n ): TreeWalker;\n createTreeWalker(\n root: RootNodeT,\n whatToShow: 4,\n filter?: NodeFilterInterface,\n entityReferenceExpansion?: boolean,\n ): TreeWalker;\n createTreeWalker(\n root: RootNodeT,\n whatToShow: 5,\n filter?: NodeFilterInterface,\n entityReferenceExpansion?: boolean,\n ): TreeWalker;\n createTreeWalker(\n root: RootNodeT,\n whatToShow: 128,\n filter?: NodeFilterInterface,\n entityReferenceExpansion?: boolean,\n ): TreeWalker;\n createTreeWalker(\n root: RootNodeT,\n whatToShow: 129,\n filter?: NodeFilterInterface,\n entityReferenceExpansion?: boolean,\n ): TreeWalker;\n createTreeWalker(\n root: RootNodeT,\n whatToShow: 132,\n filter?: NodeFilterInterface,\n entityReferenceExpansion?: boolean,\n ): TreeWalker;\n createTreeWalker(\n root: RootNodeT,\n whatToShow: 133,\n filter?: NodeFilterInterface,\n entityReferenceExpansion?: boolean,\n ): TreeWalker;\n\n // Catch all for when we don't know the value of `whatToShow`\n // And for when whatToShow is not provided, it is assumed to be SHOW_ALL\n createNodeIterator(\n root: RootNodeT,\n whatToShow?: number,\n filter?: NodeFilterInterface,\n ): NodeIterator;\n createTreeWalker(\n root: RootNodeT,\n whatToShow?: number,\n filter?: NodeFilterInterface,\n entityReferenceExpansion?: boolean,\n ): TreeWalker;\n\n // From NonElementParentNode Mixin.\n getElementById(elementId: string): HTMLElement | null;\n\n // From DocumentOrShadowRoot Mixin.\n +styleSheets: StyleSheetList;\n adoptedStyleSheets: Array;\n}\n\ndeclare class DocumentFragment extends Node {\n // from ParentNode interface\n childElementCount: number;\n children: HTMLCollection;\n firstElementChild: ?Element;\n lastElementChild: ?Element;\n append(...nodes: Array): void;\n prepend(...nodes: Array): void;\n\n querySelector(selector: string): HTMLElement | null;\n querySelectorAll(selector: string): NodeList;\n\n // From NonElementParentNode Mixin.\n getElementById(elementId: string): HTMLElement | null;\n}\n\ndeclare class Selection {\n anchorNode: Node | null;\n anchorOffset: number;\n focusNode: Node | null;\n focusOffset: number;\n isCollapsed: boolean;\n rangeCount: number;\n type: string;\n addRange(range: Range): void;\n getRangeAt(index: number): Range;\n removeRange(range: Range): void;\n removeAllRanges(): void;\n collapse(parentNode: Node | null, offset?: number): void;\n collapseToStart(): void;\n collapseToEnd(): void;\n containsNode(aNode: Node, aPartlyContained?: boolean): boolean;\n deleteFromDocument(): void;\n extend(parentNode: Node, offset?: number): void;\n empty(): void;\n selectAllChildren(parentNode: Node): void;\n setPosition(aNode: Node | null, offset?: number): void;\n setBaseAndExtent(\n anchorNode: Node,\n anchorOffset: number,\n focusNode: Node,\n focusOffset: number,\n ): void;\n toString(): string;\n}\n\ndeclare class Range {\n // extension\n startOffset: number;\n collapsed: boolean;\n endOffset: number;\n startContainer: Node;\n endContainer: Node;\n commonAncestorContainer: Node;\n setStart(refNode: Node, offset: number): void;\n setEndBefore(refNode: Node): void;\n setStartBefore(refNode: Node): void;\n selectNode(refNode: Node): void;\n detach(): void;\n // getBoundingClientRect(): DOMRect;\n toString(): string;\n compareBoundaryPoints(how: number, sourceRange: Range): number;\n insertNode(newNode: Node): void;\n collapse(toStart: boolean): void;\n selectNodeContents(refNode: Node): void;\n cloneContents(): DocumentFragment;\n setEnd(refNode: Node, offset: number): void;\n cloneRange(): Range;\n // getClientRects(): DOMRectList;\n surroundContents(newParent: Node): void;\n deleteContents(): void;\n setStartAfter(refNode: Node): void;\n extractContents(): DocumentFragment;\n setEndAfter(refNode: Node): void;\n createContextualFragment(fragment: string | TrustedHTML): DocumentFragment;\n intersectsNode(refNode: Node): boolean;\n isPointInRange(refNode: Node, offset: number): boolean;\n static END_TO_END: number;\n static START_TO_START: number;\n static START_TO_END: number;\n static END_TO_START: number;\n}\n\ndeclare var document: Document;\n\ndeclare class DOMTokenList {\n @@iterator(): Iterator;\n length: number;\n item(index: number): string;\n contains(token: string): boolean;\n add(...token: Array): void;\n remove(...token: Array): void;\n toggle(token: string, force?: boolean): boolean;\n replace(oldToken: string, newToken: string): boolean;\n\n forEach(\n callbackfn: (value: string, index: number, list: DOMTokenList) => any,\n thisArg?: any,\n ): void;\n entries(): Iterator<[number, string]>;\n keys(): Iterator;\n values(): Iterator;\n [index: number]: string;\n}\n\ndeclare class Element extends Node {\n assignedSlot: ?HTMLSlotElement;\n attachShadow(shadowRootInitDict: ShadowRootInit): ShadowRoot;\n attributes: NamedNodeMap;\n classList: DOMTokenList;\n className: string;\n clientHeight: number;\n clientLeft: number;\n clientTop: number;\n clientWidth: number;\n id: string;\n // flowlint unsafe-getters-setters:off\n get innerHTML(): string;\n set innerHTML(value: string | TrustedHTML): void;\n // flowlint unsafe-getters-setters:error\n localName: string;\n namespaceURI: ?string;\n nextElementSibling: ?Element;\n // flowlint unsafe-getters-setters:off\n get outerHTML(): string;\n set outerHTML(value: string | TrustedHTML): void;\n // flowlint unsafe-getters-setters:error\n prefix: string | null;\n previousElementSibling: ?Element;\n scrollHeight: number;\n scrollLeft: number;\n scrollTop: number;\n scrollWidth: number;\n +tagName: string;\n\n // TODO: a lot more ARIA properties\n ariaHidden: void | 'true' | 'false';\n\n closest(selectors: string): ?Element;\n\n getAttribute(name?: string): ?string;\n getAttributeNames(): Array;\n getAttributeNS(namespaceURI: string | null, localName: string): string | null;\n getAttributeNode(name: string): Attr | null;\n getAttributeNodeNS(\n namespaceURI: string | null,\n localName: string,\n ): Attr | null;\n getBoundingClientRect(): ClientRect;\n getClientRects(): ClientRectList;\n getElementsByClassName(names: string): HTMLCollection;\n getElementsByTagName>(\n qualifiedName: TName,\n ): HTMLCollection;\n getElementsByTagNameNS>(\n namespaceURI: 'http://www.w3.org/1999/xhtml',\n qualifiedName: TName,\n ): HTMLCollection;\n getElementsByTagNameNS(\n namespaceURI: string | null,\n qualifiedName: string,\n ): HTMLCollection;\n\n hasAttribute(name: string): boolean;\n hasAttributeNS(namespaceURI: string | null, localName: string): boolean;\n hasAttributes(): boolean;\n hasPointerCapture(pointerId: number): boolean;\n insertAdjacentElement(\n position: 'beforebegin' | 'afterbegin' | 'beforeend' | 'afterend',\n element: Element,\n ): void;\n insertAdjacentHTML(\n position: 'beforebegin' | 'afterbegin' | 'beforeend' | 'afterend',\n html: string | TrustedHTML,\n ): void;\n insertAdjacentText(\n position: 'beforebegin' | 'afterbegin' | 'beforeend' | 'afterend',\n text: string,\n ): void;\n matches(selector: string): boolean;\n releasePointerCapture(pointerId: number): void;\n removeAttribute(name?: string): void;\n removeAttributeNode(attributeNode: Attr): Attr;\n removeAttributeNS(namespaceURI: string | null, localName: string): void;\n requestFullscreen(options?: {\n navigationUI: 'auto' | 'show' | 'hide',\n ...\n }): Promise;\n requestPointerLock(): void;\n scrollIntoView(\n arg?:\n | boolean\n | {\n behavior?: 'auto' | 'instant' | 'smooth',\n block?: 'start' | 'center' | 'end' | 'nearest',\n inline?: 'start' | 'center' | 'end' | 'nearest',\n ...\n },\n ): void;\n scroll(x: number, y: number): void;\n scroll(options: ScrollToOptions): void;\n scrollTo(x: number, y: number): void;\n scrollTo(options: ScrollToOptions): void;\n scrollBy(x: number, y: number): void;\n scrollBy(options: ScrollToOptions): void;\n setAttribute(name?: string, value?: string): void;\n toggleAttribute(name?: string, force?: boolean): void;\n setAttributeNS(\n namespaceURI: string | null,\n qualifiedName: string,\n value: string,\n ): void;\n setAttributeNode(newAttr: Attr): Attr | null;\n setAttributeNodeNS(newAttr: Attr): Attr | null;\n setPointerCapture(pointerId: number): void;\n shadowRoot?: ShadowRoot;\n slot?: string;\n\n // from ParentNode interface\n childElementCount: number;\n children: HTMLCollection;\n firstElementChild: ?Element;\n lastElementChild: ?Element;\n append(...nodes: Array): void;\n prepend(...nodes: Array): void;\n\n querySelector>(\n selector: TSelector,\n ): HTMLElementTagNameMap[TSelector] | null;\n querySelectorAll>(\n selector: TSelector,\n ): NodeList;\n\n // from ChildNode interface\n after(...nodes: Array): void;\n before(...nodes: Array): void;\n replaceWith(...nodes: Array): void;\n remove(): void;\n}\n\ndeclare class HitRegionOptions {\n path?: Path2D;\n fillRule?: CanvasFillRule;\n id?: string;\n parentID?: string;\n cursor?: string;\n control?: Element;\n label: ?string;\n role: ?string;\n}\n\ndeclare class SVGMatrix {\n getComponent(index: number): number;\n mMultiply(secondMatrix: SVGMatrix): SVGMatrix;\n inverse(): SVGMatrix;\n mTranslate(x: number, y: number): SVGMatrix;\n mScale(scaleFactor: number): SVGMatrix;\n mRotate(angle: number): SVGMatrix;\n}\n\n// WebGL idl: https://www.khronos.org/registry/webgl/specs/latest/1.0/webgl.idl\n\ntype WebGLContextAttributes = {\n alpha: boolean,\n depth: boolean,\n stencil: boolean,\n antialias: boolean,\n premultipliedAlpha: boolean,\n preserveDrawingBuffer: boolean,\n preferLowPowerToHighPerformance: boolean,\n failIfMajorPerformanceCaveat: boolean,\n ...\n};\n\ninterface WebGLObject {}\n\ninterface WebGLBuffer extends WebGLObject {}\n\ninterface WebGLFramebuffer extends WebGLObject {}\n\ninterface WebGLProgram extends WebGLObject {}\n\ninterface WebGLRenderbuffer extends WebGLObject {}\n\ninterface WebGLShader extends WebGLObject {}\n\ninterface WebGLTexture extends WebGLObject {}\n\ninterface WebGLUniformLocation {}\n\ninterface WebGLActiveInfo {\n size: number;\n type: number;\n name: string;\n}\n\ninterface WebGLShaderPrecisionFormat {\n rangeMin: number;\n rangeMax: number;\n precision: number;\n}\n\ntype BufferDataSource = ArrayBuffer | $ArrayBufferView;\n\ntype TexImageSource =\n | ImageBitmap\n | ImageData\n | HTMLImageElement\n | HTMLCanvasElement\n | HTMLVideoElement;\n\ntype VertexAttribFVSource = Float32Array | Array;\n\n/* flow */\ndeclare class WebGLRenderingContext {\n static DEPTH_BUFFER_BIT: 0x00000100;\n DEPTH_BUFFER_BIT: 0x00000100;\n static STENCIL_BUFFER_BIT: 0x00000400;\n STENCIL_BUFFER_BIT: 0x00000400;\n static COLOR_BUFFER_BIT: 0x00004000;\n COLOR_BUFFER_BIT: 0x00004000;\n static POINTS: 0x0000;\n POINTS: 0x0000;\n static LINES: 0x0001;\n LINES: 0x0001;\n static LINE_LOOP: 0x0002;\n LINE_LOOP: 0x0002;\n static LINE_STRIP: 0x0003;\n LINE_STRIP: 0x0003;\n static TRIANGLES: 0x0004;\n TRIANGLES: 0x0004;\n static TRIANGLE_STRIP: 0x0005;\n TRIANGLE_STRIP: 0x0005;\n static TRIANGLE_FAN: 0x0006;\n TRIANGLE_FAN: 0x0006;\n static ZERO: 0;\n ZERO: 0;\n static ONE: 1;\n ONE: 1;\n static SRC_COLOR: 0x0300;\n SRC_COLOR: 0x0300;\n static ONE_MINUS_SRC_COLOR: 0x0301;\n ONE_MINUS_SRC_COLOR: 0x0301;\n static SRC_ALPHA: 0x0302;\n SRC_ALPHA: 0x0302;\n static ONE_MINUS_SRC_ALPHA: 0x0303;\n ONE_MINUS_SRC_ALPHA: 0x0303;\n static DST_ALPHA: 0x0304;\n DST_ALPHA: 0x0304;\n static ONE_MINUS_DST_ALPHA: 0x0305;\n ONE_MINUS_DST_ALPHA: 0x0305;\n static DST_COLOR: 0x0306;\n DST_COLOR: 0x0306;\n static ONE_MINUS_DST_COLOR: 0x0307;\n ONE_MINUS_DST_COLOR: 0x0307;\n static SRC_ALPHA_SATURATE: 0x0308;\n SRC_ALPHA_SATURATE: 0x0308;\n static FUNC_ADD: 0x8006;\n FUNC_ADD: 0x8006;\n static BLEND_EQUATION: 0x8009;\n BLEND_EQUATION: 0x8009;\n static BLEND_EQUATION_RGB: 0x8009;\n BLEND_EQUATION_RGB: 0x8009;\n static BLEND_EQUATION_ALPHA: 0x883d;\n BLEND_EQUATION_ALPHA: 0x883d;\n static FUNC_SUBTRACT: 0x800a;\n FUNC_SUBTRACT: 0x800a;\n static FUNC_REVERSE_SUBTRACT: 0x800b;\n FUNC_REVERSE_SUBTRACT: 0x800b;\n static BLEND_DST_RGB: 0x80c8;\n BLEND_DST_RGB: 0x80c8;\n static BLEND_SRC_RGB: 0x80c9;\n BLEND_SRC_RGB: 0x80c9;\n static BLEND_DST_ALPHA: 0x80ca;\n BLEND_DST_ALPHA: 0x80ca;\n static BLEND_SRC_ALPHA: 0x80cb;\n BLEND_SRC_ALPHA: 0x80cb;\n static CONSTANT_COLOR: 0x8001;\n CONSTANT_COLOR: 0x8001;\n static ONE_MINUS_CONSTANT_COLOR: 0x8002;\n ONE_MINUS_CONSTANT_COLOR: 0x8002;\n static CONSTANT_ALPHA: 0x8003;\n CONSTANT_ALPHA: 0x8003;\n static ONE_MINUS_CONSTANT_ALPHA: 0x8004;\n ONE_MINUS_CONSTANT_ALPHA: 0x8004;\n static BLEND_COLOR: 0x8005;\n BLEND_COLOR: 0x8005;\n static ARRAY_BUFFER: 0x8892;\n ARRAY_BUFFER: 0x8892;\n static ELEMENT_ARRAY_BUFFER: 0x8893;\n ELEMENT_ARRAY_BUFFER: 0x8893;\n static ARRAY_BUFFER_BINDING: 0x8894;\n ARRAY_BUFFER_BINDING: 0x8894;\n static ELEMENT_ARRAY_BUFFER_BINDING: 0x8895;\n ELEMENT_ARRAY_BUFFER_BINDING: 0x8895;\n static STREAM_DRAW: 0x88e0;\n STREAM_DRAW: 0x88e0;\n static STATIC_DRAW: 0x88e4;\n STATIC_DRAW: 0x88e4;\n static DYNAMIC_DRAW: 0x88e8;\n DYNAMIC_DRAW: 0x88e8;\n static BUFFER_SIZE: 0x8764;\n BUFFER_SIZE: 0x8764;\n static BUFFER_USAGE: 0x8765;\n BUFFER_USAGE: 0x8765;\n static CURRENT_VERTEX_ATTRIB: 0x8626;\n CURRENT_VERTEX_ATTRIB: 0x8626;\n static FRONT: 0x0404;\n FRONT: 0x0404;\n static BACK: 0x0405;\n BACK: 0x0405;\n static FRONT_AND_BACK: 0x0408;\n FRONT_AND_BACK: 0x0408;\n static CULL_FACE: 0x0b44;\n CULL_FACE: 0x0b44;\n static BLEND: 0x0be2;\n BLEND: 0x0be2;\n static DITHER: 0x0bd0;\n DITHER: 0x0bd0;\n static STENCIL_TEST: 0x0b90;\n STENCIL_TEST: 0x0b90;\n static DEPTH_TEST: 0x0b71;\n DEPTH_TEST: 0x0b71;\n static SCISSOR_TEST: 0x0c11;\n SCISSOR_TEST: 0x0c11;\n static POLYGON_OFFSET_FILL: 0x8037;\n POLYGON_OFFSET_FILL: 0x8037;\n static SAMPLE_ALPHA_TO_COVERAGE: 0x809e;\n SAMPLE_ALPHA_TO_COVERAGE: 0x809e;\n static SAMPLE_COVERAGE: 0x80a0;\n SAMPLE_COVERAGE: 0x80a0;\n static NO_ERROR: 0;\n NO_ERROR: 0;\n static INVALID_ENUM: 0x0500;\n INVALID_ENUM: 0x0500;\n static INVALID_VALUE: 0x0501;\n INVALID_VALUE: 0x0501;\n static INVALID_OPERATION: 0x0502;\n INVALID_OPERATION: 0x0502;\n static OUT_OF_MEMORY: 0x0505;\n OUT_OF_MEMORY: 0x0505;\n static CW: 0x0900;\n CW: 0x0900;\n static CCW: 0x0901;\n CCW: 0x0901;\n static LINE_WIDTH: 0x0b21;\n LINE_WIDTH: 0x0b21;\n static ALIASED_POINT_SIZE_RANGE: 0x846d;\n ALIASED_POINT_SIZE_RANGE: 0x846d;\n static ALIASED_LINE_WIDTH_RANGE: 0x846e;\n ALIASED_LINE_WIDTH_RANGE: 0x846e;\n static CULL_FACE_MODE: 0x0b45;\n CULL_FACE_MODE: 0x0b45;\n static FRONT_FACE: 0x0b46;\n FRONT_FACE: 0x0b46;\n static DEPTH_RANGE: 0x0b70;\n DEPTH_RANGE: 0x0b70;\n static DEPTH_WRITEMASK: 0x0b72;\n DEPTH_WRITEMASK: 0x0b72;\n static DEPTH_CLEAR_VALUE: 0x0b73;\n DEPTH_CLEAR_VALUE: 0x0b73;\n static DEPTH_FUNC: 0x0b74;\n DEPTH_FUNC: 0x0b74;\n static STENCIL_CLEAR_VALUE: 0x0b91;\n STENCIL_CLEAR_VALUE: 0x0b91;\n static STENCIL_FUNC: 0x0b92;\n STENCIL_FUNC: 0x0b92;\n static STENCIL_FAIL: 0x0b94;\n STENCIL_FAIL: 0x0b94;\n static STENCIL_PASS_DEPTH_FAIL: 0x0b95;\n STENCIL_PASS_DEPTH_FAIL: 0x0b95;\n static STENCIL_PASS_DEPTH_PASS: 0x0b96;\n STENCIL_PASS_DEPTH_PASS: 0x0b96;\n static STENCIL_REF: 0x0b97;\n STENCIL_REF: 0x0b97;\n static STENCIL_VALUE_MASK: 0x0b93;\n STENCIL_VALUE_MASK: 0x0b93;\n static STENCIL_WRITEMASK: 0x0b98;\n STENCIL_WRITEMASK: 0x0b98;\n static STENCIL_BACK_FUNC: 0x8800;\n STENCIL_BACK_FUNC: 0x8800;\n static STENCIL_BACK_FAIL: 0x8801;\n STENCIL_BACK_FAIL: 0x8801;\n static STENCIL_BACK_PASS_DEPTH_FAIL: 0x8802;\n STENCIL_BACK_PASS_DEPTH_FAIL: 0x8802;\n static STENCIL_BACK_PASS_DEPTH_PASS: 0x8803;\n STENCIL_BACK_PASS_DEPTH_PASS: 0x8803;\n static STENCIL_BACK_REF: 0x8ca3;\n STENCIL_BACK_REF: 0x8ca3;\n static STENCIL_BACK_VALUE_MASK: 0x8ca4;\n STENCIL_BACK_VALUE_MASK: 0x8ca4;\n static STENCIL_BACK_WRITEMASK: 0x8ca5;\n STENCIL_BACK_WRITEMASK: 0x8ca5;\n static VIEWPORT: 0x0ba2;\n VIEWPORT: 0x0ba2;\n static SCISSOR_BOX: 0x0c10;\n SCISSOR_BOX: 0x0c10;\n static COLOR_CLEAR_VALUE: 0x0c22;\n COLOR_CLEAR_VALUE: 0x0c22;\n static COLOR_WRITEMASK: 0x0c23;\n COLOR_WRITEMASK: 0x0c23;\n static UNPACK_ALIGNMENT: 0x0cf5;\n UNPACK_ALIGNMENT: 0x0cf5;\n static PACK_ALIGNMENT: 0x0d05;\n PACK_ALIGNMENT: 0x0d05;\n static MAX_TEXTURE_SIZE: 0x0d33;\n MAX_TEXTURE_SIZE: 0x0d33;\n static MAX_VIEWPORT_DIMS: 0x0d3a;\n MAX_VIEWPORT_DIMS: 0x0d3a;\n static SUBPIXEL_BITS: 0x0d50;\n SUBPIXEL_BITS: 0x0d50;\n static RED_BITS: 0x0d52;\n RED_BITS: 0x0d52;\n static GREEN_BITS: 0x0d53;\n GREEN_BITS: 0x0d53;\n static BLUE_BITS: 0x0d54;\n BLUE_BITS: 0x0d54;\n static ALPHA_BITS: 0x0d55;\n ALPHA_BITS: 0x0d55;\n static DEPTH_BITS: 0x0d56;\n DEPTH_BITS: 0x0d56;\n static STENCIL_BITS: 0x0d57;\n STENCIL_BITS: 0x0d57;\n static POLYGON_OFFSET_UNITS: 0x2a00;\n POLYGON_OFFSET_UNITS: 0x2a00;\n static POLYGON_OFFSET_FACTOR: 0x8038;\n POLYGON_OFFSET_FACTOR: 0x8038;\n static TEXTURE_BINDING_2D: 0x8069;\n TEXTURE_BINDING_2D: 0x8069;\n static SAMPLE_BUFFERS: 0x80a8;\n SAMPLE_BUFFERS: 0x80a8;\n static SAMPLES: 0x80a9;\n SAMPLES: 0x80a9;\n static SAMPLE_COVERAGE_VALUE: 0x80aa;\n SAMPLE_COVERAGE_VALUE: 0x80aa;\n static SAMPLE_COVERAGE_INVERT: 0x80ab;\n SAMPLE_COVERAGE_INVERT: 0x80ab;\n static COMPRESSED_TEXTURE_FORMATS: 0x86a3;\n COMPRESSED_TEXTURE_FORMATS: 0x86a3;\n static DONT_CARE: 0x1100;\n DONT_CARE: 0x1100;\n static FASTEST: 0x1101;\n FASTEST: 0x1101;\n static NICEST: 0x1102;\n NICEST: 0x1102;\n static GENERATE_MIPMAP_HINT: 0x8192;\n GENERATE_MIPMAP_HINT: 0x8192;\n static BYTE: 0x1400;\n BYTE: 0x1400;\n static UNSIGNED_BYTE: 0x1401;\n UNSIGNED_BYTE: 0x1401;\n static SHORT: 0x1402;\n SHORT: 0x1402;\n static UNSIGNED_SHORT: 0x1403;\n UNSIGNED_SHORT: 0x1403;\n static INT: 0x1404;\n INT: 0x1404;\n static UNSIGNED_INT: 0x1405;\n UNSIGNED_INT: 0x1405;\n static FLOAT: 0x1406;\n FLOAT: 0x1406;\n static DEPTH_COMPONENT: 0x1902;\n DEPTH_COMPONENT: 0x1902;\n static ALPHA: 0x1906;\n ALPHA: 0x1906;\n static RGB: 0x1907;\n RGB: 0x1907;\n static RGBA: 0x1908;\n RGBA: 0x1908;\n static LUMINANCE: 0x1909;\n LUMINANCE: 0x1909;\n static LUMINANCE_ALPHA: 0x190a;\n LUMINANCE_ALPHA: 0x190a;\n static UNSIGNED_SHORT_4_4_4_4: 0x8033;\n UNSIGNED_SHORT_4_4_4_4: 0x8033;\n static UNSIGNED_SHORT_5_5_5_1: 0x8034;\n UNSIGNED_SHORT_5_5_5_1: 0x8034;\n static UNSIGNED_SHORT_5_6_5: 0x8363;\n UNSIGNED_SHORT_5_6_5: 0x8363;\n static FRAGMENT_SHADER: 0x8b30;\n FRAGMENT_SHADER: 0x8b30;\n static VERTEX_SHADER: 0x8b31;\n VERTEX_SHADER: 0x8b31;\n static MAX_VERTEX_ATTRIBS: 0x8869;\n MAX_VERTEX_ATTRIBS: 0x8869;\n static MAX_VERTEX_UNIFORM_VECTORS: 0x8dfb;\n MAX_VERTEX_UNIFORM_VECTORS: 0x8dfb;\n static MAX_VARYING_VECTORS: 0x8dfc;\n MAX_VARYING_VECTORS: 0x8dfc;\n static MAX_COMBINED_TEXTURE_IMAGE_UNITS: 0x8b4d;\n MAX_COMBINED_TEXTURE_IMAGE_UNITS: 0x8b4d;\n static MAX_VERTEX_TEXTURE_IMAGE_UNITS: 0x8b4c;\n MAX_VERTEX_TEXTURE_IMAGE_UNITS: 0x8b4c;\n static MAX_TEXTURE_IMAGE_UNITS: 0x8872;\n MAX_TEXTURE_IMAGE_UNITS: 0x8872;\n static MAX_FRAGMENT_UNIFORM_VECTORS: 0x8dfd;\n MAX_FRAGMENT_UNIFORM_VECTORS: 0x8dfd;\n static SHADER_TYPE: 0x8b4f;\n SHADER_TYPE: 0x8b4f;\n static DELETE_STATUS: 0x8b80;\n DELETE_STATUS: 0x8b80;\n static LINK_STATUS: 0x8b82;\n LINK_STATUS: 0x8b82;\n static VALIDATE_STATUS: 0x8b83;\n VALIDATE_STATUS: 0x8b83;\n static ATTACHED_SHADERS: 0x8b85;\n ATTACHED_SHADERS: 0x8b85;\n static ACTIVE_UNIFORMS: 0x8b86;\n ACTIVE_UNIFORMS: 0x8b86;\n static ACTIVE_ATTRIBUTES: 0x8b89;\n ACTIVE_ATTRIBUTES: 0x8b89;\n static SHADING_LANGUAGE_VERSION: 0x8b8c;\n SHADING_LANGUAGE_VERSION: 0x8b8c;\n static CURRENT_PROGRAM: 0x8b8d;\n CURRENT_PROGRAM: 0x8b8d;\n static NEVER: 0x0200;\n NEVER: 0x0200;\n static LESS: 0x0201;\n LESS: 0x0201;\n static EQUAL: 0x0202;\n EQUAL: 0x0202;\n static LEQUAL: 0x0203;\n LEQUAL: 0x0203;\n static GREATER: 0x0204;\n GREATER: 0x0204;\n static NOTEQUAL: 0x0205;\n NOTEQUAL: 0x0205;\n static GEQUAL: 0x0206;\n GEQUAL: 0x0206;\n static ALWAYS: 0x0207;\n ALWAYS: 0x0207;\n static KEEP: 0x1e00;\n KEEP: 0x1e00;\n static REPLACE: 0x1e01;\n REPLACE: 0x1e01;\n static INCR: 0x1e02;\n INCR: 0x1e02;\n static DECR: 0x1e03;\n DECR: 0x1e03;\n static INVERT: 0x150a;\n INVERT: 0x150a;\n static INCR_WRAP: 0x8507;\n INCR_WRAP: 0x8507;\n static DECR_WRAP: 0x8508;\n DECR_WRAP: 0x8508;\n static VENDOR: 0x1f00;\n VENDOR: 0x1f00;\n static RENDERER: 0x1f01;\n RENDERER: 0x1f01;\n static VERSION: 0x1f02;\n VERSION: 0x1f02;\n static NEAREST: 0x2600;\n NEAREST: 0x2600;\n static LINEAR: 0x2601;\n LINEAR: 0x2601;\n static NEAREST_MIPMAP_NEAREST: 0x2700;\n NEAREST_MIPMAP_NEAREST: 0x2700;\n static LINEAR_MIPMAP_NEAREST: 0x2701;\n LINEAR_MIPMAP_NEAREST: 0x2701;\n static NEAREST_MIPMAP_LINEAR: 0x2702;\n NEAREST_MIPMAP_LINEAR: 0x2702;\n static LINEAR_MIPMAP_LINEAR: 0x2703;\n LINEAR_MIPMAP_LINEAR: 0x2703;\n static TEXTURE_MAG_FILTER: 0x2800;\n TEXTURE_MAG_FILTER: 0x2800;\n static TEXTURE_MIN_FILTER: 0x2801;\n TEXTURE_MIN_FILTER: 0x2801;\n static TEXTURE_WRAP_S: 0x2802;\n TEXTURE_WRAP_S: 0x2802;\n static TEXTURE_WRAP_T: 0x2803;\n TEXTURE_WRAP_T: 0x2803;\n static TEXTURE_2D: 0x0de1;\n TEXTURE_2D: 0x0de1;\n static TEXTURE: 0x1702;\n TEXTURE: 0x1702;\n static TEXTURE_CUBE_MAP: 0x8513;\n TEXTURE_CUBE_MAP: 0x8513;\n static TEXTURE_BINDING_CUBE_MAP: 0x8514;\n TEXTURE_BINDING_CUBE_MAP: 0x8514;\n static TEXTURE_CUBE_MAP_POSITIVE_X: 0x8515;\n TEXTURE_CUBE_MAP_POSITIVE_X: 0x8515;\n static TEXTURE_CUBE_MAP_NEGATIVE_X: 0x8516;\n TEXTURE_CUBE_MAP_NEGATIVE_X: 0x8516;\n static TEXTURE_CUBE_MAP_POSITIVE_Y: 0x8517;\n TEXTURE_CUBE_MAP_POSITIVE_Y: 0x8517;\n static TEXTURE_CUBE_MAP_NEGATIVE_Y: 0x8518;\n TEXTURE_CUBE_MAP_NEGATIVE_Y: 0x8518;\n static TEXTURE_CUBE_MAP_POSITIVE_Z: 0x8519;\n TEXTURE_CUBE_MAP_POSITIVE_Z: 0x8519;\n static TEXTURE_CUBE_MAP_NEGATIVE_Z: 0x851a;\n TEXTURE_CUBE_MAP_NEGATIVE_Z: 0x851a;\n static MAX_CUBE_MAP_TEXTURE_SIZE: 0x851c;\n MAX_CUBE_MAP_TEXTURE_SIZE: 0x851c;\n static TEXTURE0: 0x84c0;\n TEXTURE0: 0x84c0;\n static TEXTURE1: 0x84c1;\n TEXTURE1: 0x84c1;\n static TEXTURE2: 0x84c2;\n TEXTURE2: 0x84c2;\n static TEXTURE3: 0x84c3;\n TEXTURE3: 0x84c3;\n static TEXTURE4: 0x84c4;\n TEXTURE4: 0x84c4;\n static TEXTURE5: 0x84c5;\n TEXTURE5: 0x84c5;\n static TEXTURE6: 0x84c6;\n TEXTURE6: 0x84c6;\n static TEXTURE7: 0x84c7;\n TEXTURE7: 0x84c7;\n static TEXTURE8: 0x84c8;\n TEXTURE8: 0x84c8;\n static TEXTURE9: 0x84c9;\n TEXTURE9: 0x84c9;\n static TEXTURE10: 0x84ca;\n TEXTURE10: 0x84ca;\n static TEXTURE11: 0x84cb;\n TEXTURE11: 0x84cb;\n static TEXTURE12: 0x84cc;\n TEXTURE12: 0x84cc;\n static TEXTURE13: 0x84cd;\n TEXTURE13: 0x84cd;\n static TEXTURE14: 0x84ce;\n TEXTURE14: 0x84ce;\n static TEXTURE15: 0x84cf;\n TEXTURE15: 0x84cf;\n static TEXTURE16: 0x84d0;\n TEXTURE16: 0x84d0;\n static TEXTURE17: 0x84d1;\n TEXTURE17: 0x84d1;\n static TEXTURE18: 0x84d2;\n TEXTURE18: 0x84d2;\n static TEXTURE19: 0x84d3;\n TEXTURE19: 0x84d3;\n static TEXTURE20: 0x84d4;\n TEXTURE20: 0x84d4;\n static TEXTURE21: 0x84d5;\n TEXTURE21: 0x84d5;\n static TEXTURE22: 0x84d6;\n TEXTURE22: 0x84d6;\n static TEXTURE23: 0x84d7;\n TEXTURE23: 0x84d7;\n static TEXTURE24: 0x84d8;\n TEXTURE24: 0x84d8;\n static TEXTURE25: 0x84d9;\n TEXTURE25: 0x84d9;\n static TEXTURE26: 0x84da;\n TEXTURE26: 0x84da;\n static TEXTURE27: 0x84db;\n TEXTURE27: 0x84db;\n static TEXTURE28: 0x84dc;\n TEXTURE28: 0x84dc;\n static TEXTURE29: 0x84dd;\n TEXTURE29: 0x84dd;\n static TEXTURE30: 0x84de;\n TEXTURE30: 0x84de;\n static TEXTURE31: 0x84df;\n TEXTURE31: 0x84df;\n static ACTIVE_TEXTURE: 0x84e0;\n ACTIVE_TEXTURE: 0x84e0;\n static REPEAT: 0x2901;\n REPEAT: 0x2901;\n static CLAMP_TO_EDGE: 0x812f;\n CLAMP_TO_EDGE: 0x812f;\n static MIRRORED_REPEAT: 0x8370;\n MIRRORED_REPEAT: 0x8370;\n static FLOAT_VEC2: 0x8b50;\n FLOAT_VEC2: 0x8b50;\n static FLOAT_VEC3: 0x8b51;\n FLOAT_VEC3: 0x8b51;\n static FLOAT_VEC4: 0x8b52;\n FLOAT_VEC4: 0x8b52;\n static INT_VEC2: 0x8b53;\n INT_VEC2: 0x8b53;\n static INT_VEC3: 0x8b54;\n INT_VEC3: 0x8b54;\n static INT_VEC4: 0x8b55;\n INT_VEC4: 0x8b55;\n static BOOL: 0x8b56;\n BOOL: 0x8b56;\n static BOOL_VEC2: 0x8b57;\n BOOL_VEC2: 0x8b57;\n static BOOL_VEC3: 0x8b58;\n BOOL_VEC3: 0x8b58;\n static BOOL_VEC4: 0x8b59;\n BOOL_VEC4: 0x8b59;\n static FLOAT_MAT2: 0x8b5a;\n FLOAT_MAT2: 0x8b5a;\n static FLOAT_MAT3: 0x8b5b;\n FLOAT_MAT3: 0x8b5b;\n static FLOAT_MAT4: 0x8b5c;\n FLOAT_MAT4: 0x8b5c;\n static SAMPLER_2D: 0x8b5e;\n SAMPLER_2D: 0x8b5e;\n static SAMPLER_CUBE: 0x8b60;\n SAMPLER_CUBE: 0x8b60;\n static VERTEX_ATTRIB_ARRAY_ENABLED: 0x8622;\n VERTEX_ATTRIB_ARRAY_ENABLED: 0x8622;\n static VERTEX_ATTRIB_ARRAY_SIZE: 0x8623;\n VERTEX_ATTRIB_ARRAY_SIZE: 0x8623;\n static VERTEX_ATTRIB_ARRAY_STRIDE: 0x8624;\n VERTEX_ATTRIB_ARRAY_STRIDE: 0x8624;\n static VERTEX_ATTRIB_ARRAY_TYPE: 0x8625;\n VERTEX_ATTRIB_ARRAY_TYPE: 0x8625;\n static VERTEX_ATTRIB_ARRAY_NORMALIZED: 0x886a;\n VERTEX_ATTRIB_ARRAY_NORMALIZED: 0x886a;\n static VERTEX_ATTRIB_ARRAY_POINTER: 0x8645;\n VERTEX_ATTRIB_ARRAY_POINTER: 0x8645;\n static VERTEX_ATTRIB_ARRAY_BUFFER_BINDING: 0x889f;\n VERTEX_ATTRIB_ARRAY_BUFFER_BINDING: 0x889f;\n static IMPLEMENTATION_COLOR_READ_TYPE: 0x8b9a;\n IMPLEMENTATION_COLOR_READ_TYPE: 0x8b9a;\n static IMPLEMENTATION_COLOR_READ_FORMAT: 0x8b9b;\n IMPLEMENTATION_COLOR_READ_FORMAT: 0x8b9b;\n static COMPILE_STATUS: 0x8b81;\n COMPILE_STATUS: 0x8b81;\n static LOW_FLOAT: 0x8df0;\n LOW_FLOAT: 0x8df0;\n static MEDIUM_FLOAT: 0x8df1;\n MEDIUM_FLOAT: 0x8df1;\n static HIGH_FLOAT: 0x8df2;\n HIGH_FLOAT: 0x8df2;\n static LOW_INT: 0x8df3;\n LOW_INT: 0x8df3;\n static MEDIUM_INT: 0x8df4;\n MEDIUM_INT: 0x8df4;\n static HIGH_INT: 0x8df5;\n HIGH_INT: 0x8df5;\n static FRAMEBUFFER: 0x8d40;\n FRAMEBUFFER: 0x8d40;\n static RENDERBUFFER: 0x8d41;\n RENDERBUFFER: 0x8d41;\n static RGBA4: 0x8056;\n RGBA4: 0x8056;\n static RGB5_A1: 0x8057;\n RGB5_A1: 0x8057;\n static RGB565: 0x8d62;\n RGB565: 0x8d62;\n static DEPTH_COMPONENT16: 0x81a5;\n DEPTH_COMPONENT16: 0x81a5;\n static STENCIL_INDEX: 0x1901;\n STENCIL_INDEX: 0x1901;\n static STENCIL_INDEX8: 0x8d48;\n STENCIL_INDEX8: 0x8d48;\n static DEPTH_STENCIL: 0x84f9;\n DEPTH_STENCIL: 0x84f9;\n static RENDERBUFFER_WIDTH: 0x8d42;\n RENDERBUFFER_WIDTH: 0x8d42;\n static RENDERBUFFER_HEIGHT: 0x8d43;\n RENDERBUFFER_HEIGHT: 0x8d43;\n static RENDERBUFFER_INTERNAL_FORMAT: 0x8d44;\n RENDERBUFFER_INTERNAL_FORMAT: 0x8d44;\n static RENDERBUFFER_RED_SIZE: 0x8d50;\n RENDERBUFFER_RED_SIZE: 0x8d50;\n static RENDERBUFFER_GREEN_SIZE: 0x8d51;\n RENDERBUFFER_GREEN_SIZE: 0x8d51;\n static RENDERBUFFER_BLUE_SIZE: 0x8d52;\n RENDERBUFFER_BLUE_SIZE: 0x8d52;\n static RENDERBUFFER_ALPHA_SIZE: 0x8d53;\n RENDERBUFFER_ALPHA_SIZE: 0x8d53;\n static RENDERBUFFER_DEPTH_SIZE: 0x8d54;\n RENDERBUFFER_DEPTH_SIZE: 0x8d54;\n static RENDERBUFFER_STENCIL_SIZE: 0x8d55;\n RENDERBUFFER_STENCIL_SIZE: 0x8d55;\n static FRAMEBUFFER_ATTACHMENT_OBJECT_TYPE: 0x8cd0;\n FRAMEBUFFER_ATTACHMENT_OBJECT_TYPE: 0x8cd0;\n static FRAMEBUFFER_ATTACHMENT_OBJECT_NAME: 0x8cd1;\n FRAMEBUFFER_ATTACHMENT_OBJECT_NAME: 0x8cd1;\n static FRAMEBUFFER_ATTACHMENT_TEXTURE_LEVEL: 0x8cd2;\n FRAMEBUFFER_ATTACHMENT_TEXTURE_LEVEL: 0x8cd2;\n static FRAMEBUFFER_ATTACHMENT_TEXTURE_CUBE_MAP_FACE: 0x8cd3;\n FRAMEBUFFER_ATTACHMENT_TEXTURE_CUBE_MAP_FACE: 0x8cd3;\n static COLOR_ATTACHMENT0: 0x8ce0;\n COLOR_ATTACHMENT0: 0x8ce0;\n static DEPTH_ATTACHMENT: 0x8d00;\n DEPTH_ATTACHMENT: 0x8d00;\n static STENCIL_ATTACHMENT: 0x8d20;\n STENCIL_ATTACHMENT: 0x8d20;\n static DEPTH_STENCIL_ATTACHMENT: 0x821a;\n DEPTH_STENCIL_ATTACHMENT: 0x821a;\n static NONE: 0;\n NONE: 0;\n static FRAMEBUFFER_COMPLETE: 0x8cd5;\n FRAMEBUFFER_COMPLETE: 0x8cd5;\n static FRAMEBUFFER_INCOMPLETE_ATTACHMENT: 0x8cd6;\n FRAMEBUFFER_INCOMPLETE_ATTACHMENT: 0x8cd6;\n static FRAMEBUFFER_INCOMPLETE_MISSING_ATTACHMENT: 0x8cd7;\n FRAMEBUFFER_INCOMPLETE_MISSING_ATTACHMENT: 0x8cd7;\n static FRAMEBUFFER_INCOMPLETE_DIMENSIONS: 0x8cd9;\n FRAMEBUFFER_INCOMPLETE_DIMENSIONS: 0x8cd9;\n static FRAMEBUFFER_UNSUPPORTED: 0x8cdd;\n FRAMEBUFFER_UNSUPPORTED: 0x8cdd;\n static FRAMEBUFFER_BINDING: 0x8ca6;\n FRAMEBUFFER_BINDING: 0x8ca6;\n static RENDERBUFFER_BINDING: 0x8ca7;\n RENDERBUFFER_BINDING: 0x8ca7;\n static MAX_RENDERBUFFER_SIZE: 0x84e8;\n MAX_RENDERBUFFER_SIZE: 0x84e8;\n static INVALID_FRAMEBUFFER_OPERATION: 0x0506;\n INVALID_FRAMEBUFFER_OPERATION: 0x0506;\n static UNPACK_FLIP_Y_WEBGL: 0x9240;\n UNPACK_FLIP_Y_WEBGL: 0x9240;\n static UNPACK_PREMULTIPLY_ALPHA_WEBGL: 0x9241;\n UNPACK_PREMULTIPLY_ALPHA_WEBGL: 0x9241;\n static CONTEXT_LOST_WEBGL: 0x9242;\n CONTEXT_LOST_WEBGL: 0x9242;\n static UNPACK_COLORSPACE_CONVERSION_WEBGL: 0x9243;\n UNPACK_COLORSPACE_CONVERSION_WEBGL: 0x9243;\n static BROWSER_DEFAULT_WEBGL: 0x9244;\n BROWSER_DEFAULT_WEBGL: 0x9244;\n\n canvas: HTMLCanvasElement;\n drawingBufferWidth: number;\n drawingBufferHeight: number;\n\n getContextAttributes(): ?WebGLContextAttributes;\n isContextLost(): boolean;\n\n getSupportedExtensions(): ?Array;\n getExtension(name: string): any;\n\n activeTexture(texture: number): void;\n attachShader(program: WebGLProgram, shader: WebGLShader): void;\n bindAttribLocation(program: WebGLProgram, index: number, name: string): void;\n bindBuffer(target: number, buffer: ?WebGLBuffer): void;\n bindFramebuffer(target: number, framebuffer: ?WebGLFramebuffer): void;\n bindRenderbuffer(target: number, renderbuffer: ?WebGLRenderbuffer): void;\n bindTexture(target: number, texture: ?WebGLTexture): void;\n blendColor(red: number, green: number, blue: number, alpha: number): void;\n blendEquation(mode: number): void;\n blendEquationSeparate(modeRGB: number, modeAlpha: number): void;\n blendFunc(sfactor: number, dfactor: number): void;\n blendFuncSeparate(\n srcRGB: number,\n dstRGB: number,\n srcAlpha: number,\n dstAlpha: number,\n ): void;\n\n bufferData(target: number, size: number, usage: number): void;\n bufferData(target: number, data: ?ArrayBuffer, usage: number): void;\n bufferData(target: number, data: $ArrayBufferView, usage: number): void;\n bufferSubData(target: number, offset: number, data: BufferDataSource): void;\n\n checkFramebufferStatus(target: number): number;\n clear(mask: number): void;\n clearColor(red: number, green: number, blue: number, alpha: number): void;\n clearDepth(depth: number): void;\n clearStencil(s: number): void;\n colorMask(red: boolean, green: boolean, blue: boolean, alpha: boolean): void;\n compileShader(shader: WebGLShader): void;\n\n compressedTexImage2D(\n target: number,\n level: number,\n internalformat: number,\n width: number,\n height: number,\n border: number,\n data: $ArrayBufferView,\n ): void;\n\n compressedTexSubImage2D(\n target: number,\n level: number,\n xoffset: number,\n yoffset: number,\n width: number,\n height: number,\n format: number,\n data: $ArrayBufferView,\n ): void;\n\n copyTexImage2D(\n target: number,\n level: number,\n internalformat: number,\n x: number,\n y: number,\n width: number,\n height: number,\n border: number,\n ): void;\n copyTexSubImage2D(\n target: number,\n level: number,\n xoffset: number,\n yoffset: number,\n x: number,\n y: number,\n width: number,\n height: number,\n ): void;\n\n createBuffer(): ?WebGLBuffer;\n createFramebuffer(): ?WebGLFramebuffer;\n createProgram(): ?WebGLProgram;\n createRenderbuffer(): ?WebGLRenderbuffer;\n createShader(type: number): ?WebGLShader;\n createTexture(): ?WebGLTexture;\n\n cullFace(mode: number): void;\n\n deleteBuffer(buffer: ?WebGLBuffer): void;\n deleteFramebuffer(framebuffer: ?WebGLFramebuffer): void;\n deleteProgram(program: ?WebGLProgram): void;\n deleteRenderbuffer(renderbuffer: ?WebGLRenderbuffer): void;\n deleteShader(shader: ?WebGLShader): void;\n deleteTexture(texture: ?WebGLTexture): void;\n\n depthFunc(func: number): void;\n depthMask(flag: boolean): void;\n depthRange(zNear: number, zFar: number): void;\n detachShader(program: WebGLProgram, shader: WebGLShader): void;\n disable(cap: number): void;\n disableVertexAttribArray(index: number): void;\n drawArrays(mode: number, first: number, count: number): void;\n drawElements(mode: number, count: number, type: number, offset: number): void;\n\n enable(cap: number): void;\n enableVertexAttribArray(index: number): void;\n finish(): void;\n flush(): void;\n framebufferRenderbuffer(\n target: number,\n attachment: number,\n renderbuffertarget: number,\n renderbuffer: ?WebGLRenderbuffer,\n ): void;\n framebufferTexture2D(\n target: number,\n attachment: number,\n textarget: number,\n texture: ?WebGLTexture,\n level: number,\n ): void;\n frontFace(mode: number): void;\n\n generateMipmap(target: number): void;\n\n getActiveAttrib(program: WebGLProgram, index: number): ?WebGLActiveInfo;\n getActiveUniform(program: WebGLProgram, index: number): ?WebGLActiveInfo;\n getAttachedShaders(program: WebGLProgram): ?Array;\n\n getAttribLocation(program: WebGLProgram, name: string): number;\n\n getBufferParameter(target: number, pname: number): any;\n getParameter(pname: number): any;\n\n getError(): number;\n\n getFramebufferAttachmentParameter(\n target: number,\n attachment: number,\n pname: number,\n ): any;\n getProgramParameter(program: WebGLProgram, pname: number): any;\n getProgramInfoLog(program: WebGLProgram): ?string;\n getRenderbufferParameter(target: number, pname: number): any;\n getShaderParameter(shader: WebGLShader, pname: number): any;\n getShaderPrecisionFormat(\n shadertype: number,\n precisiontype: number,\n ): ?WebGLShaderPrecisionFormat;\n getShaderInfoLog(shader: WebGLShader): ?string;\n\n getShaderSource(shader: WebGLShader): ?string;\n\n getTexParameter(target: number, pname: number): any;\n\n getUniform(program: WebGLProgram, location: WebGLUniformLocation): any;\n\n getUniformLocation(\n program: WebGLProgram,\n name: string,\n ): ?WebGLUniformLocation;\n\n getVertexAttrib(index: number, pname: number): any;\n\n getVertexAttribOffset(index: number, pname: number): number;\n\n hint(target: number, mode: number): void;\n isBuffer(buffer: ?WebGLBuffer): boolean;\n isEnabled(cap: number): boolean;\n isFramebuffer(framebuffer: ?WebGLFramebuffer): boolean;\n isProgram(program: ?WebGLProgram): boolean;\n isRenderbuffer(renderbuffer: ?WebGLRenderbuffer): boolean;\n isShader(shader: ?WebGLShader): boolean;\n isTexture(texture: ?WebGLTexture): boolean;\n lineWidth(width: number): void;\n linkProgram(program: WebGLProgram): void;\n pixelStorei(pname: number, param: number): void;\n polygonOffset(factor: number, units: number): void;\n\n readPixels(\n x: number,\n y: number,\n width: number,\n height: number,\n format: number,\n type: number,\n pixels: ?$ArrayBufferView,\n ): void;\n\n renderbufferStorage(\n target: number,\n internalformat: number,\n width: number,\n height: number,\n ): void;\n sampleCoverage(value: number, invert: boolean): void;\n scissor(x: number, y: number, width: number, height: number): void;\n\n shaderSource(shader: WebGLShader, source: string): void;\n\n stencilFunc(func: number, ref: number, mask: number): void;\n stencilFuncSeparate(\n face: number,\n func: number,\n ref: number,\n mask: number,\n ): void;\n stencilMask(mask: number): void;\n stencilMaskSeparate(face: number, mask: number): void;\n stencilOp(fail: number, zfail: number, zpass: number): void;\n stencilOpSeparate(\n face: number,\n fail: number,\n zfail: number,\n zpass: number,\n ): void;\n\n texImage2D(\n target: number,\n level: number,\n internalformat: number,\n width: number,\n height: number,\n border: number,\n format: number,\n type: number,\n pixels: ?$ArrayBufferView,\n ): void;\n texImage2D(\n target: number,\n level: number,\n internalformat: number,\n format: number,\n type: number,\n source: TexImageSource,\n ): void;\n\n texParameterf(target: number, pname: number, param: number): void;\n texParameteri(target: number, pname: number, param: number): void;\n\n texSubImage2D(\n target: number,\n level: number,\n xoffset: number,\n yoffset: number,\n width: number,\n height: number,\n format: number,\n type: number,\n pixels: ?$ArrayBufferView,\n ): void;\n texSubImage2D(\n target: number,\n level: number,\n xoffset: number,\n yoffset: number,\n format: number,\n type: number,\n source: TexImageSource,\n ): void;\n\n uniform1f(location: ?WebGLUniformLocation, x: number): void;\n uniform1fv(location: ?WebGLUniformLocation, v: Float32Array): void;\n uniform1fv(location: ?WebGLUniformLocation, v: Array): void;\n uniform1fv(location: ?WebGLUniformLocation, v: [number]): void;\n uniform1i(location: ?WebGLUniformLocation, x: number): void;\n uniform1iv(location: ?WebGLUniformLocation, v: Int32Array): void;\n uniform1iv(location: ?WebGLUniformLocation, v: Array): void;\n uniform1iv(location: ?WebGLUniformLocation, v: [number]): void;\n uniform2f(location: ?WebGLUniformLocation, x: number, y: number): void;\n uniform2fv(location: ?WebGLUniformLocation, v: Float32Array): void;\n uniform2fv(location: ?WebGLUniformLocation, v: Array): void;\n uniform2fv(location: ?WebGLUniformLocation, v: [number, number]): void;\n uniform2i(location: ?WebGLUniformLocation, x: number, y: number): void;\n uniform2iv(location: ?WebGLUniformLocation, v: Int32Array): void;\n uniform2iv(location: ?WebGLUniformLocation, v: Array): void;\n uniform2iv(location: ?WebGLUniformLocation, v: [number, number]): void;\n uniform3f(\n location: ?WebGLUniformLocation,\n x: number,\n y: number,\n z: number,\n ): void;\n uniform3fv(location: ?WebGLUniformLocation, v: Float32Array): void;\n uniform3fv(location: ?WebGLUniformLocation, v: Array): void;\n uniform3fv(\n location: ?WebGLUniformLocation,\n v: [number, number, number],\n ): void;\n uniform3i(\n location: ?WebGLUniformLocation,\n x: number,\n y: number,\n z: number,\n ): void;\n uniform3iv(location: ?WebGLUniformLocation, v: Int32Array): void;\n uniform3iv(location: ?WebGLUniformLocation, v: Array): void;\n uniform3iv(\n location: ?WebGLUniformLocation,\n v: [number, number, number],\n ): void;\n uniform4f(\n location: ?WebGLUniformLocation,\n x: number,\n y: number,\n z: number,\n w: number,\n ): void;\n uniform4fv(location: ?WebGLUniformLocation, v: Float32Array): void;\n uniform4fv(location: ?WebGLUniformLocation, v: Array): void;\n uniform4fv(\n location: ?WebGLUniformLocation,\n v: [number, number, number, number],\n ): void;\n uniform4i(\n location: ?WebGLUniformLocation,\n x: number,\n y: number,\n z: number,\n w: number,\n ): void;\n uniform4iv(location: ?WebGLUniformLocation, v: Int32Array): void;\n uniform4iv(location: ?WebGLUniformLocation, v: Array): void;\n uniform4iv(\n location: ?WebGLUniformLocation,\n v: [number, number, number, number],\n ): void;\n\n uniformMatrix2fv(\n location: ?WebGLUniformLocation,\n transpose: boolean,\n value: Float32Array,\n ): void;\n uniformMatrix2fv(\n location: ?WebGLUniformLocation,\n transpose: boolean,\n value: Array,\n ): void;\n uniformMatrix3fv(\n location: ?WebGLUniformLocation,\n transpose: boolean,\n value: Float32Array,\n ): void;\n uniformMatrix3fv(\n location: ?WebGLUniformLocation,\n transpose: boolean,\n value: Array,\n ): void;\n uniformMatrix4fv(\n location: ?WebGLUniformLocation,\n transpose: boolean,\n value: Float32Array,\n ): void;\n uniformMatrix4fv(\n location: ?WebGLUniformLocation,\n transpose: boolean,\n value: Array,\n ): void;\n\n useProgram(program: ?WebGLProgram): void;\n validateProgram(program: WebGLProgram): void;\n\n vertexAttrib1f(index: number, x: number): void;\n vertexAttrib1fv(index: number, values: VertexAttribFVSource): void;\n vertexAttrib2f(index: number, x: number, y: number): void;\n vertexAttrib2fv(index: number, values: VertexAttribFVSource): void;\n vertexAttrib3f(index: number, x: number, y: number, z: number): void;\n vertexAttrib3fv(index: number, values: VertexAttribFVSource): void;\n vertexAttrib4f(\n index: number,\n x: number,\n y: number,\n z: number,\n w: number,\n ): void;\n vertexAttrib4fv(index: number, values: VertexAttribFVSource): void;\n vertexAttribPointer(\n index: number,\n size: number,\n type: number,\n normalized: boolean,\n stride: number,\n offset: number,\n ): void;\n\n viewport(x: number, y: number, width: number, height: number): void;\n}\n\ndeclare class WebGLContextEvent extends Event {\n statusMessage: string;\n}\n\ndeclare class MediaKeyStatusMap {\n @@iterator(): Iterator<[BufferDataSource, MediaKeyStatus]>;\n size: number;\n entries(): Iterator<[BufferDataSource, MediaKeyStatus]>;\n forEach(\n callbackfn: (\n value: MediaKeyStatus,\n key: BufferDataSource,\n map: MediaKeyStatusMap,\n ) => any,\n thisArg?: any,\n ): void;\n get(key: BufferDataSource): MediaKeyStatus;\n has(key: BufferDataSource): boolean;\n keys(): Iterator;\n values(): Iterator;\n}\n\ndeclare class MediaKeySession extends EventTarget {\n sessionId: string;\n expiration: number;\n closed: Promise;\n keyStatuses: MediaKeyStatusMap;\n\n generateRequest(\n initDataType: string,\n initData: BufferDataSource,\n ): Promise;\n load(sessionId: string): Promise;\n update(response: BufferDataSource): Promise;\n close(): Promise;\n remove(): Promise;\n\n onkeystatuschange: (ev: any) => any;\n onmessage: (ev: any) => any;\n}\n\ndeclare class MediaKeys {\n createSession(mediaKeySessionType: MediaKeySessionType): MediaKeySession;\n setServerCertificate(serverCertificate: BufferDataSource): Promise;\n}\n\ndeclare class TextRange {\n boundingLeft: number;\n htmlText: string;\n offsetLeft: number;\n boundingWidth: number;\n boundingHeight: number;\n boundingTop: number;\n text: string;\n offsetTop: number;\n moveToPoint(x: number, y: number): void;\n queryCommandValue(cmdID: string): any;\n getBookmark(): string;\n move(unit: string, count?: number): number;\n queryCommandIndeterm(cmdID: string): boolean;\n scrollIntoView(fStart?: boolean): void;\n findText(string: string, count?: number, flags?: number): boolean;\n execCommand(cmdID: string, showUI?: boolean, value?: any): boolean;\n // getBoundingClientRect(): DOMRect;\n moveToBookmark(bookmark: string): boolean;\n isEqual(range: TextRange): boolean;\n duplicate(): TextRange;\n collapse(start?: boolean): void;\n queryCommandText(cmdID: string): string;\n select(): void;\n pasteHTML(html: string): void;\n inRange(range: TextRange): boolean;\n moveEnd(unit: string, count?: number): number;\n // getClientRects(): DOMRectList;\n moveStart(unit: string, count?: number): number;\n parentElement(): Element;\n queryCommandState(cmdID: string): boolean;\n compareEndPoints(how: string, sourceRange: TextRange): number;\n execCommandShowHelp(cmdID: string): boolean;\n moveToElementText(element: Element): void;\n expand(Unit: string): boolean;\n queryCommandSupported(cmdID: string): boolean;\n setEndPoint(how: string, SourceRange: TextRange): void;\n queryCommandEnabled(cmdID: string): boolean;\n}\n\n// These types used to exist as a copy of DOMRect/DOMRectList, which is\n// incorrect because there are no ClientRect/ClientRectList globals on the DOM.\n// Keep these as type aliases for backwards compatibility.\ndeclare type ClientRect = any;\ndeclare type ClientRectList = any;\n\n// TODO: HTML*Element\n\ndeclare class DOMImplementation {\n createDocumentType(\n qualifiedName: string,\n publicId: string,\n systemId: string,\n ): DocumentType;\n createDocument(\n namespaceURI: string | null,\n qualifiedName: string,\n doctype?: DocumentType | null,\n ): Document;\n hasFeature(feature: string, version?: string): boolean;\n\n // non-standard\n createHTMLDocument(title?: string): Document;\n}\n\ndeclare class DocumentType extends Node {\n name: string;\n notations: NamedNodeMap;\n systemId: string;\n internalSubset: string;\n entities: NamedNodeMap;\n publicId: string;\n\n // from ChildNode interface\n after(...nodes: Array): void;\n before(...nodes: Array): void;\n replaceWith(...nodes: Array): void;\n remove(): void;\n}\n\ndeclare class CharacterData extends Node {\n length: number;\n data: string;\n deleteData(offset: number, count: number): void;\n replaceData(offset: number, count: number, arg: string): void;\n appendData(arg: string): void;\n insertData(offset: number, arg: string): void;\n substringData(offset: number, count: number): string;\n\n // from ChildNode interface\n after(...nodes: Array): void;\n before(...nodes: Array): void;\n replaceWith(...nodes: Array): void;\n remove(): void;\n}\n\ndeclare class Text extends CharacterData {\n assignedSlot?: HTMLSlotElement;\n wholeText: string;\n splitText(offset: number): Text;\n replaceWholeText(content: string): Text;\n}\n\ndeclare class Comment extends CharacterData {\n text: string;\n}\n\ndeclare class URL {\n static canParse(url: string, base?: string): boolean;\n static createObjectURL(blob: Blob): string;\n static createObjectURL(mediaSource: MediaSource): string;\n static revokeObjectURL(url: string): void;\n static parse(url: string, base?: string): URL | null;\n constructor(url: string, base?: string | URL): void;\n hash: string;\n host: string;\n hostname: string;\n href: string;\n +origin: string;\n password: string;\n pathname: string;\n port: string;\n protocol: string;\n search: string;\n +searchParams: URLSearchParams;\n username: string;\n toString(): string;\n toJSON(): string;\n}\n\ndeclare interface MediaSourceHandle {}\n\ndeclare class MediaSource extends EventTarget {\n sourceBuffers: SourceBufferList;\n activeSourceBuffers: SourceBufferList;\n // https://w3c.github.io/media-source/#dom-readystate\n readyState: 'closed' | 'open' | 'ended';\n duration: number;\n handle: MediaSourceHandle;\n addSourceBuffer(type: string): SourceBuffer;\n removeSourceBuffer(sourceBuffer: SourceBuffer): void;\n endOfStream(error?: string): void;\n static isTypeSupported(type: string): boolean;\n}\n\ndeclare class SourceBuffer extends EventTarget {\n mode: 'segments' | 'sequence';\n updating: boolean;\n buffered: TimeRanges;\n timestampOffset: number;\n audioTracks: AudioTrackList;\n videoTracks: VideoTrackList;\n textTracks: TextTrackList;\n appendWindowStart: number;\n appendWindowEnd: number;\n\n appendBuffer(data: ArrayBuffer | $ArrayBufferView): void;\n // TODO: Add ReadableStream\n // appendStream(stream: ReadableStream, maxSize?: number): void;\n abort(): void;\n remove(start: number, end: number): void;\n\n trackDefaults: TrackDefaultList;\n}\n\ndeclare class SourceBufferList extends EventTarget {\n @@iterator(): Iterator;\n [index: number]: SourceBuffer;\n length: number;\n}\n\ndeclare class TrackDefaultList {\n [index: number]: TrackDefault;\n length: number;\n}\n\ndeclare class TrackDefault {\n type: 'audio' | 'video' | 'text';\n byteStreamTrackID: string;\n language: string;\n label: string;\n kinds: Array;\n}\n\n// TODO: The use of `typeof` makes this function signature effectively\n// (node: Node) => number, but it should be (node: Node) => 1|2|3\ntype NodeFilterCallback = (\n node: Node,\n) =>\n | typeof NodeFilter.FILTER_ACCEPT\n | typeof NodeFilter.FILTER_REJECT\n | typeof NodeFilter.FILTER_SKIP;\n\ntype NodeFilterInterface =\n | NodeFilterCallback\n | { acceptNode: NodeFilterCallback, ... };\n\n// TODO: window.NodeFilter exists at runtime and behaves as a constructor\n// as far as `instanceof` is concerned, but it is not callable.\ndeclare class NodeFilter {\n static SHOW_ALL: -1;\n static SHOW_ELEMENT: 1;\n static SHOW_ATTRIBUTE: 2; // deprecated\n static SHOW_TEXT: 4;\n static SHOW_CDATA_SECTION: 8; // deprecated\n static SHOW_ENTITY_REFERENCE: 16; // deprecated\n static SHOW_ENTITY: 32; // deprecated\n static SHOW_PROCESSING_INSTRUCTION: 64;\n static SHOW_COMMENT: 128;\n static SHOW_DOCUMENT: 256;\n static SHOW_DOCUMENT_TYPE: 512;\n static SHOW_DOCUMENT_FRAGMENT: 1024;\n static SHOW_NOTATION: 2048; // deprecated\n static FILTER_ACCEPT: 1;\n static FILTER_REJECT: 2;\n static FILTER_SKIP: 3;\n acceptNode: NodeFilterCallback;\n}\n\n// TODO: window.NodeIterator exists at runtime and behaves as a constructor\n// as far as `instanceof` is concerned, but it is not callable.\ndeclare class NodeIterator {\n root: RootNodeT;\n whatToShow: number;\n filter: NodeFilter;\n expandEntityReferences: boolean;\n referenceNode: RootNodeT | WhatToShowT;\n pointerBeforeReferenceNode: boolean;\n detach(): void;\n previousNode(): WhatToShowT | null;\n nextNode(): WhatToShowT | null;\n}\n\n// TODO: window.TreeWalker exists at runtime and behaves as a constructor\n// as far as `instanceof` is concerned, but it is not callable.\ndeclare class TreeWalker {\n root: RootNodeT;\n whatToShow: number;\n filter: NodeFilter;\n expandEntityReferences: boolean;\n currentNode: RootNodeT | WhatToShowT;\n parentNode(): WhatToShowT | null;\n firstChild(): WhatToShowT | null;\n lastChild(): WhatToShowT | null;\n previousSibling(): WhatToShowT | null;\n nextSibling(): WhatToShowT | null;\n previousNode(): WhatToShowT | null;\n nextNode(): WhatToShowT | null;\n}\n\n/* Window file picker */\n\ntype WindowFileSystemPickerFileType = {|\n description?: string,\n /*\n * An Object with the keys set to the MIME type\n * and the values an Array of file extensions\n * Example:\n * accept: {\n * \"image/*\": [\".png\", \".gif\", \".jpeg\", \".jpg\"],\n * },\n */\n accept: {\n [string]: Array,\n },\n|};\n\ntype WindowBaseFilePickerOptions = {|\n id?: number,\n startIn?:\n | FileSystemHandle\n | 'desktop'\n | 'documents'\n | 'downloads'\n | 'music'\n | 'pictures'\n | 'videos',\n|};\n\ntype WindowFilePickerOptions = WindowBaseFilePickerOptions & {|\n excludeAcceptAllOption?: boolean,\n types?: Array,\n|};\n\ntype WindowOpenFilePickerOptions = WindowFilePickerOptions & {|\n multiple?: boolean,\n|};\n\ntype WindowSaveFilePickerOptions = WindowFilePickerOptions & {|\n suggestedName?: string,\n|};\n\ntype WindowDirectoryFilePickerOptions = WindowBaseFilePickerOptions & {|\n mode?: 'read' | 'readwrite',\n|};\n\n// https://wicg.github.io/file-system-access/#api-showopenfilepicker\ndeclare function showOpenFilePicker(\n options?: WindowOpenFilePickerOptions,\n): Promise>;\n\n// https://wicg.github.io/file-system-access/#api-showsavefilepicker\ndeclare function showSaveFilePicker(\n options?: WindowSaveFilePickerOptions,\n): Promise;\n\n// https://wicg.github.io/file-system-access/#api-showdirectorypicker\ndeclare function showDirectoryPicker(\n options?: WindowDirectoryFilePickerOptions,\n): Promise;\n\n/* Notification */\ntype NotificationPermission = 'default' | 'denied' | 'granted';\ntype NotificationDirection = 'auto' | 'ltr' | 'rtl';\ntype VibratePattern = number | Array;\ntype NotificationAction = {\n action: string,\n title: string,\n icon?: string,\n ...\n};\ntype NotificationOptions = {\n dir?: NotificationDirection,\n lang?: string,\n body?: string,\n tag?: string,\n image?: string,\n icon?: string,\n badge?: string,\n sound?: string,\n vibrate?: VibratePattern,\n timestamp?: number,\n renotify?: boolean,\n silent?: boolean,\n requireInteraction?: boolean,\n data?: ?any,\n actions?: Array,\n ...\n};\n\ndeclare class Notification extends EventTarget {\n constructor(title: string, options?: NotificationOptions): void;\n static +permission: NotificationPermission;\n static requestPermission(\n callback?: (perm: NotificationPermission) => mixed,\n ): Promise;\n static +maxActions: number;\n onclick: ?(evt: Event) => mixed;\n onclose: ?(evt: Event) => mixed;\n onerror: ?(evt: Event) => mixed;\n onshow: ?(evt: Event) => mixed;\n +title: string;\n +dir: NotificationDirection;\n +lang: string;\n +body: string;\n +tag: string;\n +image?: string;\n +icon?: string;\n +badge?: string;\n +vibrate?: Array;\n +timestamp: number;\n +renotify: boolean;\n +silent: boolean;\n +requireInteraction: boolean;\n +data: any;\n +actions: Array;\n\n close(): void;\n}\n" }, { "path": "flow-typed/environments/html.js", "content": "/* DataTransfer */\n\ndeclare class DataTransfer {\n clearData(format?: string): void;\n getData(format: string): string;\n setData(format: string, data: string): void;\n setDragImage(image: Element, x: number, y: number): void;\n dropEffect: string;\n effectAllowed: string;\n files: FileList; // readonly\n items: DataTransferItemList; // readonly\n types: Array; // readonly\n}\n\ndeclare class DataTransferItemList {\n @@iterator(): Iterator;\n length: number; // readonly\n [index: number]: DataTransferItem;\n add(data: string, type: string): ?DataTransferItem;\n add(data: File): ?DataTransferItem;\n remove(index: number): void;\n clear(): void;\n}\n\n// https://wicg.github.io/file-system-access/#drag-and-drop\ndeclare class DataTransferItem {\n kind: string; // readonly\n type: string; // readonly\n getAsString(_callback: ?(data: string) => mixed): void;\n getAsFile(): ?File;\n /*\n * This is not supported by all browsers, please have a fallback plan for it.\n * For more information, please checkout\n * https://developer.mozilla.org/en-US/docs/Web/API/DataTransferItem/webkitGetAsEntry\n */\n webkitGetAsEntry(): void | (() => any);\n /*\n * Not supported in all browsers\n * For up to date compatibility information, please visit\n * https://developer.mozilla.org/en-US/docs/Web/API/DataTransferItem/getAsFileSystemHandle\n */\n getAsFileSystemHandle?: () => Promise;\n}\n\ndeclare type DOMStringMap = { [key: string]: string, ... };\n\ndeclare class DOMStringList {\n @@iterator(): Iterator;\n +[key: number]: string;\n +length: number;\n item(number): string | null;\n contains(string): boolean;\n}\n\ndeclare type ElementDefinitionOptions = {| extends?: string |};\n\ndeclare interface CustomElementRegistry {\n define(\n name: string,\n ctor: Class,\n options?: ElementDefinitionOptions,\n ): void;\n get(name: string): any;\n whenDefined(name: string): Promise;\n}\n\n// https://www.w3.org/TR/eventsource/\ndeclare class EventSource extends EventTarget {\n constructor(\n url: string,\n configuration?: { withCredentials: boolean, ... },\n ): void;\n +CLOSED: 2;\n +CONNECTING: 0;\n +OPEN: 1;\n +readyState: 0 | 1 | 2;\n +url: string;\n +withCredentials: boolean;\n onerror: () => void;\n onmessage: MessageEventListener;\n onopen: () => void;\n close: () => void;\n}\n\n// https://html.spec.whatwg.org/multipage/webappapis.html#the-errorevent-interface\ndeclare class ErrorEvent extends Event {\n constructor(\n type: string,\n eventInitDict?: {\n ...Event$Init,\n message?: string,\n filename?: string,\n lineno?: number,\n colno?: number,\n error?: any,\n ...\n },\n ): void;\n +message: string;\n +filename: string;\n +lineno: number;\n +colno: number;\n +error: any;\n}\n\n// https://html.spec.whatwg.org/multipage/web-messaging.html#broadcasting-to-other-browsing-contexts\ndeclare class BroadcastChannel extends EventTarget {\n name: string;\n onmessage: ?(event: MessageEvent) => void;\n onmessageerror: ?(event: MessageEvent) => void;\n\n constructor(name: string): void;\n postMessage(msg: mixed): void;\n close(): void;\n}\n\n// https://www.w3.org/TR/webstorage/#the-storageevent-interface\ndeclare class StorageEvent extends Event {\n key: ?string;\n oldValue: ?string;\n newValue: ?string;\n url: string;\n storageArea: ?Storage;\n}\n\n// https://www.w3.org/TR/html50/browsers.html#beforeunloadevent\ndeclare class BeforeUnloadEvent extends Event {\n returnValue: string;\n}\n\ntype ToggleEvent$Init = {\n ...Event$Init,\n oldState: string,\n newState: string,\n ...\n};\n\ndeclare class ToggleEvent extends Event {\n constructor(type: ToggleEventTypes, eventInit?: ToggleEvent$Init): void;\n +oldState: string;\n +newState: string;\n}\n\n// TODO: HTMLDocument\ntype FocusOptions = { preventScroll?: boolean, ... };\n\ndeclare class HTMLElement extends Element {\n blur(): void;\n click(): void;\n focus(options?: FocusOptions): void;\n // getBoundingClientRect(): DOMRect;\n forceSpellcheck(): void;\n\n showPopover(options?: {| source?: HTMLElement |}): void;\n hidePopover(): void;\n togglePopover(\n options?: boolean | {| force?: boolean, source?: HTMLElement |},\n ): boolean;\n\n accessKey: string;\n accessKeyLabel: string;\n contentEditable: string;\n contextMenu: ?HTMLMenuElement;\n dataset: DOMStringMap;\n dir: 'ltr' | 'rtl' | 'auto';\n draggable: boolean;\n dropzone: any;\n hidden: boolean;\n inert: boolean;\n isContentEditable: boolean;\n itemProp: any;\n itemScope: boolean;\n itemType: any;\n itemValue: Object;\n lang: string;\n offsetHeight: number;\n offsetLeft: number;\n offsetParent: ?Element;\n offsetTop: number;\n offsetWidth: number;\n onabort: ?Function;\n onblur: ?Function;\n oncancel: ?Function;\n oncanplay: ?Function;\n oncanplaythrough: ?Function;\n onchange: ?Function;\n onclick: ?Function;\n oncontextmenu: ?Function;\n oncuechange: ?Function;\n ondblclick: ?Function;\n ondurationchange: ?Function;\n onemptied: ?Function;\n onended: ?Function;\n onerror: ?Function;\n onfocus: ?Function;\n onfullscreenchange: ?Function;\n onfullscreenerror: ?Function;\n ongotpointercapture: ?Function;\n oninput: ?Function;\n oninvalid: ?Function;\n onkeydown: ?Function;\n onkeypress: ?Function;\n onkeyup: ?Function;\n onload: ?Function;\n onloadeddata: ?Function;\n onloadedmetadata: ?Function;\n onloadstart: ?Function;\n onlostpointercapture: ?Function;\n onmousedown: ?Function;\n onmouseenter: ?Function;\n onmouseleave: ?Function;\n onmousemove: ?Function;\n onmouseout: ?Function;\n onmouseover: ?Function;\n onmouseup: ?Function;\n onmousewheel: ?Function;\n onpause: ?Function;\n onplay: ?Function;\n onplaying: ?Function;\n onpointercancel: ?Function;\n onpointerdown: ?Function;\n onpointerenter: ?Function;\n onpointerleave: ?Function;\n onpointermove: ?Function;\n onpointerout: ?Function;\n onpointerover: ?Function;\n onpointerup: ?Function;\n onprogress: ?Function;\n onratechange: ?Function;\n onreadystatechange: ?Function;\n onreset: ?Function;\n onresize: ?Function;\n onscroll: ?Function;\n onseeked: ?Function;\n onseeking: ?Function;\n onselect: ?Function;\n onshow: ?Function;\n onstalled: ?Function;\n onsubmit: ?Function;\n onsuspend: ?Function;\n ontimeupdate: ?Function;\n ontoggle: ?Function;\n onbeforetoggle: ?Function;\n onvolumechange: ?Function;\n onwaiting: ?Function;\n properties: any;\n spellcheck: boolean;\n style: CSSStyleDeclaration;\n tabIndex: number;\n title: string;\n translate: boolean;\n popover: '' | 'auto' | 'manual' | 'hint';\n\n +popoverVisibilityState: 'hidden' | 'showing';\n\n +popoverInvoker: HTMLElement | null;\n}\n\ndeclare class HTMLSlotElement extends HTMLElement {\n name: string;\n assignedNodes(options?: { flatten: boolean, ... }): Node[];\n}\n\ndeclare class HTMLTableElement extends HTMLElement {\n tagName: 'TABLE';\n caption: HTMLTableCaptionElement | null;\n tHead: HTMLTableSectionElement | null;\n tFoot: HTMLTableSectionElement | null;\n +tBodies: HTMLCollection;\n +rows: HTMLCollection;\n createTHead(): HTMLTableSectionElement;\n deleteTHead(): void;\n createTFoot(): HTMLTableSectionElement;\n deleteTFoot(): void;\n createCaption(): HTMLTableCaptionElement;\n deleteCaption(): void;\n insertRow(index?: number): HTMLTableRowElement;\n deleteRow(index: number): void;\n}\n\ndeclare class HTMLTableCaptionElement extends HTMLElement {\n tagName: 'CAPTION';\n}\n\ndeclare class HTMLTableColElement extends HTMLElement {\n tagName: 'COL' | 'COLGROUP';\n span: number;\n}\n\ndeclare class HTMLTableSectionElement extends HTMLElement {\n tagName: 'THEAD' | 'TFOOT' | 'TBODY';\n +rows: HTMLCollection;\n insertRow(index?: number): HTMLTableRowElement;\n deleteRow(index: number): void;\n}\n\ndeclare class HTMLTableCellElement extends HTMLElement {\n tagName: 'TD' | 'TH';\n colSpan: number;\n rowSpan: number;\n +cellIndex: number;\n}\n\ndeclare class HTMLTableRowElement extends HTMLElement {\n tagName: 'TR';\n align: 'left' | 'right' | 'center';\n +rowIndex: number;\n +sectionRowIndex: number;\n +cells: HTMLCollection;\n deleteCell(index: number): void;\n insertCell(index?: number): HTMLTableCellElement;\n}\n\ndeclare class HTMLMenuElement extends HTMLElement {\n getCompact(): boolean;\n setCompact(compact: boolean): void;\n}\n\ndeclare class HTMLBaseElement extends HTMLElement {\n href: string;\n target: string;\n}\n\ndeclare class HTMLTemplateElement extends HTMLElement {\n content: DocumentFragment;\n}\n\ndeclare class CanvasGradient {\n addColorStop(offset: number, color: string): void;\n}\n\ndeclare class CanvasPattern {\n setTransform(matrix: SVGMatrix): void;\n}\n\ndeclare class ImageBitmap {\n close(): void;\n width: number;\n height: number;\n}\n\ntype CanvasFillRule = string;\n\ntype CanvasImageSource =\n | HTMLImageElement\n | HTMLVideoElement\n | HTMLCanvasElement\n | CanvasRenderingContext2D\n | ImageBitmap;\n\ndeclare class TextMetrics {\n // x-direction\n width: number;\n actualBoundingBoxLeft: number;\n actualBoundingBoxRight: number;\n\n // y-direction\n fontBoundingBoxAscent: number;\n fontBoundingBoxDescent: number;\n actualBoundingBoxAscent: number;\n actualBoundingBoxDescent: number;\n emHeightAscent: number;\n emHeightDescent: number;\n hangingBaseline: number;\n alphabeticBaseline: number;\n ideographicBaseline: number;\n}\n\ndeclare class CanvasDrawingStyles {\n width: number;\n actualBoundingBoxLeft: number;\n actualBoundingBoxRight: number;\n\n // y-direction\n fontBoundingBoxAscent: number;\n fontBoundingBoxDescent: number;\n actualBoundingBoxAscent: number;\n actualBoundingBoxDescent: number;\n emHeightAscent: number;\n emHeightDescent: number;\n hangingBaseline: number;\n alphabeticBaseline: number;\n ideographicBaseline: number;\n}\n\ndeclare class Path2D {\n constructor(path?: Path2D | string): void;\n\n addPath(path: Path2D, transformation?: ?SVGMatrix): void;\n addPathByStrokingPath(\n path: Path2D,\n styles: CanvasDrawingStyles,\n transformation?: ?SVGMatrix,\n ): void;\n addText(\n text: string,\n styles: CanvasDrawingStyles,\n transformation: ?SVGMatrix,\n x: number,\n y: number,\n maxWidth?: number,\n ): void;\n addPathByStrokingText(\n text: string,\n styles: CanvasDrawingStyles,\n transformation: ?SVGMatrix,\n x: number,\n y: number,\n maxWidth?: number,\n ): void;\n addText(\n text: string,\n styles: CanvasDrawingStyles,\n transformation: ?SVGMatrix,\n path: Path2D,\n maxWidth?: number,\n ): void;\n addPathByStrokingText(\n text: string,\n styles: CanvasDrawingStyles,\n transformation: ?SVGMatrix,\n path: Path2D,\n maxWidth?: number,\n ): void;\n\n // CanvasPathMethods\n // shared path API methods\n arc(\n x: number,\n y: number,\n radius: number,\n startAngle: number,\n endAngle: number,\n anticlockwise?: boolean,\n ): void;\n arcTo(\n x1: number,\n y1: number,\n x2: number,\n y2: number,\n radius: number,\n _: void,\n _: void,\n ): void;\n arcTo(\n x1: number,\n y1: number,\n x2: number,\n y2: number,\n radiusX: number,\n radiusY: number,\n rotation: number,\n ): void;\n bezierCurveTo(\n cp1x: number,\n cp1y: number,\n cp2x: number,\n cp2y: number,\n x: number,\n y: number,\n ): void;\n closePath(): void;\n ellipse(\n x: number,\n y: number,\n radiusX: number,\n radiusY: number,\n rotation: number,\n startAngle: number,\n endAngle: number,\n anticlockwise?: boolean,\n ): void;\n lineTo(x: number, y: number): void;\n moveTo(x: number, y: number): void;\n quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void;\n rect(x: number, y: number, w: number, h: number): void;\n}\n\ndeclare class ImageData {\n width: number;\n height: number;\n data: Uint8ClampedArray;\n\n // constructor methods are used in Worker where CanvasRenderingContext2D\n // is unavailable.\n // https://html.spec.whatwg.org/multipage/scripting.html#dom-imagedata\n constructor(data: Uint8ClampedArray, width: number, height: number): void;\n constructor(width: number, height: number): void;\n}\n\ndeclare class CanvasRenderingContext2D {\n canvas: HTMLCanvasElement;\n\n // canvas dimensions\n width: number;\n height: number;\n\n // for contexts that aren't directly fixed to a specific canvas\n commit(): void;\n\n // state\n save(): void;\n restore(): void;\n\n // transformations\n currentTransform: SVGMatrix;\n scale(x: number, y: number): void;\n rotate(angle: number): void;\n translate(x: number, y: number): void;\n transform(\n a: number,\n b: number,\n c: number,\n d: number,\n e: number,\n f: number,\n ): void;\n setTransform(\n a: number,\n b: number,\n c: number,\n d: number,\n e: number,\n f: number,\n ): void;\n resetTransform(): void;\n\n // compositing\n globalAlpha: number;\n globalCompositeOperation: string;\n\n // image smoothing\n imageSmoothingEnabled: boolean;\n imageSmoothingQuality: 'low' | 'medium' | 'high';\n\n // filters\n filter: string;\n\n // colours and styles\n strokeStyle: string | CanvasGradient | CanvasPattern;\n fillStyle: string | CanvasGradient | CanvasPattern;\n createLinearGradient(\n x0: number,\n y0: number,\n x1: number,\n y1: number,\n ): CanvasGradient;\n createRadialGradient(\n x0: number,\n y0: number,\n r0: number,\n x1: number,\n y1: number,\n r1: number,\n ): CanvasGradient;\n createPattern(image: CanvasImageSource, repetition: ?string): CanvasPattern;\n\n // shadows\n shadowOffsetX: number;\n shadowOffsetY: number;\n shadowBlur: number;\n shadowColor: string;\n\n // rects\n clearRect(x: number, y: number, w: number, h: number): void;\n fillRect(x: number, y: number, w: number, h: number): void;\n // roundRect(\n // x: number,\n // y: number,\n // w: number,\n // h: number,\n // radii?: number | DOMPointInit | $ReadOnlyArray\n // ): void;\n strokeRect(x: number, y: number, w: number, h: number): void;\n\n // path API\n beginPath(): void;\n fill(fillRule?: CanvasFillRule): void;\n fill(path: Path2D, fillRule?: CanvasFillRule): void;\n stroke(): void;\n stroke(path: Path2D): void;\n drawFocusIfNeeded(element: Element): void;\n drawFocusIfNeeded(path: Path2D, element: Element): void;\n scrollPathIntoView(): void;\n scrollPathIntoView(path: Path2D): void;\n clip(fillRule?: CanvasFillRule): void;\n clip(path: Path2D, fillRule?: CanvasFillRule): void;\n resetClip(): void;\n isPointInPath(x: number, y: number, fillRule?: CanvasFillRule): boolean;\n isPointInPath(\n path: Path2D,\n x: number,\n y: number,\n fillRule?: CanvasFillRule,\n ): boolean;\n isPointInStroke(x: number, y: number): boolean;\n isPointInStroke(path: Path2D, x: number, y: number): boolean;\n\n // text (see also the CanvasDrawingStyles interface)\n fillText(text: string, x: number, y: number, maxWidth?: number): void;\n strokeText(text: string, x: number, y: number, maxWidth?: number): void;\n measureText(text: string): TextMetrics;\n\n // drawing images\n drawImage(image: CanvasImageSource, dx: number, dy: number): void;\n drawImage(\n image: CanvasImageSource,\n dx: number,\n dy: number,\n dw: number,\n dh: number,\n ): void;\n drawImage(\n image: CanvasImageSource,\n sx: number,\n sy: number,\n sw: number,\n sh: number,\n dx: number,\n dy: number,\n dw: number,\n dh: number,\n ): void;\n\n // hit regions\n addHitRegion(options?: HitRegionOptions): void;\n removeHitRegion(id: string): void;\n clearHitRegions(): void;\n\n // pixel manipulation\n createImageData(sw: number, sh: number): ImageData;\n createImageData(imagedata: ImageData): ImageData;\n getImageData(sx: number, sy: number, sw: number, sh: number): ImageData;\n putImageData(imagedata: ImageData, dx: number, dy: number): void;\n putImageData(\n imagedata: ImageData,\n dx: number,\n dy: number,\n dirtyX: number,\n dirtyY: number,\n dirtyWidth: number,\n dirtyHeight: number,\n ): void;\n\n // CanvasDrawingStyles\n // line caps/joins\n lineWidth: number;\n lineCap: string;\n lineJoin: string;\n miterLimit: number;\n\n // dashed lines\n setLineDash(segments: Array): void;\n getLineDash(): Array;\n lineDashOffset: number;\n\n // text\n font: string;\n textAlign: string;\n textBaseline: string;\n direction: string;\n\n // CanvasPathMethods\n // shared path API methods\n closePath(): void;\n moveTo(x: number, y: number): void;\n lineTo(x: number, y: number): void;\n quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void;\n bezierCurveTo(\n cp1x: number,\n cp1y: number,\n cp2x: number,\n cp2y: number,\n x: number,\n y: number,\n ): void;\n arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void;\n arcTo(\n x1: number,\n y1: number,\n x2: number,\n y2: number,\n radiusX: number,\n radiusY: number,\n rotation: number,\n ): void;\n rect(x: number, y: number, w: number, h: number): void;\n arc(\n x: number,\n y: number,\n radius: number,\n startAngle: number,\n endAngle: number,\n anticlockwise?: boolean,\n ): void;\n ellipse(\n x: number,\n y: number,\n radiusX: number,\n radiusY: number,\n rotation: number,\n startAngle: number,\n endAngle: number,\n anticlockwise?: boolean,\n ): void;\n}\n\n// http://www.w3.org/TR/html5/scripting-1.html#renderingcontext\ntype RenderingContext = CanvasRenderingContext2D | WebGLRenderingContext;\n\n// https://www.w3.org/TR/html5/scripting-1.html#htmlcanvaselement\ndeclare class HTMLCanvasElement extends HTMLElement {\n tagName: 'CANVAS';\n width: number;\n height: number;\n getContext(contextId: '2d', ...args: any): CanvasRenderingContext2D;\n getContext(\n contextId: 'webgl',\n contextAttributes?: Partial,\n ): ?WebGLRenderingContext;\n // IE currently only supports \"experimental-webgl\"\n getContext(\n contextId: 'experimental-webgl',\n contextAttributes?: Partial,\n ): ?WebGLRenderingContext;\n getContext(contextId: string, ...args: any): ?RenderingContext; // fallback\n toDataURL(type?: string, ...args: any): string;\n toBlob(callback: (v: File) => void, type?: string, ...args: any): void;\n captureStream(frameRate?: number): CanvasCaptureMediaStream;\n}\n\n// https://html.spec.whatwg.org/multipage/forms.html#the-details-element\ndeclare class HTMLDetailsElement extends HTMLElement {\n tagName: 'DETAILS';\n open: boolean;\n}\n\ndeclare class HTMLFormElement extends HTMLElement {\n tagName: 'FORM';\n @@iterator(): Iterator;\n [index: number | string]: HTMLElement | null;\n acceptCharset: string;\n action: string;\n elements: HTMLCollection;\n encoding: string;\n enctype: string;\n length: number;\n method: string;\n name: string;\n rel: string;\n target: string;\n\n checkValidity(): boolean;\n reportValidity(): boolean;\n reset(): void;\n submit(): void;\n}\n\n// https://www.w3.org/TR/html5/forms.html#the-fieldset-element\ndeclare class HTMLFieldSetElement extends HTMLElement {\n tagName: 'FIELDSET';\n disabled: boolean;\n elements: HTMLCollection; // readonly\n form: HTMLFormElement | null; // readonly\n name: string;\n type: string; // readonly\n\n checkValidity(): boolean;\n setCustomValidity(error: string): void;\n}\n\ndeclare class HTMLLegendElement extends HTMLElement {\n tagName: 'LEGEND';\n form: HTMLFormElement | null; // readonly\n}\n\ndeclare class HTMLIFrameElement extends HTMLElement {\n tagName: 'IFRAME';\n allowFullScreen: boolean;\n contentDocument: Document;\n contentWindow: any;\n frameBorder: string;\n height: string;\n marginHeight: string;\n marginWidth: string;\n name: string;\n scrolling: string;\n sandbox: DOMTokenList;\n src: string;\n // flowlint unsafe-getters-setters:off\n get srcdoc(): string;\n set srcdoc(value: string | TrustedHTML): void;\n // flowlint unsafe-getters-setters:error\n width: string;\n}\n\ndeclare class HTMLImageElement extends HTMLElement {\n tagName: 'IMG';\n alt: string;\n complete: boolean; // readonly\n crossOrigin: ?string;\n currentSrc: string; // readonly\n height: number;\n decode(): Promise;\n isMap: boolean;\n naturalHeight: number; // readonly\n naturalWidth: number; // readonly\n sizes: string;\n src: string;\n srcset: string;\n useMap: string;\n width: number;\n}\n\ndeclare class Image extends HTMLImageElement {\n constructor(width?: number, height?: number): void;\n}\n\ndeclare class MediaError {\n MEDIA_ERR_ABORTED: number;\n MEDIA_ERR_NETWORK: number;\n MEDIA_ERR_DECODE: number;\n MEDIA_ERR_SRC_NOT_SUPPORTED: number;\n code: number;\n message: ?string;\n}\n\ndeclare class TimeRanges {\n length: number;\n start(index: number): number;\n end(index: number): number;\n}\n\ndeclare class Audio extends HTMLAudioElement {\n constructor(URLString?: string): void;\n}\n\ndeclare class AudioTrack {\n id: string;\n kind: string;\n label: string;\n language: string;\n enabled: boolean;\n}\n\ndeclare class AudioTrackList extends EventTarget {\n length: number;\n [index: number]: AudioTrack;\n\n getTrackById(id: string): ?AudioTrack;\n\n onchange: (ev: any) => any;\n onaddtrack: (ev: any) => any;\n onremovetrack: (ev: any) => any;\n}\n\ndeclare class VideoTrack {\n id: string;\n kind: string;\n label: string;\n language: string;\n selected: boolean;\n}\n\ndeclare class VideoTrackList extends EventTarget {\n length: number;\n [index: number]: VideoTrack;\n getTrackById(id: string): ?VideoTrack;\n selectedIndex: number;\n\n onchange: (ev: any) => any;\n onaddtrack: (ev: any) => any;\n onremovetrack: (ev: any) => any;\n}\n\ndeclare class TextTrackCue extends EventTarget {\n constructor(startTime: number, endTime: number, text: string): void;\n\n track: TextTrack;\n id: string;\n startTime: number;\n endTime: number;\n pauseOnExit: boolean;\n vertical: string;\n snapToLines: boolean;\n lines: number;\n position: number;\n size: number;\n align: string;\n text: string;\n\n getCueAsHTML(): Node;\n onenter: (ev: any) => any;\n onexit: (ev: any) => any;\n}\n\ndeclare class TextTrackCueList {\n @@iterator(): Iterator;\n length: number;\n [index: number]: TextTrackCue;\n getCueById(id: string): ?TextTrackCue;\n}\n\ndeclare class TextTrack extends EventTarget {\n kind: string;\n label: string;\n language: string;\n\n mode: string;\n\n cues: TextTrackCueList;\n activeCues: TextTrackCueList;\n\n addCue(cue: TextTrackCue): void;\n removeCue(cue: TextTrackCue): void;\n\n oncuechange: (ev: any) => any;\n}\n\ndeclare class TextTrackList extends EventTarget {\n length: number;\n [index: number]: TextTrack;\n\n onaddtrack: (ev: any) => any;\n onremovetrack: (ev: any) => any;\n}\n\ndeclare class HTMLMediaElement extends HTMLElement {\n // error state\n error: ?MediaError;\n\n // network state\n src: string;\n srcObject: ?any;\n currentSrc: string;\n crossOrigin: ?string;\n NETWORK_EMPTY: number;\n NETWORK_IDLE: number;\n NETWORK_LOADING: number;\n NETWORK_NO_SOURCE: number;\n networkState: number;\n preload: string;\n buffered: TimeRanges;\n load(): void;\n canPlayType(type: string): string;\n\n // ready state\n HAVE_NOTHING: number;\n HAVE_METADATA: number;\n HAVE_CURRENT_DATA: number;\n HAVE_FUTURE_DATA: number;\n HAVE_ENOUGH_DATA: number;\n readyState: number;\n seeking: boolean;\n\n // playback state\n currentTime: number;\n duration: number;\n startDate: Date;\n paused: boolean;\n defaultPlaybackRate: number;\n playbackRate: number;\n played: TimeRanges;\n seekable: TimeRanges;\n ended: boolean;\n autoplay: boolean;\n loop: boolean;\n play(): Promise;\n pause(): void;\n fastSeek(): void;\n captureStream(): MediaStream;\n\n // media controller\n mediaGroup: string;\n controller: ?any;\n\n // controls\n controls: boolean;\n volume: number;\n muted: boolean;\n defaultMuted: boolean;\n controlsList?: DOMTokenList;\n\n // tracks\n audioTracks: AudioTrackList;\n videoTracks: VideoTrackList;\n textTracks: TextTrackList;\n addTextTrack(kind: string, label?: string, language?: string): TextTrack;\n\n // media keys\n mediaKeys?: ?MediaKeys;\n setMediakeys?: (mediakeys: ?MediaKeys) => Promise;\n}\n\ndeclare class HTMLAudioElement extends HTMLMediaElement {\n tagName: 'AUDIO';\n}\n\ndeclare class HTMLVideoElement extends HTMLMediaElement {\n tagName: 'VIDEO';\n width: number;\n height: number;\n videoWidth: number;\n videoHeight: number;\n poster: string;\n}\n\ndeclare class HTMLSourceElement extends HTMLElement {\n tagName: 'SOURCE';\n src: string;\n type: string;\n\n //when used with the picture element\n srcset: string;\n sizes: string;\n media: string;\n}\n\ndeclare class ValidityState {\n badInput: boolean;\n customError: boolean;\n patternMismatch: boolean;\n rangeOverflow: boolean;\n rangeUnderflow: boolean;\n stepMismatch: boolean;\n tooLong: boolean;\n tooShort: boolean;\n typeMismatch: boolean;\n valueMissing: boolean;\n valid: boolean;\n}\n\n// https://w3c.github.io/html/sec-forms.html#dom-selectionapielements-setselectionrange\ntype SelectionDirection = 'backward' | 'forward' | 'none';\ntype SelectionMode = 'select' | 'start' | 'end' | 'preserve';\ndeclare class HTMLInputElement extends HTMLElement {\n tagName: 'INPUT';\n accept: string;\n align: string;\n alt: string;\n autocomplete: string;\n autofocus: boolean;\n border: string;\n checked: boolean;\n complete: boolean;\n defaultChecked: boolean;\n defaultValue: string;\n dirname: string;\n disabled: boolean;\n dynsrc: string;\n files: FileList;\n form: HTMLFormElement | null;\n formAction: string;\n formEncType: string;\n formMethod: string;\n formNoValidate: boolean;\n formTarget: string;\n height: string;\n hspace: number;\n indeterminate: boolean;\n labels: NodeList;\n list: HTMLElement | null;\n loop: number;\n lowsrc: string;\n max: string;\n maxLength: number;\n min: string;\n multiple: boolean;\n name: string;\n pattern: string;\n placeholder: string;\n readOnly: boolean;\n required: boolean;\n selectionDirection: SelectionDirection;\n selectionEnd: number;\n selectionStart: number;\n size: number;\n src: string;\n start: string;\n status: boolean;\n step: string;\n type: string;\n useMap: string;\n validationMessage: string;\n validity: ValidityState;\n value: string;\n valueAsDate: Date;\n valueAsNumber: number;\n vrml: string;\n vspace: number;\n width: string;\n willValidate: boolean;\n popoverTargetElement: Element | null;\n popoverTargetAction: 'toggle' | 'show' | 'hide';\n\n checkValidity(): boolean;\n reportValidity(): boolean;\n setCustomValidity(error: string): void;\n createTextRange(): TextRange;\n select(): void;\n setRangeText(\n replacement: string,\n start?: void,\n end?: void,\n selectMode?: void,\n ): void;\n setRangeText(\n replacement: string,\n start: number,\n end: number,\n selectMode?: SelectionMode,\n ): void;\n setSelectionRange(\n start: number,\n end: number,\n direction?: SelectionDirection,\n ): void;\n showPicker(): void;\n stepDown(stepDecrement?: number): void;\n stepUp(stepIncrement?: number): void;\n}\n\ndeclare class HTMLButtonElement extends HTMLElement {\n tagName: 'BUTTON';\n autofocus: boolean;\n disabled: boolean;\n form: HTMLFormElement | null;\n labels: NodeList | null;\n name: string;\n type: string;\n validationMessage: string;\n validity: ValidityState;\n value: string;\n willValidate: boolean;\n\n checkValidity(): boolean;\n reportValidity(): boolean;\n setCustomValidity(error: string): void;\n popoverTargetElement: Element | null;\n popoverTargetAction: 'toggle' | 'show' | 'hide';\n}\n\n// https://w3c.github.io/html/sec-forms.html#the-textarea-element\ndeclare class HTMLTextAreaElement extends HTMLElement {\n tagName: 'TEXTAREA';\n autofocus: boolean;\n cols: number;\n dirName: string;\n disabled: boolean;\n form: HTMLFormElement | null;\n maxLength: number;\n name: string;\n placeholder: string;\n readOnly: boolean;\n required: boolean;\n rows: number;\n wrap: string;\n\n type: string;\n defaultValue: string;\n value: string;\n textLength: number;\n\n willValidate: boolean;\n validity: ValidityState;\n validationMessage: string;\n checkValidity(): boolean;\n setCustomValidity(error: string): void;\n\n labels: NodeList;\n\n select(): void;\n selectionStart: number;\n selectionEnd: number;\n selectionDirection: SelectionDirection;\n setSelectionRange(\n start: number,\n end: number,\n direction?: SelectionDirection,\n ): void;\n}\n\ndeclare class HTMLSelectElement extends HTMLElement {\n tagName: 'SELECT';\n autocomplete: string;\n autofocus: boolean;\n disabled: boolean;\n form: HTMLFormElement | null;\n labels: NodeList;\n length: number;\n multiple: boolean;\n name: string;\n options: HTMLOptionsCollection;\n required: boolean;\n selectedIndex: number;\n selectedOptions: HTMLCollection;\n size: number;\n type: string;\n validationMessage: string;\n validity: ValidityState;\n value: string;\n willValidate: boolean;\n\n add(element: HTMLElement, before?: HTMLElement): void;\n checkValidity(): boolean;\n item(index: number): HTMLOptionElement | null;\n namedItem(name: string): HTMLOptionElement | null;\n remove(index?: number): void;\n setCustomValidity(error: string): void;\n}\n\ndeclare class HTMLOptionsCollection extends HTMLCollection {\n selectedIndex: number;\n add(\n element: HTMLOptionElement | HTMLOptGroupElement,\n before?: HTMLElement | number,\n ): void;\n remove(index: number): void;\n}\n\ndeclare class HTMLOptionElement extends HTMLElement {\n tagName: 'OPTION';\n defaultSelected: boolean;\n disabled: boolean;\n form: HTMLFormElement | null;\n index: number;\n label: string;\n selected: boolean;\n text: string;\n value: string;\n}\n\ndeclare class HTMLOptGroupElement extends HTMLElement {\n tagName: 'OPTGROUP';\n disabled: boolean;\n label: string;\n}\n\ndeclare class HTMLAnchorElement extends HTMLElement {\n tagName: 'A';\n charset: string;\n coords: string;\n download: string;\n hash: string;\n host: string;\n hostname: string;\n href: string;\n hreflang: string;\n media: string;\n name: string;\n origin: string;\n password: string;\n pathname: string;\n port: string;\n protocol: string;\n rel: string;\n rev: string;\n search: string;\n shape: string;\n target: string;\n text: string;\n type: string;\n username: string;\n}\n\n// https://w3c.github.io/html/sec-forms.html#the-label-element\ndeclare class HTMLLabelElement extends HTMLElement {\n tagName: 'LABEL';\n form: HTMLFormElement | null;\n htmlFor: string;\n control: HTMLElement | null;\n}\n\ndeclare class HTMLLinkElement extends HTMLElement {\n tagName: 'LINK';\n crossOrigin: ?('anonymous' | 'use-credentials');\n href: string;\n hreflang: string;\n media: string;\n rel: string;\n sizes: DOMTokenList;\n type: string;\n as: string;\n}\n\ndeclare class HTMLScriptElement extends HTMLElement {\n tagName: 'SCRIPT';\n async: boolean;\n charset: string;\n crossOrigin?: string;\n defer: boolean;\n // flowlint unsafe-getters-setters:off\n get src(): string;\n set src(value: string | TrustedScriptURL): void;\n get text(): string;\n set text(value: string | TrustedScript): void;\n // flowlint unsafe-getters-setters:error\n type: string;\n}\n\ndeclare class HTMLStyleElement extends HTMLElement {\n tagName: 'STYLE';\n disabled: boolean;\n media: string;\n scoped: boolean;\n sheet: ?CSSStyleSheet;\n type: string;\n}\n\ndeclare class HTMLParagraphElement extends HTMLElement {\n tagName: 'P';\n align: 'left' | 'center' | 'right' | 'justify'; // deprecated in HTML 4.01\n}\n\ndeclare class HTMLHtmlElement extends HTMLElement {\n tagName: 'HTML';\n}\n\ndeclare class HTMLBodyElement extends HTMLElement {\n tagName: 'BODY';\n}\n\ndeclare class HTMLHeadElement extends HTMLElement {\n tagName: 'HEAD';\n}\n\ndeclare class HTMLDivElement extends HTMLElement {\n tagName: 'DIV';\n}\n\ndeclare class HTMLSpanElement extends HTMLElement {\n tagName: 'SPAN';\n}\n\ndeclare class HTMLAppletElement extends HTMLElement {}\n\ndeclare class HTMLHeadingElement extends HTMLElement {\n tagName: 'H1' | 'H2' | 'H3' | 'H4' | 'H5' | 'H6';\n}\n\ndeclare class HTMLHRElement extends HTMLElement {\n tagName: 'HR';\n}\n\ndeclare class HTMLBRElement extends HTMLElement {\n tagName: 'BR';\n}\n\ndeclare class HTMLDListElement extends HTMLElement {\n tagName: 'DL';\n}\n\ndeclare class HTMLAreaElement extends HTMLElement {\n tagName: 'AREA';\n alt: string;\n coords: string;\n shape: string;\n target: string;\n download: string;\n ping: string;\n rel: string;\n relList: DOMTokenList;\n referrerPolicy: string;\n}\n\ndeclare class HTMLDataElement extends HTMLElement {\n tagName: 'DATA';\n value: string;\n}\n\ndeclare class HTMLDataListElement extends HTMLElement {\n tagName: 'DATALIST';\n options: HTMLCollection;\n}\n\ndeclare class HTMLDialogElement extends HTMLElement {\n tagName: 'DIALOG';\n open: boolean;\n returnValue: string;\n show(): void;\n showModal(): void;\n close(returnValue: ?string): void;\n}\n\ndeclare class HTMLEmbedElement extends HTMLElement {\n tagName: 'EMBED';\n src: string;\n type: string;\n width: string;\n height: string;\n getSVGDocument(): ?Document;\n}\n\ndeclare class HTMLMapElement extends HTMLElement {\n tagName: 'MAP';\n areas: HTMLCollection;\n images: HTMLCollection;\n name: string;\n}\n\ndeclare class HTMLMeterElement extends HTMLElement {\n tagName: 'METER';\n high: number;\n low: number;\n max: number;\n min: number;\n optimum: number;\n value: number;\n labels: NodeList;\n}\n\ndeclare class HTMLModElement extends HTMLElement {\n tagName: 'DEL' | 'INS';\n cite: string;\n dateTime: string;\n}\n\ndeclare class HTMLObjectElement extends HTMLElement {\n tagName: 'OBJECT';\n contentDocument: ?Document;\n contentWindow: ?WindowProxy;\n data: string;\n form: ?HTMLFormElement;\n height: string;\n name: string;\n type: string;\n typeMustMatch: boolean;\n useMap: string;\n validationMessage: string;\n validity: ValidityState;\n width: string;\n willValidate: boolean;\n checkValidity(): boolean;\n getSVGDocument(): ?Document;\n reportValidity(): boolean;\n setCustomValidity(error: string): void;\n}\n\ndeclare class HTMLOutputElement extends HTMLElement {\n defaultValue: string;\n form: ?HTMLFormElement;\n htmlFor: DOMTokenList;\n labels: NodeList;\n name: string;\n type: string;\n validationMessage: string;\n validity: ValidityState;\n value: string;\n willValidate: boolean;\n checkValidity(): boolean;\n reportValidity(): boolean;\n setCustomValidity(error: string): void;\n}\n\ndeclare class HTMLParamElement extends HTMLElement {\n tagName: 'PARAM';\n name: string;\n value: string;\n}\n\ndeclare class HTMLProgressElement extends HTMLElement {\n tagName: 'PROGRESS';\n labels: NodeList;\n max: number;\n position: number;\n value: number;\n}\n\ndeclare class HTMLPictureElement extends HTMLElement {\n tagName: 'PICTURE';\n}\n\ndeclare class HTMLTimeElement extends HTMLElement {\n tagName: 'TIME';\n dateTime: string;\n}\n\ndeclare class HTMLTitleElement extends HTMLElement {\n tagName: 'TITLE';\n text: string;\n}\n\ndeclare class HTMLTrackElement extends HTMLElement {\n tagName: 'TRACK';\n static NONE: 0;\n static LOADING: 1;\n static LOADED: 2;\n static ERROR: 3;\n\n default: boolean;\n kind: string;\n label: string;\n readyState: 0 | 1 | 2 | 3;\n src: string;\n srclang: string;\n track: TextTrack;\n}\n\ndeclare class HTMLQuoteElement extends HTMLElement {\n tagName: 'BLOCKQUOTE' | 'Q';\n cite: string;\n}\n\ndeclare class HTMLOListElement extends HTMLElement {\n tagName: 'OL';\n reversed: boolean;\n start: number;\n type: string;\n}\n\ndeclare class HTMLUListElement extends HTMLElement {\n tagName: 'UL';\n}\n\ndeclare class HTMLLIElement extends HTMLElement {\n tagName: 'LI';\n value: number;\n}\n\ndeclare class HTMLPreElement extends HTMLElement {\n tagName: 'PRE';\n}\n\ndeclare class HTMLMetaElement extends HTMLElement {\n tagName: 'META';\n content: string;\n httpEquiv: string;\n name: string;\n}\n\ndeclare class HTMLUnknownElement extends HTMLElement {}\n\ndeclare class Storage {\n length: number;\n getItem(key: string): ?string;\n setItem(key: string, data: string): void;\n clear(): void;\n removeItem(key: string): void;\n key(index: number): ?string;\n [name: string]: ?string;\n}\n\n/* window */\n\ndeclare type WindowProxy = any;\ndeclare function alert(message?: any): void;\ndeclare function prompt(message?: any, value?: any): string;\ndeclare function close(): void;\ndeclare function confirm(message?: string): boolean;\ndeclare function getComputedStyle(\n elt: Element,\n pseudoElt?: string,\n): CSSStyleDeclaration;\ndeclare opaque type AnimationFrameID;\ndeclare function requestAnimationFrame(\n callback: (timestamp: number) => void,\n): AnimationFrameID;\ndeclare function cancelAnimationFrame(requestId: AnimationFrameID): void;\ndeclare opaque type IdleCallbackID;\ndeclare function requestIdleCallback(\n cb: (deadline: {\n didTimeout: boolean,\n timeRemaining: () => number,\n ...\n }) => void,\n opts?: { timeout: number, ... },\n): IdleCallbackID;\ndeclare function cancelIdleCallback(id: IdleCallbackID): void;\ndeclare var localStorage: Storage;\ndeclare var devicePixelRatio: number;\ndeclare function focus(): void;\ndeclare function onfocus(ev: Event): any;\ndeclare function open(\n url?: string,\n target?: string,\n features?: string,\n replace?: boolean,\n): any;\ndeclare var parent: WindowProxy;\ndeclare function print(): void;\ndeclare var self: any;\ndeclare var sessionStorage: Storage;\ndeclare var top: WindowProxy;\ndeclare function getSelection(): Selection | null;\ndeclare var customElements: CustomElementRegistry;\ndeclare function scroll(x: number, y: number): void;\ndeclare function scroll(options: ScrollToOptions): void;\ndeclare function scrollTo(x: number, y: number): void;\ndeclare function scrollTo(options: ScrollToOptions): void;\ndeclare function scrollBy(x: number, y: number): void;\ndeclare function scrollBy(options: ScrollToOptions): void;\n\ntype HTMLElementTagNameMap = {\n a: HTMLAnchorElement,\n abbr: HTMLElement,\n address: HTMLElement,\n area: HTMLAreaElement,\n article: HTMLElement,\n aside: HTMLElement,\n audio: HTMLAudioElement,\n b: HTMLElement,\n base: HTMLBaseElement,\n bdi: HTMLElement,\n bdo: HTMLElement,\n blockquote: HTMLQuoteElement,\n body: HTMLBodyElement,\n br: HTMLBRElement,\n button: HTMLButtonElement,\n canvas: HTMLCanvasElement,\n caption: HTMLTableCaptionElement,\n cite: HTMLElement,\n code: HTMLElement,\n col: HTMLTableColElement,\n colgroup: HTMLTableColElement,\n data: HTMLDataElement,\n datalist: HTMLDataListElement,\n dd: HTMLElement,\n del: HTMLModElement,\n details: HTMLDetailsElement,\n dfn: HTMLElement,\n dialog: HTMLDialogElement,\n div: HTMLDivElement,\n dl: HTMLDListElement,\n dt: HTMLElement,\n em: HTMLElement,\n embed: HTMLEmbedElement,\n fieldset: HTMLFieldSetElement,\n figcaption: HTMLElement,\n figure: HTMLElement,\n footer: HTMLElement,\n form: HTMLFormElement,\n h1: HTMLHeadingElement,\n h2: HTMLHeadingElement,\n h3: HTMLHeadingElement,\n h4: HTMLHeadingElement,\n h5: HTMLHeadingElement,\n h6: HTMLHeadingElement,\n head: HTMLHeadElement,\n header: HTMLElement,\n hgroup: HTMLElement,\n hr: HTMLHRElement,\n html: HTMLHtmlElement,\n i: HTMLElement,\n iframe: HTMLIFrameElement,\n img: HTMLImageElement,\n input: HTMLInputElement,\n ins: HTMLModElement,\n kbd: HTMLElement,\n label: HTMLLabelElement,\n legend: HTMLLegendElement,\n li: HTMLLIElement,\n link: HTMLLinkElement,\n main: HTMLElement,\n map: HTMLMapElement,\n mark: HTMLElement,\n menu: HTMLMenuElement,\n meta: HTMLMetaElement,\n meter: HTMLMeterElement,\n nav: HTMLElement,\n noscript: HTMLElement,\n object: HTMLObjectElement,\n ol: HTMLOListElement,\n optgroup: HTMLOptGroupElement,\n option: HTMLOptionElement,\n output: HTMLOutputElement,\n p: HTMLParagraphElement,\n picture: HTMLPictureElement,\n pre: HTMLPreElement,\n progress: HTMLProgressElement,\n q: HTMLQuoteElement,\n rp: HTMLElement,\n rt: HTMLElement,\n ruby: HTMLElement,\n s: HTMLElement,\n samp: HTMLElement,\n script: HTMLScriptElement,\n search: HTMLElement,\n section: HTMLElement,\n select: HTMLSelectElement,\n slot: HTMLSlotElement,\n small: HTMLElement,\n source: HTMLSourceElement,\n span: HTMLSpanElement,\n strong: HTMLElement,\n style: HTMLStyleElement,\n sub: HTMLElement,\n summary: HTMLElement,\n sup: HTMLElement,\n table: HTMLTableElement,\n tbody: HTMLTableSectionElement,\n td: HTMLTableCellElement,\n template: HTMLTemplateElement,\n textarea: HTMLTextAreaElement,\n tfoot: HTMLTableSectionElement,\n th: HTMLTableCellElement,\n thead: HTMLTableSectionElement,\n time: HTMLTimeElement,\n title: HTMLTitleElement,\n tr: HTMLTableRowElement,\n track: HTMLTrackElement,\n u: HTMLElement,\n ul: HTMLUListElement,\n var: HTMLElement,\n video: HTMLVideoElement,\n wbr: HTMLElement,\n [string]: Element,\n};\n" }, { "path": "flow-typed/environments/jsx.js", "content": "// flow-typed signature: 740504cb8176bc8734d2a62895c6d35d\n// flow-typed version: a6edf4ac0b/jsx/flow_>=v0.83.x\n\n/**\n * https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes\n */\ndeclare type jsx$HTMLElement = {\n /**\n * Specifies a shortcut key to activate/focus an element\n */\n accessKey?: string,\n /**\n * Specifies one or more classnames for an element (refers to a class in a style sheet)\n */\n className?: string,\n /**\n * Specifies whether the content of an element is editable or not\n */\n contentEditable?: string,\n /**\n * Specifies meta tag for application testing or querying\n */\n 'data-testid'?: string,\n /**\n * Specifies the text direction for the content in an element\n */\n dir?: string,\n /**\n * Specifies whether an element is draggable or not\n */\n draggable?: string,\n /**\n * Specifies that an element is not yet, or is no longer, relevant\n */\n hidden?: boolean | '' | 'hidden' | 'until-found',\n /**\n * Specifies a unique id for an element\n */\n id?: string,\n /**\n * Specify that a standard HTML element should behave like a defined custom\n * built-in element\n * @see https://html.spec.whatwg.org/multipage/custom-elements.html#attr-is\n */\n is?: string,\n /**\n * Specifies the language of the element's content\n */\n lang?: string,\n /*\n * Roles define the semantic meaning of content, allowing screen readers and\n * other tools to present and support interaction with an object in a way that\n * is consistent with user expectations of that type of object.\n */\n role?: string,\n /*\n * Assigns a slot in a shadow DOM shadow tree to an element: An element with a\n * slot attribute is assigned to the slot created by the element whose\n * name attribute's value matches that slot attribute's value.\n */\n slot?: string,\n /**\n * Specifies whether the element is to have its spelling and grammar checked or not\n */\n spellCheck?: string,\n /*\n * Contains CSS styling declarations to be applied to the element.\n */\n style?: { +[string]: string | number, ... },\n /**\n * Specifies the tabbing order of an element\n */\n tabIndex?: string,\n /**\n * Specifies extra information about an element\n */\n title?: string,\n /**\n * Specifies whether the content of an element should be translated or not\n */\n translate?: string,\n ...\n};\n\n/**\n * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types\n */\ndeclare type jsx$HTMLInputElement$Type =\n | 'button'\n | 'checkbox'\n | 'color'\n | 'date'\n | 'datetime-local'\n | 'email'\n | 'file'\n | 'hidden'\n | 'image'\n | 'month'\n | 'number'\n | 'password'\n | 'radio'\n | 'range'\n | 'reset'\n | 'search'\n | 'submit'\n | 'tel'\n | 'text'\n | 'time'\n | 'url'\n | 'week';\n\n/**\n * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes\n */\ndeclare type jsx$HTMLInputElement = {\n ...jsx$HTMLElement,\n value?: string,\n type?: jsx$HTMLInputElement$Type,\n ...\n};\n\n/**\n * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attributes\n */\ndeclare type jsx$HTMLTextAreaElement = {\n ...jsx$HTMLElement,\n /**\n * This attribute indicates whether the value of the control can be automatically completed by the browser. Possible values are:\n *\n * off: The user must explicitly enter a value into this field for every use, or the document provides its own auto-completion method; the browser does not automatically complete the entry.\n * on: The browser can automatically complete the value based on values that the user has entered during previous uses.\n */\n autoComplete?: 'on' | 'off',\n /**\n * A string which indicates whether or not to activate automatic spelling correction and processing of text substitutions (if any are configured) while the user is editing this textarea. Permitted values are:\n *\n * off: Disable automatic spelling correction and text substitutions.\n * on: Enable automatic spelling correction and text substitutions.\n */\n autoCorrect?: 'on' | 'off',\n /**\n * This Boolean attribute lets you specify that a form control should have input focus when the page loads. Only one form-associated element in a document can have this attribute specified.\n */\n autoFocus?: boolean,\n /**\n * The visible width of the text control, in average character widths. If it is specified, it must be a positive integer. If it is not specified, the default value is 20.\n */\n cols?: number,\n /**\n * This Boolean attribute indicates that the user cannot interact with the control. If this attribute is not specified, the control inherits its setting from the containing element, for example
; if there is no containing element when the disabled attribute is set, the control is enabled.\n */\n disabled?: boolean,\n /**\n * The form element that the