Showing preview only (1,708K chars total). Download the full file or copy to clipboard to get everything.
Repository: stitchesjs/stitches
Branch: canary
Commit: 50fd8a1adc63
Files: 180
Total size: 11.9 MB
Directory structure:
gitextract_6f0xewf7/
├── .codesandbox/
│ └── ci.json
├── .editorconfig
├── .github/
│ ├── CODEOWNERS
│ ├── ISSUE_TEMPLATE/
│ │ ├── bug_report.md
│ │ └── feature_request.md
│ └── workflows/
│ └── test.yml
├── .gitignore
├── .npmrc
├── .task/
│ ├── build-csstype.js
│ ├── build.js
│ ├── internal/
│ │ ├── child_process.js
│ │ ├── color.js
│ │ ├── dirs.js
│ │ ├── expect.js
│ │ ├── fs-test.js
│ │ ├── fs.js
│ │ ├── js.js
│ │ ├── js.transformDestructuring.js
│ │ ├── js.transformIIFE.js
│ │ ├── js.transformModulesToCJS.js
│ │ ├── js.transformOptionalCatchToParam.js
│ │ ├── process.js
│ │ ├── readline.js
│ │ └── url.js
│ ├── lint-esm.js
│ ├── lint-pkg.js
│ ├── lint-tsc.js
│ ├── lint.js
│ ├── release.js
│ ├── test-coverage.js
│ └── test.js
├── .vscode/
│ ├── package.schema.json
│ └── settings.json
├── CODE_OF_CONDUCT.md
├── CONTRIBUTING.md
├── LICENSE.md
├── README.md
├── package.json
├── packages/
│ ├── core/
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── ThemeToken.js
│ │ │ ├── convert/
│ │ │ │ ├── toCamelCase.js
│ │ │ │ ├── toCssRules.js
│ │ │ │ ├── toHash.js
│ │ │ │ ├── toHyphenCase.js
│ │ │ │ ├── toPolyfilledValue.js
│ │ │ │ ├── toResolvedMediaQueryRanges.js
│ │ │ │ ├── toResolvedSelectors.js
│ │ │ │ ├── toSizingValue.js
│ │ │ │ ├── toTailDashed.js
│ │ │ │ └── toTokenizedValue.js
│ │ │ ├── createStitches.js
│ │ │ ├── default/
│ │ │ │ └── defaultThemeMap.js
│ │ │ ├── features/
│ │ │ │ ├── createTheme.js
│ │ │ │ ├── css.js
│ │ │ │ ├── globalCss.js
│ │ │ │ └── keyframes.js
│ │ │ ├── index.js
│ │ │ ├── sheet.js
│ │ │ └── utility/
│ │ │ ├── createMemo.js
│ │ │ ├── define.js
│ │ │ ├── getCachedConfig.js
│ │ │ ├── getNonce.js
│ │ │ ├── hasNames.js
│ │ │ ├── hasOwn.js
│ │ │ ├── index.d.ts
│ │ │ └── internal.js
│ │ ├── tests/
│ │ │ ├── basic.js
│ │ │ ├── component-composition.js
│ │ │ ├── component-conditions.js
│ │ │ ├── component-css-prop.js
│ │ │ ├── component-empty-variants.js
│ │ │ ├── component-utils-and-types.js
│ │ │ ├── component-variants.js
│ │ │ ├── global-atrules.js
│ │ │ ├── issue-450.js
│ │ │ ├── issue-492.js
│ │ │ ├── issue-652.js
│ │ │ ├── issue-655.js
│ │ │ ├── issue-725.js
│ │ │ ├── issue-788.js
│ │ │ ├── issue-908.js
│ │ │ ├── issue-921.ts
│ │ │ ├── issue-943.js
│ │ │ ├── issue-999.js
│ │ │ ├── keyframes.js
│ │ │ ├── theme.js
│ │ │ ├── types.test.ts
│ │ │ ├── universal-autoprefixer.js
│ │ │ ├── universal-functionality.js
│ │ │ ├── universal-logical-properties.js
│ │ │ ├── universal-nesting.js
│ │ │ ├── universal-numeric-values.js
│ │ │ ├── universal-polyfill-prefixed-values.js
│ │ │ ├── universal-prefix.js
│ │ │ ├── universal-serialization.js
│ │ │ ├── universal-tokens.js
│ │ │ ├── universal-with-typing.ts
│ │ │ ├── utils.js
│ │ │ └── with-config-api.js
│ │ └── types/
│ │ ├── config.d.ts
│ │ ├── css-util.d.ts
│ │ ├── css.d.ts
│ │ ├── index.d.ts
│ │ ├── stitches.d.ts
│ │ ├── styled-component.d.ts
│ │ ├── theme.d.ts
│ │ └── util.d.ts
│ ├── react/
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── createStitches.js
│ │ │ ├── features/
│ │ │ │ └── styled.js
│ │ │ ├── index.js
│ │ │ └── utility/
│ │ │ └── getCachedConfig.js
│ │ ├── tests/
│ │ │ ├── basic.js
│ │ │ ├── component-as-props.js
│ │ │ ├── component-className-prop.js
│ │ │ ├── component-composition.js
│ │ │ ├── component-css-prop-react.js
│ │ │ ├── component-css-prop.js
│ │ │ ├── component-repeated-variants.js
│ │ │ ├── component-variants.js
│ │ │ ├── component.js
│ │ │ ├── issue-416.js
│ │ │ ├── issue-450.js
│ │ │ ├── issue-555.js
│ │ │ ├── issue-671-forwardRef.js
│ │ │ ├── issue-671.js
│ │ │ ├── issue-737.js
│ │ │ ├── issue-921.tsx
│ │ │ ├── issue-943.js
│ │ │ ├── react.js
│ │ │ ├── types.test.tsx
│ │ │ ├── universal-serialization.js
│ │ │ ├── variants.js
│ │ │ └── with-config-api.js
│ │ └── types/
│ │ ├── config.d.ts
│ │ ├── css-util.d.ts
│ │ ├── css.d.ts
│ │ ├── index.d.ts
│ │ ├── stitches.d.ts
│ │ ├── styled-component.d.ts
│ │ ├── theme.d.ts
│ │ └── util.d.ts
│ ├── stringify/
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── Array.js
│ │ │ ├── getResolvedSelectors.js
│ │ │ ├── index.js
│ │ │ └── toCase.js
│ │ ├── tests/
│ │ │ ├── at-rule-font-face.js
│ │ │ ├── at-rule-import.js
│ │ │ ├── at-rule-keyframes.js
│ │ │ ├── index.js
│ │ │ ├── internal-toCase.js
│ │ │ ├── nesting-rules.js
│ │ │ └── replacer-prefixing.js
│ │ └── types/
│ │ └── index.d.ts
│ └── test/
│ ├── .eslintrc
│ ├── Issue-803-core.ts
│ ├── Issue-803-react.ts
│ ├── Issue-813-core.ts
│ ├── Issue-813-react.ts
│ ├── built-types/
│ │ ├── Issue-803-core.d.ts
│ │ ├── Issue-803-react.d.ts
│ │ ├── Issue-813-core.d.ts
│ │ ├── Issue-813-react.d.ts
│ │ ├── built-types-test.tsx
│ │ ├── index.d.ts
│ │ ├── issue-749-react.d.ts
│ │ └── stitches.config.d.ts
│ ├── index.tsx
│ ├── issue-749-react.tsx
│ ├── package.json
│ ├── stitches.config.ts
│ ├── traces/
│ │ ├── trace.json
│ │ └── types.json
│ └── tsconfig.json
├── tsconfig.json
└── tslint.json
================================================
FILE CONTENTS
================================================
================================================
FILE: .codesandbox/ci.json
================================================
{
"node": "14",
"packages": ["packages/core", "packages/react"],
"sandboxes": ["7njqn", "2uwsq"]
}
================================================
FILE: .editorconfig
================================================
root = true
[*]
end_of_line = lf
insert_final_newline = true
indent_style = tab
trim_trailing_whitespace = true
[*.md]
trim_trailing_whitespace = false
[*.{json,md,yml}]
indent_size = 2
indent_style = space
================================================
FILE: .github/CODEOWNERS
================================================
# Learn how to add code owners here:
# https://help.github.com/en/articles/about-code-owners
* @jonathantneal @peduarte
================================================
FILE: .github/ISSUE_TEMPLATE/bug_report.md
================================================
---
name: Bug report
about: Create a report to help us improve
title: ''
labels: ''
assignees: ''
---
# Bug report
## Describe the bug
A clear and concise description of what the bug is.
## To Reproduce
Steps to reproduce the behavior, please provide code snippets or a repository:
1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error
## Expected behavior
A clear and concise description of what you expected to happen.
## Screenshots
If applicable, add screenshots to help explain your problem.
## System information
- OS: [e.g. macOS, Windows]
- Browser (if applies) [e.g. chrome, safari]
- Version of Stitches: [e.g. 0.0.2]
- Version of Node.js: [e.g. 10.10.0]
## Additional context
Add any other context about the problem here.
================================================
FILE: .github/ISSUE_TEMPLATE/feature_request.md
================================================
---
name: Feature request
about: Suggest an idea for this project
title: ''
labels: ''
assignees: ''
---
**Is your feature request related to a problem? Please describe.**
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
**Describe the solution you'd like**
A clear and concise description of what you want to happen.
**Describe alternatives you've considered**
A clear and concise description of any alternative solutions or features you've considered.
**Additional context**
Add any other context or screenshots about the feature request here.
================================================
FILE: .github/workflows/test.yml
================================================
name: CI
on: push
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- uses: actions/setup-node@v2
with:
node-version: '16'
- name: Install modules
run: yarn
- name: Run tests
run: yarn test
================================================
FILE: .gitignore
================================================
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
lerna-debug.log*
es
lib
.DS_Store
# Diagnostic reports (https://nodejs.org/api/report.html)
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
# Runtime data
pids
package-lock.json
yarn.lock
*.pid
*.seed
*.pid.lock
# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov
# Coverage directory used by tools like istanbul
coverage
*.lcov
# nyc test coverage
.nyc_output
# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
.grunt
# Bower dependency directory (https://bower.io/)
bower_components
# node-waf configuration
.lock-wscript
# Compiled binary addons (https://nodejs.org/api/addons.html)
build/Release
# Dependency directories
node_modules/
jspm_packages/
packages/*/utils/
# TypeScript v1 declaration files
typings/
# TypeScript cache
*.tsbuildinfo
# Optional npm cache directory
.npm
# Optional eslint cache
.eslintcache
# Microbundle cache
.rpt2_cache/
.rts2_cache_cjs/
.rts2_cache_es/
.rts2_cache_umd/
# Optional REPL history
.node_repl_history
# Output of 'npm pack'
*.tgz
# Yarn Integrity file
.yarn-integrity
# dotenv environment variables file
.env
.env.test
# parcel-bundler cache (https://parceljs.org/)
.cache
# Next.js build output
.next
# Nuxt.js build / generate output
.nuxt
dist
# Gatsby files
.cache/
# Comment in the public line in if your project uses Gatsby and *not* Next.js
# https://nextjs.org/blog/next-9-1#public-directory-support
# public
# vuepress build output
.vuepress/dist
# Serverless directories
.serverless/
# FuseBox cache
.fusebox/
# DynamoDB Local files
.dynamodb/
# TernJS port file
.tern-port
# IntelliJ
.idea/
================================================
FILE: .npmrc
================================================
package-lock = false
save-exact = true
================================================
FILE: .task/build-csstype.js
================================================
import * as fs from './internal/fs.js'
import URL from './internal/url.js'
const rootUrl = URL.from(import.meta.url).to('../')
const dtsOriginalURL = rootUrl.to('./node_modules/csstype/index.d.ts')
const generateType = async (packageUrl) => {
const dtsOriginalTxt = await fs.readFile(dtsOriginalURL, 'utf8')
const dtsModifiedURL = packageUrl.to('types/css.d.ts')
console.log(dtsModifiedURL.pathname)
const dtsModifiedTxt = new ModifiedString(dtsOriginalTxt)
.withoutVendorTyping
.withCamelCasedColors
.withAddedLicense
.withAddedColorFunctions
.withFixedColorScheme
.withFixedFontFamily
.withFixedMatchingSelector
.withFixedNestingSelectors
.withFixedProperties
.withFixedPropertyAtRule
.withFixedStretchValue
.withFixedSystemColor
.withoutBrowserComments
.withoutImplicitGlobals
.withoutPropertyValueTyping
.withoutGenericTyping
.withoutNarrowingPatch
.withoutNeverInChain
.withoutTrailingSpace
.toString()
await fs.writeFile(dtsModifiedURL, dtsModifiedTxt)
}
const generateTypes = async () => {
await generateType(rootUrl.to('packages/core/'))
await generateType(rootUrl.to('packages/react/'))
}
class ModifiedString extends String {
replace(matcher, replacer) {
replacer = typeof replacer === 'function' ? replacer : replacer
return new ModifiedString(super.replace(matcher, replacer))
}
// with
get withAddedColorFunctions() {
return this.replace(
/"CurrentColor"/g,
'"CurrentColor" | "hsl(" | "lab(" | "rgb("'
)
}
get withAddedLicense() {
const licenseComment = `/** @license MIT License\n * Copyright (c) 2017-present, Fredrik Nicol\n * Copyright (c) 2021-present, Jonathan Neal\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the "Software"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n */`
return this.replace(
/^/,
`${licenseComment}\n\n`
)
}
get withCamelCasedColors() {
const cssColorNames = ['AliceBlue', 'AntiqueWhite', 'Aqua', 'Aquamarine', 'Azure', 'Beige', 'Bisque', 'Black', 'BlanchedAlmond', 'Blue', 'BlueViolet', 'Brown', 'BurlyWood', 'CadetBlue', 'Chartreuse', 'Chocolate', 'Coral', 'CornflowerBlue', 'Cornsilk', 'CurrentColor', 'Crimson', 'Cyan', 'DarkBlue', 'DarkCyan', 'DarkGoldenRod', 'DarkGray', 'DarkGrey', 'DarkGreen', 'DarkKhaki', 'DarkMagenta', 'DarkOliveGreen', 'DarkOrange', 'DarkOrchid', 'DarkRed', 'DarkSalmon', 'DarkSeaGreen', 'DarkSlateBlue', 'DarkSlateGray', 'DarkSlateGrey', 'DarkTurquoise', 'DarkViolet', 'DeepPink', 'DeepSkyBlue', 'DimGray', 'DimGrey', 'DodgerBlue', 'FireBrick', 'FloralWhite', 'ForestGreen', 'Fuchsia', 'Gainsboro', 'GhostWhite', 'Gold', 'GoldenRod', 'Gray', 'Grey', 'Green', 'GreenYellow', 'HoneyDew', 'HotPink', 'IndianRed', 'Indigo', 'Ivory', 'Khaki', 'Lavender', 'LavenderBlush', 'LawnGreen', 'LemonChiffon', 'LightBlue', 'LightCoral', 'LightCyan', 'LightGoldenRodYellow', 'LightGray', 'LightGrey', 'LightGreen', 'LightPink', 'LightSalmon', 'LightSeaGreen', 'LightSkyBlue', 'LightSlateGray', 'LightSlateGrey', 'LightSteelBlue', 'LightYellow', 'Lime', 'LimeGreen', 'Linen', 'Magenta', 'Maroon', 'MediumAquaMarine', 'MediumBlue', 'MediumOrchid', 'MediumPurple', 'MediumSeaGreen', 'MediumSlateBlue', 'MediumSpringGreen', 'MediumTurquoise', 'MediumVioletRed', 'MidnightBlue', 'MintCream', 'MistyRose', 'Moccasin', 'NavajoWhite', 'Navy', 'OldLace', 'Olive', 'OliveDrab', 'Orange', 'OrangeRed', 'Orchid', 'PaleGoldenRod', 'PaleGreen', 'PaleTurquoise', 'PaleVioletRed', 'PapayaWhip', 'PeachPuff', 'Peru', 'Pink', 'Plum', 'PowderBlue', 'Purple', 'RebeccaPurple', 'Red', 'RosyBrown', 'RoyalBlue', 'SaddleBrown', 'Salmon', 'SandyBrown', 'SeaGreen', 'SeaShell', 'Sienna', 'Silver', 'SkyBlue', 'SlateBlue', 'SlateGray', 'SlateGrey', 'Snow', 'SpringGreen', 'SteelBlue', 'Tan', 'Teal', 'Thistle', 'Tomato', 'Turquoise', 'Violet', 'Wheat', 'White', 'WhiteSmoke', 'Yellow', 'YellowGreen'].reduce(
(colors, UpperCamelCaseColorName) =>
Object.assign(colors, {
[`"${UpperCamelCaseColorName.toLowerCase()}"`]: `"${UpperCamelCaseColorName}"`,
}),
Object.create(null),
)
return this.replace(
RegExp(Object.keys(cssColorNames).join('|'), 'ig'),
$0 => cssColorNames[$0.toLowerCase()]
)
}
get withFixedColorScheme() {
return this.replace(
'type ColorScheme = Globals | "dark" | "light" | "normal"',
'type ColorScheme = Globals | "dark" | "light" | "light dark" | "normal"'
)
}
get withFixedFontFamily() {
return this.replace(
'type GenericFamily = "cursive" | "fantasy" | "monospace" | "sans-serif" | "serif"',
'type GenericFamily = "cursive" | "emoji" | "fangsong" | "fantasy" | "math" | "monospace" | "sans-serif" | "serif" | "system-ui" | "ui-monospace" | "ui-rounded" | "ui-sans-serif" | "ui-serif"'
)
}
get withFixedNestingSelectors() {
return this.replace(
/Pseudos =[\W\w]+?;/g,
fragment => fragment.replace(
/":/g,
'"&:'
).replace(
/ \| "&:matches"\n/,
''
)
).replace(
/AdvancedPseudos =[\W\w]+?;/g,
fragment => fragment.replace(
/"&[^"]+/g,
'$&('
)
)
}
get withFixedProperties() {
return this.replace(
'type ZIndex = Globals | "auto" | (number & {})',
'type ZIndex = Globals | "auto" | (number & {}) | (string & {})'
).replace(
'type LetterSpacing<TLength = (string & {}) | 0> = Globals | TLength | "normal"',
'type LetterSpacing = Globals | "normal" | (number & {}) | (string & {})'
).replace(
/Property.LetterSpacing<TLength>/g,
'Property.LetterSpacing'
).replace(
'FontWeightAbsolute = "bold" | "normal"',
'FontWeightAbsolute = "bold" | "normal" | (string & {})'
).replace(
'DataType.FontWeightAbsolute | (string & {})',
'DataType.FontWeightAbsolute'
).replace(
'FlexGrow = Globals | (number & {})',
'FlexGrow = Globals | (number & {}) | (string & {})'
)
}
get withFixedPropertyAtRule() {
return this.replace(
'type Inherits = "false" | "true";',
'type Inherits = "false" | "true" | boolean;'
).replace(
'initialValue?: string;',
'initialValue?: boolean | number | string',
)
}
get withFixedMatchingSelector() {
return this.replace(
/matches\(\)/g,
'matches'
)
}
get withFixedStretchValue() {
return this.replace(
/(\n +\| +)?"fit-content"/g,
($0, $1) => $1 ? `${$1}"stretch"${$1}"fit-content"` : '"stretch" | "fit-content"'
)
}
get withFixedSystemColor() {
return this.replace(
/type DeprecatedSystemColor[^;]+;/,
'type DeprecatedSystemColor = "ActiveText" | "ButtonFace" | "ButtonText" | "ButtonBorder" | "Canvas" | "CanvasText" | "Field" | "FieldText" | "GrayText" | "Highlight" | "HighlightText" | "LinkText" | "Mark" | "MarkText" | "VisitedText"'
).replace(
/DeprecatedSystemColor/g,
'SystemColor'
)
}
// without
get withoutGenericTyping() {
return this.replace(
/\n? *(<(TLength|TTime)[^>]*>)|\| TTime|TTime \|/g,
''
).replace(
/\| TLength/g,
'| number'
).replace(
/TLength \|/g,
'number |'
)
}
get withoutBrowserComments() {
return this.replace(
/(?<= )\* [-_|][\W\w]+?(?=\*\/)/g,
''
)
}
get withoutImplicitGlobals() {
return this.replace(
/\n?( +\| +)?(?<!type )Globals/g,
'$1never'
)
}
get withoutNarrowingPatch() {
return this.replace(
/\(number & \{\}\)/g,
'OnlyNumber'
).replace(
/\(string & \{\}\)/g,
'OnlyString'
)
.replace(
/number \| "([^\n]+)" \| OnlyString/g,
'"$1" | number | OnlyString'
).replace(
/((number|OnlyNumber) \| (string|OnlyString)( \| OnlyNumber)?|OnlyString \| OnlyNumber)/g,
'OnlyStringNumeric'
).replace(
/export namespace Property/,
'export type OnlyObject = Record<never,never>\n\n' +
'export type OnlyNumber = number & OnlyObject\n\n' +
'export type OnlyString = string & OnlyObject\n\n' +
'export type OnlyStringNumeric = (number | string) & OnlyObject\n\n' +
'export namespace Property'
)
}
get withoutNeverInChain() {
return this.replace(
/(never \| | \| never)/g,
''
)
}
get withoutPropertyValueTyping() {
return this.replace(
/export type PropertyValue[\W\w]+?;/,
''
)
}
get withoutTrailingSpace() {
return this.replace(
/\n? +(?=\n)/g,
''
).replace(
/\n{4,}/g,
'\n\n\n'
)
}
get withoutVendorTyping() {
return this.replace(
/\nexport (interface|type) (Obsolete|Vendor)[^\n]+?\{\n[\W\w]+?\n\};?(?=\n)/g, ''
).replace(
/\nexport interface (Obsolete|Vendor)[^\n]+?\>\n[\W\w]+?\{\};?(?=\n)/g, ''
).replace(
/\nexport interface (Obsolete|Vendor)[^\n]+?{};?(?=\n)/g, ''
).replace(
/\n (Obsolete|Vendor)[^\n]+?,(?=\n)/g, ''
).replace(
/\n *\| *":*-[^"]+"/g, ''
).replace(
'\n "-moz-font-feature-settings"?: FontFeatureSettings;', ''
).replace(
/\n? *\| *"-[^"]+"/g, ''
).replace(
/"-[^"]+" *\| *\n?/g, ''
).replace(
/\n? *\| *"-[^\n]+(?=\n)/g, ''
).replace(
/\n MozFontFeatureSettings?: FontFeatureSettings;/, ''
)
}
}
generateTypes()
================================================
FILE: .task/build.js
================================================
import * as fs from './internal/fs.js'
import * as js from './internal/js.js'
import URL from './internal/url.js'
import { box } from './internal/color.js'
import { transformDestructuring } from './internal/js.transformDestructuring.js'
import { transformModulesToCJS } from './internal/js.transformModulesToCJS.js'
import { transformOptionalCatchToParam } from './internal/js.transformOptionalCatchToParam.js'
import { transformIIFE } from './internal/js.transformIIFE.js'
import { corePackageUrl, reactPackageUrl, stringifyPackageUrl } from './internal/dirs.js'
import { isProcessMeta, getProcessArgOf } from './internal/process.js'
import esbuild from 'esbuild'
import nodemon from 'nodemon'
import zlib from 'zlib'
import { minify } from 'terser'
const matchImports = /import\s*([\w*${}\n\r\t, ]+)from\s*["']([^"']+)["'];?/g
const matchExports = /export\s*([\w*${}\n\r\t, ]+);?$/g
const matchNamings = /[{,]?([$\w]+)(?:\s+as\s+(\w+))?/gy
const variants = {
esm: {
extension: 'mjs',
async transform(code, smap) {
return await minify(code, {
sourceMap: { content: smap },
compress: true,
module: true,
mangle: true,
toplevel: true,
})
},
},
cjs: {
extension: 'cjs',
async transform(code, smap) {
let cjsast = js.parse(code)
transformModulesToCJS(cjsast)
transformOptionalCatchToParam(cjsast)
transformDestructuring(cjsast)
return await minify(cjsast.toString(), {
sourceMap: { content: smap },
compress: true,
module: true,
mangle: true,
toplevel: true,
})
},
},
gjs: {
extension: 'global.js',
async transform(code, smap) {
let cjsast = js.parse(code)
transformIIFE(cjsast)
return await minify(cjsast.toString(), {
sourceMap: { content: smap },
compress: true,
module: true,
mangle: true,
toplevel: true,
})
},
},
}
export const build = async (packageUrl, opts) => {
opts = Object.assign({ only: [] }, opts)
const initPackageUrl = new URL('src/', packageUrl)
const distPackageUrl = new URL('dist/', packageUrl)
const packageJsonUrl = new URL(`package.json`, packageUrl)
const packageName = JSON.parse(await fs.readFile(packageJsonUrl, 'utf8')).name
if (!opts.only.length || opts.only.includes(packageName)) {
const targetPathname = new URL('index.js', initPackageUrl).pathname
const outputPathname = new URL('index.js', distPackageUrl).pathname
// Build ESM version
let {
outputFiles: [{ text: smap }, { text: code }],
} = await esbuild.build({
entryPoints: [targetPathname],
outfile: outputPathname,
bundle: true,
external: ['react'],
format: 'esm',
sourcemap: 'external',
write: false,
})
// ensure empty dist directory
await fs.mkdir(distPackageUrl, { recursive: true })
// write map
fs.writeFile(new URL(`index.map`, distPackageUrl), smap)
// prepare variations
const size = {
name: packageName,
types: {},
}
// write variation builds
for (const variant in variants) {
const variantInfo = variants[variant]
const variantPath = new URL(`dist/index.${variantInfo.extension}`, packageUrl).pathname
let { code: variantCode } = await variantInfo.transform(code, smap)
const variantMins = (Buffer.byteLength(variantCode) / 1000).toFixed(2)
const variantGzip = Number(zlib.gzipSync(variantCode, { level: 9 }).length / 1000).toFixed(2)
size.types[variant] = {
min: variantMins,
gzp: variantGzip,
}
await fs.writeFile(variantPath, variantCode + `\n//# sourceMappingUrl=index.map`)
}
console.log(box(size))
}
}
export const buildAll = async (opts) => {
await build(stringifyPackageUrl, opts)
await build(corePackageUrl, opts)
await build(reactPackageUrl, opts)
}
if (isProcessMeta(import.meta)) {
if (getProcessArgOf('watch').includes(true)) {
let onlyArgs = getProcessArgOf('only')
onlyArgs = onlyArgs.length ? ['--only', ...onlyArgs] : onlyArgs
nodemon(
[
'-q',
`--watch packages/core/src`,
`--watch packages/core/tests`,
`--watch packages/core/types`,
`--watch packages/react/src`,
`--watch packages/react/tests`,
`--watch packages/react/types`,
`--watch packages/stringify/src`,
`--watch packages/stringify/tests`,
`--watch packages/stringify/types`,
// exec
`--exec "${['node', './.task/build.js', ...onlyArgs].join(' ')}"`,
].join(' '),
).on('start', () => {
process.stdout.write('\u001b[3J\u001b[2J\u001b[1J')
console.clear()
}).on('quit', () => process.exit())
} else {
buildAll({
only: getProcessArgOf('only'),
}).catch((error) => {
console.error(error)
process.exitCode = 1
})
}
}
================================================
FILE: .task/internal/child_process.js
================================================
import cp from 'child_process'
import { rootUrl } from './dirs.js'
export * from 'child_process'
export const spawn = (
/** @type {string} */ exec,
/** @type {readonly string[]} */ args = [],
/** @type {cp.SpawnOptionsWithoutStdio} */ opts = {}
) => new Promise(
(close, error) => {
cp.spawn(exec, [].concat(args || []), {
cwd: rootUrl.pathname,
env: { ...process.env },
stdio: 'inherit',
...Object(opts)
})._events = { close, error }
}
)
================================================
FILE: .task/internal/color.js
================================================
const ansi = (id) => `\x1b[${id}m`
const escape = (string) => string.replace(/[\\^$*+?.()|[\]{}]/g, '\\$&')
const ansiRe = RegExp(escape(ansi(0)), 'g')
export const color = (string, id) => ansi(id) + string.replace(ansiRe, ansi(0) + ansi(id)) + ansi(0)
export const bold = (string) => color(string, 1)
export const dim = (string) => color(string, 2)
export const underline = (string) => color(string, 4)
export const invert = (string) => color(string, 7)
export const black = (string) => color(string, 30)
export const red = (string) => color(string, 31)
export const green = (string) => color(string, 32)
export const yellow = (string) => color(string, 33)
export const blue = (string) => color(string, 34)
export const magenta = (string) => color(string, 35)
export const cyan = (string) => color(string, 36)
export const white = (string) => color(string, 37)
export const bgBlack = (string) => color(string, 40)
export const bgRed = (string) => color(string, 41)
export const bgGreen = (string) => color(string, 42)
export const bgYellow = (string) => color(string, 43)
export const bgBlue = (string) => color(string, 44)
export const bgMagenta = (string) => color(string, 45)
export const bgCyan = (string) => color(string, 46)
export const bgWhite = (string) => color(string, 47)
export const pad = (string, size = 0, char = ' ') => string.padStart((string.length + size) / 2, char).padEnd(size, char)
export const box = ({
name,
types
}) => {
const border = (text) => dim(cyan(text))
const v = border('│')
const h = (size) => border(pad('', size, '┈'))
const nameLead = pad('', 16 - name.length / 2)
const nameTail = pad('', nameLead.length + name.length % 2)
const nullLine = pad('', 32)
const kb = (kb) => bold(green(kb.slice(0, -3))) + ' ' + dim(kb.slice(-2))
return [
border(`╭────────────────────────────────╮`),
`${v}${nameLead}${bold(white(name))}${nameTail}${v}`,
`${v}${nullLine}${v}`,
...Object.entries(types).map(([type, { min, gzp }]) => [
`${v} ${h(15 - type.length)} ${cyan(type)} ${h(15 - type.length - type.length % 2)} ${v}`,
`${v} ${' '.repeat(3 - min.length % 2)}${kb(min + ' kB')}${' '.repeat(3)} ${border('╷')} ${' '.repeat(3 - gzp.length % 2)}${kb(gzp + ' kB')}${' '.repeat(3)} ${v}`,
`${v} ${dim(cyan('minified'))} ${border('╵')} ${dim(cyan('gzipped'))} ${v}`,
].join('\n')),
border(`╰────────────────────────────────╯`),
].join('\n')
}
export const passIcon = green('✔')
export const failIcon = red('✖')
export const passText = (text = 'PASS') => invert(green(bold(` ${text} `)))
export const failText = (text = 'FAIL') => invert(red(bold(` ${text} `)))
export const infoText = (text = 'INFO') => dim(text)
================================================
FILE: .task/internal/dirs.js
================================================
import process from 'node:process'
import URL from './url.js'
/** Root directory. */
export const rootUrl = new URL('../../', import.meta.url)
/** Packages directory. */
export const packagesUrl = new URL('packages/', rootUrl)
/** Core package directory. */
export const corePackageUrl = new URL('core/', packagesUrl)
/** Core tests directory. */
export const coreTestsUrl = new URL('tests/', corePackageUrl)
/** React package directory. */
export const reactPackageUrl = new URL('react/', packagesUrl)
/** React tests directory. */
export const reactTestsUrl = new URL('tests/', reactPackageUrl)
/** Stringify package directory */
export const stringifyPackageUrl = new URL('stringify/', packagesUrl)
/** React tests directory. */
export const stringifyTestsUrl = new URL('tests/', stringifyPackageUrl)
/** Current file href. */
export const argv1Url = new URL(process.argv[1], 'file:').href
================================================
FILE: .task/internal/expect.js
================================================
import { deepEqual as toEqual, equal as toBe, notDeepEqual as toNotEqual, notEqual as toNotBe } from 'node:assert/strict'
export default function expect(actual) {
return {
/** Tests for strict equality between the actual and expected parameters. */
toBe: toBe.bind(this, actual),
/** Tests that the actual object is an instance of the expected class. */
toBeInstanceOf: toBeInstanceOf.bind(this, actual),
/** Tests for deep equality between the actual and expected parameters. */
toEqual: toEqual.bind(this, actual),
/** Tests that the actual function does throw when it is called. */
toThrow: toThrow.bind(this, actual),
/** Tests for strict inequality between the actual and expected parameters. */
toNotBe: toNotBe.bind(this, actual),
/** Tests that the actual object is not an instance of the expected class. */
toNotBeInstanceOf: toNotBeInstanceOf.bind(this, actual),
/** Tests for deep inequality between the actual and expected parameters. */
toNotEqual: toNotEqual.bind(this, actual),
/** Tests that the actual function does not throw when it is called. */
toNotThrow: toNotThrow.bind(this, actual),
}
}
/** Tests that the actual object is an instance of the expected class. */
function toBeInstanceOf(actual, expected) {
if (!(actual instanceof expected)) {
throw new AssertionError({
message: 'Expected value to be instance:',
operator: 'instanceOf',
actual,
expected,
stackStartFn: toBeInstanceOf,
})
}
}
/** Tests that the actual object is not an instance of the expected class. */
function toNotBeInstanceOf(actual, expected) {
if (actual instanceof expected) {
throw new AssertionError({
message: 'Expected value to be instance:',
operator: 'instanceOf',
actual,
expected,
stackStartFn: toNotBeInstanceOf,
})
}
}
/** Tests that the actual function does throw when it is called. */
async function toThrow(actualFunction, expected) {
let actual = undefined
try {
actual = await actualFunction()
} catch (error) {
// do nothing and continue
return
}
throw new AssertionError({
message: 'Expected exception:',
operator: 'throws',
stackStartFn: toThrow,
actual,
expected,
})
}
/** Tests that the actual function does not throw when it is called. */
async function toNotThrow(actualFunction, expected) {
let actual = undefined
try {
actual = await actualFunction()
// do nothing and continue
return
} catch (error) {
throw new AssertionError({
message: 'Unexpected exception:',
operator: 'doesNotThrow',
stackStartFn: toThrow,
actual,
expected,
})
}
}
================================================
FILE: .task/internal/fs-test.js
================================================
import * as fs from './fs.js'
let source = new URL('./test-source/', import.meta.url)
let target = new URL('./test-target/', import.meta.url)
fs.copydir(source, target)
================================================
FILE: .task/internal/fs.js
================================================
import fs from 'fs/promises'
import { copyFile, mkdir, readdir } from 'fs/promises'
import URL from './url.js'
export * from 'fs/promises'
export { existsSync as exists } from 'fs'
/** Asynchronously copies dir to dest. By default, dest is overwritten if it already exists. */
export const copydir = async function copydir(src, dst) {
let copydir = async (src, dst) => {
await mkdir(dst, { recursive: true })
for (const dirent of await readdir(src, { withFileTypes: true })) {
await (dirent.isDirectory() ? copydir : copyFile)(
src.dir.to(dirent.name),
dst.dir.to(dirent.name)
)
}
}
copydir(URL.from(src), URL.from(dst))
}
/** Asynchronously reads a file as parsed JSON. */
export const readFileJson = {
async readFileJson(/** @type {import('fs').PathLike | fs.FileHandle} */ path) {
const json = await fs.readFile(path, 'utf8')
/** @type {JSONValue} */
const data = JSON.parse(json)
return data
}
}.readFileJson
fs.copydir = copydir
fs.readFileJson = readFileJson
/** @typedef { string | number | boolean | null | JSONArray | JSONObject } JSONValue */
/** @typedef { JSONValue[] } JSONArray */
/** @typedef {{ [k: string]: JSONValue }} JSONObject */
export default fs
================================================
FILE: .task/internal/js.js
================================================
import { generate } from 'astring'
import { importAssertions } from 'acorn-import-assertions'
import { Node, Parser } from 'acorn'
import acornClassFields from 'acorn-class-fields'
import acornJsx from 'acorn-jsx'
import acornLogicalAssignment from 'acorn-logical-assignment'
import acornPrivateMethods from 'acorn-private-methods'
let acornPlugins = [
acornJsx({ allowNamespaces: true, allowNamespacedObjects: true }),
acornClassFields,
acornLogicalAssignment,
acornPrivateMethods,
importAssertions
]
let prototype = Node.prototype
let parser = Parser.extend(...acornPlugins)
export let parse = (code) => {
let parsed = parser.parse(code, { sourceType: 'module', ecmaVersion: 'latest' })
return parsed
}
export let stringify = (ast) => generate(ast)
let defaultProps = {
ArrowFunctionExpression: {
expression: false,
generator: false,
async: false,
params: [],
body: null,
},
AssignmentExpression: {
operator: '=',
left: null,
right: null,
},
BlockStatement: {
body: [],
},
CallExpression: {
callee: null,
arguments: [],
optional: false,
},
CatchClause: {
param: null,
body: { type: 'BlockStatement', body: [] }
},
ExportNamedDeclaration: {
declaration: null,
specifiers: []
},
ExportSpecifier: {
local: null,
exported: null,
},
ExpressionStatement: {
expression: {
operator: '=',
left: null,
right: null,
},
},
Identifier: { name: '_' },
ImportDefaultSpecifier: {
local: null
},
ImportDeclaration: {
specifiers: [],
source: null,
},
Literal: {
value: '_',
raw: '\'_\'',
optional: false,
},
MemberExpression: {
object: null,
property: null,
computed: false,
optional: false,
},
ObjectExpression: {
properties: [],
},
ObjectPattern: {
properties: [],
},
Program: {
body: [],
},
Property: {
method: false,
shorthand: false,
computed: false,
key: null,
value: null,
kind: 'init',
},
RestElement: {
argument: null,
},
ReturnStatement: {
argument: null,
},
TryStatement: {
block: null,
handler: null,
finalizer: null,
},
VariableDeclaration: {
declarations: [],
kind: 'var',
},
VariableDeclarator: {
id: null,
init: {
type: 'CallExpression',
callee: null,
arguments: [],
}
},
}
let createNode = (...props) => Object.assign(Object.create(prototype), ...props)
export let create = (type, props) => createNode({ type }, defaultProps[type], props)
export let ArrowFunctionExpression = (props) => create('ArrowFunctionExpression', props)
export let AssignmentExpression = (props) => create('AssignmentExpression', props)
export let BlockStatement = (props) => create('BlockStatement', props)
export let CallExpression = (props) => create('CallExpression', props)
export let CatchClause = (props) => create('CatchClause', props)
export let ExportNamedDeclaration = (props) => create('ExportNamedDeclaration', props)
export let ExportSpecifier = (props) => create('ExportSpecifierExportSpecifier', props)
export let ExpressionStatement = (props) => create('ExpressionStatement', props)
export let Identifier = (props) => create('Identifier', props)
export let ImportDeclaration = (props) => create('ImportDeclaration', props)
export let ImportDefaultSpecifier = (props) => create('ImportDefaultSpecifier', props)
export let Literal = (props) => create('Literal', props)
export let MemberExpression = (props) => create('MemberExpression', props)
export let ObjectExpression = (props) => create('ObjectExpression', props)
export let Program = (props) => create('Program', props)
export let Property = (props) => create('Property', props)
export let ReturnStatement = (props) => create('ReturnStatement', props)
export let TryStatement = (props) => create('TryStatement', props)
export let VariableDeclaration = (props) => create('VariableDeclaration', props)
export let VariableDeclarator = (props) => create('VariableDeclarator', props)
export let parents = new WeakMap()
let createPrototypeOf = (value) => value == null ? value : Array.isArray(value) ? [] : Object.create(Object.getPrototypeOf(value))
Object.defineProperties(prototype, {
clone: {
value: {
clone(overrides) {
let process = (object) => {
let clone = createPrototypeOf(object)
for (let name of Object.keys(object)) {
if (object[name] instanceof Object) {
clone[name] = process(object[name])
parents.set(clone[name], [name, clone])
} else {
clone[name] = object[name]
}
}
return clone
}
return Object.assign(process(this), overrides)
}
}.clone,
configurable: true,
writable: true,
},
find: {
value: {
find(type, call) {
let find = (object) => {
if (object.type === type) call(object)
for (let name of Object.keys(object)) {
if (object[name] instanceof Object) {
parents.set(object[name], [name, object])
find(object[name])
}
}
}
find(this)
}
}.find,
configurable: true,
writable: true,
},
parent: {
get: {
parent() {
return (parents.get(this) || [])[1] || null
},
}.parent,
configurable: true,
},
parentNode: {
get: {
parentNode() {
let object = this
while (true) {
object = parentOf(object)
if (object == null) return null
if (object instanceof Array) continue
return object
}
},
}.parentNode,
configurable: true,
},
keyOfParent: {
get: {
keyOfParent() {
return (parents.get(this) || [])[0] || null
}
}.keyOfParent,
configurable: true,
},
keyOfParentNode: {
get: {
keyOfParentNode() {
let object = this, key
while (true) {
key = keyOfParent(object)
object = parentOf(object)
if (object == null) return null
if (Array.isArray(object)) continue
return key
}
},
}.keyOfParentNode,
configurable: true,
},
remove: {
value: {
remove() {
return this.replaceWith()
}
}.remove,
configurable: true,
writable: true,
},
replaceWith: {
value: {
replaceWith(...nodes) {
let [name, node] = parents.get(this) || []
if (!node) return
if (Array.isArray(node)) {
node.splice(name, 1, ...nodes)
} else {
node[name] = Array.isArray(node[name]) || nodes.length > 1 ? nodes : nodes[0] || null
}
}
}.replaceWith,
configurable: true,
writable: true,
},
toString: {
value: {
toString() {
return stringify(this)
},
}.toString,
configurable: true,
writable: true,
},
})
export let keyOfParent = (object) => (parents.get(object) || [])[0] || null
export let parentOf = (object) => (parents.get(object) || [])[1] || null
export let find = (node, type, next) => {
if (node.type === type) {
if (next) next(node)
else return node
}
for (let name in node) {
if (name === 'type') continue
let data = node[name]
if (Array.isArray(data)) {
parents.set(data, this)
for (let each of data) {
if (each instanceof Node) {
parents.set(each, data)
let deep = find(each, type, next)
if (deep && !next) return deep
}
}
} else if (data instanceof Node) {
parents.set(data, this)
let deep = find(data, type, next)
if (deep && !next) return deep
}
}
return null
}
================================================
FILE: .task/internal/js.transformDestructuring.js
================================================
import * as js from './js.js'
export let transformDestructuring = (ast) => {
// replace destructuring
ast.find('ObjectPattern', (objectPattern) => {
if (objectPattern.keyOfParentNode === 'params') {
let { parentNode } = objectPattern
if (
parentNode.body.type !== 'BlockStatement'
) {
parentNode.body.replaceWith(
js.BlockStatement({
body: [
js.ReturnStatement({
argument: parentNode.body
})
]
})
)
}
let argName = `_arg${objectPattern.keyOfParent}`
objectPattern.replaceWith(
js.Identifier({ name: argName })
)
parentNode.body.body.unshift(
js.VariableDeclaration({
kind: 'let',
declarations: [
js.VariableDeclarator({
id: objectPattern,
init: js.Identifier({ name: argName }),
})
]
})
)
}
})
return ast
}
================================================
FILE: .task/internal/js.transformIIFE.js
================================================
import * as js from './js.js'
export let transformIIFE = (ast) => {
ast.body = [
js.ExpressionStatement({
expression: js.AssignmentExpression({
left: js.Identifier({ name: 'stitches' }),
right: js.CallExpression({
callee: js.ArrowFunctionExpression({
body: js.BlockStatement({
body: ast.body
})
})
})
})
})
]
// remove imports
ast.find('ImportDeclaration', (importDeclaration) => {
importDeclaration.remove()
})
// change exports to returns
ast.find('ExportNamedDeclaration', (exportNamedDeclaration) => {
exportNamedDeclaration.replaceWith(
js.ReturnStatement({
argument: js.ObjectExpression({
properties: exportNamedDeclaration.specifiers.map(
(exportSpecifier) => js.Property({
key: exportSpecifier.exported,
value: exportSpecifier.local,
})
)
})
})
)
})
return ast
}
================================================
FILE: .task/internal/js.transformModulesToCJS.js
================================================
import * as js from './js.js'
export let transformModulesToCJS = (ast) => {
// replace exports
ast.find('ExportNamedDeclaration', (exportNamedDeclaration) => {
let expressionStatement = js.ExpressionStatement({
expression: js.AssignmentExpression({
left: js.MemberExpression({
object: js.Identifier({ name: 'module' }),
property: js.Identifier({ name: 'exports' })
}),
right: js.ObjectExpression({
properties: [],
}),
})
})
exportNamedDeclaration.find('ExportSpecifier', (exportSpecifier) => {
expressionStatement.expression.right.properties.push(
js.create('Property', {
key: js.create('Identifier', { name: exportSpecifier.exported.name }),
value: js.create('Identifier', { name: exportSpecifier.local.name }),
})
)
})
exportNamedDeclaration.replaceWith(expressionStatement)
})
// replace imports
ast.find('ImportDeclaration', (importDeclaration) => {
let variableDeclaration = js.VariableDeclaration({
declarations: [
js.VariableDeclarator({
id: js.Identifier({ name: importDeclaration.specifiers[0].local.name }),
init: js.CallExpression({
callee: js.Identifier({ name: 'require' }),
arguments: [
importDeclaration.source,
],
}),
})
]
})
importDeclaration.replaceWith(variableDeclaration)
})
return ast
}
================================================
FILE: .task/internal/js.transformOptionalCatchToParam.js
================================================
import * as js from './js.js'
export let transformOptionalCatchToParam = (ast) => {
// replace optional catch
ast.find('CatchClause', (catchClause) => {
if (catchClause.param === null) {
catchClause.param = js.Identifier({ name: 'e' })
}
})
return ast
}
================================================
FILE: .task/internal/process.js
================================================
import URL from './url.js'
const {
argv: [, file, ...argv],
} = process
/** Returns whether the import.meta matches the current process. */
export const isProcessMeta = (meta) => new URL(meta.url).href === URL.from(file).href
/** Returns the values for a given process argument. */
export const getProcessArgOf = (name) => {
const lead = argv.indexOf('--' + name) + 1
const tail = lead ? argv.slice(lead).findIndex((arg) => arg.startsWith('--')) : 0
const vals = lead ? argv.slice(lead, ~tail ? lead + tail : argv.length) : []
return lead ? (vals.length ? vals : [true]) : vals
}
================================================
FILE: .task/internal/readline.js
================================================
import * as readline from 'readline'
export * from 'readline'
/** Displays the query, awaits user input, and returns the provided input. */
export const question = (
/** @type {string} */ query,
/** @type {import('events').Abortable} */
opts = undefined
) => new Promise(resolver => {
query = String(query).replace(/[^\s]$/, '$& ')
opts = Object(opts)
const int = readline.createInterface({
input: process.stdin,
output: process.stdout,
})
int.question(query, opts, answer => {
int.close()
resolver(answer)
})
})
================================================
FILE: .task/internal/url.js
================================================
import { fileURLToPath, pathToFileURL } from 'url';
export default class URL extends globalThis.URL {
to(/** @type {string[]} */ ...segments) {
return segments.reduce((/** @type URL */ url, segment) => new URL(segment, url), this)
}
includes(/** @type {string} */ searchString, position = 0) {
return this.href.includes(searchString, position)
}
endsWith(/** @type {string} */ searchString, length = this.href.length) {
return this.href.endsWith(searchString, length)
}
get dir() {
return new URL(this.href + '/')
}
get ospathname() {
return fileURLToPath(this)
}
static from(/** @type {string | globalThis.URL} */ segment, /** @type {string[]} */ ...segments) {
return (
/^file:/.test(segment)
? new URL(segment)
: new URL(pathToFileURL(segment))
).to(...segments)
}
}
================================================
FILE: .task/lint-esm.js
================================================
import fs from './internal/fs.js'
import { bold, underline } from './internal/color.js'
import { corePackageUrl, reactPackageUrl, stringifyPackageUrl } from './internal/dirs.js'
import { isProcessMeta, getProcessArgOf } from './internal/process.js'
import { ESLint } from 'eslint'
export const lint = async (packageUrl, opts) => {
opts = Object.assign({ only: [] }, opts)
const packageJsonUrl = new URL(`package.json`, packageUrl)
const packageName = JSON.parse(await fs.readFile(packageJsonUrl, 'utf8')).name
const packageTsUrl = new URL(`types/index.d.ts`, packageUrl)
if (!opts.only.length || opts.only.includes(packageName)) {
console.log(underline(bold(packageName)))
console.log(packageTsUrl.pathname)
const eslint = new ESLint()
const results = await eslint.lintFiles([packageTsUrl.pathname])
const formatter = await eslint.loadFormatter('stylish')
const resultText = formatter.format(results)
if (resultText) console.log(resultText)
else console.log('\x1b[32m✔\x1b[0m', 'Your code is flawless.', 'Hopefully this determination is flawless, too.')
}
}
export const lintAll = async (opts) => {
await lint(stringifyPackageUrl, opts)
await lint(corePackageUrl, opts)
await lint(reactPackageUrl, opts)
}
if (isProcessMeta(import.meta)) {
lintAll({
only: getProcessArgOf('only'),
}).catch((error) => {
console.error(error)
process.exitCode = 1
})
}
================================================
FILE: .task/lint-pkg.js
================================================
import fs from './internal/fs.js'
import { bold, underline } from './internal/color.js'
import { isProcessMeta, getProcessArgOf } from './internal/process.js'
import { corePackageUrl, reactPackageUrl, stringifyPackageUrl } from './internal/dirs.js'
import * as cp from './internal/child_process.js'
export const lint = async (packageUrl, opts) => {
opts = Object.assign({ only: [] }, opts)
const packageJsonUrl = new URL(`package.json`, packageUrl)
const packageName = JSON.parse(await fs.readFile(packageJsonUrl, 'utf8')).name
if (!opts.only.length || opts.only.includes(packageName)) {
console.log(underline(bold(packageName)))
await cp.spawn('./node_modules/.bin/package-check', ['--cwd', packageUrl.pathname])
}
}
export const lintAll = async (opts) => {
await lint(stringifyPackageUrl, opts)
await lint(corePackageUrl, opts)
await lint(reactPackageUrl, opts)
}
if (isProcessMeta(import.meta)) {
lintAll({
only: getProcessArgOf('only'),
}).catch((error) => {
console.error(error)
process.exitCode = 1
})
}
================================================
FILE: .task/lint-tsc.js
================================================
import fs from './internal/fs.js'
import { bold, underline } from './internal/color.js'
import { corePackageUrl, reactPackageUrl, stringifyPackageUrl } from './internal/dirs.js'
import { isProcessMeta, getProcessArgOf } from './internal/process.js'
import * as cp from './internal/child_process.js'
export const lint = async (packageUrl, opts) => {
opts = Object.assign({ only: [] }, opts)
const packageJsonUrl = new URL(`package.json`, packageUrl)
const packageName = JSON.parse(await fs.readFile(packageJsonUrl, 'utf8')).name
const packageTsUrl = new URL(`types/index.d.ts`, packageUrl)
if (!opts.only.length || opts.only.includes(packageName)) {
console.log(underline(bold(packageName)))
console.log(packageTsUrl.pathname)
await cp.spawn('./node_modules/.bin/tsc', ['--noEmit', '--skipLibCheck', packageTsUrl.pathname])
}
}
export const lintAll = async (opts) => {
await lint(stringifyPackageUrl, opts)
await lint(corePackageUrl, opts)
await lint(reactPackageUrl, opts)
}
if (isProcessMeta(import.meta)) {
lintAll({
only: getProcessArgOf('only'),
}).catch((error) => {
console.error(error)
process.exitCode = 1
})
}
================================================
FILE: .task/lint.js
================================================
import { isProcessMeta, getProcessArgOf } from './internal/process.js'
import { lintAll as lintAllEsm } from './lint-esm.js'
import { lintAll as lintAllPkg } from './lint-pkg.js'
import { lintAll as lintAllTsc } from './lint-tsc.js'
export const lintAll = async (opts) => {
await lintAllEsm(opts)
await lintAllTsc(opts)
await lintAllPkg(opts)
}
if (isProcessMeta(import.meta)) {
lintAll({
only: getProcessArgOf('only'),
}).catch((error) => {
console.error(error)
process.exitCode = 1
})
}
================================================
FILE: .task/release.js
================================================
import URL from './internal/url.js'
import * as co from './internal/color.js'
import * as cp from './internal/child_process.js'
import * as fs from './internal/fs.js'
import * as rl from './internal/readline.js'
const main = async () => {
const root = URL.from(import.meta.url).to('../')
const pkg = await fs.readFileJson(root.to('package.json'), 'utf8')
const state = {}
const q1option = new Set(['major', 'minor', 'patch', 'prerelease'])
state.release = await rl.question(`Release Type ${co.dim('(major, minor, patch, prerelease)')}:`)
state.npmtag = state.release === 'prerelease' ? 'canary' : 'latest'
if (!q1option.has(state.release)) return
await cp.spawn('npm', ['version', state.release, '--workspaces'], { stdio: 'pipe' })
const workspacepkgpaths = new Set
const workspacetags = new Set
for (let workspace of pkg.workspaces) {
workspace = root.to(workspace).dir
const workspacepkgpath = workspace.to('package.json')
const workspacepkg = await fs.readFileJson(workspacepkgpath)
state.version = `v${workspacepkg.version}`
workspacepkgpaths.add(workspacepkgpath)
workspacetags.add(`${workspacepkg.name}@${workspacepkg.version}`)
}
console.log(`Bumped ${co.bold(state.version)}`)
const confirm = await rl.question(`Publish ${co.bold(state.version)} as ${co.bold(state.npmtag)} ${co.dim('(y/n)')}:`)
if (confirm !== 'y') {
for (const workspacepkgpath of workspacepkgpaths) {
await cp.spawn('git', ['checkout', '--', workspacepkgpath.ospathname])
}
return
}
await cp.spawn('npm', ['run', 'build'], { stdio: 'ignore' })
state.otp = await rl.question(`OTP:`)
if (!state.otp) return
for (const workspacepkgpath of workspacepkgpaths) {
await cp.spawn('git', ['add', workspacepkgpath.ospathname])
}
await cp.spawn('git', ['commit', '-m', state.version])
await cp.spawn('git', ['tag', state.version])
await cp.spawn('git', ['push'])
await cp.spawn('git', ['push', '--tags'])
await cp.spawn('npm', ['publish', '--tag', state.npmtag, '--workspaces', '--otp', state.otp])
}
main()
================================================
FILE: .task/test-coverage.js
================================================
import * as cp from './internal/child_process.js'
import * as fp from 'path'
import * as fs from './internal/fs.js'
import * as os from 'os'
import { bold, dim, green, red } from './internal/color.js'
// Creates a unique temporary directory
!(async () => {
/** Directory storing code coverage. */
const NODE_V8_COVERAGE = await fs.mkdtemp(os.tmpdir())
/** Exit code from the covered NodeJS process. */
await new Promise((close, error) => {
cp.spawn('node', process.argv.slice(2), {
stdio: 'inherit',
env: { ...process.env, NODE_V8_COVERAGE },
})._events = { close, error }
})
/** Combined coverage results */
const results = []
for (const filename of await fs.readdir(NODE_V8_COVERAGE)) {
results.push(...JSON.parse(await fs.readFile(fp.join(NODE_V8_COVERAGE, filename), 'utf8')).result)
}
await fs.rmdir(NODE_V8_COVERAGE, { recursive: true })
/** Combined LCOV results. */
let lcovList = []
/** Combined LCOV results. */
let lcovInfo = ''
/** Filter for filtered results */
const filter = (url) => !url.protocol.startsWith('node') && !url.pathname.includes('/node_modules/') && url.pathname.includes('/src/')
for (let result of results) {
/** URL classed result URL */
const url = new URL(result.url)
if (filter(url)) {
/** Contents of the file whose coverage was collected. */
const data = await fs.readFile(url, 'utf8')
/** List of code lines, where the line of code is a `data` property on the object. */
const rows = data.split(/^/gm).map((line) => ({ data: line }))
const lcov = {
/** Test name */
TN: [''],
/** Source file */
SF: [url.pathname],
/** Line numbers for each function name. */
FN: [],
/** Execution count for the given function.*/
FNDA: [],
/** Number of functions found. */
FNF: [0],
/** Number of functions hit. */
FNH: [0],
/** Execution count for the given line. */
DA: [],
/** Number of collected lines with a positive execution count. */
LH: [0],
/** Number of collected lines. */
LF: [0],
}
lcovList.push(lcov)
/** Convert */
const convert = (range, isFirstRun) => {
let lineOffset = 0
for (const lineIndex in rows) {
const nextLineOffset = lineOffset + rows[lineIndex].data.length
if (range.startLine == null && range.startOffset >= lineOffset && range.startOffset < nextLineOffset) {
range.startLine = Number(lineIndex) + 1
range.startCol = range.startOffset - lineOffset + 1
}
if (range.endOffset >= lineOffset && range.endOffset < nextLineOffset) {
range.endLine = Number(lineIndex) + 1
range.endCol = range.endOffset - lineOffset + 1
if (!isFirstRun) {
for (let j = range.startLine; j <= range.endLine; ++j) {
if (rows[j]) {
if (!range.count) {
rows[j].exec = 0
} else if (rows[j].exec == null) {
rows[j].exec = range.count
} else if (rows[j].exec > 0) {
rows[j].exec += range.count
}
}
}
}
break
}
lineOffset = nextLineOffset
}
return range
}
for (const coverage of result.functions) {
let startRange = convert(coverage.ranges[0], true)
let count = 0
++lcov.FNF[0]
lcov.FN.push([startRange.startLine, coverage.functionName])
for (const range of coverage.ranges) {
count += convert(range).count
}
lcov.FNDA.push([count, coverage.functionName])
if (count) ++lcov.FNH[0]
}
for (const line in rows) {
++lcov.LF[0]
if ('exec' in rows[line]) {
lcov.DA.push([line, rows[line].exec])
if (rows[line].exec) ++lcov.LH[0]
}
}
lcovInfo += `${Object.entries(lcov).reduce((report, [name, data]) => report.concat(data.reduce((string, each) => string.concat(`${name.toUpperCase()}:${each}\n`), '')), '')}end_of_record\n`
}
}
fs.writeFile('coverage/lcov.info', lcovInfo)
/** Returns a unicode meter based on LCOV coverage. */
const meter = (lcov) => {
const per = (lcov.FNH[0] / lcov.FNF[0]) * 100
const sol = Math.trunc(per / 10)
const haf = per % 10 >= 5 ? 1 : 0
const emt = 10 - sol - haf
return [`▰`.repeat(sol), `▱`.repeat(haf), dim(`▱`.repeat(emt))].join('')
}
/** Returns the ratio of 2 fields in LCOV data. */
const ratio = (lcov, l, r) => `${lcov[l]}${dim('/')}${lcov[r]}`.padStart(17)
/** Based on the given LCOV data, returns the given data in a shade of green or red. */
const shade = (lcov, data) => (lcov.FNH / lcov.FNF > 0.6 ? green : red)(data)
const trtd = (lcov) =>
dim('│ ') +
shade(
lcov,
lcov.SF[0]
.slice(-31)
.replace(/^[^/]*\//, '')
.padEnd(31, ' '),
) +
' ' +
shade(lcov, meter(lcov)) +
dim(' │ ') +
shade(lcov, ratio(lcov, 'FNH', 'FNF')) +
dim(' │ ') +
shade(lcov, ratio(lcov, 'LH', 'LF')) +
dim(' │')
lcovList.sort((a, b) => a.SF[0] - b.SF[0])
console.log(
[
[dim('╭'), dim('─'.repeat(44)), dim('┬'), dim('─'.repeat(11)), dim('┬'), dim('─'.repeat(11)), dim('╮')].join(''),
[dim('│'), bold('Coverage') + ' '.repeat(34), dim('│'), bold('Functions'), dim('│'), ' '.repeat(4) + bold('Lines'), dim('│')].join(' '),
[dim('├'), dim('─'.repeat(44)), dim('┼'), dim('─'.repeat(11)), dim('┼'), dim('─'.repeat(11)), dim('┤')].join(''),
trtd(
lcovList.reduce(
(all, lcov) => {
all.FNF[0] += lcov.FNF[0]
all.FNH[0] += lcov.FNH[0]
all.LF[0] += lcov.LF[0]
all.LH[0] += lcov.LH[0]
return all
},
{ TN: [''], SF: ['All files'], FN: [], FNDA: [], FNF: [0], FNH: [0], DA: [], LH: [0], LF: [0] },
),
),
[dim('╞'), ' '.repeat(42), dim('╪'), ' '.repeat(9), dim('╪'), ' '.repeat(9), dim('╡')].join(' '),
...lcovList.map((lcov) => trtd(lcov)),
[dim('╰'), dim('─'.repeat(44)), dim('┴'), dim('─'.repeat(11)), dim('┴'), dim('─'.repeat(11)), dim('╯')].join(''),
].join('\n'),
)
})()
================================================
FILE: .task/test.js
================================================
import { passIcon, failIcon, passText, failText, infoText, dim, green } from './internal/color.js'
import { isProcessMeta, getProcessArgOf } from './internal/process.js'
import * as fs from './internal/fs.js'
import nodemon from 'nodemon'
import URL from './internal/url.js'
const root = URL.from(import.meta.url).to('../')
const main = async (pkg, opts) => {
let didFailLast
// for each file in the testing directory
for (let file of await fs.readdir(pkg.to('tests/'))) {
file = pkg.to('tests/').to(file)
// filter non-js files
if (!file.endsWith('.js')) continue
// filter non-matching files
if (opts.only.length && !opts.only.some(name => file.includes(name))) continue
/** Test results. */
const results = Object.create(null)
// bootstrap the expect api
globalThis.expect = (await import('./internal/expect.js')).default
// bootstrap the describe api
global.describe = async (description, call) => {
// prepare description results
results[description] = Object.create(null)
// bootstrap the test api
global.test = async (test, call) => {
// prepare test results
results[description][test] = []
try {
// run the test
await call()
// assign success to the results
results[description][test].push(`${passIcon} ${infoText(test)}`)
} catch (error) {
error.stack = error.stack || error.message || String(error || '')
error.stack = [ ...error.stack.split(/\n/g).slice(1)].join('\n')
// assign failure to the results
const errorMessage = error.message.split('\n')[0]
results[description][test].push(`${failIcon} ${infoText(test)}\n\t${errorMessage}`, getErrorStack(error), '')
results[description][test][didFail] = error
results[description][didFail] = true
results[didFail] = true
}
}
try {
// run the description
await call()
} catch (error) {
// assign description failure to the results
results[description][''] = [`${failIcon} ${infoText('Error')}`, String(error.message)]
}
}
try {
// run the test file
await import(file)
} catch (error) {
// report errors running the test file
results[didFail] = error
}
const failure = results[didFail]
// space out failures
if (didFailLast && !!didFailLast != !!failure) console.log()
// report details if there is a failure
console.group(failure ? failText('FAIL') : passText('PASS'), infoText(file.href.slice(root.href.length)))
if (failure) {
process.exitCode = 1
for (let description in results) {
// report each description
console.group(failure ? failIcon : passIcon, infoText(description))
for (let test in results[description]) {
// report each test
console.log(results[description][test].join('\n'))
}
console.groupEnd()
}
// report any file error
if (typeof failure === 'object') {
console.log(getErrorStack(failure))
}
}
console.groupEnd()
didFailLast = results[didFail]
}
}
const didFail = Symbol.for('test.failure')
const getErrorStack = (error) => error.stack.split(/\n/g).filter(
(line) => !line.includes(import.meta.url) && !line.includes('node:')
).map(
(line) => line.replace(
/(.*?)\(?(file:[^:]+)(.*?)\)?$/,
($0, before, file, after) => (
before.replace(/(at) ([^\s]+)?(.*)/, `${dim('$1')} ${green('$2')}$3`) +
file.slice(root.href.length) +
dim(after)
)
)
).join('\n')
export const testAll = async (opts) => {
await main(URL.from(import.meta.url, '../packages/stringify/'), opts)
await main(URL.from(import.meta.url, '../packages/core/'), opts)
await main(URL.from(import.meta.url, '../packages/react/'), opts)
}
if (isProcessMeta(import.meta)) {
if (getProcessArgOf('watch').includes(true)) {
let onlyArgs = getProcessArgOf('only')
onlyArgs = onlyArgs.length ? ['--only', ...onlyArgs] : onlyArgs
nodemon(
[
'-q',
`--watch packages/core/src`,
`--watch packages/core/tests`,
`--watch packages/core/types`,
`--watch packages/react/src`,
`--watch packages/react/tests`,
`--watch packages/react/types`,
`--watch packages/stringify/src`,
`--watch packages/stringify/tests`,
`--watch packages/stringify/types`,
// exec
`--exec "${['node', './.task/test.js', ...onlyArgs].join(' ')}"`,
].join(' '),
).on('start', () => {
process.stdout.write('\u001b[3J\u001b[2J\u001b[1J')
console.clear()
}).on('quit', () => process.exit())
} else {
testAll({
only: getProcessArgOf('only'),
}).catch((error) => {
console.error(error)
process.exitCode = 1
})
}
}
================================================
FILE: .vscode/package.schema.json
================================================
{
"$schema": "http://json-schema.org/draft-07/schema#",
"allOf": [
{
"$ref": "http://json.schemastore.org/package"
},
{
"properties": {
"eslintConfig": {
"title": "ESLint configuration",
"$ref": "http://json.schemastore.org/eslintrc"
},
"prettier": {
"title": "Prettier configuration",
"$ref": "http://json.schemastore.org/prettierrc"
}
}
}
]
}
================================================
FILE: .vscode/settings.json
================================================
{
"debug.console.historySuggestions": false,
"editor.formatOnSave": false,
"editor.insertSpaces": false,
"editor.snippetSuggestions": "none",
"editor.suggest.snippetsPreventQuickSuggestions": false,
"editor.suggestSelection": "recentlyUsedByPrefix",
"editor.wordBasedSuggestions": false,
"emmet.showAbbreviationSuggestions": false,
"emmet.showExpandedAbbreviation": "never",
"files.exclude": {
"**/.DS_Store": true,
"**/.git": true,
"**/node_modules": true,
"**/package-lock.json": true,
"**/yarn.lock": true
},
"javascript.suggest.enabled": false,
"javascript.suggest.names": false,
"typescript.tsserver.maxTsServerMemory": 8192
}
================================================
FILE: CODE_OF_CONDUCT.md
================================================
# Contributor Covenant Code of Conduct
## Our Pledge
In the interest of fostering an open and welcoming environment, we as
contributors and maintainers pledge to making participation in our project and
our community a harassment-free experience for everyone, regardless of age, body
size, disability, ethnicity, sex characteristics, gender identity and expression,
level of experience, education, socio-economic status, nationality, personal
appearance, race, religion, or sexual identity and orientation.
## Our Standards
Examples of behavior that contributes to creating a positive environment
include:
- Using welcoming and inclusive language
- Being respectful of differing viewpoints and experiences
- Gracefully accepting constructive criticism
- Focusing on what is best for the community
- Showing empathy towards other community members
Examples of unacceptable behavior by participants include:
- The use of sexualized language or imagery and unwelcome sexual attention or
advances
- Trolling, insulting/derogatory comments, and personal or political attacks
- Public or private harassment
- Publishing others' private information, such as a physical or electronic
address, without explicit permission
- Other conduct which could reasonably be considered inappropriate in a
professional setting
## Our Responsibilities
Project maintainers are responsible for clarifying the standards of acceptable
behavior and are expected to take appropriate and fair corrective action in
response to any instances of unacceptable behavior.
Project maintainers have the right and responsibility to remove, edit, or
reject comments, commits, code, wiki edits, issues, and other contributions
that are not aligned to this Code of Conduct, or to ban temporarily or
permanently any contributor for other behaviors that they deem inappropriate,
threatening, offensive, or harmful.
## Scope
This Code of Conduct applies both within project spaces and in public spaces
when an individual is representing the project or its community. Examples of
representing a project or community include using an official project e-mail
address, posting via an official social media account, or acting as an appointed
representative at an online or offline event. Representation of a project may be
further defined and clarified by project maintainers.
## Enforcement
Instances of abusive, harassing, or otherwise unacceptable behavior may be
reported by contacting the project team at colm@workos.com. All
complaints will be reviewed and investigated and will result in a response that
is deemed necessary and appropriate to the circumstances. The project team is
obligated to maintain confidentiality with regard to the reporter of an incident.
Further details of specific enforcement policies may be posted separately.
Project maintainers who do not follow or enforce the Code of Conduct in good
faith may face temporary or permanent repercussions as determined by other
members of the project's leadership.
## Attribution
This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html
[homepage]: https://www.contributor-covenant.org
For answers to common questions about this code of conduct, see
https://www.contributor-covenant.org/faq
================================================
FILE: CONTRIBUTING.md
================================================
# Contributing to Stitches
Welcome and thanks for your interest! Before submitting a pull request, please take a moment to review these guidelines.
## Reporting Issues
Found a problem? Want a new feature?
- See if your issue or idea has [already been reported].
- Provide a [reduced test case] or a [live example].
Remember, a bug is a _demonstrable problem_ caused by _our_ code.
## Submitting Pull Requests
Pull requests are the greatest contributions, so be sure they are focused in
scope and avoid unrelated commits.
1. To begin: [fork this project], clone your fork, and add our upstream.
```bash
# Clone your fork of the repo into the current directory
git clone git@github.com:$(npx github-username-cli $(git config user.email))/stitches.git
# Navigate to the newly cloned directory
cd stitches
# Assign the original repo to a remote called "upstream"
git remote add upstream git@github.com:modulez/stitches.git
# Install the tools necessary for testing
yarn # or npm install
```
2. Create a branch for your feature or fix:
```bash
# Move into a new branch for your feature
git checkout -b feature/thing
```
```bash
# Move into a new branch for your fix
git checkout -b fix/something
```
3. If your code passes all the tests, then push your feature branch:
```bash
# Test current code
yarn test # or npm test
# Build current code
yarn build # or npm run build
```
> Note: ensure your version of Node is 14 or higher to run scripts
```bash
# Push the branch for your new feature
git push origin feature/thing
```
```bash
# Or, push the branch for your update
git push origin update/something
```
That’s it! Now [open a pull request] with a clear title and description.
[already been reported]: https://github.com/stitchesjs/stitches/issues
[fork this project]: https://github.com/stitchesjs/stitches/fork
[live example]: https://codesandbox.io/
[open a pull request]: https://help.github.com/articles/using-pull-requests/
[reduced test case]: https://css-tricks.com/reduced-test-cases/
================================================
FILE: LICENSE.md
================================================
MIT License
Copyright (c) 2022 WorkOS
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
================================================
FILE: README.md
================================================
Update June 19, 2023: Stitches is no longer actively maintained due to changes in the React ecosystem and maintainer availability. You can <a href="https://github.com/stitchesjs/stitches/discussions/1149#discussioncomment-6223090">read more here</a>.
---
<a href="https://stitches.dev">
<img alt="stitches" src="https://user-images.githubusercontent.com/372831/112011920-03e21400-8b29-11eb-9c9a-4e14d5a1f575.png" />
</a>
# Stitches
## Style your components with confidence
CSS-in-JS with near-zero runtime, SSR, multi-variant support, and a best-in-class developer experience.
#### Stitches Core
Framework-agnostic implementation.
```sh
npm install @stitches/core
```
[Read more](https://github.com/stitchesjs/stitches/tree/main/packages/core)
#### Stitches React
React wrapper including the `styled` API.
```sh
npm install @stitches/react
```
[Read more](https://github.com/stitchesjs/stitches/tree/main/packages/react)
---
## Documentation
For full documentation, visit [stitches.dev](https://stitches.dev).
## Contributing
Please follow our [contributing guidelines](./CONTRIBUTING.md).
## Community
You can join the [Stitches Discord](https://discord.com/invite/H4eG3Mk) to chat with other members of the community.
Here's a list of community-built projects:
- [babel-plugin-transform-stitches-display-name](https://github.com/afzalsayed96/babel-plugin-transform-stitches-display-name)
- [stitches-normalize-css](https://github.com/psongpin/stitches-normalize-css)
- [stitches-crochet](https://github.com/orenelbaum/stitches-crochet)
- [stitches-native](https://github.com/Temzasse/stitches-native)
## Authors
- Pedro Duarte ([@peduarte](https://twitter.com/peduarte))
- Jonathan Neal ([@jon_neal](https://twitter.com/jon_neal))
- Abdulhadi Alhallak ([@hadi_hlk](https://twitter.com/hadi_hlk)) - [WorkOS](https://workos.com)
## License
Licensed under the MIT License, Copyright © 2022-present WorkOS.
See [LICENSE](./LICENSE.md) for more information.
================================================
FILE: package.json
================================================
{
"$schema": "./.vscode/package.schema.json",
"name": "stitches",
"type": "module",
"license": "MIT",
"contributors": [
"Pedro Duarte",
"Abdulhadi Alhallak <abdul@workos.com>",
"Jonathan Neal"
],
"scripts": {
"build:test:types": "yarn workspace @stitches/test build",
"build": "node .task/build.js",
"build:watch": "node .task/build.js --watch",
"lint": "node .task/lint.js",
"lint:esm": "node .task/lint-esm.js",
"lint:pkg": "node .task/lint-pkg.js",
"lint:tsc": "node .task/lint-tsc.js",
"release": "node .task/release.js",
"test": "node .task/test.js",
"test:coverage": "node .task/test-coverage.js .task/test.js",
"test:watch": "node .task/test.js --watch"
},
"workspaces": [
"packages/core",
"packages/react",
"packages/test",
"packages/stringify"
],
"dependencies": {
"@radix-ui/react-polymorphic": "0.0.14",
"@radix-ui/react-separator": "0.1.0",
"@skypack/package-check": "0.2.2",
"@types/node": "16.9.6",
"@types/react": "17.0.33",
"@types/react-dom": "17.0.9",
"@types/react-test-renderer": "17.0.1",
"@typescript-eslint/eslint-plugin": "5.36.2",
"@typescript-eslint/parser": "5.36.2",
"acorn": "8.5.0",
"acorn-class-fields": "1.0.0",
"acorn-import-assertions": "1.7.6",
"acorn-jsx": "5.3.2",
"acorn-logical-assignment": "0.1.4",
"acorn-private-methods": "1.0.0",
"astring": "1.7.5",
"csstype": "3.0.9",
"esbuild": "0.13.2",
"eslint": "7.32.0",
"nodemon": "2.0.13",
"react": "17.0.2",
"react-test-renderer": "17.0.2",
"terser": "5.9.0",
"typescript": "4.8.2"
},
"browserslist": [
"last 1 chrome versions",
"last 1 firefox versions",
"last 1 safari versions",
"maintained node versions"
],
"eslintConfig": {
"env": {
"browser": true,
"es6": true,
"node": true
},
"extends": "eslint:recommended",
"globals": {
"describe": false,
"expect": false,
"test": false
},
"parserOptions": {
"ecmaVersion": 12,
"sourceType": "module",
"ecmaFeatures": {
"modules": true
}
},
"rules": {
"semi": [
"error",
"never"
]
},
"overrides": [
{
"files": "*.ts",
"env": {
"browser": true,
"es6": true,
"node": true
},
"extends": [
"plugin:@typescript-eslint/recommended"
],
"parser": "@typescript-eslint/parser",
"parserOptions": {
"ecmaVersion": 2020,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
},
"settings": {
"react": {
"version": "detect"
}
},
"rules": {
"@typescript-eslint/ban-types": [
"error",
{
"extendDefaults": true,
"types": {
"{}": false
}
}
],
"@typescript-eslint/no-explicit-any": "off",
"@typescript-eslint/no-for-in-array": "off",
"@typescript-eslint/no-unnecessary-qualifier": "off",
"@typescript-eslint/no-unnecessary-type-assertion": "off",
"@typescript-eslint/promise-function-async": "off",
"@typescript-eslint/restrict-plus-operands": "off"
}
}
]
},
"prettier": {
"arrowParens": "always",
"bracketSpacing": true,
"printWidth": 240,
"quoteProps": "consistent",
"semi": false,
"singleQuote": true,
"tabWidth": 2,
"trailingComma": "all",
"useTabs": true,
"overrides": [
{
"files": [
"*.json",
"*.md",
".prettierrc",
"*.yml"
],
"options": {
"useTabs": false
}
}
]
},
"private": true
}
================================================
FILE: packages/core/README.md
================================================
# @stitches/core
**@stitches/core** is a framework-agnostic implementation of [stitches](https://stitches.dev), a CSS-in-JS library with a best-in-class developer experience.
<p><br /></p>
```sh
# with npm
npm install @stitches/core
# with yarn
yarn add @stitches/core
```
<p><br /></p>
<a href="https://codepen.io/embed/prefill?editable=true&default-tab=js%2Cresult&data=%7B%22js%22%3A%22import+%7B+css+%7D+from+%27https%3A%2F%2Fcdn.skypack.dev%2F%40stitches%2Fcore%27%3B%5Cn%5Cn%2F%2F+add+your+code+here%21%5Cn%2F%2F+see+https%3A%2F%2Fstitches.dev+for+documentation%22%7D"><img src="https://img.shields.io/badge/-open_in_codepen-2b354f?logo=codepen&style=flat-square" alt="open in codepen" valign="middle" align="right"></a>
<br />
```html
<script type="module">
import { css } from 'https://cdn.skypack.dev/@stitches/core'
</script>
```
<p><br /></p>
<a href="https://codepen.io/embed/prefill?editable=true&default-tab=js%2Cresult&data=%7B%22js%22%3A%22const+%7B+css+%7D+%3D+stitches%5Cn%5Cn%2F%2F+add+your+code+here%21%5Cn%2F%2F+see+https%3A%2F%2Fstitches.dev+for+documentation%22%2C%22js_external%22%3A%22https%3A%2F%2Funpkg.com%2F%40stitches%2Fcore%2Fdist%2Findex.global.js%22%7D"><img src="https://img.shields.io/badge/-open_in_codepen-2b354f?logo=codepen&style=flat-square" alt="open in codepen" valign="middle" align="right"></a>
<br />
```js
<script src="https://unpkg.com/@stitches/core/dist/index.global.js"></script>
<script>
const { css } = stitches
</script>
```
<p><br /></p>
## Documentation
For full documentation, visit [stitches.dev](https://stitches.dev).
## Contributing
Please follow our [contributing guidelines](./CONTRIBUTING.md).
## Authors
- Pedro Duarte ([@peduarte](https://twitter.com/peduarte))
- Abdulhadi Alhallak ([@hadi_hlk](https://twitter.com/hadi_hlk)) - [WorkOS](https://workos.com)
- Jonathan Neal ([@jon_neal](https://twitter.com/jon_neal))
## License
Licensed under the MIT License, Copyright © 2022-present WorkOS.
See [LICENSE](./LICENSE.md) for more information.
================================================
FILE: packages/core/package.json
================================================
{
"name": "@stitches/core",
"version": "1.3.1-1",
"description": "The modern CSS-in-JS library",
"type": "module",
"main": "dist/index.cjs",
"module": "dist/index.mjs",
"types": "types/index.d.ts",
"typesVersions": {
">= 4.1": {
"*": [
"types/*"
]
}
},
"jsdelivr": "dist/index.global.js",
"unpkg": "dist/index.global.js",
"exports": {
".": {
"require": "./dist/index.cjs",
"import": "./dist/index.mjs",
"types": "./types/index.d.ts"
},
"./global": "./dist/index.global.js"
},
"files": [
"dist/*.cjs",
"dist/*.js",
"dist/*.map",
"dist/*.mjs",
"types/*.d.ts"
],
"sideEffects": false,
"license": "MIT",
"repository": "stitchesjs/stitches",
"homepage": "https://stitches.dev/",
"bugs": "https://github.com/stitchesjs/stitches/issues",
"contributors": [
"Pedro Duarte",
"Abdulhadi Alhallak <abdul@workos.com>",
"Jonathan Neal"
],
"publishConfig": {
"access": "public"
},
"keywords": [
"component",
"components",
"create",
"css",
"css-in-js",
"global",
"globals",
"javascript",
"js",
"nesting",
"object",
"object-oriented",
"oo",
"oocss",
"oriented",
"scope",
"scoped",
"style",
"styled",
"styles",
"stylesheet",
"stylesheets",
"theme",
"themes",
"theming",
"token",
"tokens",
"type",
"typed",
"types",
"transform",
"ts",
"variable",
"variables"
]
}
================================================
FILE: packages/core/src/ThemeToken.js
================================================
import { toTailDashed } from './convert/toTailDashed.js'
export class ThemeToken {
constructor(token, value, scale, prefix) {
this.token = token == null ? '' : String(token)
this.value = value == null ? '' : String(value)
this.scale = scale == null ? '' : String(scale)
this.prefix = prefix == null ? '' : String(prefix)
}
get computedValue() {
return 'var(' + this.variable + ')'
}
get variable() {
return '--' + toTailDashed(this.prefix) + toTailDashed(this.scale) + this.token
}
toString() {
return this.computedValue
}
}
================================================
FILE: packages/core/src/convert/toCamelCase.js
================================================
/** Returns the given value converted to camel-case. */
export const toCamelCase = (/** @type {string} */ value) => (!/[A-Z]/.test(value) ? value.replace(/-[^]/g, (capital) => capital[1].toUpperCase()) : value)
================================================
FILE: packages/core/src/convert/toCssRules.js
================================================
import { toCamelCase } from './toCamelCase.js'
import { toHyphenCase } from './toHyphenCase.js'
import { toPolyfilledValue } from './toPolyfilledValue.js'
import { toResolvedMediaQueryRanges } from './toResolvedMediaQueryRanges.js'
import { toResolvedSelectors } from './toResolvedSelectors.js'
import { toSizingValue } from './toSizingValue.js'
import { toTailDashed } from './toTailDashed.js'
import { toTokenizedValue } from './toTokenizedValue.js'
/** Comma matcher outside rounded brackets. */
const comma = /\s*,\s*(?![^()]*\))/
/** Default toString method of Objects. */
const toStringOfObject = Object.prototype.toString
export const toCssRules = (
style,
selectors,
conditions,
config,
onCssText
) => {
/** @type {[string[], string[], string[]]} CSSOM-compatible rule being created. */
let currentRule = undefined
/** Last utility that was used, cached to prevent recursion. */
let lastUtil
/** Last polyfill that was used, cached to prevent recursion. */
let lastPoly
/** Walks CSS styles and converts them into CSSOM-compatible rules. */
const walk = (
/** @type {Style} Set of CSS styles */ style,
/** @type {string[]} Selectors that define the elements to which a set of CSS styles apply. */ selectors,
/** @type {string[]} Conditions that define the queries to which a set of CSS styles apply. */ conditions,
) => {
/** @type {keyof style} Represents the left-side "name" for the property (the at-rule prelude, style-rule selector, or declaration name). */
let name
/** @type {style[keyof style]} Represents the right-side "data" for the property (the rule block, or declaration value). */
let data
const each = (style) => {
for (name in style) {
/** Whether the current name represents an at-rule. */
const isAtRuleLike = name.charCodeAt(0) === 64
const datas = isAtRuleLike && Array.isArray(style[name]) ? style[name] : [style[name]]
for (data of datas) {
const camelName = toCamelCase(name)
/** Whether the current data represents a nesting rule, which is a plain object whose key is not already a util. */
const isRuleLike = typeof data === 'object' && data && data.toString === toStringOfObject && (!config.utils[camelName] || !selectors.length)
// if the left-hand "name" matches a configured utility
// conditionally transform the current data using the configured utility
if (camelName in config.utils && !isRuleLike) {
const util = config.utils[camelName]
if (util !== lastUtil) {
lastUtil = util
each(util(data))
lastUtil = null
continue
}
}
// otherwise, if the left-hand "name" matches a configured polyfill
// conditionally transform the current data using the polyfill
else if (camelName in toPolyfilledValue) {
const poly = toPolyfilledValue[camelName]
if (poly !== lastPoly) {
lastPoly = poly
each(poly(data))
lastPoly = null
continue
}
}
// if the left-hand "name" matches a configured at-rule
if (isAtRuleLike) {
// transform the current name with the configured media at-rule prelude
name = toResolvedMediaQueryRanges(name.slice(1) in config.media ? '@media ' + config.media[name.slice(1)] : name)
}
if (isRuleLike) {
/** Next conditions, which may include one new condition (if this is an at-rule). */
const nextConditions = isAtRuleLike ? conditions.concat(name) : [...conditions]
/** Next selectors, which may include one new selector (if this is not an at-rule). */
const nextSelections = isAtRuleLike ? [...selectors] : toResolvedSelectors(selectors, name.split(comma))
if (currentRule !== undefined) {
onCssText(toCssString(...currentRule))
}
currentRule = undefined
walk(data, nextSelections, nextConditions)
} else {
if (currentRule === undefined) currentRule = [[], selectors, conditions]
/** CSS left-hand side value, which may be a specially-formatted custom property. */
name = !isAtRuleLike && name.charCodeAt(0) === 36 ? `--${toTailDashed(config.prefix)}${name.slice(1).replace(/\$/g, '-')}` : name
/** CSS right-hand side value, which may be a specially-formatted custom property. */
data = (
// preserve object-like data
isRuleLike ? data
// replace all non-unitless props that are not custom properties with pixel versions
: typeof data === 'number'
? data && !(camelName in unitlessProps) && !(name.charCodeAt(0) === 45)
? String(data) + 'px'
: String(data)
// replace tokens with stringified primitive values
: toTokenizedValue(
toSizingValue(camelName, data == null ? '' : data),
config.prefix,
config.themeMap[camelName]
)
)
currentRule[0].push(`${isAtRuleLike ? `${name} ` : `${toHyphenCase(name)}:`}${data}`)
}
}
}
}
each(style)
if (currentRule !== undefined) {
onCssText(toCssString(...currentRule))
}
currentRule = undefined
}
walk(style, selectors, conditions)
}
const toCssString = (declarations, selectors, conditions) => (
`${conditions.map((condition) => `${condition}{`).join('')}${selectors.length ? `${selectors.join(',')}{` : ''}${declarations.join(';')}${selectors.length ? `}` : ''}${Array(conditions.length ? conditions.length + 1 : 0).join('}')}`
)
/** CSS Properties whose number values should be unitless. */
export const unitlessProps = {
animationIterationCount: 1,
borderImageOutset: 1,
borderImageSlice: 1,
borderImageWidth: 1,
boxFlex: 1,
boxFlexGroup: 1,
boxOrdinalGroup: 1,
columnCount: 1,
columns: 1,
flex: 1,
flexGrow: 1,
flexPositive: 1,
flexShrink: 1,
flexNegative: 1,
flexOrder: 1,
gridRow: 1,
gridRowEnd: 1,
gridRowSpan: 1,
gridRowStart: 1,
gridColumn: 1,
gridColumnEnd: 1,
gridColumnSpan: 1,
gridColumnStart: 1,
msGridRow: 1,
msGridRowSpan: 1,
msGridColumn: 1,
msGridColumnSpan: 1,
fontWeight: 1,
lineHeight: 1,
opacity: 1,
order: 1,
orphans: 1,
tabSize: 1,
widows: 1,
zIndex: 1,
zoom: 1,
WebkitLineClamp: 1,
// SVG-related properties
fillOpacity: 1,
floodOpacity: 1,
stopOpacity: 1,
strokeDasharray: 1,
strokeDashoffset: 1,
strokeMiterlimit: 1,
strokeOpacity: 1,
strokeWidth: 1
}
================================================
FILE: packages/core/src/convert/toHash.js
================================================
const toAlphabeticChar = (/** @type {number} */ code) => String.fromCharCode(code + (code > 25 ? 39 : 97))
const toAlphabeticName = (/** @type {number} */ code) => {
let name = ''
let x
for (x = Math.abs(code); x > 52; x = (x / 52) | 0) name = toAlphabeticChar(x % 52) + name
return toAlphabeticChar(x % 52) + name
}
const toPhash = (/** @type {number} */ h, /** @type {string} */ x) => {
let i = x.length
while (i) h = (h * 33) ^ x.charCodeAt(--i)
return h
}
export const toHash = (/** @type {object} */ value) => toAlphabeticName(
toPhash(
5381,
JSON.stringify(value)
) >>> 0
)
================================================
FILE: packages/core/src/convert/toHyphenCase.js
================================================
/** Returns the given value converted to kebab-case. */
export const toHyphenCase = (/** @type {string} */ value) => (
// ignore kebab-like values
value.includes('-')
? value
// replace any upper-case letter with a dash and the lower-case variant
: value.replace(/[A-Z]/g, (capital) => '-' + capital.toLowerCase())
)
================================================
FILE: packages/core/src/convert/toPolyfilledValue.js
================================================
const splitBySpace = /\s+(?![^()]*\))/
const split = (fn) => (data) => fn(...(typeof data === 'string' ? String(data).split(splitBySpace) : [data]))
export const toPolyfilledValue = {
// prefixed properties
appearance: (d) => ({ WebkitAppearance: d, appearance: d }),
backfaceVisibility: (d) => ({ WebkitBackfaceVisibility: d, backfaceVisibility: d }),
backdropFilter: (d) => ({ WebkitBackdropFilter: d, backdropFilter: d }),
backgroundClip: (d) => ({ WebkitBackgroundClip: d, backgroundClip: d }),
boxDecorationBreak: (d) => ({ WebkitBoxDecorationBreak: d, boxDecorationBreak: d }),
clipPath: (d) => ({ WebkitClipPath: d, clipPath: d }),
content: (d) => ({ content: d.includes('"') || d.includes("'") || /^([A-Za-z]+\([^]*|[^]*-quote|inherit|initial|none|normal|revert|unset)$/.test(d) ? d : `"${d}"` }),
hyphens: (d) => ({ WebkitHyphens: d, hyphens: d }),
maskImage: (d) => ({ WebkitMaskImage: d, maskImage: d }),
maskSize: (d) => ({ WebkitMaskSize: d, maskSize: d }),
textSizeAdjust: (d) => ({ WebkitTextSizeAdjust: d, textSizeAdjust: d }),
userSelect: (d) => ({ WebkitUserSelect: d, userSelect: d }),
// logical properties
marginBlock: split((s, e) => ({ marginBlockStart: s, marginBlockEnd: e || s })),
marginInline: split((s, e) => ({ marginInlineStart: s, marginInlineEnd: e || s })),
maxSize: split((b, i) => ({ maxBlockSize: b, maxInlineSize: i || b })),
minSize: split((b, i) => ({ minBlockSize: b, minInlineSize: i || b })),
paddingBlock: split((s, e) => ({ paddingBlockStart: s, paddingBlockEnd: e || s })),
paddingInline: split((s, e) => ({ paddingInlineStart: s, paddingInlineEnd: e || s })),
}
================================================
FILE: packages/core/src/convert/toResolvedMediaQueryRanges.js
================================================
const mqunit = /([\d.]+)([^]*)/
/** Returns a media query with polyfilled ranges. */
export const toResolvedMediaQueryRanges = (
/** @type {string} */
media
) => media.replace(
/\(\s*([\w-]+)\s*(=|<|<=|>|>=)\s*([\w-]+)\s*(?:(<|<=|>|>=)\s*([\w-]+)\s*)?\)/g,
(
__,
/** @type {string} 1st param, either the name or value in the query. */
p1,
/** @type {string} 1st operator. */
o1,
/** @type {string} 2nd param, either the name or value in the query. */
p2,
/** @type {string} Optional 2nd operator. */
o2,
/** @type {string} Optional 3rd param, always a value in the query.*/
p3
) => {
/** Whether the first param is a value. */
const isP1Value = mqunit.test(p1)
/** Numeric shift applied to a value when an operator is `<` or `>`. */
const shift = 0.0625 * (isP1Value ? -1 : 1)
const [name, value] = isP1Value ? [p2, p1] : [p1, p2]
return (
'(' +
(
o1[0] === '=' ? '' : (o1[0] === '>' === isP1Value ? 'max-' : 'min-')
) + name + ':' +
(o1[0] !== '=' && o1.length === 1 ? value.replace(mqunit, (_, v, u) => Number(v) + shift * (o1 === '>' ? 1 : -1) + u) : value) +
(
o2
? ') and (' + (
(o2[0] === '>' ? 'min-' : 'max-') + name + ':' +
(o2.length === 1 ? p3.replace(mqunit, (_, v, u) => Number(v) + shift * (o2 === '>' ? -1 : 1) + u) : p3)
)
: ''
) +
')'
)
}
)
================================================
FILE: packages/core/src/convert/toResolvedSelectors.js
================================================
/** Returns selectors resolved from parent selectors and nested selectors. */
export const toResolvedSelectors = (
/** @type {string[]} Parent selectors (e.g. `["a", "button"]`). */
parentSelectors,
/** @type {string[]} Nested selectors (e.g. `["&:hover", "&:focus"]`). */
nestedSelectors,
) => (
parentSelectors.length
? parentSelectors.reduce(
(resolvedSelectors, parentSelector) => {
resolvedSelectors.push(
...nestedSelectors.map(
(selector) => (
selector.includes('&') ? selector.replace(
/&/g,
/[ +>|~]/.test(parentSelector) && /&.*&/.test(selector)
? `:is(${parentSelector})`
: parentSelector
) : parentSelector + ' ' + selector
)
)
)
return resolvedSelectors
},
[]
)
: nestedSelectors
)
================================================
FILE: packages/core/src/convert/toSizingValue.js
================================================
import { toHyphenCase } from './toHyphenCase.js'
/** Returns a declaration sizing value with polyfilled sizing keywords. */
export const toSizingValue = (/** @type {string} */ declarationName, /** @type {string} */ declarationValue) => (
declarationName in sizeProps && typeof declarationValue === 'string'
? declarationValue.replace(
/^((?:[^]*[^\w-])?)(fit-content|stretch)((?:[^\w-][^]*)?)$/,
(data, lead, main, tail) => (
lead + (
main === 'stretch'
? `-moz-available${tail};${toHyphenCase(declarationName)}:${lead}-webkit-fill-available`
: `-moz-fit-content${tail};${toHyphenCase(declarationName)}:${lead}fit-content`
) + tail
),
)
: String(declarationValue)
)
/** CSS Properties whose value include a sizing keyword. */
const sizeProps = {
blockSize: 1,
height: 1,
inlineSize: 1,
maxBlockSize: 1,
maxHeight: 1,
maxInlineSize: 1,
maxWidth: 1,
minBlockSize: 1,
minHeight: 1,
minInlineSize: 1,
minWidth: 1,
width: 1,
}
================================================
FILE: packages/core/src/convert/toTailDashed.js
================================================
/** Returns a filled value with a dash prefix. */
export const toTailDashed = (/** @type {string} */ value) => value ? value + '-' : ''
================================================
FILE: packages/core/src/convert/toTokenizedValue.js
================================================
import { toTailDashed } from './toTailDashed.js'
/** Returns a declaration value with transformed token values. */
export const toTokenizedValue = (
/** @type {string} */
value,
/** @type {string} */
prefix,
/** @type {string} */
scale,
) => value.replace(
/([+-])?((?:\d+(?:\.\d*)?|\.\d+)(?:[Ee][+-]?\d+)?)?(\$|--)([$\w-]+)/g,
($0, direction, multiplier, separator, token) => (
separator == "$" == !!multiplier
? $0
: (
direction || separator == '--'
? 'calc('
: ''
) + (
'var(--' + (
separator === '$'
? toTailDashed(prefix) + (
!token.includes('$')
? toTailDashed(scale)
: ''
) + token.replace(/\$/g, '-')
: token
) + ')' + (
direction || separator == '--'
? '*' + (
direction || ''
) + (
multiplier || '1'
) + ')'
: ''
)
)
),
)
================================================
FILE: packages/core/src/createStitches.js
================================================
import { defaultThemeMap } from './default/defaultThemeMap.js'
import { createMemo } from './utility/createMemo.js'
import { createCssFunction } from './features/css.js'
import { createGlobalCssFunction } from './features/globalCss.js'
import { createKeyframesFunction } from './features/keyframes.js'
import { createCreateThemeFunction } from './features/createTheme.js'
import { createSheet } from './sheet.js'
const createCssMap = createMemo()
export const createStitches = (config) => {
let didRun = false
const instance = createCssMap(config, (initConfig) => {
didRun = true
initConfig = typeof initConfig === 'object' && initConfig || {}
// internal configuration
const prefix = 'prefix' in initConfig ? String(initConfig.prefix) : ''
const media = typeof initConfig.media === 'object' && initConfig.media || {}
const root = typeof initConfig.root === 'object' ? initConfig.root || null : globalThis.document || null
const theme = typeof initConfig.theme === 'object' && initConfig.theme || {}
const themeMap = typeof initConfig.themeMap === 'object' && initConfig.themeMap || { ...defaultThemeMap }
const utils = typeof initConfig.utils === 'object' && initConfig.utils || {}
/** External configuration. */
const config = {
prefix,
media,
theme,
themeMap,
utils,
}
/** Internal stylesheet. */
const sheet = createSheet(root)
const returnValue = {
css: createCssFunction(config, sheet),
globalCss: createGlobalCssFunction(config, sheet),
keyframes: createKeyframesFunction(config, sheet),
createTheme: createCreateThemeFunction(config, sheet),
reset() {
sheet.reset()
returnValue.theme.toString()
},
theme: {},
sheet,
config,
prefix,
getCssText: sheet.toString,
toString: sheet.toString,
}
// initialize default theme
String(
returnValue.theme = returnValue.createTheme(theme)
)
return returnValue
})
if (!didRun) instance.reset()
return instance
}
================================================
FILE: packages/core/src/default/defaultThemeMap.js
================================================
const borderStyles = 'borderStyles'
const borderWidths = 'borderWidths'
const colors = 'colors'
const fonts = 'fonts'
const fontSizes = 'fontSizes'
const fontWeights = 'fontWeights'
const letterSpacings = 'letterSpacings'
const lineHeights = 'lineHeights'
const radii = 'radii'
const shadows = 'shadows'
const sizes = 'sizes'
const space = 'space'
const transitions = 'transitions'
const zIndices = 'zIndices'
/** @type {DefaultThemeMap} */
export const defaultThemeMap = {
gap: space,
gridGap: space,
columnGap: space,
gridColumnGap: space,
rowGap: space,
gridRowGap: space,
inset: space,
insetBlock: space,
insetBlockEnd: space,
insetBlockStart: space,
insetInline: space,
insetInlineEnd: space,
insetInlineStart: space,
margin: space,
marginTop: space,
marginRight: space,
marginBottom: space,
marginLeft: space,
marginBlock: space,
marginBlockEnd: space,
marginBlockStart: space,
marginInline: space,
marginInlineEnd: space,
marginInlineStart: space,
padding: space,
paddingTop: space,
paddingRight: space,
paddingBottom: space,
paddingLeft: space,
paddingBlock: space,
paddingBlockEnd: space,
paddingBlockStart: space,
paddingInline: space,
paddingInlineEnd: space,
paddingInlineStart: space,
top: space,
right: space,
bottom: space,
left: space,
scrollMargin: space,
scrollMarginTop: space,
scrollMarginRight: space,
scrollMarginBottom: space,
scrollMarginLeft: space,
scrollMarginX: space,
scrollMarginY: space,
scrollMarginBlock: space,
scrollMarginBlockEnd: space,
scrollMarginBlockStart: space,
scrollMarginInline: space,
scrollMarginInlineEnd: space,
scrollMarginInlineStart: space,
scrollPadding: space,
scrollPaddingTop: space,
scrollPaddingRight: space,
scrollPaddingBottom: space,
scrollPaddingLeft: space,
scrollPaddingX: space,
scrollPaddingY: space,
scrollPaddingBlock: space,
scrollPaddingBlockEnd: space,
scrollPaddingBlockStart: space,
scrollPaddingInline: space,
scrollPaddingInlineEnd: space,
scrollPaddingInlineStart: space,
fontSize: fontSizes,
background: colors,
backgroundColor: colors,
backgroundImage: colors,
borderImage: colors,
border: colors,
borderBlock: colors,
borderBlockEnd: colors,
borderBlockStart: colors,
borderBottom: colors,
borderBottomColor: colors,
borderColor: colors,
borderInline: colors,
borderInlineEnd: colors,
borderInlineStart: colors,
borderLeft: colors,
borderLeftColor: colors,
borderRight: colors,
borderRightColor: colors,
borderTop: colors,
borderTopColor: colors,
caretColor: colors,
color: colors,
columnRuleColor: colors,
fill: colors,
outline: colors,
outlineColor: colors,
stroke: colors,
textDecorationColor: colors,
fontFamily: fonts,
fontWeight: fontWeights,
lineHeight: lineHeights,
letterSpacing: letterSpacings,
blockSize: sizes,
minBlockSize: sizes,
maxBlockSize: sizes,
inlineSize: sizes,
minInlineSize: sizes,
maxInlineSize: sizes,
width: sizes,
minWidth: sizes,
maxWidth: sizes,
height: sizes,
minHeight: sizes,
maxHeight: sizes,
flexBasis: sizes,
gridTemplateColumns: sizes,
gridTemplateRows: sizes,
borderWidth: borderWidths,
borderTopWidth: borderWidths,
borderRightWidth: borderWidths,
borderBottomWidth: borderWidths,
borderLeftWidth: borderWidths,
borderStyle: borderStyles,
borderTopStyle: borderStyles,
borderRightStyle: borderStyles,
borderBottomStyle: borderStyles,
borderLeftStyle: borderStyles,
borderRadius: radii,
borderTopLeftRadius: radii,
borderTopRightRadius: radii,
borderBottomRightRadius: radii,
borderBottomLeftRadius: radii,
boxShadow: shadows,
textShadow: shadows,
transition: transitions,
zIndex: zIndices,
}
/**
* @typedef {Object} DefaultThemeMap
* @property {space} gap
* @property {space} gridGap
* @property {space} columnGap
* @property {space} gridColumnGap
* @property {space} rowGap
* @property {space} gridRowGap
* @property {space} inset
* @property {space} insetBlock
* @property {space} insetBlockEnd
* @property {space} insetBlockStart
* @property {space} insetInline
* @property {space} insetInlineEnd
* @property {space} insetInlineStart
* @property {space} margin
* @property {space} marginTop
* @property {space} marginRight
* @property {space} marginBottom
* @property {space} marginLeft
* @property {space} marginBlock
* @property {space} marginBlockEnd
* @property {space} marginBlockStart
* @property {space} marginInline
* @property {space} marginInlineEnd
* @property {space} marginInlineStart
* @property {space} padding
* @property {space} paddingTop
* @property {space} paddingRight
* @property {space} paddingBottom
* @property {space} paddingLeft
* @property {space} paddingBlock
* @property {space} paddingBlockEnd
* @property {space} paddingBlockStart
* @property {space} paddingInline
* @property {space} paddingInlineEnd
* @property {space} paddingInlineStart
* @property {space} top
* @property {space} right
* @property {space} bottom
* @property {space} left
* @property {space} scrollMargin
* @property {space} scrollMarginTop
* @property {space} scrollMarginRight
* @property {space} scrollMarginBottom
* @property {space} scrollMarginLeft
* @property {space} scrollMarginX
* @property {space} scrollMarginY
* @property {space} scrollMarginBlock
* @property {space} scrollMarginBlockEnd
* @property {space} scrollMarginBlockStart
* @property {space} scrollMarginInline
* @property {space} scrollMarginInlineEnd
* @property {space} scrollMarginInlineStart
* @property {space} scrollPadding
* @property {space} scrollPaddingTop
* @property {space} scrollPaddingRight
* @property {space} scrollPaddingBottom
* @property {space} scrollPaddingLeft
* @property {space} scrollPaddingX
* @property {space} scrollPaddingY
* @property {space} scrollPaddingBlock
* @property {space} scrollPaddingBlockEnd
* @property {space} scrollPaddingBlockStart
* @property {space} scrollPaddingInline
* @property {space} scrollPaddingInlineEnd
* @property {space} scrollPaddingInlineStart
* @property {fontSizes} fontSize
* @property {colors} background
* @property {colors} backgroundColor
* @property {colors} backgroundImage
* @property {colors} border
* @property {colors} borderBlock
* @property {colors} borderBlockEnd
* @property {colors} borderBlockStart
* @property {colors} borderBottom
* @property {colors} borderBottomColor
* @property {colors} borderColor
* @property {colors} borderInline
* @property {colors} borderInlineEnd
* @property {colors} borderInlineStart
* @property {colors} borderLeft
* @property {colors} borderLeftColor
* @property {colors} borderRight
* @property {colors} borderRightColor
* @property {colors} borderTop
* @property {colors} borderTopColor
* @property {colors} caretColor
* @property {colors} color
* @property {colors} columnRuleColor
* @property {colors} fill
* @property {colors} outline
* @property {colors} outlineColor
* @property {colors} stroke
* @property {colors} textDecorationColor
* @property {fonts} fontFamily
* @property {fontWeights} fontWeight
* @property {lineHeights} lineHeight
* @property {letterSpacings} letterSpacing
* @property {sizes} blockSize
* @property {sizes} minBlockSize
* @property {sizes} maxBlockSize
* @property {sizes} inlineSize
* @property {sizes} minInlineSize
* @property {sizes} maxInlineSize
* @property {sizes} width
* @property {sizes} minWidth
* @property {sizes} maxWidth
* @property {sizes} height
* @property {sizes} minHeight
* @property {sizes} maxHeight
* @property {sizes} flexBasis
* @property {sizes} gridTemplateColumns
* @property {sizes} gridTemplateRows
* @property {borderWidths} borderWidth
* @property {borderWidths} borderTopWidth
* @property {borderWidths} borderRightWidth
* @property {borderWidths} borderBottomWidth
* @property {borderWidths} borderLeftWidth
* @property {borderStyles} borderStyle
* @property {borderStyles} borderTopStyle
* @property {borderStyles} borderRightStyle
* @property {borderStyles} borderBottomStyle
* @property {borderStyles} borderLeftStyle
* @property {radii} borderRadius
* @property {radii} borderTopLeftRadius
* @property {radii} borderTopRightRadius
* @property {radii} borderBottomRightRadius
* @property {radii} borderBottomLeftRadius
* @property {shadows} boxShadow
* @property {shadows} textShadow
* @property {transitions} transition
* @property {zIndices} zIndex
*/
================================================
FILE: packages/core/src/features/createTheme.js
================================================
import { ThemeToken } from '../ThemeToken.js'
import { createMemo } from '../utility/createMemo.js'
import { toHash } from '../convert/toHash.js'
import { toTailDashed } from '../convert/toTailDashed.js'
import { toTokenizedValue } from '../convert/toTokenizedValue.js'
const createCreateThemeFunctionMap = createMemo()
/** Returns a function that applies a theme and returns tokens of that theme. */
export const createCreateThemeFunction = (
config,
sheet
) => (
createCreateThemeFunctionMap(config, () => (className, style) => {
// theme is the first argument if it is an object, otherwise the second argument as an object
style = typeof className === 'object' && className || Object(style)
// class name is the first argument if it is a string, otherwise an empty string
className = typeof className === 'string' ? className : ''
/** @type {string} Theme name. @see `{CONFIG_PREFIX}t-{THEME_UUID}` */
className = className || `${toTailDashed(config.prefix)}t-${toHash(style)}`
const selector = `.${className}`
const themeObject = {}
const cssProps = []
for (const scale in style) {
themeObject[scale] = {}
for (const token in style[scale]) {
const propertyName = `--${toTailDashed(config.prefix)}${scale}-${token}`
const propertyValue = toTokenizedValue(String(style[scale][token]), config.prefix, scale)
themeObject[scale][token] = new ThemeToken(token, propertyValue, scale, config.prefix)
cssProps.push(`${propertyName}:${propertyValue}`)
}
}
const render = () => {
if (cssProps.length && !sheet.rules.themed.cache.has(className)) {
sheet.rules.themed.cache.add(className)
const rootPrelude = style === config.theme ? ':root,' : ''
const cssText = `${rootPrelude}.${className}{${cssProps.join(';')}}`
sheet.rules.themed.apply(cssText)
}
return className
}
return {
...themeObject,
get className() {
return render()
},
selector,
toString: render,
}
})
)
================================================
FILE: packages/core/src/features/css.js
================================================
import { internal } from '../utility/internal.js'
import { createMemo } from '../utility/createMemo.js'
import { define } from '../utility/define.js'
import { hasNames } from '../utility/hasNames.js'
import { hasOwn } from '../utility/hasOwn.js'
import { toCssRules } from '../convert/toCssRules.js'
import { toHash } from '../convert/toHash.js'
import { toTailDashed } from '../convert/toTailDashed.js'
import { createRulesInjectionDeferrer } from '../sheet.js'
const createCssFunctionMap = createMemo()
/** Returns a function that applies component styles. */
export const createCssFunction = (config, sheet) =>
createCssFunctionMap(config, () => {
const _css = (args, componentConfig = {}) => {
let internals = {
type: null,
composers: new Set(),
}
for (const arg of args) {
// skip any void argument
if (arg == null) continue
// conditionally extend the component
if (arg[internal]) {
if (internals.type == null) internals.type = arg[internal].type
for (const composer of arg[internal].composers) {
internals.composers.add(composer)
}
}
// otherwise, conditionally define the component type
else if (arg.constructor !== Object || arg.$$typeof) {
if (internals.type == null) internals.type = arg
}
// otherwise, add a new composer to this component
else {
internals.composers.add(createComposer(arg, config, componentConfig))
}
}
// set the component type if none was set
if (internals.type == null) internals.type = 'span'
if (!internals.composers.size) internals.composers.add(['PJLV', {}, [], [], {}, []])
return createRenderer(config, internals, sheet, componentConfig)
}
const css = (...args) => _css(args)
css.withConfig = (componentConfig) => (...args) => _css(args, componentConfig)
return css
})
/** Creates a composer from a configuration object. */
const createComposer = ({ variants: initSingularVariants, compoundVariants: initCompoundVariants, defaultVariants: initDefaultVariants, ...style }, config, {componentId, displayName}) => {
/** @type {string} Composer Unique Identifier. @see `{CONFIG_PREFIX}-?c-{STYLE_HASH}` */
const hash = componentId || toHash(style)
const componentNamePrefix = displayName ? ('c-' + displayName +'') : 'c'
const className = `${toTailDashed(config.prefix)}${componentNamePrefix}-${hash}`
const singularVariants = []
const compoundVariants = []
const prefilledVariants = Object.create(null)
const undefinedVariants = []
for (const variantName in initDefaultVariants) {
prefilledVariants[variantName] = String(initDefaultVariants[variantName])
}
// add singular variants
if (typeof initSingularVariants === 'object' && initSingularVariants) {
for (const name in initSingularVariants) {
if (!hasOwn(prefilledVariants, name)) prefilledVariants[name] = 'undefined'
const variantPairs = initSingularVariants[name]
for (const pair in variantPairs) {
const vMatch = { [name]: String(pair) }
if (String(pair) === 'undefined') undefinedVariants.push(name)
const vStyle = variantPairs[pair]
const variant = [vMatch, vStyle, !hasNames(vStyle)]
singularVariants.push(variant)
}
}
}
// add compound variants
if (typeof initCompoundVariants === 'object' && initCompoundVariants) {
for (const compoundVariant of initCompoundVariants) {
let { css: vStyle, ...vMatch } = compoundVariant
vStyle = typeof vStyle === 'object' && vStyle || {}
// serialize all compound variant pairs
for (const name in vMatch) vMatch[name] = String(vMatch[name])
const variant = [vMatch, vStyle, !hasNames(vStyle)]
compoundVariants.push(variant)
}
}
return ([className, style, singularVariants, compoundVariants, prefilledVariants, undefinedVariants])
}
const createRenderer = (config, internals, sheet, { shouldForwardStitchesProp }) => {
const [
baseClassName,
baseClassNames,
prefilledVariants,
undefinedVariants
] = getPreparedDataFromComposers(internals.composers)
const deferredInjector = typeof internals.type === 'function' || !!internals.type.$$typeof ? createRulesInjectionDeferrer(sheet) : null
const injectionTarget = (deferredInjector || sheet).rules
const selector = `.${baseClassName}${baseClassNames.length > 1 ? `:where(.${baseClassNames.slice(1).join('.')})` : ``}`
const render = (props) => {
props = typeof props === 'object' && props || empty
// 1. we cannot mutate `props`
// 2. we delete variant props
// 3. we delete `css` prop
// therefore: we must create a new props & css variables
const { ...forwardProps } = props
const variantProps = {}
for (const name in prefilledVariants) {
if (name in props) {
if (!shouldForwardStitchesProp?.(name)) delete forwardProps[name]
let data = props[name]
if (typeof data === 'object' && data) {
variantProps[name] = {
'@initial': prefilledVariants[name],
...data,
}
} else {
data = String(data)
variantProps[name] = (
data === 'undefined' && !undefinedVariants.has(name)
? prefilledVariants[name]
: data
)
}
} else {
variantProps[name] = prefilledVariants[name]
}
}
const classSet = new Set([ ...baseClassNames ])
// 1. builds up the variants (fills in defaults, calculates @initial on responsive, etc.)
// 2. iterates composers
// 2.1. add their base class
// 2.2. iterate their variants, add their variant classes
// 2.2.1. orders regular variants before responsive variants
// 2.3. iterate their compound variants, add their compound variant classes
for (const [composerBaseClass, composerBaseStyle, singularVariants, compoundVariants] of internals.composers) {
if (!sheet.rules.styled.cache.has(composerBaseClass)) {
sheet.rules.styled.cache.add(composerBaseClass)
toCssRules(composerBaseStyle, [`.${composerBaseClass}`], [], config, (cssText) => {
injectionTarget.styled.apply(cssText)
})
}
const singularVariantsToAdd = getTargetVariantsToAdd(singularVariants, variantProps, config.media)
const compoundVariantsToAdd = getTargetVariantsToAdd(compoundVariants, variantProps, config.media, true)
for (const variantToAdd of singularVariantsToAdd) {
if (variantToAdd === undefined) continue
for (const [vClass, vStyle, isResponsive] of variantToAdd) {
const variantClassName = `${composerBaseClass}-${toHash(vStyle)}-${vClass}`
classSet.add(variantClassName)
const groupCache = (isResponsive ? sheet.rules.resonevar : sheet.rules.onevar ).cache
/*
* make sure that normal variants are injected before responsive ones
* @see {@link https://github.com/stitchesjs/stitches/issues/737|github}
*/
const targetInjectionGroup = isResponsive ? injectionTarget.resonevar : injectionTarget.onevar
if (!groupCache.has(variantClassName)) {
groupCache.add(variantClassName)
toCssRules(vStyle, [`.${variantClassName}`], [], config, (cssText) => {
targetInjectionGroup.apply(cssText)
})
}
}
}
for (const variantToAdd of compoundVariantsToAdd) {
if (variantToAdd === undefined) continue
for (const [vClass, vStyle] of variantToAdd) {
const variantClassName = `${composerBaseClass}-${toHash(vStyle)}-${vClass}`
classSet.add(variantClassName)
if (!sheet.rules.allvar.cache.has(variantClassName)) {
sheet.rules.allvar.cache.add(variantClassName)
toCssRules(vStyle, [`.${variantClassName}`], [], config, (cssText) => {
injectionTarget.allvar.apply(cssText)
})
}
}
}
}
// apply css property styles
const css = forwardProps.css
if (typeof css === 'object' && css) {
if (!shouldForwardStitchesProp?.('css')) delete forwardProps.css
/** @type {string} Inline Class Unique Identifier. @see `{COMPOSER_UUID}-i{VARIANT_UUID}-css` */
const iClass = `${baseClassName}-i${toHash(css)}-css`
classSet.add(iClass)
if (!sheet.rules.inline.cache.has(iClass)) {
sheet.rules.inline.cache.add(iClass)
toCssRules(css, [`.${iClass}`], [], config, (cssText) => {
injectionTarget.inline.apply(cssText)
})
}
}
for (const propClassName of String(props.className || '').trim().split(/\s+/)) {
if (propClassName) classSet.add(propClassName)
}
const renderedClassName = forwardProps.className = [ ...classSet ].join(' ')
const renderedToString = () => renderedClassName
return {
type: internals.type,
className: renderedClassName,
selector,
props: forwardProps,
toString: renderedToString,
deferredInjector,
}
}
const toString = () => {
if (!sheet.rules.styled.cache.has(baseClassName)) render()
return baseClassName
}
return define(render, {
className: baseClassName,
selector,
[internal]: internals,
toString,
})
}
/** Returns useful data that can be known before rendering. */
const getPreparedDataFromComposers = (composers) => {
/** Class name of the first composer. */
let baseClassName = ''
/** @type {string[]} Combined class names for all composers. */
const baseClassNames = []
/** @type {PrefilledVariants} Combined variant pairings for all composers. */
const combinedPrefilledVariants = {}
/** @type {UndefinedVariants} List of variant names that can have an "undefined" pairing. */
const combinedUndefinedVariants = []
for (const [className, , , , prefilledVariants, undefinedVariants] of composers) {
if (baseClassName === '') baseClassName = className
baseClassNames.push(className)
combinedUndefinedVariants.push(...undefinedVariants)
for (const name in prefilledVariants) {
const data = prefilledVariants[name]
if (combinedPrefilledVariants[name] === undefined || data !== 'undefined' || undefinedVariants.includes(data)) combinedPrefilledVariants[name] = data
}
}
const preparedData = [
baseClassName,
baseClassNames,
combinedPrefilledVariants,
new Set(combinedUndefinedVariants)
]
return preparedData
}
const getTargetVariantsToAdd = (
targetVariants,
variantProps,
media,
isCompoundVariant,
) => {
const targetVariantsToAdd = []
targetVariants: for (let [vMatch, vStyle, vEmpty] of targetVariants) {
// skip empty variants
if (vEmpty) continue
/** Position the variant should be inserted into. */
let vOrder = 0
let vName
let isResponsive = false
for (vName in vMatch) {
const vPair = vMatch[vName]
let pPair = variantProps[vName]
// exact matches
if (pPair === vPair) continue
// responsive matches
else if (typeof pPair === 'object' && pPair) {
/** @type {boolean} Whether the responsive variant is matched. */
let didMatch
let qOrder = 0
// media queries matching the same variant
let matchedQueries
for (const query in pPair) {
if (vPair === String(pPair[query])) {
if (query !== '@initial') {
// check if the cleanQuery is in the media config and then we push the resulting media query to the matchedQueries array,
// if not, we remove the @media from the beginning and push it to the matched queries which then will be resolved a few lines down
// when we finish working on this variant and want wrap the vStyles with the matchedQueries
const cleanQuery = query.slice(1);
(matchedQueries = matchedQueries || []).push(cleanQuery in media ? media[cleanQuery] : query.replace(/^@media ?/, ''))
isResponsive = true
}
vOrder += qOrder
didMatch = true
}
++qOrder
}
if (matchedQueries && matchedQueries.length) {
vStyle = {
['@media ' + matchedQueries.join(', ')]: vStyle,
}
}
if (!didMatch) continue targetVariants
}
// non-matches
else continue targetVariants
}
(targetVariantsToAdd[vOrder] = targetVariantsToAdd[vOrder] || []).push([isCompoundVariant ? `cv` : `${vName}-${vMatch[vName]}`, vStyle, isResponsive])
}
return targetVariantsToAdd
}
/** Fallback props object used when no props are passed. */
const empty = {}
================================================
FILE: packages/core/src/features/globalCss.js
================================================
import { createMemo } from '../utility/createMemo.js'
import { define } from '../utility/define.js'
import { toCssRules } from '../convert/toCssRules.js'
import { toHash } from '../convert/toHash.js'
const createGlobalCssFunctionMap = createMemo()
/** Returns a function that applies global styles. */
export const createGlobalCssFunction = (
config,
sheet
) => createGlobalCssFunctionMap(config, () => (
...styles
) => {
const render = () => {
for (let style of styles) {
style = typeof style === 'object' && style || {}
let uuid = toHash(style)
if (!sheet.rules.global.cache.has(uuid)) {
sheet.rules.global.cache.add(uuid)
// support @import rules
if ('@import' in style) {
let importIndex = [].indexOf.call(sheet.sheet.cssRules, sheet.rules.themed.group) - 1
// wrap import in quotes as a convenience
for (
let importValue of /** @type {string[]} */ ([].concat(style['@import']))
) {
importValue = importValue.includes('"') || importValue.includes("'") ? importValue : `"${importValue}"`
sheet.sheet.insertRule(`@import ${importValue};`, importIndex++)
}
delete style['@import']
}
toCssRules(style, [], [], config, (cssText) => {
sheet.rules.global.apply(cssText)
})
}
}
return ''
}
return define(render, {
toString: render,
})
})
================================================
FILE: packages/core/src/features/keyframes.js
================================================
import { createMemo } from '../utility/createMemo.js'
import { define } from '../utility/define.js'
import { toCssRules } from '../convert/toCssRules.js'
import { toHash } from '../convert/toHash.js'
import { toTailDashed } from '../convert/toTailDashed.js'
/** @typedef {import('..').Config} Config */
/** @typedef {import('..').Style} Style */
/** @typedef {import('..').GroupSheet} GroupSheet */
const createKeyframesFunctionMap = createMemo()
/** Returns a function that applies a keyframes rule. */
export const createKeyframesFunction = (/** @type {Config} */ config, /** @type {GroupSheet} */ sheet) => (
createKeyframesFunctionMap(config, () => (style) => {
/** @type {string} Keyframes Unique Identifier. @see `{CONFIG_PREFIX}-?k-{KEYFRAME_UUID}` */
const name = `${toTailDashed(config.prefix)}k-${toHash(style)}`
const render = () => {
if (!sheet.rules.global.cache.has(name)) {
sheet.rules.global.cache.add(name)
const cssRules = []
toCssRules(style, [], [], config, (cssText) => cssRules.push(cssText))
const cssText = `@keyframes ${name}{${cssRules.join('')}}`
sheet.rules.global.apply(cssText)
}
return name
}
return define(render, {
get name() {
return render()
},
toString: render,
})
})
)
================================================
FILE: packages/core/src/index.js
================================================
import { getCachedConfig } from './utility/getCachedConfig.js'
export { createStitches } from './createStitches.js'
export { defaultThemeMap } from './default/defaultThemeMap.js'
export const createTheme = (...args) => getCachedConfig().createTheme(...args)
export const globalCss = (...args) => getCachedConfig().globalCss(...args)
export const keyframes = (...args) => getCachedConfig().keyframes(...args)
export const css = (...args) => getCachedConfig().css(...args)
================================================
FILE: packages/core/src/sheet.js
================================================
import { getNonce } from './utility/getNonce.js'
/**
* Rules in the sheet appear in this order:
* 1. theme rules (themed)
* 2. global rules (global)
* 3. component rules (styled)
* 4. non-responsive variants rules (onevar)
* 5. responsive variants rules (resonevar)
* 6. compound variants rules (allvar)
* 7. inline rules (inline)
*/
/** @type {RuleGroupNames} */
export const names = ['themed', 'global', 'styled', 'onevar', 'resonevar', 'allvar', 'inline']
const isSheetAccessible = (/** @type {CSSStyleSheet} */ sheet) => {
if (sheet.href && !sheet.href.startsWith(location.origin)) {
return false
}
try {
return !!sheet.cssRules
} catch (e) {
return false
}
}
export const createSheet = (/** @type {DocumentOrShadowRoot} */ root) => {
/** @type {SheetGroup} Object hosting the hydrated stylesheet. */
let groupSheet
const toString = () => {
const { cssRules } = groupSheet.sheet
return [].map
.call(cssRules, (cssRule, cssRuleIndex) => {
const { cssText } = cssRule
let lastRuleCssText = ''
if (cssText.startsWith('--sxs')) return ''
if (cssRules[cssRuleIndex - 1] && (lastRuleCssText = cssRules[cssRuleIndex - 1].cssText).startsWith('--sxs')) {
if (!cssRule.cssRules.length) return ''
for (const name in groupSheet.rules) {
if (groupSheet.rules[name].group === cssRule) {
return `--sxs{--sxs:${[...groupSheet.rules[name].cache].join(' ')}}${cssText}`
}
}
return cssRule.cssRules.length ? `${lastRuleCssText}${cssText}` : ''
}
return cssText
})
.join('')
}
const reset = () => {
if (groupSheet) {
const { rules, sheet } = groupSheet
if (!sheet.deleteRule) {
while (Object(Object(sheet.cssRules)[0]).type === 3) sheet.cssRules.splice(0, 1)
sheet.cssRules = []
}
for (const groupName in rules) {
delete rules[groupName]
}
}
/** @type {StyleSheetList} */
const sheets = Object(root).styleSheets || []
// iterate all stylesheets until a hydratable stylesheet is found
for (const sheet of sheets) {
if (!isSheetAccessible(sheet)) continue
for (let index = 0, rules = sheet.cssRules; rules[index]; ++index) {
/** @type {CSSStyleRule} Possible indicator rule. */
const check = Object(rules[index])
// a hydratable set of rules will start with a style rule (type: 1), ignore all others
if (check.type !== 1) continue
/** @type {CSSMediaRule} Possible styling group. */
const group = Object(rules[index + 1])
// a hydratable set of rules will follow with a media rule (type: 4), ignore all others
if (group.type !== 4) continue
++index
const { cssText } = check
// a hydratable style rule will have a selector of `--sxs`, ignore all others
if (!cssText.startsWith('--sxs')) continue
const cache = cssText.slice(14, -3).trim().split(/\s+/)
/** @type {GroupName} Name of the group. */
const groupName = names[cache[0]]
// a hydratable style rule will have a parsable group, ignore all others
if (!groupName) continue
// create a group sheet if one does not already exist
if (!groupSheet) groupSheet = { sheet, reset, rules: {}, toString }
// add the group to the group sheet
groupSheet.rules[groupName] = { group, index, cache: new Set(cache) }
}
// if a hydratable stylesheet is found, stop looking
if (groupSheet) break
}
// if no hydratable stylesheet is found
if (!groupSheet) {
const createCSSMediaRule = (/** @type {string} */ sourceCssText, type) => {
return /** @type {CSSMediaRule} */ ({
type,
cssRules: [],
insertRule(cssText, index) {
this.cssRules.splice(index, 0, createCSSMediaRule(cssText, {
import: 3,
undefined: 1
}[(cssText.toLowerCase().match(/^@([a-z]+)/) || [])[1]] || 4))
},
get cssText() {
return sourceCssText === '@media{}' ? `@media{${[].map.call(this.cssRules, (cssRule) => cssRule.cssText).join('')}}` : sourceCssText
},
})
}
const createSheet = () => {
if (!root) {
return createCSSMediaRule('', 'text/css')
}
const styleEl = document.createElement('style')
const nonce = getNonce()
if (nonce) {
styleEl.setAttribute('nonce', nonce)
}
return (root.head || root).appendChild(styleEl).sheet
}
groupSheet = {
sheet: createSheet(),
rules: {},
reset,
toString,
}
}
const { sheet, rules } = groupSheet
for (let i = names.length - 1; i >= 0; --i) {
// name of group on current index
const name = names[i]
if (!rules[name]) {
// name of prev group
const prevName = names[i + 1]
// get the index of that prev group or else get the length of the whole sheet
const index = rules[prevName] ? rules[prevName].index : sheet.cssRules.length
// insert the grouping & the sxs rule
sheet.insertRule('@media{}', index)
sheet.insertRule(`--sxs{--sxs:${i}}`, index)
// add the group to the group sheet
rules[name] = { group: sheet.cssRules[index + 1], index, cache: new Set([i]) }
}
addApplyToGroup(rules[name])
}
}
reset()
return groupSheet
}
const addApplyToGroup = (/** @type {RuleGroup} */ group) => {
const groupingRule = group.group
let index = groupingRule.cssRules.length
group.apply = (cssText) => {
try {
groupingRule.insertRule(cssText, index)
++index
} catch (__) {
// do nothing and continue
}
}
}
/** Pending rules for injection */
const $pr = Symbol()
/**
* When a stitches component is extending some other random react component,
* it’s gonna create a react component (Injector) using this function and then render it after the children,
* this way, we would force the styles of the wrapper to be injected after the wrapped component
*/
export const createRulesInjectionDeferrer = (globalSheet) => {
// the injection deferrer
function injector() {
for (let i = 0; i < injector[$pr].length; i++) {
const [sheet, cssString] = injector[$pr][i]
globalSheet.rules[sheet].apply(cssString)
}
injector[$pr] = []
return null
}
// private prop to store pending rules
injector[$pr] = []
// mocking the rules.apply api used on the sheet
injector.rules = {}
// creating the apply methods under rules[something]
names.forEach((sheetName) => (injector.rules[sheetName] = { apply: (rule) => injector[$pr].push([sheetName, rule]) }))
return injector
}
================================================
FILE: packages/core/src/utility/createMemo.js
================================================
const stringifyReplacer = (name, data) => (typeof data === 'function' ? { '()': Function.prototype.toString.call(data) } : data)
const stringify = (value) => JSON.stringify(value, stringifyReplacer)
export const createMemo = () => {
const cache = Object.create(null)
return (value, apply, ...args) => {
const vjson = stringify(value)
return vjson in cache ? cache[vjson] : (cache[vjson] = apply(value, ...args))
}
}
================================================
FILE: packages/core/src/utility/define.js
================================================
/** @type {<T>(target: T, source: any) => T} */
export const define = (target, source) => Object.defineProperties(target, Object.getOwnPropertyDescriptors(source))
================================================
FILE: packages/core/src/utility/getCachedConfig.js
================================================
import { createStitches } from '../createStitches.js'
let cachedConfig
export const getCachedConfig = () => cachedConfig || (cachedConfig = createStitches())
================================================
FILE: packages/core/src/utility/getNonce.js
================================================
export const getNonce = () => {
if (typeof window.__webpack_nonce__ !== 'undefined') return window.__webpack_nonce__
if (typeof window.nonce !== 'undefined') return window.nonce
return null
}
================================================
FILE: packages/core/src/utility/hasNames.js
================================================
export const hasNames = (target) => {
for (const name in target) return true
return false
}
================================================
FILE: packages/core/src/utility/hasOwn.js
================================================
const { hasOwnProperty } = Object.prototype
export const hasOwn = (target, key) => hasOwnProperty.call(target, key)
================================================
FILE: packages/core/src/utility/index.d.ts
================================================
export type Primitive = string | number | bigint | boolean | symbol
export type Optional = Primitive | void
export type Try<T1, T2, T3 = never, T4 = T1> = T1 extends T2 ? T4 : T3
export type ToString<T1 = ''> = `${T1}`
export type ToTailDashed<T1> = T1 extends '' ? '' : `${T1}-`
================================================
FILE: packages/core/src/utility/internal.js
================================================
export const internal = Symbol.for('sxs.internal')
================================================
FILE: packages/core/tests/basic.js
================================================
import { createStitches } from '../src/index.js'
describe('Basic', () => {
test('Existance of methods', () => {
const stitches = createStitches()
expect(stitches).toBeInstanceOf(Object)
expect(stitches.css).toBeInstanceOf(Function)
expect(stitches.globalCss).toBeInstanceOf(Function)
expect(stitches.keyframes).toBeInstanceOf(Function)
expect(stitches.createTheme).toBeInstanceOf(Function)
})
test('Functionality of getCssText()', () => {
const { getCssText } = createStitches()
expect(getCssText()).toBe('')
})
test('Functionality of css()', () => {
const { css, getCssText } = createStitches()
const component1of2 = css()
const className1of2 = `${component1of2}`
const cssString1of2 = getCssText()
expect(component1of2).toBeInstanceOf(Function)
expect(className1of2).toBe('PJLV')
expect(cssString1of2).toBe('')
const component2of2 = css({ color: 'DodgerBlue' })
const className2of2 = `${component2of2}`
const cssString2of2 = getCssText()
expect(component2of2).toBeInstanceOf(Function)
expect(className2of2).toBe('c-dataoT')
expect(cssString2of2).toBe(`--sxs{--sxs:2 PJLV c-dataoT}@media{.c-dataoT{color:DodgerBlue}}`)
})
test('Functionality of reset()', () => {
const { reset, getCssText } = createStitches()
expect(reset).toBeInstanceOf(Function)
expect(getCssText()).toBe('')
reset()
expect(getCssText()).toBe('')
})
test('Functionality of globalCss()', () => {
const { globalCss, getCssText } = createStitches()
const rendering1of2 = globalCss()
const className1of2 = `${rendering1of2}`
const cssString1of2 = getCssText()
expect(rendering1of2).toBeInstanceOf(Function)
expect(className1of2).toBe('')
expect(cssString1of2).toBe('')
const rendering2of2 = globalCss({ body: { margin: 0 } })
const className2of2 = `${rendering2of2}`
const cssString2of2 = getCssText()
expect(rendering2of2).toBeInstanceOf(Function)
expect(className2of2).toBe('')
expect(cssString2of2).toBe(`--sxs{--sxs:1 cSHHDh}@media{body{margin:0}}`)
})
test('Functionality of keyframes()', () => {
const { keyframes, getCssText } = createStitches()
const rendering1of1 = keyframes({
'0%': {
color: 'Black',
},
'100%': {
color: 'White',
},
})
const className1of1 = `${rendering1of1}`
const cssString1of1 = getCssText()
expect(rendering1of1).toBeInstanceOf(Function)
expect(className1of1).toBe('k-jOrSYg')
expect(cssString1of1).toBe(`--sxs{--sxs:1 k-jOrSYg}@media{@keyframes k-jOrSYg{0%{color:Black}100%{color:White}}}`)
})
test('Functionality of createTheme()', () => {
const { createTheme, getCssText } = createStitches()
const rendering1of1 = createTheme({
colors: {
red: 'Crimson',
blue: 'DodgerBlue',
},
})
const className1of1 = `${rendering1of1}`
const cssString1of1 = getCssText()
expect(rendering1of1).toBeInstanceOf(Object)
expect(className1of1).toBe('t-kfidiM')
expect(cssString1of1).toBe(`--sxs{--sxs:0 t-kfidiM}@media{.t-kfidiM{--colors-red:Crimson;--colors-blue:DodgerBlue}}`)
})
test('Functionality of css() — css prop', () => {
const { css, getCssText } = createStitches()
const component1of1 = css({ color: 'DodgerBlue' })
const className1of1 = `${component1of1({ css: { color: 'Crimson' } })}`
const cssString1of1 = getCssText()
expect(component1of1).toBeInstanceOf(Function)
expect(className1of1).toBe('c-dataoT c-dataoT-icaIZdx-css')
expect(cssString1of1).toBe(
`--sxs{--sxs:2 c-dataoT}@media{` +
`.c-dataoT{color:DodgerBlue}` +
`}` +
`--sxs{--sxs:6 c-dataoT-icaIZdx-css}@media{` +
`.c-dataoT-icaIZdx-css{color:Crimson}` +
`}`
)
})
test('Functionality of css() — variants', () => {
const { css, getCssText } = createStitches()
const component1of1 = css({
fontSize: '100%',
variants: {
shade: {
red: {
color: 'Crimson',
},
blue: {
color: 'DodgerBlue',
},
},
},
})
const className1of1 = `${component1of1({ shade: 'red' })}`
const cssString1of1 = getCssText()
expect(component1of1).toBeInstanceOf(Function)
expect(className1of1).toBe('c-imTdEZ c-imTdEZ-caIZdx-shade-red')
expect(cssString1of1).toBe(`--sxs{--sxs:2 c-imTdEZ}@media{.c-imTdEZ{font-size:100%}}--sxs{--sxs:3 c-imTdEZ-caIZdx-shade-red}@media{.c-imTdEZ-caIZdx-shade-red{color:Crimson}}`)
})
test('Functionality of css() — utils', () => {
const { css, getCssText } = createStitches({
utils: {
userSelect: (value) => ({
WebkitUserSelector: value,
userSelect: value,
}),
},
})
const component1of1 = css({
userSelect: 'none',
})
const className1of1 = `${component1of1()}`
const cssString1of1 = getCssText()
expect(className1of1).toBe('c-bStdfw')
expect(cssString1of1).toBe(`--sxs{--sxs:2 c-bStdfw}@media{.c-bStdfw{-webkit-user-selector:none;user-select:none}}`)
})
test('Functionality of stringification — numeric pixel values', () => {
const { css, getCssText } = createStitches()
const component1of1 = css({
width: 100,
})
const className1of1 = `${component1of1()}`
const cssString1of1 = getCssText()
expect(className1of1).toBe('c-eBcQxc')
expect(cssString1of1).toBe(`--sxs{--sxs:2 c-eBcQxc}@media{.c-eBcQxc{width:100px}}`)
})
test('Functionality of stringification — token values', () => {
const { css, getCssText } = createStitches()
const component1of1 = css({
width: '$brand',
})
const className1of1 = `${component1of1()}`
const cssString1of1 = getCssText()
expect(className1of1).toBe('c-lpaZZu')
expect(cssString1of1).toBe(`--sxs{--sxs:2 c-lpaZZu}@media{.c-lpaZZu{width:var(--sizes-brand)}}`)
})
test('Functionality of stringification — local tokens', () => {
const { css, getCssText } = createStitches()
const component1of1 = css({
$$brand: '500px',
width: '$$brand',
})
const className1of1 = `${component1of1()}`
const cssString1of1 = getCssText()
expect(className1of1).toBe('c-elRGCe')
expect(cssString1of1).toBe(`--sxs{--sxs:2 c-elRGCe}@media{.c-elRGCe{---brand:500px;width:var(---brand)}}`)
})
test('Functionality of stringification — local tokens prefixed', () => {
const { css, getCssText } = createStitches({
prefix: 'fusion',
})
const component1of1 = css({
$$brand: '500px',
width: '$$brand',
})
const className1of1 = `${component1of1()}`
const cssString1of1 = getCssText()
expect(className1of1).toBe('fusion-c-elRGCe')
expect(cssString1of1).toBe(`--sxs{--sxs:2 fusion-c-elRGCe}@media{.fusion-c-elRGCe{--fusion--brand:500px;width:var(--fusion--brand)}}`)
})
test('Stringification: Utils + Local Tokens', () => {
const { css, getCssText } = createStitches({
utils: {
backdropFilter: (value) => ({
WebkitBackdropFilter: value,
backdropFilter: value,
}),
},
})
const component1of1 = css({
$$blur: 'test',
backdropFilter: '$$blur',
})
const className1of1 = `${component1of1()}`
const cssString1of1 = getCssText()
expect(className1of1).toBe('c-brAtkJ')
expect(cssString1of1).toBe(`--sxs{--sxs:2 c-brAtkJ}@media{.c-brAtkJ{---blur:test;-webkit-backdrop-filter:var(---blur);backdrop-filter:var(---blur)}}`)
})
test('Theme', () => {
const { getCssText } = createStitches({
theme: {
colors: {
red: 'Crimson',
blue: 'DodgerBlue',
},
},
})
expect(getCssText()).toBe(`--sxs{--sxs:0 t-kfidiM}@media{:root,.t-kfidiM{--colors-red:Crimson;--colors-blue:DodgerBlue}}`)
})
})
================================================
FILE: packages/core/tests/component-composition.js
================================================
import { createStitches } from '../src/index.js'
describe('Composition', () => {
test('Renders an empty component', () => {
const { css, toString } = createStitches()
const generic = css()
expect(generic().props).toEqual({ className: 'PJLV' })
expect(toString()).toBe('')
})
test('Renders a component as the final composition by default', () => {
const { css, toString } = createStitches()
const red = css({ color: 'red' })
const size14 = css({ fontSize: '14px' })
const bold = css({ fontWeight: 'bold' })
const title = css(red, size14, bold, { fontFamily: 'monospace' })
expect(title.className).toBe('c-gmqXFB')
expect(toString()).toBe('')
expect(String(title)).toBe('c-gmqXFB')
expect(toString()).toBe(
`--sxs{--sxs:2 c-gmqXFB c-hzkWus c-cQFdVt c-kngyIZ}@media{` +
`.c-gmqXFB{color:red}` +
`.c-hzkWus{font-size:14px}` +
`.c-cQFdVt{font-weight:bold}` +
`.c-kngyIZ{font-family:monospace}` +
`}`
)
})
test('Renders a component with all compositions', () => {
const { css, toString } = createStitches()
const red = css({ color: 'red' })
const size14 = css({ fontSize: '14px' })
const bold = css({ fontWeight: 'bold' })
const title = css(red, size14, bold, { fontFamily: 'monospace' })
expect(title().className).toBe('c-gmqXFB c-hzkWus c-cQFdVt c-kngyIZ')
expect(toString()).toBe(
`--sxs{--sxs:2 c-gmqXFB c-hzkWus c-cQFdVt c-kngyIZ}@media{` +
`.c-gmqXFB{color:red}` +
`.c-hzkWus{font-size:14px}` +
`.c-cQFdVt{font-weight:bold}` +
`.c-kngyIZ{font-family:monospace}` +
`}`
)
})
})
================================================
FILE: packages/core/tests/component-conditions.js
================================================
import { createStitches } from '../src/index.js'
describe('Component Medias', () => {
test('Authors can define medias applied to components', () => {
const { css, toString } = createStitches({
media: {
mediumUp: '(width >= 768px)',
},
})
css({
'fontSize': '16px',
'@mediumUp': {
fontSize: '24px',
},
})()
expect(toString()).toBe(
`--sxs{--sxs:2 c-jEGvho}@media{` +
`.c-jEGvho{font-size:16px}` +
`@media (min-width:768px){.c-jEGvho{font-size:24px}}` +
`}`,
)
})
})
================================================
FILE: packages/core/tests/component-css-prop.js
================================================
import { createStitches } from '../src/index.js'
describe('Component with CSS prop', () => {
test('Authors can create a component and pass it a css prop of overrides', () => {
const { css, toString } = createStitches({
media: {
bp0: '(width < 768px)',
bp1: '(768px <= width < 1400px)',
bp2: '(1400px <= width)',
},
})
css({
order: 1,
})({
css: {
order: 2,
},
})
expect(toString()).toBe(
`--sxs{--sxs:2 c-hhyRYU}@media{` +
`.c-hhyRYU{order:1}` +
`}` +
`--sxs{--sxs:6 c-hhyRYU-ilhKMMn-css}@media{` +
`.c-hhyRYU-ilhKMMn-css{order:2}` +
`}`
)
})
})
================================================
FILE: packages/core/tests/component-empty-variants.js
================================================
import { createStitches } from '../src/index.js'
describe('Empty Variants', () => {
test('Empty Variants', () => {
const { css, getCssText } = createStitches()
css({
variants: {
size: {
xl: {},
},
tone: {
primary: {},
},
},
compoundVariants: [
{
tone: 'primary',
size: 'xl',
},
],
})({
tone: 'primary',
size: { '@initial': 'xl' },
})
expect(getCssText()).toBe('')
})
test('Empty Variants', () => {
const { css, getCssText } = createStitches()
css({
variants: {
size: {
xl: {},
},
tone: {
primary: {},
},
},
compoundVariants: [
{
tone: 'primary',
size: 'xl',
css: { fontSize: '24px', color: 'black' },
},
],
})({
tone: 'primary',
size: { '@initial': 'xl' },
})
expect(getCssText()).toBe(
`--sxs{--sxs:5 c-PJLV-lhHHWD-cv}@media{` +
`.c-PJLV-lhHHWD-cv{font-size:24px;color:black}` +
`}`
)
})
})
================================================
FILE: packages/core/tests/component-utils-and-types.js
================================================
import { createStitches } from '../src/index.js'
describe('Component: Utilities & Tokens', () => {
test('Utilities & Tokens of the same type', () => {
const { css, toString } = createStitches({
utils: {
px: (value) => ({
paddingLeft: value,
paddingRight: value,
}),
},
})
css({
px: 15,
})()
expect(toString()).toBe(`--sxs{--sxs:2 c-ccgTVz}@media{.c-ccgTVz{padding-left:15px;padding-right:15px}}`)
})
test('Utilities & Tokens of different types', () => {
const { css, toString } = createStitches({
utils: {
ftw: (value) => ({
color: value,
paddingLeft: value,
paddingRight: value,
}),
},
})
css({
ftw: '$sp',
})()
expect(toString()).toBe(`--sxs{--sxs:2 c-ilqzId}@media{.c-ilqzId{color:var(--colors-sp);padding-left:var(--space-sp);padding-right:var(--space-sp)}}`)
})
})
================================================
FILE: packages/core/tests/component-variants.js
================================================
import { createStitches } from '../src/index.js'
describe('Variants', () => {
const componentConfig = {
variants: {
color: {
blue: {
backgroundColor: 'dodgerblue',
color: 'white',
},
red: {
backgroundColor: 'tomato',
color: 'white',
},
},
size: {
small: {
fontSize: '16px',
},
large: {
fontSize: '24px',
},
},
level: {
1: {
padding: '0.5em',
},
2: {
padding: '1em',
},
},
},
compoundVariants: [
{
size: 'small',
color: 'blue',
css: {
transform: 'scale(1.2)',
},
},
],
}
test('Renders a component without any initial styles', () => {
const { css, getCssText } = createStitches()
const component = css(componentConfig)
const expression = component()
expect(expression.className).toBe('c-PJLV')
expect(getCssText()).toBe('')
})
test('Renders a component with 1 matching variant', () => {
const { css, getCssText } = createStitches()
const component = css(componentConfig)
const expression1 = component({ size: 'small' })
const expression1CssText = '.c-PJLV-Gaggi-size-small{font-size:16px}'
expect(expression1.className).toBe('c-PJLV c-PJLV-Gaggi-size-small')
expect(getCssText()).toBe(`--sxs{--sxs:3 c-PJLV-Gaggi-size-small}@media{${expression1CssText}}`)
const expression2 = component({ color: 'blue' })
const expression2CssText = '.c-PJLV-kaCQqN-color-blue{background-color:dodgerblue;color:white}'
expect(expression2.className).toBe('c-PJLV c-PJLV-kaCQqN-color-blue')
expect(getCssText()).toBe(`--sxs{--sxs:3 c-PJLV-Gaggi-size-small c-PJLV-kaCQqN-color-blue}@media{${expression1CssText + expression2CssText}}`)
})
test('Renders a component with 2 matching variants', () => {
const { css, getCssText } = createStitches()
const component = css({
variants: {
size: {
small: {
fontSize: '16px',
},
large: {
fontSize: '24px',
},
},
level: {
1: {
padding: '0.5em',
},
2: {
padding: '1em',
},
},
}
})
const expression = component({ size: 'small', level: 1 })
expect(expression.className).toBe('c-PJLV c-PJLV-Gaggi-size-small c-PJLV-iRwLiB-level-1')
const expressionSizeSmallCssText = '.c-PJLV-Gaggi-size-small{font-size:16px}'
const expressionLevel1CssText = '.c-PJLV-iRwLiB-level-1{padding:0.5em}'
expect(getCssText()).toBe(`--sxs{--sxs:3 c-PJLV-Gaggi-size-small c-PJLV-iRwLiB-level-1}@media{${expressionSizeSmallCssText + expressionLevel1CssText}}`)
})
test('Renders a component with a 2 matching variants and 1 matching compound', () => {
const { css, getCssText } = createStitches()
const component = css(componentConfig)
const expression = component({ size: 'small', color: 'blue' })
const expressionColorBlueCssText = '.c-PJLV-kaCQqN-color-blue{background-color:dodgerblue;color:white}'
const expressionSizeSmallCssText = '.c-PJLV-Gaggi-size-small{font-size:16px}'
const expressionCompoundCssText = '.c-PJLV-cChFtv-cv{transform:scale(1.2)}'
expect(expression.className).toBe(`c-PJLV c-PJLV-kaCQqN-color-blue c-PJLV-Gaggi-size-small c-PJLV-cChFtv-cv`)
expect(getCssText()).toBe(
`--sxs{--sxs:3 c-PJLV-kaCQqN-color-blue c-PJLV-Gaggi-size-small}@media{${
expressionColorBlueCssText + expressionSizeSmallCssText
}}--sxs{--sxs:5 c-PJLV-cChFtv-cv}@media{${
expressionCompoundCssText
}}`
)
})
})
describe('Variants with defaults', () => {
const componentConfig = {
variants: {
color: {
blue: {
backgroundColor: 'dodgerblue',
color: 'white',
},
red: {
backgroundColor: 'tomato',
color: 'white',
},
},
size: {
small: {
fontSize: '16px',
},
large: {
fontSize: '24px',
},
},
level: {
1: {
padding: '0.5em',
},
2: {
padding: '1em',
},
},
},
compoundVariants: [
{
size: 'small',
color: 'blue',
css: {
transform: 'scale(1.2)',
},
},
],
defaultVariants: {
size: 'small',
},
}
test('Renders a component with the default variant applied', () => {
const { css, getCssText } = createStitches()
const component = css(componentConfig)
const expression = component()
expect(expression.className).toBe('c-PJLV c-PJLV-Gaggi-size-small')
expect(getCssText()).toBe(`--sxs{--sxs:3 c-PJLV-Gaggi-size-small}@media{.c-PJLV-Gaggi-size-small{font-size:16px}}`)
})
test('Renders a component with the default variant explicitly applied', () => {
const { css, getCssText } = createStitches()
const component = css(componentConfig)
const expression = component({ size: 'small' })
expect(expression.className).toBe('c-PJLV c-PJLV-Gaggi-size-small')
expect(getCssText()).toBe(`--sxs{--sxs:3 c-PJLV-Gaggi-size-small}@media{.c-PJLV-Gaggi-size-small{font-size:16px}}`)
})
test('Renders a component with the non-default variant explicitly applied', () => {
const { css, getCssText } = createStitches()
const component = css(componentConfig)
const expression = component({ size: 'large' })
expect(expression.className).toBe('c-PJLV c-PJLV-hsYHIj-size-large')
expect(getCssText()).toBe(`--sxs{--sxs:3 c-PJLV-hsYHIj-size-large}@media{.c-PJLV-hsYHIj-size-large{font-size:24px}}`)
})
test('Renders a component with the default variant applied and a different variant explicitly applied', () => {
const { css, getCssText } = createStitches()
const component = css(componentConfig)
const expression = component({ level: 1 })
expect(expression.className).toBe('c-PJLV c-PJLV-Gaggi-size-small c-PJLV-iRwLiB-level-1')
expect(getCssText()).toBe(
`--sxs{--sxs:3 c-PJLV-Gaggi-size-small c-PJLV-iRwLiB-level-1}@media{` +
// implicit size:small
`.c-PJLV-Gaggi-size-small{font-size:16px}` +
// explicit level:1
`.c-PJLV-iRwLiB-level-1{padding:0.5em}` +
`}`,
)
})
test('Renders a component with the default variant applied, a different variant explicitly applied, and a compound applied', () => {
const { css, getCssText } = createStitches()
const component = css(componentConfig)
const expression = component({ color: 'blue' })
expect(expression.className).toBe('c-PJLV c-PJLV-kaCQqN-color-blue c-PJLV-Gaggi-size-small c-PJLV-cChFtv-cv')
expect(getCssText()).toBe(
`--sxs{--sxs:3 c-PJLV-kaCQqN-color-blue c-PJLV-Gaggi-size-small}@media{` +
// explicit color:blue
`.c-PJLV-kaCQqN-color-blue{background-color:dodgerblue;color:white}` +
// implicit size:small
`.c-PJLV-Gaggi-size-small{font-size:16px}` +
`}--sxs{--sxs:5 c-PJLV-cChFtv-cv}@media{` +
// compound color:blue + size:small
`.c-PJLV-cChFtv-cv{transform:scale(1.2)}` +
`}`,
)
})
test('Returns a component class without the default variant applied when stringified', () => {
const { css, getCssText } = createStitches()
const component = css(componentConfig)
const className = `${component}`
expect(className).toBe('c-PJLV')
expect(getCssText()).toBe('--sxs{--sxs:3 c-PJLV-Gaggi-size-small}@media{.c-PJLV-Gaggi-size-small{font-size:16px}}')
})
})
describe('Conditional variants', () => {
const config = {
media: {
bp1: '(max-width: 767px)',
bp2: '(min-width: 768px)',
},
}
/** Component with variants and compound variants */
const componentConfig = {
variants: {
color: {
blue: {
backgroundColor: 'dodgerblue',
color: 'white',
},
red: {
backgroundColor: 'tomato',
color: 'white',
},
},
size: {
small: {
fontSize: '16px',
},
large: {
fontSize: '24px',
},
},
level: {
1: {
padding: '0.5em',
},
2: {
padding: '1em',
},
},
},
compoundVariants: [
{
size: 'small',
color: 'blue',
css: {
transform: 'scale(1.2)',
},
},
],
}
test('Renders a component with no variant applied', () => {
const { css, getCssText } = createStitches(config)
const component = css(componentConfig)
const componentClassName = 'c-PJLV'
expect(component().className).toBe(componentClassName)
expect(getCssText()).toBe('')
})
test('Renders a component with one variant applied', () => {
const { css, getCssText } = createStitches(config)
const component = css(componentConfig)
const componentClassName = `c-PJLV`
const componentSmallClassName = `${componentClassName}-Gaggi-size-small`
const componentSmallCssText = `.${componentSmallClassName}{font-size:16px}`
expect(component({ size: 'small' }).className).toBe([componentClassName, componentSmallClassName].join(' '))
expect(getCssText()).toBe(`--sxs{--sxs:3 c-PJLV-Gaggi-size-small}@media{${componentSmallCssText}}`)
})
test('Renders a component with one conditional variant on one breakpoint applied', () => {
const { css, getCssText } = createStitches(config)
const component = css(componentConfig)
expect(component({ size: { '@bp1': 'small' } }).className).toBe(`c-PJLV c-PJLV-fHtTAQ-size-small`)
expect(getCssText()).toBe(
`--sxs{--sxs:4 c-PJLV-fHtTAQ-size-small}@media{` +
`@media (max-width: 767px){.c-PJLV-fHtTAQ-size-small{font-size:16px}}` +
`}`
)
})
test('Renders a component with one conditional variant on two breakpoints applied', () => {
const { css, getCssText } = createStitches(config)
const component = css(componentConfig)
const componentClassName = `c-PJLV`
const componentSmallBp1ClassName = `${componentClassName}-fHtTAQ-size-small`
const componentLargeBp2ClassName = `${componentClassName}-XwbVw-size-large`
const componentSmallBp1CssText = `@media (max-width: 767px){.${componentSmallBp1ClassName}{font-size:16px}}`
const componentLargeBp2CssText = `@media (min-width: 768px){.${componentLargeBp2ClassName}{font-size:24px}}`
expect(component({ size: { '@bp1': 'small', '@bp2': 'large' } }).className).toBe([componentClassName, componentSmallBp1ClassName, componentLargeBp2ClassName].join(' '))
expect(getCssText()).toBe(
`--sxs{--sxs:4 c-PJLV-fHtTAQ-size-small c-PJLV-XwbVw-size-large}@media{` +
componentSmallBp1CssText +
componentLargeBp2CssText +
`}`
)
})
test('Renders a component with a conditional variant repeatedly', () => {
const { css, getCssText } = createStitches(config)
const component = css(componentConfig)
expect(component({ size: { '@bp1': 'small', '@bp2': 'large' } }).className).toBe(`c-PJLV c-PJLV-fHtTAQ-size-small c-PJLV-XwbVw-size-large`)
expect(getCssText()).toBe(
`--sxs{--sxs:4 c-PJLV-fHtTAQ-size-small c-PJLV-XwbVw-size-large}@media{` +
`@media (max-width: 767px){.c-PJLV-fHtTAQ-size-small{font-size:16px}}` +
`@media (min-width: 768px){.c-PJLV-XwbVw-size-large{font-size:24px}}` +
`}`
)
expect(component({ size: { '@bp1': 'small', '@bp2': 'large' } }).className).toBe(`c-PJLV c-PJLV-fHtTAQ-size-small c-PJLV-XwbVw-size-large`)
expect(getCssText()).toBe(
`--sxs{--sxs:4 c-PJLV-fHtTAQ-size-small c-PJLV-XwbVw-size-large}@media{` +
`@media (max-width: 767px){.c-PJLV-fHtTAQ-size-small{font-size:16px}}` +
`@media (min-width: 768px){.c-PJLV-XwbVw-size-large{font-size:24px}}` +
`}`
)
expect(component({ size: { '@bp1': 'small', '@bp2': 'large' } }).className).toBe(`c-PJLV c-PJLV-fHtTAQ-size-small c-PJLV-XwbVw-size-large`)
expect(getCssText()).toBe(
`--sxs{--sxs:4 c-PJLV-fHtTAQ-size-small c-PJLV-XwbVw-size-large}@media{` +
`@media (max-width: 767px){.c-PJLV-fHtTAQ-size-small{font-size:16px}}` +
`@media (min-width: 768px){.c-PJLV-XwbVw-size-large{font-size:24px}}` +
`}`
)
})
test('Renders a component with a conditional inline variant repeatedly', () => {
{
const { css, getCssText } = createStitches(config)
const component = css({
variants: {
size: {
small: {
fontSize: '16px',
},
large: {
fontSize: '24px',
},
},
},
})
expect(
component({
size: {
'@media (width < 768px)': 'small',
'@media (width >= 768px)': 'large',
},
}).className,
).toBe('c-PJLV c-PJLV-gjWYHE-size-small c-PJLV-fzmUzy-size-large')
expect(getCssText()).toBe(
`--sxs{--sxs:4 c-PJLV-gjWYHE-size-small c-PJLV-fzmUzy-size-large}@media{` +
`@media (max-width:767.9375px){.c-PJLV-gjWYHE-size-small{font-size:16px}}` +
`@media (min-width:768px){.c-PJLV-fzmUzy-size-large{font-size:24px}}` +
`}`
)
}
{
const { css, getCssText } = createStitches(config)
const component = css({
variants: {
size: {
large: {
fontSize: '24px',
},
small: {
fontSize: '16px',
},
},
},
})
expect(
component({
size: {
'@media (width < 768px)': 'small',
'@media (width >= 768px)': 'large',
},
}).className,
).toBe('c-PJLV c-PJLV-gjWYHE-size-small c-PJLV-fzmUzy-size-large')
expect(getCssText()).toBe(
`--sxs{--sxs:4 c-PJLV-gjWYHE-size-small c-PJLV-fzmUzy-size-large}@media{` +
`@media (max-width:767.9375px){.c-PJLV-gjWYHE-size-small{font-size:16px}}` +
`@media (min-width:768px){.c-PJLV-fzmUzy-size-large{font-size:24px}}` +
`}`
)
}
})
})
describe('Variant pairing types', () => {
const componentConfigForBooleanVariant = {
'--component': true,
variants: {
testBoolean: {
true: {
'--test-boolean': true,
},
false: {
'--test-boolean': false,
}
}
}
}
test('Renders a variant with an inactive string variant', () => {
const { css, getCssText } = createStitches()
const component = css(componentConfigForBooleanVariant)
const rendering = component()
expect(rendering.className).toBe('c-foEXqW')
expect(getCssText()).toBe(`--sxs{--sxs:2 c-foEXqW}@media{` +
`.c-foEXqW{--component:true}` +
`}`)
})
test('Renders a variant with an active string variant', () => {
const { css, getCssText } = createStitches()
const component = css(componentConfigForBooleanVariant)
const rendering = component({ testBoolean: 'true' })
expect(rendering.className).toBe('c-foEXqW c-foEXqW-iloXEi-testBoolean-true')
expect(getCssText()).toBe(
`--sxs{--sxs:2 c-foEXqW}@media{` +
`.c-foEXqW{--component:true}` +
`}` +
`--sxs{--sxs:3 c-foEXqW-iloXEi-testBoolean-true}@media{` +
`.c-foEXqW-iloXEi-testBoolean-true{--test-boolean:true}` +
`}`
)
})
test('Renders a variant with an active boolean variant', () => {
const { css, getCssText } = createStitches()
const component = css(componentConfigForBooleanVariant)
const rendering = component({ testBoolean: true })
expect(rendering.className).toBe('c-foEXqW c-foEXqW-iloXEi-testBoolean-true')
expect(getCssText()).toBe(
`--sxs{--sxs:2 c-foEXqW}@media{` +
`.c-foEXqW{--component:true}` +
`}` +
`--sxs{--sxs:3 c-foEXqW-iloXEi-testBoolean-true}@media{` +
`.c-foEXqW-iloXEi-testBoolean-true{--test-boolean:true}` +
`}`
)
})
test('Renders a variant with an active responsive string variant', () => {
const { css, getCssText } = createStitches()
const component = css(componentConfigForBooleanVariant)
const rendering = component({ testBoolean: { '@media (min-width: 640px)': 'true' } })
expect(rendering.className).toBe('c-foEXqW c-foEXqW-brOaTK-testBoolean-true')
expect(getCssText()).toBe(
`--sxs{--sxs:2 c-foEXqW}@media{` +
`.c-foEXqW{--component:true}` +
`}` +
`--sxs{--sxs:4 c-foEXqW-brOaTK-testBoolean-true}@media{` +
`@media (min-width: 640px){` +
`.c-foEXqW-brOaTK-testBoolean-true{--test-boolean:true}` +
`}` +
`}`
)
})
test('Renders a variant with an active responsive boolean variant', () => {
const { css, getCssText } = createStitches()
const component = css(componentConfigForBooleanVariant)
const rendering = component({ testBoolean: { '@media (min-width: 640px)': true } })
expect(rendering.className).toBe('c-foEXqW c-foEXqW-brOaTK-testBoolean-true')
expect(getCssText()).toBe(
`--sxs{--sxs:2 c-foEXqW}@media{` +
`.c-foEXqW{--component:true}` +
`}` +
`--sxs{--sxs:4 c-foEXqW-brOaTK-testBoolean-true}@media{` +
`@media (min-width: 640px){` +
`.c-foEXqW-brOaTK-testBoolean-true{--test-boolean:true}` +
`}` +
`}`
)
})
})
================================================
FILE: packages/core/tests/global-atrules.js
================================================
import { createStitches } from '../src/index.js'
describe('Support @import', () => {
test('Authors can define an @import rule', () => {
const { globalCss, getCssText } = createStitches()
const importURL = `https://unpkg.com/sanitize.css@12.0.1/sanitize.css`
globalCss({
'@import': `"${importURL}"`,
})()
expect(getCssText()).toBe(`@import "${importURL}";`)
})
test('Authors can define multiple @import rules', () => {
const { globalCss, getCssText } = createStitches()
const importURL1 = `https://unpkg.com/sanitize.css@12.0.1/sanitize.css`
const importURL2 = `https://unpkg.com/sanitize.css@12.0.1/typography.css`
globalCss({
'@import': [`"${importURL1}"`, `"${importURL2}"`],
})()
expect(getCssText()).toBe(`@import "${importURL1}";@import "${importURL2}";`)
})
test('Authors can an @import rule without quotes', () => {
const { globalCss, getCssText } = createStitches()
const importURL = `https://unpkg.com/sanitize.css@12.0.1/sanitize.css`
globalCss({
'@import': importURL,
})()
expect(getCssText()).toBe(`@import "${importURL}";`)
})
})
describe('Support @font-face', () => {
test('Authors can define a @font-face rule', () => {
const { globalCss, getCssText } = createStitches()
globalCss({
'@font-face': {
fontFamily: 'system-ui',
fontStyle: 'normal',
fontWeight: 400,
src: [
`local(".SFNS-Regular")`,
`local(".SFNSText-Regular")`,
`local(".HelveticaNeueDeskInterface-Regular")`,
`local(".LucidaGrandeUI")`,
`local("Segoe UI")`,
`local("Ubuntu")`,
`local("Roboto-Regular")`,
`local("DroidSans")`,
`local("Tahoma")`,
],
},
})()
expect(getCssText()).toBe(
`--sxs{--sxs:1 PCbjJ}` +
`@media{` +
`@font-face{` +
`font-family:system-ui;` +
`font-style:normal;` +
`font-weight:400;` +
`src:local(".SFNS-Regular"),local(".SFNSText-Regular"),local(".HelveticaNeueDeskInterface-Regular"),local(".LucidaGrandeUI"),local("Segoe UI"),local("Ubuntu"),local("Roboto-Regular"),local("DroidSans"),local("Tahoma")` +
`}` +
`}`,
)
})
test('Authors can define multiple @font-face rules', () => {
const { globalCss, getCssText } = createStitches()
globalCss({
'@font-face': [
{
fontFamily: 'system-ui',
fontStyle: 'normal',
fontWeight: 400,
src: [
`local(".SFNS-Regular")`,
`local(".SFNSText-Regular")`,
`local(".HelveticaNeueDeskInterface-Regular")`,
`local(".LucidaGrandeUI")`,
`local("Segoe UI")`,
`local("Ubuntu")`,
`local("Roboto-Regular")`,
`local("DroidSans")`,
`local("Tahoma")`,
],
},
{
fontFamily: 'system-ui',
fontStyle: 'italic',
fontWeight: 400,
src: [
`local(".SFNS-Italic")`,
`local(".SFNSText-Italic")`,
`local(".HelveticaNeueDeskInterface-Italic")`,
`local(".LucidaGrandeUI")`,
`local("Segoe UI Italic")`,
`local("Ubuntu Italic")`,
`local("Roboto-Italic")`,
`local("DroidSans")`,
`local("Tahoma")`,
],
},
],
})()
expect(getCssText()).toBe(
`--sxs{--sxs:1 JJHhj}` +
`@media{` +
`@font-face{` +
`font-family:system-ui;` +
`font-style:normal;` +
`font-weight:400;` +
`src:local(".SFNS-Regular"),local(".SFNSText-Regular"),local(".HelveticaNeueDeskInterface-Regular"),local(".LucidaGrandeUI"),local("Segoe UI"),local("Ubuntu"),local("Roboto-Regular"),local("DroidSans"),local("Tahoma")` +
`}` +
`@font-face{` +
`font-family:system-ui;` +
`font-style:italic;` +
`font-weight:400;` +
`src:local(".SFNS-Italic"),local(".SFNSText-Italic"),local(".HelveticaNeueDeskInterface-Italic"),local(".LucidaGrandeUI"),local("Segoe UI Italic"),local("Ubuntu Italic"),local("Roboto-Italic"),local("DroidSans"),local("Tahoma")` +
`}` +
`}`
)
})
})
================================================
FILE: packages/core/tests/issue-450.js
================================================
import { createStitches } from '../src/index.js'
describe('Issue #450', () => {
test('Basic Tests', () => {
const getFreshComponents = () => {
const { css, getCssText } = createStitches()
const component1 = css({
variants: {
color: {
red: {
color: 'red',
},
blue: {
color: 'blue',
},
},
},
defaultVariants: {
color: 'red',
},
});
const component2 = css(component1, {
variants: {
color: {
orange: {
color: 'orange',
},
},
},
defaultVariants: {
color: 'orange',
},
});
const component3 = css(component2, {
variants: {
color: {
purple: {
color: 'rebeccapurple',
},
},
},
defaultVariants: {
color: 'purple',
},
})
return { component1, component2, component3, getCssText }
}
test('Render component1() as red, inherited from defaultVariants', () => {
const { component1, getCssText } = getFreshComponents()
const render = component1()
expect(render.className).toBe(`c-PJLV c-PJLV-gmqXFB-color-red`)
expect(getCssText()).toBe(`--sxs{--sxs:3 c-PJLV-gmqXFB-color-red}@media{.c-PJLV-gmqXFB-color-red{color:red}}`)
})
test('Render component1({ color: "blue" }) as blue, assigned from props', () => {
const { component1, getCssText } = getFreshComponents()
const render = component1({ color: 'blue' })
expect(render.className).toBe(`c-PJLV c-PJLV-kydkiA-color-blue`)
expect(getCssText()).toBe(`--sxs{--sxs:3 c-PJLV-kydkiA-color-blue}@media{.c-PJLV-kydkiA-color-blue{color:blue}}`)
})
test('Render component1({ color: "red" }) as red, assigned from props', () => {
const { component1, getCssText } = getFreshComponents()
const render = component1({ color: 'red' })
expect(render.className).toBe(`c-PJLV c-PJLV-gmqXFB-color-red`)
expect(getCssText()).toBe(`--sxs{--sxs:3 c-PJLV-gmqXFB-color-red}@media{.c-PJLV-gmqXFB-color-red{color:red}}`)
})
test('Render component1({ color: { "@media (width >= 640px)": "blue" } }) as red then blue, inherited from defaultVariants, assigned from props', () => {
const { component1, getCssText } = getFreshComponents()
const render = component1({ color: { '@media (min-width: 640px)': 'blue' } })
expect(render.className).toBe(`c-PJLV c-PJLV-gmqXFB-color-red c-PJLV-bBevdw-color-blue`)
expect(getCssText()).toBe(`--sxs{--sxs:3 c-PJLV-gmqXFB-color-red}@media{.c-PJLV-gmqXFB-color-red{color:red}}--sxs{--sxs:4 c-PJLV-bBevdw-color-blue}@media{@media (min-width: 640px){.c-PJLV-bBevdw-color-blue{color:blue}}}`)
})
test('Render component2() as orange, inherited from defaultVariants', () => {
const { component2, getCssText } = getFreshComponents()
const render = component2()
expect(render.className).toBe(`c-PJLV c-PJLV-vMTTG-color-orange`)
expect(getCssText()).toBe(`--sxs{--sxs:3 c-PJLV-vMTTG-color-orange}@media{.c-PJLV-vMTTG-color-orange{color:orange}}`)
})
test('Render component2({ color: { "@media (width >= 640px)": "blue" } }) as orange then blue, inherited from defaultVariants, assigned from props', () => {
const { component2, getCssText } = getFreshComponents()
const render = component2({ color: { '@media (min-width: 640px)': 'blue' } })
expect(render.className).toBe(`c-PJLV c-PJLV-bBevdw-color-blue c-PJLV-vMTTG-color-orange`)
expect(getCssText()).toBe(
`--sxs{--sxs:3 c-PJLV-vMTTG-color-orange}` + `@media{.c-PJLV-vMTTG-color-orange{color:orange}}` + `--sxs{--sxs:4 c-PJLV-bBevdw-color-blue}@media{` + `@media (min-width: 640px){.c-PJLV-bBevdw-color-blue{color:blue}}` + `}`,
)
})
})
test('Basic Tests ported from the React version', () => {
const getFreshComponents = () => {
const { css, getCssText } = createStitches()
const component1 = css({
'--component': 1,
variants: {
appearance: {
primary: {},
secondary: { '--appearance': 'secondary' },
},
color: {
red: {},
purple: { '--color': 'purple' },
lightBlue: { '--color': 'lightBlue' },
},
},
compoundVariants: [
{
appearance: 'secondary',
color: 'lightBlue',
css: {
'--compound': 'appearance secondary / color lightBlue',
},
},
],
defaultVariants: {
appearance: 'primary',
color: 'red',
},
})
const component2 = css(component1, {
'--component': 2,
'defaultVariants': {
appearance: 'secondary',
color: 'lightBlue',
},
})
return { component1, component2, getCssText }
}
test('Render component1()', () => {
const { component1, getCssText } = getFreshComponents()
const render = component1()
expect(render.className).toBe(`c-jyxqjt`)
expect(getCssText()).toBe(`--sxs{--sxs:2 c-jyxqjt}@media{.c-jyxqjt{--component:1}}`)
})
test('Render component1({ color: "lightBlue" })', () => {
const { component1, getCssText } = getFreshComponents()
const render = component1({ color: 'lightBlue' })
expect(render.className).toBe(`c-jyxqjt c-jyxqjt-ilDyRi-color-lightBlue`)
expect(getCssText()).toBe(
`--sxs{--sxs:2 c-jyxqjt}@media{` +
`.c-jyxqjt{--component:1}` +
`}` +
`--sxs{--sxs:3 c-jyxqjt-ilDyRi-color-lightBlue}@media{` +
`.c-jyxqjt-ilDyRi-color-lightBlue{--color:lightBlue}` +
`}`
)
})
test('Render component1({ appearance: "secondary" })', () => {
const { component1, getCssText } = getFreshComponents()
const render = component1({ appearance: 'secondary' })
expect(render.className).toBe(`c-jyxqjt c-jyxqjt-cOChOn-appearance-secondary`)
expect(getCssText()).toBe(
`--sxs{--sxs:2 c-jyxqjt}@media{` +
`.c-jyxqjt{--component:1}` +
`}` +
`--sxs{--sxs:3 c-jyxqjt-cOChOn-appearance-secondary}@media{` +
`.c-jyxqjt-cOChOn-appearance-secondary{--appearance:secondary}` +
`}`
)
})
test('Render component1({ appearance: "secondary", color: "lightBlue" })', () => {
const { component1, getCssText } = getFreshComponents()
const render = component1({ appearance: 'secondary', color: 'lightBlue' })
expect(render.className).toBe(`c-jyxqjt c-jyxqjt-cOChOn-appearance-secondary c-jyxqjt-ilDyRi-color-lightBlue c-jyxqjt-gYqlvA-cv`)
expect(getCssText()).toBe(
`--sxs{--sxs:2 c-jyxqjt}@media{` +
`.c-jyxqjt{--component:1}` +
`}` +
`--sxs{--sxs:3 c-jyxqjt-cOChOn-appearance-secondary c-jyxqjt-ilDyRi-color-lightBlue}@media{` +
`.c-jyxqjt-cOChOn-appearance-secondary{--appearance:secondary}` +
`.c-jyxqjt-ilDyRi-color-lightBlue{--color:lightBlue}` +
`}` +
`--sxs{--sxs:5 c-jyxqjt-gYqlvA-cv}@media{` +
`.c-jyxqjt-gYqlvA-cv{--compound:appearance secondary / color lightBlue}` +
`}`,
)
})
test('Render component2()', () => {
const { component2, getCssText } = getFreshComponents()
const render = component2()
expect(render.className).toBe(`c-jyxqjt c-dkRcuu c-jyxqjt-cOChOn-appearance-secondary c-jyxqjt-ilDyRi-color-lightBlue c-jyxqjt-gYqlvA-cv`)
expect(getCssText()).toBe(
`--sxs{--sxs:2 c-jyxqjt c-dkRcuu}@media{` +
`.c-jyxqjt{--component:1}` +
`.c-dkRcuu{--component:2}` +
`}` +
`--sxs{--sxs:3 c-jyxqjt-cOChOn-appearance-secondary c-jyxqjt-ilDyRi-color-lightBlue}@media{` +
`.c-jyxqjt-cOChOn-appearance-secondary{--appearance:secondary}` +
`.c-jyxqjt-ilDyRi-color-lightBlue{--color:lightBlue}` +
`}` +
`--sxs{--sxs:5 c-jyxqjt-gYqlvA-cv}@media{` +
`.c-jyxqjt-gYqlvA-cv{--compound:appearance secondary / color lightBlue}` +
`}`,
)
})
test('Render component2({ appearance: "secondary", color: "lightBlue" })', () => {
const { component2, getCssText } = getFreshComponents()
const render = component2({ appearance: 'secondary', color: 'lightBlue' })
expect(render.className).toBe(`c-jyxqjt c-dkRcuu c-jyxqjt-cOChOn-appearance-secondary c-jyxqjt-ilDyRi-color-lightBlue c-jyxqjt-gYqlvA-cv`)
expect(getCssText()).toBe(
`--sxs{--sxs:2 c-jyxqjt c-dkRcuu}@media{` +
`.c-jyxqjt{--component:1}` +
`.c-dkRcuu{--component:2}` +
`}` +
`--sxs{--sxs:3 c-jyxqjt-cOChOn-appearance-secondary c-jyxqjt-ilDyRi-color-lightBlue}@media{` +
`.c-jyxqjt-cOChOn-appearance-secondary{--appearance:secondary}` +
`.c-jyxqjt-ilDyRi-color-lightBlue{--color:lightBlue}` +
`}` +
`--sxs{--sxs:5 c-jyxqjt-gYqlvA-cv}@media{` +
`.c-jyxqjt-gYqlvA-cv{--compound:appearance secondary / color lightBlue}` +
`}`,
)
})
})
})
================================================
FILE: packages/core/tests/issue-492.js
================================================
import { createStitches } from '../src/index.js'
describe('Issue #492', () => {
test('Conditionally apply default variants as the @initial value', () => {
const { css, getCssText } = createStitches()
const component = css({
variants: {
sweet: {
caroline: {
'--sweet-caroline': true,
},
dreams: {
'--sweet-dreams': true,
},
},
},
defaultVariants: {
sweet: 'caroline',
},
})
const componentClassName = `c-PJLV`
const variantSweetCarolineClassName = `c-PJLV-bVaDOZ-sweet-caroline`
const variantSweetDreamsClassName = `c-PJLV-loBWDA-sweet-dreams`
const variantResponsiveSweetCarolineClassName = `c-PJLV-iuHgfx-sweet-caroline`
const variantResponsiveSweetDreamsClassName = `c-PJLV-cNdtIU-sweet-dreams`
/** Rendering of the component as-is. */
const rendering1 = component()
expect(
rendering1.className
).toBe(
`${componentClassName} ${variantSweetCarolineClassName}`
)
expect(
getCssText()
).toBe(
`--sxs{--sxs:3 ${variantSweetCarolineClassName}}@media{` +
`.${variantSweetCarolineClassName}{--sweet-caroline:true}` +
`}`
)
/** Rendering of the component as-is. */
const rendering2 = component({
sweet: {
'@media (min-width: 640px)': 'dreams',
},
})
expect(
rendering2.className
).toBe(
`${componentClassName} ${variantSweetCarolineClassName} ${variantResponsiveSweetDreamsClassName}`
)
expect(getCssText()).toBe(
`--sxs{--sxs:3 ${variantSweetCarolineClassName}}` +
`@media{.${variantSweetCarolineClassName}{--sweet-caroline:true}}` +
`--sxs{--sxs:4 ${variantResponsiveSweetDreamsClassName}}@media{` +
`@media (min-width: 640px){.${variantResponsiveSweetDreamsClassName}{--sweet-dreams:true}}` +
`}`,
)
/** Rendering of the component as-is. */
const rendering3 = component({
sweet: {
'@media (min-width: 640px)': 'caroline',
'@initial': 'dreams',
},
})
expect(rendering3.className).toBe(`${componentClassName} ${variantSweetDreamsClassName} ${variantResponsiveSweetCarolineClassName}`)
expect(getCssText()).toBe(
// initial variants
`--sxs{--sxs:3 ${variantSweetCarolineClassName} ${variantSweetDreamsClassName}}` +
`@media{.${variantSweetCarolineClassName}{--sweet-caroline:true}.${variantSweetDreamsClassName}{--sweet-dreams:true}}` +
// responsive variants
`--sxs{--sxs:4 ${variantResponsiveSweetDreamsClassName} ${variantResponsiveSweetCarolineClassName}}@media{` +
`@media (min-width: 640px){.${variantResponsiveSweetDreamsClassName}{--sweet-dreams:true}}` +
`@media (min-width: 640px){.${variantResponsiveSweetCarolineClassName}{--sweet-caroline:true}}` +
`}`,
)
})
test('Apply apply @initial styles first', () => {
const { css, getCssText } = createStitches()
const component = css({
'--rock': true,
variants: {
heavy: {
'iron-butterfly': {
'--weight-iron-butterfly': true,
},
'led-zeppelin': {
'--weight-led-zeppelin': true,
},
},
},
})
/** Rendering of the component as-is. */
const rendering1 = component({
heavy: {
'@media (min-width: 640px)': 'led-zeppelin',
'@initial': 'iron-butterfly',
},
})
const componentClassName = `c-evVBJo`
const variantInitialHeavyIronButterfly = `c-evVBJo-kiVNrc-heavy-iron-butterfly`
const variantMinWidth640LedZeppelin = `c-evVBJo-lgYcvN-heavy-led-zeppelin`
expect(
rendering1.className
).toBe(
`${componentClassName} ${variantInitialHeavyIronButterfly} ${variantMinWidth640LedZeppelin}`
)
expect(
getCssText()
).toBe('--sxs{--sxs:2 c-evVBJo}@media{.c-evVBJo{--rock:true}}--sxs{--sxs:3 c-evVBJo-kiVNrc-heavy-iron-butterfly}@media{.c-evVBJo-kiVNrc-heavy-iron-butterfly{--weight-iron-butterfly:true}}--sxs{--sxs:4 c-evVBJo-lgYcvN-heavy-led-zeppelin}@media{@media (min-width: 640px){.c-evVBJo-lgYcvN-heavy-led-zeppelin{--weight-led-zeppelin:true}}}')
})
})
================================================
FILE: packages/core/tests/issue-652.js
================================================
import { createStitches } from '../src/index.js'
describe('Issue #652', () => {
test('Applying both variants from the one default variant', () => {
const { css } = createStitches()
const component1 = css({
variants: {
hue: {
primary: {
color: 'red',
},
},
},
defaultVariants: {
hue: 'primary',
},
})
const component2 = css(component1, {
variants: {
hue: {
primary: {
color: 'blue',
},
},
},
})
const expression2 = component2()
expect(expression2.className).toBe(`c-PJLV c-PJLV-gmqXFB-hue-primary c-PJLV-kydkiA-hue-primary`)
})
})
================================================
FILE: packages/core/tests/issue-655.js
================================================
import { createStitches } from '../src/index.js'
describe('Issue #655', () => {
test('Applying both variants from the one default variant', () => {
const { css, getCssText } = createStitches()
css({
maxWidth: 'fit-content',
minWidth: 'fit-content',
})()
expect(getCssText()).toBe(
`--sxs{--sxs:2 c-dAAqmb}` +
`@media{.c-dAAqmb{` +
`max-width:-moz-fit-content;max-width:fit-content;` +
`min-width:-moz-fit-content;min-width:fit-content` +
`}}`
)
})
})
================================================
FILE: packages/core/tests/issue-725.js
================================================
import { createStitches } from '../src/index.js'
describe('Issue #725', () => {
test('Minimum reproduction of bug', () => {
const { css, getCssText } = createStitches({
media: {
tablet: `(min-width: 720px)`,
wide: `(min-width: 1536px)`,
},
})
const Flex = css({
variants: {
justify: {
end: { justifyContent: 'flex-end' },
},
},
})
Flex({
justify: {
'@tablet': 'end',
'@wide': 'end',
},
})
expect(getCssText()).toBe(`--sxs{--sxs:4 c-PJLV-jobbEJ-justify-end}@media{@media (min-width: 720px), (min-width: 1536px){.c-PJLV-jobbEJ-justify-end{justify-content:flex-end}}}`)
})
test('Combination with other variants', () => {
const { css, getCssText } = createStitches({
media: {
mobile: `(min-width: 420px)`,
tablet: `(min-width: 720px)`,
wide: `(min-width: 1536px)`,
},
})
const Flex = css({
variants: {
justify: {
end: { justifyContent: 'flex-end' },
start: { justifyContent: 'flex-start' },
},
color: {
red: { color: 'red' },
},
},
defaultVariants: {
color: 'red',
},
})
Flex({
justify: {
'@tablet': 'end',
'@wide': 'end',
'@mobile': 'start',
},
})
expect(getCssText()).toBe(
`--sxs{--sxs:3 c-PJLV-gmqXFB-color-red}@media{.c-PJLV-gmqXFB-color-red{color:red}}--sxs{--sxs:4 c-PJLV-jobbEJ-justify-end c-PJLV-kxjDkG-justify-start}@media{@media (min-width: 720px), (min-width: 1536px){.c-PJLV-jobbEJ-justify-end{justify-content:flex-end}}@media (min-width: 420px){.c-PJLV-kxjDkG-justify-start{justify-content:flex-start}}}`,
)
})
test('Test compound variants', () => {
const { css, getCssText } = createStitches({
media: {
bp1: `(min-width: 720px)`,
bp2: `(min-width: 1536px)`,
},
})
const Button = css({
variants: {
variant: {
red: { backgroundColor: 'tomato' },
blue: { backgroundColor: 'SkyBlue' },
},
disabled: {
true: { backgroundColor: 'gray' },
},
},
compoundVariants: [
{
variant: 'red',
disabled: true,
css: {
padding: 50,
},
},
],
})
Button({
variant: { '@bp1': 'red', '@bp2': 'red' },
disabled: { '@bp2': true, '@bp1': false },
})
expect(getCssText()).toBe(`--sxs{--sxs:4 c-PJLV-dJnmKC-disabled-true c-PJLV-gSmlSg-variant-red}@media{@media (min-width: 1536px){.c-PJLV-dJnmKC-disabled-true{background-color:gray}}@media (min-width: 720px), (min-width: 1536px){.c-PJLV-gSmlSg-variant-red{background-color:tomato}}}--sxs{--sxs:5 c-PJLV-elpmbs-cv}@media{@media (min-width: 1536px){@media (min-width: 720px), (min-width: 1536px){.c-PJLV-elpmbs-cv{padding:50px}}}}`)
})
})
================================================
FILE: packages/core/tests/issue-788.js
================================================
import { createStitches } from '../src/index.js'
describe('Issue #788', () => {
test('Test that a util with the name of a selector works in globalCss', () => {
const { globalCss, getCssText } = createStitches({
utils: {
p: (value) => ({
paddingTop: value,
paddingBottom: value,
paddingLeft: value,
paddingRight: value,
}),
},
})
globalCss({
p: {
color: 'red',
}
})()
expect(getCssText()).toBe(
`--sxs{--sxs:1 gllaiB}` +
`@media{p{` +
`color:red` +
`}}`
)
})
test('Test that a util with the name of a selector works in a component', () => {
const { css, getCssText } = createStitches({
utils: {
p: (value) => ({
paddingTop: value,
paddingBottom: value,
paddingLeft: value,
paddingRight: value,
}),
},
})
css({
p: 10
})()
expect(getCssText()).toBe(
`--sxs{--sxs:2 c-csWWxC}` +
`@media{.c-csWWxC{` +
`padding-top:10px;` +
`padding-bottom:10px;` +
`padding-left:10px;` +
`padding-right:10px` +
`}}`
)
})
})
================================================
FILE: packages/core/tests/issue-908.js
================================================
import { createStitches } from '../src/index.js'
const styleRule = `--sxs { --sxs:1 lTyTw fJmROo; }`;
const mediaRule = `@media { body { margin: auto; }`;
const createStylesheet = (...preloadedStyles) => {
let rules = [];
const insertRule = (rule, index = rules.length) => {
if (rule.startsWith('--sxs')) {
rules.splice(index, 0, {type: 1, cssText: rule});
}
if (rule.startsWith('@media')) {
rules.splice(index, 0, {type: 4, cssText: rule, cssRules: []});
}
};
preloadedStyles.forEach(insertRule);
return {
insertRule,
cssRules: rules
};
}
describe('Issue #908', () => {
test('Getting hydratable stylesheet', () => {
const { getCssText } = createStitches({
root: {
styleSheets: [createStylesheet(styleRule, mediaRule)]
}
});
expect(getCssText()).toBe(mediaRule)
})
})
================================================
FILE: packages/core/tests/issue-921.ts
================================================
import { createStitches, PropertyValue, CSS } from '../types/index'
const config = {
utils: {
background: (value: boolean | PropertyValue<'background'>) => {
if (typeof value === 'boolean') {
return value ? {
background: 'red'
} : {}
} else {
return {
background: value
}
}
}
},
}
const { css, globalCss } = createStitches(config)
globalCss({
html: {
background: true
},
body: {
background: 'green'
},
})
const Component = css({
background: true,
'> *': {
background: 'green'
}
})
Component({
background: 'green',
'> *': {
background: true
}
})
css(Component, {
background: 'green'
})
css(Component, {
background: true
})
const style: CSS = {
// @ts-expect-error
background: true
}
const style2: CSS<typeof config> = {
background: true
}
const style3: CSS<typeof config> = {
background: 'green'
}
================================================
FILE: packages/core/tests/issue-943.js
================================================
import { createStitches } from '../src/index.js'
describe('Issue #943', () => {
test('@font-face descriptors', () => {
const { globalCss, getCssText } = createStitches()
globalCss({
'@font-face': [
{
fontFamily: 'fallback-font',
ascentOverride: '83.6%',
descentOverride: '20.5%',
lineGapOverride: '0%',
advanceOverride: '10',
src: 'local(Arial)',
}
]
})()
expect(getCssText()).toBe('--sxs{--sxs:1 jGZRm}@media{@font-face{font-family:fallback-font;ascent-override:83.6%;descent-override:20.5%;line-gap-override:0%;advance-override:10;src:local(Arial)}}')
})
})
================================================
FILE: packages/core/tests/issue-999.js
================================================
import { createStitches } from '../src/index.js'
describe('Issue #519', () => {
test('locally scoped token works 1 time', () => {
const { css, getCssText } = createStitches({ prefix: 'fusion' })
css({
$$syntax: 'red',
h1: {
color: '$$syntax',
},
})()
expect(getCssText()).toBe(
`--sxs{--sxs:2 fusion-c-fjkySu}` +
`@media{` +
`.fusion-c-fjkySu{--fusion--syntax:red}` +
`.fusion-c-fjkySu h1{color:var(--fusion--syntax)}` +
`}`
)
})
test('locally scoped prefix-free token works 1 time', () => {
const { css, getCssText } = createStitches()
css({
$$syntax: 'red',
h1: {
color: '$$syntax',
},
})()
expect(getCssText()).toBe(
`--sxs{--sxs:2 c-fjkySu}` +
`@media{` +
`.c-fjkySu{---syntax:red}` +
`.c-fjkySu h1{color:var(---syntax)}` +
`}`
)
})
test('locally scoped token works 2 times', () => {
const { css, getCssText } = createStitches({ prefix: 'fusion' })
css({
$$syntax: 'red',
h1: {
color: '$$syntax',
},
h2: {
color: '$$syntax',
},
})()
expect(getCssText()).toBe(
`--sxs{--sxs:2 fusion-c-lkpaIy}` +
`@media{` +
`.fusion-c-lkpaIy{--fusion--syntax:red}` +
`.fusion-c-lkpaIy h1{color:var(--fusion--syntax)}` +
`.fusion-c-lkpaIy h2{color:var(--fusion--syntax)}` +
`}`
)
})
test('locally scoped prefix-free token works 2 times', () => {
const { css, getCssText } = createStitches()
css({
$$syntax: 'red',
h1: {
color: '$$syntax',
},
h2: {
color: '$$syntax',
},
})()
expect(getCssText()).toBe(
`--sxs{--sxs:2 c-lkpaIy}` +
`@media{` +
`.c-lkpaIy{---syntax:red}` +
`.c-lkpaIy h1{color:var(---syntax)}` +
`.c-lkpaIy h2{color:var(---syntax)}` +
`}`
)
})
test('locally scoped token works 3 times', () => {
const { css, getCssText } = createStitches({ prefix: 'fusion' })
css({
$$syntax: 'red',
h1: {
color: '$$syntax',
},
h2: {
color: '$$syntax',
},
h3: {
color: '$$syntax',
},
})()
expect(getCssText()).toBe(
`--sxs{--sxs:2 fusion-c-kbkiiL}` +
`@media{` +
`.fusion-c-kbkiiL{--fusion--syntax:red}` +
`.fusion-c-kbkiiL h1{color:var(--fusion--syntax)}` +
`.fusion-c-kbkiiL h2{color:var(--fusion--syntax)}` +
`.fusion-c-kbkiiL h3{color:var(--fusion--syntax)}` +
`}`
)
})
test('locally scoped prefix-free token works 3 times', () => {
const { css, getCssText } = createStitches()
css({
$$syntax: 'red',
h1: {
color: '$$syntax',
},
h2: {
color: '$$syntax',
},
h3: {
color: '$$syntax',
},
})()
expect(getCssText()).toBe(
`--sxs{--sxs:2 c-kbkiiL}` +
`@media{` +
`.c-kbkiiL{---syntax:red}` +
`.c-kbkiiL h1{color:var(---syntax)}` +
`.c-kbkiiL h2{color:var(---syntax)}` +
`.c-kbkiiL h3{color:var(---syntax)}` +
`}`
)
})
})
================================================
FILE: packages/core/tests/keyframes.js
================================================
import { createStitches } from '../src/index.js'
describe('Keyframes', () => {
test('Expected behavior for the keyframes() method', () => {
const { keyframes, toString } = createStitches()
const myKeyframes = keyframes({
'0%': {
opacity: '0',
},
'1%': {
opacity: '1',
},
})
expect(toString()).toBe('')
expect(`animation: 1s ${myKeyframes};`).toBe('animation: 1s k-hMEmNJ;')
expect(toString()).toBe(`--sxs{--sxs:1 k-hMEmNJ}@media{@keyframes k-hMEmNJ{0%{opacity:0}1%{opacity:1}}}`)
expect(myKeyframes.name).toBe('k-hMEmNJ')
})
})
================================================
FILE: packages/core/tests/theme.js
================================================
import { createStitches } from '../src/index.js'
describe('Theme', () => {
test('Expected behavior for the createTheme() method', () => {
const { createTheme, getCssText } = createStitches()
const myTheme = createTheme('my', {
colors: {
blue: 'dodgerblue',
},
})
expect(getCssText()).toBe('')
expect(`<div class="${myTheme}">`).toBe('<div class="my">')
expect(getCssText()).toBe(`--sxs{--sxs:0 my}@media{.my{--colors-blue:dodgerblue}}`)
expect(myTheme.className).toBe('my')
expect(myTheme.selector).toBe('.my')
})
test('createTheme() support for non-strings', () => {
{
const { getCssText } = createStitches({
theme: {
sizes: {
sm: 100,
md: 200,
lg: 500,
},
}
})
expect(getCssText()).toBe(
`--sxs{--sxs:0 t-egkarf}@media{` +
`:root,.t-egkarf{--sizes-sm:100;--sizes-md:200;--sizes-lg:500}` +
`}`
)
}
{
const { getCssText } = createStitches({
theme: {
sizes: {
sm: 100,
md: 'calc($sm * 3)',
lg: 'calc($md * 3)',
},
}
})
expect(getCssText()).toBe(
`--sxs{--sxs:0 t-eJkcVD}@media{` +
`:root,.t-eJkcVD{` +
`--sizes-sm:100;` +
`--sizes-md:calc(var(--sizes-sm) * 3);` +
`--sizes-lg:calc(var(--sizes-md) * 3)` +
`}` +
`}`
)
}
})
test('theme.className injects the theme', () => {
const { getCssText, createTheme } = createStitches()
const theme = createTheme({
colors: {
blue: '#0000ff',
}
})
expect(getCssText()).toBe(``)
void theme.className
expect(getCssText()).toBe(`--sxs{--sxs:0 t-gpVVQE}@media{.t-gpVVQE{--colors-blue:#0000ff}}`)
})
})
================================================
FILE: packages/core/tests/types.test.ts
================================================
import { createStitches } from '../types/index'
const { css, globalCss, keyframes } = createStitches({
utils: {
mx: () => ({
backgroundColor: 'red',
}),
},
theme: {
colors: {
hiContrast: 'hsl(200, 12%, 5%)',
loContrast: 'white',
gray100: 'hsl(206, 20%, 98.8%)',
gray200: 'hsl(206, 14%, 96.0%)',
gray300: 'hsl(206, 13%, 93.7%)',
gray400: 'hsl(206, 12%, 92.0%)',
gray500: 'hsl(206, 12%, 89.5%)',
gray600: 'hsl(206, 11%, 85.2%)',
gray700: 'hsl(206, 10%, 80.0%)',
gray800: 'hsl(206, 6%, 56.1%)',
gray900: 'hsl(206, 6%, 43.9%)',
pedro: '$gray100',
},
space: {
1: '10px',
2: '20px',
},
fontSizes: {
'1': '11px',
'2': '13px',
'3': '15px',
'4': '17px',
'5': '19px',
'6': '21px',
'7': '27px',
'8': '35px',
'9': '59px',
},
},
media: {
bp1: '(min-width: 620px)',
},
})
keyframes({
from: {
color: '$gray100',
},
to: {
color: '$gray900',
},
})
globalCss({
body: {
'@bp1': {
backgroundColor: '$gray100',
},
backgroundColor: '$gray300',
},
})
const PotatoButton = css({
variants: {
peace: {
mercy: {
color: 'MediumOrchid',
},
trust: {
color: 'Turquoise',
},
},
variant: {
blue: {
backgroundColor: '$gray100',
},
red: {
backgroundColor: '$gray100',
},
},
},
compoundVariants: [
{
variant: 'blue',
css: {
backgroundColor: '$gray200',
},
},
],
})
PotatoButton({
peace: 'mercy',
})
const two = css(PotatoButton, {
$$max: '2px',
width: '$$max',
variants: {
hue: {
green: {
width: '$$max',
backgroundColor: '$gray100',
},
red: {
backgroundColor: '$gray100',
},
},
love: {
free: {
color: 'ForestGreen',
},
good: {
color: 'GoldenRod',
},
}
},
defaultVariants: {
hue: 'red',
},
compoundVariants: [
{
hue: 'green',
css: {
backgroundColor: '$gray200',
},
},
],
})
two({
peace: 'mercy',
hue: 'green',
love: 'free',
})
PotatoButton({
className: '',
css: {
backgroundColor: '$gray300',
'@all': {
backgroundColor: 'initial'
},
'@bp1': {
backgroundColor: 'initial',
}
},
})
================================================
FILE: packages/core/tests/universal-autoprefixer.js
================================================
import { createStitches } from '../src/index.js'
describe('Autoprefixer', () => {
test('appearance', () => {
const { globalCss, toString } = createStitches()
globalCss({
'x-element': {
appearance: 'none',
},
})()
expect(toString()).toBe('--sxs{--sxs:1 kozGVo}@media{x-element{-webkit-appearance:none;appearance:none}}')
})
test('backfaceVisibility', () => {
const { globalCss, toString } = createStitches()
globalCss({
'x-element': {
backfaceVisibility: 'visible',
},
})()
expect(toString()).toBe('--sxs{--sxs:1 gaCVoe}@media{x-element{-webkit-backface-visibility:visible;backface-visibility:visible}}')
})
test('backgroundClip', () => {
const { globalCss, toString } = createStitches()
globalCss({
'x-element': {
backgroundClip: 'border-box',
},
})()
expect(toString()).toBe('--sxs{--sxs:1 gIcRdw}@media{x-element{-webkit-background-clip:border-box;background-clip:border-box}}')
})
test('clipPath', () => {
const { globalCss, toString } = createStitches()
globalCss({
'x-element': {
clipPath: 'circle(40%)',
},
})()
expect(toString()).toBe('--sxs{--sxs:1 ccZNl}@media{x-element{-webkit-clip-path:circle(40%);clip-path:circle(40%)}}')
})
test('hyphens', () => {
const { globalCss, toString } = createStitches()
globalCss({
'x-element': {
hyphens: 'none',
},
})()
expect(toString()).toBe('--sxs{--sxs:1 cRggdz}@media{x-element{-webkit-hyphens:none;hyphens:none}}')
})
test('maskImage', () => {
const { globalCss, toString } = createStitches()
globalCss({
'x-element': {
maskImage: 'none',
},
})()
expect(toString()).toBe('--sxs{--sxs:1 eNBesV}@media{x-element{-webkit-mask-image:none;mask-image:none}}')
})
test('tabSize', () => {
const { globalCss, toString } = createStitches()
globalCss({
'x-element': {
tabSize: 'none',
},
})()
expect(toString()).toBe('--sxs{--sxs:1 kPCdtQ}@media{x-element{tab-size:none}}')
})
test('textSizeAdjust', () => {
const { globalCss, toString } = createStitches()
globalCss({
'x-element': {
textSizeAdjust: '100%',
},
})()
expect(toString()).toBe('--sxs{--sxs:1 gVFtip}@media{x-element{-webkit-text-size-adjust:100%;text-size-adjust:100%}}')
})
test('userSelect', () => {
const { globalCss, toString } = createStitches()
globalCss({
'x-element': {
userSelect: 'none',
},
})()
expect(toString()).toBe('--sxs{--sxs:1 kEUokv}@media{x-element{-webkit-user-select:none;user-select:none}}')
})
})
================================================
FILE: packages/core/tests/universal-functionality.js
================================================
import { createStitches } from '../src/index.js'
describe('Configuration', () => {
let stitches
test('createStitches()', () => {
const { css, globalCss } = createStitches()
expect(css).toBeInstanceOf(Function)
expect(globalCss).toBeInstanceOf(Function)
})
test('createStitches({})', () => {
const { css, globalCss } = createStitches({})
expect(css).toBeInstanceOf(Function)
expect(globalCss).toBeInstanceOf(Function)
})
test('createStitches({ prefix: "fusion-" })', () => {
const { config } = createStitches({ prefix: 'fusion-' })
expect(config.prefix).toBe('fusion-')
})
test('createStitches({ theme })', () => {
const themeConfig = { colors: { blue: 'dodgerblue' } }
const { config } = createStitches({ theme: themeConfig })
expect(config.theme).toBe(themeConfig)
})
})
================================================
FILE: packages/core/tests/universal-logical-properties.js
================================================
import { createStitches } from '../src/index.js'
describe('Logical Properties', () => {
test('marginBlock', () => {
const { globalCss, toString } = createStitches()
globalCss({
'x-element': {
marginBlock: 0,
},
'y-element': {
marginBlock: 10,
},
'z-element': {
marginBlock: '5px 10px',
},
})()
expect(toString()).toBe(
`--sxs{--sxs:1 IvBLl}@media{` +
`x-element{margin-block-start:0;margin-block-end:0}` +
`y-element{margin-block-start:10px;margin-block-end:10px}` +
`z-element{margin-block-start:5px;margin-block-end:10px}` +
`}`
)
})
test('marginInline', () => {
const { globalCss, toString } = createStitches()
globalCss({
'x-element': {
marginInline: 0,
},
'y-element': {
marginInline: 10,
},
'z-element': {
marginInline: '5px 10px',
},
})()
expect(toString()).toBe(
`--sxs{--sxs:1 eNPHKF}@media{` +
`x-element{margin-inline-start:0;margin-inline-end:0}` +
`y-element{margin-inline-start:10px;margin-inline-end:10px}` +
`z-element{margin-inline-start:5px;margin-inline-end:10px}` +
`}`
)
})
test('paddingBlock', () => {
const { globalCss, toString } = createStitches()
globalCss({
'x-element': {
paddingBlock: 0,
},
'y-element': {
paddingBlock: 10,
},
'z-element': {
paddingBlock: '5px 10px',
},
})()
expect(toString()).toBe(
`--sxs{--sxs:1 kcHEgy}@media{` +
`x-element{padding-block-start:0;padding-block-end:0}` +
`y-element{padding-block-start:10px;padding-block-end:10px}` +
`z-element{padding-block-start:5px;padding-block-end:10px}` +
`}`
)
})
test('paddingInline', () => {
const { globalCss, toString } = createStitches()
globalCss({
'x-element': {
paddingInline: 0,
},
'y-element': {
paddingInline: 10,
},
'z-element': {
paddingInline: '5px 10px',
},
})()
expect(toString()).toBe(
`--sxs{--sxs:1 cVrbiG}@media{` +
`x-element{padding-inline-start:0;padding-inline-end:0}` +
`y-element{padding-inline-start:10px;padding-inline-end:10px}` +
`z-element{padding-inline-start:5px;padding-inline-end:10px}` +
`}`
)
})
})
================================================
FILE: packages/core/tests/universal-nesting.js
================================================
import { createStitches } from '../src/index.js'
describe('Nesting', () => {
test('Authors can define globalCss nesting rules', () => {
const { globalCss, getCssText } = createStitches()
globalCss({
'body > a': {
'&:not(:hover)': {
textDecoration: 'none',
},
},
})()
expect(getCssText()).toBe(`--sxs{--sxs:1 hXsVBR}@media{body > a:not(:hover){text-decoration:none}}`)
})
test('Authors can define component nesting rules', () => {
const { css, getCssText } = createStitches()
css({
'&:not(:hover)': {
textDecoration: 'none',
},
})()
expect(getCssText()).toBe(`--sxs{--sxs:2 c-dweUti}@media{.c-dweUti:not(:hover){text-decoration:none}}`)
})
test('Authors can define recursive globalCss nesting rules', () => {
const { globalCss, getCssText } = createStitches()
globalCss({
p: {
'margin': 0,
'& ~ &': {
marginTop: 0,
},
},
})()
expect(getCssText()).toBe(`--sxs{--sxs:1 gkqgGk}@media{p{margin:0}p ~ p{margin-top:0}}`)
})
test('Authors can define recursive component nesting rules', () => {
const { css, getCssText } = createStitches()
css({
'margin': 0,
'& ~ &': {
marginTop: 0,
},
})()
expect(getCssText()).toBe(`--sxs{--sxs:2 c-fuGzNQ}@media{.c-fuGzNQ{margin
gitextract_6f0xewf7/ ├── .codesandbox/ │ └── ci.json ├── .editorconfig ├── .github/ │ ├── CODEOWNERS │ ├── ISSUE_TEMPLATE/ │ │ ├── bug_report.md │ │ └── feature_request.md │ └── workflows/ │ └── test.yml ├── .gitignore ├── .npmrc ├── .task/ │ ├── build-csstype.js │ ├── build.js │ ├── internal/ │ │ ├── child_process.js │ │ ├── color.js │ │ ├── dirs.js │ │ ├── expect.js │ │ ├── fs-test.js │ │ ├── fs.js │ │ ├── js.js │ │ ├── js.transformDestructuring.js │ │ ├── js.transformIIFE.js │ │ ├── js.transformModulesToCJS.js │ │ ├── js.transformOptionalCatchToParam.js │ │ ├── process.js │ │ ├── readline.js │ │ └── url.js │ ├── lint-esm.js │ ├── lint-pkg.js │ ├── lint-tsc.js │ ├── lint.js │ ├── release.js │ ├── test-coverage.js │ └── test.js ├── .vscode/ │ ├── package.schema.json │ └── settings.json ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── LICENSE.md ├── README.md ├── package.json ├── packages/ │ ├── core/ │ │ ├── README.md │ │ ├── package.json │ │ ├── src/ │ │ │ ├── ThemeToken.js │ │ │ ├── convert/ │ │ │ │ ├── toCamelCase.js │ │ │ │ ├── toCssRules.js │ │ │ │ ├── toHash.js │ │ │ │ ├── toHyphenCase.js │ │ │ │ ├── toPolyfilledValue.js │ │ │ │ ├── toResolvedMediaQueryRanges.js │ │ │ │ ├── toResolvedSelectors.js │ │ │ │ ├── toSizingValue.js │ │ │ │ ├── toTailDashed.js │ │ │ │ └── toTokenizedValue.js │ │ │ ├── createStitches.js │ │ │ ├── default/ │ │ │ │ └── defaultThemeMap.js │ │ │ ├── features/ │ │ │ │ ├── createTheme.js │ │ │ │ ├── css.js │ │ │ │ ├── globalCss.js │ │ │ │ └── keyframes.js │ │ │ ├── index.js │ │ │ ├── sheet.js │ │ │ └── utility/ │ │ │ ├── createMemo.js │ │ │ ├── define.js │ │ │ ├── getCachedConfig.js │ │ │ ├── getNonce.js │ │ │ ├── hasNames.js │ │ │ ├── hasOwn.js │ │ │ ├── index.d.ts │ │ │ └── internal.js │ │ ├── tests/ │ │ │ ├── basic.js │ │ │ ├── component-composition.js │ │ │ ├── component-conditions.js │ │ │ ├── component-css-prop.js │ │ │ ├── component-empty-variants.js │ │ │ ├── component-utils-and-types.js │ │ │ ├── component-variants.js │ │ │ ├── global-atrules.js │ │ │ ├── issue-450.js │ │ │ ├── issue-492.js │ │ │ ├── issue-652.js │ │ │ ├── issue-655.js │ │ │ ├── issue-725.js │ │ │ ├── issue-788.js │ │ │ ├── issue-908.js │ │ │ ├── issue-921.ts │ │ │ ├── issue-943.js │ │ │ ├── issue-999.js │ │ │ ├── keyframes.js │ │ │ ├── theme.js │ │ │ ├── types.test.ts │ │ │ ├── universal-autoprefixer.js │ │ │ ├── universal-functionality.js │ │ │ ├── universal-logical-properties.js │ │ │ ├── universal-nesting.js │ │ │ ├── universal-numeric-values.js │ │ │ ├── universal-polyfill-prefixed-values.js │ │ │ ├── universal-prefix.js │ │ │ ├── universal-serialization.js │ │ │ ├── universal-tokens.js │ │ │ ├── universal-with-typing.ts │ │ │ ├── utils.js │ │ │ └── with-config-api.js │ │ └── types/ │ │ ├── config.d.ts │ │ ├── css-util.d.ts │ │ ├── css.d.ts │ │ ├── index.d.ts │ │ ├── stitches.d.ts │ │ ├── styled-component.d.ts │ │ ├── theme.d.ts │ │ └── util.d.ts │ ├── react/ │ │ ├── README.md │ │ ├── package.json │ │ ├── src/ │ │ │ ├── createStitches.js │ │ │ ├── features/ │ │ │ │ └── styled.js │ │ │ ├── index.js │ │ │ └── utility/ │ │ │ └── getCachedConfig.js │ │ ├── tests/ │ │ │ ├── basic.js │ │ │ ├── component-as-props.js │ │ │ ├── component-className-prop.js │ │ │ ├── component-composition.js │ │ │ ├── component-css-prop-react.js │ │ │ ├── component-css-prop.js │ │ │ ├── component-repeated-variants.js │ │ │ ├── component-variants.js │ │ │ ├── component.js │ │ │ ├── issue-416.js │ │ │ ├── issue-450.js │ │ │ ├── issue-555.js │ │ │ ├── issue-671-forwardRef.js │ │ │ ├── issue-671.js │ │ │ ├── issue-737.js │ │ │ ├── issue-921.tsx │ │ │ ├── issue-943.js │ │ │ ├── react.js │ │ │ ├── types.test.tsx │ │ │ ├── universal-serialization.js │ │ │ ├── variants.js │ │ │ └── with-config-api.js │ │ └── types/ │ │ ├── config.d.ts │ │ ├── css-util.d.ts │ │ ├── css.d.ts │ │ ├── index.d.ts │ │ ├── stitches.d.ts │ │ ├── styled-component.d.ts │ │ ├── theme.d.ts │ │ └── util.d.ts │ ├── stringify/ │ │ ├── README.md │ │ ├── package.json │ │ ├── src/ │ │ │ ├── Array.js │ │ │ ├── getResolvedSelectors.js │ │ │ ├── index.js │ │ │ └── toCase.js │ │ ├── tests/ │ │ │ ├── at-rule-font-face.js │ │ │ ├── at-rule-import.js │ │ │ ├── at-rule-keyframes.js │ │ │ ├── index.js │ │ │ ├── internal-toCase.js │ │ │ ├── nesting-rules.js │ │ │ └── replacer-prefixing.js │ │ └── types/ │ │ └── index.d.ts │ └── test/ │ ├── .eslintrc │ ├── Issue-803-core.ts │ ├── Issue-803-react.ts │ ├── Issue-813-core.ts │ ├── Issue-813-react.ts │ ├── built-types/ │ │ ├── Issue-803-core.d.ts │ │ ├── Issue-803-react.d.ts │ │ ├── Issue-813-core.d.ts │ │ ├── Issue-813-react.d.ts │ │ ├── built-types-test.tsx │ │ ├── index.d.ts │ │ ├── issue-749-react.d.ts │ │ └── stitches.config.d.ts │ ├── index.tsx │ ├── issue-749-react.tsx │ ├── package.json │ ├── stitches.config.ts │ ├── traces/ │ │ ├── trace.json │ │ └── types.json │ └── tsconfig.json ├── tsconfig.json └── tslint.json
SYMBOL INDEX (1489 symbols across 36 files)
FILE: .task/build-csstype.js
class ModifiedString (line 47) | class ModifiedString extends String {
method replace (line 48) | replace(matcher, replacer) {
method withAddedColorFunctions (line 55) | get withAddedColorFunctions() {
method withAddedLicense (line 62) | get withAddedLicense() {
method withCamelCasedColors (line 71) | get withCamelCasedColors() {
method withFixedColorScheme (line 86) | get withFixedColorScheme() {
method withFixedFontFamily (line 93) | get withFixedFontFamily() {
method withFixedNestingSelectors (line 100) | get withFixedNestingSelectors() {
method withFixedProperties (line 119) | get withFixedProperties() {
method withFixedPropertyAtRule (line 141) | get withFixedPropertyAtRule() {
method withFixedMatchingSelector (line 151) | get withFixedMatchingSelector() {
method withFixedStretchValue (line 158) | get withFixedStretchValue() {
method withFixedSystemColor (line 165) | get withFixedSystemColor() {
method withoutGenericTyping (line 177) | get withoutGenericTyping() {
method withoutBrowserComments (line 190) | get withoutBrowserComments() {
method withoutImplicitGlobals (line 197) | get withoutImplicitGlobals() {
method withoutNarrowingPatch (line 204) | get withoutNarrowingPatch() {
method withoutNeverInChain (line 228) | get withoutNeverInChain() {
method withoutPropertyValueTyping (line 235) | get withoutPropertyValueTyping() {
method withoutTrailingSpace (line 242) | get withoutTrailingSpace() {
method withoutVendorTyping (line 252) | get withoutVendorTyping() {
FILE: .task/build.js
method transform (line 23) | async transform(code, smap) {
method transform (line 35) | async transform(code, smap) {
method transform (line 53) | async transform(code, smap) {
FILE: .task/internal/expect.js
function expect (line 3) | function expect(actual) {
function toBeInstanceOf (line 26) | function toBeInstanceOf(actual, expected) {
function toNotBeInstanceOf (line 39) | function toNotBeInstanceOf(actual, expected) {
function toThrow (line 52) | async function toThrow(actualFunction, expected) {
function toNotThrow (line 72) | async function toNotThrow(actualFunction, expected) {
FILE: .task/internal/fs.js
method readFileJson (line 26) | async readFileJson(/** @type {import('fs').PathLike | fs.FileHandle} */ ...
FILE: .task/internal/js.js
method clone (line 162) | clone(overrides) {
method find (line 187) | find(type, call) {
method parent (line 208) | parent() {
method parentNode (line 216) | parentNode() {
method keyOfParent (line 230) | keyOfParent() {
method keyOfParentNode (line 238) | keyOfParentNode() {
method remove (line 253) | remove() {
method replaceWith (line 262) | replaceWith(...nodes) {
method toString (line 278) | toString() {
FILE: .task/internal/url.js
class URL (line 3) | class URL extends globalThis.URL {
method to (line 4) | to(/** @type {string[]} */ ...segments) {
method includes (line 8) | includes(/** @type {string} */ searchString, position = 0) {
method endsWith (line 12) | endsWith(/** @type {string} */ searchString, length = this.href.length) {
method dir (line 16) | get dir() {
method ospathname (line 20) | get ospathname() {
method from (line 24) | static from(/** @type {string | globalThis.URL} */ segment, /** @type ...
FILE: packages/core/src/ThemeToken.js
class ThemeToken (line 3) | class ThemeToken {
method constructor (line 4) | constructor(token, value, scale, prefix) {
method computedValue (line 11) | get computedValue() {
method variable (line 15) | get variable() {
method toString (line 19) | toString() {
FILE: packages/core/src/createStitches.js
method reset (line 47) | reset() {
FILE: packages/core/src/features/createTheme.js
method className (line 58) | get className() {
FILE: packages/core/src/features/keyframes.js
method name (line 37) | get name() {
FILE: packages/core/src/sheet.js
method insertRule (line 126) | insertRule(cssText, index) {
method cssText (line 132) | get cssText() {
function injector (line 207) | function injector() {
FILE: packages/core/src/utility/index.d.ts
type Primitive (line 1) | type Primitive = string | number | bigint | boolean | symbol
type Optional (line 2) | type Optional = Primitive | void
type Try (line 3) | type Try<T1, T2, T3 = never, T4 = T1> = T1 extends T2 ? T4 : T3
type ToString (line 5) | type ToString<T1 = ''> = `${T1}`
type ToTailDashed (line 6) | type ToTailDashed<T1> = T1 extends '' ? '' : `${T1}-`
FILE: packages/core/types/config.d.ts
type Prefix (line 7) | type Prefix<T = ''> = T extends string ? T: string
type Media (line 10) | type Media<T = {}> = {
type Theme (line 15) | type Theme<T = {}> = {
type ThemeMap (line 37) | type ThemeMap<T = {}> = {
type Utils (line 42) | type Utils<T = {}> = {
type DefaultThemeMap (line 50) | interface DefaultThemeMap {
type CreateStitches (line 194) | type CreateStitches = {
FILE: packages/core/types/css-util.d.ts
type CSSProperties (line 9) | interface CSSProperties extends Native.StandardLonghandProperties, Nativ...
type ValueByPropertyName (line 11) | type ValueByPropertyName<PropertyName> = PropertyName extends keyof CSSP...
type TokenByPropertyName (line 13) | type TokenByPropertyName<PropertyName, Theme, ThemeMap> = PropertyName e...
type TokenByScaleName (line 15) | type TokenByScaleName<ScaleName, Theme> = ScaleName extends keyof Theme ...
type CSS (line 18) | type CSS<
type $$PropertyValue (line 109) | type $$PropertyValue = typeof $$PropertyValue
type $$ScaleValue (line 115) | type $$ScaleValue = typeof $$ScaleValue
type $$ThemeValue (line 119) | type $$ThemeValue = typeof $$ThemeValue
type WithPropertyValue (line 122) | type WithPropertyValue<T> = {
type WithScaleValue (line 125) | type WithScaleValue<T> = {
FILE: packages/core/types/css.d.ts
type StandardLonghandProperties (line 27) | interface StandardLonghandProperties {
type StandardShorthandProperties (line 3165) | interface StandardShorthandProperties {
type StandardProperties (line 3504) | interface StandardProperties
type SvgProperties (line 3509) | interface SvgProperties {
type Properties (line 3572) | interface Properties
type StandardLonghandPropertiesHyphen (line 3576) | interface StandardLonghandPropertiesHyphen {
type StandardShorthandPropertiesHyphen (line 6714) | interface StandardShorthandPropertiesHyphen {
type StandardPropertiesHyphen (line 7053) | interface StandardPropertiesHyphen
type SvgPropertiesHyphen (line 7058) | interface SvgPropertiesHyphen {
type PropertiesHyphen (line 7121) | interface PropertiesHyphen
type StandardLonghandPropertiesFallback (line 7125) | type StandardLonghandPropertiesFallback = {
type StandardShorthandPropertiesFallback (line 7129) | type StandardShorthandPropertiesFallback = {
type StandardPropertiesFallback (line 7133) | interface StandardPropertiesFallback
type SvgPropertiesFallback (line 7138) | type SvgPropertiesFallback = {
type PropertiesFallback (line 7142) | interface PropertiesFallback
type StandardLonghandPropertiesHyphenFallback (line 7146) | type StandardLonghandPropertiesHyphenFallback = {
type StandardShorthandPropertiesHyphenFallback (line 7150) | type StandardShorthandPropertiesHyphenFallback = {
type StandardPropertiesHyphenFallback (line 7154) | interface StandardPropertiesHyphenFallback
type SvgPropertiesHyphenFallback (line 7159) | type SvgPropertiesHyphenFallback = {
type PropertiesHyphenFallback (line 7163) | interface PropertiesHyphenFallback
type AtRules (line 7167) | type AtRules =
type AdvancedPseudos (line 7182) | type AdvancedPseudos =
type SimplePseudos (line 7200) | type SimplePseudos =
type Pseudos (line 7268) | type Pseudos = AdvancedPseudos | SimplePseudos;
type HtmlAttributes (line 7270) | type HtmlAttributes =
type SvgAttributes (line 7496) | type SvgAttributes =
type Globals (line 7742) | type Globals = "inherit" | "initial" | "revert" | "unset";
type OnlyObject (line 7744) | type OnlyObject = Record<never,never>
type OnlyNumber (line 7746) | type OnlyNumber = number & OnlyObject
type OnlyString (line 7748) | type OnlyString = string & OnlyObject
type OnlyStringNumeric (line 7750) | type OnlyStringNumeric = (number | string) & OnlyObject
type AlignContent (line 7753) | type AlignContent = DataType.ContentDistribution | DataType.ContentPosit...
type AlignItems (line 7755) | type AlignItems = DataType.SelfPosition | "baseline" | "normal" | "stret...
type AlignSelf (line 7757) | type AlignSelf = DataType.SelfPosition | "auto" | "baseline" | "normal" ...
type AlignTracks (line 7759) | type AlignTracks = DataType.ContentDistribution | DataType.ContentPositi...
type All (line 7761) | type All = never;
type Animation (line 7763) | type Animation = DataType.SingleAnimation | OnlyString;
type AnimationDelay (line 7765) | type AnimationDelay = never | OnlyString;
type AnimationDirection (line 7767) | type AnimationDirection = DataType.SingleAnimationDirection | OnlyString;
type AnimationDuration (line 7769) | type AnimationDuration = never | OnlyString;
type AnimationFillMode (line 7771) | type AnimationFillMode = DataType.SingleAnimationFillMode | OnlyString;
type AnimationIterationCount (line 7773) | type AnimationIterationCount = "infinite" | OnlyStringNumeric;
type AnimationName (line 7775) | type AnimationName = "none" | OnlyString;
type AnimationPlayState (line 7777) | type AnimationPlayState = "paused" | "running" | OnlyString;
type AnimationTimingFunction (line 7779) | type AnimationTimingFunction = DataType.EasingFunction | OnlyString;
type Appearance (line 7781) | type Appearance = DataType.CompatAuto | "auto" | "menulist-button" | "no...
type AspectRatio (line 7783) | type AspectRatio = "auto" | OnlyString;
type Azimuth (line 7785) | type Azimuth =
type BackdropFilter (line 7800) | type BackdropFilter = "none" | OnlyString;
type BackfaceVisibility (line 7802) | type BackfaceVisibility = "hidden" | "visible";
type Background (line 7804) | type Background = DataType.FinalBgLayer | OnlyString;
type BackgroundAttachment (line 7806) | type BackgroundAttachment = DataType.Attachment | OnlyString;
type BackgroundBlendMode (line 7808) | type BackgroundBlendMode = DataType.BlendMode | OnlyString;
type BackgroundClip (line 7810) | type BackgroundClip = DataType.Box | OnlyString;
type BackgroundColor (line 7812) | type BackgroundColor = DataType.Color;
type BackgroundImage (line 7814) | type BackgroundImage = "none" | OnlyString;
type BackgroundOrigin (line 7816) | type BackgroundOrigin = DataType.Box | OnlyString;
type BackgroundPosition (line 7818) | type BackgroundPosition = DataType.BgPosition | OnlyString;
type BackgroundPositionX (line 7820) | type BackgroundPositionX = "center" | "left" | "right" | "x-end" | "x-st...
type BackgroundPositionY (line 7822) | type BackgroundPositionY = "bottom" | "center" | "top" | "y-end" | "y-st...
type BackgroundRepeat (line 7824) | type BackgroundRepeat = DataType.RepeatStyle | OnlyString;
type BackgroundSize (line 7826) | type BackgroundSize = DataType.BgSize | OnlyString;
type BlockOverflow (line 7828) | type BlockOverflow = "clip" | "ellipsis" | OnlyString;
type BlockSize (line 7830) | type BlockSize =
type Border (line 7839) | type Border = DataType.LineWidth | DataType.LineStyle | DataType.Color |...
type BorderBlock (line 7841) | type BorderBlock = DataType.LineWidth | DataType.LineStyle | DataType.Co...
type BorderBlockColor (line 7843) | type BorderBlockColor = DataType.Color | OnlyString;
type BorderBlockEnd (line 7845) | type BorderBlockEnd = DataType.LineWidth | DataType.LineStyle | DataType...
type BorderBlockEndColor (line 7847) | type BorderBlockEndColor = DataType.Color;
type BorderBlockEndStyle (line 7849) | type BorderBlockEndStyle = DataType.LineStyle;
type BorderBlockEndWidth (line 7851) | type BorderBlockEndWidth = DataType.LineWidth;
type BorderBlockStart (line 7853) | type BorderBlockStart = DataType.LineWidth | DataType.LineStyle | DataTy...
type BorderBlockStartColor (line 7855) | type BorderBlockStartColor = DataType.Color;
type BorderBlockStartStyle (line 7857) | type BorderBlockStartStyle = DataType.LineStyle;
type BorderBlockStartWidth (line 7859) | type BorderBlockStartWidth = DataType.LineWidth;
type BorderBlockStyle (line 7861) | type BorderBlockStyle = DataType.LineStyle;
type BorderBlockWidth (line 7863) | type BorderBlockWidth = DataType.LineWidth;
type BorderBottom (line 7865) | type BorderBottom = DataType.LineWidth | DataType.LineStyle | DataType.C...
type BorderBottomColor (line 7867) | type BorderBottomColor = DataType.Color;
type BorderBottomLeftRadius (line 7869) | type BorderBottomLeftRadius = OnlyStringNumeric;
type BorderBottomRightRadius (line 7871) | type BorderBottomRightRadius = OnlyStringNumeric;
type BorderBottomStyle (line 7873) | type BorderBottomStyle = DataType.LineStyle;
type BorderBottomWidth (line 7875) | type BorderBottomWidth = DataType.LineWidth;
type BorderCollapse (line 7877) | type BorderCollapse = "collapse" | "separate";
type BorderColor (line 7879) | type BorderColor = DataType.Color | OnlyString;
type BorderEndEndRadius (line 7881) | type BorderEndEndRadius = OnlyStringNumeric;
type BorderEndStartRadius (line 7883) | type BorderEndStartRadius = OnlyStringNumeric;
type BorderImage (line 7885) | type BorderImage = "none" | "repeat" | "round" | "space" | "stretch" | O...
type BorderImageOutset (line 7887) | type BorderImageOutset = OnlyStringNumeric;
type BorderImageRepeat (line 7889) | type BorderImageRepeat = "repeat" | "round" | "space" | "stretch" | Only...
type BorderImageSlice (line 7891) | type BorderImageSlice = OnlyStringNumeric;
type BorderImageSource (line 7893) | type BorderImageSource = "none" | OnlyString;
type BorderImageWidth (line 7895) | type BorderImageWidth = "auto" | OnlyStringNumeric;
type BorderInline (line 7897) | type BorderInline = DataType.LineWidth | DataType.LineStyle | DataType.C...
type BorderInlineColor (line 7899) | type BorderInlineColor = DataType.Color | OnlyString;
type BorderInlineEnd (line 7901) | type BorderInlineEnd = DataType.LineWidth | DataType.LineStyle | DataTyp...
type BorderInlineEndColor (line 7903) | type BorderInlineEndColor = DataType.Color;
type BorderInlineEndStyle (line 7905) | type BorderInlineEndStyle = DataType.LineStyle;
type BorderInlineEndWidth (line 7907) | type BorderInlineEndWidth = DataType.LineWidth;
type BorderInlineStart (line 7909) | type BorderInlineStart = DataType.LineWidth | DataType.LineStyle | DataT...
type BorderInlineStartColor (line 7911) | type BorderInlineStartColor = DataType.Color;
type BorderInlineStartStyle (line 7913) | type BorderInlineStartStyle = DataType.LineStyle;
type BorderInlineStartWidth (line 7915) | type BorderInlineStartWidth = DataType.LineWidth;
type BorderInlineStyle (line 7917) | type BorderInlineStyle = DataType.LineStyle;
type BorderInlineWidth (line 7919) | type BorderInlineWidth = DataType.LineWidth;
type BorderLeft (line 7921) | type BorderLeft = DataType.LineWidth | DataType.LineStyle | DataType.Col...
type BorderLeftColor (line 7923) | type BorderLeftColor = DataType.Color;
type BorderLeftStyle (line 7925) | type BorderLeftStyle = DataType.LineStyle;
type BorderLeftWidth (line 7927) | type BorderLeftWidth = DataType.LineWidth;
type BorderRadius (line 7929) | type BorderRadius = OnlyStringNumeric;
type BorderRight (line 7931) | type BorderRight = DataType.LineWidth | DataType.LineStyle | DataType.Co...
type BorderRightColor (line 7933) | type BorderRightColor = DataType.Color;
type BorderRightStyle (line 7935) | type BorderRightStyle = DataType.LineStyle;
type BorderRightWidth (line 7937) | type BorderRightWidth = DataType.LineWidth;
type BorderSpacing (line 7939) | type BorderSpacing = OnlyStringNumeric;
type BorderStartEndRadius (line 7941) | type BorderStartEndRadius = OnlyStringNumeric;
type BorderStartStartRadius (line 7943) | type BorderStartStartRadius = OnlyStringNumeric;
type BorderStyle (line 7945) | type BorderStyle = DataType.LineStyle | OnlyString;
type BorderTop (line 7947) | type BorderTop = DataType.LineWidth | DataType.LineStyle | DataType.Colo...
type BorderTopColor (line 7949) | type BorderTopColor = DataType.Color;
type BorderTopLeftRadius (line 7951) | type BorderTopLeftRadius = OnlyStringNumeric;
type BorderTopRightRadius (line 7953) | type BorderTopRightRadius = OnlyStringNumeric;
type BorderTopStyle (line 7955) | type BorderTopStyle = DataType.LineStyle;
type BorderTopWidth (line 7957) | type BorderTopWidth = DataType.LineWidth;
type BorderWidth (line 7959) | type BorderWidth = DataType.LineWidth | OnlyString;
type Bottom (line 7961) | type Bottom = "auto" | OnlyStringNumeric;
type BoxAlign (line 7963) | type BoxAlign = "baseline" | "center" | "end" | "start" | "stretch";
type BoxDecorationBreak (line 7965) | type BoxDecorationBreak = "clone" | "slice";
type BoxDirection (line 7967) | type BoxDirection = "inherit" | "normal" | "reverse";
type BoxFlex (line 7969) | type BoxFlex = OnlyNumber;
type BoxFlexGroup (line 7971) | type BoxFlexGroup = OnlyNumber;
type BoxLines (line 7973) | type BoxLines = "multiple" | "single";
type BoxOrdinalGroup (line 7975) | type BoxOrdinalGroup = OnlyNumber;
type BoxOrient (line 7977) | type BoxOrient = "block-axis" | "horizontal" | "inherit" | "inline-axis"...
type BoxPack (line 7979) | type BoxPack = "center" | "end" | "justify" | "start";
type BoxShadow (line 7981) | type BoxShadow = "none" | OnlyString;
type BoxSizing (line 7983) | type BoxSizing = "border-box" | "content-box";
type BreakAfter (line 7985) | type BreakAfter =
type BreakBefore (line 8001) | type BreakBefore =
type BreakInside (line 8017) | type BreakInside = "auto" | "avoid" | "avoid-column" | "avoid-page" | "a...
type CaptionSide (line 8019) | type CaptionSide = "block-end" | "block-start" | "bottom" | "inline-end"...
type CaretColor (line 8021) | type CaretColor = DataType.Color | "auto";
type Clear (line 8023) | type Clear = "both" | "inline-end" | "inline-start" | "left" | "none" | ...
type Clip (line 8025) | type Clip = "auto" | OnlyString;
type ClipPath (line 8027) | type ClipPath = DataType.GeometryBox | "none" | OnlyString;
type Color (line 8029) | type Color = DataType.Color;
type ColorAdjust (line 8031) | type ColorAdjust = "economy" | "exact";
type ColorScheme (line 8033) | type ColorScheme = "dark" | "light" | "light dark" | "normal" | OnlyString;
type ColumnCount (line 8035) | type ColumnCount = "auto" | OnlyNumber;
type ColumnFill (line 8037) | type ColumnFill = "auto" | "balance";
type ColumnGap (line 8039) | type ColumnGap = "normal" | OnlyStringNumeric;
type ColumnRule (line 8041) | type ColumnRule = DataType.LineWidth | DataType.LineStyle | DataType.Col...
type ColumnRuleColor (line 8043) | type ColumnRuleColor = DataType.Color;
type ColumnRuleStyle (line 8045) | type ColumnRuleStyle = DataType.LineStyle | OnlyString;
type ColumnRuleWidth (line 8047) | type ColumnRuleWidth = DataType.LineWidth | OnlyString;
type ColumnSpan (line 8049) | type ColumnSpan = "all" | "none";
type ColumnWidth (line 8051) | type ColumnWidth = number | "auto";
type Columns (line 8053) | type Columns = "auto" | OnlyStringNumeric;
type Contain (line 8055) | type Contain = "content" | "layout" | "none" | "paint" | "size" | "stric...
type Content (line 8057) | type Content = DataType.ContentList | "none" | "normal" | OnlyString;
type ContentVisibility (line 8059) | type ContentVisibility = "auto" | "hidden" | "visible";
type CounterIncrement (line 8061) | type CounterIncrement = "none" | OnlyString;
type CounterReset (line 8063) | type CounterReset = "none" | OnlyString;
type CounterSet (line 8065) | type CounterSet = "none" | OnlyString;
type Cursor (line 8067) | type Cursor =
type Direction (line 8106) | type Direction = "ltr" | "rtl";
type Display (line 8108) | type Display =
type EmptyCells (line 8118) | type EmptyCells = "hide" | "show";
type Filter (line 8120) | type Filter = "none" | OnlyString;
type Flex (line 8122) | type Flex = "auto" | "content" | "stretch" | "fit-content" | "max-conten...
type FlexBasis (line 8124) | type FlexBasis =
type FlexDirection (line 8134) | type FlexDirection = "column" | "column-reverse" | "row" | "row-reverse";
type FlexFlow (line 8136) | type FlexFlow = "column" | "column-reverse" | "nowrap" | "row" | "row-re...
type FlexGrow (line 8138) | type FlexGrow = OnlyStringNumeric;
type FlexShrink (line 8140) | type FlexShrink = OnlyNumber;
type FlexWrap (line 8142) | type FlexWrap = "nowrap" | "wrap" | "wrap-reverse";
type Float (line 8144) | type Float = "inline-end" | "inline-start" | "left" | "none" | "right";
type Font (line 8146) | type Font = "caption" | "icon" | "menu" | "message-box" | "small-caption...
type FontFamily (line 8148) | type FontFamily = DataType.GenericFamily | OnlyString;
type FontFeatureSettings (line 8150) | type FontFeatureSettings = "normal" | OnlyString;
type FontKerning (line 8152) | type FontKerning = "auto" | "none" | "normal";
type FontLanguageOverride (line 8154) | type FontLanguageOverride = "normal" | OnlyString;
type FontOpticalSizing (line 8156) | type FontOpticalSizing = "auto" | "none";
type FontSize (line 8158) | type FontSize = DataType.AbsoluteSize | "larger" | "smaller" | OnlyStrin...
type FontSizeAdjust (line 8160) | type FontSizeAdjust = "none" | OnlyNumber;
type FontSmooth (line 8162) | type FontSmooth = DataType.AbsoluteSize | number | "always" | "auto" | "...
type FontStretch (line 8164) | type FontStretch = DataType.FontStretchAbsolute;
type FontStyle (line 8166) | type FontStyle = "italic" | "normal" | "oblique" | OnlyString;
type FontSynthesis (line 8168) | type FontSynthesis = "none" | "style" | "weight" | OnlyString;
type FontVariant (line 8170) | type FontVariant =
type FontVariantAlternates (line 8202) | type FontVariantAlternates = "historical-forms" | "normal" | OnlyString;
type FontVariantCaps (line 8204) | type FontVariantCaps = "all-petite-caps" | "all-small-caps" | "normal" |...
type FontVariantEastAsian (line 8206) | type FontVariantEastAsian = DataType.EastAsianVariantValues | "full-widt...
type FontVariantLigatures (line 8208) | type FontVariantLigatures =
type FontVariantNumeric (line 8221) | type FontVariantNumeric =
type FontVariantPosition (line 8233) | type FontVariantPosition = "normal" | "sub" | "super";
type FontVariationSettings (line 8235) | type FontVariationSettings = "normal" | OnlyString;
type FontWeight (line 8237) | type FontWeight = DataType.FontWeightAbsolute | "bolder" | "lighter";
type ForcedColorAdjust (line 8239) | type ForcedColorAdjust = "auto" | "none";
type Gap (line 8241) | type Gap = "normal" | OnlyStringNumeric;
type Grid (line 8243) | type Grid = "none" | OnlyString;
type GridArea (line 8245) | type GridArea = DataType.GridLine | OnlyString;
type GridAutoColumns (line 8247) | type GridAutoColumns = DataType.TrackBreadth | OnlyString;
type GridAutoFlow (line 8249) | type GridAutoFlow = "column" | "dense" | "row" | OnlyString;
type GridAutoRows (line 8251) | type GridAutoRows = DataType.TrackBreadth | OnlyString;
type GridColumn (line 8253) | type GridColumn = DataType.GridLine | OnlyString;
type GridColumnEnd (line 8255) | type GridColumnEnd = DataType.GridLine;
type GridColumnGap (line 8257) | type GridColumnGap = OnlyStringNumeric;
type GridColumnStart (line 8259) | type GridColumnStart = DataType.GridLine;
type GridGap (line 8261) | type GridGap = OnlyStringNumeric;
type GridRow (line 8263) | type GridRow = DataType.GridLine | OnlyString;
type GridRowEnd (line 8265) | type GridRowEnd = DataType.GridLine;
type GridRowGap (line 8267) | type GridRowGap = OnlyStringNumeric;
type GridRowStart (line 8269) | type GridRowStart = DataType.GridLine;
type GridTemplate (line 8271) | type GridTemplate = "none" | OnlyString;
type GridTemplateAreas (line 8273) | type GridTemplateAreas = "none" | OnlyString;
type GridTemplateColumns (line 8275) | type GridTemplateColumns = DataType.TrackBreadth | "none" | "subgrid" | ...
type GridTemplateRows (line 8277) | type GridTemplateRows = DataType.TrackBreadth | "none" | "subgrid" | Onl...
type HangingPunctuation (line 8279) | type HangingPunctuation = "allow-end" | "first" | "force-end" | "last" |...
type Height (line 8281) | type Height =
type Hyphens (line 8290) | type Hyphens = "auto" | "manual" | "none";
type ImageOrientation (line 8292) | type ImageOrientation = "flip" | "from-image" | OnlyString;
type ImageRendering (line 8294) | type ImageRendering = "auto" | "crisp-edges" | "pixelated";
type ImageResolution (line 8296) | type ImageResolution = "from-image" | OnlyString;
type ImeMode (line 8298) | type ImeMode = "active" | "auto" | "disabled" | "inactive" | "normal";
type InitialLetter (line 8300) | type InitialLetter = "normal" | OnlyStringNumeric;
type InlineSize (line 8302) | type InlineSize =
type Inset (line 8311) | type Inset = "auto" | OnlyStringNumeric;
type InsetBlock (line 8313) | type InsetBlock = "auto" | OnlyStringNumeric;
type InsetBlockEnd (line 8315) | type InsetBlockEnd = "auto" | OnlyStringNumeric;
type InsetBlockStart (line 8317) | type InsetBlockStart = "auto" | OnlyStringNumeric;
type InsetInline (line 8319) | type InsetInline = "auto" | OnlyStringNumeric;
type InsetInlineEnd (line 8321) | type InsetInlineEnd = "auto" | OnlyStringNumeric;
type InsetInlineStart (line 8323) | type InsetInlineStart = "auto" | OnlyStringNumeric;
type Isolation (line 8325) | type Isolation = "auto" | "isolate";
type JustifyContent (line 8327) | type JustifyContent = DataType.ContentDistribution | DataType.ContentPos...
type JustifyItems (line 8329) | type JustifyItems = DataType.SelfPosition | "baseline" | "left" | "legac...
type JustifySelf (line 8331) | type JustifySelf = DataType.SelfPosition | "auto" | "baseline" | "left" ...
type JustifyTracks (line 8333) | type JustifyTracks = DataType.ContentDistribution | DataType.ContentPosi...
type Left (line 8335) | type Left = "auto" | OnlyStringNumeric;
type LetterSpacing (line 8337) | type LetterSpacing = "normal" | OnlyStringNumeric;
type LineBreak (line 8339) | type LineBreak = "anywhere" | "auto" | "loose" | "normal" | "strict";
type LineClamp (line 8341) | type LineClamp = "none" | OnlyNumber;
type LineHeight (line 8343) | type LineHeight = "normal" | OnlyStringNumeric;
type LineHeightStep (line 8345) | type LineHeightStep = number;
type ListStyle (line 8347) | type ListStyle = "inside" | "none" | "outside" | OnlyString;
type ListStyleImage (line 8349) | type ListStyleImage = "none" | OnlyString;
type ListStylePosition (line 8351) | type ListStylePosition = "inside" | "outside";
type ListStyleType (line 8353) | type ListStyleType = "none" | OnlyString;
type Margin (line 8355) | type Margin = "auto" | OnlyStringNumeric;
type MarginBlock (line 8357) | type MarginBlock = "auto" | OnlyStringNumeric;
type MarginBlockEnd (line 8359) | type MarginBlockEnd = "auto" | OnlyStringNumeric;
type MarginBlockStart (line 8361) | type MarginBlockStart = "auto" | OnlyStringNumeric;
type MarginBottom (line 8363) | type MarginBottom = "auto" | OnlyStringNumeric;
type MarginInline (line 8365) | type MarginInline = "auto" | OnlyStringNumeric;
type MarginInlineEnd (line 8367) | type MarginInlineEnd = "auto" | OnlyStringNumeric;
type MarginInlineStart (line 8369) | type MarginInlineStart = "auto" | OnlyStringNumeric;
type MarginLeft (line 8371) | type MarginLeft = "auto" | OnlyStringNumeric;
type MarginRight (line 8373) | type MarginRight = "auto" | OnlyStringNumeric;
type MarginTop (line 8375) | type MarginTop = "auto" | OnlyStringNumeric;
type Mask (line 8377) | type Mask = DataType.MaskLayer | OnlyString;
type MaskBorder (line 8379) | type MaskBorder = "alpha" | "luminance" | "none" | "repeat" | "round" | ...
type MaskBorderMode (line 8381) | type MaskBorderMode = "alpha" | "luminance";
type MaskBorderOutset (line 8383) | type MaskBorderOutset = OnlyStringNumeric;
type MaskBorderRepeat (line 8385) | type MaskBorderRepeat = "repeat" | "round" | "space" | "stretch" | OnlyS...
type MaskBorderSlice (line 8387) | type MaskBorderSlice = OnlyStringNumeric;
type MaskBorderSource (line 8389) | type MaskBorderSource = "none" | OnlyString;
type MaskBorderWidth (line 8391) | type MaskBorderWidth = "auto" | OnlyStringNumeric;
type MaskClip (line 8393) | type MaskClip = DataType.GeometryBox | "no-clip" | OnlyString;
type MaskComposite (line 8395) | type MaskComposite = DataType.CompositingOperator | OnlyString;
type MaskImage (line 8397) | type MaskImage = "none" | OnlyString;
type MaskMode (line 8399) | type MaskMode = DataType.MaskingMode | OnlyString;
type MaskOrigin (line 8401) | type MaskOrigin = DataType.Box | "margin-box" | OnlyString;
type MaskPosition (line 8403) | type MaskPosition = DataType.Position | OnlyString;
type MaskRepeat (line 8405) | type MaskRepeat = DataType.RepeatStyle | OnlyString;
type MaskSize (line 8407) | type MaskSize = DataType.BgSize | OnlyString;
type MaskType (line 8409) | type MaskType = "alpha" | "luminance";
type MathStyle (line 8411) | type MathStyle = "compact" | "normal";
type MaxBlockSize (line 8413) | type MaxBlockSize =
type MaxHeight (line 8422) | type MaxHeight =
type MaxInlineSize (line 8432) | type MaxInlineSize =
type MaxLines (line 8441) | type MaxLines = "none" | OnlyNumber;
type MaxWidth (line 8443) | type MaxWidth =
type MinBlockSize (line 8453) | type MinBlockSize =
type MinHeight (line 8462) | type MinHeight =
type MinInlineSize (line 8472) | type MinInlineSize =
type MinWidth (line 8481) | type MinWidth =
type MixBlendMode (line 8492) | type MixBlendMode = DataType.BlendMode;
type Offset (line 8494) | type Offset = DataType.Position | DataType.GeometryBox | "auto" | "none"...
type OffsetDistance (line 8496) | type OffsetDistance = OnlyStringNumeric;
type OffsetPath (line 8498) | type OffsetPath = DataType.GeometryBox | "none" | OnlyString;
type OffsetRotate (line 8500) | type OffsetRotate = "auto" | "reverse" | OnlyString;
type ObjectFit (line 8502) | type ObjectFit = "contain" | "cover" | "fill" | "none" | "scale-down";
type ObjectPosition (line 8504) | type ObjectPosition = DataType.Position;
type OffsetAnchor (line 8506) | type OffsetAnchor = DataType.Position | "auto";
type Opacity (line 8508) | type Opacity = OnlyStringNumeric;
type Order (line 8510) | type Order = OnlyNumber;
type Orphans (line 8512) | type Orphans = OnlyNumber;
type Outline (line 8514) | type Outline = DataType.Color | DataType.LineStyle | DataType.LineWidth ...
type OutlineColor (line 8516) | type OutlineColor = DataType.Color | "invert";
type OutlineOffset (line 8518) | type OutlineOffset = number;
type OutlineStyle (line 8520) | type OutlineStyle = DataType.LineStyle | "auto" | OnlyString;
type OutlineWidth (line 8522) | type OutlineWidth = DataType.LineWidth;
type Overflow (line 8524) | type Overflow = "auto" | "clip" | "hidden" | "scroll" | "visible" | Only...
type OverflowAnchor (line 8526) | type OverflowAnchor = "auto" | "none";
type OverflowBlock (line 8528) | type OverflowBlock = "auto" | "clip" | "hidden" | "scroll" | "visible";
type OverflowClipBox (line 8530) | type OverflowClipBox = "content-box" | "padding-box";
type OverflowClipMargin (line 8532) | type OverflowClipMargin = DataType.VisualBox | OnlyStringNumeric;
type OverflowInline (line 8534) | type OverflowInline = "auto" | "clip" | "hidden" | "scroll" | "visible";
type OverflowWrap (line 8536) | type OverflowWrap = "anywhere" | "break-word" | "normal";
type OverflowX (line 8538) | type OverflowX = "auto" | "clip" | "hidden" | "scroll" | "visible";
type OverflowY (line 8540) | type OverflowY = "auto" | "clip" | "hidden" | "scroll" | "visible";
type OverscrollBehavior (line 8542) | type OverscrollBehavior = "auto" | "contain" | "none" | OnlyString;
type OverscrollBehaviorBlock (line 8544) | type OverscrollBehaviorBlock = "auto" | "contain" | "none";
type OverscrollBehaviorInline (line 8546) | type OverscrollBehaviorInline = "auto" | "contain" | "none";
type OverscrollBehaviorX (line 8548) | type OverscrollBehaviorX = "auto" | "contain" | "none";
type OverscrollBehaviorY (line 8550) | type OverscrollBehaviorY = "auto" | "contain" | "none";
type Padding (line 8552) | type Padding = OnlyStringNumeric;
type PaddingBlock (line 8554) | type PaddingBlock = OnlyStringNumeric;
type PaddingBlockEnd (line 8556) | type PaddingBlockEnd = OnlyStringNumeric;
type PaddingBlockStart (line 8558) | type PaddingBlockStart = OnlyStringNumeric;
type PaddingBottom (line 8560) | type PaddingBottom = OnlyStringNumeric;
type PaddingInline (line 8562) | type PaddingInline = OnlyStringNumeric;
type PaddingInlineEnd (line 8564) | type PaddingInlineEnd = OnlyStringNumeric;
type PaddingInlineStart (line 8566) | type PaddingInlineStart = OnlyStringNumeric;
type PaddingLeft (line 8568) | type PaddingLeft = OnlyStringNumeric;
type PaddingRight (line 8570) | type PaddingRight = OnlyStringNumeric;
type PaddingTop (line 8572) | type PaddingTop = OnlyStringNumeric;
type PageBreakAfter (line 8574) | type PageBreakAfter = "always" | "auto" | "avoid" | "left" | "recto" | "...
type PageBreakBefore (line 8576) | type PageBreakBefore = "always" | "auto" | "avoid" | "left" | "recto" | ...
type PageBreakInside (line 8578) | type PageBreakInside = "auto" | "avoid";
type PaintOrder (line 8580) | type PaintOrder = "fill" | "markers" | "normal" | "stroke" | OnlyString;
type Perspective (line 8582) | type Perspective = number | "none";
type PerspectiveOrigin (line 8584) | type PerspectiveOrigin = DataType.Position;
type PlaceContent (line 8586) | type PlaceContent = DataType.ContentDistribution | DataType.ContentPosit...
type PlaceItems (line 8588) | type PlaceItems = DataType.SelfPosition | "baseline" | "normal" | "stret...
type PlaceSelf (line 8590) | type PlaceSelf = DataType.SelfPosition | "auto" | "baseline" | "normal" ...
type PointerEvents (line 8592) | type PointerEvents = "all" | "auto" | "fill" | "inherit" | "none" | "pai...
type Position (line 8594) | type Position = "absolute" | "fixed" | "relative" | "static" | "sticky";
type Quotes (line 8596) | type Quotes = "auto" | "none" | OnlyString;
type Resize (line 8598) | type Resize = "block" | "both" | "horizontal" | "inline" | "none" | "ver...
type Right (line 8600) | type Right = "auto" | OnlyStringNumeric;
type Rotate (line 8602) | type Rotate = "none" | OnlyString;
type RowGap (line 8604) | type RowGap = "normal" | OnlyStringNumeric;
type RubyAlign (line 8606) | type RubyAlign = "center" | "space-around" | "space-between" | "start";
type RubyMerge (line 8608) | type RubyMerge = "auto" | "collapse" | "separate";
type RubyPosition (line 8610) | type RubyPosition = "alternate" | "over" | "under" | OnlyString;
type Scale (line 8612) | type Scale = "none" | OnlyStringNumeric;
type ScrollBehavior (line 8614) | type ScrollBehavior = "auto" | "smooth";
type ScrollMargin (line 8616) | type ScrollMargin = OnlyStringNumeric;
type ScrollMarginBlock (line 8618) | type ScrollMarginBlock = OnlyStringNumeric;
type ScrollMarginBlockEnd (line 8620) | type ScrollMarginBlockEnd = number;
type ScrollMarginBlockStart (line 8622) | type ScrollMarginBlockStart = number;
type ScrollMarginBottom (line 8624) | type ScrollMarginBottom = number;
type ScrollMarginInline (line 8626) | type ScrollMarginInline = OnlyStringNumeric;
type ScrollMarginInlineEnd (line 8628) | type ScrollMarginInlineEnd = number;
type ScrollMarginInlineStart (line 8630) | type ScrollMarginInlineStart = number;
type ScrollMarginLeft (line 8632) | type ScrollMarginLeft = number;
type ScrollMarginRight (line 8634) | type ScrollMarginRight = number;
type ScrollMarginTop (line 8636) | type ScrollMarginTop = number;
type ScrollPadding (line 8638) | type ScrollPadding = "auto" | OnlyStringNumeric;
type ScrollPaddingBlock (line 8640) | type ScrollPaddingBlock = "auto" | OnlyStringNumeric;
type ScrollPaddingBlockEnd (line 8642) | type ScrollPaddingBlockEnd = "auto" | OnlyStringNumeric;
type ScrollPaddingBlockStart (line 8644) | type ScrollPaddingBlockStart = "auto" | OnlyStringNumeric;
type ScrollPaddingBottom (line 8646) | type ScrollPaddingBottom = "auto" | OnlyStringNumeric;
type ScrollPaddingInline (line 8648) | type ScrollPaddingInline = "auto" | OnlyStringNumeric;
type ScrollPaddingInlineEnd (line 8650) | type ScrollPaddingInlineEnd = "auto" | OnlyStringNumeric;
type ScrollPaddingInlineStart (line 8652) | type ScrollPaddingInlineStart = "auto" | OnlyStringNumeric;
type ScrollPaddingLeft (line 8654) | type ScrollPaddingLeft = "auto" | OnlyStringNumeric;
type ScrollPaddingRight (line 8656) | type ScrollPaddingRight = "auto" | OnlyStringNumeric;
type ScrollPaddingTop (line 8658) | type ScrollPaddingTop = "auto" | OnlyStringNumeric;
type ScrollSnapAlign (line 8660) | type ScrollSnapAlign = "center" | "end" | "none" | "start" | OnlyString;
type ScrollSnapCoordinate (line 8662) | type ScrollSnapCoordinate = DataType.Position | "none" | OnlyString;
type ScrollSnapDestination (line 8664) | type ScrollSnapDestination = DataType.Position;
type ScrollSnapPointsX (line 8666) | type ScrollSnapPointsX = "none" | OnlyString;
type ScrollSnapPointsY (line 8668) | type ScrollSnapPointsY = "none" | OnlyString;
type ScrollSnapStop (line 8670) | type ScrollSnapStop = "always" | "normal";
type ScrollSnapType (line 8672) | type ScrollSnapType = "block" | "both" | "inline" | "none" | "x" | "y" |...
type ScrollSnapTypeX (line 8674) | type ScrollSnapTypeX = "mandatory" | "none" | "proximity";
type ScrollSnapTypeY (line 8676) | type ScrollSnapTypeY = "mandatory" | "none" | "proximity";
type ScrollbarColor (line 8678) | type ScrollbarColor = DataType.Color | "auto" | "dark" | "light";
type ScrollbarGutter (line 8680) | type ScrollbarGutter = "always" | "auto" | "stable" | OnlyString;
type MsScrollbarTrackColor (line 8682) | type MsScrollbarTrackColor = DataType.Color;
type ScrollbarWidth (line 8684) | type ScrollbarWidth = "auto" | "none" | "thin";
type ShapeImageThreshold (line 8686) | type ShapeImageThreshold = OnlyStringNumeric;
type ShapeMargin (line 8688) | type ShapeMargin = OnlyStringNumeric;
type ShapeOutside (line 8690) | type ShapeOutside = DataType.Box | "margin-box" | "none" | OnlyString;
type TabSize (line 8692) | type TabSize = number | OnlyNumber;
type TableLayout (line 8694) | type TableLayout = "auto" | "fixed";
type TextAlign (line 8696) | type TextAlign = "center" | "end" | "justify" | "left" | "match-parent" ...
type TextAlignLast (line 8698) | type TextAlignLast = "auto" | "center" | "end" | "justify" | "left" | "r...
type TextCombineUpright (line 8700) | type TextCombineUpright = "all" | "digits" | "none" | OnlyString;
type TextDecoration (line 8702) | type TextDecoration =
type TextDecorationColor (line 8721) | type TextDecorationColor = DataType.Color;
type TextDecorationLine (line 8723) | type TextDecorationLine = "blink" | "grammar-error" | "line-through" | "...
type TextDecorationSkip (line 8725) | type TextDecorationSkip = "box-decoration" | "edges" | "leading-spaces" ...
type TextDecorationSkipInk (line 8727) | type TextDecorationSkipInk = "all" | "auto" | "none";
type TextDecorationStyle (line 8729) | type TextDecorationStyle = "dashed" | "dotted" | "double" | "solid" | "w...
type TextDecorationThickness (line 8731) | type TextDecorationThickness = "auto" | "from-font" | OnlyStringNumeric;
type TextEmphasis (line 8733) | type TextEmphasis = DataType.Color | "circle" | "dot" | "double-circle" ...
type TextEmphasisColor (line 8735) | type TextEmphasisColor = DataType.Color;
type TextEmphasisPosition (line 8737) | type TextEmphasisPosition = OnlyString;
type TextEmphasisStyle (line 8739) | type TextEmphasisStyle = "circle" | "dot" | "double-circle" | "filled" |...
type TextIndent (line 8741) | type TextIndent = OnlyStringNumeric;
type TextJustify (line 8743) | type TextJustify = "auto" | "inter-character" | "inter-word" | "none";
type TextOrientation (line 8745) | type TextOrientation = "mixed" | "sideways" | "upright";
type TextOverflow (line 8747) | type TextOverflow = "clip" | "ellipsis" | OnlyString;
type TextRendering (line 8749) | type TextRendering = "auto" | "geometricPrecision" | "optimizeLegibility...
type TextShadow (line 8751) | type TextShadow = "none" | OnlyString;
type TextSizeAdjust (line 8753) | type TextSizeAdjust = "auto" | "none" | OnlyString;
type TextTransform (line 8755) | type TextTransform = "capitalize" | "full-size-kana" | "full-width" | "l...
type TextUnderlineOffset (line 8757) | type TextUnderlineOffset = "auto" | OnlyStringNumeric;
type TextUnderlinePosition (line 8759) | type TextUnderlinePosition = "auto" | "from-font" | "left" | "right" | "...
type Top (line 8761) | type Top = "auto" | OnlyStringNumeric;
type TouchAction (line 8763) | type TouchAction =
type Transform (line 8776) | type Transform = "none" | OnlyString;
type TransformBox (line 8778) | type TransformBox = "border-box" | "content-box" | "fill-box" | "stroke-...
type TransformOrigin (line 8780) | type TransformOrigin = "bottom" | "center" | "left" | "right" | "top" | ...
type TransformStyle (line 8782) | type TransformStyle = "flat" | "preserve-3d";
type Transition (line 8784) | type Transition = DataType.SingleTransition | OnlyString;
type TransitionDelay (line 8786) | type TransitionDelay = never | OnlyString;
type TransitionDuration (line 8788) | type TransitionDuration = never | OnlyString;
type TransitionProperty (line 8790) | type TransitionProperty = "all" | "none" | OnlyString;
type TransitionTimingFunction (line 8792) | type TransitionTimingFunction = DataType.EasingFunction | OnlyString;
type Translate (line 8794) | type Translate = "none" | OnlyStringNumeric;
type UnicodeBidi (line 8796) | type UnicodeBidi =
type UserSelect (line 8804) | type UserSelect = "all" | "auto" | "contain" | "element" | "none" | "text";
type VerticalAlign (line 8806) | type VerticalAlign =
type Visibility (line 8818) | type Visibility = "collapse" | "hidden" | "visible";
type WhiteSpace (line 8820) | type WhiteSpace = "break-spaces" | "normal" | "nowrap" | "pre" | "pre-li...
type Widows (line 8822) | type Widows = OnlyNumber;
type Width (line 8824) | type Width =
type WillChange (line 8835) | type WillChange = DataType.AnimateableFeature | "auto" | OnlyString;
type WordBreak (line 8837) | type WordBreak = "break-all" | "break-word" | "keep-all" | "normal";
type WordSpacing (line 8839) | type WordSpacing = "normal" | OnlyStringNumeric;
type WordWrap (line 8841) | type WordWrap = "break-word" | "normal";
type WritingMode (line 8843) | type WritingMode = "horizontal-tb" | "sideways-lr" | "sideways-rl" | "ve...
type ZIndex (line 8845) | type ZIndex = "auto" | OnlyStringNumeric;
type Zoom (line 8847) | type Zoom = "normal" | "reset" | OnlyStringNumeric;
type MozAppearance (line 8849) | type MozAppearance =
type MozBinding (line 8941) | type MozBinding = "none" | OnlyString;
type MozBorderBottomColors (line 8943) | type MozBorderBottomColors = DataType.Color | "none" | OnlyString;
type MozBorderLeftColors (line 8945) | type MozBorderLeftColors = DataType.Color | "none" | OnlyString;
type MozBorderRightColors (line 8947) | type MozBorderRightColors = DataType.Color | "none" | OnlyString;
type MozBorderTopColors (line 8949) | type MozBorderTopColors = DataType.Color | "none" | OnlyString;
type MozContextProperties (line 8951) | type MozContextProperties = "fill" | "fill-opacity" | "none" | "stroke" ...
type MozFloatEdge (line 8953) | type MozFloatEdge = "border-box" | "content-box" | "margin-box" | "paddi...
type MozForceBrokenImageIcon (line 8955) | type MozForceBrokenImageIcon = OnlyNumber;
type MozImageRegion (line 8957) | type MozImageRegion = "auto" | OnlyString;
type MozOrient (line 8959) | type MozOrient = "block" | "horizontal" | "inline" | "vertical";
type MozOutlineRadius (line 8961) | type MozOutlineRadius = OnlyStringNumeric;
type MozOutlineRadiusBottomleft (line 8963) | type MozOutlineRadiusBottomleft = OnlyStringNumeric;
type MozOutlineRadiusBottomright (line 8965) | type MozOutlineRadiusBottomright = OnlyStringNumeric;
type MozOutlineRadiusTopleft (line 8967) | type MozOutlineRadiusTopleft = OnlyStringNumeric;
type MozOutlineRadiusTopright (line 8969) | type MozOutlineRadiusTopright = OnlyStringNumeric;
type MozStackSizing (line 8971) | type MozStackSizing = "ignore" | "stretch-to-fit";
type MozTextBlink (line 8973) | type MozTextBlink = "blink" | "none";
type MozUserFocus (line 8975) | type MozUserFocus = "ignore" | "none" | "normal" | "select-after" | "sel...
type MozUserInput (line 8977) | type MozUserInput = "auto" | "disabled" | "enabled" | "none";
type MozUserModify (line 8979) | type MozUserModify = "read-only" | "read-write" | "write-only";
type MozWindowDragging (line 8981) | type MozWindowDragging = "drag" | "no-drag";
type MozWindowShadow (line 8983) | type MozWindowShadow = "default" | "menu" | "none" | "sheet" | "tooltip";
type MsAccelerator (line 8985) | type MsAccelerator = "false" | "true";
type MsBlockProgression (line 8987) | type MsBlockProgression = "bt" | "lr" | "rl" | "tb";
type MsContentZoomChaining (line 8989) | type MsContentZoomChaining = "chained" | "none";
type MsContentZoomLimit (line 8991) | type MsContentZoomLimit = OnlyString;
type MsContentZoomLimitMax (line 8993) | type MsContentZoomLimitMax = OnlyString;
type MsContentZoomLimitMin (line 8995) | type MsContentZoomLimitMin = OnlyString;
type MsContentZoomSnap (line 8997) | type MsContentZoomSnap = "mandatory" | "none" | "proximity" | OnlyString;
type MsContentZoomSnapPoints (line 8999) | type MsContentZoomSnapPoints = OnlyString;
type MsContentZoomSnapType (line 9001) | type MsContentZoomSnapType = "mandatory" | "none" | "proximity";
type MsContentZooming (line 9003) | type MsContentZooming = "none" | "zoom";
type MsFilter (line 9005) | type MsFilter = OnlyString;
type MsFlowFrom (line 9007) | type MsFlowFrom = "none" | OnlyString;
type MsFlowInto (line 9009) | type MsFlowInto = "none" | OnlyString;
type MsGridColumns (line 9011) | type MsGridColumns = DataType.TrackBreadth | "none" | OnlyString;
type MsGridRows (line 9013) | type MsGridRows = DataType.TrackBreadth | "none" | OnlyString;
type MsHighContrastAdjust (line 9015) | type MsHighContrastAdjust = "auto" | "none";
type MsHyphenateLimitChars (line 9017) | type MsHyphenateLimitChars = "auto" | OnlyStringNumeric;
type MsHyphenateLimitLines (line 9019) | type MsHyphenateLimitLines = "no-limit" | OnlyNumber;
type MsHyphenateLimitZone (line 9021) | type MsHyphenateLimitZone = OnlyStringNumeric;
type MsImeAlign (line 9023) | type MsImeAlign = "after" | "auto";
type MsOverflowStyle (line 9025) | type MsOverflowStyle = "auto" | "none" | "scrollbar";
type MsScrollChaining (line 9027) | type MsScrollChaining = "chained" | "none";
type MsScrollLimit (line 9029) | type MsScrollLimit = OnlyString;
type MsScrollLimitXMax (line 9031) | type MsScrollLimitXMax = number | "auto";
type MsScrollLimitXMin (line 9033) | type MsScrollLimitXMin = number;
type MsScrollLimitYMax (line 9035) | type MsScrollLimitYMax = number | "auto";
type MsScrollLimitYMin (line 9037) | type MsScrollLimitYMin = number;
type MsScrollRails (line 9039) | type MsScrollRails = "none" | "railed";
type MsScrollSnapPointsX (line 9041) | type MsScrollSnapPointsX = OnlyString;
type MsScrollSnapPointsY (line 9043) | type MsScrollSnapPointsY = OnlyString;
type MsScrollSnapType (line 9045) | type MsScrollSnapType = "mandatory" | "none" | "proximity";
type MsScrollSnapX (line 9047) | type MsScrollSnapX = OnlyString;
type MsScrollSnapY (line 9049) | type MsScrollSnapY = OnlyString;
type MsScrollTranslation (line 9051) | type MsScrollTranslation = "none" | "vertical-to-horizontal";
type MsScrollbar3dlightColor (line 9053) | type MsScrollbar3dlightColor = DataType.Color;
type MsScrollbarArrowColor (line 9055) | type MsScrollbarArrowColor = DataType.Color;
type MsScrollbarBaseColor (line 9057) | type MsScrollbarBaseColor = DataType.Color;
type MsScrollbarDarkshadowColor (line 9059) | type MsScrollbarDarkshadowColor = DataType.Color;
type MsScrollbarFaceColor (line 9061) | type MsScrollbarFaceColor = DataType.Color;
type MsScrollbarHighlightColor (line 9063) | type MsScrollbarHighlightColor = DataType.Color;
type MsScrollbarShadowColor (line 9065) | type MsScrollbarShadowColor = DataType.Color;
type MsTextAutospace (line 9067) | type MsTextAutospace = "ideograph-alpha" | "ideograph-numeric" | "ideogr...
type MsTouchSelect (line 9069) | type MsTouchSelect = "grippers" | "none";
type MsUserSelect (line 9071) | type MsUserSelect = "element" | "none" | "text";
type MsWrapFlow (line 9073) | type MsWrapFlow = "auto" | "both" | "clear" | "end" | "maximum" | "start";
type MsWrapMargin (line 9075) | type MsWrapMargin = number;
type MsWrapThrough (line 9077) | type MsWrapThrough = "none" | "wrap";
type WebkitAppearance (line 9079) | type WebkitAppearance =
type WebkitBorderBefore (line 9129) | type WebkitBorderBefore = DataType.LineWidth | DataType.LineStyle | Data...
type WebkitBorderBeforeColor (line 9131) | type WebkitBorderBeforeColor = DataType.Color;
type WebkitBorderBeforeStyle (line 9133) | type WebkitBorderBeforeStyle = DataType.LineStyle | OnlyString;
type WebkitBorderBeforeWidth (line 9135) | type WebkitBorderBeforeWidth = DataType.LineWidth | OnlyString;
type WebkitBoxReflect (line 9137) | type WebkitBoxReflect = "above" | "below" | "left" | "right" | OnlyStrin...
type WebkitLineClamp (line 9139) | type WebkitLineClamp = "none" | OnlyNumber;
type WebkitMask (line 9141) | type WebkitMask =
type WebkitMaskAttachment (line 9152) | type WebkitMaskAttachment = DataType.Attachment | OnlyString;
type WebkitMaskClip (line 9154) | type WebkitMaskClip = DataType.Box | "border" | "content" | "padding" | ...
type WebkitMaskComposite (line 9156) | type WebkitMaskComposite = DataType.CompositeStyle | OnlyString;
type WebkitMaskImage (line 9158) | type WebkitMaskImage = "none" | OnlyString;
type WebkitMaskOrigin (line 9160) | type WebkitMaskOrigin = DataType.Box | "border" | "content" | "padding" ...
type WebkitMaskPosition (line 9162) | type WebkitMaskPosition = DataType.Position | OnlyString;
type WebkitMaskPositionX (line 9164) | type WebkitMaskPositionX = "center" | "left" | "right" | OnlyStringNumeric;
type WebkitMaskPositionY (line 9166) | type WebkitMaskPositionY = "bottom" | "center" | "top" | OnlyStringNumeric;
type WebkitMaskRepeat (line 9168) | type WebkitMaskRepeat = DataType.RepeatStyle | OnlyString;
type WebkitMaskRepeatX (line 9170) | type WebkitMaskRepeatX = "no-repeat" | "repeat" | "round" | "space";
type WebkitMaskRepeatY (line 9172) | type WebkitMaskRepeatY = "no-repeat" | "repeat" | "round" | "space";
type WebkitMaskSize (line 9174) | type WebkitMaskSize = DataType.BgSize | OnlyString;
type WebkitOverflowScrolling (line 9176) | type WebkitOverflowScrolling = "auto" | "touch";
type WebkitTapHighlightColor (line 9178) | type WebkitTapHighlightColor = DataType.Color;
type WebkitTextFillColor (line 9180) | type WebkitTextFillColor = DataType.Color;
type WebkitTextStroke (line 9182) | type WebkitTextStroke = DataType.Color | OnlyStringNumeric;
type WebkitTextStrokeColor (line 9184) | type WebkitTextStrokeColor = DataType.Color;
type WebkitTextStrokeWidth (line 9186) | type WebkitTextStrokeWidth = number;
type WebkitTouchCallout (line 9188) | type WebkitTouchCallout = "default" | "none";
type WebkitUserModify (line 9190) | type WebkitUserModify = "read-only" | "read-write" | "read-write-plainte...
type AlignmentBaseline (line 9192) | type AlignmentBaseline =
type BaselineShift (line 9206) | type BaselineShift = "baseline" | "sub" | "super" | OnlyStringNumeric;
type ClipRule (line 9208) | type ClipRule = "evenodd" | "nonzero";
type ColorInterpolation (line 9210) | type ColorInterpolation = "auto" | "linearRGB" | "sRGB";
type ColorRendering (line 9212) | type ColorRendering = "auto" | "optimizeQuality" | "optimizeSpeed";
type DominantBaseline (line 9214) | type DominantBaseline =
type Fill (line 9228) | type Fill = DataType.Paint;
type FillOpacity (line 9230) | type FillOpacity = OnlyNumber;
type FillRule (line 9232) | type FillRule = "evenodd" | "nonzero";
type FloodColor (line 9234) | type FloodColor = DataType.Color | "CurrentColor" | "hsl(" | "lab(" | "r...
type FloodOpacity (line 9236) | type FloodOpacity = OnlyNumber;
type GlyphOrientationVertical (line 9238) | type GlyphOrientationVertical = "auto" | OnlyStringNumeric;
type LightingColor (line 9240) | type LightingColor = DataType.Color | "CurrentColor" | "hsl(" | "lab(" |...
type Marker (line 9242) | type Marker = "none" | OnlyString;
type MarkerEnd (line 9244) | type MarkerEnd = "none" | OnlyString;
type MarkerMid (line 9246) | type MarkerMid = "none" | OnlyString;
type MarkerStart (line 9248) | type MarkerStart = "none" | OnlyString;
type ShapeRendering (line 9250) | type ShapeRendering = "auto" | "crispEdges" | "geometricPrecision" | "op...
type StopColor (line 9252) | type StopColor = DataType.Color | "CurrentColor" | "hsl(" | "lab(" | "rg...
type StopOpacity (line 9254) | type StopOpacity = OnlyNumber;
type Stroke (line 9256) | type Stroke = DataType.Paint;
type StrokeDasharray (line 9258) | type StrokeDasharray = DataType.Dasharray | "none";
type StrokeDashoffset (line 9260) | type StrokeDashoffset = OnlyStringNumeric;
type StrokeLinecap (line 9262) | type StrokeLinecap = "butt" | "round" | "square";
type StrokeLinejoin (line 9264) | type StrokeLinejoin = "bevel" | "miter" | "round";
type StrokeMiterlimit (line 9266) | type StrokeMiterlimit = OnlyNumber;
type StrokeOpacity (line 9268) | type StrokeOpacity = OnlyNumber;
type StrokeWidth (line 9270) | type StrokeWidth = OnlyStringNumeric;
type TextAnchor (line 9272) | type TextAnchor = "end" | "middle" | "start";
type VectorEffect (line 9274) | type VectorEffect = "non-scaling-stroke" | "none";
type CounterStyle (line 9278) | interface CounterStyle {
type CounterStyleHyphen (line 9291) | interface CounterStyleHyphen {
type CounterStyleFallback (line 9304) | type CounterStyleFallback = {
type CounterStyleHyphenFallback (line 9308) | type CounterStyleHyphenFallback = {
type FontFace (line 9312) | interface FontFace {
type FontFaceHyphen (line 9331) | interface FontFaceHyphen {
type FontFaceFallback (line 9349) | type FontFaceFallback = {
type FontFaceHyphenFallback (line 9353) | type FontFaceHyphenFallback = {
type Page (line 9357) | interface Page {
type PageHyphen (line 9361) | interface PageHyphen {
type PageFallback (line 9365) | type PageFallback = {
type PageHyphenFallback (line 9369) | type PageHyphenFallback = {
type Property (line 9373) | interface Property {
type PropertyHyphen (line 9379) | interface PropertyHyphen {
type PropertyFallback (line 9385) | type PropertyFallback = {
type PropertyHyphenFallback (line 9389) | type PropertyHyphenFallback = {
type Viewport (line 9393) | interface Viewport {
type ViewportHyphen (line 9408) | interface ViewportHyphen {
type ViewportFallback (line 9423) | type ViewportFallback = {
type ViewportHyphenFallback (line 9427) | type ViewportHyphenFallback = {
type Range (line 9431) | type Range = "auto" | "infinite" | OnlyStringNumeric;
type SpeakAs (line 9433) | type SpeakAs = "auto" | "bullets" | "numbers" | "spell-out" | "words" | ...
type System (line 9435) | type System = "additive" | "alphabetic" | "cyclic" | "fixed" | "numeric"...
type FontFeatureSettings (line 9437) | type FontFeatureSettings = "normal" | OnlyString;
type FontDisplay (line 9439) | type FontDisplay = "auto" | "block" | "fallback" | "optional" | "swap";
type FontStretch (line 9441) | type FontStretch = DataType.FontStretchAbsolute | OnlyString;
type FontStyle (line 9443) | type FontStyle = "italic" | "normal" | "oblique" | OnlyString;
type FontVariant (line 9445) | type FontVariant =
type FontVariationSettings (line 9477) | type FontVariationSettings = "normal" | OnlyString;
type FontWeight (line 9479) | type FontWeight = DataType.FontWeightAbsolute;
type Size (line 9481) | type Size = DataType.PageSize | "auto" | "landscape" | "portrait" | Only...
type Inherits (line 9483) | type Inherits = "false" | "true" | boolean;
type Height (line 9485) | type Height = DataType.ViewportLength | OnlyString;
type MaxHeight (line 9487) | type MaxHeight = DataType.ViewportLength;
type MaxWidth (line 9489) | type MaxWidth = DataType.ViewportLength;
type MaxZoom (line 9491) | type MaxZoom = "auto" | OnlyStringNumeric;
type MinHeight (line 9493) | type MinHeight = DataType.ViewportLength;
type MinWidth (line 9495) | type MinWidth = DataType.ViewportLength;
type MinZoom (line 9497) | type MinZoom = "auto" | OnlyStringNumeric;
type Orientation (line 9499) | type Orientation = "auto" | "landscape" | "portrait";
type UserZoom (line 9501) | type UserZoom = "fixed" | "zoom";
type ViewportFit (line 9503) | type ViewportFit = "auto" | "contain" | "cover";
type Width (line 9505) | type Width = DataType.ViewportLength | OnlyString;
type Zoom (line 9507) | type Zoom = "auto" | OnlyStringNumeric;
type AbsoluteSize (line 9511) | type AbsoluteSize = "large" | "medium" | "small" | "x-large" | "x-small"...
type AnimateableFeature (line 9513) | type AnimateableFeature = "contents" | "scroll-position" | OnlyString;
type Attachment (line 9515) | type Attachment = "fixed" | "local" | "scroll";
type BgPosition (line 9517) | type BgPosition = "bottom" | "center" | "left" | "right" | "top" | OnlyS...
type BgSize (line 9519) | type BgSize = "auto" | "contain" | "cover" | OnlyStringNumeric;
type BlendMode (line 9521) | type BlendMode =
type Box (line 9539) | type Box = "border-box" | "content-box" | "padding-box";
type Color (line 9541) | type Color = NamedColor | SystemColor | "CurrentColor" | "hsl(" | "lab("...
type CompatAuto (line 9543) | type CompatAuto =
type CompositeStyle (line 9557) | type CompositeStyle =
type CompositingOperator (line 9570) | type CompositingOperator = "add" | "exclude" | "intersect" | "subtract";
type ContentDistribution (line 9572) | type ContentDistribution = "space-around" | "space-between" | "space-eve...
type ContentList (line 9574) | type ContentList = Quote | "contents" | OnlyString;
type ContentPosition (line 9576) | type ContentPosition = "center" | "end" | "flex-end" | "flex-start" | "s...
type CubicBezierTimingFunction (line 9578) | type CubicBezierTimingFunction = "ease" | "ease-in" | "ease-in-out" | "e...
type Dasharray (line 9580) | type Dasharray = OnlyStringNumeric;
type SystemColor (line 9582) | type SystemColor = "ActiveText" | "ButtonFace" | "ButtonText" | "ButtonB...
type DisplayInside (line 9584) | type DisplayInside = "flex" | "flow" | "flow-root" | "grid" | "ruby" | "...
type DisplayInternal (line 9586) | type DisplayInternal =
type DisplayLegacy (line 9600) | type DisplayLegacy = "inline-block" | "inline-flex" | "inline-grid" | "i...
type DisplayOutside (line 9602) | type DisplayOutside = "block" | "inline" | "run-in";
type EasingFunction (line 9604) | type EasingFunction = CubicBezierTimingFunction | StepTimingFunction | "...
type EastAsianVariantValues (line 9606) | type EastAsianVariantValues = "jis04" | "jis78" | "jis83" | "jis90" | "s...
type FinalBgLayer (line 9608) | type FinalBgLayer = Color | BgPosition | RepeatStyle | Attachment | Box ...
type FontStretchAbsolute (line 9610) | type FontStretchAbsolute =
type FontWeightAbsolute (line 9622) | type FontWeightAbsolute = "bold" | "normal" | OnlyStringNumeric;
type GenericFamily (line 9624) | type GenericFamily = "cursive" | "emoji" | "fangsong" | "fantasy" | "mat...
type GeometryBox (line 9626) | type GeometryBox = Box | "fill-box" | "margin-box" | "stroke-box" | "vie...
type GridLine (line 9628) | type GridLine = "auto" | OnlyStringNumeric;
type LineStyle (line 9630) | type LineStyle = "dashed" | "dotted" | "double" | "groove" | "hidden" | ...
type LineWidth (line 9632) | type LineWidth = number | "medium" | "thick" | "thin";
type MaskLayer (line 9634) | type MaskLayer = Position | RepeatStyle | GeometryBox | CompositingOpera...
type MaskingMode (line 9636) | type MaskingMode = "alpha" | "luminance" | "match-source";
type NamedColor (line 9638) | type NamedColor =
type PageSize (line 9789) | type PageSize = "A3" | "A4" | "A5" | "B4" | "B5" | "JIS-B4" | "JIS-B5" |...
type Paint (line 9791) | type Paint = Color | "child" | "context-fill" | "context-stroke" | "none...
type Position (line 9793) | type Position = "bottom" | "center" | "left" | "right" | "top" | OnlyStr...
type Quote (line 9795) | type Quote = "close-quote" | "no-close-quote" | "no-open-quote" | "open-...
type RepeatStyle (line 9797) | type RepeatStyle = "no-repeat" | "repeat" | "repeat-x" | "repeat-y" | "r...
type SelfPosition (line 9799) | type SelfPosition = "center" | "end" | "flex-end" | "flex-start" | "self...
type SingleAnimation (line 9801) | type SingleAnimation =
type SingleAnimationDirection (line 9812) | type SingleAnimationDirection = "alternate" | "alternate-reverse" | "nor...
type SingleAnimationFillMode (line 9814) | type SingleAnimationFillMode = "backwards" | "both" | "forwards" | "none";
type SingleTransition (line 9816) | type SingleTransition = EasingFunction | "all" | "none" | OnlyString;
type StepTimingFunction (line 9818) | type StepTimingFunction = "step-end" | "step-start" | OnlyString;
type TrackBreadth (line 9820) | type TrackBreadth = "auto" | "max-content" | "min-content" | OnlyStringN...
type ViewportLength (line 9822) | type ViewportLength = "auto" | OnlyStringNumeric;
type VisualBox (line 9824) | type VisualBox = "border-box" | "content-box" | "padding-box";
FILE: packages/core/types/index.d.ts
type CreateStitches (line 8) | type CreateStitches = Config.CreateStitches
type CSSProperties (line 9) | type CSSProperties = CSSUtil.CSSProperties
type DefaultThemeMap (line 10) | type DefaultThemeMap = Config.DefaultThemeMap
type FontFace (line 11) | type FontFace = CSSUtil.Native.AtRule.FontFace
type CSS (line 14) | type CSS<
type ComponentProps (line 34) | type ComponentProps<Component> = Component extends ((...args: any[]) => ...
type PropertyValue (line 37) | type PropertyValue<Property extends keyof CSSUtil.CSSProperties, Config ...
type ScaleValue (line 51) | type ScaleValue<Scale, Config = null> = (
type VariantProps (line 62) | type VariantProps<Component extends {[key: symbol | string]: any}> = Sty...
FILE: packages/core/types/stitches.d.ts
type RemoveIndex (line 7) | type RemoveIndex<T> = {[k in keyof T as string extends k ? never : numbe...
type CssFunctionType (line 9) | interface CssFunctionType<Media extends {} = {}, Theme extends {} = {}, ...
type Stitches (line 48) | interface Stitches<
type ThemeTokens (line 181) | type ThemeTokens<Values, Prefix> = {
FILE: packages/core/types/styled-component.d.ts
type CssComponent (line 4) | interface CssComponent<
type TransformProps (line 33) | type TransformProps<Props, Media> = {
type $$StyledComponentType (line 51) | type $$StyledComponentType = typeof $$StyledComponentType
type $$StyledComponentProps (line 57) | type $$StyledComponentProps = typeof $$StyledComponentProps
type $$StyledComponentMedia (line 63) | type $$StyledComponentMedia = typeof $$StyledComponentMedia
type StyledComponentType (line 66) | type StyledComponentType<T extends any[]> = (
type StyledComponentProps (line 81) | type StyledComponentProps<T extends any[]> = (
FILE: packages/core/types/theme.d.ts
type ScaleValue (line 1) | interface ScaleValue {
type Token (line 8) | interface Token<
FILE: packages/core/types/util.d.ts
type Prefixed (line 5) | type Prefixed<K extends string, T> = `${K}${Extract<T, boolean | number ...
type Assign (line 8) | type Assign<T1 = {}, T2 = {}> = Omit<T1, keyof T2> & T2
type Widen (line 11) | type Widen<T> =
type String (line 23) | type String = string & Record<never, never>
type Index (line 26) | type Index = (number | string) & Record<never, never>
type Function (line 29) | type Function = (...args: any[]) => unknown
type WideObject (line 32) | type WideObject = { [name in number | string]: boolean | number | string...
FILE: packages/react/tests/component.js
function TextComponent (line 23) | function TextComponent() {
FILE: packages/react/tests/types.test.tsx
type UnionProps (line 174) | type UnionProps = { type: 'single', collapsible: boolean; } | { type: 'm...
FILE: packages/react/types/config.d.ts
type Prefix (line 7) | type Prefix<T = ''> = T extends string ? T: string
type Media (line 10) | type Media<T = {}> = {
type Theme (line 15) | type Theme<T = {}> = {
type ThemeMap (line 37) | type ThemeMap<T = {}> = {
type Utils (line 42) | type Utils<T = {}> = {
type DefaultThemeMap (line 50) | interface DefaultThemeMap {
type CreateStitches (line 194) | type CreateStitches = {
FILE: packages/react/types/css-util.d.ts
type CSSProperties (line 9) | interface CSSProperties extends Native.StandardLonghandProperties, Nativ...
type ValueByPropertyName (line 11) | type ValueByPropertyName<PropertyName> = PropertyName extends keyof CSSP...
type TokenByPropertyName (line 13) | type TokenByPropertyName<PropertyName, Theme, ThemeMap> = PropertyName e...
type TokenByScaleName (line 15) | type TokenByScaleName<ScaleName, Theme> = ScaleName extends keyof Theme ...
type CSS (line 18) | type CSS<
type $$PropertyValue (line 109) | type $$PropertyValue = typeof $$PropertyValue
type $$ScaleValue (line 115) | type $$ScaleValue = typeof $$ScaleValue
type $$ThemeValue (line 119) | type $$ThemeValue = typeof $$ThemeValue
type WithPropertyValue (line 122) | type WithPropertyValue<T> = {
type WithScaleValue (line 125) | type WithScaleValue<T> = {
FILE: packages/react/types/css.d.ts
type StandardLonghandProperties (line 27) | interface StandardLonghandProperties {
type StandardShorthandProperties (line 3165) | interface StandardShorthandProperties {
type StandardProperties (line 3504) | interface StandardProperties
type SvgProperties (line 3509) | interface SvgProperties {
type Properties (line 3572) | interface Properties
type StandardLonghandPropertiesHyphen (line 3576) | interface StandardLonghandPropertiesHyphen {
type StandardShorthandPropertiesHyphen (line 6714) | interface StandardShorthandPropertiesHyphen {
type StandardPropertiesHyphen (line 7053) | interface StandardPropertiesHyphen
type SvgPropertiesHyphen (line 7058) | interface SvgPropertiesHyphen {
type PropertiesHyphen (line 7121) | interface PropertiesHyphen
type StandardLonghandPropertiesFallback (line 7125) | type StandardLonghandPropertiesFallback = {
type StandardShorthandPropertiesFallback (line 7129) | type StandardShorthandPropertiesFallback = {
type StandardPropertiesFallback (line 7133) | interface StandardPropertiesFallback
type SvgPropertiesFallback (line 7138) | type SvgPropertiesFallback = {
type PropertiesFallback (line 7142) | interface PropertiesFallback
type StandardLonghandPropertiesHyphenFallback (line 7146) | type StandardLonghandPropertiesHyphenFallback = {
type StandardShorthandPropertiesHyphenFallback (line 7150) | type StandardShorthandPropertiesHyphenFallback = {
type StandardPropertiesHyphenFallback (line 7154) | interface StandardPropertiesHyphenFallback
type SvgPropertiesHyphenFallback (line 7159) | type SvgPropertiesHyphenFallback = {
type PropertiesHyphenFallback (line 7163) | interface PropertiesHyphenFallback
type AtRules (line 7167) | type AtRules =
type AdvancedPseudos (line 7182) | type AdvancedPseudos =
type SimplePseudos (line 7200) | type SimplePseudos =
type Pseudos (line 7268) | type Pseudos = AdvancedPseudos | SimplePseudos;
type HtmlAttributes (line 7270) | type HtmlAttributes =
type SvgAttributes (line 7496) | type SvgAttributes =
type Globals (line 7742) | type Globals = "inherit" | "initial" | "revert" | "unset";
type OnlyObject (line 7744) | type OnlyObject = Record<never,never>
type OnlyNumber (line 7746) | type OnlyNumber = number & OnlyObject
type OnlyString (line 7748) | type OnlyString = string & OnlyObject
type OnlyStringNumeric (line 7750) | type OnlyStringNumeric = (number | string) & OnlyObject
type AlignContent (line 7753) | type AlignContent = DataType.ContentDistribution | DataType.ContentPosit...
type AlignItems (line 7755) | type AlignItems = DataType.SelfPosition | "baseline" | "normal" | "stret...
type AlignSelf (line 7757) | type AlignSelf = DataType.SelfPosition | "auto" | "baseline" | "normal" ...
type AlignTracks (line 7759) | type AlignTracks = DataType.ContentDistribution | DataType.ContentPositi...
type All (line 7761) | type All = never;
type Animation (line 7763) | type Animation = DataType.SingleAnimation | OnlyString;
type AnimationDelay (line 7765) | type AnimationDelay = never | OnlyString;
type AnimationDirection (line 7767) | type AnimationDirection = DataType.SingleAnimationDirection | OnlyString;
type AnimationDuration (line 7769) | type AnimationDuration = never | OnlyString;
type AnimationFillMode (line 7771) | type AnimationFillMode = DataType.SingleAnimationFillMode | OnlyString;
type AnimationIterationCount (line 7773) | type AnimationIterationCount = "infinite" | OnlyStringNumeric;
type AnimationName (line 7775) | type AnimationName = "none" | OnlyString;
type AnimationPlayState (line 7777) | type AnimationPlayState = "paused" | "running" | OnlyString;
type AnimationTimingFunction (line 7779) | type AnimationTimingFunction = DataType.EasingFunction | OnlyString;
type Appearance (line 7781) | type Appearance = DataType.CompatAuto | "auto" | "menulist-button" | "no...
type AspectRatio (line 7783) | type AspectRatio = "auto" | OnlyString;
type Azimuth (line 7785) | type Azimuth =
type BackdropFilter (line 7800) | type BackdropFilter = "none" | OnlyString;
type BackfaceVisibility (line 7802) | type BackfaceVisibility = "hidden" | "visible";
type Background (line 7804) | type Background = DataType.FinalBgLayer | OnlyString;
type BackgroundAttachment (line 7806) | type BackgroundAttachment = DataType.Attachment | OnlyString;
type BackgroundBlendMode (line 7808) | type BackgroundBlendMode = DataType.BlendMode | OnlyString;
type BackgroundClip (line 7810) | type BackgroundClip = DataType.Box | OnlyString;
type BackgroundColor (line 7812) | type BackgroundColor = DataType.Color;
type BackgroundImage (line 7814) | type BackgroundImage = "none" | OnlyString;
type BackgroundOrigin (line 7816) | type BackgroundOrigin = DataType.Box | OnlyString;
type BackgroundPosition (line 7818) | type BackgroundPosition = DataType.BgPosition | OnlyString;
type BackgroundPositionX (line 7820) | type BackgroundPositionX = "center" | "left" | "right" | "x-end" | "x-st...
type BackgroundPositionY (line 7822) | type BackgroundPositionY = "bottom" | "center" | "top" | "y-end" | "y-st...
type BackgroundRepeat (line 7824) | type BackgroundRepeat = DataType.RepeatStyle | OnlyString;
type BackgroundSize (line 7826) | type BackgroundSize = DataType.BgSize | OnlyString;
type BlockOverflow (line 7828) | type BlockOverflow = "clip" | "ellipsis" | OnlyString;
type BlockSize (line 7830) | type BlockSize =
type Border (line 7839) | type Border = DataType.LineWidth | DataType.LineStyle | DataType.Color |...
type BorderBlock (line 7841) | type BorderBlock = DataType.LineWidth | DataType.LineStyle | DataType.Co...
type BorderBlockColor (line 7843) | type BorderBlockColor = DataType.Color | OnlyString;
type BorderBlockEnd (line 7845) | type BorderBlockEnd = DataType.LineWidth | DataType.LineStyle | DataType...
type BorderBlockEndColor (line 7847) | type BorderBlockEndColor = DataType.Color;
type BorderBlockEndStyle (line 7849) | type BorderBlockEndStyle = DataType.LineStyle;
type BorderBlockEndWidth (line 7851) | type BorderBlockEndWidth = DataType.LineWidth;
type BorderBlockStart (line 7853) | type BorderBlockStart = DataType.LineWidth | DataType.LineStyle | DataTy...
type BorderBlockStartColor (line 7855) | type BorderBlockStartColor = DataType.Color;
type BorderBlockStartStyle (line 7857) | type BorderBlockStartStyle = DataType.LineStyle;
type BorderBlockStartWidth (line 7859) | type BorderBlockStartWidth = DataType.LineWidth;
type BorderBlockStyle (line 7861) | type BorderBlockStyle = DataType.LineStyle;
type BorderBlockWidth (line 7863) | type BorderBlockWidth = DataType.LineWidth;
type BorderBottom (line 7865) | type BorderBottom = DataType.LineWidth | DataType.LineStyle | DataType.C...
type BorderBottomColor (line 7867) | type BorderBottomColor = DataType.Color;
type BorderBottomLeftRadius (line 7869) | type BorderBottomLeftRadius = OnlyStringNumeric;
type BorderBottomRightRadius (line 7871) | type BorderBottomRightRadius = OnlyStringNumeric;
type BorderBottomStyle (line 7873) | type BorderBottomStyle = DataType.LineStyle;
type BorderBottomWidth (line 7875) | type BorderBottomWidth = DataType.LineWidth;
type BorderCollapse (line 7877) | type BorderCollapse = "collapse" | "separate";
type BorderColor (line 7879) | type BorderColor = DataType.Color | OnlyString;
type BorderEndEndRadius (line 7881) | type BorderEndEndRadius = OnlyStringNumeric;
type BorderEndStartRadius (line 7883) | type BorderEndStartRadius = OnlyStringNumeric;
type BorderImage (line 7885) | type BorderImage = "none" | "repeat" | "round" | "space" | "stretch" | O...
type BorderImageOutset (line 7887) | type BorderImageOutset = OnlyStringNumeric;
type BorderImageRepeat (line 7889) | type BorderImageRepeat = "repeat" | "round" | "space" | "stretch" | Only...
type BorderImageSlice (line 7891) | type BorderImageSlice = OnlyStringNumeric;
type BorderImageSource (line 7893) | type BorderImageSource = "none" | OnlyString;
type BorderImageWidth (line 7895) | type BorderImageWidth = "auto" | OnlyStringNumeric;
type BorderInline (line 7897) | type BorderInline = DataType.LineWidth | DataType.LineStyle | DataType.C...
type BorderInlineColor (line 7899) | type BorderInlineColor = DataType.Color | OnlyString;
type BorderInlineEnd (line 7901) | type BorderInlineEnd = DataType.LineWidth | DataType.LineStyle | DataTyp...
type BorderInlineEndColor (line 7903) | type BorderInlineEndColor = DataType.Color;
type BorderInlineEndStyle (line 7905) | type BorderInlineEndStyle = DataType.LineStyle;
type BorderInlineEndWidth (line 7907) | type BorderInlineEndWidth = DataType.LineWidth;
type BorderInlineStart (line 7909) | type BorderInlineStart = DataType.LineWidth | DataType.LineStyle | DataT...
type BorderInlineStartColor (line 7911) | type BorderInlineStartColor = DataType.Color;
type BorderInlineStartStyle (line 7913) | type BorderInlineStartStyle = DataType.LineStyle;
type BorderInlineStartWidth (line 7915) | type BorderInlineStartWidth = DataType.LineWidth;
type BorderInlineStyle (line 7917) | type BorderInlineStyle = DataType.LineStyle;
type BorderInlineWidth (line 7919) | type BorderInlineWidth = DataType.LineWidth;
type BorderLeft (line 7921) | type BorderLeft = DataType.LineWidth | DataType.LineStyle | DataType.Col...
type BorderLeftColor (line 7923) | type BorderLeftColor = DataType.Color;
type BorderLeftStyle (line 7925) | type BorderLeftStyle = DataType.LineStyle;
type BorderLeftWidth (line 7927) | type BorderLeftWidth = DataType.LineWidth;
type BorderRadius (line 7929) | type BorderRadius = OnlyStringNumeric;
type BorderRight (line 7931) | type BorderRight = DataType.LineWidth | DataType.LineStyle | DataType.Co...
type BorderRightColor (line 7933) | type BorderRightColor = DataType.Color;
type BorderRightStyle (line 7935) | type BorderRightStyle = DataType.LineStyle;
type BorderRightWidth (line 7937) | type BorderRightWidth = DataType.LineWidth;
type BorderSpacing (line 7939) | type BorderSpacing = OnlyStringNumeric;
type BorderStartEndRadius (line 7941) | type BorderStartEndRadius = OnlyStringNumeric;
type BorderStartStartRadius (line 7943) | type BorderStartStartRadius = OnlyStringNumeric;
type BorderStyle (line 7945) | type BorderStyle = DataType.LineStyle | OnlyString;
type BorderTop (line 7947) | type BorderTop = DataType.LineWidth | DataType.LineStyle | DataType.Colo...
type BorderTopColor (line 7949) | type BorderTopColor = DataType.Color;
type BorderTopLeftRadius (line 7951) | type BorderTopLeftRadius = OnlyStringNumeric;
type BorderTopRightRadius (line 7953) | type BorderTopRightRadius = OnlyStringNumeric;
type BorderTopStyle (line 7955) | type BorderTopStyle = DataType.LineStyle;
type BorderTopWidth (line 7957) | type BorderTopWidth = DataType.LineWidth;
type BorderWidth (line 7959) | type BorderWidth = DataType.LineWidth | OnlyString;
type Bottom (line 7961) | type Bottom = "auto" | OnlyStringNumeric;
type BoxAlign (line 7963) | type BoxAlign = "baseline" | "center" | "end" | "start" | "stretch";
type BoxDecorationBreak (line 7965) | type BoxDecorationBreak = "clone" | "slice";
type BoxDirection (line 7967) | type BoxDirection = "inherit" | "normal" | "reverse";
type BoxFlex (line 7969) | type BoxFlex = OnlyNumber;
type BoxFlexGroup (line 7971) | type BoxFlexGroup = OnlyNumber;
type BoxLines (line 7973) | type BoxLines = "multiple" | "single";
type BoxOrdinalGroup (line 7975) | type BoxOrdinalGroup = OnlyNumber;
type BoxOrient (line 7977) | type BoxOrient = "block-axis" | "horizontal" | "inherit" | "inline-axis"...
type BoxPack (line 7979) | type BoxPack = "center" | "end" | "justify" | "start";
type BoxShadow (line 7981) | type BoxShadow = "none" | OnlyString;
type BoxSizing (line 7983) | type BoxSizing = "border-box" | "content-box";
type BreakAfter (line 7985) | type BreakAfter =
type BreakBefore (line 8001) | type BreakBefore =
type BreakInside (line 8017) | type BreakInside = "auto" | "avoid" | "avoid-column" | "avoid-page" | "a...
type CaptionSide (line 8019) | type CaptionSide = "block-end" | "block-start" | "bottom" | "inline-end"...
type CaretColor (line 8021) | type CaretColor = DataType.Color | "auto";
type Clear (line 8023) | type Clear = "both" | "inline-end" | "inline-start" | "left" | "none" | ...
type Clip (line 8025) | type Clip = "auto" | OnlyString;
type ClipPath (line 8027) | type ClipPath = DataType.GeometryBox | "none" | OnlyString;
type Color (line 8029) | type Color = DataType.Color;
type ColorAdjust (line 8031) | type ColorAdjust = "economy" | "exact";
type ColorScheme (line 8033) | type ColorScheme = "dark" | "light" | "light dark" | "normal" | OnlyString;
type ColumnCount (line 8035) | type ColumnCount = "auto" | OnlyNumber;
type ColumnFill (line 8037) | type ColumnFill = "auto" | "balance";
type ColumnGap (line 8039) | type ColumnGap = "normal" | OnlyStringNumeric;
type ColumnRule (line 8041) | type ColumnRule = DataType.LineWidth | DataType.LineStyle | DataType.Col...
type ColumnRuleColor (line 8043) | type ColumnRuleColor = DataType.Color;
type ColumnRuleStyle (line 8045) | type ColumnRuleStyle = DataType.LineStyle | OnlyString;
type ColumnRuleWidth (line 8047) | type ColumnRuleWidth = DataType.LineWidth | OnlyString;
type ColumnSpan (line 8049) | type ColumnSpan = "all" | "none";
type ColumnWidth (line 8051) | type ColumnWidth = number | "auto";
type Columns (line 8053) | type Columns = "auto" | OnlyStringNumeric;
type Contain (line 8055) | type Contain = "content" | "layout" | "none" | "paint" | "size" | "stric...
type Content (line 8057) | type Content = DataType.ContentList | "none" | "normal" | OnlyString;
type ContentVisibility (line 8059) | type ContentVisibility = "auto" | "hidden" | "visible";
type CounterIncrement (line 8061) | type CounterIncrement = "none" | OnlyString;
type CounterReset (line 8063) | type CounterReset = "none" | OnlyString;
type CounterSet (line 8065) | type CounterSet = "none" | OnlyString;
type Cursor (line 8067) | type Cursor =
type Direction (line 8106) | type Direction = "ltr" | "rtl";
type Display (line 8108) | type Display =
type EmptyCells (line 8118) | type EmptyCells = "hide" | "show";
type Filter (line 8120) | type Filter = "none" | OnlyString;
type Flex (line 8122) | type Flex = "auto" | "content" | "stretch" | "fit-content" | "max-conten...
type FlexBasis (line 8124) | type FlexBasis =
type FlexDirection (line 8134) | type FlexDirection = "column" | "column-reverse" | "row" | "row-reverse";
type FlexFlow (line 8136) | type FlexFlow = "column" | "column-reverse" | "nowrap" | "row" | "row-re...
type FlexGrow (line 8138) | type FlexGrow = OnlyStringNumeric;
type FlexShrink (line 8140) | type FlexShrink = OnlyNumber;
type FlexWrap (line 8142) | type FlexWrap = "nowrap" | "wrap" | "wrap-reverse";
type Float (line 8144) | type Float = "inline-end" | "inline-start" | "left" | "none" | "right";
type Font (line 8146) | type Font = "caption" | "icon" | "menu" | "message-box" | "small-caption...
type FontFamily (line 8148) | type FontFamily = DataType.GenericFamily | OnlyString;
type FontFeatureSettings (line 8150) | type FontFeatureSettings = "normal" | OnlyString;
type FontKerning (line 8152) | type FontKerning = "auto" | "none" | "normal";
type FontLanguageOverride (line 8154) | type FontLanguageOverride = "normal" | OnlyString;
type FontOpticalSizing (line 8156) | type FontOpticalSizing = "auto" | "none";
type FontSize (line 8158) | type FontSize = DataType.AbsoluteSize | "larger" | "smaller" | OnlyStrin...
type FontSizeAdjust (line 8160) | type FontSizeAdjust = "none" | OnlyNumber;
type FontSmooth (line 8162) | type FontSmooth = DataType.AbsoluteSize | number | "always" | "auto" | "...
type FontStretch (line 8164) | type FontStretch = DataType.FontStretchAbsolute;
type FontStyle (line 8166) | type FontStyle = "italic" | "normal" | "oblique" | OnlyString;
type FontSynthesis (line 8168) | type FontSynthesis = "none" | "style" | "weight" | OnlyString;
type FontVariant (line 8170) | type FontVariant =
type FontVariantAlternates (line 8202) | type FontVariantAlternates = "historical-forms" | "normal" | OnlyString;
type FontVariantCaps (line 8204) | type FontVariantCaps = "all-petite-caps" | "all-small-caps" | "normal" |...
type FontVariantEastAsian (line 8206) | type FontVariantEastAsian = DataType.EastAsianVariantValues | "full-widt...
type FontVariantLigatures (line 8208) | type FontVariantLigatures =
type FontVariantNumeric (line 8221) | type FontVariantNumeric =
type FontVariantPosition (line 8233) | type FontVariantPosition = "normal" | "sub" | "super";
type FontVariationSettings (line 8235) | type FontVariationSettings = "normal" | OnlyString;
type FontWeight (line 8237) | type FontWeight = DataType.FontWeightAbsolute | "bolder" | "lighter";
type ForcedColorAdjust (line 8239) | type ForcedColorAdjust = "auto" | "none";
type Gap (line 8241) | type Gap = "normal" | OnlyStringNumeric;
type Grid (line 8243) | type Grid = "none" | OnlyString;
type GridArea (line 8245) | type GridArea = DataType.GridLine | OnlyString;
type GridAutoColumns (line 8247) | type GridAutoColumns = DataType.TrackBreadth | OnlyString;
type GridAutoFlow (line 8249) | type GridAutoFlow = "column" | "dense" | "row" | OnlyString;
type GridAutoRows (line 8251) | type GridAutoRows = DataType.TrackBreadth | OnlyString;
type GridColumn (line 8253) | type GridColumn = DataType.GridLine | OnlyString;
type GridColumnEnd (line 8255) | type GridColumnEnd = DataType.GridLine;
type GridColumnGap (line 8257) | type GridColumnGap = OnlyStringNumeric;
type GridColumnStart (line 8259) | type GridColumnStart = DataType.GridLine;
type GridGap (line 8261) | type GridGap = OnlyStringNumeric;
type GridRow (line 8263) | type GridRow = DataType.GridLine | OnlyString;
type GridRowEnd (line 8265) | type GridRowEnd = DataType.GridLine;
type GridRowGap (line 8267) | type GridRowGap = OnlyStringNumeric;
type GridRowStart (line 8269) | type GridRowStart = DataType.GridLine;
type GridTemplate (line 8271) | type GridTemplate = "none" | OnlyString;
type GridTemplateAreas (line 8273) | type GridTemplateAreas = "none" | OnlyString;
type GridTemplateColumns (line 8275) | type GridTemplateColumns = DataType.TrackBreadth | "none" | "subgrid" | ...
type GridTemplateRows (line 8277) | type GridTemplateRows = DataType.TrackBreadth | "none" | "subgrid" | Onl...
type HangingPunctuation (line 8279) | type HangingPunctuation = "allow-end" | "first" | "force-end" | "last" |...
type Height (line 8281) | type Height =
type Hyphens (line 8290) | type Hyphens = "auto" | "manual" | "none";
type ImageOrientation (line 8292) | type ImageOrientation = "flip" | "from-image" | OnlyString;
type ImageRendering (line 8294) | type ImageRendering = "auto" | "crisp-edges" | "pixelated";
type ImageResolution (line 8296) | type ImageResolution = "from-image" | OnlyString;
type ImeMode (line 8298) | type ImeMode = "active" | "auto" | "disabled" | "inactive" | "normal";
type InitialLetter (line 8300) | type InitialLetter = "normal" | OnlyStringNumeric;
type InlineSize (line 8302) | type InlineSize =
type Inset (line 8311) | type Inset = "auto" | OnlyStringNumeric;
type InsetBlock (line 8313) | type InsetBlock = "auto" | OnlyStringNumeric;
type InsetBlockEnd (line 8315) | type InsetBlockEnd = "auto" | OnlyStringNumeric;
type InsetBlockStart (line 8317) | type InsetBlockStart = "auto" | OnlyStringNumeric;
type InsetInline (line 8319) | type InsetInline = "auto" | OnlyStringNumeric;
type InsetInlineEnd (line 8321) | type InsetInlineEnd = "auto" | OnlyStringNumeric;
type InsetInlineStart (line 8323) | type InsetInlineStart = "auto" | OnlyStringNumeric;
type Isolation (line 8325) | type Isolation = "auto" | "isolate";
type JustifyContent (line 8327) | type JustifyContent = DataType.ContentDistribution | DataType.ContentPos...
type JustifyItems (line 8329) | type JustifyItems = DataType.SelfPosition | "baseline" | "left" | "legac...
type JustifySelf (line 8331) | type JustifySelf = DataType.SelfPosition | "auto" | "baseline" | "left" ...
type JustifyTracks (line 8333) | type JustifyTracks = DataType.ContentDistribution | DataType.ContentPosi...
type Left (line 8335) | type Left = "auto" | OnlyStringNumeric;
type LetterSpacing (line 8337) | type LetterSpacing = "normal" | OnlyStringNumeric;
type LineBreak (line 8339) | type LineBreak = "anywhere" | "auto" | "loose" | "normal" | "strict";
type LineClamp (line 8341) | type LineClamp = "none" | OnlyNumber;
type LineHeight (line 8343) | type LineHeight = "normal" | OnlyStringNumeric;
type LineHeightStep (line 8345) | type LineHeightStep = number;
type ListStyle (line 8347) | type ListStyle = "inside" | "none" | "outside" | OnlyString;
type ListStyleImage (line 8349) | type ListStyleImage = "none" | OnlyString;
type ListStylePosition (line 8351) | type ListStylePosition = "inside" | "outside";
type ListStyleType (line 8353) | type ListStyleType = "none" | OnlyString;
type Margin (line 8355) | type Margin = "auto" | OnlyStringNumeric;
type MarginBlock (line 8357) | type MarginBlock = "auto" | OnlyStringNumeric;
type MarginBlockEnd (line 8359) | type MarginBlockEnd = "auto" | OnlyStringNumeric;
type MarginBlockStart (line 8361) | type MarginBlockStart = "auto" | OnlyStringNumeric;
type MarginBottom (line 8363) | type MarginBottom = "auto" | OnlyStringNumeric;
type MarginInline (line 8365) | type MarginInline = "auto" | OnlyStringNumeric;
type MarginInlineEnd (line 8367) | type MarginInlineEnd = "auto" | OnlyStringNumeric;
type MarginInlineStart (line 8369) | type MarginInlineStart = "auto" | OnlyStringNumeric;
type MarginLeft (line 8371) | type MarginLeft = "auto" | OnlyStringNumeric;
type MarginRight (line 8373) | type MarginRight = "auto" | OnlyStringNumeric;
type MarginTop (line 8375) | type MarginTop = "auto" | OnlyStringNumeric;
type Mask (line 8377) | type Mask = DataType.MaskLayer | OnlyString;
type MaskBorder (line 8379) | type MaskBorder = "alpha" | "luminance" | "none" | "repeat" | "round" | ...
type MaskBorderMode (line 8381) | type MaskBorderMode = "alpha" | "luminance";
type MaskBorderOutset (line 8383) | type MaskBorderOutset = OnlyStringNumeric;
type MaskBorderRepeat (line 8385) | type MaskBorderRepeat = "repeat" | "round" | "space" | "stretch" | OnlyS...
type MaskBorderSlice (line 8387) | type MaskBorderSlice = OnlyStringNumeric;
type MaskBorderSource (line 8389) | type MaskBorderSource = "none" | OnlyString;
type MaskBorderWidth (line 8391) | type MaskBorderWidth = "auto" | OnlyStringNumeric;
type MaskClip (line 8393) | type MaskClip = DataType.GeometryBox | "no-clip" | OnlyString;
type MaskComposite (line 8395) | type MaskComposite = DataType.CompositingOperator | OnlyString;
type MaskImage (line 8397) | type MaskImage = "none" | OnlyString;
type MaskMode (line 8399) | type MaskMode = DataType.MaskingMode | OnlyString;
type MaskOrigin (line 8401) | type MaskOrigin = DataType.Box | "margin-box" | OnlyString;
type MaskPosition (line 8403) | type MaskPosition = DataType.Position | OnlyString;
type MaskRepeat (line 8405) | type MaskRepeat = DataType.RepeatStyle | OnlyString;
type MaskSize (line 8407) | type MaskSize = DataType.BgSize | OnlyString;
type MaskType (line 8409) | type MaskType = "alpha" | "luminance";
type MathStyle (line 8411) | type MathStyle = "compact" | "normal";
type MaxBlockSize (line 8413) | type MaxBlockSize =
type MaxHeight (line 8422) | type MaxHeight =
type MaxInlineSize (line 8432) | type MaxInlineSize =
type MaxLines (line 8441) | type MaxLines = "none" | OnlyNumber;
type MaxWidth (line 8443) | type MaxWidth =
type MinBlockSize (line 8453) | type MinBlockSize =
type MinHeight (line 8462) | type MinHeight =
type MinInlineSize (line 8472) | type MinInlineSize =
type MinWidth (line 8481) | type MinWidth =
type MixBlendMode (line 8492) | type MixBlendMode = DataType.BlendMode;
type Offset (line 8494) | type Offset = DataType.Position | DataType.GeometryBox | "auto" | "none"...
type OffsetDistance (line 8496) | type OffsetDistance = OnlyStringNumeric;
type OffsetPath (line 8498) | type OffsetPath = DataType.GeometryBox | "none" | OnlyString;
type OffsetRotate (line 8500) | type OffsetRotate = "auto" | "reverse" | OnlyString;
type ObjectFit (line 8502) | type ObjectFit = "contain" | "cover" | "fill" | "none" | "scale-down";
type ObjectPosition (line 8504) | type ObjectPosition = DataType.Position;
type OffsetAnchor (line 8506) | type OffsetAnchor = DataType.Position | "auto";
type Opacity (line 8508) | type Opacity = OnlyStringNumeric;
type Order (line 8510) | type Order = OnlyNumber;
type Orphans (line 8512) | type Orphans = OnlyNumber;
type Outline (line 8514) | type Outline = DataType.Color | DataType.LineStyle | DataType.LineWidth ...
type OutlineColor (line 8516) | type OutlineColor = DataType.Color | "invert";
type OutlineOffset (line 8518) | type OutlineOffset = number;
type OutlineStyle (line 8520) | type OutlineStyle = DataType.LineStyle | "auto" | OnlyString;
type OutlineWidth (line 8522) | type OutlineWidth = DataType.LineWidth;
type Overflow (line 8524) | type Overflow = "auto" | "clip" | "hidden" | "scroll" | "visible" | Only...
type OverflowAnchor (line 8526) | type OverflowAnchor = "auto" | "none";
type OverflowBlock (line 8528) | type OverflowBlock = "auto" | "clip" | "hidden" | "scroll" | "visible";
type OverflowClipBox (line 8530) | type OverflowClipBox = "content-box" | "padding-box";
type OverflowClipMargin (line 8532) | type OverflowClipMargin = DataType.VisualBox | OnlyStringNumeric;
type OverflowInline (line 8534) | type OverflowInline = "auto" | "clip" | "hidden" | "scroll" | "visible";
type OverflowWrap (line 8536) | type OverflowWrap = "anywhere" | "break-word" | "normal";
type OverflowX (line 8538) | type OverflowX = "auto" | "clip" | "hidden" | "scroll" | "visible";
type OverflowY (line 8540) | type OverflowY = "auto" | "clip" | "hidden" | "scroll" | "visible";
type OverscrollBehavior (line 8542) | type OverscrollBehavior = "auto" | "contain" | "none" | OnlyString;
type OverscrollBehaviorBlock (line 8544) | type OverscrollBehaviorBlock = "auto" | "contain" | "none";
type OverscrollBehaviorInline (line 8546) | type OverscrollBehaviorInline = "auto" | "contain" | "none";
type OverscrollBehaviorX (line 8548) | type OverscrollBehaviorX = "auto" | "contain" | "none";
type OverscrollBehaviorY (line 8550) | type OverscrollBehaviorY = "auto" | "contain" | "none";
type Padding (line 8552) | type Padding = OnlyStringNumeric;
type PaddingBlock (line 8554) | type PaddingBlock = OnlyStringNumeric;
type PaddingBlockEnd (line 8556) | type PaddingBlockEnd = OnlyStringNumeric;
type PaddingBlockStart (line 8558) | type PaddingBlockStart = OnlyStringNumeric;
type PaddingBottom (line 8560) | type PaddingBottom = OnlyStringNumeric;
type PaddingInline (line 8562) | type PaddingInline = OnlyStringNumeric;
type PaddingInlineEnd (line 8564) | type PaddingInlineEnd = OnlyStringNumeric;
type PaddingInlineStart (line 8566) | type PaddingInlineStart = OnlyStringNumeric;
type PaddingLeft (line 8568) | type PaddingLeft = OnlyStringNumeric;
type PaddingRight (line 8570) | type PaddingRight = OnlyStringNumeric;
type PaddingTop (line 8572) | type PaddingTop = OnlyStringNumeric;
type PageBreakAfter (line 8574) | type PageBreakAfter = "always" | "auto" | "avoid" | "left" | "recto" | "...
type PageBreakBefore (line 8576) | type PageBreakBefore = "always" | "auto" | "avoid" | "left" | "recto" | ...
type PageBreakInside (line 8578) | type PageBreakInside = "auto" | "avoid";
type PaintOrder (line 8580) | type PaintOrder = "fill" | "markers" | "normal" | "stroke" | OnlyString;
type Perspective (line 8582) | type Perspective = number | "none";
type PerspectiveOrigin (line 8584) | type PerspectiveOrigin = DataType.Position;
type PlaceContent (line 8586) | type PlaceContent = DataType.ContentDistribution | DataType.ContentPosit...
type PlaceItems (line 8588) | type PlaceItems = DataType.SelfPosition | "baseline" | "normal" | "stret...
type PlaceSelf (line 8590) | type PlaceSelf = DataType.SelfPosition | "auto" | "baseline" | "normal" ...
type PointerEvents (line 8592) | type PointerEvents = "all" | "auto" | "fill" | "inherit" | "none" | "pai...
type Position (line 8594) | type Position = "absolute" | "fixed" | "relative" | "static" | "sticky";
type Quotes (line 8596) | type Quotes = "auto" | "none" | OnlyString;
type Resize (line 8598) | type Resize = "block" | "both" | "horizontal" | "inline" | "none" | "ver...
type Right (line 8600) | type Right = "auto" | OnlyStringNumeric;
type Rotate (line 8602) | type Rotate = "none" | OnlyString;
type RowGap (line 8604) | type RowGap = "normal" | OnlyStringNumeric;
type RubyAlign (line 8606) | type RubyAlign = "center" | "space-around" | "space-between" | "start";
type RubyMerge (line 8608) | type RubyMerge = "auto" | "collapse" | "separate";
type RubyPosition (line 8610) | type RubyPosition = "alternate" | "over" | "under" | OnlyString;
type Scale (line 8612) | type Scale = "none" | OnlyStringNumeric;
type ScrollBehavior (line 8614) | type ScrollBehavior = "auto" | "smooth";
type ScrollMargin (line 8616) | type ScrollMargin = OnlyStringNumeric;
type ScrollMarginBlock (line 8618) | type ScrollMarginBlock = OnlyStringNumeric;
type ScrollMarginBlockEnd (line 8620) | type ScrollMarginBlockEnd = number;
type ScrollMarginBlockStart (line 8622) | type ScrollMarginBlockStart = number;
type ScrollMarginBottom (line 8624) | type ScrollMarginBottom = number;
type ScrollMarginInline (line 8626) | type ScrollMarginInline = OnlyStringNumeric;
type ScrollMarginInlineEnd (line 8628) | type ScrollMarginInlineEnd = number;
type ScrollMarginInlineStart (line 8630) | type ScrollMarginInlineStart = number;
type ScrollMarginLeft (line 8632) | type ScrollMarginLeft = number;
type ScrollMarginRight (line 8634) | type ScrollMarginRight = number;
type ScrollMarginTop (line 8636) | type ScrollMarginTop = number;
type ScrollPadding (line 8638) | type ScrollPadding = "auto" | OnlyStringNumeric;
type ScrollPaddingBlock (line 8640) | type ScrollPaddingBlock = "auto" | OnlyStringNumeric;
type ScrollPaddingBlockEnd (line 8642) | type ScrollPaddingBlockEnd = "auto" | OnlyStringNumeric;
type ScrollPaddingBlockStart (line 8644) | type ScrollPaddingBlockStart = "auto" | OnlyStringNumeric;
type ScrollPaddingBottom (line 8646) | type ScrollPaddingBottom = "auto" | OnlyStringNumeric;
type ScrollPaddingInline (line 8648) | type ScrollPaddingInline = "auto" | OnlyStringNumeric;
type ScrollPaddingInlineEnd (line 8650) | type ScrollPaddingInlineEnd = "auto" | OnlyStringNumeric;
type ScrollPaddingInlineStart (line 8652) | type ScrollPaddingInlineStart = "auto" | OnlyStringNumeric;
type ScrollPaddingLeft (line 8654) | type ScrollPaddingLeft = "auto" | OnlyStringNumeric;
type ScrollPaddingRight (line 8656) | type ScrollPaddingRight = "auto" | OnlyStringNumeric;
type ScrollPaddingTop (line 8658) | type ScrollPaddingTop = "auto" | OnlyStringNumeric;
type ScrollSnapAlign (line 8660) | type ScrollSnapAlign = "center" | "end" | "none" | "start" | OnlyString;
type ScrollSnapCoordinate (line 8662) | type ScrollSnapCoordinate = DataType.Position | "none" | OnlyString;
type ScrollSnapDestination (line 8664) | type ScrollSnapDestination = DataType.Position;
type ScrollSnapPointsX (line 8666) | type ScrollSnapPointsX = "none" | OnlyString;
type ScrollSnapPointsY (line 8668) | type ScrollSnapPointsY = "none" | OnlyString;
type ScrollSnapStop (line 8670) | type ScrollSnapStop = "always" | "normal";
type ScrollSnapType (line 8672) | type ScrollSnapType = "block" | "both" | "inline" | "none" | "x" | "y" |...
type ScrollSnapTypeX (line 8674) | type ScrollSnapTypeX = "mandatory" | "none" | "proximity";
type ScrollSnapTypeY (line 8676) | type ScrollSnapTypeY = "mandatory" | "none" | "proximity";
type ScrollbarColor (line 8678) | type ScrollbarColor = DataType.Color | "auto" | "dark" | "light";
type ScrollbarGutter (line 8680) | type ScrollbarGutter = "always" | "auto" | "stable" | OnlyString;
type MsScrollbarTrackColor (line 8682) | type MsScrollbarTrackColor = DataType.Color;
type ScrollbarWidth (line 8684) | type ScrollbarWidth = "auto" | "none" | "thin";
type ShapeImageThreshold (line 8686) | type ShapeImageThreshold = OnlyStringNumeric;
type ShapeMargin (line 8688) | type ShapeMargin = OnlyStringNumeric;
type ShapeOutside (line 8690) | type ShapeOutside = DataType.Box | "margin-box" | "none" | OnlyString;
type TabSize (line 8692) | type TabSize = number | OnlyNumber;
type TableLayout (line 8694) | type TableLayout = "auto" | "fixed";
type TextAlign (line 8696) | type TextAlign = "center" | "end" | "justify" | "left" | "match-parent" ...
type TextAlignLast (line 8698) | type TextAlignLast = "auto" | "center" | "end" | "justify" | "left" | "r...
type TextCombineUpright (line 8700) | type TextCombineUpright = "all" | "digits" | "none" | OnlyString;
type TextDecoration (line 8702) | type TextDecoration =
type TextDecorationColor (line 8721) | type TextDecorationColor = DataType.Color;
type TextDecorationLine (line 8723) | type TextDecorationLine = "blink" | "grammar-error" | "line-through" | "...
type TextDecorationSkip (line 8725) | type TextDecorationSkip = "box-decoration" | "edges" | "leading-spaces" ...
type TextDecorationSkipInk (line 8727) | type TextDecorationSkipInk = "all" | "auto" | "none";
type TextDecorationStyle (line 8729) | type TextDecorationStyle = "dashed" | "dotted" | "double" | "solid" | "w...
type TextDecorationThickness (line 8731) | type TextDecorationThickness = "auto" | "from-font" | OnlyStringNumeric;
type TextEmphasis (line 8733) | type TextEmphasis = DataType.Color | "circle" | "dot" | "double-circle" ...
type TextEmphasisColor (line 8735) | type TextEmphasisColor = DataType.Color;
type TextEmphasisPosition (line 8737) | type TextEmphasisPosition = OnlyString;
type TextEmphasisStyle (line 8739) | type TextEmphasisStyle = "circle" | "dot" | "double-circle" | "filled" |...
type TextIndent (line 8741) | type TextIndent = OnlyStringNumeric;
type TextJustify (line 8743) | type TextJustify = "auto" | "inter-character" | "inter-word" | "none";
type TextOrientation (line 8745) | type TextOrientation = "mixed" | "sideways" | "upright";
type TextOverflow (line 8747) | type TextOverflow = "clip" | "ellipsis" | OnlyString;
type TextRendering (line 8749) | type TextRendering = "auto" | "geometricPrecision" | "optimizeLegibility...
type TextShadow (line 8751) | type TextShadow = "none" | OnlyString;
type TextSizeAdjust (line 8753) | type TextSizeAdjust = "auto" | "none" | OnlyString;
type TextTransform (line 8755) | type TextTransform = "capitalize" | "full-size-kana" | "full-width" | "l...
type TextUnderlineOffset (line 8757) | type TextUnderlineOffset = "auto" | OnlyStringNumeric;
type TextUnderlinePosition (line 8759) | type TextUnderlinePosition = "auto" | "from-font" | "left" | "right" | "...
type Top (line 8761) | type Top = "auto" | OnlyStringNumeric;
type TouchAction (line 8763) | type TouchAction =
type Transform (line 8776) | type Transform = "none" | OnlyString;
type TransformBox (line 8778) | type TransformBox = "border-box" | "content-box" | "fill-box" | "stroke-...
type TransformOrigin (line 8780) | type TransformOrigin = "bottom" | "center" | "left" | "right" | "top" | ...
type TransformStyle (line 8782) | type TransformStyle = "flat" | "preserve-3d";
type Transition (line 8784) | type Transition = DataType.SingleTransition | OnlyString;
type TransitionDelay (line 8786) | type TransitionDelay = never | OnlyString;
type TransitionDuration (line 8788) | type TransitionDuration = never | OnlyString;
type TransitionProperty (line 8790) | type TransitionProperty = "all" | "none" | OnlyString;
type TransitionTimingFunction (line 8792) | type TransitionTimingFunction = DataType.EasingFunction | OnlyString;
type Translate (line 8794) | type Translate = "none" | OnlyStringNumeric;
type UnicodeBidi (line 8796) | type UnicodeBidi =
type UserSelect (line 8804) | type UserSelect = "all" | "auto" | "contain" | "element" | "none" | "text";
type VerticalAlign (line 8806) | type VerticalAlign =
type Visibility (line 8818) | type Visibility = "collapse" | "hidden" | "visible";
type WhiteSpace (line 8820) | type WhiteSpace = "break-spaces" | "normal" | "nowrap" | "pre" | "pre-li...
type Widows (line 8822) | type Widows = OnlyNumber;
type Width (line 8824) | type Width =
type WillChange (line 8835) | type WillChange = DataType.AnimateableFeature | "auto" | OnlyString;
type WordBreak (line 8837) | type WordBreak = "break-all" | "break-word" | "keep-all" | "normal";
type WordSpacing (line 8839) | type WordSpacing = "normal" | OnlyStringNumeric;
type WordWrap (line 8841) | type WordWrap = "break-word" | "normal";
type WritingMode (line 8843) | type WritingMode = "horizontal-tb" | "sideways-lr" | "sideways-rl" | "ve...
type ZIndex (line 8845) | type ZIndex = "auto" | OnlyStringNumeric;
type Zoom (line 8847) | type Zoom = "normal" | "reset" | OnlyStringNumeric;
type MozAppearance (line 8849) | type MozAppearance =
type MozBinding (line 8941) | type MozBinding = "none" | OnlyString;
type MozBorderBottomColors (line 8943) | type MozBorderBottomColors = DataType.Color | "none" | OnlyString;
type MozBorderLeftColors (line 8945) | type MozBorderLeftColors = DataType.Color | "none" | OnlyString;
type MozBorderRightColors (line 8947) | type MozBorderRightColors = DataType.Color | "none" | OnlyString;
type MozBorderTopColors (line 8949) | type MozBorderTopColors = DataType.Color | "none" | OnlyString;
type MozContextProperties (line 8951) | type MozContextProperties = "fill" | "fill-opacity" | "none" | "stroke" ...
type MozFloatEdge (line 8953) | type MozFloatEdge = "border-box" | "content-box" | "margin-box" | "paddi...
type MozForceBrokenImageIcon (line 8955) | type MozForceBrokenImageIcon = OnlyNumber;
type MozImageRegion (line 8957) | type MozImageRegion = "auto" | OnlyString;
type MozOrient (line 8959) | type MozOrient = "block" | "horizontal" | "inline" | "vertical";
type MozOutlineRadius (line 8961) | type MozOutlineRadius = OnlyStringNumeric;
type MozOutlineRadiusBottomleft (line 8963) | type MozOutlineRadiusBottomleft = OnlyStringNumeric;
type MozOutlineRadiusBottomright (line 8965) | type MozOutlineRadiusBottomright = OnlyStringNumeric;
type MozOutlineRadiusTopleft (line 8967) | type MozOutlineRadiusTopleft = OnlyStringNumeric;
type MozOutlineRadiusTopright (line 8969) | type MozOutlineRadiusTopright = OnlyStringNumeric;
type MozStackSizing (line 8971) | type MozStackSizing = "ignore" | "stretch-to-fit";
type MozTextBlink (line 8973) | type MozTextBlink = "blink" | "none";
type MozUserFocus (line 8975) | type MozUserFocus = "ignore" | "none" | "normal" | "select-after" | "sel...
type MozUserInput (line 8977) | type MozUserInput = "auto" | "disabled" | "enabled" | "none";
type MozUserModify (line 8979) | type MozUserModify = "read-only" | "read-write" | "write-only";
type MozWindowDragging (line 8981) | type MozWindowDragging = "drag" | "no-drag";
type MozWindowShadow (line 8983) | type MozWindowShadow = "default" | "menu" | "none" | "sheet" | "tooltip";
type MsAccelerator (line 8985) | type MsAccelerator = "false" | "true";
type MsBlockProgression (line 8987) | type MsBlockProgression = "bt" | "lr" | "rl" | "tb";
type MsContentZoomChaining (line 8989) | type MsContentZoomChaining = "chained" | "none";
type MsContentZoomLimit (line 8991) | type MsContentZoomLimit = OnlyString;
type MsContentZoomLimitMax (line 8993) | type MsContentZoomLimitMax = OnlyString;
type MsContentZoomLimitMin (line 8995) | type MsContentZoomLimitMin = OnlyString;
type MsContentZoomSnap (line 8997) | type MsContentZoomSnap = "mandatory" | "none" | "proximity" | OnlyString;
type MsContentZoomSnapPoints (line 8999) | type MsContentZoomSnapPoints = OnlyString;
type MsContentZoomSnapType (line 9001) | type MsContentZoomSnapType = "mandatory" | "none" | "proximity";
type MsContentZooming (line 9003) | type MsContentZooming = "none" | "zoom";
type MsFilter (line 9005) | type MsFilter = OnlyString;
type MsFlowFrom (line 9007) | type MsFlowFrom = "none" | OnlyString;
type MsFlowInto (line 9009) | type MsFlowInto = "none" | OnlyString;
type MsGridColumns (line 9011) | type MsGridColumns = DataType.TrackBreadth | "none" | OnlyString;
type MsGridRows (line 9013) | type MsGridRows = DataType.TrackBreadth | "none" | OnlyString;
type MsHighContrastAdjust (line 9015) | type MsHighContrastAdjust = "auto" | "none";
type MsHyphenateLimitChars (line 9017) | type MsHyphenateLimitChars = "auto" | OnlyStringNumeric;
type MsHyphenateLimitLines (line 9019) | type MsHyphenateLimitLines = "no-limit" | OnlyNumber;
type MsHyphenateLimitZone (line 9021) | type MsHyphenateLimitZone = OnlyStringNumeric;
type MsImeAlign (line 9023) | type MsImeAlign = "after" | "auto";
type MsOverflowStyle (line 9025) | type MsOverflowStyle = "auto" | "none" | "scrollbar";
type MsScrollChaining (line 9027) | type MsScrollChaining = "chained" | "none";
type MsScrollLimit (line 9029) | type MsScrollLimit = OnlyString;
type MsScrollLimitXMax (line 9031) | type MsScrollLimitXMax = number | "auto";
type MsScrollLimitXMin (line 9033) | type MsScrollLimitXMin = number;
type MsScrollLimitYMax (line 9035) | type MsScrollLimitYMax = number | "auto";
type MsScrollLimitYMin (line 9037) | type MsScrollLimitYMin = number;
type MsScrollRails (line 9039) | type MsScrollRails = "none" | "railed";
type MsScrollSnapPointsX (line 9041) | type MsScrollSnapPointsX = OnlyString;
type MsScrollSnapPointsY (line 9043) | type MsScrollSnapPointsY = OnlyString;
type MsScrollSnapType (line 9045) | type MsScrollSnapType = "mandatory" | "none" | "proximity";
type MsScrollSnapX (line 9047) | type MsScrollSnapX = OnlyString;
type MsScrollSnapY (line 9049) | type MsScrollSnapY = OnlyString;
type MsScrollTranslation (line 9051) | type MsScrollTranslation = "none" | "vertical-to-horizontal";
type MsScrollbar3dlightColor (line 9053) | type MsScrollbar3dlightColor = DataType.Color;
type MsScrollbarArrowColor (line 9055) | type MsScrollbarArrowColor = DataType.Color;
type MsScrollbarBaseColor (line 9057) | type MsScrollbarBaseColor = DataType.Color;
type MsScrollbarDarkshadowColor (line 9059) | type MsScrollbarDarkshadowColor = DataType.Color;
type MsScrollbarFaceColor (line 9061) | type MsScrollbarFaceColor = DataType.Color;
type MsScrollbarHighlightColor (line 9063) | type MsScrollbarHighlightColor = DataType.Color;
type MsScrollbarShadowColor (line 9065) | type MsScrollbarShadowColor = DataType.Color;
type MsTextAutospace (line 9067) | type MsTextAutospace = "ideograph-alpha" | "ideograph-numeric" | "ideogr...
type MsTouchSelect (line 9069) | type MsTouchSelect = "grippers" | "none";
type MsUserSelect (line 9071) | type MsUserSelect = "element" | "none" | "text";
type MsWrapFlow (line 9073) | type MsWrapFlow = "auto" | "both" | "clear" | "end" | "maximum" | "start";
type MsWrapMargin (line 9075) | type MsWrapMargin = number;
type MsWrapThrough (line 9077) | type MsWrapThrough = "none" | "wrap";
type WebkitAppearance (line 9079) | type WebkitAppearance =
type WebkitBorderBefore (line 9129) | type WebkitBorderBefore = DataType.LineWidth | DataType.LineStyle | Data...
type WebkitBorderBeforeColor (line 9131) | type WebkitBorderBeforeColor = DataType.Color;
type WebkitBorderBeforeStyle (line 9133) | type WebkitBorderBeforeStyle = DataType.LineStyle | OnlyString;
type WebkitBorderBeforeWidth (line 9135) | type WebkitBorderBeforeWidth = DataType.LineWidth | OnlyString;
type WebkitBoxReflect (line 9137) | type WebkitBoxReflect = "above" | "below" | "left" | "right" | OnlyStrin...
type WebkitLineClamp (line 9139) | type WebkitLineClamp = "none" | OnlyNumber;
type WebkitMask (line 9141) | type WebkitMask =
type WebkitMaskAttachment (line 9152) | type WebkitMaskAttachment = DataType.Attachment | OnlyString;
type WebkitMaskClip (line 9154) | type WebkitMaskClip = DataType.Box | "border" | "content" | "padding" | ...
type WebkitMaskComposite (line 9156) | type WebkitMaskComposite = DataType.CompositeStyle | OnlyString;
type WebkitMaskImage (line 9158) | type WebkitMaskImage = "none" | OnlyString;
type WebkitMaskOrigin (line 9160) | type WebkitMaskOrigin = DataType.Box | "border" | "content" | "padding" ...
type WebkitMaskPosition (line 9162) | type WebkitMaskPosition = DataType.Position | OnlyString;
type WebkitMaskPositionX (line 9164) | type WebkitMaskPositionX = "center" | "left" | "right" | OnlyStringNumeric;
type WebkitMaskPositionY (line 9166) | type WebkitMaskPositionY = "bottom" | "center" | "top" | OnlyStringNumeric;
type WebkitMaskRepeat (line 9168) | type WebkitMaskRepeat = DataType.RepeatStyle | OnlyString;
type WebkitMaskRepeatX (line 9170) | type WebkitMaskRepeatX = "no-repeat" | "repeat" | "round" | "space";
type WebkitMaskRepeatY (line 9172) | type WebkitMaskRepeatY = "no-repeat" | "repeat" | "round" | "space";
type WebkitMaskSize (line 9174) | type WebkitMaskSize = DataType.BgSize | OnlyString;
type WebkitOverflowScrolling (line 9176) | type WebkitOverflowScrolling = "auto" | "touch";
type WebkitTapHighlightColor (line 9178) | type WebkitTapHighlightColor = DataType.Color;
type WebkitTextFillColor (line 9180) | type WebkitTextFillColor = DataType.Color;
type WebkitTextStroke (line 9182) | type WebkitTextStroke = DataType.Color | OnlyStringNumeric;
type WebkitTextStrokeColor (line 9184) | type WebkitTextStrokeColor = DataType.Color;
type WebkitTextStrokeWidth (line 9186) | type WebkitTextStrokeWidth = number;
type WebkitTouchCallout (line 9188) | type WebkitTouchCallout = "default" | "none";
type WebkitUserModify (line 9190) | type WebkitUserModify = "read-only" | "read-write" | "read-write-plainte...
type AlignmentBaseline (line 9192) | type AlignmentBaseline =
type BaselineShift (line 9206) | type BaselineShift = "baseline" | "sub" | "super" | OnlyStringNumeric;
type ClipRule (line 9208) | type ClipRule = "evenodd" | "nonzero";
type ColorInterpolation (line 9210) | type ColorInterpolation = "auto" | "linearRGB" | "sRGB";
type ColorRendering (line 9212) | type ColorRendering = "auto" | "optimizeQuality" | "optimizeSpeed";
type DominantBaseline (line 9214) | type DominantBaseline =
type Fill (line 9228) | type Fill = DataType.Paint;
type FillOpacity (line 9230) | type FillOpacity = OnlyNumber;
type FillRule (line 9232) | type FillRule = "evenodd" | "nonzero";
type FloodColor (line 9234) | type FloodColor = DataType.Color | "CurrentColor" | "hsl(" | "lab(" | "r...
type FloodOpacity (line 9236) | type FloodOpacity = OnlyNumber;
type GlyphOrientationVertical (line 9238) | type GlyphOrientationVertical = "auto" | OnlyStringNumeric;
type LightingColor (line 9240) | type LightingColor = DataType.Color | "CurrentColor" | "hsl(" | "lab(" |...
type Marker (line 9242) | type Marker = "none" | OnlyString;
type MarkerEnd (line 9244) | type MarkerEnd = "none" | OnlyString;
type MarkerMid (line 9246) | type MarkerMid = "none" | OnlyString;
type MarkerStart (line 9248) | type MarkerStart = "none" | OnlyString;
type ShapeRendering (line 9250) | type ShapeRendering = "auto" | "crispEdges" | "geometricPrecision" | "op...
type StopColor (line 9252) | type StopColor = DataType.Color | "CurrentColor" | "hsl(" | "lab(" | "rg...
type StopOpacity (line 9254) | type StopOpacity = OnlyNumber;
type Stroke (line 9256) | type Stroke = DataType.Paint;
type StrokeDasharray (line 9258) | type StrokeDasharray = DataType.Dasharray | "none";
type StrokeDashoffset (line 9260) | type StrokeDashoffset = OnlyStringNumeric;
type StrokeLinecap (line 9262) | type StrokeLinecap = "butt" | "round" | "square";
type StrokeLinejoin (line 9264) | type StrokeLinejoin = "bevel" | "miter" | "round";
type StrokeMiterlimit (line 9266) | type StrokeMiterlimit = OnlyNumber;
type StrokeOpacity (line 9268) | type StrokeOpacity = OnlyNumber;
type StrokeWidth (line 9270) | type StrokeWidth = OnlyStringNumeric;
type TextAnchor (line 9272) | type TextAnchor = "end" | "middle" | "start";
type VectorEffect (line 9274) | type VectorEffect = "non-scaling-stroke" | "none";
type CounterStyle (line 9278) | interface CounterStyle {
type CounterStyleHyphen (line 9291) | interface CounterStyleHyphen {
type CounterStyleFallback (line 9304) | type CounterStyleFallback = {
type CounterStyleHyphenFallback (line 9308) | type CounterStyleHyphenFallback = {
type FontFace (line 9312) | interface FontFace {
type FontFaceHyphen (line 9331) | interface FontFaceHyphen {
type FontFaceFallback (line 9349) | type FontFaceFallback = {
type FontFaceHyphenFallback (line 9353) | type FontFaceHyphenFallback = {
type Page (line 9357) | interface Page {
type PageHyphen (line 9361) | interface PageHyphen {
type PageFallback (line 9365) | type PageFallback = {
type PageHyphenFallback (line 9369) | type PageHyphenFallback = {
type Property (line 9373) | interface Property {
type PropertyHyphen (line 9379) | interface PropertyHyphen {
type PropertyFallback (line 9385) | type PropertyFallback = {
type PropertyHyphenFallback (line 9389) | type PropertyHyphenFallback = {
type Viewport (line 9393) | interface Viewport {
type ViewportHyphen (line 9408) | interface ViewportHyphen {
type ViewportFallback (line 9423) | type ViewportFallback = {
type ViewportHyphenFallback (line 9427) | type ViewportHyphenFallback = {
type Range (line 9431) | type Range = "auto" | "infinite" | OnlyStringNumeric;
type SpeakAs (line 9433) | type SpeakAs = "auto" | "bullets" | "numbers" | "spell-out" | "words" | ...
type System (line 9435) | type System = "additive" | "alphabetic" | "cyclic" | "fixed" | "numeric"...
type FontFeatureSettings (line 9437) | type FontFeatureSettings = "normal" | OnlyString;
type FontDisplay (line 9439) | type FontDisplay = "auto" | "block" | "fallback" | "optional" | "swap";
type FontStretch (line 9441) | type FontStretch = DataType.FontStretchAbsolute | OnlyString;
type FontStyle (line 9443) | type FontStyle = "italic" | "normal" | "oblique" | OnlyString;
type FontVariant (line 9445) | type FontVariant =
type FontVariationSettings (line 9477) | type FontVariationSettings = "normal" | OnlyString;
type FontWeight (line 9479) | type FontWeight = DataType.FontWeightAbsolute;
type Size (line 9481) | type Size = DataType.PageSize | "auto" | "landscape" | "portrait" | Only...
type Inherits (line 9483) | type Inherits = "false" | "true" | boolean;
type Height (line 9485) | type Height = DataType.ViewportLength | OnlyString;
type MaxHeight (line 9487) | type MaxHeight = DataType.ViewportLength;
type MaxWidth (line 9489) | type MaxWidth = DataType.ViewportLength;
type MaxZoom (line 9491) | type MaxZoom = "auto" | OnlyStringNumeric;
type MinHeight (line 9493) | type MinHeight = DataType.ViewportLength;
type MinWidth (line 9495) | type MinWidth = DataType.ViewportLength;
type MinZoom (line 9497) | type MinZoom = "auto" | OnlyStringNumeric;
type Orientation (line 9499) | type Orientation = "auto" | "landscape" | "portrait";
type UserZoom (line 9501) | type UserZoom = "fixed" | "zoom";
type ViewportFit (line 9503) | type ViewportFit = "auto" | "contain" | "cover";
type Width (line 9505) | type Width = DataType.ViewportLength | OnlyString;
type Zoom (line 9507) | type Zoom = "auto" | OnlyStringNumeric;
type AbsoluteSize (line 9511) | type AbsoluteSize = "large" | "medium" | "small" | "x-large" | "x-small"...
type AnimateableFeature (line 9513) | type AnimateableFeature = "contents" | "scroll-position" | OnlyString;
type Attachment (line 9515) | type Attachment = "fixed" | "local" | "scroll";
type BgPosition (line 9517) | type BgPosition = "bottom" | "center" | "left" | "right" | "top" | OnlyS...
type BgSize (line 9519) | type BgSize = "auto" | "contain" | "cover" | OnlyStringNumeric;
type BlendMode (line 9521) | type BlendMode =
type Box (line 9539) | type Box = "border-box" | "content-box" | "padding-box";
type Color (line 9541) | type Color = NamedColor | SystemColor | "CurrentColor" | "hsl(" | "lab("...
type CompatAuto (line 9543) | type CompatAuto =
type CompositeStyle (line 9557) | type CompositeStyle =
type CompositingOperator (line 9570) | type CompositingOperator = "add" | "exclude" | "intersect" | "subtract";
type ContentDistribution (line 9572) | type ContentDistribution = "space-around" | "space-between" | "space-eve...
type ContentList (line 9574) | type ContentList = Quote | "contents" | OnlyString;
type ContentPosition (line 9576) | type ContentPosition = "center" | "end" | "flex-end" | "flex-start" | "s...
type CubicBezierTimingFunction (line 9578) | type CubicBezierTimingFunction = "ease" | "ease-in" | "ease-in-out" | "e...
type Dasharray (line 9580) | type Dasharray = OnlyStringNumeric;
type SystemColor (line 9582) | type SystemColor = "ActiveText" | "ButtonFace" | "ButtonText" | "ButtonB...
type DisplayInside (line 9584) | type DisplayInside = "flex" | "flow" | "flow-root" | "grid" | "ruby" | "...
type DisplayInternal (line 9586) | type DisplayInternal =
type DisplayLegacy (line 9600) | type DisplayLegacy = "inline-block" | "inline-flex" | "inline-grid" | "i...
type DisplayOutside (line 9602) | type DisplayOutside = "block" | "inline" | "run-in";
type EasingFunction (line 9604) | type EasingFunction = CubicBezierTimingFunction | StepTimingFunction | "...
type EastAsianVariantValues (line 9606) | type EastAsianVariantValues = "jis04" | "jis78" | "jis83" | "jis90" | "s...
type FinalBgLayer (line 9608) | type FinalBgLayer = Color | BgPosition | RepeatStyle | Attachment | Box ...
type FontStretchAbsolute (line 9610) | type FontStretchAbsolute =
type FontWeightAbsolute (line 9622) | type FontWeightAbsolute = "bold" | "normal" | OnlyStringNumeric;
type GenericFamily (line 9624) | type GenericFamily = "cursive" | "emoji" | "fangsong" | "fantasy" | "mat...
type GeometryBox (line 9626) | type GeometryBox = Box | "fill-box" | "margin-box" | "stroke-box" | "vie...
type GridLine (line 9628) | type GridLine = "auto" | OnlyStringNumeric;
type LineStyle (line 9630) | type LineStyle = "dashed" | "dotted" | "double" | "groove" | "hidden" | ...
type LineWidth (line 9632) | type LineWidth = number | "medium" | "thick" | "thin";
type MaskLayer (line 9634) | type MaskLayer = Position | RepeatStyle | GeometryBox | CompositingOpera...
type MaskingMode (line 9636) | type MaskingMode = "alpha" | "luminance" | "match-source";
type NamedColor (line 9638) | type NamedColor =
type PageSize (line 9789) | type PageSize = "A3" | "A4" | "A5" | "B4" | "B5" | "JIS-B4" | "JIS-B5" |...
type Paint (line 9791) | type Paint = Color | "child" | "context-fill" | "context-stroke" | "none...
type Position (line 9793) | type Position = "bottom" | "center" | "left" | "right" | "top" | OnlyStr...
type Quote (line 9795) | type Quote = "close-quote" | "no-close-quote" | "no-open-quote" | "open-...
type RepeatStyle (line 9797) | type RepeatStyle = "no-repeat" | "repeat" | "repeat-x" | "repeat-y" | "r...
type SelfPosition (line 9799) | type SelfPosition = "center" | "end" | "flex-end" | "flex-start" | "self...
type SingleAnimation (line 9801) | type SingleAnimation =
type SingleAnimationDirection (line 9812) | type SingleAnimationDirection = "alternate" | "alternate-reverse" | "nor...
type SingleAnimationFillMode (line 9814) | type SingleAnimationFillMode = "backwards" | "both" | "forwards" | "none";
type SingleTransition (line 9816) | type SingleTransition = EasingFunction | "all" | "none" | OnlyString;
type StepTimingFunction (line 9818) | type StepTimingFunction = "step-end" | "step-start" | OnlyString;
type TrackBreadth (line 9820) | type TrackBreadth = "auto" | "max-content" | "min-content" | OnlyStringN...
type ViewportLength (line 9822) | type ViewportLength = "auto" | OnlyStringNumeric;
type VisualBox (line 9824) | type VisualBox = "border-box" | "content-box" | "padding-box";
FILE: packages/react/types/index.d.ts
type CreateStitches (line 8) | type CreateStitches = Config.CreateStitches
type CSSProperties (line 9) | type CSSProperties = CSSUtil.CSSProperties
type DefaultThemeMap (line 10) | type DefaultThemeMap = Config.DefaultThemeMap
type FontFace (line 11) | type FontFace = CSSUtil.Native.AtRule.FontFace
type CSS (line 14) | type CSS<
type ComponentProps (line 34) | type ComponentProps<Component> = Component extends ((...args: any[]) => ...
type PropertyValue (line 37) | type PropertyValue<Property extends keyof CSSUtil.CSSProperties, Config ...
type ScaleValue (line 51) | type ScaleValue<Scale, Config = null> = (
type VariantProps (line 62) | type VariantProps<Component extends {[key: symbol | string]: any}> = Sty...
FILE: packages/react/types/stitches.d.ts
type RemoveIndex (line 7) | type RemoveIndex<T> = {[k in keyof T as string extends k ? never : numbe...
type CssFunctionType (line 9) | interface CssFunctionType<Media extends {} = {}, Theme extends {} = {}, ...
type StyledFunctionType (line 47) | interface StyledFunctionType<Media extends {} = {}, Theme extends {} = {...
type Stitches (line 86) | interface Stitches<
type ThemeTokens (line 226) | type ThemeTokens<Values, Prefix> = {
FILE: packages/react/types/styled-component.d.ts
type IntrinsicElementsKeys (line 5) | type IntrinsicElementsKeys = keyof JSX.IntrinsicElements;
type StyledComponent (line 8) | interface StyledComponent<
type CssComponent (line 58) | interface CssComponent<
type TransformProps (line 87) | type TransformProps<Props, Media> = {
type $$StyledComponentType (line 105) | type $$StyledComponentType = typeof $$StyledComponentType
type $$StyledComponentProps (line 111) | type $$StyledComponentProps = typeof $$StyledComponentProps
type $$StyledComponentMedia (line 117) | type $$StyledComponentMedia = typeof $$StyledComponentMedia
type IntrinsicElement (line 120) | type IntrinsicElement<TagName> = TagName extends IntrinsicElementsKeys ?...
type ForwardRefExoticComponent (line 123) | type ForwardRefExoticComponent<Type, Props> = React.ForwardRefExoticComp...
type StyledComponentType (line 133) | type StyledComponentType<T extends any[]> = (
type StyledComponentProps (line 148) | type StyledComponentProps<T extends any[]> = (
FILE: packages/react/types/theme.d.ts
type ScaleValue (line 1) | interface ScaleValue {
type Token (line 8) | interface Token<
FILE: packages/react/types/util.d.ts
type Prefixed (line 5) | type Prefixed<K extends string, T> = `${K}${Extract<T, boolean | number ...
type Assign (line 8) | type Assign<T1 = {}, T2 = {}> = T1 extends any ? Omit<T1, keyof T2> & T2...
type Widen (line 11) | type Widen<T> =
type String (line 23) | type String = string & Record<never, never>
type Index (line 26) | type Index = (number | string) & Record<never, never>
type Function (line 29) | type Function = (...args: any[]) => unknown
type WideObject (line 32) | type WideObject = { [name in number | string]: boolean | number | string...
FILE: packages/test/built-types/built-types-test.tsx
constant DEFAULT_TAG (line 17) | const DEFAULT_TAG = 'h1'
type HeadingProps (line 22) | type HeadingProps = React.ComponentProps<typeof DEFAULT_TAG> & { css?: C...
type ref (line 25) | type ref = React.ElementRef<typeof Text>
FILE: packages/test/built-types/index.d.ts
type HeadingProps (line 913) | type HeadingProps = React.ComponentProps<typeof DEFAULT_TAG> & {
FILE: packages/test/built-types/stitches.config.d.ts
type CSS (line 5138) | type CSS = Stitches.CSS<typeof config>;
FILE: packages/test/index.tsx
constant DEFAULT_TAG (line 17) | const DEFAULT_TAG = 'h1'
type HeadingProps (line 22) | type HeadingProps = React.ComponentProps<typeof DEFAULT_TAG> & { css?: C...
type ref (line 25) | type ref = React.ElementRef<typeof Text>
FILE: packages/test/issue-749-react.tsx
function App (line 20) | function App() {
FILE: packages/test/stitches.config.ts
type CSS (line 415) | type CSS = Stitches.CSS<typeof config>;
Condensed preview — 180 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (1,814K chars).
[
{
"path": ".codesandbox/ci.json",
"chars": 105,
"preview": "{\n \"node\": \"14\",\n \"packages\": [\"packages/core\", \"packages/react\"],\n \"sandboxes\": [\"7njqn\", \"2uwsq\"]\n}\n"
},
{
"path": ".editorconfig",
"chars": 210,
"preview": "root = true\n\n[*]\nend_of_line = lf\ninsert_final_newline = true\nindent_style = tab\ntrim_trailing_whitespace = true\n\n[*.md]"
},
{
"path": ".github/CODEOWNERS",
"chars": 121,
"preview": "# Learn how to add code owners here:\n# https://help.github.com/en/articles/about-code-owners\n\n* @jonathantneal @peduarte"
},
{
"path": ".github/ISSUE_TEMPLATE/bug_report.md",
"chars": 765,
"preview": "---\nname: Bug report\nabout: Create a report to help us improve\ntitle: ''\nlabels: ''\nassignees: ''\n---\n\n# Bug report\n\n## "
},
{
"path": ".github/ISSUE_TEMPLATE/feature_request.md",
"chars": 594,
"preview": "---\nname: Feature request\nabout: Suggest an idea for this project\ntitle: ''\nlabels: ''\nassignees: ''\n---\n\n**Is your feat"
},
{
"path": ".github/workflows/test.yml",
"chars": 279,
"preview": "name: CI\non: push\njobs:\n build:\n runs-on: ubuntu-latest\n steps:\n - uses: actions/checkout@v2\n - uses: a"
},
{
"path": ".gitignore",
"chars": 1692,
"preview": "# Logs\nlogs\n*.log\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\nlerna-debug.log*\nes\nlib\n.DS_Store\n\n# Diagnostic reports"
},
{
"path": ".npmrc",
"chars": 40,
"preview": "package-lock = false\n\nsave-exact = true\n"
},
{
"path": ".task/build-csstype.js",
"chars": 9868,
"preview": "import * as fs from './internal/fs.js'\nimport URL from './internal/url.js'\n\nconst rootUrl = URL.from(import.meta.url).to"
},
{
"path": ".task/build.js",
"chars": 4627,
"preview": "import * as fs from './internal/fs.js'\nimport * as js from './internal/js.js'\nimport URL from './internal/url.js'\nimport"
},
{
"path": ".task/internal/child_process.js",
"chars": 462,
"preview": "import cp from 'child_process'\nimport { rootUrl } from './dirs.js'\n\nexport * from 'child_process'\n\nexport const spawn = "
},
{
"path": ".task/internal/color.js",
"chars": 2695,
"preview": "const ansi = (id) => `\\x1b[${id}m`\nconst escape = (string) => string.replace(/[\\\\^$*+?.()|[\\]{}]/g, '\\\\$&')\nconst ansiRe"
},
{
"path": ".task/internal/dirs.js",
"chars": 902,
"preview": "import process from 'node:process'\nimport URL from './url.js'\n\n/** Root directory. */\nexport const rootUrl = new URL('.."
},
{
"path": ".task/internal/expect.js",
"chars": 2597,
"preview": "import { deepEqual as toEqual, equal as toBe, notDeepEqual as toNotEqual, notEqual as toNotBe } from 'node:assert/strict"
},
{
"path": ".task/internal/fs-test.js",
"chars": 171,
"preview": "import * as fs from './fs.js'\n\nlet source = new URL('./test-source/', import.meta.url)\nlet target = new URL('./test-targ"
},
{
"path": ".task/internal/fs.js",
"chars": 1212,
"preview": "import fs from 'fs/promises'\nimport { copyFile, mkdir, readdir } from 'fs/promises'\nimport URL from './url.js'\n\nexport *"
},
{
"path": ".task/internal/js.js",
"chars": 7200,
"preview": "import { generate } from 'astring'\nimport { importAssertions } from 'acorn-import-assertions'\nimport { Node, Parser } fr"
},
{
"path": ".task/internal/js.transformDestructuring.js",
"chars": 857,
"preview": "import * as js from './js.js'\n\nexport let transformDestructuring = (ast) => {\n\t// replace destructuring\n\tast.find('Objec"
},
{
"path": ".task/internal/js.transformIIFE.js",
"chars": 891,
"preview": "import * as js from './js.js'\n\nexport let transformIIFE = (ast) => {\n\tast.body = [\n\t\tjs.ExpressionStatement({\n\t\t\texpress"
},
{
"path": ".task/internal/js.transformModulesToCJS.js",
"chars": 1353,
"preview": "import * as js from './js.js'\n\nexport let transformModulesToCJS = (ast) => {\n\t// replace exports\n\tast.find('ExportNamedD"
},
{
"path": ".task/internal/js.transformOptionalCatchToParam.js",
"chars": 267,
"preview": "import * as js from './js.js'\n\nexport let transformOptionalCatchToParam = (ast) => {\n\t// replace optional catch\n\tast.fin"
},
{
"path": ".task/internal/process.js",
"chars": 590,
"preview": "import URL from './url.js'\n\nconst {\n\targv: [, file, ...argv],\n} = process\n\n/** Returns whether the import.meta matches t"
},
{
"path": ".task/internal/readline.js",
"chars": 536,
"preview": "import * as readline from 'readline'\n\nexport * from 'readline'\n\n/** Displays the query, awaits user input, and returns t"
},
{
"path": ".task/internal/url.js",
"chars": 812,
"preview": "import { fileURLToPath, pathToFileURL } from 'url';\n\nexport default class URL extends globalThis.URL {\n\tto(/** @type {st"
},
{
"path": ".task/lint-esm.js",
"chars": 1394,
"preview": "import fs from './internal/fs.js'\nimport { bold, underline } from './internal/color.js'\nimport { corePackageUrl, reactPa"
},
{
"path": ".task/lint-pkg.js",
"chars": 1038,
"preview": "import fs from './internal/fs.js'\nimport { bold, underline } from './internal/color.js'\nimport { isProcessMeta, getProce"
},
{
"path": ".task/lint-tsc.js",
"chars": 1150,
"preview": "import fs from './internal/fs.js'\nimport { bold, underline } from './internal/color.js'\nimport { corePackageUrl, reactPa"
},
{
"path": ".task/lint.js",
"chars": 504,
"preview": "import { isProcessMeta, getProcessArgOf } from './internal/process.js'\nimport { lintAll as lintAllEsm } from './lint-esm"
},
{
"path": ".task/release.js",
"chars": 2046,
"preview": "import URL from './internal/url.js'\nimport * as co from './internal/color.js'\nimport * as cp from './internal/child_proc"
},
{
"path": ".task/test-coverage.js",
"chars": 5880,
"preview": "import * as cp from './internal/child_process.js'\nimport * as fp from 'path'\nimport * as fs from './internal/fs.js'\nimpo"
},
{
"path": ".task/test.js",
"chars": 4577,
"preview": "import { passIcon, failIcon, passText, failText, infoText, dim, green } from './internal/color.js'\nimport { isProcessMet"
},
{
"path": ".vscode/package.schema.json",
"chars": 457,
"preview": "{\n \"$schema\": \"http://json-schema.org/draft-07/schema#\",\n \"allOf\": [\n {\n \"$ref\": \"http://json.schemastore.org/"
},
{
"path": ".vscode/settings.json",
"chars": 680,
"preview": "{\n \"debug.console.historySuggestions\": false,\n \"editor.formatOnSave\": false,\n \"editor.insertSpaces\": false,\n \"editor"
},
{
"path": "CODE_OF_CONDUCT.md",
"chars": 3350,
"preview": "# Contributor Covenant Code of Conduct\n\n## Our Pledge\n\nIn the interest of fostering an open and welcoming environment, w"
},
{
"path": "CONTRIBUTING.md",
"chars": 2117,
"preview": "# Contributing to Stitches\n\nWelcome and thanks for your interest! Before submitting a pull request, please take a moment"
},
{
"path": "LICENSE.md",
"chars": 1063,
"preview": "MIT License\n\nCopyright (c) 2022 WorkOS\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof "
},
{
"path": "README.md",
"chars": 1984,
"preview": "Update June 19, 2023: Stitches is no longer actively maintained due to changes in the React ecosystem and maintainer ava"
},
{
"path": "package.json",
"chars": 3909,
"preview": "{\n \"$schema\": \"./.vscode/package.schema.json\",\n \"name\": \"stitches\",\n \"type\": \"module\",\n \"license\": \"MIT\",\n \"contrib"
},
{
"path": "packages/core/README.md",
"chars": 2035,
"preview": "# @stitches/core\n\n**@stitches/core** is a framework-agnostic implementation of [stitches](https://stitches.dev), a CSS-i"
},
{
"path": "packages/core/package.json",
"chars": 1526,
"preview": "{\n \"name\": \"@stitches/core\",\n \"version\": \"1.3.1-1\",\n \"description\": \"The modern CSS-in-JS library\",\n \"type\": \"module"
},
{
"path": "packages/core/src/ThemeToken.js",
"chars": 551,
"preview": "import { toTailDashed } from './convert/toTailDashed.js'\n\nexport class ThemeToken {\n\tconstructor(token, value, scale, pr"
},
{
"path": "packages/core/src/convert/toCamelCase.js",
"chars": 211,
"preview": "/** Returns the given value converted to camel-case. */\nexport const toCamelCase = (/** @type {string} */ value) => (!/["
},
{
"path": "packages/core/src/convert/toCssRules.js",
"chars": 6317,
"preview": "import { toCamelCase } from './toCamelCase.js'\nimport { toHyphenCase } from './toHyphenCase.js'\nimport { toPolyfilledVal"
},
{
"path": "packages/core/src/convert/toHash.js",
"chars": 598,
"preview": "const toAlphabeticChar = (/** @type {number} */ code) => String.fromCharCode(code + (code > 25 ? 39 : 97))\n\nconst toAlph"
},
{
"path": "packages/core/src/convert/toHyphenCase.js",
"chars": 323,
"preview": "/** Returns the given value converted to kebab-case. */\nexport const toHyphenCase = (/** @type {string} */ value) => (\n\t"
},
{
"path": "packages/core/src/convert/toPolyfilledValue.js",
"chars": 1631,
"preview": "const splitBySpace = /\\s+(?![^()]*\\))/\nconst split = (fn) => (data) => fn(...(typeof data === 'string' ? String(data).sp"
},
{
"path": "packages/core/src/convert/toResolvedMediaQueryRanges.js",
"chars": 1371,
"preview": "const mqunit = /([\\d.]+)([^]*)/\n\n/** Returns a media query with polyfilled ranges. */\nexport const toResolvedMediaQueryR"
},
{
"path": "packages/core/src/convert/toResolvedSelectors.js",
"chars": 796,
"preview": "/** Returns selectors resolved from parent selectors and nested selectors. */\nexport const toResolvedSelectors = (\n\t/** "
},
{
"path": "packages/core/src/convert/toSizingValue.js",
"chars": 975,
"preview": "import { toHyphenCase } from './toHyphenCase.js'\n\n/** Returns a declaration sizing value with polyfilled sizing keywords"
},
{
"path": "packages/core/src/convert/toTailDashed.js",
"chars": 136,
"preview": "/** Returns a filled value with a dash prefix. */\nexport const toTailDashed = (/** @type {string} */ value) => value ? v"
},
{
"path": "packages/core/src/convert/toTokenizedValue.js",
"chars": 844,
"preview": "import { toTailDashed } from './toTailDashed.js'\n\n/** Returns a declaration value with transformed token values. */\nexpo"
},
{
"path": "packages/core/src/createStitches.js",
"chars": 1977,
"preview": "import { defaultThemeMap } from './default/defaultThemeMap.js'\n\nimport { createMemo } from './utility/createMemo.js'\n\nim"
},
{
"path": "packages/core/src/default/defaultThemeMap.js",
"chars": 8433,
"preview": "const borderStyles = 'borderStyles'\nconst borderWidths = 'borderWidths'\nconst colors = 'colors'\nconst fonts = 'fonts'\nco"
},
{
"path": "packages/core/src/features/createTheme.js",
"chars": 1979,
"preview": "import { ThemeToken } from '../ThemeToken.js'\nimport { createMemo } from '../utility/createMemo.js'\n\nimport { toHash } f"
},
{
"path": "packages/core/src/features/css.js",
"chars": 12128,
"preview": "import { internal } from '../utility/internal.js'\nimport { createMemo } from '../utility/createMemo.js'\nimport { define "
},
{
"path": "packages/core/src/features/globalCss.js",
"chars": 1353,
"preview": "import { createMemo } from '../utility/createMemo.js'\nimport { define } from '../utility/define.js'\n\nimport { toCssRules"
},
{
"path": "packages/core/src/features/keyframes.js",
"chars": 1273,
"preview": "import { createMemo } from '../utility/createMemo.js'\nimport { define } from '../utility/define.js'\n\nimport { toCssRules"
},
{
"path": "packages/core/src/index.js",
"chars": 474,
"preview": "import { getCachedConfig } from './utility/getCachedConfig.js'\n\nexport { createStitches } from './createStitches.js'\nexp"
},
{
"path": "packages/core/src/sheet.js",
"chars": 6390,
"preview": "import { getNonce } from './utility/getNonce.js'\n\n/**\n * Rules in the sheet appear in this order:\n * 1. theme rules (the"
},
{
"path": "packages/core/src/utility/createMemo.js",
"chars": 428,
"preview": "const stringifyReplacer = (name, data) => (typeof data === 'function' ? { '()': Function.prototype.toString.call(data) }"
},
{
"path": "packages/core/src/utility/define.js",
"chars": 164,
"preview": "/** @type {<T>(target: T, source: any) => T} */\nexport const define = (target, source) => Object.defineProperties(target"
},
{
"path": "packages/core/src/utility/getCachedConfig.js",
"chars": 160,
"preview": "import { createStitches } from '../createStitches.js'\n\nlet cachedConfig\n\nexport const getCachedConfig = () => cachedConf"
},
{
"path": "packages/core/src/utility/getNonce.js",
"chars": 195,
"preview": "export const getNonce = () => {\n\tif (typeof window.__webpack_nonce__ !== 'undefined') return window.__webpack_nonce__\n\ti"
},
{
"path": "packages/core/src/utility/hasNames.js",
"chars": 94,
"preview": "export const hasNames = (target) => {\n\tfor (const name in target) return true\n\treturn false\n}\n"
},
{
"path": "packages/core/src/utility/hasOwn.js",
"chars": 118,
"preview": "const { hasOwnProperty } = Object.prototype\n\n\nexport const hasOwn = (target, key) => hasOwnProperty.call(target, key)\n"
},
{
"path": "packages/core/src/utility/index.d.ts",
"chars": 281,
"preview": "export type Primitive = string | number | bigint | boolean | symbol\nexport type Optional = Primitive | void\nexport type "
},
{
"path": "packages/core/src/utility/internal.js",
"chars": 51,
"preview": "export const internal = Symbol.for('sxs.internal')\n"
},
{
"path": "packages/core/tests/basic.js",
"chars": 7445,
"preview": "import { createStitches } from '../src/index.js'\n\ndescribe('Basic', () => {\n\ttest('Existance of methods', () => {\n\t\tcons"
},
{
"path": "packages/core/tests/component-composition.js",
"chars": 1576,
"preview": "import { createStitches } from '../src/index.js'\n\ndescribe('Composition', () => {\n\ttest('Renders an empty component', ()"
},
{
"path": "packages/core/tests/component-conditions.js",
"chars": 518,
"preview": "import { createStitches } from '../src/index.js'\n\ndescribe('Component Medias', () => {\n\ttest('Authors can define medias "
},
{
"path": "packages/core/tests/component-css-prop.js",
"chars": 615,
"preview": "import { createStitches } from '../src/index.js'\n\ndescribe('Component with CSS prop', () => {\n\ttest('Authors can create "
},
{
"path": "packages/core/tests/component-empty-variants.js",
"chars": 963,
"preview": "import { createStitches } from '../src/index.js'\n\ndescribe('Empty Variants', () => {\n\ttest('Empty Variants', () => {\n\t\tc"
},
{
"path": "packages/core/tests/component-utils-and-types.js",
"chars": 859,
"preview": "import { createStitches } from '../src/index.js'\n\ndescribe('Component: Utilities & Tokens', () => {\n\ttest('Utilities & T"
},
{
"path": "packages/core/tests/component-variants.js",
"chars": 16099,
"preview": "import { createStitches } from '../src/index.js'\n\ndescribe('Variants', () => {\n\tconst componentConfig = {\n\t\tvariants: {\n"
},
{
"path": "packages/core/tests/global-atrules.js",
"chars": 3874,
"preview": "import { createStitches } from '../src/index.js'\n\ndescribe('Support @import', () => {\n\ttest('Authors can define an @impo"
},
{
"path": "packages/core/tests/issue-450.js",
"chars": 8469,
"preview": "import { createStitches } from '../src/index.js'\n\ndescribe('Issue #450', () => {\n\ttest('Basic Tests', () => {\n\t\tconst ge"
},
{
"path": "packages/core/tests/issue-492.js",
"chars": 3931,
"preview": "import { createStitches } from '../src/index.js'\n\ndescribe('Issue #492', () => {\n\ttest('Conditionally apply default vari"
},
{
"path": "packages/core/tests/issue-652.js",
"chars": 621,
"preview": "import { createStitches } from '../src/index.js'\n\ndescribe('Issue #652', () => {\n\ttest('Applying both variants from the "
},
{
"path": "packages/core/tests/issue-655.js",
"chars": 489,
"preview": "import { createStitches } from '../src/index.js'\n\ndescribe('Issue #655', () => {\n\ttest('Applying both variants from the "
},
{
"path": "packages/core/tests/issue-725.js",
"chars": 2655,
"preview": "import { createStitches } from '../src/index.js'\n\ndescribe('Issue #725', () => {\n\ttest('Minimum reproduction of bug', ()"
},
{
"path": "packages/core/tests/issue-788.js",
"chars": 1056,
"preview": "import { createStitches } from '../src/index.js'\n\ndescribe('Issue #788', () => {\n\ttest('Test that a util with the name o"
},
{
"path": "packages/core/tests/issue-908.js",
"chars": 814,
"preview": "import { createStitches } from '../src/index.js'\n\nconst styleRule = `--sxs { --sxs:1 lTyTw fJmROo; }`;\nconst mediaRule ="
},
{
"path": "packages/core/tests/issue-921.ts",
"chars": 872,
"preview": "import { createStitches, PropertyValue, CSS } from '../types/index'\n\nconst config = {\n\tutils: {\n\t\tbackground: (value: bo"
},
{
"path": "packages/core/tests/issue-943.js",
"chars": 617,
"preview": "import { createStitches } from '../src/index.js'\n\ndescribe('Issue #943', () => {\n\ttest('@font-face descriptors', () => {"
},
{
"path": "packages/core/tests/issue-999.js",
"chars": 2868,
"preview": "import { createStitches } from '../src/index.js'\n\ndescribe('Issue #519', () => {\n\ttest('locally scoped token works 1 tim"
},
{
"path": "packages/core/tests/keyframes.js",
"chars": 567,
"preview": "import { createStitches } from '../src/index.js'\n\ndescribe('Keyframes', () => {\n\ttest('Expected behavior for the keyfram"
},
{
"path": "packages/core/tests/theme.js",
"chars": 1653,
"preview": "import { createStitches } from '../src/index.js'\n\ndescribe('Theme', () => {\n\ttest('Expected behavior for the createTheme"
},
{
"path": "packages/core/tests/types.test.ts",
"chars": 2139,
"preview": "import { createStitches } from '../types/index'\n\nconst { css, globalCss, keyframes } = createStitches({\n\tutils: {\n\t\tmx: "
},
{
"path": "packages/core/tests/universal-autoprefixer.js",
"chars": 2530,
"preview": "import { createStitches } from '../src/index.js'\n\ndescribe('Autoprefixer', () => {\n\ttest('appearance', () => {\n\t\tconst {"
},
{
"path": "packages/core/tests/universal-functionality.js",
"chars": 813,
"preview": "import { createStitches } from '../src/index.js'\n\ndescribe('Configuration', () => {\n\tlet stitches\n\n\ttest('createStitches"
},
{
"path": "packages/core/tests/universal-logical-properties.js",
"chars": 2178,
"preview": "import { createStitches } from '../src/index.js'\n\ndescribe('Logical Properties', () => {\n\ttest('marginBlock', () => {\n\t\t"
},
{
"path": "packages/core/tests/universal-nesting.js",
"chars": 2342,
"preview": "import { createStitches } from '../src/index.js'\n\ndescribe('Nesting', () => {\n\ttest('Authors can define globalCss nestin"
},
{
"path": "packages/core/tests/universal-numeric-values.js",
"chars": 3637,
"preview": "import { createStitches } from '../src/index.js'\n\ndescribe('Numeric Values', () => {\n\ttest('Authors can use numeric valu"
},
{
"path": "packages/core/tests/universal-polyfill-prefixed-values.js",
"chars": 640,
"preview": "import { createStitches } from '../src/index.js'\n\ndescribe('Polyfill prefixed values', () => {\n\ttest('width:stretch', ()"
},
{
"path": "packages/core/tests/universal-prefix.js",
"chars": 1295,
"preview": "import { createStitches } from '../src/index.js'\n\ndescribe('Prefix', () => {\n\tconst prefix = 'fusion'\n\n\ttest('Authors ca"
},
{
"path": "packages/core/tests/universal-serialization.js",
"chars": 1976,
"preview": "import { createStitches } from '../src/index.js'\n\ndescribe('Serialization', () => {\n\tconst sheet = createStitches()\n\tcon"
},
{
"path": "packages/core/tests/universal-tokens.js",
"chars": 6995,
"preview": "import { createStitches } from '../src/index.js'\n\ndescribe('Tokens', () => {\n\ttest('Authors can use a regular token #1',"
},
{
"path": "packages/core/tests/universal-with-typing.ts",
"chars": 197,
"preview": "import { createStitches } from '../types'\n\nconst { css, toString } = createStitches({\n\tmedia: {\n\t\tbp1: '(min-width: 640p"
},
{
"path": "packages/core/tests/utils.js",
"chars": 479,
"preview": "import { createStitches } from '../src/index.js'\n\ndescribe('Utils', () => {\n\ttest('Authors can define utilties applied t"
},
{
"path": "packages/core/tests/with-config-api.js",
"chars": 5183,
"preview": "import { createStitches } from '../src/index.js'\n\ndescribe('css.withConfig', () => {\n\ttest('Basic css calls without a co"
},
{
"path": "packages/core/types/config.d.ts",
"chars": 5760,
"preview": "import type * as CSSUtil from './css-util.js'\nimport type Stitches from './stitches.js'\n\n/** Configuration Interface */\n"
},
{
"path": "packages/core/types/css-util.d.ts",
"chars": 3508,
"preview": "import type * as Native from './css.js'\nimport type * as Config from './config.js'\nimport type * as ThemeUtil from './th"
},
{
"path": "packages/core/types/css.d.ts",
"chars": 357214,
"preview": "/** @license MIT License\n * Copyright (c) 2017-present, Fredrik Nicol\n * Copyright (c) 2021-present, Jonathan Neal\n *\n *"
},
{
"path": "packages/core/types/index.d.ts",
"chars": 2706,
"preview": "import type Stitches from './stitches.js'\n\nimport type * as Config from './config.js'\nimport type * as CSSUtil from './c"
},
{
"path": "packages/core/types/stitches.d.ts",
"chars": 5400,
"preview": "import type * as CSSUtil from './css-util.js'\nimport type * as StyledComponent from './styled-component.js'\nimport type "
},
{
"path": "packages/core/types/styled-component.d.ts",
"chars": 2415,
"preview": "import type * as Util from './util.js'\n\n/** Returns a new CSS Component. */\nexport interface CssComponent<\n\tType = 'span"
},
{
"path": "packages/core/types/theme.d.ts",
"chars": 1213,
"preview": "export interface ScaleValue {\n\ttoken: number | string\n\tvalue: number | string\n\tscale: string\n\tprefix: string\n}\n\nexport i"
},
{
"path": "packages/core/types/util.d.ts",
"chars": 1035,
"preview": "/* Utilities */\n/* ========================================================================== */\n\n/** Returns a string w"
},
{
"path": "packages/react/README.md",
"chars": 2225,
"preview": "# @stitches/react\n\n**@stitches/react** is a react implementation of [stitches](https://stitches.dev), a CSS-in-JS librar"
},
{
"path": "packages/react/package.json",
"chars": 1706,
"preview": "{\n \"name\": \"@stitches/react\",\n \"version\": \"1.3.1-1\",\n \"description\": \"The modern CSS-in-JS library\",\n \"type\": \"modul"
},
{
"path": "packages/react/src/createStitches.js",
"chars": 305,
"preview": "import { createStitches as createStitchesCore } from '../../core/src/createStitches.js'\nimport { createStyledFunction } "
},
{
"path": "packages/react/src/features/styled.js",
"chars": 1918,
"preview": "import React from 'react'\n\nimport { internal } from '../../../core/src/utility/internal.js'\nimport { createMemo } from '"
},
{
"path": "packages/react/src/index.js",
"chars": 556,
"preview": "import { getCachedConfig } from './utility/getCachedConfig.js'\n\nexport { createStitches } from './createStitches.js'\nexp"
},
{
"path": "packages/react/src/utility/getCachedConfig.js",
"chars": 160,
"preview": "import { createStitches } from '../createStitches.js'\n\nlet cachedConfig\n\nexport const getCachedConfig = () => cachedConf"
},
{
"path": "packages/react/tests/basic.js",
"chars": 1274,
"preview": "import * as React from 'react'\nimport * as renderer from 'react-test-renderer'\nimport { createStitches } from '../src/in"
},
{
"path": "packages/react/tests/component-as-props.js",
"chars": 878,
"preview": "import { createStitches } from '../src/index.js'\n\ndescribe('As prop', () => {\n\ttest('The \"as\" property can be used or ov"
},
{
"path": "packages/react/tests/component-className-prop.js",
"chars": 1026,
"preview": "import { createStitches } from '../src/index.js'\n\ndescribe('className prop', () => {\n\ttest('Renders a DOM Element with a"
},
{
"path": "packages/react/tests/component-composition.js",
"chars": 1339,
"preview": "import { createStitches } from '../src/index.js'\n\ndescribe('Composition', () => {\n\ttest('Renders an empty component', ()"
},
{
"path": "packages/react/tests/component-css-prop-react.js",
"chars": 3017,
"preview": "import * as React from 'react'\nimport * as renderer from 'react-test-renderer'\n\nimport { createStitches } from '../src/i"
},
{
"path": "packages/react/tests/component-css-prop.js",
"chars": 1280,
"preview": "import { createStitches } from '../src/index.js'\n\ndescribe('React Component with CSS prop', () => {\n\ttest('Authors can c"
},
{
"path": "packages/react/tests/component-repeated-variants.js",
"chars": 797,
"preview": "import { createStitches } from '../src/index.js'\n\ndescribe('emerson', () => {\n\ttest('lake', () => {\n\t\tconst { styled, to"
},
{
"path": "packages/react/tests/component-variants.js",
"chars": 12147,
"preview": "import { createStitches } from '../src/index.js'\n\ndescribe('Variants', () => {\n\tconst componentConfig = {\n\t\tvariants: {\n"
},
{
"path": "packages/react/tests/component.js",
"chars": 1408,
"preview": "import { createStitches } from '../src/index.js'\n\nconst internal = Symbol.for('sxs.internal')\n\ndescribe('Components', ()"
},
{
"path": "packages/react/tests/issue-416.js",
"chars": 2340,
"preview": "import * as React from 'react'\nimport * as renderer from 'react-test-renderer'\nimport { createStitches } from '../src/in"
},
{
"path": "packages/react/tests/issue-450.js",
"chars": 4488,
"preview": "import * as React from 'react'\nimport * as renderer from 'react-test-renderer'\nimport { createStitches } from '../src/in"
},
{
"path": "packages/react/tests/issue-555.js",
"chars": 1438,
"preview": "import * as React from 'react'\nimport * as renderer from 'react-test-renderer'\nimport { createStitches } from '../src/in"
},
{
"path": "packages/react/tests/issue-671-forwardRef.js",
"chars": 1006,
"preview": "import * as React from 'react'\nimport * as renderer from 'react-test-renderer'\nimport { createStitches } from '../src/in"
},
{
"path": "packages/react/tests/issue-671.js",
"chars": 830,
"preview": "import * as React from 'react'\nimport * as renderer from 'react-test-renderer'\nimport { createStitches } from '../src/in"
},
{
"path": "packages/react/tests/issue-737.js",
"chars": 1173,
"preview": "import * as React from 'react'\nimport * as renderer from 'react-test-renderer'\nimport { createStitches } from '../src/in"
},
{
"path": "packages/react/tests/issue-921.tsx",
"chars": 1115,
"preview": "import { createStitches, PropertyValue, CSS } from '../types/index'\n\nconst config = {\n\tutils: {\n\t\tbackground: (value: bo"
},
{
"path": "packages/react/tests/issue-943.js",
"chars": 617,
"preview": "import { createStitches } from '../src/index.js'\n\ndescribe('Issue #943', () => {\n\ttest('@font-face descriptors', () => {"
},
{
"path": "packages/react/tests/react.js",
"chars": 1467,
"preview": "import * as react from 'react'\nimport * as renderer from 'react-test-renderer'\nimport { createStitches } from '../src/in"
},
{
"path": "packages/react/tests/types.test.tsx",
"chars": 3743,
"preview": "// core types.tests.ts\nimport * as Stitches from '../types/index'\nimport { createStitches, FontFace } from '../types/ind"
},
{
"path": "packages/react/tests/universal-serialization.js",
"chars": 1933,
"preview": "import { createStitches } from '../src/index.js'\n\ndescribe('Serialization', () => {\n\tconst sheet = createStitches()\n\tcon"
},
{
"path": "packages/react/tests/variants.js",
"chars": 1452,
"preview": "import { createStitches } from '../src/index.js'\n\ndescribe('Variants', () => {\n\ttest('Variant given undefined will rever"
},
{
"path": "packages/react/tests/with-config-api.js",
"chars": 5602,
"preview": "import * as React from 'react'\nimport * as renderer from 'react-test-renderer'\nimport { createStitches } from '../src/in"
},
{
"path": "packages/react/types/config.d.ts",
"chars": 5760,
"preview": "import type * as CSSUtil from './css-util.js'\nimport type Stitches from './stitches.js'\n\n/** Configuration Interface */\n"
},
{
"path": "packages/react/types/css-util.d.ts",
"chars": 3508,
"preview": "import type * as Native from './css.js'\nimport type * as Config from './config.js'\nimport type * as ThemeUtil from './th"
},
{
"path": "packages/react/types/css.d.ts",
"chars": 357212,
"preview": "/** @license MIT License\n * Copyright (c) 2017-present, Fredrik Nicol\n * Copyright (c) 2021-present, Jonathan Neal\n *\n *"
},
{
"path": "packages/react/types/index.d.ts",
"chars": 2837,
"preview": "import type Stitches from './stitches.js'\n\nimport type * as Config from './config.js'\nimport type * as CSSUtil from './c"
},
{
"path": "packages/react/types/stitches.d.ts",
"chars": 7761,
"preview": "import type * as CSSUtil from './css-util.js'\nimport type * as StyledComponent from './styled-component.js'\nimport type "
},
{
"path": "packages/react/types/styled-component.d.ts",
"chars": 4181,
"preview": "import type * as React from 'react'\nimport type * as Util from './util.js'\n\n\nexport type IntrinsicElementsKeys = keyof J"
},
{
"path": "packages/react/types/theme.d.ts",
"chars": 1213,
"preview": "export interface ScaleValue {\n\ttoken: number | string\n\tvalue: number | string\n\tscale: string\n\tprefix: string\n}\n\nexport i"
},
{
"path": "packages/react/types/util.d.ts",
"chars": 1060,
"preview": "/* Utilities */\n/* ========================================================================== */\n\n/** Returns a string w"
},
{
"path": "packages/stringify/README.md",
"chars": 2884,
"preview": "<h1>stringify <img src=\"https://jonneal.dev/css-logo.svg\" alt=\"\" width=\"90\" height=\"90\" align=\"right\" /></h1>\n\n**stringi"
},
{
"path": "packages/stringify/package.json",
"chars": 989,
"preview": "{\n \"name\": \"@stitches/stringify\",\n \"version\": \"1.3.1-1\",\n \"description\": \"Converts an object into CSS\",\n \"type\": \"mo"
},
{
"path": "packages/stringify/src/Array.js",
"chars": 63,
"preview": "export const { isArray } = Array\nexport const { from } = Array\n"
},
{
"path": "packages/stringify/src/getResolvedSelectors.js",
"chars": 734,
"preview": "/** Returns selectors resolved from parent selectors and nested selectors. */\nexport const getResolvedSelectors = (\n\t/**"
},
{
"path": "packages/stringify/src/index.js",
"chars": 2265,
"preview": "import { toKebabCase } from './toCase.js'\nimport { getResolvedSelectors } from './getResolvedSelectors.js'\nimport { isAr"
},
{
"path": "packages/stringify/src/toCase.js",
"chars": 534,
"preview": "/** Returns the given value converted to kebab-case. */\nexport const toKebabCase = (/** @type {string} */ value) => (\n\t/"
},
{
"path": "packages/stringify/tests/at-rule-font-face.js",
"chars": 969,
"preview": "import { stringify } from '../src/index.js'\n\ndescribe('at-rule (font-face)', () => {\n\ttest('stringify() generates CSS wi"
},
{
"path": "packages/stringify/tests/at-rule-import.js",
"chars": 427,
"preview": "import { stringify } from '../src/index.js'\n\ndescribe('at-rule (import)', () => {\n\ttest('stringify() generates CSS with "
},
{
"path": "packages/stringify/tests/at-rule-keyframes.js",
"chars": 434,
"preview": "import { stringify } from '../src/index.js'\n\ndescribe('at-rule (font-face)', () => {\n\ttest('stringify() generates CSS wi"
},
{
"path": "packages/stringify/tests/index.js",
"chars": 2436,
"preview": "import { stringify } from '../src/index.js'\n\ndescribe('stringify()', () => {\n\ttest('stringify() generates CSS with the r"
},
{
"path": "packages/stringify/tests/internal-toCase.js",
"chars": 923,
"preview": "import { toCamelCase, toKebabCase } from '../src/toCase.js'\n\ndescribe('toCase', () => {\n\ttest('toCamelCase', () => {\n\t\te"
},
{
"path": "packages/stringify/tests/nesting-rules.js",
"chars": 1802,
"preview": "import { stringify } from '../src/index.js'\n\ndescribe('nesting rules', () => {\n\ttest('stringify() generates a string of "
},
{
"path": "packages/stringify/tests/replacer-prefixing.js",
"chars": 910,
"preview": "import { stringify } from '../src/index.js'\n\ndescribe('replacer (prefixing)', () => {\n\ttest('stringify() generates CSS w"
},
{
"path": "packages/stringify/types/index.d.ts",
"chars": 103,
"preview": "export function stringify(value: any, replacer?: (name: string, data: any, style: any) => any): string\n"
},
{
"path": "packages/test/.eslintrc",
"chars": 540,
"preview": "{\n \"extends\": [\n \"eslint:recommended\",\n \"plugin:react/recommended\",\n \"plugin:@typescript-eslint/recommended\",\n"
},
{
"path": "packages/test/Issue-803-core.ts",
"chars": 1239,
"preview": "import { globalCss } from '@stitches/core'\n\nvoid globalCss({\n\t\"@font-face\": {\n\t\tfontFamily: \"Roboto\",\n\t\tfontStyle: \"norm"
},
{
"path": "packages/test/Issue-803-react.ts",
"chars": 1240,
"preview": "import { globalCss } from '@stitches/react'\n\nvoid globalCss({\n\t\"@font-face\": {\n\t\tfontFamily: \"Roboto\",\n\t\tfontStyle: \"nor"
},
{
"path": "packages/test/Issue-813-core.ts",
"chars": 1058,
"preview": "// https://github.com/stitchesjs/stitches/issues/813\nimport { createStitches } from '@stitches/core'\nimport * as Stitche"
},
{
"path": "packages/test/Issue-813-react.ts",
"chars": 1073,
"preview": "// https://github.com/stitchesjs/stitches/issues/813\nimport { createStitches } from '@stitches/react'\nimport * as Stitch"
},
{
"path": "packages/test/built-types/Issue-803-core.d.ts",
"chars": 11,
"preview": "export {};\n"
},
{
"path": "packages/test/built-types/Issue-803-react.d.ts",
"chars": 11,
"preview": "export {};\n"
},
{
"path": "packages/test/built-types/Issue-813-core.d.ts",
"chars": 2657,
"preview": "import * as Stitches from '@stitches/core';\nexport declare const config: {\n prefix: \"\";\n media: {};\n theme: {\n "
},
{
"path": "packages/test/built-types/Issue-813-react.d.ts",
"chars": 2686,
"preview": "import * as Stitches from '@stitches/react';\nexport declare const config: {\n prefix: \"\";\n media: {};\n theme: {\n"
},
{
"path": "packages/test/built-types/built-types-test.tsx",
"chars": 2183,
"preview": "import * as React from 'react'\nimport { styled, CSS } from './stitches.config'\n\nexport const Text = styled('span', {\n\tba"
},
{
"path": "packages/test/built-types/index.d.ts",
"chars": 28174,
"preview": "import * as React from 'react';\nimport { CSS } from './stitches.config';\nexport declare const Text: import(\"@stitches/re"
},
{
"path": "packages/test/built-types/issue-749-react.d.ts",
"chars": 44,
"preview": "export default function App(): JSX.Element;\n"
},
{
"path": "packages/test/built-types/stitches.config.d.ts",
"chars": 217369,
"preview": "import type * as Stitches from '@stitches/react';\nexport type { VariantProps } from '@stitches/react';\nexport declare co"
},
{
"path": "packages/test/index.tsx",
"chars": 2183,
"preview": "import * as React from 'react'\nimport { styled, CSS } from './stitches.config'\n\nexport const Text = styled('span', {\n\tba"
},
{
"path": "packages/test/issue-749-react.tsx",
"chars": 490,
"preview": "import * as React from 'react'\nimport { styled } from './stitches.config'\n\nconst Box = styled('div', {\n\tvariants: {\n\t\tsi"
},
{
"path": "packages/test/package.json",
"chars": 760,
"preview": "{\n \"name\": \"@stitches/test\",\n \"version\": \"1.3.1-1\",\n \"type\": \"module\",\n \"files\": [\n \"dist/*.cjs\",\n \"dist/*.js\""
},
{
"path": "packages/test/stitches.config.ts",
"chars": 10062,
"preview": "import { createStitches } from '@stitches/react';\nimport {\n gray,\n mauve,\n slate,\n sage,\n olive,\n sand,\n tomato,\n"
},
{
"path": "packages/test/traces/trace.json",
"chars": 358617,
"preview": "[\n{\"name\":\"process_name\",\"args\":{\"name\":\"tsc\"},\"cat\":\"__metadata\",\"ph\":\"M\",\"ts\":104372.70903587341,\"pid\":1,\"tid\":1},\n{\"n"
},
{
"path": "packages/test/tsconfig.json",
"chars": 533,
"preview": "{\n \"compilerOptions\": {\n \"diagnostics\": true,\n \"outDir\": \"built-types\",\n \"emitDeclarationOnly\": true,\n \"esM"
},
{
"path": "tsconfig.json",
"chars": 397,
"preview": "{\n \"compilerOptions\": {\n \"diagnostics\": true,\n \"esModuleInterop\": true,\n \"extendedDiagnostics\": true,\n \"ski"
},
{
"path": "tslint.json",
"chars": 1089,
"preview": "{\n \"extends\": [\"tslint:recommended\"],\n \"rules\": {\n \"arrow-return-shorthand\": [true],\n \"class-name\": true,\n \"e"
}
]
// ... and 1 more files (download for full content)
About this extraction
This page contains the full source code of the stitchesjs/stitches GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 180 files (11.9 MB), approximately 470.3k tokens, and a symbol index with 1489 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.