[ { "path": ".codesandbox/ci.json", "content": "{\n \"node\": \"14\",\n \"packages\": [\"packages/core\", \"packages/react\"],\n \"sandboxes\": [\"7njqn\", \"2uwsq\"]\n}\n" }, { "path": ".editorconfig", "content": "root = true\n\n[*]\nend_of_line = lf\ninsert_final_newline = true\nindent_style = tab\ntrim_trailing_whitespace = true\n\n[*.md]\ntrim_trailing_whitespace = false\n\n[*.{json,md,yml}]\nindent_size = 2\nindent_style = space\n" }, { "path": ".github/CODEOWNERS", "content": "# Learn how to add code owners here:\n# https://help.github.com/en/articles/about-code-owners\n\n* @jonathantneal @peduarte\n" }, { "path": ".github/ISSUE_TEMPLATE/bug_report.md", "content": "---\nname: Bug report\nabout: Create a report to help us improve\ntitle: ''\nlabels: ''\nassignees: ''\n---\n\n# Bug report\n\n## Describe the bug\n\nA clear and concise description of what the bug is.\n\n## To Reproduce\n\nSteps to reproduce the behavior, please provide code snippets or a repository:\n\n1. Go to '...'\n2. Click on '....'\n3. Scroll down to '....'\n4. See error\n\n## Expected behavior\n\nA clear and concise description of what you expected to happen.\n\n## Screenshots\n\nIf applicable, add screenshots to help explain your problem.\n\n## System information\n\n- OS: [e.g. macOS, Windows]\n- Browser (if applies) [e.g. chrome, safari]\n- Version of Stitches: [e.g. 0.0.2]\n- Version of Node.js: [e.g. 10.10.0]\n\n## Additional context\n\nAdd any other context about the problem here.\n" }, { "path": ".github/ISSUE_TEMPLATE/feature_request.md", "content": "---\nname: Feature request\nabout: Suggest an idea for this project\ntitle: ''\nlabels: ''\nassignees: ''\n---\n\n**Is your feature request related to a problem? Please describe.**\nA clear and concise description of what the problem is. Ex. I'm always frustrated when [...]\n\n**Describe the solution you'd like**\nA clear and concise description of what you want to happen.\n\n**Describe alternatives you've considered**\nA clear and concise description of any alternative solutions or features you've considered.\n\n**Additional context**\nAdd any other context or screenshots about the feature request here.\n" }, { "path": ".github/workflows/test.yml", "content": "name: CI\non: push\njobs:\n build:\n runs-on: ubuntu-latest\n steps:\n - uses: actions/checkout@v2\n - uses: actions/setup-node@v2\n with:\n node-version: '16'\n - name: Install modules\n run: yarn\n - name: Run tests\n run: yarn test\n" }, { "path": ".gitignore", "content": "# 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 (https://nodejs.org/api/report.html)\nreport.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json\n\n# Runtime data\npids\npackage-lock.json\nyarn.lock\n*.pid\n*.seed\n*.pid.lock\n\n# Directory for instrumented libs generated by jscoverage/JSCover\nlib-cov\n\n# Coverage directory used by tools like istanbul\ncoverage\n*.lcov\n\n# nyc test coverage\n.nyc_output\n\n# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)\n.grunt\n\n# Bower dependency directory (https://bower.io/)\nbower_components\n\n# node-waf configuration\n.lock-wscript\n\n# Compiled binary addons (https://nodejs.org/api/addons.html)\nbuild/Release\n\n# Dependency directories\nnode_modules/\njspm_packages/\npackages/*/utils/\n\n# TypeScript v1 declaration files\ntypings/\n\n# TypeScript cache\n*.tsbuildinfo\n\n# Optional npm cache directory\n.npm\n\n# Optional eslint cache\n.eslintcache\n\n# Microbundle cache\n.rpt2_cache/\n.rts2_cache_cjs/\n.rts2_cache_es/\n.rts2_cache_umd/\n\n# Optional REPL history\n.node_repl_history\n\n# Output of 'npm pack'\n*.tgz\n\n# Yarn Integrity file\n.yarn-integrity\n\n# dotenv environment variables file\n.env\n.env.test\n\n# parcel-bundler cache (https://parceljs.org/)\n.cache\n\n# Next.js build output\n.next\n\n# Nuxt.js build / generate output\n.nuxt\ndist\n\n# Gatsby files\n.cache/\n# Comment in the public line in if your project uses Gatsby and *not* Next.js\n# https://nextjs.org/blog/next-9-1#public-directory-support\n# public\n\n# vuepress build output\n.vuepress/dist\n\n# Serverless directories\n.serverless/\n\n# FuseBox cache\n.fusebox/\n\n# DynamoDB Local files\n.dynamodb/\n\n# TernJS port file\n.tern-port\n\n# IntelliJ\n.idea/\n" }, { "path": ".npmrc", "content": "package-lock = false\n\nsave-exact = true\n" }, { "path": ".task/build-csstype.js", "content": "import * as fs from './internal/fs.js'\nimport URL from './internal/url.js'\n\nconst rootUrl = URL.from(import.meta.url).to('../')\nconst dtsOriginalURL = rootUrl.to('./node_modules/csstype/index.d.ts')\n\nconst generateType = async (packageUrl) => {\n\tconst dtsOriginalTxt = await fs.readFile(dtsOriginalURL, 'utf8')\n\n\tconst dtsModifiedURL = packageUrl.to('types/css.d.ts')\n\tconsole.log(dtsModifiedURL.pathname)\n\n\tconst dtsModifiedTxt = new ModifiedString(dtsOriginalTxt)\n\t\t.withoutVendorTyping\n\n\t\t.withCamelCasedColors\n\n\t\t.withAddedLicense\n\n\t\t.withAddedColorFunctions\n\t\t.withFixedColorScheme\n\t\t.withFixedFontFamily\n\t\t.withFixedMatchingSelector\n\t\t.withFixedNestingSelectors\n\t\t.withFixedProperties\n\t\t.withFixedPropertyAtRule\n\t\t.withFixedStretchValue\n\t\t.withFixedSystemColor\n\n\t\t.withoutBrowserComments\n\t\t.withoutImplicitGlobals\n\t\t.withoutPropertyValueTyping\n\t\t.withoutGenericTyping\n\t\t.withoutNarrowingPatch\n\t\t.withoutNeverInChain\n\t\t.withoutTrailingSpace\n\t.toString()\n\n\tawait fs.writeFile(dtsModifiedURL, dtsModifiedTxt)\n}\n\nconst generateTypes = async () => {\n\tawait generateType(rootUrl.to('packages/core/'))\n\tawait generateType(rootUrl.to('packages/react/'))\n}\n\nclass ModifiedString extends String {\n\treplace(matcher, replacer) {\n\t\treplacer = typeof replacer === 'function' ? replacer : replacer\n\t\treturn new ModifiedString(super.replace(matcher, replacer))\n\t}\n\n\t// with\n\n\tget withAddedColorFunctions() {\n\t\treturn this.replace(\n\t\t\t/\"CurrentColor\"/g,\n\t\t\t'\"CurrentColor\" | \"hsl(\" | \"lab(\" | \"rgb(\"'\n\t\t)\n\t}\n\n\tget withAddedLicense() {\n\t\tconst 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 */`\n\n\t\treturn this.replace(\n\t\t\t/^/,\n\t\t\t`${licenseComment}\\n\\n`\n\t\t)\n\t}\n\n\tget withCamelCasedColors() {\n\t\tconst 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(\n\t\t\t(colors, UpperCamelCaseColorName) =>\n\t\t\t\tObject.assign(colors, {\n\t\t\t\t\t[`\"${UpperCamelCaseColorName.toLowerCase()}\"`]: `\"${UpperCamelCaseColorName}\"`,\n\t\t\t\t}),\n\t\t\tObject.create(null),\n\t\t)\n\n\t\treturn this.replace(\n\t\t\tRegExp(Object.keys(cssColorNames).join('|'), 'ig'),\n\t\t\t$0 => cssColorNames[$0.toLowerCase()]\n\t\t)\n\t}\n\n\tget withFixedColorScheme() {\n\t\treturn this.replace(\n\t\t\t'type ColorScheme = Globals | \"dark\" | \"light\" | \"normal\"',\n\t\t\t'type ColorScheme = Globals | \"dark\" | \"light\" | \"light dark\" | \"normal\"'\n\t\t)\n\t}\n\n\tget withFixedFontFamily() {\n\t\treturn this.replace(\n\t\t\t'type GenericFamily = \"cursive\" | \"fantasy\" | \"monospace\" | \"sans-serif\" | \"serif\"',\n\t\t\t'type GenericFamily = \"cursive\" | \"emoji\" | \"fangsong\" | \"fantasy\" | \"math\" | \"monospace\" | \"sans-serif\" | \"serif\" | \"system-ui\" | \"ui-monospace\" | \"ui-rounded\" | \"ui-sans-serif\" | \"ui-serif\"'\n\t\t)\n\t}\n\n\tget withFixedNestingSelectors() {\n\t\treturn this.replace(\n\t\t\t/Pseudos =[\\W\\w]+?;/g,\n\t\t\tfragment => fragment.replace(\n\t\t\t\t/\":/g,\n\t\t\t\t'\"&:'\n\t\t\t).replace(\n\t\t\t\t/ \\| \"&:matches\"\\n/,\n\t\t\t\t''\n\t\t\t)\n\t\t).replace(\n\t\t\t/AdvancedPseudos =[\\W\\w]+?;/g,\n\t\t\tfragment => fragment.replace(\n\t\t\t\t/\"&[^\"]+/g,\n\t\t\t\t'$&('\n\t\t\t)\n\t\t)\n\t}\n\n\tget withFixedProperties() {\n\t\treturn this.replace(\n\t\t\t'type ZIndex = Globals | \"auto\" | (number & {})',\n\t\t\t'type ZIndex = Globals | \"auto\" | (number & {}) | (string & {})'\n\t\t).replace(\n\t\t\t'type LetterSpacing = Globals | TLength | \"normal\"',\n\t\t\t'type LetterSpacing = Globals | \"normal\" | (number & {}) | (string & {})'\n\t\t).replace(\n\t\t\t/Property.LetterSpacing/g,\n\t\t\t'Property.LetterSpacing'\n\t\t).replace(\n\t\t\t'FontWeightAbsolute = \"bold\" | \"normal\"',\n\t\t\t'FontWeightAbsolute = \"bold\" | \"normal\" | (string & {})'\n\t\t).replace(\n\t\t\t'DataType.FontWeightAbsolute | (string & {})',\n\t\t\t'DataType.FontWeightAbsolute'\n\t\t).replace(\n\t\t\t'FlexGrow = Globals | (number & {})',\n\t\t\t'FlexGrow = Globals | (number & {}) | (string & {})'\n\t\t)\n\t}\n\n\tget withFixedPropertyAtRule() {\n\t\treturn this.replace(\n\t\t\t'type Inherits = \"false\" | \"true\";',\n\t\t\t'type Inherits = \"false\" | \"true\" | boolean;'\n\t\t).replace(\n\t\t\t'initialValue?: string;',\n\t\t\t'initialValue?: boolean | number | string',\n\t\t)\n\t}\n\n\tget withFixedMatchingSelector() {\n\t\treturn this.replace(\n\t\t\t/matches\\(\\)/g,\n\t\t\t'matches'\n\t\t)\n\t}\n\n\tget withFixedStretchValue() {\n\t\treturn this.replace(\n\t\t\t/(\\n +\\| +)?\"fit-content\"/g,\n\t\t\t($0, $1) => $1 ? `${$1}\"stretch\"${$1}\"fit-content\"` : '\"stretch\" | \"fit-content\"'\n\t\t)\n\t}\n\n\tget withFixedSystemColor() {\n\t\treturn this.replace(\n\t\t\t/type DeprecatedSystemColor[^;]+;/,\n\t\t\t'type DeprecatedSystemColor = \"ActiveText\" | \"ButtonFace\" | \"ButtonText\" | \"ButtonBorder\" | \"Canvas\" | \"CanvasText\" | \"Field\" | \"FieldText\" | \"GrayText\" | \"Highlight\" | \"HighlightText\" | \"LinkText\" | \"Mark\" | \"MarkText\" | \"VisitedText\"'\n\t\t).replace(\n\t\t\t/DeprecatedSystemColor/g,\n\t\t\t'SystemColor'\n\t\t)\n\t}\n\n\t// without\n\n\tget withoutGenericTyping() {\n\t\treturn this.replace(\n\t\t\t/\\n? *(<(TLength|TTime)[^>]*>)|\\| TTime|TTime \\|/g,\n\t\t\t''\n\t\t).replace(\n\t\t\t/\\| TLength/g,\n\t\t\t'| number'\n\t\t).replace(\n\t\t\t/TLength \\|/g,\n\t\t\t'number |'\n\t\t)\n\t}\n\n\tget withoutBrowserComments() {\n\t\treturn this.replace(\n\t\t\t/(?<= )\\* [-_|][\\W\\w]+?(?=\\*\\/)/g,\n\t\t\t''\n\t\t)\n\t}\n\n\tget withoutImplicitGlobals() {\n\t\treturn this.replace(\n\t\t\t/\\n?( +\\| +)?(?\\n\\n' +\n\t\t\t'export type OnlyNumber = number & OnlyObject\\n\\n' +\n\t\t\t'export type OnlyString = string & OnlyObject\\n\\n' +\n\t\t\t'export type OnlyStringNumeric = (number | string) & OnlyObject\\n\\n' +\n\t\t\t'export namespace Property'\n\t\t)\n\t}\n\n\tget withoutNeverInChain() {\n\t\treturn this.replace(\n\t\t\t/(never \\| | \\| never)/g,\n\t\t\t''\n\t\t)\n\t}\n\n\tget withoutPropertyValueTyping() {\n\t\treturn this.replace(\n\t\t\t/export type PropertyValue[\\W\\w]+?;/,\n\t\t\t''\n\t\t)\n\t}\n\n\tget withoutTrailingSpace() {\n\t\treturn this.replace(\n\t\t\t/\\n? +(?=\\n)/g,\n\t\t\t''\n\t\t).replace(\n\t\t\t/\\n{4,}/g,\n\t\t\t'\\n\\n\\n'\n\t\t)\n\t}\n\n\tget withoutVendorTyping() {\n\t\treturn this.replace(\n\t\t\t/\\nexport (interface|type) (Obsolete|Vendor)[^\\n]+?\\{\\n[\\W\\w]+?\\n\\};?(?=\\n)/g, ''\n\t\t).replace(\n\t\t\t/\\nexport interface (Obsolete|Vendor)[^\\n]+?\\>\\n[\\W\\w]+?\\{\\};?(?=\\n)/g, ''\n\t\t).replace(\n\t\t\t/\\nexport interface (Obsolete|Vendor)[^\\n]+?{};?(?=\\n)/g, ''\n\t\t).replace(\n\t\t\t/\\n (Obsolete|Vendor)[^\\n]+?,(?=\\n)/g, ''\n\t\t).replace(\n\t\t\t/\\n *\\| *\":*-[^\"]+\"/g, ''\n\t\t).replace(\n\t\t\t'\\n \"-moz-font-feature-settings\"?: FontFeatureSettings;', ''\n\t\t).replace(\n\t\t\t/\\n? *\\| *\"-[^\"]+\"/g, ''\n\t\t).replace(\n\t\t\t/\"-[^\"]+\" *\\| *\\n?/g, ''\n\t\t).replace(\n\t\t\t/\\n? *\\| *\"-[^\\n]+(?=\\n)/g, ''\n\t\t).replace(\n\t\t\t/\\n MozFontFeatureSettings?: FontFeatureSettings;/, ''\n\t\t)\n\t}\n}\n\ngenerateTypes()\n" }, { "path": ".task/build.js", "content": "import * as fs from './internal/fs.js'\nimport * as js from './internal/js.js'\nimport URL from './internal/url.js'\nimport { box } from './internal/color.js'\nimport { transformDestructuring } from './internal/js.transformDestructuring.js'\nimport { transformModulesToCJS } from './internal/js.transformModulesToCJS.js'\nimport { transformOptionalCatchToParam } from './internal/js.transformOptionalCatchToParam.js'\nimport { transformIIFE } from './internal/js.transformIIFE.js'\nimport { corePackageUrl, reactPackageUrl, stringifyPackageUrl } from './internal/dirs.js'\nimport { isProcessMeta, getProcessArgOf } from './internal/process.js'\nimport esbuild from 'esbuild'\nimport nodemon from 'nodemon'\nimport zlib from 'zlib'\nimport { minify } from 'terser'\n\nconst matchImports = /import\\s*([\\w*${}\\n\\r\\t, ]+)from\\s*[\"']([^\"']+)[\"'];?/g\nconst matchExports = /export\\s*([\\w*${}\\n\\r\\t, ]+);?$/g\nconst matchNamings = /[{,]?([$\\w]+)(?:\\s+as\\s+(\\w+))?/gy\n\nconst variants = {\n\tesm: {\n\t\textension: 'mjs',\n\t\tasync transform(code, smap) {\n\t\t\treturn await minify(code, {\n\t\t\t\tsourceMap: { content: smap },\n\t\t\t\tcompress: true,\n\t\t\t\tmodule: true,\n\t\t\t\tmangle: true,\n\t\t\t\ttoplevel: true,\n\t\t\t})\n\t\t},\n\t},\n\tcjs: {\n\t\textension: 'cjs',\n\t\tasync transform(code, smap) {\n\t\t\tlet cjsast = js.parse(code)\n\n\t\t\ttransformModulesToCJS(cjsast)\n\t\t\ttransformOptionalCatchToParam(cjsast)\n\t\t\ttransformDestructuring(cjsast)\n\n\t\t\treturn await minify(cjsast.toString(), {\n\t\t\t\tsourceMap: { content: smap },\n\t\t\t\tcompress: true,\n\t\t\t\tmodule: true,\n\t\t\t\tmangle: true,\n\t\t\t\ttoplevel: true,\n\t\t\t})\n\t\t},\n\t},\n\tgjs: {\n\t\textension: 'global.js',\n\t\tasync transform(code, smap) {\n\t\t\tlet cjsast = js.parse(code)\n\n\t\t\ttransformIIFE(cjsast)\n\n\t\t\treturn await minify(cjsast.toString(), {\n\t\t\t\tsourceMap: { content: smap },\n\t\t\t\tcompress: true,\n\t\t\t\tmodule: true,\n\t\t\t\tmangle: true,\n\t\t\t\ttoplevel: true,\n\t\t\t})\n\t\t},\n\t},\n}\n\nexport const build = async (packageUrl, opts) => {\n\topts = Object.assign({ only: [] }, opts)\n\n\tconst initPackageUrl = new URL('src/', packageUrl)\n\tconst distPackageUrl = new URL('dist/', packageUrl)\n\n\tconst packageJsonUrl = new URL(`package.json`, packageUrl)\n\tconst packageName = JSON.parse(await fs.readFile(packageJsonUrl, 'utf8')).name\n\n\tif (!opts.only.length || opts.only.includes(packageName)) {\n\t\tconst targetPathname = new URL('index.js', initPackageUrl).pathname\n\t\tconst outputPathname = new URL('index.js', distPackageUrl).pathname\n\n\t\t// Build ESM version\n\t\tlet {\n\t\t\toutputFiles: [{ text: smap }, { text: code }],\n\t\t} = await esbuild.build({\n\t\t\tentryPoints: [targetPathname],\n\t\t\toutfile: outputPathname,\n\t\t\tbundle: true,\n\t\t\texternal: ['react'],\n\t\t\tformat: 'esm',\n\t\t\tsourcemap: 'external',\n\t\t\twrite: false,\n\t\t})\n\n\t\t// ensure empty dist directory\n\t\tawait fs.mkdir(distPackageUrl, { recursive: true })\n\n\t\t// write map\n\t\tfs.writeFile(new URL(`index.map`, distPackageUrl), smap)\n\n\t\t// prepare variations\n\t\tconst size = {\n\t\t\tname: packageName,\n\t\t\ttypes: {},\n\t\t}\n\n\t\t// write variation builds\n\t\tfor (const variant in variants) {\n\t\t\tconst variantInfo = variants[variant]\n\t\t\tconst variantPath = new URL(`dist/index.${variantInfo.extension}`, packageUrl).pathname\n\n\t\t\tlet { code: variantCode } = await variantInfo.transform(code, smap)\n\n\t\t\tconst variantMins = (Buffer.byteLength(variantCode) / 1000).toFixed(2)\n\t\t\tconst variantGzip = Number(zlib.gzipSync(variantCode, { level: 9 }).length / 1000).toFixed(2)\n\n\t\t\tsize.types[variant] = {\n\t\t\t\tmin: variantMins,\n\t\t\t\tgzp: variantGzip,\n\t\t\t}\n\n\t\t\tawait fs.writeFile(variantPath, variantCode + `\\n//# sourceMappingUrl=index.map`)\n\t\t}\n\n\t\tconsole.log(box(size))\n\t}\n}\n\nexport const buildAll = async (opts) => {\n\tawait build(stringifyPackageUrl, opts)\n\tawait build(corePackageUrl, opts)\n\tawait build(reactPackageUrl, opts)\n}\n\nif (isProcessMeta(import.meta)) {\n\tif (getProcessArgOf('watch').includes(true)) {\n\t\tlet onlyArgs = getProcessArgOf('only')\n\n\t\tonlyArgs = onlyArgs.length ? ['--only', ...onlyArgs] : onlyArgs\n\n\t\tnodemon(\n\t\t\t[\n\t\t\t\t'-q',\n\t\t\t\t`--watch packages/core/src`,\n\t\t\t\t`--watch packages/core/tests`,\n\t\t\t\t`--watch packages/core/types`,\n\t\t\t\t`--watch packages/react/src`,\n\t\t\t\t`--watch packages/react/tests`,\n\t\t\t\t`--watch packages/react/types`,\n\t\t\t\t`--watch packages/stringify/src`,\n\t\t\t\t`--watch packages/stringify/tests`,\n\t\t\t\t`--watch packages/stringify/types`,\n\n\t\t\t\t// exec\n\t\t\t\t`--exec \"${['node', './.task/build.js', ...onlyArgs].join(' ')}\"`,\n\t\t\t].join(' '),\n\t\t).on('start', () => {\n\t\t\tprocess.stdout.write('\\u001b[3J\\u001b[2J\\u001b[1J')\n\t\t\tconsole.clear()\n\t\t}).on('quit', () => process.exit())\n\t} else {\n\t\tbuildAll({\n\t\t\tonly: getProcessArgOf('only'),\n\t\t}).catch((error) => {\n\t\t\tconsole.error(error)\n\n\t\t\tprocess.exitCode = 1\n\t\t})\n\t}\n}\n" }, { "path": ".task/internal/child_process.js", "content": "import cp from 'child_process'\nimport { rootUrl } from './dirs.js'\n\nexport * from 'child_process'\n\nexport const spawn = (\n\t/** @type {string} */ exec,\n\t/** @type {readonly string[]} */ args = [],\n\t/** @type {cp.SpawnOptionsWithoutStdio} */ opts = {}\n) => new Promise(\n\t(close, error) => {\n\t\tcp.spawn(exec, [].concat(args || []), {\n\t\t\tcwd: rootUrl.pathname,\n\t\t\tenv: { ...process.env },\n\t\t\tstdio: 'inherit',\n\t\t\t...Object(opts)\n\t\t})._events = { close, error }\n\t}\n)\n" }, { "path": ".task/internal/color.js", "content": "const ansi = (id) => `\\x1b[${id}m`\nconst escape = (string) => string.replace(/[\\\\^$*+?.()|[\\]{}]/g, '\\\\$&')\nconst ansiRe = RegExp(escape(ansi(0)), 'g')\n\nexport const color = (string, id) => ansi(id) + string.replace(ansiRe, ansi(0) + ansi(id)) + ansi(0)\n\nexport const bold = (string) => color(string, 1)\nexport const dim = (string) => color(string, 2)\nexport const underline = (string) => color(string, 4)\nexport const invert = (string) => color(string, 7)\n\nexport const black = (string) => color(string, 30)\nexport const red = (string) => color(string, 31)\nexport const green = (string) => color(string, 32)\nexport const yellow = (string) => color(string, 33)\nexport const blue = (string) => color(string, 34)\nexport const magenta = (string) => color(string, 35)\nexport const cyan = (string) => color(string, 36)\nexport const white = (string) => color(string, 37)\n\nexport const bgBlack = (string) => color(string, 40)\nexport const bgRed = (string) => color(string, 41)\nexport const bgGreen = (string) => color(string, 42)\nexport const bgYellow = (string) => color(string, 43)\nexport const bgBlue = (string) => color(string, 44)\nexport const bgMagenta = (string) => color(string, 45)\nexport const bgCyan = (string) => color(string, 46)\nexport const bgWhite = (string) => color(string, 47)\n\nexport const pad = (string, size = 0, char = ' ') => string.padStart((string.length + size) / 2, char).padEnd(size, char)\n\nexport const box = ({\n\tname,\n\ttypes\n}) => {\n\tconst border = (text) => dim(cyan(text))\n\tconst v = border('│')\n\tconst h = (size) => border(pad('', size, '┈'))\n\n\tconst nameLead = pad('', 16 - name.length / 2)\n\tconst nameTail = pad('', nameLead.length + name.length % 2)\n\tconst nullLine = pad('', 32)\n\n\tconst kb = (kb) => bold(green(kb.slice(0, -3))) + ' ' + dim(kb.slice(-2))\n\n\treturn [\n\t\tborder(`╭────────────────────────────────╮`),\n\t\t`${v}${nameLead}${bold(white(name))}${nameTail}${v}`,\n\t\t`${v}${nullLine}${v}`,\n\t\t...Object.entries(types).map(([type, { min, gzp }]) => [\n\t\t\t`${v} ${h(15 - type.length)} ${cyan(type)} ${h(15 - type.length - type.length % 2)} ${v}`,\n\t\t\t`${v} ${' '.repeat(3 - min.length % 2)}${kb(min + ' kB')}${' '.repeat(3)} ${border('╷')} ${' '.repeat(3 - gzp.length % 2)}${kb(gzp + ' kB')}${' '.repeat(3)} ${v}`,\n\t\t\t`${v} ${dim(cyan('minified'))} ${border('╵')} ${dim(cyan('gzipped'))} ${v}`,\n\t\t].join('\\n')),\n\t\tborder(`╰────────────────────────────────╯`),\n\t].join('\\n')\n}\n\nexport const passIcon = green('✔')\nexport const failIcon = red('✖')\n\nexport const passText = (text = 'PASS') => invert(green(bold(` ${text} `)))\nexport const failText = (text = 'FAIL') => invert(red(bold(` ${text} `)))\nexport const infoText = (text = 'INFO') => dim(text)\n" }, { "path": ".task/internal/dirs.js", "content": "import process from 'node:process'\nimport URL from './url.js'\n\n/** Root directory. */\nexport const rootUrl = new URL('../../', import.meta.url)\n\n/** Packages directory. */\nexport const packagesUrl = new URL('packages/', rootUrl)\n\n/** Core package directory. */\nexport const corePackageUrl = new URL('core/', packagesUrl)\n\n/** Core tests directory. */\nexport const coreTestsUrl = new URL('tests/', corePackageUrl)\n\n/** React package directory. */\nexport const reactPackageUrl = new URL('react/', packagesUrl)\n\n/** React tests directory. */\nexport const reactTestsUrl = new URL('tests/', reactPackageUrl)\n\n/** Stringify package directory */\nexport const stringifyPackageUrl = new URL('stringify/', packagesUrl)\n\n/** React tests directory. */\nexport const stringifyTestsUrl = new URL('tests/', stringifyPackageUrl)\n\n/** Current file href. */\nexport const argv1Url = new URL(process.argv[1], 'file:').href\n" }, { "path": ".task/internal/expect.js", "content": "import { deepEqual as toEqual, equal as toBe, notDeepEqual as toNotEqual, notEqual as toNotBe } from 'node:assert/strict'\n\nexport default function expect(actual) {\n\treturn {\n\t\t/** Tests for strict equality between the actual and expected parameters. */\n\t\ttoBe: toBe.bind(this, actual),\n\t\t/** Tests that the actual object is an instance of the expected class. */\n\t\ttoBeInstanceOf: toBeInstanceOf.bind(this, actual),\n\t\t/** Tests for deep equality between the actual and expected parameters. */\n\t\ttoEqual: toEqual.bind(this, actual),\n\t\t/** Tests that the actual function does throw when it is called. */\n\t\ttoThrow: toThrow.bind(this, actual),\n\n\t\t/** Tests for strict inequality between the actual and expected parameters. */\n\t\ttoNotBe: toNotBe.bind(this, actual),\n\t\t/** Tests that the actual object is not an instance of the expected class. */\n\t\ttoNotBeInstanceOf: toNotBeInstanceOf.bind(this, actual),\n\t\t/** Tests for deep inequality between the actual and expected parameters. */\n\t\ttoNotEqual: toNotEqual.bind(this, actual),\n\t\t/** Tests that the actual function does not throw when it is called. */\n\t\ttoNotThrow: toNotThrow.bind(this, actual),\n\t}\n}\n\n/** Tests that the actual object is an instance of the expected class. */\nfunction toBeInstanceOf(actual, expected) {\n\tif (!(actual instanceof expected)) {\n\t\tthrow new AssertionError({\n\t\t\tmessage: 'Expected value to be instance:',\n\t\t\toperator: 'instanceOf',\n\t\t\tactual,\n\t\t\texpected,\n\t\t\tstackStartFn: toBeInstanceOf,\n\t\t})\n\t}\n}\n\n/** Tests that the actual object is not an instance of the expected class. */\nfunction toNotBeInstanceOf(actual, expected) {\n\tif (actual instanceof expected) {\n\t\tthrow new AssertionError({\n\t\t\tmessage: 'Expected value to be instance:',\n\t\t\toperator: 'instanceOf',\n\t\t\tactual,\n\t\t\texpected,\n\t\t\tstackStartFn: toNotBeInstanceOf,\n\t\t})\n\t}\n}\n\n/** Tests that the actual function does throw when it is called. */\nasync function toThrow(actualFunction, expected) {\n\tlet actual = undefined\n\n\ttry {\n\t\tactual = await actualFunction()\n\t} catch (error) {\n\t\t// do nothing and continue\n\t\treturn\n\t}\n\n\tthrow new AssertionError({\n\t\tmessage: 'Expected exception:',\n\t\toperator: 'throws',\n\t\tstackStartFn: toThrow,\n\t\tactual,\n\t\texpected,\n\t})\n}\n\n/** Tests that the actual function does not throw when it is called. */\nasync function toNotThrow(actualFunction, expected) {\n\tlet actual = undefined\n\n\ttry {\n\t\tactual = await actualFunction()\n\n\t\t// do nothing and continue\n\t\treturn\n\t} catch (error) {\n\t\tthrow new AssertionError({\n\t\t\tmessage: 'Unexpected exception:',\n\t\t\toperator: 'doesNotThrow',\n\t\t\tstackStartFn: toThrow,\n\t\t\tactual,\n\t\t\texpected,\n\t\t})\n\t}\n}\n" }, { "path": ".task/internal/fs-test.js", "content": "import * as fs from './fs.js'\n\nlet source = new URL('./test-source/', import.meta.url)\nlet target = new URL('./test-target/', import.meta.url)\n\nfs.copydir(source, target)\n" }, { "path": ".task/internal/fs.js", "content": "import fs from 'fs/promises'\nimport { copyFile, mkdir, readdir } from 'fs/promises'\nimport URL from './url.js'\n\nexport * from 'fs/promises'\nexport { existsSync as exists } from 'fs'\n\n/** Asynchronously copies dir to dest. By default, dest is overwritten if it already exists. */\nexport const copydir = async function copydir(src, dst) {\n\tlet copydir = async (src, dst) => {\n\t\tawait mkdir(dst, { recursive: true })\n\n\t\tfor (const dirent of await readdir(src, { withFileTypes: true })) {\n\t\t\tawait (dirent.isDirectory() ? copydir : copyFile)(\n\t\t\t\tsrc.dir.to(dirent.name),\n\t\t\t\tdst.dir.to(dirent.name)\n\t\t\t)\n\t\t}\n\t}\n\n\tcopydir(URL.from(src), URL.from(dst))\n}\n\n/** Asynchronously reads a file as parsed JSON. */\nexport const readFileJson = {\n\tasync readFileJson(/** @type {import('fs').PathLike | fs.FileHandle} */ path) {\n\t\tconst json = await fs.readFile(path, 'utf8')\n\n\t\t/** @type {JSONValue} */\n\t\tconst data = JSON.parse(json)\n\n\t\treturn data\n\t}\n}.readFileJson\n\nfs.copydir = copydir\nfs.readFileJson = readFileJson\n\n/** @typedef { string | number | boolean | null | JSONArray | JSONObject } JSONValue */\n/** @typedef { JSONValue[] } JSONArray */\n/** @typedef {{ [k: string]: JSONValue }} JSONObject */\n\nexport default fs\n" }, { "path": ".task/internal/js.js", "content": "import { generate } from 'astring'\nimport { importAssertions } from 'acorn-import-assertions'\nimport { Node, Parser } from 'acorn'\nimport acornClassFields from 'acorn-class-fields'\nimport acornJsx from 'acorn-jsx'\nimport acornLogicalAssignment from 'acorn-logical-assignment'\nimport acornPrivateMethods from 'acorn-private-methods'\n\nlet acornPlugins = [\n\tacornJsx({ allowNamespaces: true, allowNamespacedObjects: true }),\n\tacornClassFields,\n\tacornLogicalAssignment,\n\tacornPrivateMethods,\n\timportAssertions\n]\n\nlet prototype = Node.prototype\nlet parser = Parser.extend(...acornPlugins)\n\nexport let parse = (code) => {\n\tlet parsed = parser.parse(code, { sourceType: 'module', ecmaVersion: 'latest' })\n\n\treturn parsed\n}\n\nexport let stringify = (ast) => generate(ast)\n\nlet defaultProps = {\n\tArrowFunctionExpression: {\n\t\texpression: false,\n\t\tgenerator: false,\n\t\tasync: false,\n\t\tparams: [],\n\t\tbody: null,\n\t},\n\tAssignmentExpression: {\n\t\toperator: '=',\n\t\tleft: null,\n\t\tright: null,\n\t},\n\tBlockStatement: {\n\t\tbody: [],\n\t},\n\tCallExpression: {\n\t\tcallee: null,\n\t\targuments: [],\n\t\toptional: false,\n\t},\n\tCatchClause: {\n\t\tparam: null,\n\t\tbody: { type: 'BlockStatement', body: [] }\n\t},\n\tExportNamedDeclaration: {\n\t\tdeclaration: null,\n\t\tspecifiers: []\n\t},\n\tExportSpecifier: {\n\t\tlocal: null,\n\t\texported: null,\n\t},\n\tExpressionStatement: {\n\t\texpression: {\n\t\t\toperator: '=',\n\t\t\tleft: null,\n\t\t\tright: null,\n\t\t},\n\t},\n\tIdentifier: { name: '_' },\n\tImportDefaultSpecifier: {\n\t\tlocal: null\n\t},\n\tImportDeclaration: {\n\t\tspecifiers: [],\n\t\tsource: null,\n\t},\n\tLiteral: {\n\t\tvalue: '_',\n\t\traw: '\\'_\\'',\n\t\toptional: false,\n\t},\n\tMemberExpression: {\n\t\tobject: null,\n\t\tproperty: null,\n\t\tcomputed: false,\n\t\toptional: false,\n\t},\n\tObjectExpression: {\n\t\tproperties: [],\n\t},\n\tObjectPattern: {\n\t\tproperties: [],\n\t},\n\tProgram: {\n\t\tbody: [],\n\t},\n\tProperty: {\n\t\tmethod: false,\n\t\tshorthand: false,\n\t\tcomputed: false,\n\t\tkey: null,\n\t\tvalue: null,\n\t\tkind: 'init',\n\t},\n\tRestElement: {\n\t\targument: null,\n\t},\n\tReturnStatement: {\n\t\targument: null,\n\t},\n\tTryStatement: {\n\t\tblock: null,\n\t\thandler: null,\n\t\tfinalizer: null,\n\t},\n\tVariableDeclaration: {\n\t\tdeclarations: [],\n\t\tkind: 'var',\n\t},\n\tVariableDeclarator: {\n\t\tid: null,\n\t\tinit: {\n\t\t\ttype: 'CallExpression',\n\t\t\tcallee: null,\n\t\t\targuments: [],\n\t\t}\n\t},\n}\n\n\nlet createNode = (...props) => Object.assign(Object.create(prototype), ...props)\n\nexport let create = (type, props) => createNode({ type }, defaultProps[type], props)\n\nexport let ArrowFunctionExpression = (props) => create('ArrowFunctionExpression', props)\nexport let AssignmentExpression = (props) => create('AssignmentExpression', props)\nexport let BlockStatement = (props) => create('BlockStatement', props)\nexport let CallExpression = (props) => create('CallExpression', props)\nexport let CatchClause = (props) => create('CatchClause', props)\nexport let ExportNamedDeclaration = (props) => create('ExportNamedDeclaration', props)\nexport let ExportSpecifier = (props) => create('ExportSpecifierExportSpecifier', props)\nexport let ExpressionStatement = (props) => create('ExpressionStatement', props)\nexport let Identifier = (props) => create('Identifier', props)\nexport let ImportDeclaration = (props) => create('ImportDeclaration', props)\nexport let ImportDefaultSpecifier = (props) => create('ImportDefaultSpecifier', props)\nexport let Literal = (props) => create('Literal', props)\nexport let MemberExpression = (props) => create('MemberExpression', props)\nexport let ObjectExpression = (props) => create('ObjectExpression', props)\nexport let Program = (props) => create('Program', props)\nexport let Property = (props) => create('Property', props)\nexport let ReturnStatement = (props) => create('ReturnStatement', props)\nexport let TryStatement = (props) => create('TryStatement', props)\nexport let VariableDeclaration = (props) => create('VariableDeclaration', props)\nexport let VariableDeclarator = (props) => create('VariableDeclarator', props)\n\nexport let parents = new WeakMap()\n\nlet createPrototypeOf = (value) => value == null ? value : Array.isArray(value) ? [] : Object.create(Object.getPrototypeOf(value))\n\nObject.defineProperties(prototype, {\n\tclone: {\n\t\tvalue: {\n\t\t\tclone(overrides) {\n\t\t\t\tlet process = (object) => {\n\t\t\t\t\tlet clone = createPrototypeOf(object)\n\n\t\t\t\t\tfor (let name of Object.keys(object)) {\n\t\t\t\t\t\tif (object[name] instanceof Object) {\n\t\t\t\t\t\t\tclone[name] = process(object[name])\n\n\t\t\t\t\t\t\tparents.set(clone[name], [name, clone])\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tclone[name] = object[name]\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\t\t\t\t\treturn clone\n\t\t\t\t}\n\n\t\t\t\treturn Object.assign(process(this), overrides)\n\t\t\t}\n\t\t}.clone,\n\t\tconfigurable: true,\n\t\twritable: true,\n\t},\n\tfind: {\n\t\tvalue: {\n\t\t\tfind(type, call) {\n\t\t\t\tlet find = (object) => {\n\t\t\t\t\tif (object.type === type) call(object)\n\n\t\t\t\t\tfor (let name of Object.keys(object)) {\n\t\t\t\t\t\tif (object[name] instanceof Object) {\n\t\t\t\t\t\t\tparents.set(object[name], [name, object])\n\n\t\t\t\t\t\t\tfind(object[name])\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\tfind(this)\n\t\t\t}\n\t\t}.find,\n\t\tconfigurable: true,\n\t\twritable: true,\n\t},\n\tparent: {\n\t\tget: {\n\t\t\tparent() {\n\t\t\t\treturn (parents.get(this) || [])[1] || null\n\t\t\t},\n\t\t}.parent,\n\t\tconfigurable: true,\n\t},\n\tparentNode: {\n\t\tget: {\n\t\t\tparentNode() {\n\t\t\t\tlet object = this\n\t\t\t\twhile (true) {\n\t\t\t\t\tobject = parentOf(object)\n\t\t\t\t\tif (object == null) return null\n\t\t\t\t\tif (object instanceof Array) continue\n\t\t\t\t\treturn object\n\t\t\t\t}\n\t\t\t},\n\t\t}.parentNode,\n\t\tconfigurable: true,\n\t},\n\tkeyOfParent: {\n\t\tget: {\n\t\t\tkeyOfParent() {\n\t\t\t\treturn (parents.get(this) || [])[0] || null\n\t\t\t}\n\t\t}.keyOfParent,\n\t\tconfigurable: true,\n\t},\n\tkeyOfParentNode: {\n\t\tget: {\n\t\t\tkeyOfParentNode() {\n\t\t\t\tlet object = this, key\n\t\t\t\twhile (true) {\n\t\t\t\t\tkey = keyOfParent(object)\n\t\t\t\t\tobject = parentOf(object)\n\t\t\t\t\tif (object == null) return null\n\t\t\t\t\tif (Array.isArray(object)) continue\n\t\t\t\t\treturn key\n\t\t\t\t}\n\t\t\t},\n\t\t}.keyOfParentNode,\n\t\tconfigurable: true,\n\t},\n\tremove: {\n\t\tvalue: {\n\t\t\tremove() {\n\t\t\t\treturn this.replaceWith()\n\t\t\t}\n\t\t}.remove,\n\t\tconfigurable: true,\n\t\twritable: true,\n\t},\n\treplaceWith: {\n\t\tvalue: {\n\t\t\treplaceWith(...nodes) {\n\t\t\t\tlet [name, node] = parents.get(this) || []\n\t\t\t\tif (!node) return\n\n\t\t\t\tif (Array.isArray(node)) {\n\t\t\t\t\tnode.splice(name, 1, ...nodes)\n\t\t\t\t} else {\n\t\t\t\t\tnode[name] = Array.isArray(node[name]) || nodes.length > 1 ? nodes : nodes[0] || null\n\t\t\t\t}\n\t\t\t}\n\t\t}.replaceWith,\n\t\tconfigurable: true,\n\t\twritable: true,\n\t},\n\ttoString: {\n\t\tvalue: {\n\t\t\ttoString() {\n\t\t\t\treturn stringify(this)\n\t\t\t},\n\t\t}.toString,\n\t\tconfigurable: true,\n\t\twritable: true,\n\t},\n})\n\nexport let keyOfParent = (object) => (parents.get(object) || [])[0] || null\nexport let parentOf = (object) => (parents.get(object) || [])[1] || null\n\nexport let find = (node, type, next) => {\n\tif (node.type === type) {\n\t\tif (next) next(node)\n\t\telse return node\n\t}\n\tfor (let name in node) {\n\t\tif (name === 'type') continue\n\n\t\tlet data = node[name]\n\n\t\tif (Array.isArray(data)) {\n\t\t\tparents.set(data, this)\n\n\t\t\tfor (let each of data) {\n\t\t\t\tif (each instanceof Node) {\n\t\t\t\t\tparents.set(each, data)\n\n\t\t\t\t\tlet deep = find(each, type, next)\n\n\t\t\t\t\tif (deep && !next) return deep\n\t\t\t\t}\n\t\t\t}\n\t\t} else if (data instanceof Node) {\n\t\t\tparents.set(data, this)\n\n\t\t\tlet deep = find(data, type, next)\n\n\t\t\tif (deep && !next) return deep\n\t\t}\n\t}\n\treturn null\n}\n" }, { "path": ".task/internal/js.transformDestructuring.js", "content": "import * as js from './js.js'\n\nexport let transformDestructuring = (ast) => {\n\t// replace destructuring\n\tast.find('ObjectPattern', (objectPattern) => {\n\t\tif (objectPattern.keyOfParentNode === 'params') {\n\t\t\tlet { parentNode } = objectPattern\n\n\t\t\tif (\n\t\t\t\tparentNode.body.type !== 'BlockStatement'\n\t\t\t) {\n\t\t\t\tparentNode.body.replaceWith(\n\t\t\t\t\tjs.BlockStatement({\n\t\t\t\t\t\tbody: [\n\t\t\t\t\t\t\tjs.ReturnStatement({\n\t\t\t\t\t\t\t\targument: parentNode.body\n\t\t\t\t\t\t\t})\n\t\t\t\t\t\t]\n\t\t\t\t\t})\n\t\t\t\t)\n\t\t\t}\n\n\t\t\tlet argName = `_arg${objectPattern.keyOfParent}`\n\n\t\t\tobjectPattern.replaceWith(\n\t\t\t\tjs.Identifier({ name: argName })\n\t\t\t)\n\n\t\t\tparentNode.body.body.unshift(\n\t\t\t\tjs.VariableDeclaration({\n\t\t\t\t\tkind: 'let',\n\t\t\t\t\tdeclarations: [\n\t\t\t\t\t\tjs.VariableDeclarator({\n\t\t\t\t\t\t\tid: objectPattern,\n\t\t\t\t\t\t\tinit: js.Identifier({ name: argName }),\n\t\t\t\t\t\t})\n\t\t\t\t\t]\n\t\t\t\t})\n\t\t\t)\n\t\t}\n\t})\n\n\treturn ast\n}\n" }, { "path": ".task/internal/js.transformIIFE.js", "content": "import * as js from './js.js'\n\nexport let transformIIFE = (ast) => {\n\tast.body = [\n\t\tjs.ExpressionStatement({\n\t\t\texpression: js.AssignmentExpression({\n\t\t\t\tleft: js.Identifier({ name: 'stitches' }),\n\t\t\t\tright: js.CallExpression({\n\t\t\t\t\tcallee: js.ArrowFunctionExpression({\n\t\t\t\t\t\tbody: js.BlockStatement({\n\t\t\t\t\t\t\tbody: ast.body\n\t\t\t\t\t\t})\n\t\t\t\t\t})\n\t\t\t\t})\n\t\t\t})\n\t\t})\n\t]\n\n\t// remove imports\n\tast.find('ImportDeclaration', (importDeclaration) => {\n\t\timportDeclaration.remove()\n\t})\n\n\t// change exports to returns\n\tast.find('ExportNamedDeclaration', (exportNamedDeclaration) => {\n\t\texportNamedDeclaration.replaceWith(\n\t\t\tjs.ReturnStatement({\n\t\t\t\targument: js.ObjectExpression({\n\t\t\t\t\tproperties: exportNamedDeclaration.specifiers.map(\n\t\t\t\t\t\t(exportSpecifier) => js.Property({\n\t\t\t\t\t\t\tkey: exportSpecifier.exported,\n\t\t\t\t\t\t\tvalue: exportSpecifier.local,\n\t\t\t\t\t\t})\n\t\t\t\t\t)\n\t\t\t\t})\n\t\t\t})\n\t\t)\n\t})\n\n\treturn ast\n}\n" }, { "path": ".task/internal/js.transformModulesToCJS.js", "content": "import * as js from './js.js'\n\nexport let transformModulesToCJS = (ast) => {\n\t// replace exports\n\tast.find('ExportNamedDeclaration', (exportNamedDeclaration) => {\n\t\tlet expressionStatement = js.ExpressionStatement({\n\t\t\texpression: js.AssignmentExpression({\n\t\t\t\tleft: js.MemberExpression({\n\t\t\t\t\tobject: js.Identifier({ name: 'module' }),\n\t\t\t\t\tproperty: js.Identifier({ name: 'exports' })\n\t\t\t\t}),\n\t\t\t\tright: js.ObjectExpression({\n\t\t\t\t\tproperties: [],\n\t\t\t\t}),\n\t\t\t})\n\t\t})\n\n\t\texportNamedDeclaration.find('ExportSpecifier', (exportSpecifier) => {\n\t\t\texpressionStatement.expression.right.properties.push(\n\t\t\t\tjs.create('Property', {\n\t\t\t\t\tkey: js.create('Identifier', { name: exportSpecifier.exported.name }),\n\t\t\t\t\tvalue: js.create('Identifier', { name: exportSpecifier.local.name }),\n\t\t\t\t})\n\t\t\t)\n\t\t})\n\n\t\texportNamedDeclaration.replaceWith(expressionStatement)\n\t})\n\n\t// replace imports\n\tast.find('ImportDeclaration', (importDeclaration) => {\n\t\tlet variableDeclaration = js.VariableDeclaration({\n\t\t\tdeclarations: [\n\t\t\t\tjs.VariableDeclarator({\n\t\t\t\t\tid: js.Identifier({ name: importDeclaration.specifiers[0].local.name }),\n\t\t\t\t\tinit: js.CallExpression({\n\t\t\t\t\t\tcallee: js.Identifier({ name: 'require' }),\n\t\t\t\t\t\targuments: [\n\t\t\t\t\t\t\timportDeclaration.source,\n\t\t\t\t\t\t],\n\t\t\t\t\t}),\n\t\t\t\t})\n\t\t\t]\n\t\t})\n\n\t\timportDeclaration.replaceWith(variableDeclaration)\n\t})\n\n\treturn ast\n}\n" }, { "path": ".task/internal/js.transformOptionalCatchToParam.js", "content": "import * as js from './js.js'\n\nexport let transformOptionalCatchToParam = (ast) => {\n\t// replace optional catch\n\tast.find('CatchClause', (catchClause) => {\n\t\tif (catchClause.param === null) {\n\t\t\tcatchClause.param = js.Identifier({ name: 'e' })\n\t\t}\n\t})\n\n\treturn ast\n}\n" }, { "path": ".task/internal/process.js", "content": "import URL from './url.js'\n\nconst {\n\targv: [, file, ...argv],\n} = process\n\n/** Returns whether the import.meta matches the current process. */\nexport const isProcessMeta = (meta) => new URL(meta.url).href === URL.from(file).href\n\n/** Returns the values for a given process argument. */\nexport const getProcessArgOf = (name) => {\n\tconst lead = argv.indexOf('--' + name) + 1\n\tconst tail = lead ? argv.slice(lead).findIndex((arg) => arg.startsWith('--')) : 0\n\n\tconst vals = lead ? argv.slice(lead, ~tail ? lead + tail : argv.length) : []\n\n\treturn lead ? (vals.length ? vals : [true]) : vals\n}\n" }, { "path": ".task/internal/readline.js", "content": "import * as readline from 'readline'\n\nexport * from 'readline'\n\n/** Displays the query, awaits user input, and returns the provided input. */\nexport const question = (\n\t/** @type {string} */ query,\n\t/** @type {import('events').Abortable} */\n\topts = undefined\n) => new Promise(resolver => {\n\tquery = String(query).replace(/[^\\s]$/, '$& ')\n\n\topts = Object(opts)\n\n\tconst int = readline.createInterface({\n\t\tinput: process.stdin,\n\t\toutput: process.stdout,\n\t})\n\n\tint.question(query, opts, answer => {\n\t\tint.close()\n\n\t\tresolver(answer)\n\t})\n})\n" }, { "path": ".task/internal/url.js", "content": "import { fileURLToPath, pathToFileURL } from 'url';\n\nexport default class URL extends globalThis.URL {\n\tto(/** @type {string[]} */ ...segments) {\n\t\treturn segments.reduce((/** @type URL */ url, segment) => new URL(segment, url), this)\n\t}\n\n\tincludes(/** @type {string} */ searchString, position = 0) {\n\t\treturn this.href.includes(searchString, position)\n\t}\n\n\tendsWith(/** @type {string} */ searchString, length = this.href.length) {\n\t\treturn this.href.endsWith(searchString, length)\n\t}\n\n\tget dir() {\n\t\treturn new URL(this.href + '/')\n\t}\n\n\tget ospathname() {\n\t\treturn fileURLToPath(this)\n\t}\n\n\tstatic from(/** @type {string | globalThis.URL} */ segment, /** @type {string[]} */ ...segments) {\n\t\treturn (\n\t\t\t/^file:/.test(segment)\n\t\t\t\t? new URL(segment)\n\t\t\t: new URL(pathToFileURL(segment))\n\t\t).to(...segments)\n\t}\n}\n" }, { "path": ".task/lint-esm.js", "content": "import fs from './internal/fs.js'\nimport { bold, underline } from './internal/color.js'\nimport { corePackageUrl, reactPackageUrl, stringifyPackageUrl } from './internal/dirs.js'\nimport { isProcessMeta, getProcessArgOf } from './internal/process.js'\nimport { ESLint } from 'eslint'\n\nexport const lint = async (packageUrl, opts) => {\n\topts = Object.assign({ only: [] }, opts)\n\n\tconst packageJsonUrl = new URL(`package.json`, packageUrl)\n\tconst packageName = JSON.parse(await fs.readFile(packageJsonUrl, 'utf8')).name\n\tconst packageTsUrl = new URL(`types/index.d.ts`, packageUrl)\n\n\tif (!opts.only.length || opts.only.includes(packageName)) {\n\t\tconsole.log(underline(bold(packageName)))\n\t\tconsole.log(packageTsUrl.pathname)\n\n\t\tconst eslint = new ESLint()\n\n\t\tconst results = await eslint.lintFiles([packageTsUrl.pathname])\n\n\t\tconst formatter = await eslint.loadFormatter('stylish')\n\t\tconst resultText = formatter.format(results)\n\n\t\tif (resultText) console.log(resultText)\n\t\telse console.log('\\x1b[32m✔\\x1b[0m', 'Your code is flawless.', 'Hopefully this determination is flawless, too.')\n\t}\n}\n\nexport const lintAll = async (opts) => {\n\tawait lint(stringifyPackageUrl, opts)\n\tawait lint(corePackageUrl, opts)\n\tawait lint(reactPackageUrl, opts)\n}\n\nif (isProcessMeta(import.meta)) {\n\tlintAll({\n\t\tonly: getProcessArgOf('only'),\n\t}).catch((error) => {\n\t\tconsole.error(error)\n\n\t\tprocess.exitCode = 1\n\t})\n}\n" }, { "path": ".task/lint-pkg.js", "content": "import fs from './internal/fs.js'\nimport { bold, underline } from './internal/color.js'\nimport { isProcessMeta, getProcessArgOf } from './internal/process.js'\nimport { corePackageUrl, reactPackageUrl, stringifyPackageUrl } from './internal/dirs.js'\nimport * as cp from './internal/child_process.js'\n\nexport const lint = async (packageUrl, opts) => {\n\topts = Object.assign({ only: [] }, opts)\n\n\tconst packageJsonUrl = new URL(`package.json`, packageUrl)\n\tconst packageName = JSON.parse(await fs.readFile(packageJsonUrl, 'utf8')).name\n\n\tif (!opts.only.length || opts.only.includes(packageName)) {\n\t\tconsole.log(underline(bold(packageName)))\n\n\t\tawait cp.spawn('./node_modules/.bin/package-check', ['--cwd', packageUrl.pathname])\n\t}\n}\n\nexport const lintAll = async (opts) => {\n\tawait lint(stringifyPackageUrl, opts)\n\tawait lint(corePackageUrl, opts)\n\tawait lint(reactPackageUrl, opts)\n}\n\nif (isProcessMeta(import.meta)) {\n\tlintAll({\n\t\tonly: getProcessArgOf('only'),\n\t}).catch((error) => {\n\t\tconsole.error(error)\n\n\t\tprocess.exitCode = 1\n\t})\n}\n" }, { "path": ".task/lint-tsc.js", "content": "import fs from './internal/fs.js'\nimport { bold, underline } from './internal/color.js'\nimport { corePackageUrl, reactPackageUrl, stringifyPackageUrl } from './internal/dirs.js'\nimport { isProcessMeta, getProcessArgOf } from './internal/process.js'\nimport * as cp from './internal/child_process.js'\n\nexport const lint = async (packageUrl, opts) => {\n\topts = Object.assign({ only: [] }, opts)\n\n\tconst packageJsonUrl = new URL(`package.json`, packageUrl)\n\tconst packageName = JSON.parse(await fs.readFile(packageJsonUrl, 'utf8')).name\n\tconst packageTsUrl = new URL(`types/index.d.ts`, packageUrl)\n\n\tif (!opts.only.length || opts.only.includes(packageName)) {\n\t\tconsole.log(underline(bold(packageName)))\n\t\tconsole.log(packageTsUrl.pathname)\n\n\t\tawait cp.spawn('./node_modules/.bin/tsc', ['--noEmit', '--skipLibCheck', packageTsUrl.pathname])\n\t}\n}\n\nexport const lintAll = async (opts) => {\n\tawait lint(stringifyPackageUrl, opts)\n\tawait lint(corePackageUrl, opts)\n\tawait lint(reactPackageUrl, opts)\n}\n\nif (isProcessMeta(import.meta)) {\n\tlintAll({\n\t\tonly: getProcessArgOf('only'),\n\t}).catch((error) => {\n\t\tconsole.error(error)\n\n\t\tprocess.exitCode = 1\n\t})\n}\n" }, { "path": ".task/lint.js", "content": "import { isProcessMeta, getProcessArgOf } from './internal/process.js'\nimport { lintAll as lintAllEsm } from './lint-esm.js'\nimport { lintAll as lintAllPkg } from './lint-pkg.js'\nimport { lintAll as lintAllTsc } from './lint-tsc.js'\n\nexport const lintAll = async (opts) => {\n\tawait lintAllEsm(opts)\n\tawait lintAllTsc(opts)\n\tawait lintAllPkg(opts)\n}\n\nif (isProcessMeta(import.meta)) {\n\tlintAll({\n\t\tonly: getProcessArgOf('only'),\n\t}).catch((error) => {\n\t\tconsole.error(error)\n\n\t\tprocess.exitCode = 1\n\t})\n}\n" }, { "path": ".task/release.js", "content": "import URL from './internal/url.js'\nimport * as co from './internal/color.js'\nimport * as cp from './internal/child_process.js'\nimport * as fs from './internal/fs.js'\nimport * as rl from './internal/readline.js'\n\nconst main = async () => {\n\tconst root = URL.from(import.meta.url).to('../')\n\tconst pkg = await fs.readFileJson(root.to('package.json'), 'utf8')\n\n\tconst state = {}\n\n\tconst q1option = new Set(['major', 'minor', 'patch', 'prerelease'])\n\n\tstate.release = await rl.question(`Release Type ${co.dim('(major, minor, patch, prerelease)')}:`)\n\tstate.npmtag = state.release === 'prerelease' ? 'canary' : 'latest'\n\n\tif (!q1option.has(state.release)) return\n\n\tawait cp.spawn('npm', ['version', state.release, '--workspaces'], { stdio: 'pipe' })\n\n\tconst workspacepkgpaths = new Set\n\tconst workspacetags = new Set\n\n\tfor (let workspace of pkg.workspaces) {\n\t\tworkspace = root.to(workspace).dir\n\n\t\tconst workspacepkgpath = workspace.to('package.json')\n\t\tconst workspacepkg = await fs.readFileJson(workspacepkgpath)\n\n\t\tstate.version = `v${workspacepkg.version}`\n\n\t\tworkspacepkgpaths.add(workspacepkgpath)\n\t\tworkspacetags.add(`${workspacepkg.name}@${workspacepkg.version}`)\n\t}\n\n\tconsole.log(`Bumped ${co.bold(state.version)}`)\n\n\tconst confirm = await rl.question(`Publish ${co.bold(state.version)} as ${co.bold(state.npmtag)} ${co.dim('(y/n)')}:`)\n\n\tif (confirm !== 'y') {\n\t\tfor (const workspacepkgpath of workspacepkgpaths) {\n\t\t\tawait cp.spawn('git', ['checkout', '--', workspacepkgpath.ospathname])\n\t\t}\n\n\t\treturn\n\t}\n\n\tawait cp.spawn('npm', ['run', 'build'], { stdio: 'ignore' })\n\n\tstate.otp = await rl.question(`OTP:`)\n\n\tif (!state.otp) return\n\n\tfor (const workspacepkgpath of workspacepkgpaths) {\n\t\tawait cp.spawn('git', ['add', workspacepkgpath.ospathname])\n\t}\n\n\tawait cp.spawn('git', ['commit', '-m', state.version])\n\tawait cp.spawn('git', ['tag', state.version])\n\tawait cp.spawn('git', ['push'])\n\tawait cp.spawn('git', ['push', '--tags'])\n\n\tawait cp.spawn('npm', ['publish', '--tag', state.npmtag, '--workspaces', '--otp', state.otp])\n}\n\nmain()\n" }, { "path": ".task/test-coverage.js", "content": "import * as cp from './internal/child_process.js'\nimport * as fp from 'path'\nimport * as fs from './internal/fs.js'\nimport * as os from 'os'\nimport { bold, dim, green, red } from './internal/color.js'\n\n// Creates a unique temporary directory\n!(async () => {\n\t/** Directory storing code coverage. */\n\tconst NODE_V8_COVERAGE = await fs.mkdtemp(os.tmpdir())\n\n\t/** Exit code from the covered NodeJS process. */\n\tawait new Promise((close, error) => {\n\t\tcp.spawn('node', process.argv.slice(2), {\n\t\t\tstdio: 'inherit',\n\t\t\tenv: { ...process.env, NODE_V8_COVERAGE },\n\t\t})._events = { close, error }\n\t})\n\n\t/** Combined coverage results */\n\tconst results = []\n\n\tfor (const filename of await fs.readdir(NODE_V8_COVERAGE)) {\n\t\tresults.push(...JSON.parse(await fs.readFile(fp.join(NODE_V8_COVERAGE, filename), 'utf8')).result)\n\t}\n\n\tawait fs.rmdir(NODE_V8_COVERAGE, { recursive: true })\n\n\t/** Combined LCOV results. */\n\tlet lcovList = []\n\n\t/** Combined LCOV results. */\n\tlet lcovInfo = ''\n\n\t/** Filter for filtered results */\n\tconst filter = (url) => !url.protocol.startsWith('node') && !url.pathname.includes('/node_modules/') && url.pathname.includes('/src/')\n\n\tfor (let result of results) {\n\t\t/** URL classed result URL */\n\t\tconst url = new URL(result.url)\n\n\t\tif (filter(url)) {\n\t\t\t/** Contents of the file whose coverage was collected. */\n\t\t\tconst data = await fs.readFile(url, 'utf8')\n\n\t\t\t/** List of code lines, where the line of code is a `data` property on the object. */\n\t\t\tconst rows = data.split(/^/gm).map((line) => ({ data: line }))\n\n\t\t\tconst lcov = {\n\t\t\t\t/** Test name */\n\t\t\t\tTN: [''],\n\n\t\t\t\t/** Source file */\n\t\t\t\tSF: [url.pathname],\n\n\t\t\t\t/** Line numbers for each function name. */\n\t\t\t\tFN: [],\n\n\t\t\t\t/** Execution count for the given function.*/\n\t\t\t\tFNDA: [],\n\n\t\t\t\t/** Number of functions found. */\n\t\t\t\tFNF: [0],\n\n\t\t\t\t/** Number of functions hit. */\n\t\t\t\tFNH: [0],\n\n\t\t\t\t/** Execution count for the given line. */\n\t\t\t\tDA: [],\n\n\t\t\t\t/** Number of collected lines with a positive execution count. */\n\t\t\t\tLH: [0],\n\n\t\t\t\t/** Number of collected lines. */\n\t\t\t\tLF: [0],\n\t\t\t}\n\n\t\t\tlcovList.push(lcov)\n\n\t\t\t/** Convert */\n\t\t\tconst convert = (range, isFirstRun) => {\n\t\t\t\tlet lineOffset = 0\n\n\t\t\t\tfor (const lineIndex in rows) {\n\t\t\t\t\tconst nextLineOffset = lineOffset + rows[lineIndex].data.length\n\n\t\t\t\t\tif (range.startLine == null && range.startOffset >= lineOffset && range.startOffset < nextLineOffset) {\n\t\t\t\t\t\trange.startLine = Number(lineIndex) + 1\n\t\t\t\t\t\trange.startCol = range.startOffset - lineOffset + 1\n\t\t\t\t\t}\n\n\t\t\t\t\tif (range.endOffset >= lineOffset && range.endOffset < nextLineOffset) {\n\t\t\t\t\t\trange.endLine = Number(lineIndex) + 1\n\t\t\t\t\t\trange.endCol = range.endOffset - lineOffset + 1\n\n\t\t\t\t\t\tif (!isFirstRun) {\n\t\t\t\t\t\t\tfor (let j = range.startLine; j <= range.endLine; ++j) {\n\t\t\t\t\t\t\t\tif (rows[j]) {\n\t\t\t\t\t\t\t\t\tif (!range.count) {\n\t\t\t\t\t\t\t\t\t\trows[j].exec = 0\n\t\t\t\t\t\t\t\t\t} else if (rows[j].exec == null) {\n\t\t\t\t\t\t\t\t\t\trows[j].exec = range.count\n\t\t\t\t\t\t\t\t\t} else if (rows[j].exec > 0) {\n\t\t\t\t\t\t\t\t\t\trows[j].exec += range.count\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tbreak\n\t\t\t\t\t}\n\n\t\t\t\t\tlineOffset = nextLineOffset\n\t\t\t\t}\n\n\t\t\t\treturn range\n\t\t\t}\n\n\t\t\tfor (const coverage of result.functions) {\n\t\t\t\tlet startRange = convert(coverage.ranges[0], true)\n\t\t\t\tlet count = 0\n\n\t\t\t\t++lcov.FNF[0]\n\n\t\t\t\tlcov.FN.push([startRange.startLine, coverage.functionName])\n\n\t\t\t\tfor (const range of coverage.ranges) {\n\t\t\t\t\tcount += convert(range).count\n\t\t\t\t}\n\n\t\t\t\tlcov.FNDA.push([count, coverage.functionName])\n\n\t\t\t\tif (count) ++lcov.FNH[0]\n\t\t\t}\n\n\t\t\tfor (const line in rows) {\n\t\t\t\t++lcov.LF[0]\n\n\t\t\t\tif ('exec' in rows[line]) {\n\t\t\t\t\tlcov.DA.push([line, rows[line].exec])\n\n\t\t\t\t\tif (rows[line].exec) ++lcov.LH[0]\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tlcovInfo += `${Object.entries(lcov).reduce((report, [name, data]) => report.concat(data.reduce((string, each) => string.concat(`${name.toUpperCase()}:${each}\\n`), '')), '')}end_of_record\\n`\n\t\t}\n\t}\n\n\tfs.writeFile('coverage/lcov.info', lcovInfo)\n\n\t/** Returns a unicode meter based on LCOV coverage. */\n\tconst meter = (lcov) => {\n\t\tconst per = (lcov.FNH[0] / lcov.FNF[0]) * 100\n\t\tconst sol = Math.trunc(per / 10)\n\t\tconst haf = per % 10 >= 5 ? 1 : 0\n\t\tconst emt = 10 - sol - haf\n\t\treturn [`▰`.repeat(sol), `▱`.repeat(haf), dim(`▱`.repeat(emt))].join('')\n\t}\n\n\t/** Returns the ratio of 2 fields in LCOV data. */\n\tconst ratio = (lcov, l, r) => `${lcov[l]}${dim('/')}${lcov[r]}`.padStart(17)\n\n\t/** Based on the given LCOV data, returns the given data in a shade of green or red. */\n\tconst shade = (lcov, data) => (lcov.FNH / lcov.FNF > 0.6 ? green : red)(data)\n\n\tconst trtd = (lcov) =>\n\t\tdim('│ ') +\n\t\tshade(\n\t\t\tlcov,\n\t\t\tlcov.SF[0]\n\t\t\t\t.slice(-31)\n\t\t\t\t.replace(/^[^/]*\\//, '')\n\t\t\t\t.padEnd(31, ' '),\n\t\t) +\n\t\t' ' +\n\t\tshade(lcov, meter(lcov)) +\n\t\tdim(' │ ') +\n\t\tshade(lcov, ratio(lcov, 'FNH', 'FNF')) +\n\t\tdim(' │ ') +\n\t\tshade(lcov, ratio(lcov, 'LH', 'LF')) +\n\t\tdim(' │')\n\n\tlcovList.sort((a, b) => a.SF[0] - b.SF[0])\n\n\tconsole.log(\n\t\t[\n\t\t\t[dim('╭'), dim('─'.repeat(44)), dim('┬'), dim('─'.repeat(11)), dim('┬'), dim('─'.repeat(11)), dim('╮')].join(''),\n\t\t\t[dim('│'), bold('Coverage') + ' '.repeat(34), dim('│'), bold('Functions'), dim('│'), ' '.repeat(4) + bold('Lines'), dim('│')].join(' '),\n\t\t\t[dim('├'), dim('─'.repeat(44)), dim('┼'), dim('─'.repeat(11)), dim('┼'), dim('─'.repeat(11)), dim('┤')].join(''),\n\t\t\ttrtd(\n\t\t\t\tlcovList.reduce(\n\t\t\t\t\t(all, lcov) => {\n\t\t\t\t\t\tall.FNF[0] += lcov.FNF[0]\n\t\t\t\t\t\tall.FNH[0] += lcov.FNH[0]\n\t\t\t\t\t\tall.LF[0] += lcov.LF[0]\n\t\t\t\t\t\tall.LH[0] += lcov.LH[0]\n\t\t\t\t\t\treturn all\n\t\t\t\t\t},\n\t\t\t\t\t{ TN: [''], SF: ['All files'], FN: [], FNDA: [], FNF: [0], FNH: [0], DA: [], LH: [0], LF: [0] },\n\t\t\t\t),\n\t\t\t),\n\t\t\t[dim('╞'), ' '.repeat(42), dim('╪'), ' '.repeat(9), dim('╪'), ' '.repeat(9), dim('╡')].join(' '),\n\t\t\t...lcovList.map((lcov) => trtd(lcov)),\n\t\t\t[dim('╰'), dim('─'.repeat(44)), dim('┴'), dim('─'.repeat(11)), dim('┴'), dim('─'.repeat(11)), dim('╯')].join(''),\n\t\t].join('\\n'),\n\t)\n})()\n" }, { "path": ".task/test.js", "content": "import { passIcon, failIcon, passText, failText, infoText, dim, green } from './internal/color.js'\nimport { isProcessMeta, getProcessArgOf } from './internal/process.js'\nimport * as fs from './internal/fs.js'\nimport nodemon from 'nodemon'\nimport URL from './internal/url.js'\n\nconst root = URL.from(import.meta.url).to('../')\n\nconst main = async (pkg, opts) => {\n\tlet didFailLast\n\n\t// for each file in the testing directory\n\tfor (let file of await fs.readdir(pkg.to('tests/'))) {\n\t\tfile = pkg.to('tests/').to(file)\n\n\t\t// filter non-js files\n\t\tif (!file.endsWith('.js')) continue\n\n\t\t// filter non-matching files\n\t\tif (opts.only.length && !opts.only.some(name => file.includes(name))) continue\n\n\t\t/** Test results. */\n\t\tconst results = Object.create(null)\n\n\t\t// bootstrap the expect api\n\t\tglobalThis.expect = (await import('./internal/expect.js')).default\n\n\t\t// bootstrap the describe api\n\t\tglobal.describe = async (description, call) => {\n\t\t\t// prepare description results\n\t\t\tresults[description] = Object.create(null)\n\n\t\t\t// bootstrap the test api\n\t\t\tglobal.test = async (test, call) => {\n\t\t\t\t// prepare test results\n\t\t\t\tresults[description][test] = []\n\n\t\t\t\ttry {\n\t\t\t\t\t// run the test\n\t\t\t\t\tawait call()\n\n\t\t\t\t\t// assign success to the results\n\t\t\t\t\tresults[description][test].push(`${passIcon} ${infoText(test)}`)\n\t\t\t\t} catch (error) {\n\t\t\t\t\terror.stack = error.stack || error.message || String(error || '')\n\n\t\t\t\t\terror.stack = [ ...error.stack.split(/\\n/g).slice(1)].join('\\n')\n\n\t\t\t\t\t// assign failure to the results\n\t\t\t\t\tconst errorMessage = error.message.split('\\n')[0]\n\t\t\t\t\tresults[description][test].push(`${failIcon} ${infoText(test)}\\n\\t${errorMessage}`, getErrorStack(error), '')\n\t\t\t\t\tresults[description][test][didFail] = error\n\t\t\t\t\tresults[description][didFail] = true\n\t\t\t\t\tresults[didFail] = true\n\t\t\t\t}\n\t\t\t}\n\n\t\t\ttry {\n\t\t\t\t// run the description\n\t\t\t\tawait call()\n\t\t\t} catch (error) {\n\t\t\t\t// assign description failure to the results\n\t\t\t\tresults[description][''] = [`${failIcon} ${infoText('Error')}`, String(error.message)]\n\t\t\t}\n\t\t}\n\n\t\ttry {\n\t\t\t// run the test file\n\t\t\tawait import(file)\n\t\t} catch (error) {\n\t\t\t// report errors running the test file\n\t\t\tresults[didFail] = error\n\t\t}\n\n\t\tconst failure = results[didFail]\n\n\t\t// space out failures\n\t\tif (didFailLast && !!didFailLast != !!failure) console.log()\n\n\t\t// report details if there is a failure\n\t\tconsole.group(failure ? failText('FAIL') : passText('PASS'), infoText(file.href.slice(root.href.length)))\n\n\t\tif (failure) {\n\t\t\tprocess.exitCode = 1\n\n\t\t\tfor (let description in results) {\n\t\t\t\t// report each description\n\t\t\t\tconsole.group(failure ? failIcon : passIcon, infoText(description))\n\n\t\t\t\tfor (let test in results[description]) {\n\t\t\t\t\t// report each test\n\t\t\t\t\tconsole.log(results[description][test].join('\\n'))\n\t\t\t\t}\n\n\t\t\t\tconsole.groupEnd()\n\t\t\t}\n\n\t\t\t// report any file error\n\t\t\tif (typeof failure === 'object') {\n\t\t\t\tconsole.log(getErrorStack(failure))\n\t\t\t}\n\t\t}\n\n\t\tconsole.groupEnd()\n\n\t\tdidFailLast = results[didFail]\n\t}\n}\n\nconst didFail = Symbol.for('test.failure')\n\nconst getErrorStack = (error) => error.stack.split(/\\n/g).filter(\n\t(line) => !line.includes(import.meta.url) && !line.includes('node:')\n).map(\n\t(line) => line.replace(\n\t\t/(.*?)\\(?(file:[^:]+)(.*?)\\)?$/,\n\t\t($0, before, file, after) => (\n\t\t\tbefore.replace(/(at) ([^\\s]+)?(.*)/, `${dim('$1')} ${green('$2')}$3`) +\n\t\t\tfile.slice(root.href.length) +\n\t\t\tdim(after)\n\t\t)\n\t)\n).join('\\n')\n\nexport const testAll = async (opts) => {\n\tawait main(URL.from(import.meta.url, '../packages/stringify/'), opts)\n\tawait main(URL.from(import.meta.url, '../packages/core/'), opts)\n\tawait main(URL.from(import.meta.url, '../packages/react/'), opts)\n}\n\nif (isProcessMeta(import.meta)) {\n\tif (getProcessArgOf('watch').includes(true)) {\n\t\tlet onlyArgs = getProcessArgOf('only')\n\n\t\tonlyArgs = onlyArgs.length ? ['--only', ...onlyArgs] : onlyArgs\n\n\t\tnodemon(\n\t\t\t[\n\t\t\t\t'-q',\n\t\t\t\t`--watch packages/core/src`,\n\t\t\t\t`--watch packages/core/tests`,\n\t\t\t\t`--watch packages/core/types`,\n\t\t\t\t`--watch packages/react/src`,\n\t\t\t\t`--watch packages/react/tests`,\n\t\t\t\t`--watch packages/react/types`,\n\t\t\t\t`--watch packages/stringify/src`,\n\t\t\t\t`--watch packages/stringify/tests`,\n\t\t\t\t`--watch packages/stringify/types`,\n\n\t\t\t\t// exec\n\t\t\t\t`--exec \"${['node', './.task/test.js', ...onlyArgs].join(' ')}\"`,\n\t\t\t].join(' '),\n\t\t).on('start', () => {\n\t\t\tprocess.stdout.write('\\u001b[3J\\u001b[2J\\u001b[1J')\n\t\t\tconsole.clear()\n\t\t}).on('quit', () => process.exit())\n\t} else {\n\t\ttestAll({\n\t\t\tonly: getProcessArgOf('only'),\n\t\t}).catch((error) => {\n\t\t\tconsole.error(error)\n\n\t\t\tprocess.exitCode = 1\n\t\t})\n\t}\n}\n" }, { "path": ".vscode/package.schema.json", "content": "{\n \"$schema\": \"http://json-schema.org/draft-07/schema#\",\n \"allOf\": [\n {\n \"$ref\": \"http://json.schemastore.org/package\"\n },\n {\n \"properties\": {\n \"eslintConfig\": {\n \"title\": \"ESLint configuration\",\n \"$ref\": \"http://json.schemastore.org/eslintrc\"\n },\n \"prettier\": {\n \"title\": \"Prettier configuration\",\n \"$ref\": \"http://json.schemastore.org/prettierrc\"\n }\n }\n }\n ]\n}\n" }, { "path": ".vscode/settings.json", "content": "{\n \"debug.console.historySuggestions\": false,\n \"editor.formatOnSave\": false,\n \"editor.insertSpaces\": false,\n \"editor.snippetSuggestions\": \"none\",\n \"editor.suggest.snippetsPreventQuickSuggestions\": false,\n \"editor.suggestSelection\": \"recentlyUsedByPrefix\",\n \"editor.wordBasedSuggestions\": false,\n \"emmet.showAbbreviationSuggestions\": false,\n \"emmet.showExpandedAbbreviation\": \"never\",\n \"files.exclude\": {\n \"**/.DS_Store\": true,\n \"**/.git\": true,\n \"**/node_modules\": true,\n \"**/package-lock.json\": true,\n \"**/yarn.lock\": true\n },\n \"javascript.suggest.enabled\": false,\n \"javascript.suggest.names\": false,\n \"typescript.tsserver.maxTsServerMemory\": 8192\n}\n" }, { "path": "CODE_OF_CONDUCT.md", "content": "# Contributor Covenant Code of Conduct\n\n## Our Pledge\n\nIn the interest of fostering an open and welcoming environment, we as\ncontributors and maintainers pledge to making participation in our project and\nour community a harassment-free experience for everyone, regardless of age, body\nsize, disability, ethnicity, sex characteristics, gender identity and expression,\nlevel of experience, education, socio-economic status, nationality, personal\nappearance, race, religion, or sexual identity and orientation.\n\n## Our Standards\n\nExamples of behavior that contributes to creating a positive environment\ninclude:\n\n- Using welcoming and inclusive language\n- Being respectful of differing viewpoints and experiences\n- Gracefully accepting constructive criticism\n- Focusing on what is best for the community\n- Showing empathy towards other community members\n\nExamples of unacceptable behavior by participants include:\n\n- The use of sexualized language or imagery and unwelcome sexual attention or\n advances\n- Trolling, insulting/derogatory comments, and personal or political attacks\n- Public or private harassment\n- Publishing others' private information, such as a physical or electronic\n address, without explicit permission\n- Other conduct which could reasonably be considered inappropriate in a\n professional setting\n\n## Our Responsibilities\n\nProject maintainers are responsible for clarifying the standards of acceptable\nbehavior and are expected to take appropriate and fair corrective action in\nresponse to any instances of unacceptable behavior.\n\nProject maintainers have the right and responsibility to remove, edit, or\nreject comments, commits, code, wiki edits, issues, and other contributions\nthat are not aligned to this Code of Conduct, or to ban temporarily or\npermanently any contributor for other behaviors that they deem inappropriate,\nthreatening, offensive, or harmful.\n\n## Scope\n\nThis Code of Conduct applies both within project spaces and in public spaces\nwhen an individual is representing the project or its community. Examples of\nrepresenting a project or community include using an official project e-mail\naddress, posting via an official social media account, or acting as an appointed\nrepresentative at an online or offline event. Representation of a project may be\nfurther defined and clarified by project maintainers.\n\n## Enforcement\n\nInstances of abusive, harassing, or otherwise unacceptable behavior may be\nreported by contacting the project team at colm@workos.com. All\ncomplaints will be reviewed and investigated and will result in a response that\nis deemed necessary and appropriate to the circumstances. The project team is\nobligated to maintain confidentiality with regard to the reporter of an incident.\nFurther details of specific enforcement policies may be posted separately.\n\nProject maintainers who do not follow or enforce the Code of Conduct in good\nfaith may face temporary or permanent repercussions as determined by other\nmembers of the project's leadership.\n\n## Attribution\n\nThis Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,\navailable at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html\n\n[homepage]: https://www.contributor-covenant.org\n\nFor answers to common questions about this code of conduct, see\nhttps://www.contributor-covenant.org/faq\n" }, { "path": "CONTRIBUTING.md", "content": "# Contributing to Stitches\n\nWelcome and thanks for your interest! Before submitting a pull request, please take a moment to review these guidelines.\n\n## Reporting Issues\n\nFound a problem? Want a new feature?\n\n- See if your issue or idea has [already been reported].\n- Provide a [reduced test case] or a [live example].\n\nRemember, a bug is a _demonstrable problem_ caused by _our_ code.\n\n## Submitting Pull Requests\n\nPull requests are the greatest contributions, so be sure they are focused in\nscope and avoid unrelated commits.\n\n1. To begin: [fork this project], clone your fork, and add our upstream.\n\n ```bash\n # Clone your fork of the repo into the current directory\n git clone git@github.com:$(npx github-username-cli $(git config user.email))/stitches.git\n\n # Navigate to the newly cloned directory\n cd stitches\n\n # Assign the original repo to a remote called \"upstream\"\n git remote add upstream git@github.com:modulez/stitches.git\n\n # Install the tools necessary for testing\n yarn # or npm install\n ```\n\n2. Create a branch for your feature or fix:\n\n ```bash\n # Move into a new branch for your feature\n git checkout -b feature/thing\n ```\n\n ```bash\n # Move into a new branch for your fix\n git checkout -b fix/something\n ```\n\n3. If your code passes all the tests, then push your feature branch:\n\n ```bash\n # Test current code\n yarn test # or npm test\n\n # Build current code\n yarn build # or npm run build\n ```\n \n > Note: ensure your version of Node is 14 or higher to run scripts\n\n ```bash\n # Push the branch for your new feature\n git push origin feature/thing\n ```\n\n ```bash\n # Or, push the branch for your update\n git push origin update/something\n ```\n\nThat’s it! Now [open a pull request] with a clear title and description.\n\n[already been reported]: https://github.com/stitchesjs/stitches/issues\n[fork this project]: https://github.com/stitchesjs/stitches/fork\n[live example]: https://codesandbox.io/\n[open a pull request]: https://help.github.com/articles/using-pull-requests/\n[reduced test case]: https://css-tricks.com/reduced-test-cases/\n" }, { "path": "LICENSE.md", "content": "MIT License\n\nCopyright (c) 2022 WorkOS\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n" }, { "path": "README.md", "content": "Update June 19, 2023: Stitches is no longer actively maintained due to changes in the React ecosystem and maintainer availability. You can read more here.\n\n---\n\n\n \"stitches\"\n\n\n# Stitches\n\n## Style your components with confidence\n\nCSS-in-JS with near-zero runtime, SSR, multi-variant support, and a best-in-class developer experience.\n\n#### Stitches Core\n\nFramework-agnostic implementation.\n\n```sh\nnpm install @stitches/core\n```\n\n[Read more](https://github.com/stitchesjs/stitches/tree/main/packages/core)\n\n#### Stitches React\n\nReact wrapper including the `styled` API.\n\n```sh\nnpm install @stitches/react\n```\n\n[Read more](https://github.com/stitchesjs/stitches/tree/main/packages/react)\n\n---\n\n## Documentation\n\nFor full documentation, visit [stitches.dev](https://stitches.dev).\n\n## Contributing\n\nPlease follow our [contributing guidelines](./CONTRIBUTING.md).\n\n## Community\n\nYou can join the [Stitches Discord](https://discord.com/invite/H4eG3Mk) to chat with other members of the community.\n\nHere's a list of community-built projects:\n\n- [babel-plugin-transform-stitches-display-name](https://github.com/afzalsayed96/babel-plugin-transform-stitches-display-name)\n- [stitches-normalize-css](https://github.com/psongpin/stitches-normalize-css)\n- [stitches-crochet](https://github.com/orenelbaum/stitches-crochet)\n- [stitches-native](https://github.com/Temzasse/stitches-native)\n\n## Authors\n\n- Pedro Duarte ([@peduarte](https://twitter.com/peduarte))\n- Jonathan Neal ([@jon_neal](https://twitter.com/jon_neal))\n- Abdulhadi Alhallak ([@hadi_hlk](https://twitter.com/hadi_hlk)) - [WorkOS](https://workos.com)\n\n## License\n\nLicensed under the MIT License, Copyright © 2022-present WorkOS.\n\nSee [LICENSE](./LICENSE.md) for more information.\n" }, { "path": "package.json", "content": "{\n \"$schema\": \"./.vscode/package.schema.json\",\n \"name\": \"stitches\",\n \"type\": \"module\",\n \"license\": \"MIT\",\n \"contributors\": [\n \"Pedro Duarte\",\n \"Abdulhadi Alhallak \",\n \"Jonathan Neal\"\n ],\n \"scripts\": {\n \"build:test:types\": \"yarn workspace @stitches/test build\",\n \"build\": \"node .task/build.js\",\n \"build:watch\": \"node .task/build.js --watch\",\n \"lint\": \"node .task/lint.js\",\n \"lint:esm\": \"node .task/lint-esm.js\",\n \"lint:pkg\": \"node .task/lint-pkg.js\",\n \"lint:tsc\": \"node .task/lint-tsc.js\",\n \"release\": \"node .task/release.js\",\n \"test\": \"node .task/test.js\",\n \"test:coverage\": \"node .task/test-coverage.js .task/test.js\",\n \"test:watch\": \"node .task/test.js --watch\"\n },\n \"workspaces\": [\n \"packages/core\",\n \"packages/react\",\n \"packages/test\",\n \"packages/stringify\"\n ],\n \"dependencies\": {\n \"@radix-ui/react-polymorphic\": \"0.0.14\",\n \"@radix-ui/react-separator\": \"0.1.0\",\n \"@skypack/package-check\": \"0.2.2\",\n \"@types/node\": \"16.9.6\",\n \"@types/react\": \"17.0.33\",\n \"@types/react-dom\": \"17.0.9\",\n \"@types/react-test-renderer\": \"17.0.1\",\n \"@typescript-eslint/eslint-plugin\": \"5.36.2\",\n \"@typescript-eslint/parser\": \"5.36.2\",\n \"acorn\": \"8.5.0\",\n \"acorn-class-fields\": \"1.0.0\",\n \"acorn-import-assertions\": \"1.7.6\",\n \"acorn-jsx\": \"5.3.2\",\n \"acorn-logical-assignment\": \"0.1.4\",\n \"acorn-private-methods\": \"1.0.0\",\n \"astring\": \"1.7.5\",\n \"csstype\": \"3.0.9\",\n \"esbuild\": \"0.13.2\",\n \"eslint\": \"7.32.0\",\n \"nodemon\": \"2.0.13\",\n \"react\": \"17.0.2\",\n \"react-test-renderer\": \"17.0.2\",\n \"terser\": \"5.9.0\",\n \"typescript\": \"4.8.2\"\n },\n \"browserslist\": [\n \"last 1 chrome versions\",\n \"last 1 firefox versions\",\n \"last 1 safari versions\",\n \"maintained node versions\"\n ],\n \"eslintConfig\": {\n \"env\": {\n \"browser\": true,\n \"es6\": true,\n \"node\": true\n },\n \"extends\": \"eslint:recommended\",\n \"globals\": {\n \"describe\": false,\n \"expect\": false,\n \"test\": false\n },\n \"parserOptions\": {\n \"ecmaVersion\": 12,\n \"sourceType\": \"module\",\n \"ecmaFeatures\": {\n \"modules\": true\n }\n },\n \"rules\": {\n \"semi\": [\n \"error\",\n \"never\"\n ]\n },\n \"overrides\": [\n {\n \"files\": \"*.ts\",\n \"env\": {\n \"browser\": true,\n \"es6\": true,\n \"node\": true\n },\n \"extends\": [\n \"plugin:@typescript-eslint/recommended\"\n ],\n \"parser\": \"@typescript-eslint/parser\",\n \"parserOptions\": {\n \"ecmaVersion\": 2020,\n \"sourceType\": \"module\",\n \"ecmaFeatures\": {\n \"jsx\": true\n }\n },\n \"settings\": {\n \"react\": {\n \"version\": \"detect\"\n }\n },\n \"rules\": {\n \"@typescript-eslint/ban-types\": [\n \"error\",\n {\n \"extendDefaults\": true,\n \"types\": {\n \"{}\": false\n }\n }\n ],\n \"@typescript-eslint/no-explicit-any\": \"off\",\n \"@typescript-eslint/no-for-in-array\": \"off\",\n \"@typescript-eslint/no-unnecessary-qualifier\": \"off\",\n \"@typescript-eslint/no-unnecessary-type-assertion\": \"off\",\n \"@typescript-eslint/promise-function-async\": \"off\",\n \"@typescript-eslint/restrict-plus-operands\": \"off\"\n }\n }\n ]\n },\n \"prettier\": {\n \"arrowParens\": \"always\",\n \"bracketSpacing\": true,\n \"printWidth\": 240,\n \"quoteProps\": \"consistent\",\n \"semi\": false,\n \"singleQuote\": true,\n \"tabWidth\": 2,\n \"trailingComma\": \"all\",\n \"useTabs\": true,\n \"overrides\": [\n {\n \"files\": [\n \"*.json\",\n \"*.md\",\n \".prettierrc\",\n \"*.yml\"\n ],\n \"options\": {\n \"useTabs\": false\n }\n }\n ]\n },\n \"private\": true\n}\n" }, { "path": "packages/core/README.md", "content": "# @stitches/core\n\n**@stitches/core** is a framework-agnostic implementation of [stitches](https://stitches.dev), a CSS-in-JS library with a best-in-class developer experience.\n\n


\n\n```sh\n# with npm\nnpm install @stitches/core\n\n# with yarn\nyarn add @stitches/core\n```\n\n


\n\n\"open\n\n
\n\n```html\n\n```\n\n


\n\n\"open\n\n
\n\n```js\n\n\n```\n\n


\n\n## Documentation\n\nFor full documentation, visit [stitches.dev](https://stitches.dev).\n\n## Contributing\n\nPlease follow our [contributing guidelines](./CONTRIBUTING.md).\n\n## Authors\n\n- Pedro Duarte ([@peduarte](https://twitter.com/peduarte))\n- Abdulhadi Alhallak ([@hadi_hlk](https://twitter.com/hadi_hlk)) - [WorkOS](https://workos.com)\n- Jonathan Neal ([@jon_neal](https://twitter.com/jon_neal))\n\n## License\n\nLicensed under the MIT License, Copyright © 2022-present WorkOS.\n\nSee [LICENSE](./LICENSE.md) for more information.\n" }, { "path": "packages/core/package.json", "content": "{\n \"name\": \"@stitches/core\",\n \"version\": \"1.3.1-1\",\n \"description\": \"The modern CSS-in-JS library\",\n \"type\": \"module\",\n \"main\": \"dist/index.cjs\",\n \"module\": \"dist/index.mjs\",\n \"types\": \"types/index.d.ts\",\n \"typesVersions\": {\n \">= 4.1\": {\n \"*\": [\n \"types/*\"\n ]\n }\n },\n \"jsdelivr\": \"dist/index.global.js\",\n \"unpkg\": \"dist/index.global.js\",\n \"exports\": {\n \".\": {\n \"require\": \"./dist/index.cjs\",\n \"import\": \"./dist/index.mjs\",\n \"types\": \"./types/index.d.ts\"\n },\n \"./global\": \"./dist/index.global.js\"\n },\n \"files\": [\n \"dist/*.cjs\",\n \"dist/*.js\",\n \"dist/*.map\",\n \"dist/*.mjs\",\n \"types/*.d.ts\"\n ],\n \"sideEffects\": false,\n \"license\": \"MIT\",\n \"repository\": \"stitchesjs/stitches\",\n \"homepage\": \"https://stitches.dev/\",\n \"bugs\": \"https://github.com/stitchesjs/stitches/issues\",\n \"contributors\": [\n \"Pedro Duarte\",\n \"Abdulhadi Alhallak \",\n \"Jonathan Neal\"\n ],\n \"publishConfig\": {\n \"access\": \"public\"\n },\n \"keywords\": [\n \"component\",\n \"components\",\n \"create\",\n \"css\",\n \"css-in-js\",\n \"global\",\n \"globals\",\n \"javascript\",\n \"js\",\n \"nesting\",\n \"object\",\n \"object-oriented\",\n \"oo\",\n \"oocss\",\n \"oriented\",\n \"scope\",\n \"scoped\",\n \"style\",\n \"styled\",\n \"styles\",\n \"stylesheet\",\n \"stylesheets\",\n \"theme\",\n \"themes\",\n \"theming\",\n \"token\",\n \"tokens\",\n \"type\",\n \"typed\",\n \"types\",\n \"transform\",\n \"ts\",\n \"variable\",\n \"variables\"\n ]\n}\n" }, { "path": "packages/core/src/ThemeToken.js", "content": "import { toTailDashed } from './convert/toTailDashed.js'\n\nexport class ThemeToken {\n\tconstructor(token, value, scale, prefix) {\n\t\tthis.token = token == null ? '' : String(token)\n\t\tthis.value = value == null ? '' : String(value)\n\t\tthis.scale = scale == null ? '' : String(scale)\n\t\tthis.prefix = prefix == null ? '' : String(prefix)\n\t}\n\n\tget computedValue() {\n\t\treturn 'var(' + this.variable + ')'\n\t}\n\n\tget variable() {\n\t\treturn '--' + toTailDashed(this.prefix) + toTailDashed(this.scale) + this.token\n\t}\n\n\ttoString() {\n\t\treturn this.computedValue\n\t}\n}\n" }, { "path": "packages/core/src/convert/toCamelCase.js", "content": "/** Returns the given value converted to camel-case. */\nexport const toCamelCase = (/** @type {string} */ value) => (!/[A-Z]/.test(value) ? value.replace(/-[^]/g, (capital) => capital[1].toUpperCase()) : value)\n" }, { "path": "packages/core/src/convert/toCssRules.js", "content": "import { toCamelCase } from './toCamelCase.js'\nimport { toHyphenCase } from './toHyphenCase.js'\nimport { toPolyfilledValue } from './toPolyfilledValue.js'\nimport { toResolvedMediaQueryRanges } from './toResolvedMediaQueryRanges.js'\nimport { toResolvedSelectors } from './toResolvedSelectors.js'\nimport { toSizingValue } from './toSizingValue.js'\nimport { toTailDashed } from './toTailDashed.js'\nimport { toTokenizedValue } from './toTokenizedValue.js'\n\n/** Comma matcher outside rounded brackets. */\nconst comma = /\\s*,\\s*(?![^()]*\\))/\n\n/** Default toString method of Objects. */\nconst toStringOfObject = Object.prototype.toString\n\nexport const toCssRules = (\n\t style,\n\t selectors,\n\t conditions,\n\t config,\n\t onCssText\n) => {\n\t/** @type {[string[], string[], string[]]} CSSOM-compatible rule being created. */\n\tlet currentRule = undefined\n\n\t/** Last utility that was used, cached to prevent recursion. */\n\tlet lastUtil\n\n\t/** Last polyfill that was used, cached to prevent recursion. */\n\tlet lastPoly\n\n\t/** Walks CSS styles and converts them into CSSOM-compatible rules. */\n\tconst walk = (\n\t\t/** @type {Style} Set of CSS styles */ style,\n\t\t/** @type {string[]} Selectors that define the elements to which a set of CSS styles apply. */ selectors,\n\t\t/** @type {string[]} Conditions that define the queries to which a set of CSS styles apply. */ conditions,\n\t) => {\n\t\t/** @type {keyof style} Represents the left-side \"name\" for the property (the at-rule prelude, style-rule selector, or declaration name). */\n\t\tlet name\n\n\t\t/** @type {style[keyof style]} Represents the right-side \"data\" for the property (the rule block, or declaration value). */\n\t\tlet data\n\n\t\tconst each = (style) => {\n\t\t\tfor (name in style) {\n\t\t\t\t/** Whether the current name represents an at-rule. */\n\t\t\t\tconst isAtRuleLike = name.charCodeAt(0) === 64\n\n\t\t\t\tconst datas = isAtRuleLike && Array.isArray(style[name]) ? style[name] : [style[name]]\n\n\t\t\t\tfor (data of datas) {\n\t\t\t\t\tconst camelName = toCamelCase(name)\n\t\t\t\t\t\n\t\t\t\t\t/** Whether the current data represents a nesting rule, which is a plain object whose key is not already a util. */\n\t\t\t\t\tconst isRuleLike = typeof data === 'object' && data && data.toString === toStringOfObject && (!config.utils[camelName] || !selectors.length)\n\n\t\t\t\t\t// if the left-hand \"name\" matches a configured utility\n\t\t\t\t\t// conditionally transform the current data using the configured utility\n\t\t\t\t\tif (camelName in config.utils && !isRuleLike) {\n\t\t\t\t\t\tconst util = config.utils[camelName]\n\n\t\t\t\t\t\tif (util !== lastUtil) {\n\t\t\t\t\t\t\tlastUtil = util\n\n\t\t\t\t\t\t\teach(util(data))\n\n\t\t\t\t\t\t\tlastUtil = null\n\n\t\t\t\t\t\t\tcontinue\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\t// otherwise, if the left-hand \"name\" matches a configured polyfill\n\t\t\t\t\t// conditionally transform the current data using the polyfill\n\t\t\t\t\telse if (camelName in toPolyfilledValue) {\n\t\t\t\t\t\tconst poly = toPolyfilledValue[camelName]\n\n\t\t\t\t\t\tif (poly !== lastPoly) {\n\t\t\t\t\t\t\tlastPoly = poly\n\n\t\t\t\t\t\t\teach(poly(data))\n\n\t\t\t\t\t\t\tlastPoly = null\n\n\t\t\t\t\t\t\tcontinue\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\t\t\t\t\t// if the left-hand \"name\" matches a configured at-rule\n\t\t\t\t\tif (isAtRuleLike) {\n\t\t\t\t\t\t// transform the current name with the configured media at-rule prelude\n\t\t\t\t\t\tname = toResolvedMediaQueryRanges(name.slice(1) in config.media ? '@media ' + config.media[name.slice(1)] : name)\n\t\t\t\t\t}\n\n\t\t\t\t\tif (isRuleLike) {\n\t\t\t\t\t\t/** Next conditions, which may include one new condition (if this is an at-rule). */\n\t\t\t\t\t\tconst nextConditions = isAtRuleLike ? conditions.concat(name) : [...conditions]\n\n\t\t\t\t\t\t/** Next selectors, which may include one new selector (if this is not an at-rule). */\n\t\t\t\t\t\tconst nextSelections = isAtRuleLike ? [...selectors] : toResolvedSelectors(selectors, name.split(comma))\n\n\t\t\t\t\t\tif (currentRule !== undefined) {\n\t\t\t\t\t\t\tonCssText(toCssString(...currentRule))\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tcurrentRule = undefined\n\n\t\t\t\t\t\twalk(data, nextSelections, nextConditions)\n\t\t\t\t\t} else {\n\t\t\t\t\t\tif (currentRule === undefined) currentRule = [[], selectors, conditions]\n\n\t\t\t\t\t\t/** CSS left-hand side value, which may be a specially-formatted custom property. */\n\t\t\t\t\t\tname = !isAtRuleLike && name.charCodeAt(0) === 36 ? `--${toTailDashed(config.prefix)}${name.slice(1).replace(/\\$/g, '-')}` : name\n\n\t\t\t\t\t\t/** CSS right-hand side value, which may be a specially-formatted custom property. */\n\t\t\t\t\t\tdata = (\n\t\t\t\t\t\t\t// preserve object-like data\n\t\t\t\t\t\t\tisRuleLike ? data\n\t\t\t\t\t\t\t// replace all non-unitless props that are not custom properties with pixel versions\n\t\t\t\t\t\t\t: typeof data === 'number'\n\t\t\t\t\t\t\t\t? data && !(camelName in unitlessProps) && !(name.charCodeAt(0) === 45)\n\t\t\t\t\t\t\t\t\t? String(data) + 'px'\n\t\t\t\t\t\t\t\t: String(data)\n\t\t\t\t\t\t\t// replace tokens with stringified primitive values\n\t\t\t\t\t\t\t: toTokenizedValue(\n\t\t\t\t\t\t\t\ttoSizingValue(camelName, data == null ? '' : data),\n\t\t\t\t\t\t\t\tconfig.prefix,\n\t\t\t\t\t\t\t\tconfig.themeMap[camelName]\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t)\n\n\t\t\t\t\t\tcurrentRule[0].push(`${isAtRuleLike ? `${name} ` : `${toHyphenCase(name)}:`}${data}`)\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\teach(style)\n\n\t\tif (currentRule !== undefined) {\n\t\t\tonCssText(toCssString(...currentRule))\n\t\t}\n\t\tcurrentRule = undefined\n\t}\n\n\twalk(style, selectors, conditions)\n}\n\nconst toCssString = (declarations, selectors, conditions) => (\n\t`${conditions.map((condition) => `${condition}{`).join('')}${selectors.length ? `${selectors.join(',')}{` : ''}${declarations.join(';')}${selectors.length ? `}` : ''}${Array(conditions.length ? conditions.length + 1 : 0).join('}')}`\n)\n\n/** CSS Properties whose number values should be unitless. */\nexport const unitlessProps = {\n\tanimationIterationCount: 1,\n\tborderImageOutset: 1,\n\tborderImageSlice: 1,\n\tborderImageWidth: 1,\n\tboxFlex: 1,\n\tboxFlexGroup: 1,\n\tboxOrdinalGroup: 1,\n\tcolumnCount: 1,\n\tcolumns: 1,\n\tflex: 1,\n\tflexGrow: 1,\n\tflexPositive: 1,\n\tflexShrink: 1,\n\tflexNegative: 1,\n\tflexOrder: 1,\n\tgridRow: 1,\n\tgridRowEnd: 1,\n\tgridRowSpan: 1,\n\tgridRowStart: 1,\n\tgridColumn: 1,\n\tgridColumnEnd: 1,\n\tgridColumnSpan: 1,\n\tgridColumnStart: 1,\n\tmsGridRow: 1,\n\tmsGridRowSpan: 1,\n\tmsGridColumn: 1,\n\tmsGridColumnSpan: 1,\n\tfontWeight: 1,\n\tlineHeight: 1,\n\topacity: 1,\n\torder: 1,\n\torphans: 1,\n\ttabSize: 1,\n\twidows: 1,\n\tzIndex: 1,\n\tzoom: 1,\n\tWebkitLineClamp: 1,\n\n\t// SVG-related properties\n\tfillOpacity: 1,\n\tfloodOpacity: 1,\n\tstopOpacity: 1,\n\tstrokeDasharray: 1,\n\tstrokeDashoffset: 1,\n\tstrokeMiterlimit: 1,\n\tstrokeOpacity: 1,\n\tstrokeWidth: 1\n}\n" }, { "path": "packages/core/src/convert/toHash.js", "content": "const toAlphabeticChar = (/** @type {number} */ code) => String.fromCharCode(code + (code > 25 ? 39 : 97))\n\nconst toAlphabeticName = (/** @type {number} */ code) => {\n\tlet name = ''\n\tlet x\n\n\tfor (x = Math.abs(code); x > 52; x = (x / 52) | 0) name = toAlphabeticChar(x % 52) + name\n\n\treturn toAlphabeticChar(x % 52) + name\n}\n\nconst toPhash = (/** @type {number} */ h, /** @type {string} */ x) => {\n\tlet i = x.length\n\twhile (i) h = (h * 33) ^ x.charCodeAt(--i)\n\treturn h\n}\n\nexport const toHash = (/** @type {object} */ value) => toAlphabeticName(\n\ttoPhash(\n\t\t5381,\n\t\tJSON.stringify(value)\n\t) >>> 0\n)\n" }, { "path": "packages/core/src/convert/toHyphenCase.js", "content": "/** Returns the given value converted to kebab-case. */\nexport const toHyphenCase = (/** @type {string} */ value) => (\n\t// ignore kebab-like values\n\tvalue.includes('-')\n\t\t? value\n\t// replace any upper-case letter with a dash and the lower-case variant\n\t: value.replace(/[A-Z]/g, (capital) => '-' + capital.toLowerCase())\n)\n" }, { "path": "packages/core/src/convert/toPolyfilledValue.js", "content": "const splitBySpace = /\\s+(?![^()]*\\))/\nconst split = (fn) => (data) => fn(...(typeof data === 'string' ? String(data).split(splitBySpace) : [data]))\n\nexport const toPolyfilledValue = {\n\t// prefixed properties\n\tappearance: (d) => ({ WebkitAppearance: d, appearance: d }),\n\tbackfaceVisibility: (d) => ({ WebkitBackfaceVisibility: d, backfaceVisibility: d }),\n\tbackdropFilter: (d) => ({ WebkitBackdropFilter: d, backdropFilter: d }),\n\tbackgroundClip: (d) => ({ WebkitBackgroundClip: d, backgroundClip: d }),\n\tboxDecorationBreak: (d) => ({ WebkitBoxDecorationBreak: d, boxDecorationBreak: d }),\n\tclipPath: (d) => ({ WebkitClipPath: d, clipPath: d }),\n\tcontent: (d) => ({ content: d.includes('\"') || d.includes(\"'\") || /^([A-Za-z]+\\([^]*|[^]*-quote|inherit|initial|none|normal|revert|unset)$/.test(d) ? d : `\"${d}\"` }),\n\thyphens: (d) => ({ WebkitHyphens: d, hyphens: d }),\n\tmaskImage: (d) => ({ WebkitMaskImage: d, maskImage: d }),\n\tmaskSize: (d) => ({ WebkitMaskSize: d, maskSize: d }),\n\ttextSizeAdjust: (d) => ({ WebkitTextSizeAdjust: d, textSizeAdjust: d }),\n\tuserSelect: (d) => ({ WebkitUserSelect: d, userSelect: d }),\n\n\t// logical properties\n\tmarginBlock: split((s, e) => ({ marginBlockStart: s, marginBlockEnd: e || s })),\n\tmarginInline: split((s, e) => ({ marginInlineStart: s, marginInlineEnd: e || s })),\n\tmaxSize: split((b, i) => ({ maxBlockSize: b, maxInlineSize: i || b })),\n\tminSize: split((b, i) => ({ minBlockSize: b, minInlineSize: i || b })),\n\tpaddingBlock: split((s, e) => ({ paddingBlockStart: s, paddingBlockEnd: e || s })),\n\tpaddingInline: split((s, e) => ({ paddingInlineStart: s, paddingInlineEnd: e || s })),\n}\n" }, { "path": "packages/core/src/convert/toResolvedMediaQueryRanges.js", "content": "const mqunit = /([\\d.]+)([^]*)/\n\n/** Returns a media query with polyfilled ranges. */\nexport const toResolvedMediaQueryRanges = (\n\t/** @type {string} */\n\tmedia\n) => media.replace(\n\t/\\(\\s*([\\w-]+)\\s*(=|<|<=|>|>=)\\s*([\\w-]+)\\s*(?:(<|<=|>|>=)\\s*([\\w-]+)\\s*)?\\)/g,\n\t(\n\t\t__,\n\t\t/** @type {string} 1st param, either the name or value in the query. */\n\t\tp1,\n\t\t/** @type {string} 1st operator. */\n\t\to1,\n\t\t/** @type {string} 2nd param, either the name or value in the query. */\n\t\tp2,\n\t\t/** @type {string} Optional 2nd operator. */\n\t\to2,\n\t\t/** @type {string} Optional 3rd param, always a value in the query.*/\n\t\tp3\n\t) => {\n\t\t/** Whether the first param is a value. */\n\t\tconst isP1Value = mqunit.test(p1)\n\n\t\t/** Numeric shift applied to a value when an operator is `<` or `>`. */\n\t\tconst shift = 0.0625 * (isP1Value ? -1 : 1)\n\n\t\tconst [name, value] = isP1Value ? [p2, p1] : [p1, p2]\n\n\t\treturn (\n\t\t\t'(' +\n\t\t\t\t(\n\t\t\t\t\to1[0] === '=' ? '' : (o1[0] === '>' === isP1Value ? 'max-' : 'min-')\n\t\t\t\t) + name + ':' +\n\t\t\t\t(o1[0] !== '=' && o1.length === 1 ? value.replace(mqunit, (_, v, u) => Number(v) + shift * (o1 === '>' ? 1 : -1) + u) : value) +\n\t\t\t\t(\n\t\t\t\t\to2\n\t\t\t\t\t\t? ') and (' + (\n\t\t\t\t\t\t\t(o2[0] === '>' ? 'min-' : 'max-') + name + ':' +\n\t\t\t\t\t\t\t(o2.length === 1 ? p3.replace(mqunit, (_, v, u) => Number(v) + shift * (o2 === '>' ? -1 : 1) + u) : p3)\n\t\t\t\t\t\t)\n\t\t\t\t\t: ''\n\t\t\t\t) +\n\t\t\t')'\n\t\t)\n\t}\n)\n" }, { "path": "packages/core/src/convert/toResolvedSelectors.js", "content": "/** Returns selectors resolved from parent selectors and nested selectors. */\nexport const toResolvedSelectors = (\n\t/** @type {string[]} Parent selectors (e.g. `[\"a\", \"button\"]`). */\n\tparentSelectors,\n\t/** @type {string[]} Nested selectors (e.g. `[\"&:hover\", \"&:focus\"]`). */\n\tnestedSelectors,\n) => (\n\tparentSelectors.length\n\t\t? parentSelectors.reduce(\n\t\t\t(resolvedSelectors, parentSelector) => {\n\t\t\t\tresolvedSelectors.push(\n\t\t\t\t\t...nestedSelectors.map(\n\t\t\t\t\t\t(selector) => (\n\t\t\t\t\t\t\tselector.includes('&') ? selector.replace(\n\t\t\t\t\t\t\t\t/&/g,\n\t\t\t\t\t\t\t\t/[ +>|~]/.test(parentSelector) && /&.*&/.test(selector)\n\t\t\t\t\t\t\t\t\t? `:is(${parentSelector})`\n\t\t\t\t\t\t\t\t: parentSelector\n\t\t\t\t\t\t\t) : parentSelector + ' ' + selector\n\t\t\t\t\t\t)\n\t\t\t\t\t)\n\t\t\t\t)\n\n\t\t\t\treturn resolvedSelectors\n\t\t\t},\n\t\t\t[]\n\t\t)\n\t: nestedSelectors\n)\n" }, { "path": "packages/core/src/convert/toSizingValue.js", "content": "import { toHyphenCase } from './toHyphenCase.js'\n\n/** Returns a declaration sizing value with polyfilled sizing keywords. */\nexport const toSizingValue = (/** @type {string} */ declarationName, /** @type {string} */ declarationValue) => (\n\tdeclarationName in sizeProps && typeof declarationValue === 'string'\n\t\t? declarationValue.replace(\n\t\t\t/^((?:[^]*[^\\w-])?)(fit-content|stretch)((?:[^\\w-][^]*)?)$/,\n\t\t\t(data, lead, main, tail) => (\n\t\t\t\tlead + (\n\t\t\t\t\tmain === 'stretch'\n\t\t\t\t\t\t? `-moz-available${tail};${toHyphenCase(declarationName)}:${lead}-webkit-fill-available`\n\t\t\t\t\t: `-moz-fit-content${tail};${toHyphenCase(declarationName)}:${lead}fit-content`\n\t\t\t\t) + tail\n\t\t\t),\n\t\t)\n\t: String(declarationValue)\n)\n\n/** CSS Properties whose value include a sizing keyword. */\nconst sizeProps = {\n\tblockSize: 1,\n\theight: 1,\n\tinlineSize: 1,\n\tmaxBlockSize: 1,\n\tmaxHeight: 1,\n\tmaxInlineSize: 1,\n\tmaxWidth: 1,\n\tminBlockSize: 1,\n\tminHeight: 1,\n\tminInlineSize: 1,\n\tminWidth: 1,\n\twidth: 1,\n}\n" }, { "path": "packages/core/src/convert/toTailDashed.js", "content": "/** Returns a filled value with a dash prefix. */\nexport const toTailDashed = (/** @type {string} */ value) => value ? value + '-' : ''\n" }, { "path": "packages/core/src/convert/toTokenizedValue.js", "content": "import { toTailDashed } from './toTailDashed.js'\n\n/** Returns a declaration value with transformed token values. */\nexport const toTokenizedValue = (\n\t/** @type {string} */\n\tvalue,\n\t/** @type {string} */\n\tprefix,\n\t/** @type {string} */\n\tscale,\n) => value.replace(\n\t/([+-])?((?:\\d+(?:\\.\\d*)?|\\.\\d+)(?:[Ee][+-]?\\d+)?)?(\\$|--)([$\\w-]+)/g,\n\t($0, direction, multiplier, separator, token) => (\n\t\tseparator == \"$\" == !!multiplier\n\t\t\t? $0\n\t\t: (\n\t\t\tdirection || separator == '--'\n\t\t\t\t? 'calc('\n\t\t\t: ''\n\t\t) + (\n\t\t\t'var(--' + (\n\t\t\t\tseparator === '$'\n\t\t\t\t\t? toTailDashed(prefix) + (\n\t\t\t\t\t\t!token.includes('$')\n\t\t\t\t\t\t\t? toTailDashed(scale)\n\t\t\t\t\t\t: ''\n\t\t\t\t\t) + token.replace(/\\$/g, '-')\n\t\t\t\t: token\n\t\t\t) + ')' + (\n\t\t\t\tdirection || separator == '--'\n\t\t\t\t\t? '*' + (\n\t\t\t\t\t\tdirection || ''\n\t\t\t\t\t) + (\n\t\t\t\t\t\tmultiplier || '1'\n\t\t\t\t\t) + ')'\n\t\t\t\t: ''\n\t\t\t)\n\t\t)\n\t),\n)\n" }, { "path": "packages/core/src/createStitches.js", "content": "import { defaultThemeMap } from './default/defaultThemeMap.js'\n\nimport { createMemo } from './utility/createMemo.js'\n\nimport { createCssFunction } from './features/css.js'\nimport { createGlobalCssFunction } from './features/globalCss.js'\nimport { createKeyframesFunction } from './features/keyframes.js'\nimport { createCreateThemeFunction } from './features/createTheme.js'\n\nimport { createSheet } from './sheet.js'\n\nconst createCssMap = createMemo()\n\nexport const createStitches = (config) => {\n\tlet didRun = false\n\n\tconst instance = createCssMap(config, (initConfig) => {\n\t\tdidRun = true\n\n\t\tinitConfig = typeof initConfig === 'object' && initConfig || {}\n\n\t\t// internal configuration\n\t\tconst prefix = 'prefix' in initConfig ? String(initConfig.prefix) : ''\n\t\tconst media = typeof initConfig.media === 'object' && initConfig.media || {}\n\t\tconst root = typeof initConfig.root === 'object' ? initConfig.root || null : globalThis.document || null\n\t\tconst theme = typeof initConfig.theme === 'object' && initConfig.theme || {}\n\t\tconst themeMap = typeof initConfig.themeMap === 'object' && initConfig.themeMap || { ...defaultThemeMap }\n\t\tconst utils = typeof initConfig.utils === 'object' && initConfig.utils || {}\n\n\t\t/** External configuration. */\n\t\tconst config = {\n\t\t\tprefix,\n\t\t\tmedia,\n\t\t\ttheme,\n\t\t\tthemeMap,\n\t\t\tutils,\n\t\t}\n\n\t\t/** Internal stylesheet. */\n\t\tconst sheet = createSheet(root)\n\n\t\tconst returnValue = {\n\t\t\tcss: createCssFunction(config, sheet),\n\t\t\tglobalCss: createGlobalCssFunction(config, sheet),\n\t\t\tkeyframes: createKeyframesFunction(config, sheet),\n\t\t\tcreateTheme: createCreateThemeFunction(config, sheet),\n\t\t\treset() {\n\t\t\t\tsheet.reset()\n\t\t\t\treturnValue.theme.toString()\n\t\t\t},\n\t\t\ttheme: {},\n\t\t\tsheet,\n\t\t\tconfig,\n\t\t\tprefix,\n\t\t\tgetCssText: sheet.toString,\n\t\t\ttoString: sheet.toString,\n\t\t}\n\n\t\t// initialize default theme\n\t\tString(\n\t\t\treturnValue.theme = returnValue.createTheme(theme)\n\t\t)\n\n\t\treturn returnValue\n\t})\n\n\tif (!didRun) instance.reset()\n\n\treturn instance\n}\n" }, { "path": "packages/core/src/default/defaultThemeMap.js", "content": "const borderStyles = 'borderStyles'\nconst borderWidths = 'borderWidths'\nconst colors = 'colors'\nconst fonts = 'fonts'\nconst fontSizes = 'fontSizes'\nconst fontWeights = 'fontWeights'\nconst letterSpacings = 'letterSpacings'\nconst lineHeights = 'lineHeights'\nconst radii = 'radii'\nconst shadows = 'shadows'\nconst sizes = 'sizes'\nconst space = 'space'\nconst transitions = 'transitions'\nconst zIndices = 'zIndices'\n\n/** @type {DefaultThemeMap} */\nexport const defaultThemeMap = {\n\tgap: space,\n\tgridGap: space,\n\tcolumnGap: space,\n\tgridColumnGap: space,\n\trowGap: space,\n\tgridRowGap: space,\n\tinset: space,\n\tinsetBlock: space,\n\tinsetBlockEnd: space,\n\tinsetBlockStart: space,\n\tinsetInline: space,\n\tinsetInlineEnd: space,\n\tinsetInlineStart: space,\n\tmargin: space,\n\tmarginTop: space,\n\tmarginRight: space,\n\tmarginBottom: space,\n\tmarginLeft: space,\n\tmarginBlock: space,\n\tmarginBlockEnd: space,\n\tmarginBlockStart: space,\n\tmarginInline: space,\n\tmarginInlineEnd: space,\n\tmarginInlineStart: space,\n\tpadding: space,\n\tpaddingTop: space,\n\tpaddingRight: space,\n\tpaddingBottom: space,\n\tpaddingLeft: space,\n\tpaddingBlock: space,\n\tpaddingBlockEnd: space,\n\tpaddingBlockStart: space,\n\tpaddingInline: space,\n\tpaddingInlineEnd: space,\n\tpaddingInlineStart: space,\n\ttop: space,\n\tright: space,\n\tbottom: space,\n\tleft: space,\n\tscrollMargin: space,\n\tscrollMarginTop: space,\n\tscrollMarginRight: space,\n\tscrollMarginBottom: space,\n\tscrollMarginLeft: space,\n\tscrollMarginX: space,\n\tscrollMarginY: space,\n\tscrollMarginBlock: space,\n\tscrollMarginBlockEnd: space,\n\tscrollMarginBlockStart: space,\n\tscrollMarginInline: space,\n\tscrollMarginInlineEnd: space,\n\tscrollMarginInlineStart: space,\n\tscrollPadding: space,\n\tscrollPaddingTop: space,\n\tscrollPaddingRight: space,\n\tscrollPaddingBottom: space,\n\tscrollPaddingLeft: space,\n\tscrollPaddingX: space,\n\tscrollPaddingY: space,\n\tscrollPaddingBlock: space,\n\tscrollPaddingBlockEnd: space,\n\tscrollPaddingBlockStart: space,\n\tscrollPaddingInline: space,\n\tscrollPaddingInlineEnd: space,\n\tscrollPaddingInlineStart: space,\n\n\tfontSize: fontSizes,\n\n\tbackground: colors,\n\tbackgroundColor: colors,\n\tbackgroundImage: colors,\n\tborderImage: colors,\n\tborder: colors,\n\tborderBlock: colors,\n\tborderBlockEnd: colors,\n\tborderBlockStart: colors,\n\tborderBottom: colors,\n\tborderBottomColor: colors,\n\tborderColor: colors,\n\tborderInline: colors,\n\tborderInlineEnd: colors,\n\tborderInlineStart: colors,\n\tborderLeft: colors,\n\tborderLeftColor: colors,\n\tborderRight: colors,\n\tborderRightColor: colors,\n\tborderTop: colors,\n\tborderTopColor: colors,\n\tcaretColor: colors,\n\tcolor: colors,\n\tcolumnRuleColor: colors,\n\tfill: colors,\n\toutline: colors,\n\toutlineColor: colors,\n\tstroke: colors,\n\ttextDecorationColor: colors,\n\n\tfontFamily: fonts,\n\n\tfontWeight: fontWeights,\n\n\tlineHeight: lineHeights,\n\n\tletterSpacing: letterSpacings,\n\n\tblockSize: sizes,\n\tminBlockSize: sizes,\n\tmaxBlockSize: sizes,\n\tinlineSize: sizes,\n\tminInlineSize: sizes,\n\tmaxInlineSize: sizes,\n\twidth: sizes,\n\tminWidth: sizes,\n\tmaxWidth: sizes,\n\theight: sizes,\n\tminHeight: sizes,\n\tmaxHeight: sizes,\n\tflexBasis: sizes,\n\tgridTemplateColumns: sizes,\n\tgridTemplateRows: sizes,\n\n\tborderWidth: borderWidths,\n\tborderTopWidth: borderWidths,\n\tborderRightWidth: borderWidths,\n\tborderBottomWidth: borderWidths,\n\tborderLeftWidth: borderWidths,\n\n\tborderStyle: borderStyles,\n\tborderTopStyle: borderStyles,\n\tborderRightStyle: borderStyles,\n\tborderBottomStyle: borderStyles,\n\tborderLeftStyle: borderStyles,\n\n\tborderRadius: radii,\n\tborderTopLeftRadius: radii,\n\tborderTopRightRadius: radii,\n\tborderBottomRightRadius: radii,\n\tborderBottomLeftRadius: radii,\n\n\tboxShadow: shadows,\n\ttextShadow: shadows,\n\n\ttransition: transitions,\n\n\tzIndex: zIndices,\n}\n\n/**\n * @typedef {Object} DefaultThemeMap\n * @property {space} gap\n * @property {space} gridGap\n * @property {space} columnGap\n * @property {space} gridColumnGap\n * @property {space} rowGap\n * @property {space} gridRowGap\n * @property {space} inset\n * @property {space} insetBlock\n * @property {space} insetBlockEnd\n * @property {space} insetBlockStart\n * @property {space} insetInline\n * @property {space} insetInlineEnd\n * @property {space} insetInlineStart\n * @property {space} margin\n * @property {space} marginTop\n * @property {space} marginRight\n * @property {space} marginBottom\n * @property {space} marginLeft\n * @property {space} marginBlock\n * @property {space} marginBlockEnd\n * @property {space} marginBlockStart\n * @property {space} marginInline\n * @property {space} marginInlineEnd\n * @property {space} marginInlineStart\n * @property {space} padding\n * @property {space} paddingTop\n * @property {space} paddingRight\n * @property {space} paddingBottom\n * @property {space} paddingLeft\n * @property {space} paddingBlock\n * @property {space} paddingBlockEnd\n * @property {space} paddingBlockStart\n * @property {space} paddingInline\n * @property {space} paddingInlineEnd\n * @property {space} paddingInlineStart\n * @property {space} top\n * @property {space} right\n * @property {space} bottom\n * @property {space} left\n * @property {space} scrollMargin\n * @property {space} scrollMarginTop\n * @property {space} scrollMarginRight\n * @property {space} scrollMarginBottom\n * @property {space} scrollMarginLeft\n * @property {space} scrollMarginX\n * @property {space} scrollMarginY\n * @property {space} scrollMarginBlock\n * @property {space} scrollMarginBlockEnd\n * @property {space} scrollMarginBlockStart\n * @property {space} scrollMarginInline\n * @property {space} scrollMarginInlineEnd\n * @property {space} scrollMarginInlineStart\n * @property {space} scrollPadding\n * @property {space} scrollPaddingTop\n * @property {space} scrollPaddingRight\n * @property {space} scrollPaddingBottom\n * @property {space} scrollPaddingLeft\n * @property {space} scrollPaddingX\n * @property {space} scrollPaddingY\n * @property {space} scrollPaddingBlock\n * @property {space} scrollPaddingBlockEnd\n * @property {space} scrollPaddingBlockStart\n * @property {space} scrollPaddingInline\n * @property {space} scrollPaddingInlineEnd\n * @property {space} scrollPaddingInlineStart\n\n * @property {fontSizes} fontSize\n\n * @property {colors} background\n * @property {colors} backgroundColor\n * @property {colors} backgroundImage\n * @property {colors} border\n * @property {colors} borderBlock\n * @property {colors} borderBlockEnd\n * @property {colors} borderBlockStart\n * @property {colors} borderBottom\n * @property {colors} borderBottomColor\n * @property {colors} borderColor\n * @property {colors} borderInline\n * @property {colors} borderInlineEnd\n * @property {colors} borderInlineStart\n * @property {colors} borderLeft\n * @property {colors} borderLeftColor\n * @property {colors} borderRight\n * @property {colors} borderRightColor\n * @property {colors} borderTop\n * @property {colors} borderTopColor\n * @property {colors} caretColor\n * @property {colors} color\n * @property {colors} columnRuleColor\n * @property {colors} fill\n * @property {colors} outline\n * @property {colors} outlineColor\n * @property {colors} stroke\n * @property {colors} textDecorationColor\n\n * @property {fonts} fontFamily\n\n * @property {fontWeights} fontWeight\n\n * @property {lineHeights} lineHeight\n\n * @property {letterSpacings} letterSpacing\n\n * @property {sizes} blockSize\n * @property {sizes} minBlockSize\n * @property {sizes} maxBlockSize\n * @property {sizes} inlineSize\n * @property {sizes} minInlineSize\n * @property {sizes} maxInlineSize\n * @property {sizes} width\n * @property {sizes} minWidth\n * @property {sizes} maxWidth\n * @property {sizes} height\n * @property {sizes} minHeight\n * @property {sizes} maxHeight\n * @property {sizes} flexBasis\n * @property {sizes} gridTemplateColumns\n * @property {sizes} gridTemplateRows\n\n * @property {borderWidths} borderWidth\n * @property {borderWidths} borderTopWidth\n * @property {borderWidths} borderRightWidth\n * @property {borderWidths} borderBottomWidth\n * @property {borderWidths} borderLeftWidth\n\n * @property {borderStyles} borderStyle\n * @property {borderStyles} borderTopStyle\n * @property {borderStyles} borderRightStyle\n * @property {borderStyles} borderBottomStyle\n * @property {borderStyles} borderLeftStyle\n\n * @property {radii} borderRadius\n * @property {radii} borderTopLeftRadius\n * @property {radii} borderTopRightRadius\n * @property {radii} borderBottomRightRadius\n * @property {radii} borderBottomLeftRadius\n\n * @property {shadows} boxShadow\n * @property {shadows} textShadow\n\n * @property {transitions} transition\n\n * @property {zIndices} zIndex\n */\n" }, { "path": "packages/core/src/features/createTheme.js", "content": "import { ThemeToken } from '../ThemeToken.js'\nimport { createMemo } from '../utility/createMemo.js'\n\nimport { toHash } from '../convert/toHash.js'\nimport { toTailDashed } from '../convert/toTailDashed.js'\nimport { toTokenizedValue } from '../convert/toTokenizedValue.js'\n\nconst createCreateThemeFunctionMap = createMemo()\n\n/** Returns a function that applies a theme and returns tokens of that theme. */\nexport const createCreateThemeFunction = (\n\tconfig,\n\tsheet\n) => (\n\tcreateCreateThemeFunctionMap(config, () => (className, style) => {\n\t\t// theme is the first argument if it is an object, otherwise the second argument as an object\n\t\tstyle = typeof className === 'object' && className || Object(style)\n\n\t\t// class name is the first argument if it is a string, otherwise an empty string\n\t\tclassName = typeof className === 'string' ? className : ''\n\n\t\t/** @type {string} Theme name. @see `{CONFIG_PREFIX}t-{THEME_UUID}` */\n\t\tclassName = className || `${toTailDashed(config.prefix)}t-${toHash(style)}`\n\n\t\tconst selector = `.${className}`\n\n\t\tconst themeObject = {}\n\t\tconst cssProps = []\n\n\t\tfor (const scale in style) {\n\t\t\tthemeObject[scale] = {}\n\n\t\t\tfor (const token in style[scale]) {\n\t\t\t\tconst propertyName = `--${toTailDashed(config.prefix)}${scale}-${token}`\n\t\t\t\tconst propertyValue = toTokenizedValue(String(style[scale][token]), config.prefix, scale)\n\n\t\t\t\tthemeObject[scale][token] = new ThemeToken(token, propertyValue, scale, config.prefix)\n\n\t\t\t\tcssProps.push(`${propertyName}:${propertyValue}`)\n\t\t\t}\n\t\t}\n\n\t\tconst render = () => {\n\t\t\tif (cssProps.length && !sheet.rules.themed.cache.has(className)) {\n\t\t\t\tsheet.rules.themed.cache.add(className)\n\n\t\t\t\tconst rootPrelude = style === config.theme ? ':root,' : ''\n\t\t\t\tconst cssText = `${rootPrelude}.${className}{${cssProps.join(';')}}`\n\n\t\t\t\tsheet.rules.themed.apply(cssText)\n\t\t\t}\n\n\t\t\treturn className\n\t\t}\n\n\t\treturn {\n\t\t\t...themeObject,\n\t\t\tget className() {\n\t\t\t\treturn render()\n\t\t\t},\n\t\t\tselector,\n\t\t\ttoString: render,\n\t\t}\n\t})\n)\n" }, { "path": "packages/core/src/features/css.js", "content": "import { internal } from '../utility/internal.js'\nimport { createMemo } from '../utility/createMemo.js'\nimport { define } from '../utility/define.js'\nimport { hasNames } from '../utility/hasNames.js'\nimport { hasOwn } from '../utility/hasOwn.js'\n\nimport { toCssRules } from '../convert/toCssRules.js'\nimport { toHash } from '../convert/toHash.js'\nimport { toTailDashed } from '../convert/toTailDashed.js'\nimport { createRulesInjectionDeferrer } from '../sheet.js'\n\nconst createCssFunctionMap = createMemo()\n\n/** Returns a function that applies component styles. */\nexport const createCssFunction = (config, sheet) =>\n createCssFunctionMap(config, () => {\n const _css = (args, componentConfig = {}) => {\n let internals = {\n type: null,\n composers: new Set(),\n }\n\n for (const arg of args) {\n // skip any void argument\n if (arg == null) continue\n\n // conditionally extend the component\n if (arg[internal]) {\n if (internals.type == null) internals.type = arg[internal].type\n\n for (const composer of arg[internal].composers) {\n internals.composers.add(composer)\n }\n }\n\n // otherwise, conditionally define the component type\n else if (arg.constructor !== Object || arg.$$typeof) {\n if (internals.type == null) internals.type = arg\n }\n\n // otherwise, add a new composer to this component\n else {\n internals.composers.add(createComposer(arg, config, componentConfig))\n }\n }\n\n // set the component type if none was set\n if (internals.type == null) internals.type = 'span'\n if (!internals.composers.size) internals.composers.add(['PJLV', {}, [], [], {}, []])\n\n return createRenderer(config, internals, sheet, componentConfig)\n }\n\n\t\tconst css = (...args) => _css(args)\n\n\t\tcss.withConfig = (componentConfig) => (...args) => _css(args, componentConfig)\n\n return css\n })\n\n\n/** Creates a composer from a configuration object. */\nconst createComposer = ({ variants: initSingularVariants, compoundVariants: initCompoundVariants, defaultVariants: initDefaultVariants, ...style }, config, {componentId, displayName}) => {\n\t/** @type {string} Composer Unique Identifier. @see `{CONFIG_PREFIX}-?c-{STYLE_HASH}` */\n\tconst hash = componentId || toHash(style)\n\tconst componentNamePrefix = displayName ? ('c-' + displayName +'') : 'c'\n\tconst className = `${toTailDashed(config.prefix)}${componentNamePrefix}-${hash}`\n\n\tconst singularVariants = []\n\n\tconst compoundVariants = []\n\n\tconst prefilledVariants = Object.create(null)\n\n\tconst undefinedVariants = []\n\n\tfor (const variantName in initDefaultVariants) {\n\t\tprefilledVariants[variantName] = String(initDefaultVariants[variantName])\n\t}\n\n\t// add singular variants\n\tif (typeof initSingularVariants === 'object' && initSingularVariants) {\n\t\tfor (const name in initSingularVariants) {\n\t\t\tif (!hasOwn(prefilledVariants, name)) prefilledVariants[name] = 'undefined'\n\n\t\t\tconst variantPairs = initSingularVariants[name]\n\n\t\t\tfor (const pair in variantPairs) {\n\t\t\t\tconst vMatch = { [name]: String(pair) }\n\n\t\t\t\tif (String(pair) === 'undefined') undefinedVariants.push(name)\n\n\t\t\t\tconst vStyle = variantPairs[pair]\n\n\t\t\t\tconst variant = [vMatch, vStyle, !hasNames(vStyle)]\n\n\t\t\t\tsingularVariants.push(variant)\n\t\t\t}\n\t\t}\n\t}\n\n\t// add compound variants\n\tif (typeof initCompoundVariants === 'object' && initCompoundVariants) {\n\t\tfor (const compoundVariant of initCompoundVariants) {\n\t\t\tlet { css: vStyle, ...vMatch } = compoundVariant\n\n\t\t\tvStyle = typeof vStyle === 'object' && vStyle || {}\n\n\t\t\t// serialize all compound variant pairs\n\t\t\tfor (const name in vMatch) vMatch[name] = String(vMatch[name])\n\n\t\t\tconst variant = [vMatch, vStyle, !hasNames(vStyle)]\n\n\t\t\tcompoundVariants.push(variant)\n\t\t}\n\t}\n\n\treturn ([className, style, singularVariants, compoundVariants, prefilledVariants, undefinedVariants])\n}\n\nconst createRenderer = (config, internals, sheet, { shouldForwardStitchesProp }) => {\n\tconst [\n\t\tbaseClassName,\n\t\tbaseClassNames,\n\t\tprefilledVariants,\n\t\tundefinedVariants\n\t] = getPreparedDataFromComposers(internals.composers)\n\n\tconst deferredInjector = typeof internals.type === 'function' || !!internals.type.$$typeof ? createRulesInjectionDeferrer(sheet) : null\n\tconst injectionTarget = (deferredInjector || sheet).rules\n\n\tconst selector = `.${baseClassName}${baseClassNames.length > 1 ? `:where(.${baseClassNames.slice(1).join('.')})` : ``}`\n\n\tconst render = (props) => {\n\t\tprops = typeof props === 'object' && props || empty\n\n\t\t// 1. we cannot mutate `props`\n\t\t// 2. we delete variant props\n\t\t// 3. we delete `css` prop\n\t\t// therefore: we must create a new props & css variables\n\t\tconst { ...forwardProps } = props\n\n\t\tconst variantProps = {}\n\n\t\tfor (const name in prefilledVariants) {\n\t\t\tif (name in props) {\n\t\t\t\tif (!shouldForwardStitchesProp?.(name)) delete forwardProps[name]\n\t\t\t\tlet data = props[name]\n\n\t\t\t\tif (typeof data === 'object' && data) {\n\t\t\t\t\tvariantProps[name] = {\n\t\t\t\t\t\t'@initial': prefilledVariants[name],\n\t\t\t\t\t\t...data,\n\t\t\t\t\t}\n\t\t\t\t} else {\n\t\t\t\t\tdata = String(data)\n\n\t\t\t\t\tvariantProps[name] = (\n\t\t\t\t\t\tdata === 'undefined' && !undefinedVariants.has(name)\n\t\t\t\t\t\t\t? prefilledVariants[name]\n\t\t\t\t\t\t: data\n\t\t\t\t\t)\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\tvariantProps[name] = prefilledVariants[name]\n\t\t\t}\n\t\t}\n\n\t\tconst classSet = new Set([ ...baseClassNames ])\n\n\t\t// 1. builds up the variants (fills in defaults, calculates @initial on responsive, etc.)\n\t\t// 2. iterates composers\n\t\t// 2.1. add their base class\n\t\t// 2.2. iterate their variants, add their variant classes\n\t\t// 2.2.1. orders regular variants before responsive variants\n\t\t// 2.3. iterate their compound variants, add their compound variant classes\n\n\t\tfor (const [composerBaseClass, composerBaseStyle, singularVariants, compoundVariants] of internals.composers) {\n\t\t\tif (!sheet.rules.styled.cache.has(composerBaseClass)) {\n\t\t\t\tsheet.rules.styled.cache.add(composerBaseClass)\n\n\t\t\t\ttoCssRules(composerBaseStyle, [`.${composerBaseClass}`], [], config, (cssText) => {\n\t\t\t\t\tinjectionTarget.styled.apply(cssText)\n\t\t\t\t})\n\t\t\t}\n\n\t\t\tconst singularVariantsToAdd = getTargetVariantsToAdd(singularVariants, variantProps, config.media)\n\t\t\tconst compoundVariantsToAdd = getTargetVariantsToAdd(compoundVariants, variantProps, config.media, true)\n\n\t\t\tfor (const variantToAdd of singularVariantsToAdd) {\n\t\t\t\tif (variantToAdd === undefined) continue\n\n\t\t\t\tfor (const [vClass, vStyle, isResponsive] of variantToAdd) {\n\t\t\t\t\tconst variantClassName = `${composerBaseClass}-${toHash(vStyle)}-${vClass}`\n\n\t\t\t\t\tclassSet.add(variantClassName)\n\n\t\t\t\t\tconst groupCache = (isResponsive ? sheet.rules.resonevar : sheet.rules.onevar ).cache\n\t\t\t\t\t/* \n\t\t\t\t\t * make sure that normal variants are injected before responsive ones\n\t\t\t\t\t * @see {@link https://github.com/stitchesjs/stitches/issues/737|github}\n\t\t\t\t\t */\n\t\t\t\t\tconst targetInjectionGroup = isResponsive ? injectionTarget.resonevar : injectionTarget.onevar\n\n\t\t\t\t\tif (!groupCache.has(variantClassName)) {\n\t\t\t\t\t\tgroupCache.add(variantClassName)\n\t\t\t\t\t\ttoCssRules(vStyle, [`.${variantClassName}`], [], config, (cssText) => {\n\t\t\t\t\t\t\ttargetInjectionGroup.apply(cssText)\n\t\t\t\t\t\t})\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tfor (const variantToAdd of compoundVariantsToAdd) {\n\t\t\t\tif (variantToAdd === undefined) continue\n\n\t\t\t\tfor (const [vClass, vStyle] of variantToAdd) {\n\t\t\t\t\tconst variantClassName = `${composerBaseClass}-${toHash(vStyle)}-${vClass}`\n\n\t\t\t\t\tclassSet.add(variantClassName)\n\n\t\t\t\t\tif (!sheet.rules.allvar.cache.has(variantClassName)) {\n\t\t\t\t\t\tsheet.rules.allvar.cache.add(variantClassName)\n\n\t\t\t\t\t\ttoCssRules(vStyle, [`.${variantClassName}`], [], config, (cssText) => {\n\t\t\t\t\t\t\tinjectionTarget.allvar.apply(cssText)\n\t\t\t\t\t\t})\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t// apply css property styles\n\t\tconst css = forwardProps.css\n\t\tif (typeof css === 'object' && css) {\n\t\t\tif (!shouldForwardStitchesProp?.('css')) delete forwardProps.css \n\t\t\t/** @type {string} Inline Class Unique Identifier. @see `{COMPOSER_UUID}-i{VARIANT_UUID}-css` */\n\t\t\tconst iClass = `${baseClassName}-i${toHash(css)}-css`\n\n\t\t\tclassSet.add(iClass)\n\n\t\t\tif (!sheet.rules.inline.cache.has(iClass)) {\n\t\t\t\tsheet.rules.inline.cache.add(iClass)\n\n\t\t\t\ttoCssRules(css, [`.${iClass}`], [], config, (cssText) => {\n\t\t\t\t\tinjectionTarget.inline.apply(cssText)\n\t\t\t\t})\n\t\t\t}\n\t\t}\n\n\t\tfor (const propClassName of String(props.className || '').trim().split(/\\s+/)) {\n\t\t\tif (propClassName) classSet.add(propClassName)\n\t\t}\n\n\t\tconst renderedClassName = forwardProps.className = [ ...classSet ].join(' ')\n\n\t\tconst renderedToString = () => renderedClassName\n\n\t\treturn {\n\t\t\ttype: internals.type,\n\t\t\tclassName: renderedClassName,\n\t\t\tselector,\n\t\t\tprops: forwardProps,\n\t\t\ttoString: renderedToString,\n\t\t\tdeferredInjector,\n\t\t}\n\t}\n\n\tconst toString = () => {\n\t\tif (!sheet.rules.styled.cache.has(baseClassName)) render()\n\n\t\treturn baseClassName\n\t}\n\n\treturn define(render, {\n\t\tclassName: baseClassName,\n\t\tselector,\n\t\t[internal]: internals,\n\t\ttoString,\n\t})\n}\n\n/** Returns useful data that can be known before rendering. */\nconst getPreparedDataFromComposers = (composers) => {\n\t/** Class name of the first composer. */\n\tlet baseClassName = ''\n\n\t/** @type {string[]} Combined class names for all composers. */\n\tconst baseClassNames = []\n\n\t/** @type {PrefilledVariants} Combined variant pairings for all composers. */\n\tconst combinedPrefilledVariants = {}\n\n\t/** @type {UndefinedVariants} List of variant names that can have an \"undefined\" pairing. */\n\tconst combinedUndefinedVariants = []\n\n\tfor (const [className, , , , prefilledVariants, undefinedVariants] of composers) {\n\t\tif (baseClassName === '') baseClassName = className\n\n\t\tbaseClassNames.push(className)\n\n\t\tcombinedUndefinedVariants.push(...undefinedVariants)\n\n\t\tfor (const name in prefilledVariants) {\n\t\t\tconst data = prefilledVariants[name]\n\t\t\tif (combinedPrefilledVariants[name] === undefined || data !== 'undefined' || undefinedVariants.includes(data)) combinedPrefilledVariants[name] = data\n\t\t}\n\t}\n\n\tconst preparedData = [\n\t\tbaseClassName,\n\t\tbaseClassNames,\n\t\tcombinedPrefilledVariants,\n\t\tnew Set(combinedUndefinedVariants)\n\t]\n\n\treturn preparedData\n}\n\nconst getTargetVariantsToAdd = (\n\ttargetVariants,\n\tvariantProps,\n\tmedia,\n\tisCompoundVariant,\n) => {\n\t\n\tconst targetVariantsToAdd = []\n\n\ttargetVariants: for (let [vMatch, vStyle, vEmpty] of targetVariants) {\n\t\t// skip empty variants\n\t\tif (vEmpty) continue\n\n\t\t/** Position the variant should be inserted into. */\n\t\tlet vOrder = 0\n\n\t\tlet vName\n\n\t\tlet isResponsive = false\n\t\tfor (vName in vMatch) {\n\t\t\tconst vPair = vMatch[vName]\n\n\t\t\tlet pPair = variantProps[vName]\n\n\t\t\t// exact matches\n\t\t\tif (pPair === vPair) continue\n\t\t\t// responsive matches\n\t\t\telse if (typeof pPair === 'object' && pPair) {\n\t\t\t\t/** @type {boolean} Whether the responsive variant is matched. */\n\t\t\t\tlet didMatch\n\n\t\t\t\tlet qOrder = 0\n\t\t\t\t// media queries matching the same variant\n\t\t\t\tlet matchedQueries\n\t\t\t\tfor (const query in pPair) {\n\t\t\t\t\tif (vPair === String(pPair[query])) {\n\t\t\t\t\t\tif (query !== '@initial') {\n\t\t\t\t\t\t\t// check if the cleanQuery is in the media config and then we push the resulting media query to the matchedQueries array, \n\t\t\t\t\t\t\t// 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\n\t\t\t\t\t\t\t// when we finish working on this variant and want wrap the vStyles with the matchedQueries\n\t\t\t\t\t\t\tconst cleanQuery = query.slice(1);\n\t\t\t\t\t\t\t(matchedQueries = matchedQueries || []).push(cleanQuery in media ? media[cleanQuery] : query.replace(/^@media ?/, ''))\n\t\t\t\t\t\t\tisResponsive = true\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tvOrder += qOrder\n\t\t\t\t\t\tdidMatch = true\n\t\t\t\t\t}\n\n\t\t\t\t\t++qOrder\n\t\t\t\t}\n\t\t\t\tif (matchedQueries && matchedQueries.length) {\n\t\t\t\t\tvStyle = {\n\t\t\t\t\t\t['@media ' + matchedQueries.join(', ')]: vStyle,\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\tif (!didMatch) continue targetVariants\n\t\t\t}\n\n\t\t\t// non-matches\n\t\t\telse continue targetVariants\n\t\t}\n\t\t(targetVariantsToAdd[vOrder] = targetVariantsToAdd[vOrder] || []).push([isCompoundVariant ? `cv` : `${vName}-${vMatch[vName]}`, vStyle, isResponsive])\n\t}\n\n\treturn targetVariantsToAdd\n}\n\n/** Fallback props object used when no props are passed. */\nconst empty = {}\n" }, { "path": "packages/core/src/features/globalCss.js", "content": "import { createMemo } from '../utility/createMemo.js'\nimport { define } from '../utility/define.js'\n\nimport { toCssRules } from '../convert/toCssRules.js'\nimport { toHash } from '../convert/toHash.js'\n\nconst createGlobalCssFunctionMap = createMemo()\n\n/** Returns a function that applies global styles. */\nexport const createGlobalCssFunction = (\n\t config,\n\t sheet\n) => createGlobalCssFunctionMap(config, () => (\n\t ...styles\n) => {\n\tconst render = () => {\n\t\tfor (let style of styles) {\n\t\t\tstyle = typeof style === 'object' && style || {}\n\n\t\t\tlet uuid = toHash(style)\n\n\t\t\tif (!sheet.rules.global.cache.has(uuid)) {\n\t\t\t\tsheet.rules.global.cache.add(uuid)\n\n\t\t\t\t// support @import rules\n\t\t\t\tif ('@import' in style) {\n\t\t\t\t\tlet importIndex = [].indexOf.call(sheet.sheet.cssRules, sheet.rules.themed.group) - 1\n\n\t\t\t\t\t// wrap import in quotes as a convenience\n\t\t\t\t\tfor (\n\t\t\t\t\t\tlet importValue of /** @type {string[]} */ ([].concat(style['@import']))\n\t\t\t\t\t) {\n\t\t\t\t\t\timportValue = importValue.includes('\"') || importValue.includes(\"'\") ? importValue : `\"${importValue}\"`\n\n\t\t\t\t\t\tsheet.sheet.insertRule(`@import ${importValue};`, importIndex++)\n\t\t\t\t\t}\n\n\t\t\t\t\tdelete style['@import']\n\t\t\t\t}\n\n\t\t\t\ttoCssRules(style, [], [], config, (cssText) => {\n\t\t\t\t\tsheet.rules.global.apply(cssText)\n\t\t\t\t})\n\t\t\t}\n\t\t}\n\n\t\treturn ''\n\t}\n\n\treturn define(render, {\n\t\ttoString: render,\n\t})\n})\n" }, { "path": "packages/core/src/features/keyframes.js", "content": "import { createMemo } from '../utility/createMemo.js'\nimport { define } from '../utility/define.js'\n\nimport { toCssRules } from '../convert/toCssRules.js'\nimport { toHash } from '../convert/toHash.js'\nimport { toTailDashed } from '../convert/toTailDashed.js'\n\n/** @typedef {import('..').Config} Config */\n/** @typedef {import('..').Style} Style */\n/** @typedef {import('..').GroupSheet} GroupSheet */\n\nconst createKeyframesFunctionMap = createMemo()\n\n/** Returns a function that applies a keyframes rule. */\nexport const createKeyframesFunction = (/** @type {Config} */ config, /** @type {GroupSheet} */ sheet) => (\n\tcreateKeyframesFunctionMap(config, () => (style) => {\n\t\t/** @type {string} Keyframes Unique Identifier. @see `{CONFIG_PREFIX}-?k-{KEYFRAME_UUID}` */\n\t\tconst name = `${toTailDashed(config.prefix)}k-${toHash(style)}`\n\n\t\tconst render = () => {\n\t\t\tif (!sheet.rules.global.cache.has(name)) {\n\t\t\t\tsheet.rules.global.cache.add(name)\n\n\t\t\t\tconst cssRules = []\n\n\t\t\t\ttoCssRules(style, [], [], config, (cssText) => cssRules.push(cssText))\n\n\t\t\t\tconst cssText = `@keyframes ${name}{${cssRules.join('')}}`\n\n\t\t\t\tsheet.rules.global.apply(cssText)\n\t\t\t}\n\n\t\t\treturn name\n\t\t}\n\n\t\treturn define(render, {\n\t\t\tget name() {\n\t\t\t\treturn render()\n\t\t\t},\n\t\t\ttoString: render,\n\t\t})\n\t})\n)\n" }, { "path": "packages/core/src/index.js", "content": "import { getCachedConfig } from './utility/getCachedConfig.js'\n\nexport { createStitches } from './createStitches.js'\nexport { defaultThemeMap } from './default/defaultThemeMap.js'\n\nexport const createTheme = (...args) => getCachedConfig().createTheme(...args)\nexport const globalCss = (...args) => getCachedConfig().globalCss(...args)\nexport const keyframes = (...args) => getCachedConfig().keyframes(...args)\n\nexport const css = (...args) => getCachedConfig().css(...args)\n" }, { "path": "packages/core/src/sheet.js", "content": "import { getNonce } from './utility/getNonce.js'\n\n/**\n * Rules in the sheet appear in this order:\n * 1. theme rules (themed)\n * 2. global rules (global)\n * 3. component rules (styled)\n * 4. non-responsive variants rules (onevar)\n * 5. responsive variants rules (resonevar)\n * 6. compound variants rules (allvar)\n * 7. inline rules (inline)\n */\n/** @type {RuleGroupNames} */\nexport const names = ['themed', 'global', 'styled', 'onevar', 'resonevar', 'allvar', 'inline']\n\nconst isSheetAccessible = (/** @type {CSSStyleSheet} */ sheet) => {\n\tif (sheet.href && !sheet.href.startsWith(location.origin)) {\n\t\treturn false\n\t}\n\n\ttry {\n\t\treturn !!sheet.cssRules\n\t} catch (e) {\n\t\treturn false\n\t}\n}\n\nexport const createSheet = (/** @type {DocumentOrShadowRoot} */ root) => {\n\t/** @type {SheetGroup} Object hosting the hydrated stylesheet. */\n\tlet groupSheet\n\n\tconst toString = () => {\n\t\tconst { cssRules } = groupSheet.sheet\n\t\treturn [].map\n\t\t\t.call(cssRules, (cssRule, cssRuleIndex) => {\n\t\t\t\tconst { cssText } = cssRule\n\n\t\t\t\tlet lastRuleCssText = ''\n\n\t\t\t\tif (cssText.startsWith('--sxs')) return ''\n\n\t\t\t\tif (cssRules[cssRuleIndex - 1] && (lastRuleCssText = cssRules[cssRuleIndex - 1].cssText).startsWith('--sxs')) {\n\t\t\t\t\tif (!cssRule.cssRules.length) return ''\n\n\t\t\t\t\tfor (const name in groupSheet.rules) {\n\t\t\t\t\t\tif (groupSheet.rules[name].group === cssRule) {\n\t\t\t\t\t\t\treturn `--sxs{--sxs:${[...groupSheet.rules[name].cache].join(' ')}}${cssText}`\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\t\t\t\t\treturn cssRule.cssRules.length ? `${lastRuleCssText}${cssText}` : ''\n\t\t\t\t}\n\n\t\t\t\treturn cssText\n\t\t\t})\n\t\t\t.join('')\n\t}\n\n\tconst reset = () => {\n\t\tif (groupSheet) {\n\t\t\tconst { rules, sheet } = groupSheet\n\n\t\t\tif (!sheet.deleteRule) {\n\t\t\t\twhile (Object(Object(sheet.cssRules)[0]).type === 3) sheet.cssRules.splice(0, 1)\n\n\t\t\t\tsheet.cssRules = []\n\t\t\t}\n\n\t\t\tfor (const groupName in rules) {\n\t\t\t\tdelete rules[groupName]\n\t\t\t}\n\t\t}\n\n\t\t/** @type {StyleSheetList} */\n\t\tconst sheets = Object(root).styleSheets || []\n\n\t\t// iterate all stylesheets until a hydratable stylesheet is found\n\t\tfor (const sheet of sheets) {\n\t\t\tif (!isSheetAccessible(sheet)) continue\n\n\t\t\tfor (let index = 0, rules = sheet.cssRules; rules[index]; ++index) {\n\t\t\t\t/** @type {CSSStyleRule} Possible indicator rule. */\n\t\t\t\tconst check = Object(rules[index])\n\n\t\t\t\t// a hydratable set of rules will start with a style rule (type: 1), ignore all others\n\t\t\t\tif (check.type !== 1) continue\n\n\t\t\t\t/** @type {CSSMediaRule} Possible styling group. */\n\t\t\t\tconst group = Object(rules[index + 1])\n\n\t\t\t\t// a hydratable set of rules will follow with a media rule (type: 4), ignore all others\n\t\t\t\tif (group.type !== 4) continue\n\n\t\t\t\t++index\n\n\t\t\t\tconst { cssText } = check\n\n\t\t\t\t// a hydratable style rule will have a selector of `--sxs`, ignore all others\n\t\t\t\tif (!cssText.startsWith('--sxs')) continue\n\n\t\t\t\tconst cache = cssText.slice(14, -3).trim().split(/\\s+/)\n\n\t\t\t\t/** @type {GroupName} Name of the group. */\n\t\t\t\tconst groupName = names[cache[0]]\n\n\t\t\t\t// a hydratable style rule will have a parsable group, ignore all others\n\t\t\t\tif (!groupName) continue\n\n\t\t\t\t// create a group sheet if one does not already exist\n\t\t\t\tif (!groupSheet) groupSheet = { sheet, reset, rules: {}, toString }\n\n\t\t\t\t// add the group to the group sheet\n\t\t\t\tgroupSheet.rules[groupName] = { group, index, cache: new Set(cache) }\n\t\t\t}\n\n\t\t\t// if a hydratable stylesheet is found, stop looking\n\t\t\tif (groupSheet) break\n\t\t}\n\n\t\t// if no hydratable stylesheet is found\n\t\tif (!groupSheet) {\n\t\t\tconst createCSSMediaRule = (/** @type {string} */ sourceCssText, type) => {\n\t\t\t\treturn /** @type {CSSMediaRule} */ ({\n\t\t\t\t\ttype,\n\t\t\t\t\tcssRules: [],\n\t\t\t\t\tinsertRule(cssText, index) {\n\t\t\t\t\t\tthis.cssRules.splice(index, 0, createCSSMediaRule(cssText, {\n\t\t\t\t\t\t\timport: 3,\n\t\t\t\t\t\t\tundefined: 1\n\t\t\t\t\t\t}[(cssText.toLowerCase().match(/^@([a-z]+)/) || [])[1]] || 4))\n\t\t\t\t\t},\n\t\t\t\t\tget cssText() {\n\t\t\t\t\t\treturn sourceCssText === '@media{}' ? `@media{${[].map.call(this.cssRules, (cssRule) => cssRule.cssText).join('')}}` : sourceCssText\n\t\t\t\t\t},\n\t\t\t\t})\n\t\t\t}\n\n\t\t\tconst createSheet = () => {\n\t\t\t\tif (!root) {\n\t\t\t\t\treturn createCSSMediaRule('', 'text/css')\n\t\t\t\t}\n\t\t\t\tconst styleEl = document.createElement('style')\n\t\t\t\tconst nonce = getNonce()\n\t\t\t\tif (nonce) {\n\t\t\t\t\tstyleEl.setAttribute('nonce', nonce)\n\t\t\t\t}\n\t\t\t\treturn (root.head || root).appendChild(styleEl).sheet\n\t\t\t}\n\n\t\t\tgroupSheet = {\n\t\t\t\tsheet: createSheet(),\n\t\t\t\trules: {},\n\t\t\t\treset,\n\t\t\t\ttoString,\n\t\t\t}\n\t\t}\n\n\t\tconst { sheet, rules } = groupSheet\n\t\tfor (let i = names.length - 1; i >= 0; --i) {\n\t\t\t// name of group on current index\n\t\t\tconst name = names[i]\n\t\t\tif (!rules[name]) {\n\t\t\t\t// name of prev group\n\t\t\t\tconst prevName = names[i + 1]\n\t\t\t\t// get the index of that prev group or else get the length of the whole sheet\n\t\t\t\tconst index = rules[prevName] ? rules[prevName].index : sheet.cssRules.length\n\t\t\t\t// insert the grouping & the sxs rule\n\t\t\t\tsheet.insertRule('@media{}', index)\n\t\t\t\tsheet.insertRule(`--sxs{--sxs:${i}}`, index)\n\t\t\t\t// add the group to the group sheet\n\t\t\t\trules[name] = { group: sheet.cssRules[index + 1], index, cache: new Set([i]) }\n\t\t\t}\n\t\t\taddApplyToGroup(rules[name])\n\t\t}\n\t}\n\n\treset()\n\n\treturn groupSheet\n}\n\nconst addApplyToGroup = (/** @type {RuleGroup} */ group) => {\n\tconst groupingRule = group.group\n\n\tlet index = groupingRule.cssRules.length\n\n\tgroup.apply = (cssText) => {\n\t\ttry {\n\t\t\tgroupingRule.insertRule(cssText, index)\n\n\t\t\t++index\n\t\t} catch (__) {\n\t\t\t// do nothing and continue\n\t\t}\n\t}\n}\n/** Pending rules for injection */\nconst $pr = Symbol()\n\n/**\n * When a stitches component is extending some other random react component,\n * it’s gonna create a react component (Injector) using this function and then render it after the children,\n * this way, we would force the styles of the wrapper to be injected after the wrapped component\n */\nexport const createRulesInjectionDeferrer = (globalSheet) => {\n\t// the injection deferrer\n\tfunction injector() {\n\t\tfor (let i = 0; i < injector[$pr].length; i++) {\n\t\t\tconst [sheet, cssString] = injector[$pr][i]\n\t\t\tglobalSheet.rules[sheet].apply(cssString)\n\t\t}\n\t\tinjector[$pr] = []\n\t\treturn null\n\t}\n\t// private prop to store pending rules\n\tinjector[$pr] = []\n\t// mocking the rules.apply api used on the sheet\n\tinjector.rules = {}\n\t// creating the apply methods under rules[something]\n\tnames.forEach((sheetName) => (injector.rules[sheetName] = { apply: (rule) => injector[$pr].push([sheetName, rule]) }))\n\treturn injector\n}\n" }, { "path": "packages/core/src/utility/createMemo.js", "content": "const stringifyReplacer = (name, data) => (typeof data === 'function' ? { '()': Function.prototype.toString.call(data) } : data)\n\nconst stringify = (value) => JSON.stringify(value, stringifyReplacer)\n\n\nexport const createMemo = () => {\n\tconst cache = Object.create(null)\n\n\treturn (value, apply, ...args) => {\n\t\tconst vjson = stringify(value)\n\n\t\treturn vjson in cache ? cache[vjson] : (cache[vjson] = apply(value, ...args))\n\t}\n}\n" }, { "path": "packages/core/src/utility/define.js", "content": "/** @type {(target: T, source: any) => T} */\nexport const define = (target, source) => Object.defineProperties(target, Object.getOwnPropertyDescriptors(source))\n" }, { "path": "packages/core/src/utility/getCachedConfig.js", "content": "import { createStitches } from '../createStitches.js'\n\nlet cachedConfig\n\nexport const getCachedConfig = () => cachedConfig || (cachedConfig = createStitches())\n" }, { "path": "packages/core/src/utility/getNonce.js", "content": "export const getNonce = () => {\n\tif (typeof window.__webpack_nonce__ !== 'undefined') return window.__webpack_nonce__\n\tif (typeof window.nonce !== 'undefined') return window.nonce\n\treturn null\n}\n" }, { "path": "packages/core/src/utility/hasNames.js", "content": "export const hasNames = (target) => {\n\tfor (const name in target) return true\n\treturn false\n}\n" }, { "path": "packages/core/src/utility/hasOwn.js", "content": "const { hasOwnProperty } = Object.prototype\n\n\nexport const hasOwn = (target, key) => hasOwnProperty.call(target, key)\n" }, { "path": "packages/core/src/utility/index.d.ts", "content": "export type Primitive = string | number | bigint | boolean | symbol\nexport type Optional = Primitive | void\nexport type Try = T1 extends T2 ? T4 : T3\n\nexport type ToString = `${T1}`\nexport type ToTailDashed = T1 extends '' ? '' : `${T1}-`\n" }, { "path": "packages/core/src/utility/internal.js", "content": "export const internal = Symbol.for('sxs.internal')\n" }, { "path": "packages/core/tests/basic.js", "content": "import { createStitches } from '../src/index.js'\n\ndescribe('Basic', () => {\n\ttest('Existance of methods', () => {\n\t\tconst stitches = createStitches()\n\n\t\texpect(stitches).toBeInstanceOf(Object)\n\t\texpect(stitches.css).toBeInstanceOf(Function)\n\t\texpect(stitches.globalCss).toBeInstanceOf(Function)\n\t\texpect(stitches.keyframes).toBeInstanceOf(Function)\n\t\texpect(stitches.createTheme).toBeInstanceOf(Function)\n\t})\n\n\ttest('Functionality of getCssText()', () => {\n\t\tconst { getCssText } = createStitches()\n\n\t\texpect(getCssText()).toBe('')\n\t})\n\n\ttest('Functionality of css()', () => {\n\t\tconst { css, getCssText } = createStitches()\n\n\t\tconst component1of2 = css()\n\t\tconst className1of2 = `${component1of2}`\n\t\tconst cssString1of2 = getCssText()\n\n\t\texpect(component1of2).toBeInstanceOf(Function)\n\t\texpect(className1of2).toBe('PJLV')\n\t\texpect(cssString1of2).toBe('')\n\n\t\tconst component2of2 = css({ color: 'DodgerBlue' })\n\t\tconst className2of2 = `${component2of2}`\n\t\tconst cssString2of2 = getCssText()\n\n\t\texpect(component2of2).toBeInstanceOf(Function)\n\t\texpect(className2of2).toBe('c-dataoT')\n\t\texpect(cssString2of2).toBe(`--sxs{--sxs:2 PJLV c-dataoT}@media{.c-dataoT{color:DodgerBlue}}`)\n\t})\n\n\ttest('Functionality of reset()', () => {\n\t\tconst { reset, getCssText } = createStitches()\n\n\t\texpect(reset).toBeInstanceOf(Function)\n\n\t\texpect(getCssText()).toBe('')\n\n\t\treset()\n\n\t\texpect(getCssText()).toBe('')\n\t})\n\n\ttest('Functionality of globalCss()', () => {\n\t\tconst { globalCss, getCssText } = createStitches()\n\n\t\tconst rendering1of2 = globalCss()\n\t\tconst className1of2 = `${rendering1of2}`\n\t\tconst cssString1of2 = getCssText()\n\n\t\texpect(rendering1of2).toBeInstanceOf(Function)\n\t\texpect(className1of2).toBe('')\n\t\texpect(cssString1of2).toBe('')\n\n\t\tconst rendering2of2 = globalCss({ body: { margin: 0 } })\n\t\tconst className2of2 = `${rendering2of2}`\n\t\tconst cssString2of2 = getCssText()\n\n\t\texpect(rendering2of2).toBeInstanceOf(Function)\n\t\texpect(className2of2).toBe('')\n\t\texpect(cssString2of2).toBe(`--sxs{--sxs:1 cSHHDh}@media{body{margin:0}}`)\n\t})\n\n\ttest('Functionality of keyframes()', () => {\n\t\tconst { keyframes, getCssText } = createStitches()\n\n\t\tconst rendering1of1 = keyframes({\n\t\t\t'0%': {\n\t\t\t\tcolor: 'Black',\n\t\t\t},\n\t\t\t'100%': {\n\t\t\t\tcolor: 'White',\n\t\t\t},\n\t\t})\n\t\tconst className1of1 = `${rendering1of1}`\n\t\tconst cssString1of1 = getCssText()\n\n\t\texpect(rendering1of1).toBeInstanceOf(Function)\n\t\texpect(className1of1).toBe('k-jOrSYg')\n\t\texpect(cssString1of1).toBe(`--sxs{--sxs:1 k-jOrSYg}@media{@keyframes k-jOrSYg{0%{color:Black}100%{color:White}}}`)\n\t})\n\n\ttest('Functionality of createTheme()', () => {\n\t\tconst { createTheme, getCssText } = createStitches()\n\n\t\tconst rendering1of1 = createTheme({\n\t\t\tcolors: {\n\t\t\t\tred: 'Crimson',\n\t\t\t\tblue: 'DodgerBlue',\n\t\t\t},\n\t\t})\n\n\t\tconst className1of1 = `${rendering1of1}`\n\t\tconst cssString1of1 = getCssText()\n\n\t\texpect(rendering1of1).toBeInstanceOf(Object)\n\t\texpect(className1of1).toBe('t-kfidiM')\n\t\texpect(cssString1of1).toBe(`--sxs{--sxs:0 t-kfidiM}@media{.t-kfidiM{--colors-red:Crimson;--colors-blue:DodgerBlue}}`)\n\t})\n\n\ttest('Functionality of css() — css prop', () => {\n\t\tconst { css, getCssText } = createStitches()\n\n\t\tconst component1of1 = css({ color: 'DodgerBlue' })\n\t\tconst className1of1 = `${component1of1({ css: { color: 'Crimson' } })}`\n\t\tconst cssString1of1 = getCssText()\n\n\t\texpect(component1of1).toBeInstanceOf(Function)\n\t\texpect(className1of1).toBe('c-dataoT c-dataoT-icaIZdx-css')\n\t\texpect(cssString1of1).toBe(\n\t\t\t`--sxs{--sxs:2 c-dataoT}@media{` +\n\t\t\t\t`.c-dataoT{color:DodgerBlue}` +\n\t\t\t`}` +\n\t\t\t`--sxs{--sxs:6 c-dataoT-icaIZdx-css}@media{` +\n\t\t\t\t`.c-dataoT-icaIZdx-css{color:Crimson}` +\n\t\t\t`}`\n\t\t)\n\t})\n\n\ttest('Functionality of css() — variants', () => {\n\t\tconst { css, getCssText } = createStitches()\n\n\t\tconst component1of1 = css({\n\t\t\tfontSize: '100%',\n\t\t\tvariants: {\n\t\t\t\tshade: {\n\t\t\t\t\tred: {\n\t\t\t\t\t\tcolor: 'Crimson',\n\t\t\t\t\t},\n\t\t\t\t\tblue: {\n\t\t\t\t\t\tcolor: 'DodgerBlue',\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t},\n\t\t})\n\t\tconst className1of1 = `${component1of1({ shade: 'red' })}`\n\t\tconst cssString1of1 = getCssText()\n\n\t\texpect(component1of1).toBeInstanceOf(Function)\n\t\texpect(className1of1).toBe('c-imTdEZ c-imTdEZ-caIZdx-shade-red')\n\t\texpect(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}}`)\n\t})\n\n\ttest('Functionality of css() — utils', () => {\n\t\tconst { css, getCssText } = createStitches({\n\t\t\tutils: {\n\t\t\t\tuserSelect: (value) => ({\n\t\t\t\t\tWebkitUserSelector: value,\n\t\t\t\t\tuserSelect: value,\n\t\t\t\t}),\n\t\t\t},\n\t\t})\n\n\t\tconst component1of1 = css({\n\t\t\tuserSelect: 'none',\n\t\t})\n\t\tconst className1of1 = `${component1of1()}`\n\t\tconst cssString1of1 = getCssText()\n\n\t\texpect(className1of1).toBe('c-bStdfw')\n\t\texpect(cssString1of1).toBe(`--sxs{--sxs:2 c-bStdfw}@media{.c-bStdfw{-webkit-user-selector:none;user-select:none}}`)\n\t})\n\n\ttest('Functionality of stringification — numeric pixel values', () => {\n\t\tconst { css, getCssText } = createStitches()\n\n\t\tconst component1of1 = css({\n\t\t\twidth: 100,\n\t\t})\n\t\tconst className1of1 = `${component1of1()}`\n\t\tconst cssString1of1 = getCssText()\n\n\t\texpect(className1of1).toBe('c-eBcQxc')\n\t\texpect(cssString1of1).toBe(`--sxs{--sxs:2 c-eBcQxc}@media{.c-eBcQxc{width:100px}}`)\n\t})\n\n\ttest('Functionality of stringification — token values', () => {\n\t\tconst { css, getCssText } = createStitches()\n\n\t\tconst component1of1 = css({\n\t\t\twidth: '$brand',\n\t\t})\n\n\t\tconst className1of1 = `${component1of1()}`\n\t\tconst cssString1of1 = getCssText()\n\n\t\texpect(className1of1).toBe('c-lpaZZu')\n\t\texpect(cssString1of1).toBe(`--sxs{--sxs:2 c-lpaZZu}@media{.c-lpaZZu{width:var(--sizes-brand)}}`)\n\t})\n\n\ttest('Functionality of stringification — local tokens', () => {\n\t\tconst { css, getCssText } = createStitches()\n\n\t\tconst component1of1 = css({\n\t\t\t$$brand: '500px',\n\t\t\twidth: '$$brand',\n\t\t})\n\n\t\tconst className1of1 = `${component1of1()}`\n\t\tconst cssString1of1 = getCssText()\n\n\t\texpect(className1of1).toBe('c-elRGCe')\n\t\texpect(cssString1of1).toBe(`--sxs{--sxs:2 c-elRGCe}@media{.c-elRGCe{---brand:500px;width:var(---brand)}}`)\n\t})\n\n\ttest('Functionality of stringification — local tokens prefixed', () => {\n\t\tconst { css, getCssText } = createStitches({\n\t\t\tprefix: 'fusion',\n\t\t})\n\n\t\tconst component1of1 = css({\n\t\t\t$$brand: '500px',\n\t\t\twidth: '$$brand',\n\t\t})\n\n\t\tconst className1of1 = `${component1of1()}`\n\t\tconst cssString1of1 = getCssText()\n\n\t\texpect(className1of1).toBe('fusion-c-elRGCe')\n\t\texpect(cssString1of1).toBe(`--sxs{--sxs:2 fusion-c-elRGCe}@media{.fusion-c-elRGCe{--fusion--brand:500px;width:var(--fusion--brand)}}`)\n\t})\n\n\ttest('Stringification: Utils + Local Tokens', () => {\n\t\tconst { css, getCssText } = createStitches({\n\t\t\tutils: {\n\t\t\t\tbackdropFilter: (value) => ({\n\t\t\t\t\tWebkitBackdropFilter: value,\n\t\t\t\t\tbackdropFilter: value,\n\t\t\t\t}),\n\t\t\t},\n\t\t})\n\n\t\tconst component1of1 = css({\n\t\t\t$$blur: 'test',\n\t\t\tbackdropFilter: '$$blur',\n\t\t})\n\n\t\tconst className1of1 = `${component1of1()}`\n\t\tconst cssString1of1 = getCssText()\n\n\t\texpect(className1of1).toBe('c-brAtkJ')\n\t\texpect(cssString1of1).toBe(`--sxs{--sxs:2 c-brAtkJ}@media{.c-brAtkJ{---blur:test;-webkit-backdrop-filter:var(---blur);backdrop-filter:var(---blur)}}`)\n\t})\n\n\ttest('Theme', () => {\n\t\tconst { getCssText } = createStitches({\n\t\t\ttheme: {\n\t\t\t\tcolors: {\n\t\t\t\t\tred: 'Crimson',\n\t\t\t\t\tblue: 'DodgerBlue',\n\t\t\t\t},\n\t\t\t},\n\t\t})\n\n\t\texpect(getCssText()).toBe(`--sxs{--sxs:0 t-kfidiM}@media{:root,.t-kfidiM{--colors-red:Crimson;--colors-blue:DodgerBlue}}`)\n\t})\n})\n" }, { "path": "packages/core/tests/component-composition.js", "content": "import { createStitches } from '../src/index.js'\n\ndescribe('Composition', () => {\n\ttest('Renders an empty component', () => {\n\t\tconst { css, toString } = createStitches()\n\t\tconst generic = css()\n\n\t\texpect(generic().props).toEqual({ className: 'PJLV' })\n\t\texpect(toString()).toBe('')\n\t})\n\n\ttest('Renders a component as the final composition by default', () => {\n\t\tconst { css, toString } = createStitches()\n\t\tconst red = css({ color: 'red' })\n\t\tconst size14 = css({ fontSize: '14px' })\n\t\tconst bold = css({ fontWeight: 'bold' })\n\t\tconst title = css(red, size14, bold, { fontFamily: 'monospace' })\n\n\t\texpect(title.className).toBe('c-gmqXFB')\n\t\texpect(toString()).toBe('')\n\t\texpect(String(title)).toBe('c-gmqXFB')\n\t\texpect(toString()).toBe(\n\t\t\t`--sxs{--sxs:2 c-gmqXFB c-hzkWus c-cQFdVt c-kngyIZ}@media{` +\n\t\t\t\t`.c-gmqXFB{color:red}` +\n\t\t\t\t`.c-hzkWus{font-size:14px}` +\n\t\t\t\t`.c-cQFdVt{font-weight:bold}` +\n\t\t\t\t`.c-kngyIZ{font-family:monospace}` +\n\t\t\t`}`\n\t\t)\n\t})\n\n\ttest('Renders a component with all compositions', () => {\n\t\tconst { css, toString } = createStitches()\n\t\tconst red = css({ color: 'red' })\n\t\tconst size14 = css({ fontSize: '14px' })\n\t\tconst bold = css({ fontWeight: 'bold' })\n\t\tconst title = css(red, size14, bold, { fontFamily: 'monospace' })\n\n\t\texpect(title().className).toBe('c-gmqXFB c-hzkWus c-cQFdVt c-kngyIZ')\n\t\texpect(toString()).toBe(\n\t\t\t`--sxs{--sxs:2 c-gmqXFB c-hzkWus c-cQFdVt c-kngyIZ}@media{` +\n\t\t\t\t`.c-gmqXFB{color:red}` +\n\t\t\t\t`.c-hzkWus{font-size:14px}` +\n\t\t\t\t`.c-cQFdVt{font-weight:bold}` +\n\t\t\t\t`.c-kngyIZ{font-family:monospace}` +\n\t\t\t`}`\n\t\t)\n\t})\n})\n" }, { "path": "packages/core/tests/component-conditions.js", "content": "import { createStitches } from '../src/index.js'\n\ndescribe('Component Medias', () => {\n\ttest('Authors can define medias applied to components', () => {\n\t\tconst { css, toString } = createStitches({\n\t\t\tmedia: {\n\t\t\t\tmediumUp: '(width >= 768px)',\n\t\t\t},\n\t\t})\n\n\t\tcss({\n\t\t\t'fontSize': '16px',\n\t\t\t'@mediumUp': {\n\t\t\t\tfontSize: '24px',\n\t\t\t},\n\t\t})()\n\n\t\texpect(toString()).toBe(\n\t\t\t`--sxs{--sxs:2 c-jEGvho}@media{` +\n\t\t\t\t`.c-jEGvho{font-size:16px}` +\n\t\t\t\t`@media (min-width:768px){.c-jEGvho{font-size:24px}}` +\n\t\t\t`}`,\n\t\t)\n\t})\n})\n" }, { "path": "packages/core/tests/component-css-prop.js", "content": "import { createStitches } from '../src/index.js'\n\ndescribe('Component with CSS prop', () => {\n\ttest('Authors can create a component and pass it a css prop of overrides', () => {\n\t\tconst { css, toString } = createStitches({\n\t\t\tmedia: {\n\t\t\t\tbp0: '(width < 768px)',\n\t\t\t\tbp1: '(768px <= width < 1400px)',\n\t\t\t\tbp2: '(1400px <= width)',\n\t\t\t},\n\t\t})\n\n\t\tcss({\n\t\t\torder: 1,\n\t\t})({\n\t\t\tcss: {\n\t\t\t\torder: 2,\n\t\t\t},\n\t\t})\n\n\t\texpect(toString()).toBe(\n\t\t\t`--sxs{--sxs:2 c-hhyRYU}@media{` +\n\t\t\t\t`.c-hhyRYU{order:1}` +\n\t\t\t`}` +\n\t\t\t`--sxs{--sxs:6 c-hhyRYU-ilhKMMn-css}@media{` +\n\t\t\t\t`.c-hhyRYU-ilhKMMn-css{order:2}` +\n\t\t\t`}`\n\t\t)\n\t})\n})\n" }, { "path": "packages/core/tests/component-empty-variants.js", "content": "import { createStitches } from '../src/index.js'\n\ndescribe('Empty Variants', () => {\n\ttest('Empty Variants', () => {\n\t\tconst { css, getCssText } = createStitches()\n\n\t\tcss({\n\t\t\tvariants: {\n\t\t\t\tsize: {\n\t\t\t\t\txl: {},\n\t\t\t\t},\n\t\t\t\ttone: {\n\t\t\t\t\tprimary: {},\n\t\t\t\t},\n\t\t\t},\n\t\t\tcompoundVariants: [\n\t\t\t\t{\n\t\t\t\t\ttone: 'primary',\n\t\t\t\t\tsize: 'xl',\n\t\t\t\t},\n\t\t\t],\n\t\t})({\n\t\t\ttone: 'primary',\n\t\t\tsize: { '@initial': 'xl' },\n\t\t})\n\n\t\texpect(getCssText()).toBe('')\n\t})\n\n\ttest('Empty Variants', () => {\n\t\tconst { css, getCssText } = createStitches()\n\n\t\tcss({\n\t\t\tvariants: {\n\t\t\t\tsize: {\n\t\t\t\t\txl: {},\n\t\t\t\t},\n\t\t\t\ttone: {\n\t\t\t\t\tprimary: {},\n\t\t\t\t},\n\t\t\t},\n\t\t\tcompoundVariants: [\n\t\t\t\t{\n\t\t\t\t\ttone: 'primary',\n\t\t\t\t\tsize: 'xl',\n\t\t\t\t\tcss: { fontSize: '24px', color: 'black' },\n\t\t\t\t},\n\t\t\t],\n\t\t})({\n\t\t\ttone: 'primary',\n\t\t\tsize: { '@initial': 'xl' },\n\t\t})\n\n\t\texpect(getCssText()).toBe(\n\t\t\t`--sxs{--sxs:5 c-PJLV-lhHHWD-cv}@media{` +\n\t\t\t\t`.c-PJLV-lhHHWD-cv{font-size:24px;color:black}` +\n\t\t\t`}`\n\t\t)\n\t})\n})\n" }, { "path": "packages/core/tests/component-utils-and-types.js", "content": "import { createStitches } from '../src/index.js'\n\ndescribe('Component: Utilities & Tokens', () => {\n\ttest('Utilities & Tokens of the same type', () => {\n\t\tconst { css, toString } = createStitches({\n\t\t\tutils: {\n\t\t\t\tpx: (value) => ({\n\t\t\t\t\tpaddingLeft: value,\n\t\t\t\t\tpaddingRight: value,\n\t\t\t\t}),\n\t\t\t},\n\t\t})\n\n\t\tcss({\n\t\t\tpx: 15,\n\t\t})()\n\n\t\texpect(toString()).toBe(`--sxs{--sxs:2 c-ccgTVz}@media{.c-ccgTVz{padding-left:15px;padding-right:15px}}`)\n\t})\n\n\ttest('Utilities & Tokens of different types', () => {\n\t\tconst { css, toString } = createStitches({\n\t\t\tutils: {\n\t\t\t\tftw: (value) => ({\n\t\t\t\t\tcolor: value,\n\t\t\t\t\tpaddingLeft: value,\n\t\t\t\t\tpaddingRight: value,\n\t\t\t\t}),\n\t\t\t},\n\t\t})\n\n\t\tcss({\n\t\t\tftw: '$sp',\n\t\t})()\n\n\t\texpect(toString()).toBe(`--sxs{--sxs:2 c-ilqzId}@media{.c-ilqzId{color:var(--colors-sp);padding-left:var(--space-sp);padding-right:var(--space-sp)}}`)\n\t})\n})\n" }, { "path": "packages/core/tests/component-variants.js", "content": "import { createStitches } from '../src/index.js'\n\ndescribe('Variants', () => {\n\tconst componentConfig = {\n\t\tvariants: {\n\t\t\tcolor: {\n\t\t\t\tblue: {\n\t\t\t\t\tbackgroundColor: 'dodgerblue',\n\t\t\t\t\tcolor: 'white',\n\t\t\t\t},\n\t\t\t\tred: {\n\t\t\t\t\tbackgroundColor: 'tomato',\n\t\t\t\t\tcolor: 'white',\n\t\t\t\t},\n\t\t\t},\n\t\t\tsize: {\n\t\t\t\tsmall: {\n\t\t\t\t\tfontSize: '16px',\n\t\t\t\t},\n\t\t\t\tlarge: {\n\t\t\t\t\tfontSize: '24px',\n\t\t\t\t},\n\t\t\t},\n\t\t\tlevel: {\n\t\t\t\t1: {\n\t\t\t\t\tpadding: '0.5em',\n\t\t\t\t},\n\t\t\t\t2: {\n\t\t\t\t\tpadding: '1em',\n\t\t\t\t},\n\t\t\t},\n\t\t},\n\t\tcompoundVariants: [\n\t\t\t{\n\t\t\t\tsize: 'small',\n\t\t\t\tcolor: 'blue',\n\t\t\t\tcss: {\n\t\t\t\t\ttransform: 'scale(1.2)',\n\t\t\t\t},\n\t\t\t},\n\t\t],\n\t}\n\n\ttest('Renders a component without any initial styles', () => {\n\t\tconst { css, getCssText } = createStitches()\n\t\tconst component = css(componentConfig)\n\t\tconst expression = component()\n\n\t\texpect(expression.className).toBe('c-PJLV')\n\t\texpect(getCssText()).toBe('')\n\t})\n\n\ttest('Renders a component with 1 matching variant', () => {\n\t\tconst { css, getCssText } = createStitches()\n\t\tconst component = css(componentConfig)\n\t\tconst expression1 = component({ size: 'small' })\n\n\t\tconst expression1CssText = '.c-PJLV-Gaggi-size-small{font-size:16px}'\n\n\t\texpect(expression1.className).toBe('c-PJLV c-PJLV-Gaggi-size-small')\n\t\texpect(getCssText()).toBe(`--sxs{--sxs:3 c-PJLV-Gaggi-size-small}@media{${expression1CssText}}`)\n\n\t\tconst expression2 = component({ color: 'blue' })\n\n\t\tconst expression2CssText = '.c-PJLV-kaCQqN-color-blue{background-color:dodgerblue;color:white}'\n\n\t\texpect(expression2.className).toBe('c-PJLV c-PJLV-kaCQqN-color-blue')\n\t\texpect(getCssText()).toBe(`--sxs{--sxs:3 c-PJLV-Gaggi-size-small c-PJLV-kaCQqN-color-blue}@media{${expression1CssText + expression2CssText}}`)\n\t})\n\n\ttest('Renders a component with 2 matching variants', () => {\n\t\tconst { css, getCssText } = createStitches()\n\t\tconst component = css({\n\t\t\tvariants: {\n\t\t\t\tsize: {\n\t\t\t\t\tsmall: {\n\t\t\t\t\t\tfontSize: '16px',\n\t\t\t\t\t},\n\t\t\t\t\tlarge: {\n\t\t\t\t\t\tfontSize: '24px',\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t\tlevel: {\n\t\t\t\t\t1: {\n\t\t\t\t\t\tpadding: '0.5em',\n\t\t\t\t\t},\n\t\t\t\t\t2: {\n\t\t\t\t\t\tpadding: '1em',\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t}\n\t\t})\n\t\tconst expression = component({ size: 'small', level: 1 })\n\n\t\texpect(expression.className).toBe('c-PJLV c-PJLV-Gaggi-size-small c-PJLV-iRwLiB-level-1')\n\n\t\tconst expressionSizeSmallCssText = '.c-PJLV-Gaggi-size-small{font-size:16px}'\n\t\tconst expressionLevel1CssText = '.c-PJLV-iRwLiB-level-1{padding:0.5em}'\n\n\t\texpect(getCssText()).toBe(`--sxs{--sxs:3 c-PJLV-Gaggi-size-small c-PJLV-iRwLiB-level-1}@media{${expressionSizeSmallCssText + expressionLevel1CssText}}`)\n\t})\n\n\ttest('Renders a component with a 2 matching variants and 1 matching compound', () => {\n\t\tconst { css, getCssText } = createStitches()\n\t\tconst component = css(componentConfig)\n\t\tconst expression = component({ size: 'small', color: 'blue' })\n\n\t\tconst expressionColorBlueCssText = '.c-PJLV-kaCQqN-color-blue{background-color:dodgerblue;color:white}'\n\t\tconst expressionSizeSmallCssText = '.c-PJLV-Gaggi-size-small{font-size:16px}'\n\t\tconst expressionCompoundCssText = '.c-PJLV-cChFtv-cv{transform:scale(1.2)}'\n\n\t\texpect(expression.className).toBe(`c-PJLV c-PJLV-kaCQqN-color-blue c-PJLV-Gaggi-size-small c-PJLV-cChFtv-cv`)\n\t\texpect(getCssText()).toBe(\n\t\t\t`--sxs{--sxs:3 c-PJLV-kaCQqN-color-blue c-PJLV-Gaggi-size-small}@media{${\n\t\t\t\texpressionColorBlueCssText + expressionSizeSmallCssText\n\t\t\t}}--sxs{--sxs:5 c-PJLV-cChFtv-cv}@media{${\n\t\t\t\texpressionCompoundCssText\n\t\t\t}}`\n\t\t)\n\t})\n})\n\ndescribe('Variants with defaults', () => {\n\tconst componentConfig = {\n\t\tvariants: {\n\t\t\tcolor: {\n\t\t\t\tblue: {\n\t\t\t\t\tbackgroundColor: 'dodgerblue',\n\t\t\t\t\tcolor: 'white',\n\t\t\t\t},\n\t\t\t\tred: {\n\t\t\t\t\tbackgroundColor: 'tomato',\n\t\t\t\t\tcolor: 'white',\n\t\t\t\t},\n\t\t\t},\n\t\t\tsize: {\n\t\t\t\tsmall: {\n\t\t\t\t\tfontSize: '16px',\n\t\t\t\t},\n\t\t\t\tlarge: {\n\t\t\t\t\tfontSize: '24px',\n\t\t\t\t},\n\t\t\t},\n\t\t\tlevel: {\n\t\t\t\t1: {\n\t\t\t\t\tpadding: '0.5em',\n\t\t\t\t},\n\t\t\t\t2: {\n\t\t\t\t\tpadding: '1em',\n\t\t\t\t},\n\t\t\t},\n\t\t},\n\t\tcompoundVariants: [\n\t\t\t{\n\t\t\t\tsize: 'small',\n\t\t\t\tcolor: 'blue',\n\t\t\t\tcss: {\n\t\t\t\t\ttransform: 'scale(1.2)',\n\t\t\t\t},\n\t\t\t},\n\t\t],\n\t\tdefaultVariants: {\n\t\t\tsize: 'small',\n\t\t},\n\t}\n\n\ttest('Renders a component with the default variant applied', () => {\n\t\tconst { css, getCssText } = createStitches()\n\t\tconst component = css(componentConfig)\n\t\tconst expression = component()\n\n\t\texpect(expression.className).toBe('c-PJLV c-PJLV-Gaggi-size-small')\n\t\texpect(getCssText()).toBe(`--sxs{--sxs:3 c-PJLV-Gaggi-size-small}@media{.c-PJLV-Gaggi-size-small{font-size:16px}}`)\n\t})\n\n\ttest('Renders a component with the default variant explicitly applied', () => {\n\t\tconst { css, getCssText } = createStitches()\n\t\tconst component = css(componentConfig)\n\t\tconst expression = component({ size: 'small' })\n\n\t\texpect(expression.className).toBe('c-PJLV c-PJLV-Gaggi-size-small')\n\t\texpect(getCssText()).toBe(`--sxs{--sxs:3 c-PJLV-Gaggi-size-small}@media{.c-PJLV-Gaggi-size-small{font-size:16px}}`)\n\t})\n\n\ttest('Renders a component with the non-default variant explicitly applied', () => {\n\t\tconst { css, getCssText } = createStitches()\n\t\tconst component = css(componentConfig)\n\t\tconst expression = component({ size: 'large' })\n\n\t\texpect(expression.className).toBe('c-PJLV c-PJLV-hsYHIj-size-large')\n\t\texpect(getCssText()).toBe(`--sxs{--sxs:3 c-PJLV-hsYHIj-size-large}@media{.c-PJLV-hsYHIj-size-large{font-size:24px}}`)\n\t})\n\n\ttest('Renders a component with the default variant applied and a different variant explicitly applied', () => {\n\t\tconst { css, getCssText } = createStitches()\n\t\tconst component = css(componentConfig)\n\t\tconst expression = component({ level: 1 })\n\n\t\texpect(expression.className).toBe('c-PJLV c-PJLV-Gaggi-size-small c-PJLV-iRwLiB-level-1')\n\t\texpect(getCssText()).toBe(\n\t\t\t`--sxs{--sxs:3 c-PJLV-Gaggi-size-small c-PJLV-iRwLiB-level-1}@media{` +\n\t\t\t\t// implicit size:small\n\t\t\t\t`.c-PJLV-Gaggi-size-small{font-size:16px}` +\n\t\t\t\t// explicit level:1\n\t\t\t\t`.c-PJLV-iRwLiB-level-1{padding:0.5em}` +\n\t\t\t\t`}`,\n\t\t)\n\t})\n\n\ttest('Renders a component with the default variant applied, a different variant explicitly applied, and a compound applied', () => {\n\t\tconst { css, getCssText } = createStitches()\n\t\tconst component = css(componentConfig)\n\t\tconst expression = component({ color: 'blue' })\n\n\t\texpect(expression.className).toBe('c-PJLV c-PJLV-kaCQqN-color-blue c-PJLV-Gaggi-size-small c-PJLV-cChFtv-cv')\n\t\texpect(getCssText()).toBe(\n\t\t\t`--sxs{--sxs:3 c-PJLV-kaCQqN-color-blue c-PJLV-Gaggi-size-small}@media{` +\n\t\t\t\t// explicit color:blue\n\t\t\t\t`.c-PJLV-kaCQqN-color-blue{background-color:dodgerblue;color:white}` +\n\t\t\t\t// implicit size:small\n\t\t\t\t`.c-PJLV-Gaggi-size-small{font-size:16px}` +\n\t\t\t`}--sxs{--sxs:5 c-PJLV-cChFtv-cv}@media{` +\n\t\t\t\t// compound color:blue + size:small\n\t\t\t\t`.c-PJLV-cChFtv-cv{transform:scale(1.2)}` +\n\t\t\t`}`,\n\t\t)\n\t})\n\n\ttest('Returns a component class without the default variant applied when stringified', () => {\n\t\tconst { css, getCssText } = createStitches()\n\t\tconst component = css(componentConfig)\n\t\tconst className = `${component}`\n\n\t\texpect(className).toBe('c-PJLV')\n\t\texpect(getCssText()).toBe('--sxs{--sxs:3 c-PJLV-Gaggi-size-small}@media{.c-PJLV-Gaggi-size-small{font-size:16px}}')\n\t})\n})\n\ndescribe('Conditional variants', () => {\n\tconst config = {\n\t\tmedia: {\n\t\t\tbp1: '(max-width: 767px)',\n\t\t\tbp2: '(min-width: 768px)',\n\t\t},\n\t}\n\n\t/** Component with variants and compound variants */\n\tconst componentConfig = {\n\t\tvariants: {\n\t\t\tcolor: {\n\t\t\t\tblue: {\n\t\t\t\t\tbackgroundColor: 'dodgerblue',\n\t\t\t\t\tcolor: 'white',\n\t\t\t\t},\n\t\t\t\tred: {\n\t\t\t\t\tbackgroundColor: 'tomato',\n\t\t\t\t\tcolor: 'white',\n\t\t\t\t},\n\t\t\t},\n\t\t\tsize: {\n\t\t\t\tsmall: {\n\t\t\t\t\tfontSize: '16px',\n\t\t\t\t},\n\t\t\t\tlarge: {\n\t\t\t\t\tfontSize: '24px',\n\t\t\t\t},\n\t\t\t},\n\t\t\tlevel: {\n\t\t\t\t1: {\n\t\t\t\t\tpadding: '0.5em',\n\t\t\t\t},\n\t\t\t\t2: {\n\t\t\t\t\tpadding: '1em',\n\t\t\t\t},\n\t\t\t},\n\t\t},\n\t\tcompoundVariants: [\n\t\t\t{\n\t\t\t\tsize: 'small',\n\t\t\t\tcolor: 'blue',\n\t\t\t\tcss: {\n\t\t\t\t\ttransform: 'scale(1.2)',\n\t\t\t\t},\n\t\t\t},\n\t\t],\n\t}\n\n\ttest('Renders a component with no variant applied', () => {\n\t\tconst { css, getCssText } = createStitches(config)\n\t\tconst component = css(componentConfig)\n\t\tconst componentClassName = 'c-PJLV'\n\n\t\texpect(component().className).toBe(componentClassName)\n\t\texpect(getCssText()).toBe('')\n\t})\n\n\ttest('Renders a component with one variant applied', () => {\n\t\tconst { css, getCssText } = createStitches(config)\n\t\tconst component = css(componentConfig)\n\t\tconst componentClassName = `c-PJLV`\n\t\tconst componentSmallClassName = `${componentClassName}-Gaggi-size-small`\n\t\tconst componentSmallCssText = `.${componentSmallClassName}{font-size:16px}`\n\n\t\texpect(component({ size: 'small' }).className).toBe([componentClassName, componentSmallClassName].join(' '))\n\t\texpect(getCssText()).toBe(`--sxs{--sxs:3 c-PJLV-Gaggi-size-small}@media{${componentSmallCssText}}`)\n\t})\n\n\ttest('Renders a component with one conditional variant on one breakpoint applied', () => {\n\t\tconst { css, getCssText } = createStitches(config)\n\t\tconst component = css(componentConfig)\n\n\t\texpect(component({ size: { '@bp1': 'small' } }).className).toBe(`c-PJLV c-PJLV-fHtTAQ-size-small`)\n\t\texpect(getCssText()).toBe(\n\t\t\t`--sxs{--sxs:4 c-PJLV-fHtTAQ-size-small}@media{` +\n\t\t\t\t`@media (max-width: 767px){.c-PJLV-fHtTAQ-size-small{font-size:16px}}` +\n\t\t\t`}`\n\t\t)\n\t})\n\n\ttest('Renders a component with one conditional variant on two breakpoints applied', () => {\n\t\tconst { css, getCssText } = createStitches(config)\n\t\tconst component = css(componentConfig)\n\t\tconst componentClassName = `c-PJLV`\n\t\tconst componentSmallBp1ClassName = `${componentClassName}-fHtTAQ-size-small`\n\t\tconst componentLargeBp2ClassName = `${componentClassName}-XwbVw-size-large`\n\t\tconst componentSmallBp1CssText = `@media (max-width: 767px){.${componentSmallBp1ClassName}{font-size:16px}}`\n\t\tconst componentLargeBp2CssText = `@media (min-width: 768px){.${componentLargeBp2ClassName}{font-size:24px}}`\n\n\t\texpect(component({ size: { '@bp1': 'small', '@bp2': 'large' } }).className).toBe([componentClassName, componentSmallBp1ClassName, componentLargeBp2ClassName].join(' '))\n\t\texpect(getCssText()).toBe(\n\t\t\t`--sxs{--sxs:4 c-PJLV-fHtTAQ-size-small c-PJLV-XwbVw-size-large}@media{` +\n\t\t\t\tcomponentSmallBp1CssText +\n\t\t\t\tcomponentLargeBp2CssText +\n\t\t\t`}`\n\t\t)\n\t})\n\n\ttest('Renders a component with a conditional variant repeatedly', () => {\n\t\tconst { css, getCssText } = createStitches(config)\n\t\tconst component = css(componentConfig)\n\n\t\texpect(component({ size: { '@bp1': 'small', '@bp2': 'large' } }).className).toBe(`c-PJLV c-PJLV-fHtTAQ-size-small c-PJLV-XwbVw-size-large`)\n\t\texpect(getCssText()).toBe(\n\t\t\t`--sxs{--sxs:4 c-PJLV-fHtTAQ-size-small c-PJLV-XwbVw-size-large}@media{` +\n\t\t\t\t`@media (max-width: 767px){.c-PJLV-fHtTAQ-size-small{font-size:16px}}` +\n\t\t\t\t`@media (min-width: 768px){.c-PJLV-XwbVw-size-large{font-size:24px}}` +\n\t\t\t`}`\n\t\t)\n\n\t\texpect(component({ size: { '@bp1': 'small', '@bp2': 'large' } }).className).toBe(`c-PJLV c-PJLV-fHtTAQ-size-small c-PJLV-XwbVw-size-large`)\n\t\texpect(getCssText()).toBe(\n\t\t\t`--sxs{--sxs:4 c-PJLV-fHtTAQ-size-small c-PJLV-XwbVw-size-large}@media{` +\n\t\t\t\t`@media (max-width: 767px){.c-PJLV-fHtTAQ-size-small{font-size:16px}}` +\n\t\t\t\t`@media (min-width: 768px){.c-PJLV-XwbVw-size-large{font-size:24px}}` +\n\t\t\t`}`\n\t\t)\n\n\t\texpect(component({ size: { '@bp1': 'small', '@bp2': 'large' } }).className).toBe(`c-PJLV c-PJLV-fHtTAQ-size-small c-PJLV-XwbVw-size-large`)\n\t\texpect(getCssText()).toBe(\n\t\t\t`--sxs{--sxs:4 c-PJLV-fHtTAQ-size-small c-PJLV-XwbVw-size-large}@media{` +\n\t\t\t\t`@media (max-width: 767px){.c-PJLV-fHtTAQ-size-small{font-size:16px}}` +\n\t\t\t\t`@media (min-width: 768px){.c-PJLV-XwbVw-size-large{font-size:24px}}` +\n\t\t\t`}`\n\t\t)\n\t})\n\n\ttest('Renders a component with a conditional inline variant repeatedly', () => {\n\t\t{\n\t\t\tconst { css, getCssText } = createStitches(config)\n\t\t\tconst component = css({\n\t\t\t\tvariants: {\n\t\t\t\t\tsize: {\n\t\t\t\t\t\tsmall: {\n\t\t\t\t\t\t\tfontSize: '16px',\n\t\t\t\t\t\t},\n\t\t\t\t\t\tlarge: {\n\t\t\t\t\t\t\tfontSize: '24px',\n\t\t\t\t\t\t},\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t})\n\n\t\t\texpect(\n\t\t\t\tcomponent({\n\t\t\t\t\tsize: {\n\t\t\t\t\t\t'@media (width < 768px)': 'small',\n\t\t\t\t\t\t'@media (width >= 768px)': 'large',\n\t\t\t\t\t},\n\t\t\t\t}).className,\n\t\t\t).toBe('c-PJLV c-PJLV-gjWYHE-size-small c-PJLV-fzmUzy-size-large')\n\n\t\t\texpect(getCssText()).toBe(\n\t\t\t\t`--sxs{--sxs:4 c-PJLV-gjWYHE-size-small c-PJLV-fzmUzy-size-large}@media{` +\n\t\t\t\t\t`@media (max-width:767.9375px){.c-PJLV-gjWYHE-size-small{font-size:16px}}` +\n\t\t\t\t\t`@media (min-width:768px){.c-PJLV-fzmUzy-size-large{font-size:24px}}` +\n\t\t\t\t`}`\n\t\t\t)\n\t\t}\n\n\t\t{\n\t\t\tconst { css, getCssText } = createStitches(config)\n\t\t\tconst component = css({\n\t\t\t\tvariants: {\n\t\t\t\t\tsize: {\n\t\t\t\t\t\tlarge: {\n\t\t\t\t\t\t\tfontSize: '24px',\n\t\t\t\t\t\t},\n\t\t\t\t\t\tsmall: {\n\t\t\t\t\t\t\tfontSize: '16px',\n\t\t\t\t\t\t},\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t})\n\n\t\t\texpect(\n\t\t\t\tcomponent({\n\t\t\t\t\tsize: {\n\t\t\t\t\t\t'@media (width < 768px)': 'small',\n\t\t\t\t\t\t'@media (width >= 768px)': 'large',\n\t\t\t\t\t},\n\t\t\t\t}).className,\n\t\t\t).toBe('c-PJLV c-PJLV-gjWYHE-size-small c-PJLV-fzmUzy-size-large')\n\n\t\t\texpect(getCssText()).toBe(\n\t\t\t\t`--sxs{--sxs:4 c-PJLV-gjWYHE-size-small c-PJLV-fzmUzy-size-large}@media{` +\n\t\t\t\t\t`@media (max-width:767.9375px){.c-PJLV-gjWYHE-size-small{font-size:16px}}` +\n\t\t\t\t\t`@media (min-width:768px){.c-PJLV-fzmUzy-size-large{font-size:24px}}` +\n\t\t\t\t`}`\n\t\t\t)\n\t\t}\n\t})\n})\n\ndescribe('Variant pairing types', () => {\n\tconst componentConfigForBooleanVariant = {\n\t\t'--component': true,\n\t\tvariants: {\n\t\t\ttestBoolean: {\n\t\t\t\ttrue: {\n\t\t\t\t\t'--test-boolean': true,\n\t\t\t\t},\n\t\t\t\tfalse: {\n\t\t\t\t\t'--test-boolean': false,\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\ttest('Renders a variant with an inactive string variant', () => {\n\t\tconst { css, getCssText } = createStitches()\n\t\tconst component = css(componentConfigForBooleanVariant)\n\t\tconst rendering = component()\n\n\t\texpect(rendering.className).toBe('c-foEXqW')\n\t\texpect(getCssText()).toBe(`--sxs{--sxs:2 c-foEXqW}@media{` +\n\t\t\t`.c-foEXqW{--component:true}` +\n\t\t`}`)\n\t})\n\n\ttest('Renders a variant with an active string variant', () => {\n\t\tconst { css, getCssText } = createStitches()\n\t\tconst component = css(componentConfigForBooleanVariant)\n\t\tconst rendering = component({ testBoolean: 'true' })\n\n\t\texpect(rendering.className).toBe('c-foEXqW c-foEXqW-iloXEi-testBoolean-true')\n\t\texpect(getCssText()).toBe(\n\t\t\t`--sxs{--sxs:2 c-foEXqW}@media{` +\n\t\t\t\t`.c-foEXqW{--component:true}` +\n\t\t\t`}` +\n\t\t\t`--sxs{--sxs:3 c-foEXqW-iloXEi-testBoolean-true}@media{` +\n\t\t\t\t`.c-foEXqW-iloXEi-testBoolean-true{--test-boolean:true}` +\n\t\t\t`}`\n\t\t)\n\t})\n\n\ttest('Renders a variant with an active boolean variant', () => {\n\t\tconst { css, getCssText } = createStitches()\n\t\tconst component = css(componentConfigForBooleanVariant)\n\t\tconst rendering = component({ testBoolean: true })\n\n\t\texpect(rendering.className).toBe('c-foEXqW c-foEXqW-iloXEi-testBoolean-true')\n\t\texpect(getCssText()).toBe(\n\t\t\t`--sxs{--sxs:2 c-foEXqW}@media{` +\n\t\t\t\t`.c-foEXqW{--component:true}` +\n\t\t\t`}` +\n\t\t\t`--sxs{--sxs:3 c-foEXqW-iloXEi-testBoolean-true}@media{` +\n\t\t\t\t`.c-foEXqW-iloXEi-testBoolean-true{--test-boolean:true}` +\n\t\t\t`}`\n\t\t)\n\t})\n\n\ttest('Renders a variant with an active responsive string variant', () => {\n\t\tconst { css, getCssText } = createStitches()\n\t\tconst component = css(componentConfigForBooleanVariant)\n\t\tconst rendering = component({ testBoolean: { '@media (min-width: 640px)': 'true' } })\n\n\t\texpect(rendering.className).toBe('c-foEXqW c-foEXqW-brOaTK-testBoolean-true')\n\t\texpect(getCssText()).toBe(\n\t\t\t`--sxs{--sxs:2 c-foEXqW}@media{` +\n\t\t\t\t`.c-foEXqW{--component:true}` +\n\t\t\t`}` +\n\t\t\t`--sxs{--sxs:4 c-foEXqW-brOaTK-testBoolean-true}@media{` +\n\t\t\t\t`@media (min-width: 640px){` +\n\t\t\t\t\t`.c-foEXqW-brOaTK-testBoolean-true{--test-boolean:true}` +\n\t\t\t\t`}` +\n\t\t\t`}`\n\t\t)\n\t})\n\n\ttest('Renders a variant with an active responsive boolean variant', () => {\n\t\tconst { css, getCssText } = createStitches()\n\t\tconst component = css(componentConfigForBooleanVariant)\n\t\tconst rendering = component({ testBoolean: { '@media (min-width: 640px)': true } })\n\n\t\texpect(rendering.className).toBe('c-foEXqW c-foEXqW-brOaTK-testBoolean-true')\n\t\texpect(getCssText()).toBe(\n\t\t\t`--sxs{--sxs:2 c-foEXqW}@media{` +\n\t\t\t\t`.c-foEXqW{--component:true}` +\n\t\t\t`}` +\n\t\t\t`--sxs{--sxs:4 c-foEXqW-brOaTK-testBoolean-true}@media{` +\n\t\t\t\t`@media (min-width: 640px){` +\n\t\t\t\t\t`.c-foEXqW-brOaTK-testBoolean-true{--test-boolean:true}` +\n\t\t\t\t`}` +\n\t\t\t`}`\n\t\t)\n\t})\n})\n" }, { "path": "packages/core/tests/global-atrules.js", "content": "import { createStitches } from '../src/index.js'\n\ndescribe('Support @import', () => {\n\ttest('Authors can define an @import rule', () => {\n\t\tconst { globalCss, getCssText } = createStitches()\n\n\t\tconst importURL = `https://unpkg.com/sanitize.css@12.0.1/sanitize.css`\n\n\t\tglobalCss({\n\t\t\t'@import': `\"${importURL}\"`,\n\t\t})()\n\n\t\texpect(getCssText()).toBe(`@import \"${importURL}\";`)\n\t})\n\n\ttest('Authors can define multiple @import rules', () => {\n\t\tconst { globalCss, getCssText } = createStitches()\n\n\t\tconst importURL1 = `https://unpkg.com/sanitize.css@12.0.1/sanitize.css`\n\t\tconst importURL2 = `https://unpkg.com/sanitize.css@12.0.1/typography.css`\n\n\t\tglobalCss({\n\t\t\t'@import': [`\"${importURL1}\"`, `\"${importURL2}\"`],\n\t\t})()\n\n\t\texpect(getCssText()).toBe(`@import \"${importURL1}\";@import \"${importURL2}\";`)\n\t})\n\n\ttest('Authors can an @import rule without quotes', () => {\n\t\tconst { globalCss, getCssText } = createStitches()\n\n\t\tconst importURL = `https://unpkg.com/sanitize.css@12.0.1/sanitize.css`\n\n\t\tglobalCss({\n\t\t\t'@import': importURL,\n\t\t})()\n\n\t\texpect(getCssText()).toBe(`@import \"${importURL}\";`)\n\t})\n})\n\ndescribe('Support @font-face', () => {\n\ttest('Authors can define a @font-face rule', () => {\n\t\tconst { globalCss, getCssText } = createStitches()\n\n\t\tglobalCss({\n\t\t\t'@font-face': {\n\t\t\t\tfontFamily: 'system-ui',\n\t\t\t\tfontStyle: 'normal',\n\t\t\t\tfontWeight: 400,\n\t\t\t\tsrc: [\n\t\t\t\t\t`local(\".SFNS-Regular\")`,\n\t\t\t\t\t`local(\".SFNSText-Regular\")`,\n\t\t\t\t\t`local(\".HelveticaNeueDeskInterface-Regular\")`,\n\t\t\t\t\t`local(\".LucidaGrandeUI\")`,\n\t\t\t\t\t`local(\"Segoe UI\")`,\n\t\t\t\t\t`local(\"Ubuntu\")`,\n\t\t\t\t\t`local(\"Roboto-Regular\")`,\n\t\t\t\t\t`local(\"DroidSans\")`,\n\t\t\t\t\t`local(\"Tahoma\")`,\n\t\t\t\t],\n\t\t\t},\n\t\t})()\n\n\t\texpect(getCssText()).toBe(\n\t\t\t`--sxs{--sxs:1 PCbjJ}` +\n\t\t\t`@media{` +\n\t\t\t\t`@font-face{` +\n\t\t\t\t\t`font-family:system-ui;` +\n\t\t\t\t\t`font-style:normal;` +\n\t\t\t\t\t`font-weight:400;` +\n\t\t\t\t\t`src:local(\".SFNS-Regular\"),local(\".SFNSText-Regular\"),local(\".HelveticaNeueDeskInterface-Regular\"),local(\".LucidaGrandeUI\"),local(\"Segoe UI\"),local(\"Ubuntu\"),local(\"Roboto-Regular\"),local(\"DroidSans\"),local(\"Tahoma\")` +\n\t\t\t\t`}` +\n\t\t\t`}`,\n\t\t)\n\t})\n\n\ttest('Authors can define multiple @font-face rules', () => {\n\t\tconst { globalCss, getCssText } = createStitches()\n\n\t\tglobalCss({\n\t\t\t'@font-face': [\n\t\t\t\t{\n\t\t\t\t\tfontFamily: 'system-ui',\n\t\t\t\t\tfontStyle: 'normal',\n\t\t\t\t\tfontWeight: 400,\n\t\t\t\t\tsrc: [\n\t\t\t\t\t\t`local(\".SFNS-Regular\")`,\n\t\t\t\t\t\t`local(\".SFNSText-Regular\")`,\n\t\t\t\t\t\t`local(\".HelveticaNeueDeskInterface-Regular\")`,\n\t\t\t\t\t\t`local(\".LucidaGrandeUI\")`,\n\t\t\t\t\t\t`local(\"Segoe UI\")`,\n\t\t\t\t\t\t`local(\"Ubuntu\")`,\n\t\t\t\t\t\t`local(\"Roboto-Regular\")`,\n\t\t\t\t\t\t`local(\"DroidSans\")`,\n\t\t\t\t\t\t`local(\"Tahoma\")`,\n\t\t\t\t\t],\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tfontFamily: 'system-ui',\n\t\t\t\t\tfontStyle: 'italic',\n\t\t\t\t\tfontWeight: 400,\n\t\t\t\t\tsrc: [\n\t\t\t\t\t\t`local(\".SFNS-Italic\")`,\n\t\t\t\t\t\t`local(\".SFNSText-Italic\")`,\n\t\t\t\t\t\t`local(\".HelveticaNeueDeskInterface-Italic\")`,\n\t\t\t\t\t\t`local(\".LucidaGrandeUI\")`,\n\t\t\t\t\t\t`local(\"Segoe UI Italic\")`,\n\t\t\t\t\t\t`local(\"Ubuntu Italic\")`,\n\t\t\t\t\t\t`local(\"Roboto-Italic\")`,\n\t\t\t\t\t\t`local(\"DroidSans\")`,\n\t\t\t\t\t\t`local(\"Tahoma\")`,\n\t\t\t\t\t],\n\t\t\t\t},\n\t\t\t],\n\t\t})()\n\n\t\texpect(getCssText()).toBe(\n\t\t\t`--sxs{--sxs:1 JJHhj}` +\n\t\t\t`@media{` +\n\t\t\t\t`@font-face{` +\n\t\t\t\t\t`font-family:system-ui;` +\n\t\t\t\t\t`font-style:normal;` +\n\t\t\t\t\t`font-weight:400;` +\n\t\t\t\t\t`src:local(\".SFNS-Regular\"),local(\".SFNSText-Regular\"),local(\".HelveticaNeueDeskInterface-Regular\"),local(\".LucidaGrandeUI\"),local(\"Segoe UI\"),local(\"Ubuntu\"),local(\"Roboto-Regular\"),local(\"DroidSans\"),local(\"Tahoma\")` +\n\t\t\t\t`}` +\n\n\t\t\t\t`@font-face{` +\n\t\t\t\t\t`font-family:system-ui;` +\n\t\t\t\t\t`font-style:italic;` +\n\t\t\t\t\t`font-weight:400;` +\n\t\t\t\t\t`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\")` +\n\t\t\t\t`}` +\n\t\t\t`}`\n\t\t)\n\t})\n})\n" }, { "path": "packages/core/tests/issue-450.js", "content": "import { createStitches } from '../src/index.js'\n\ndescribe('Issue #450', () => {\n\ttest('Basic Tests', () => {\n\t\tconst getFreshComponents = () => {\n\t\t\tconst { css, getCssText } = createStitches()\n\n\t\t\tconst component1 = css({\n\t\t\t\tvariants: {\n\t\t\t\t\tcolor: {\n\t\t\t\t\t\tred: {\n\t\t\t\t\t\t\tcolor: 'red',\n\t\t\t\t\t\t},\n\t\t\t\t\t\tblue: {\n\t\t\t\t\t\t\tcolor: 'blue',\n\t\t\t\t\t\t},\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t\tdefaultVariants: {\n\t\t\t\t\tcolor: 'red',\n\t\t\t\t},\n\t\t\t});\n\n\t\t\tconst component2 = css(component1, {\n\t\t\t\tvariants: {\n\t\t\t\t\tcolor: {\n\t\t\t\t\t\torange: {\n\t\t\t\t\t\t\tcolor: 'orange',\n\t\t\t\t\t\t},\n\t\t\t\t\t},\n\t\t\t\t},\n\n\t\t\t\tdefaultVariants: {\n\t\t\t\t\tcolor: 'orange',\n\t\t\t\t},\n\t\t\t});\n\n\t\t\tconst component3 = css(component2, {\n\t\t\t\tvariants: {\n\t\t\t\t\tcolor: {\n\t\t\t\t\t\tpurple: {\n\t\t\t\t\t\t\tcolor: 'rebeccapurple',\n\t\t\t\t\t\t},\n\t\t\t\t\t},\n\t\t\t\t},\n\n\t\t\t\tdefaultVariants: {\n\t\t\t\t\tcolor: 'purple',\n\t\t\t\t},\n\t\t\t})\n\n\t\t\treturn { component1, component2, component3, getCssText }\n\t\t}\n\n\t\ttest('Render component1() as red, inherited from defaultVariants', () => {\n\t\t\tconst { component1, getCssText } = getFreshComponents()\n\t\t\tconst render = component1()\n\t\t\texpect(render.className).toBe(`c-PJLV c-PJLV-gmqXFB-color-red`)\n\t\t\texpect(getCssText()).toBe(`--sxs{--sxs:3 c-PJLV-gmqXFB-color-red}@media{.c-PJLV-gmqXFB-color-red{color:red}}`)\n\t\t})\n\n\t\ttest('Render component1({ color: \"blue\" }) as blue, assigned from props', () => {\n\t\t\tconst { component1, getCssText } = getFreshComponents()\n\t\t\tconst render = component1({ color: 'blue' })\n\t\t\texpect(render.className).toBe(`c-PJLV c-PJLV-kydkiA-color-blue`)\n\t\t\texpect(getCssText()).toBe(`--sxs{--sxs:3 c-PJLV-kydkiA-color-blue}@media{.c-PJLV-kydkiA-color-blue{color:blue}}`)\n\t\t})\n\n\t\ttest('Render component1({ color: \"red\" }) as red, assigned from props', () => {\n\t\t\tconst { component1, getCssText } = getFreshComponents()\n\t\t\tconst render = component1({ color: 'red' })\n\t\t\texpect(render.className).toBe(`c-PJLV c-PJLV-gmqXFB-color-red`)\n\t\t\texpect(getCssText()).toBe(`--sxs{--sxs:3 c-PJLV-gmqXFB-color-red}@media{.c-PJLV-gmqXFB-color-red{color:red}}`)\n\t\t})\n\n\t\ttest('Render component1({ color: { \"@media (width >= 640px)\": \"blue\" } }) as red then blue, inherited from defaultVariants, assigned from props', () => {\n\t\t\tconst { component1, getCssText } = getFreshComponents()\n\t\t\tconst render = component1({ color: { '@media (min-width: 640px)': 'blue' } })\n\t\t\texpect(render.className).toBe(`c-PJLV c-PJLV-gmqXFB-color-red c-PJLV-bBevdw-color-blue`)\n\t\t\texpect(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}}}`)\n\t\t})\n\n\t\ttest('Render component2() as orange, inherited from defaultVariants', () => {\n\t\t\tconst { component2, getCssText } = getFreshComponents()\n\t\t\tconst render = component2()\n\n\t\t\texpect(render.className).toBe(`c-PJLV c-PJLV-vMTTG-color-orange`)\n\t\t\texpect(getCssText()).toBe(`--sxs{--sxs:3 c-PJLV-vMTTG-color-orange}@media{.c-PJLV-vMTTG-color-orange{color:orange}}`)\n\t\t})\n\n\t\ttest('Render component2({ color: { \"@media (width >= 640px)\": \"blue\" } }) as orange then blue, inherited from defaultVariants, assigned from props', () => {\n\t\t\tconst { component2, getCssText } = getFreshComponents()\n\t\t\tconst render = component2({ color: { '@media (min-width: 640px)': 'blue' } })\n\t\t\texpect(render.className).toBe(`c-PJLV c-PJLV-bBevdw-color-blue c-PJLV-vMTTG-color-orange`)\n\t\t\texpect(getCssText()).toBe(\n\t\t\t\t`--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}}` + `}`,\n\t\t\t)\n\t\t})\n\t})\n\n\ttest('Basic Tests ported from the React version', () => {\n\t\tconst getFreshComponents = () => {\n\t\t\tconst { css, getCssText } = createStitches()\n\n\t\t\tconst component1 = css({\n\t\t\t\t'--component': 1,\n\n\t\t\t\tvariants: {\n\t\t\t\t\tappearance: {\n\t\t\t\t\t\tprimary: {},\n\t\t\t\t\t\tsecondary: { '--appearance': 'secondary' },\n\t\t\t\t\t},\n\t\t\t\t\tcolor: {\n\t\t\t\t\t\tred: {},\n\t\t\t\t\t\tpurple: { '--color': 'purple' },\n\t\t\t\t\t\tlightBlue: { '--color': 'lightBlue' },\n\t\t\t\t\t},\n\t\t\t\t},\n\n\t\t\t\tcompoundVariants: [\n\t\t\t\t\t{\n\t\t\t\t\t\tappearance: 'secondary',\n\t\t\t\t\t\tcolor: 'lightBlue',\n\t\t\t\t\t\tcss: {\n\t\t\t\t\t\t\t'--compound': 'appearance secondary / color lightBlue',\n\t\t\t\t\t\t},\n\t\t\t\t\t},\n\t\t\t\t],\n\n\t\t\t\tdefaultVariants: {\n\t\t\t\t\tappearance: 'primary',\n\t\t\t\t\tcolor: 'red',\n\t\t\t\t},\n\t\t\t})\n\n\t\t\tconst component2 = css(component1, {\n\t\t\t\t'--component': 2,\n\n\t\t\t\t'defaultVariants': {\n\t\t\t\t\tappearance: 'secondary',\n\t\t\t\t\tcolor: 'lightBlue',\n\t\t\t\t},\n\t\t\t})\n\n\t\t\treturn { component1, component2, getCssText }\n\t\t}\n\n\t\ttest('Render component1()', () => {\n\t\t\tconst { component1, getCssText } = getFreshComponents()\n\t\t\tconst render = component1()\n\t\t\texpect(render.className).toBe(`c-jyxqjt`)\n\t\t\texpect(getCssText()).toBe(`--sxs{--sxs:2 c-jyxqjt}@media{.c-jyxqjt{--component:1}}`)\n\t\t})\n\n\t\ttest('Render component1({ color: \"lightBlue\" })', () => {\n\t\t\tconst { component1, getCssText } = getFreshComponents()\n\t\t\tconst render = component1({ color: 'lightBlue' })\n\t\t\texpect(render.className).toBe(`c-jyxqjt c-jyxqjt-ilDyRi-color-lightBlue`)\n\t\t\texpect(getCssText()).toBe(\n\t\t\t\t`--sxs{--sxs:2 c-jyxqjt}@media{` +\n\t\t\t\t\t`.c-jyxqjt{--component:1}` +\n\t\t\t\t`}` +\n\t\t\t\t`--sxs{--sxs:3 c-jyxqjt-ilDyRi-color-lightBlue}@media{` +\n\t\t\t\t\t`.c-jyxqjt-ilDyRi-color-lightBlue{--color:lightBlue}` +\n\t\t\t\t`}`\n\t\t\t)\n\t\t})\n\n\t\ttest('Render component1({ appearance: \"secondary\" })', () => {\n\t\t\tconst { component1, getCssText } = getFreshComponents()\n\t\t\tconst render = component1({ appearance: 'secondary' })\n\t\t\texpect(render.className).toBe(`c-jyxqjt c-jyxqjt-cOChOn-appearance-secondary`)\n\t\t\texpect(getCssText()).toBe(\n\t\t\t\t`--sxs{--sxs:2 c-jyxqjt}@media{` +\n\t\t\t\t\t`.c-jyxqjt{--component:1}` +\n\t\t\t\t`}` +\n\t\t\t\t`--sxs{--sxs:3 c-jyxqjt-cOChOn-appearance-secondary}@media{` +\n\t\t\t\t\t`.c-jyxqjt-cOChOn-appearance-secondary{--appearance:secondary}` +\n\t\t\t\t`}`\n\t\t\t)\n\t\t})\n\n\t\ttest('Render component1({ appearance: \"secondary\", color: \"lightBlue\" })', () => {\n\t\t\tconst { component1, getCssText } = getFreshComponents()\n\t\t\tconst render = component1({ appearance: 'secondary', color: 'lightBlue' })\n\t\t\texpect(render.className).toBe(`c-jyxqjt c-jyxqjt-cOChOn-appearance-secondary c-jyxqjt-ilDyRi-color-lightBlue c-jyxqjt-gYqlvA-cv`)\n\t\t\texpect(getCssText()).toBe(\n\t\t\t\t`--sxs{--sxs:2 c-jyxqjt}@media{` +\n\t\t\t\t\t`.c-jyxqjt{--component:1}` +\n\t\t\t\t\t`}` +\n\t\t\t\t\t`--sxs{--sxs:3 c-jyxqjt-cOChOn-appearance-secondary c-jyxqjt-ilDyRi-color-lightBlue}@media{` +\n\t\t\t\t\t`.c-jyxqjt-cOChOn-appearance-secondary{--appearance:secondary}` +\n\t\t\t\t\t`.c-jyxqjt-ilDyRi-color-lightBlue{--color:lightBlue}` +\n\t\t\t\t\t`}` +\n\t\t\t\t\t`--sxs{--sxs:5 c-jyxqjt-gYqlvA-cv}@media{` +\n\t\t\t\t\t`.c-jyxqjt-gYqlvA-cv{--compound:appearance secondary / color lightBlue}` +\n\t\t\t\t\t`}`,\n\t\t\t)\n\t\t})\n\n\t\ttest('Render component2()', () => {\n\t\t\tconst { component2, getCssText } = getFreshComponents()\n\t\t\tconst render = component2()\n\t\t\texpect(render.className).toBe(`c-jyxqjt c-dkRcuu c-jyxqjt-cOChOn-appearance-secondary c-jyxqjt-ilDyRi-color-lightBlue c-jyxqjt-gYqlvA-cv`)\n\t\t\texpect(getCssText()).toBe(\n\t\t\t\t`--sxs{--sxs:2 c-jyxqjt c-dkRcuu}@media{` +\n\t\t\t\t\t`.c-jyxqjt{--component:1}` +\n\t\t\t\t\t`.c-dkRcuu{--component:2}` +\n\t\t\t\t\t`}` +\n\t\t\t\t\t`--sxs{--sxs:3 c-jyxqjt-cOChOn-appearance-secondary c-jyxqjt-ilDyRi-color-lightBlue}@media{` +\n\t\t\t\t\t`.c-jyxqjt-cOChOn-appearance-secondary{--appearance:secondary}` +\n\t\t\t\t\t`.c-jyxqjt-ilDyRi-color-lightBlue{--color:lightBlue}` +\n\t\t\t\t\t`}` +\n\t\t\t\t\t`--sxs{--sxs:5 c-jyxqjt-gYqlvA-cv}@media{` +\n\t\t\t\t\t`.c-jyxqjt-gYqlvA-cv{--compound:appearance secondary / color lightBlue}` +\n\t\t\t\t\t`}`,\n\t\t\t)\n\t\t})\n\n\t\ttest('Render component2({ appearance: \"secondary\", color: \"lightBlue\" })', () => {\n\t\t\tconst { component2, getCssText } = getFreshComponents()\n\t\t\tconst render = component2({ appearance: 'secondary', color: 'lightBlue' })\n\t\t\texpect(render.className).toBe(`c-jyxqjt c-dkRcuu c-jyxqjt-cOChOn-appearance-secondary c-jyxqjt-ilDyRi-color-lightBlue c-jyxqjt-gYqlvA-cv`)\n\t\t\texpect(getCssText()).toBe(\n\t\t\t\t`--sxs{--sxs:2 c-jyxqjt c-dkRcuu}@media{` +\n\t\t\t\t\t`.c-jyxqjt{--component:1}` +\n\t\t\t\t\t`.c-dkRcuu{--component:2}` +\n\t\t\t\t\t`}` +\n\t\t\t\t\t`--sxs{--sxs:3 c-jyxqjt-cOChOn-appearance-secondary c-jyxqjt-ilDyRi-color-lightBlue}@media{` +\n\t\t\t\t\t`.c-jyxqjt-cOChOn-appearance-secondary{--appearance:secondary}` +\n\t\t\t\t\t`.c-jyxqjt-ilDyRi-color-lightBlue{--color:lightBlue}` +\n\t\t\t\t\t`}` +\n\t\t\t\t\t`--sxs{--sxs:5 c-jyxqjt-gYqlvA-cv}@media{` +\n\t\t\t\t\t`.c-jyxqjt-gYqlvA-cv{--compound:appearance secondary / color lightBlue}` +\n\t\t\t\t\t`}`,\n\t\t\t)\n\t\t})\n\t})\n})\n" }, { "path": "packages/core/tests/issue-492.js", "content": "import { createStitches } from '../src/index.js'\n\ndescribe('Issue #492', () => {\n\ttest('Conditionally apply default variants as the @initial value', () => {\n\t\tconst { css, getCssText } = createStitches()\n\n\t\tconst component = css({\n\t\t\tvariants: {\n\t\t\t\tsweet: {\n\t\t\t\t\tcaroline: {\n\t\t\t\t\t\t'--sweet-caroline': true,\n\t\t\t\t\t},\n\t\t\t\t\tdreams: {\n\t\t\t\t\t\t'--sweet-dreams': true,\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t},\n\n\t\t\tdefaultVariants: {\n\t\t\t\tsweet: 'caroline',\n\t\t\t},\n\t\t})\n\n\t\tconst componentClassName = `c-PJLV`\n\t\tconst variantSweetCarolineClassName = `c-PJLV-bVaDOZ-sweet-caroline`\n\t\tconst variantSweetDreamsClassName = `c-PJLV-loBWDA-sweet-dreams`\n\t\tconst variantResponsiveSweetCarolineClassName = `c-PJLV-iuHgfx-sweet-caroline`\n\t\tconst variantResponsiveSweetDreamsClassName = `c-PJLV-cNdtIU-sweet-dreams`\n\n\t\t/** Rendering of the component as-is. */\n\t\tconst rendering1 = component()\n\n\t\texpect(\n\t\t\trendering1.className\n\t\t).toBe(\n\t\t\t`${componentClassName} ${variantSweetCarolineClassName}`\n\t\t)\n\n\t\texpect(\n\t\t\tgetCssText()\n\t\t).toBe(\n\t\t\t`--sxs{--sxs:3 ${variantSweetCarolineClassName}}@media{` +\n\t\t\t\t`.${variantSweetCarolineClassName}{--sweet-caroline:true}` +\n\t\t\t`}`\n\t\t)\n\n\t\t/** Rendering of the component as-is. */\n\t\tconst rendering2 = component({\n\t\t\tsweet: {\n\t\t\t\t'@media (min-width: 640px)': 'dreams',\n\t\t\t},\n\t\t})\n\n\t\texpect(\n\t\t\trendering2.className\n\t\t).toBe(\n\t\t\t`${componentClassName} ${variantSweetCarolineClassName} ${variantResponsiveSweetDreamsClassName}`\n\t\t)\n\n\t\texpect(getCssText()).toBe(\n\t\t\t`--sxs{--sxs:3 ${variantSweetCarolineClassName}}` +\n\t\t\t\t`@media{.${variantSweetCarolineClassName}{--sweet-caroline:true}}` +\n\t\t\t\t`--sxs{--sxs:4 ${variantResponsiveSweetDreamsClassName}}@media{` +\n\t\t\t\t`@media (min-width: 640px){.${variantResponsiveSweetDreamsClassName}{--sweet-dreams:true}}` +\n\t\t\t\t`}`,\n\t\t)\n\n\t\t/** Rendering of the component as-is. */\n\t\tconst rendering3 = component({\n\t\t\tsweet: {\n\t\t\t\t'@media (min-width: 640px)': 'caroline',\n\t\t\t\t'@initial': 'dreams',\n\t\t\t},\n\t\t})\n\n\t\texpect(rendering3.className).toBe(`${componentClassName} ${variantSweetDreamsClassName} ${variantResponsiveSweetCarolineClassName}`)\n\n\t\texpect(getCssText()).toBe(\n\t\t\t\t// initial variants\n\t\t\t\t`--sxs{--sxs:3 ${variantSweetCarolineClassName} ${variantSweetDreamsClassName}}` +\n\t\t\t\t`@media{.${variantSweetCarolineClassName}{--sweet-caroline:true}.${variantSweetDreamsClassName}{--sweet-dreams:true}}` +\n\t\t\t\t// responsive variants\n\t\t\t\t`--sxs{--sxs:4 ${variantResponsiveSweetDreamsClassName} ${variantResponsiveSweetCarolineClassName}}@media{` +\n\t\t\t\t`@media (min-width: 640px){.${variantResponsiveSweetDreamsClassName}{--sweet-dreams:true}}` +\n\t\t\t\t`@media (min-width: 640px){.${variantResponsiveSweetCarolineClassName}{--sweet-caroline:true}}` +\n\t\t\t\t`}`,\n\t\t)\n\t})\n\n\ttest('Apply apply @initial styles first', () => {\n\t\tconst { css, getCssText } = createStitches()\n\n\t\tconst component = css({\n\t\t\t'--rock': true,\n\t\t\tvariants: {\n\t\t\t\theavy: {\n\t\t\t\t\t'iron-butterfly': {\n\t\t\t\t\t\t'--weight-iron-butterfly': true,\n\t\t\t\t\t},\n\t\t\t\t\t'led-zeppelin': {\n\t\t\t\t\t\t'--weight-led-zeppelin': true,\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t},\n\t\t})\n\n\t\t/** Rendering of the component as-is. */\n\t\tconst rendering1 = component({\n\t\t\theavy: {\n\t\t\t\t'@media (min-width: 640px)': 'led-zeppelin',\n\t\t\t\t'@initial': 'iron-butterfly',\n\t\t\t},\n\t\t})\n\n\t\tconst componentClassName = `c-evVBJo`\n\t\tconst variantInitialHeavyIronButterfly = `c-evVBJo-kiVNrc-heavy-iron-butterfly`\n\t\tconst variantMinWidth640LedZeppelin = `c-evVBJo-lgYcvN-heavy-led-zeppelin`\n\n\t\texpect(\n\t\t\trendering1.className\n\t\t).toBe(\n\t\t\t`${componentClassName} ${variantInitialHeavyIronButterfly} ${variantMinWidth640LedZeppelin}`\n\t\t)\n\n\t\texpect(\n\t\t\tgetCssText()\n\t\t).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}}}')\n\t})\n})\n" }, { "path": "packages/core/tests/issue-652.js", "content": "import { createStitches } from '../src/index.js'\n\ndescribe('Issue #652', () => {\n\ttest('Applying both variants from the one default variant', () => {\n\t\tconst { css } = createStitches()\n\n\t\tconst component1 = css({\n\t\t\tvariants: {\n\t\t\t\thue: {\n\t\t\t\t\tprimary: {\n\t\t\t\t\t\tcolor: 'red',\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t},\n\t\t\tdefaultVariants: {\n\t\t\t\thue: 'primary',\n\t\t\t},\n\t\t})\n\n\t\tconst component2 = css(component1, {\n\t\t\tvariants: {\n\t\t\t\thue: {\n\t\t\t\t\tprimary: {\n\t\t\t\t\t\tcolor: 'blue',\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t},\n\t\t})\n\n\t\tconst expression2 = component2()\n\n\t\texpect(expression2.className).toBe(`c-PJLV c-PJLV-gmqXFB-hue-primary c-PJLV-kydkiA-hue-primary`)\n\t})\n})\n" }, { "path": "packages/core/tests/issue-655.js", "content": "import { createStitches } from '../src/index.js'\n\ndescribe('Issue #655', () => {\n\ttest('Applying both variants from the one default variant', () => {\n\t\tconst { css, getCssText } = createStitches()\n\n\t\tcss({\n\t\t\tmaxWidth: 'fit-content',\n\t\t\tminWidth: 'fit-content',\n\t\t})()\n\n\t\texpect(getCssText()).toBe(\n\t\t\t`--sxs{--sxs:2 c-dAAqmb}` +\n\t\t\t`@media{.c-dAAqmb{` +\n\t\t\t\t`max-width:-moz-fit-content;max-width:fit-content;` +\n\t\t\t\t`min-width:-moz-fit-content;min-width:fit-content` +\n\t\t\t`}}`\n\t\t)\n\t})\n})\n" }, { "path": "packages/core/tests/issue-725.js", "content": "import { createStitches } from '../src/index.js'\n\ndescribe('Issue #725', () => {\n\ttest('Minimum reproduction of bug', () => {\n\t\tconst { css, getCssText } = createStitches({\n\t\t\tmedia: {\n\t\t\t\ttablet: `(min-width: 720px)`,\n\t\t\t\twide: `(min-width: 1536px)`,\n\t\t\t},\n\t\t})\n\n\t\tconst Flex = css({\n\t\t\tvariants: {\n\t\t\t\tjustify: {\n\t\t\t\t\tend: { justifyContent: 'flex-end' },\n\t\t\t\t},\n\t\t\t},\n\t\t})\n\t\tFlex({\n\t\t\tjustify: {\n\t\t\t\t'@tablet': 'end',\n\t\t\t\t'@wide': 'end',\n\t\t\t},\n\t\t})\n\t\texpect(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}}}`)\n\t})\n\n\ttest('Combination with other variants', () => {\n\t\tconst { css, getCssText } = createStitches({\n\t\t\tmedia: {\n\t\t\t\tmobile: `(min-width: 420px)`,\n\t\t\t\ttablet: `(min-width: 720px)`,\n\t\t\t\twide: `(min-width: 1536px)`,\n\t\t\t},\n\t\t})\n\n\t\tconst Flex = css({\n\t\t\tvariants: {\n\t\t\t\tjustify: {\n\t\t\t\t\tend: { justifyContent: 'flex-end' },\n\t\t\t\t\tstart: { justifyContent: 'flex-start' },\n\t\t\t\t},\n\t\t\t\tcolor: {\n\t\t\t\t\tred: { color: 'red' },\n\t\t\t\t},\n\t\t\t},\n\t\t\tdefaultVariants: {\n\t\t\t\tcolor: 'red',\n\t\t\t},\n\t\t})\n\t\tFlex({\n\t\t\tjustify: {\n\t\t\t\t'@tablet': 'end',\n\t\t\t\t'@wide': 'end',\n\t\t\t\t'@mobile': 'start',\n\t\t\t},\n\t\t})\n\t\texpect(getCssText()).toBe(\n\t\t\t`--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}}}`,\n\t\t)\n\t})\n\ttest('Test compound variants', () => {\n\t\tconst { css, getCssText } = createStitches({\n\t\t\tmedia: {\n\t\t\t\tbp1: `(min-width: 720px)`,\n\t\t\t\tbp2: `(min-width: 1536px)`,\n\t\t\t},\n\t\t})\n\n\t\tconst Button = css({\n\t\t\tvariants: {\n\t\t\t\tvariant: {\n\t\t\t\t\tred: { backgroundColor: 'tomato' },\n\t\t\t\t\tblue: { backgroundColor: 'SkyBlue' },\n\t\t\t\t},\n\t\t\t\tdisabled: {\n\t\t\t\t\ttrue: { backgroundColor: 'gray' },\n\t\t\t\t},\n\t\t\t},\n\t\t\tcompoundVariants: [\n\t\t\t\t{\n\t\t\t\t\tvariant: 'red',\n\t\t\t\t\tdisabled: true,\n\t\t\t\t\tcss: {\n\t\t\t\t\t\tpadding: 50,\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t],\n\t\t})\n\n\t\tButton({\n\t\t\tvariant: { '@bp1': 'red', '@bp2': 'red' },\n\t\t\tdisabled: { '@bp2': true, '@bp1': false },\n\t\t})\n\t\texpect(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}}}}`)\n\t})\n})\n" }, { "path": "packages/core/tests/issue-788.js", "content": "import { createStitches } from '../src/index.js'\n\ndescribe('Issue #788', () => {\n\ttest('Test that a util with the name of a selector works in globalCss', () => {\n\t\tconst { globalCss, getCssText } = createStitches({\n\t\t\tutils: {\n\t\t\t\tp: (value) => ({\n\t\t\t\t\tpaddingTop: value,\n\t\t\t\t\tpaddingBottom: value,\n\t\t\t\t\tpaddingLeft: value,\n\t\t\t\t\tpaddingRight: value,\n\t\t\t\t}),\n\t\t\t},\n\t\t})\n\n\t\tglobalCss({\n\t\t\tp: {\n\t\t\t\tcolor: 'red',\n\t\t\t}\n\t\t})()\n\n\t\texpect(getCssText()).toBe(\n\t\t\t`--sxs{--sxs:1 gllaiB}` +\n\t\t\t`@media{p{` +\n\t\t\t\t`color:red` +\n\t\t\t`}}`\n\t\t)\n\t})\n\n\ttest('Test that a util with the name of a selector works in a component', () => {\n\t\tconst { css, getCssText } = createStitches({\n\t\t\tutils: {\n\t\t\t\tp: (value) => ({\n\t\t\t\t\tpaddingTop: value,\n\t\t\t\t\tpaddingBottom: value,\n\t\t\t\t\tpaddingLeft: value,\n\t\t\t\t\tpaddingRight: value,\n\t\t\t\t}),\n\t\t\t},\n\t\t})\n\n\t\tcss({\n\t\t\tp: 10\n\t\t})()\n\n\t\texpect(getCssText()).toBe(\n\t\t\t`--sxs{--sxs:2 c-csWWxC}` +\n\t\t\t`@media{.c-csWWxC{` +\n\t\t\t\t`padding-top:10px;` +\n\t\t\t\t`padding-bottom:10px;` +\n\t\t\t\t`padding-left:10px;` +\n\t\t\t\t`padding-right:10px` +\n\t\t\t`}}`\n\t\t)\n\t})\n})\n" }, { "path": "packages/core/tests/issue-908.js", "content": "import { createStitches } from '../src/index.js'\n\nconst styleRule = `--sxs { --sxs:1 lTyTw fJmROo; }`;\nconst mediaRule = `@media { body { margin: auto; }`;\n\nconst createStylesheet = (...preloadedStyles) => {\n\tlet rules = [];\n\tconst insertRule = (rule, index = rules.length) => {\n\t\tif (rule.startsWith('--sxs')) {\n\t\t\trules.splice(index, 0, {type: 1, cssText: rule});\n\t\t}\n\t\tif (rule.startsWith('@media')) {\n\t\t\trules.splice(index, 0, {type: 4, cssText: rule, cssRules: []});\n\t\t}\n\t};\n\tpreloadedStyles.forEach(insertRule);\n\treturn {\n\t\tinsertRule,\n\t\tcssRules: rules\n\t};\n}\n\ndescribe('Issue #908', () => {\n\ttest('Getting hydratable stylesheet', () => {\n\t\tconst { getCssText } = createStitches({\n\t\t\troot: {\n\t\t\t\tstyleSheets: [createStylesheet(styleRule, mediaRule)]\n\t\t\t}\n\t\t});\n\n\t\texpect(getCssText()).toBe(mediaRule)\n\t})\n})\n" }, { "path": "packages/core/tests/issue-921.ts", "content": "import { createStitches, PropertyValue, CSS } from '../types/index'\n\nconst config = {\n\tutils: {\n\t\tbackground: (value: boolean | PropertyValue<'background'>) => {\n\t\t\tif (typeof value === 'boolean') {\n\t\t\t\treturn value ? {\n\t\t\t\t\tbackground: 'red'\n\t\t\t\t} : {}\n\t\t\t} else {\n\t\t\t\treturn {\n\t\t\t\t\tbackground: value\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t},\n}\n\nconst { css, globalCss } = createStitches(config)\n\nglobalCss({\n\thtml: {\n\t\tbackground: true\n\t},\n\tbody: {\n\t\tbackground: 'green'\n\t},\n})\n\nconst Component = css({\n\tbackground: true,\n\t'> *': {\n\t\tbackground: 'green'\n\t}\n})\n\nComponent({\n\tbackground: 'green',\n\t'> *': {\n\t\tbackground: true\n\t}\n})\n\ncss(Component, {\n\tbackground: 'green'\n})\n\ncss(Component, {\n\tbackground: true\n})\n\nconst style: CSS = {\n\t// @ts-expect-error\n\tbackground: true\n}\n\nconst style2: CSS = {\n\tbackground: true\n}\n\nconst style3: CSS = {\n\tbackground: 'green'\n}\n" }, { "path": "packages/core/tests/issue-943.js", "content": "import { createStitches } from '../src/index.js'\n\ndescribe('Issue #943', () => {\n\ttest('@font-face descriptors', () => {\n\t\tconst { globalCss, getCssText } = createStitches()\n\n\t\tglobalCss({\n\t\t\t'@font-face': [\n\t\t\t\t{\n\t\t\t\t\tfontFamily: 'fallback-font',\n\t\t\t\t\tascentOverride: '83.6%',\n\t\t\t\t\tdescentOverride: '20.5%',\n\t\t\t\t\tlineGapOverride: '0%',\n\t\t\t\t\tadvanceOverride: '10',\n\t\t\t\t\tsrc: 'local(Arial)',\n\t\t\t\t}\n\t\t\t]\n\t\t})()\n\n\t\texpect(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)}}')\n\t})\n})\n" }, { "path": "packages/core/tests/issue-999.js", "content": "import { createStitches } from '../src/index.js'\n\ndescribe('Issue #519', () => {\n\ttest('locally scoped token works 1 time', () => {\n\t\tconst { css, getCssText } = createStitches({ prefix: 'fusion' })\n\n\t\tcss({\n\t\t\t$$syntax: 'red',\n\n\t\t\th1: {\n\t\t\t\tcolor: '$$syntax',\n\t\t\t},\n\t\t})()\n\n\t\texpect(getCssText()).toBe(\n\t\t\t`--sxs{--sxs:2 fusion-c-fjkySu}` +\n\t\t\t`@media{` +\n\t\t\t\t`.fusion-c-fjkySu{--fusion--syntax:red}` +\n\t\t\t\t`.fusion-c-fjkySu h1{color:var(--fusion--syntax)}` +\n\t\t\t`}`\n\t\t)\n\t})\n\n\ttest('locally scoped prefix-free token works 1 time', () => {\n\t\tconst { css, getCssText } = createStitches()\n\n\t\tcss({\n\t\t\t$$syntax: 'red',\n\n\t\t\th1: {\n\t\t\t\tcolor: '$$syntax',\n\t\t\t},\n\t\t})()\n\n\t\texpect(getCssText()).toBe(\n\t\t\t`--sxs{--sxs:2 c-fjkySu}` +\n\t\t\t`@media{` +\n\t\t\t\t`.c-fjkySu{---syntax:red}` +\n\t\t\t\t`.c-fjkySu h1{color:var(---syntax)}` +\n\t\t\t`}`\n\t\t)\n\t})\n\n\ttest('locally scoped token works 2 times', () => {\n\t\tconst { css, getCssText } = createStitches({ prefix: 'fusion' })\n\n\t\tcss({\n\t\t\t$$syntax: 'red',\n\n\t\t\th1: {\n\t\t\t\tcolor: '$$syntax',\n\t\t\t},\n\n\t\t\th2: {\n\t\t\t\tcolor: '$$syntax',\n\t\t\t},\n\t\t})()\n\n\t\texpect(getCssText()).toBe(\n\t\t\t`--sxs{--sxs:2 fusion-c-lkpaIy}` +\n\t\t\t`@media{` +\n\t\t\t\t`.fusion-c-lkpaIy{--fusion--syntax:red}` +\n\t\t\t\t`.fusion-c-lkpaIy h1{color:var(--fusion--syntax)}` +\n\t\t\t\t`.fusion-c-lkpaIy h2{color:var(--fusion--syntax)}` +\n\t\t\t`}`\n\t\t)\n\t})\n\n\ttest('locally scoped prefix-free token works 2 times', () => {\n\t\tconst { css, getCssText } = createStitches()\n\n\t\tcss({\n\t\t\t$$syntax: 'red',\n\n\t\t\th1: {\n\t\t\t\tcolor: '$$syntax',\n\t\t\t},\n\n\t\t\th2: {\n\t\t\t\tcolor: '$$syntax',\n\t\t\t},\n\t\t})()\n\n\t\texpect(getCssText()).toBe(\n\t\t\t`--sxs{--sxs:2 c-lkpaIy}` +\n\t\t\t`@media{` +\n\t\t\t\t`.c-lkpaIy{---syntax:red}` +\n\t\t\t\t`.c-lkpaIy h1{color:var(---syntax)}` +\n\t\t\t\t`.c-lkpaIy h2{color:var(---syntax)}` +\n\t\t\t`}`\n\t\t)\n\t})\n\n\ttest('locally scoped token works 3 times', () => {\n\t\tconst { css, getCssText } = createStitches({ prefix: 'fusion' })\n\n\t\tcss({\n\t\t\t$$syntax: 'red',\n\n\t\t\th1: {\n\t\t\t\tcolor: '$$syntax',\n\t\t\t},\n\n\t\t\th2: {\n\t\t\t\tcolor: '$$syntax',\n\t\t\t},\n\n\t\t\th3: {\n\t\t\t\tcolor: '$$syntax',\n\t\t\t},\n\t\t})()\n\n\t\texpect(getCssText()).toBe(\n\t\t\t`--sxs{--sxs:2 fusion-c-kbkiiL}` +\n\t\t\t`@media{` +\n\t\t\t\t`.fusion-c-kbkiiL{--fusion--syntax:red}` +\n\t\t\t\t`.fusion-c-kbkiiL h1{color:var(--fusion--syntax)}` +\n\t\t\t\t`.fusion-c-kbkiiL h2{color:var(--fusion--syntax)}` +\n\t\t\t\t`.fusion-c-kbkiiL h3{color:var(--fusion--syntax)}` +\n\t\t\t`}`\n\t\t)\n\t})\n\n\ttest('locally scoped prefix-free token works 3 times', () => {\n\t\tconst { css, getCssText } = createStitches()\n\n\t\tcss({\n\t\t\t$$syntax: 'red',\n\n\t\t\th1: {\n\t\t\t\tcolor: '$$syntax',\n\t\t\t},\n\n\t\t\th2: {\n\t\t\t\tcolor: '$$syntax',\n\t\t\t},\n\n\t\t\th3: {\n\t\t\t\tcolor: '$$syntax',\n\t\t\t},\n\t\t})()\n\n\t\texpect(getCssText()).toBe(\n\t\t\t`--sxs{--sxs:2 c-kbkiiL}` +\n\t\t\t`@media{` +\n\t\t\t\t`.c-kbkiiL{---syntax:red}` +\n\t\t\t\t`.c-kbkiiL h1{color:var(---syntax)}` +\n\t\t\t\t`.c-kbkiiL h2{color:var(---syntax)}` +\n\t\t\t\t`.c-kbkiiL h3{color:var(---syntax)}` +\n\t\t\t`}`\n\t\t)\n\t})\n})\n" }, { "path": "packages/core/tests/keyframes.js", "content": "import { createStitches } from '../src/index.js'\n\ndescribe('Keyframes', () => {\n\ttest('Expected behavior for the keyframes() method', () => {\n\t\tconst { keyframes, toString } = createStitches()\n\n\t\tconst myKeyframes = keyframes({\n\t\t\t'0%': {\n\t\t\t\topacity: '0',\n\t\t\t},\n\t\t\t'1%': {\n\t\t\t\topacity: '1',\n\t\t\t},\n\t\t})\n\n\t\texpect(toString()).toBe('')\n\t\texpect(`animation: 1s ${myKeyframes};`).toBe('animation: 1s k-hMEmNJ;')\n\t\texpect(toString()).toBe(`--sxs{--sxs:1 k-hMEmNJ}@media{@keyframes k-hMEmNJ{0%{opacity:0}1%{opacity:1}}}`)\n\t\texpect(myKeyframes.name).toBe('k-hMEmNJ')\n\t})\n})\n" }, { "path": "packages/core/tests/theme.js", "content": "import { createStitches } from '../src/index.js'\n\ndescribe('Theme', () => {\n\ttest('Expected behavior for the createTheme() method', () => {\n\t\tconst { createTheme, getCssText } = createStitches()\n\n\t\tconst myTheme = createTheme('my', {\n\t\t\tcolors: {\n\t\t\t\tblue: 'dodgerblue',\n\t\t\t},\n\t\t})\n\n\t\texpect(getCssText()).toBe('')\n\t\texpect(`
`).toBe('
')\n\t\texpect(getCssText()).toBe(`--sxs{--sxs:0 my}@media{.my{--colors-blue:dodgerblue}}`)\n\t\texpect(myTheme.className).toBe('my')\n\t\texpect(myTheme.selector).toBe('.my')\n\t})\n\n\ttest('createTheme() support for non-strings', () => {\n\t\t{\n\t\t\tconst { getCssText } = createStitches({\n\t\t\t\ttheme: {\n\t\t\t\t\tsizes: {\n\t\t\t\t\t\tsm: 100,\n\t\t\t\t\t\tmd: 200,\n\t\t\t\t\t\tlg: 500,\n\t\t\t\t\t},\n\t\t\t\t}\n\t\t\t})\n\n\t\t\texpect(getCssText()).toBe(\n\t\t\t\t`--sxs{--sxs:0 t-egkarf}@media{` +\n\t\t\t\t\t`:root,.t-egkarf{--sizes-sm:100;--sizes-md:200;--sizes-lg:500}` +\n\t\t\t\t`}`\n\t\t\t)\n\t\t}\n\n\t\t{\n\t\t\tconst { getCssText } = createStitches({\n\t\t\t\ttheme: {\n\t\t\t\t\tsizes: {\n\t\t\t\t\t\tsm: 100,\n\t\t\t\t\t\tmd: 'calc($sm * 3)',\n\t\t\t\t\t\tlg: 'calc($md * 3)',\n\t\t\t\t\t},\n\t\t\t\t}\n\t\t\t})\n\n\t\t\texpect(getCssText()).toBe(\n\t\t\t\t`--sxs{--sxs:0 t-eJkcVD}@media{` +\n\t\t\t\t\t`:root,.t-eJkcVD{` +\n\t\t\t\t\t\t`--sizes-sm:100;` +\n\t\t\t\t\t\t`--sizes-md:calc(var(--sizes-sm) * 3);` +\n\t\t\t\t\t\t`--sizes-lg:calc(var(--sizes-md) * 3)` +\n\t\t\t\t\t`}` +\n\t\t\t\t`}`\n\t\t\t)\n\t\t}\n\t})\n\n\ttest('theme.className injects the theme', () => {\n\t\tconst { getCssText, createTheme } = createStitches()\n\n\t\tconst theme = createTheme({\n\t\t\tcolors: {\n\t\t\t\tblue: '#0000ff',\n\t\t\t}\n\t\t})\n\n\t\texpect(getCssText()).toBe(``)\n\n\t\tvoid theme.className\n\n\t\texpect(getCssText()).toBe(`--sxs{--sxs:0 t-gpVVQE}@media{.t-gpVVQE{--colors-blue:#0000ff}}`)\n\t})\n})\n" }, { "path": "packages/core/tests/types.test.ts", "content": "import { createStitches } from '../types/index'\n\nconst { css, globalCss, keyframes } = createStitches({\n\tutils: {\n\t\tmx: () => ({\n\t\t\tbackgroundColor: 'red',\n\t\t}),\n\t},\n\ttheme: {\n\t\tcolors: {\n\t\t\thiContrast: 'hsl(200, 12%, 5%)',\n\t\t\tloContrast: 'white',\n\t\t\tgray100: 'hsl(206, 20%, 98.8%)',\n\t\t\tgray200: 'hsl(206, 14%, 96.0%)',\n\t\t\tgray300: 'hsl(206, 13%, 93.7%)',\n\t\t\tgray400: 'hsl(206, 12%, 92.0%)',\n\t\t\tgray500: 'hsl(206, 12%, 89.5%)',\n\t\t\tgray600: 'hsl(206, 11%, 85.2%)',\n\t\t\tgray700: 'hsl(206, 10%, 80.0%)',\n\t\t\tgray800: 'hsl(206, 6%, 56.1%)',\n\t\t\tgray900: 'hsl(206, 6%, 43.9%)',\n\t\t\tpedro: '$gray100',\n\t\t},\n\t\tspace: {\n\t\t\t1: '10px',\n\t\t\t2: '20px',\n\t\t},\n\t\tfontSizes: {\n\t\t\t'1': '11px',\n\t\t\t'2': '13px',\n\t\t\t'3': '15px',\n\t\t\t'4': '17px',\n\t\t\t'5': '19px',\n\t\t\t'6': '21px',\n\t\t\t'7': '27px',\n\t\t\t'8': '35px',\n\t\t\t'9': '59px',\n\t\t},\n\t},\n\tmedia: {\n\t\tbp1: '(min-width: 620px)',\n\t},\n})\n\nkeyframes({\n\tfrom: {\n\t\tcolor: '$gray100',\n\t},\n\tto: {\n\t\tcolor: '$gray900',\n\t},\n})\n\nglobalCss({\n\tbody: {\n\t\t'@bp1': {\n\t\t\tbackgroundColor: '$gray100',\n\t\t},\n\t\tbackgroundColor: '$gray300',\n\t},\n})\n\nconst PotatoButton = css({\n\tvariants: {\n\t\tpeace: {\n\t\t\tmercy: {\n\t\t\t\tcolor: 'MediumOrchid',\n\t\t\t},\n\t\t\ttrust: {\n\t\t\t\tcolor: 'Turquoise',\n\t\t\t},\n\t\t},\n\t\tvariant: {\n\t\t\tblue: {\n\t\t\t\tbackgroundColor: '$gray100',\n\t\t\t},\n\t\t\tred: {\n\t\t\t\tbackgroundColor: '$gray100',\n\t\t\t},\n\t\t},\n\t},\n\tcompoundVariants: [\n\t\t{\n\t\t\tvariant: 'blue',\n\t\t\tcss: {\n\t\t\t\tbackgroundColor: '$gray200',\n\t\t\t},\n\t\t},\n\t],\n})\n\nPotatoButton({\n\tpeace: 'mercy',\n})\n\nconst two = css(PotatoButton, {\n\t$$max: '2px',\n\twidth: '$$max',\n\tvariants: {\n\t\thue: {\n\t\t\tgreen: {\n\t\t\t\twidth: '$$max',\n\t\t\t\tbackgroundColor: '$gray100',\n\t\t\t},\n\t\t\tred: {\n\t\t\t\tbackgroundColor: '$gray100',\n\t\t\t},\n\t\t},\n\t\tlove: {\n\t\t\tfree: {\n\t\t\t\tcolor: 'ForestGreen',\n\t\t\t},\n\t\t\tgood: {\n\t\t\t\tcolor: 'GoldenRod',\n\t\t\t},\n\t\t}\n\t},\n\tdefaultVariants: {\n\t\thue: 'red',\n\t},\n\tcompoundVariants: [\n\t\t{\n\t\t\thue: 'green',\n\t\t\tcss: {\n\t\t\t\tbackgroundColor: '$gray200',\n\t\t\t},\n\t\t},\n\t],\n})\n\ntwo({\n\tpeace: 'mercy',\n\thue: 'green',\n\tlove: 'free',\n})\n\nPotatoButton({\n\tclassName: '',\n\tcss: {\n\t\tbackgroundColor: '$gray300',\n\n\t\t'@all': {\n\t\t\tbackgroundColor: 'initial'\n\t\t},\n\n\t\t'@bp1': {\n\t\t\tbackgroundColor: 'initial',\n\t\t}\n\t},\n})\n" }, { "path": "packages/core/tests/universal-autoprefixer.js", "content": "import { createStitches } from '../src/index.js'\n\ndescribe('Autoprefixer', () => {\n\ttest('appearance', () => {\n\t\tconst { globalCss, toString } = createStitches()\n\n\t\tglobalCss({\n\t\t\t'x-element': {\n\t\t\t\tappearance: 'none',\n\t\t\t},\n\t\t})()\n\n\t\texpect(toString()).toBe('--sxs{--sxs:1 kozGVo}@media{x-element{-webkit-appearance:none;appearance:none}}')\n\t})\n\n\ttest('backfaceVisibility', () => {\n\t\tconst { globalCss, toString } = createStitches()\n\n\t\tglobalCss({\n\t\t\t'x-element': {\n\t\t\t\tbackfaceVisibility: 'visible',\n\t\t\t},\n\t\t})()\n\n\t\texpect(toString()).toBe('--sxs{--sxs:1 gaCVoe}@media{x-element{-webkit-backface-visibility:visible;backface-visibility:visible}}')\n\t})\n\n\ttest('backgroundClip', () => {\n\t\tconst { globalCss, toString } = createStitches()\n\n\t\tglobalCss({\n\t\t\t'x-element': {\n\t\t\t\tbackgroundClip: 'border-box',\n\t\t\t},\n\t\t})()\n\n\t\texpect(toString()).toBe('--sxs{--sxs:1 gIcRdw}@media{x-element{-webkit-background-clip:border-box;background-clip:border-box}}')\n\t})\n\n\ttest('clipPath', () => {\n\t\tconst { globalCss, toString } = createStitches()\n\n\t\tglobalCss({\n\t\t\t'x-element': {\n\t\t\t\tclipPath: 'circle(40%)',\n\t\t\t},\n\t\t})()\n\n\t\texpect(toString()).toBe('--sxs{--sxs:1 ccZNl}@media{x-element{-webkit-clip-path:circle(40%);clip-path:circle(40%)}}')\n\t})\n\n\ttest('hyphens', () => {\n\t\tconst { globalCss, toString } = createStitches()\n\n\t\tglobalCss({\n\t\t\t'x-element': {\n\t\t\t\thyphens: 'none',\n\t\t\t},\n\t\t})()\n\n\t\texpect(toString()).toBe('--sxs{--sxs:1 cRggdz}@media{x-element{-webkit-hyphens:none;hyphens:none}}')\n\t})\n\n\ttest('maskImage', () => {\n\t\tconst { globalCss, toString } = createStitches()\n\n\t\tglobalCss({\n\t\t\t'x-element': {\n\t\t\t\tmaskImage: 'none',\n\t\t\t},\n\t\t})()\n\n\t\texpect(toString()).toBe('--sxs{--sxs:1 eNBesV}@media{x-element{-webkit-mask-image:none;mask-image:none}}')\n\t})\n\n\ttest('tabSize', () => {\n\t\tconst { globalCss, toString } = createStitches()\n\n\t\tglobalCss({\n\t\t\t'x-element': {\n\t\t\t\ttabSize: 'none',\n\t\t\t},\n\t\t})()\n\n\t\texpect(toString()).toBe('--sxs{--sxs:1 kPCdtQ}@media{x-element{tab-size:none}}')\n\t})\n\n\ttest('textSizeAdjust', () => {\n\t\tconst { globalCss, toString } = createStitches()\n\n\t\tglobalCss({\n\t\t\t'x-element': {\n\t\t\t\ttextSizeAdjust: '100%',\n\t\t\t},\n\t\t})()\n\n\t\texpect(toString()).toBe('--sxs{--sxs:1 gVFtip}@media{x-element{-webkit-text-size-adjust:100%;text-size-adjust:100%}}')\n\t})\n\n\ttest('userSelect', () => {\n\t\tconst { globalCss, toString } = createStitches()\n\n\t\tglobalCss({\n\t\t\t'x-element': {\n\t\t\t\tuserSelect: 'none',\n\t\t\t},\n\t\t})()\n\n\t\texpect(toString()).toBe('--sxs{--sxs:1 kEUokv}@media{x-element{-webkit-user-select:none;user-select:none}}')\n\t})\n})\n" }, { "path": "packages/core/tests/universal-functionality.js", "content": "import { createStitches } from '../src/index.js'\n\ndescribe('Configuration', () => {\n\tlet stitches\n\n\ttest('createStitches()', () => {\n\t\tconst { css, globalCss } = createStitches()\n\n\t\texpect(css).toBeInstanceOf(Function)\n\t\texpect(globalCss).toBeInstanceOf(Function)\n\t})\n\n\ttest('createStitches({})', () => {\n\t\tconst { css, globalCss } = createStitches({})\n\n\t\texpect(css).toBeInstanceOf(Function)\n\t\texpect(globalCss).toBeInstanceOf(Function)\n\t})\n\n\ttest('createStitches({ prefix: \"fusion-\" })', () => {\n\t\tconst { config } = createStitches({ prefix: 'fusion-' })\n\n\t\texpect(config.prefix).toBe('fusion-')\n\t})\n\n\ttest('createStitches({ theme })', () => {\n\t\tconst themeConfig = { colors: { blue: 'dodgerblue' } }\n\n\t\tconst { config } = createStitches({ theme: themeConfig })\n\n\t\texpect(config.theme).toBe(themeConfig)\n\t})\n})\n" }, { "path": "packages/core/tests/universal-logical-properties.js", "content": "import { createStitches } from '../src/index.js'\n\ndescribe('Logical Properties', () => {\n\ttest('marginBlock', () => {\n\t\tconst { globalCss, toString } = createStitches()\n\n\t\tglobalCss({\n\t\t\t'x-element': {\n\t\t\t\tmarginBlock: 0,\n\t\t\t},\n\t\t\t'y-element': {\n\t\t\t\tmarginBlock: 10,\n\t\t\t},\n\t\t\t'z-element': {\n\t\t\t\tmarginBlock: '5px 10px',\n\t\t\t},\n\t\t})()\n\n\t\texpect(toString()).toBe(\n\t\t\t`--sxs{--sxs:1 IvBLl}@media{` +\n\t\t\t\t`x-element{margin-block-start:0;margin-block-end:0}` +\n\t\t\t\t`y-element{margin-block-start:10px;margin-block-end:10px}` +\n\t\t\t\t`z-element{margin-block-start:5px;margin-block-end:10px}` +\n\t\t\t`}`\n\t\t)\n\t})\n\n\ttest('marginInline', () => {\n\t\tconst { globalCss, toString } = createStitches()\n\n\t\tglobalCss({\n\t\t\t'x-element': {\n\t\t\t\tmarginInline: 0,\n\t\t\t},\n\t\t\t'y-element': {\n\t\t\t\tmarginInline: 10,\n\t\t\t},\n\t\t\t'z-element': {\n\t\t\t\tmarginInline: '5px 10px',\n\t\t\t},\n\t\t})()\n\n\t\texpect(toString()).toBe(\n\t\t\t`--sxs{--sxs:1 eNPHKF}@media{` +\n\t\t\t\t`x-element{margin-inline-start:0;margin-inline-end:0}` +\n\t\t\t\t`y-element{margin-inline-start:10px;margin-inline-end:10px}` +\n\t\t\t\t`z-element{margin-inline-start:5px;margin-inline-end:10px}` +\n\t\t\t`}`\n\t\t)\n\t})\n\n\ttest('paddingBlock', () => {\n\t\tconst { globalCss, toString } = createStitches()\n\n\t\tglobalCss({\n\t\t\t'x-element': {\n\t\t\t\tpaddingBlock: 0,\n\t\t\t},\n\t\t\t'y-element': {\n\t\t\t\tpaddingBlock: 10,\n\t\t\t},\n\t\t\t'z-element': {\n\t\t\t\tpaddingBlock: '5px 10px',\n\t\t\t},\n\t\t})()\n\n\t\texpect(toString()).toBe(\n\t\t\t`--sxs{--sxs:1 kcHEgy}@media{` +\n\t\t\t\t`x-element{padding-block-start:0;padding-block-end:0}` +\n\t\t\t\t`y-element{padding-block-start:10px;padding-block-end:10px}` +\n\t\t\t\t`z-element{padding-block-start:5px;padding-block-end:10px}` +\n\t\t\t`}`\n\t\t)\n\t})\n\n\ttest('paddingInline', () => {\n\t\tconst { globalCss, toString } = createStitches()\n\n\t\tglobalCss({\n\t\t\t'x-element': {\n\t\t\t\tpaddingInline: 0,\n\t\t\t},\n\t\t\t'y-element': {\n\t\t\t\tpaddingInline: 10,\n\t\t\t},\n\t\t\t'z-element': {\n\t\t\t\tpaddingInline: '5px 10px',\n\t\t\t},\n\t\t})()\n\n\t\texpect(toString()).toBe(\n\t\t\t`--sxs{--sxs:1 cVrbiG}@media{` +\n\t\t\t\t`x-element{padding-inline-start:0;padding-inline-end:0}` +\n\t\t\t\t`y-element{padding-inline-start:10px;padding-inline-end:10px}` +\n\t\t\t\t`z-element{padding-inline-start:5px;padding-inline-end:10px}` +\n\t\t\t`}`\n\t\t)\n\t})\n})\n" }, { "path": "packages/core/tests/universal-nesting.js", "content": "import { createStitches } from '../src/index.js'\n\ndescribe('Nesting', () => {\n\ttest('Authors can define globalCss nesting rules', () => {\n\t\tconst { globalCss, getCssText } = createStitches()\n\n\t\tglobalCss({\n\t\t\t'body > a': {\n\t\t\t\t'&:not(:hover)': {\n\t\t\t\t\ttextDecoration: 'none',\n\t\t\t\t},\n\t\t\t},\n\t\t})()\n\n\t\texpect(getCssText()).toBe(`--sxs{--sxs:1 hXsVBR}@media{body > a:not(:hover){text-decoration:none}}`)\n\t})\n\n\ttest('Authors can define component nesting rules', () => {\n\t\tconst { css, getCssText } = createStitches()\n\n\t\tcss({\n\t\t\t'&:not(:hover)': {\n\t\t\t\ttextDecoration: 'none',\n\t\t\t},\n\t\t})()\n\n\t\texpect(getCssText()).toBe(`--sxs{--sxs:2 c-dweUti}@media{.c-dweUti:not(:hover){text-decoration:none}}`)\n\t})\n\n\ttest('Authors can define recursive globalCss nesting rules', () => {\n\t\tconst { globalCss, getCssText } = createStitches()\n\n\t\tglobalCss({\n\t\t\tp: {\n\t\t\t\t'margin': 0,\n\t\t\t\t'& ~ &': {\n\t\t\t\t\tmarginTop: 0,\n\t\t\t\t},\n\t\t\t},\n\t\t})()\n\n\t\texpect(getCssText()).toBe(`--sxs{--sxs:1 gkqgGk}@media{p{margin:0}p ~ p{margin-top:0}}`)\n\t})\n\n\ttest('Authors can define recursive component nesting rules', () => {\n\t\tconst { css, getCssText } = createStitches()\n\n\t\tcss({\n\t\t\t'margin': 0,\n\t\t\t'& ~ &': {\n\t\t\t\tmarginTop: 0,\n\t\t\t},\n\t\t})()\n\n\t\texpect(getCssText()).toBe(`--sxs{--sxs:2 c-fuGzNQ}@media{.c-fuGzNQ{margin:0}.c-fuGzNQ ~ .c-fuGzNQ{margin-top:0}}`)\n\t})\n\n\ttest('Authors can define complex recursive globalCss nesting rules', () => {\n\t\tconst { globalCss, getCssText } = createStitches()\n\n\t\tglobalCss({\n\t\t\t'body > p, body > ul': {\n\t\t\t\t'margin': 0,\n\t\t\t\t'& ~ &': {\n\t\t\t\t\tmarginTop: 0,\n\t\t\t\t},\n\t\t\t},\n\t\t})()\n\n\t\tconst parentCssRule = `body > p,body > ul{margin:0}`\n\t\tconst nestingCssRule = `:is(body > p) ~ :is(body > p),:is(body > ul) ~ :is(body > ul){margin-top:0}`\n\n\t\texpect(getCssText()).toBe(`--sxs{--sxs:1 cugdJ}@media{${parentCssRule + nestingCssRule}}`)\n\t})\n\n\ttest('Authors can define complex recursive component nesting rules', () => {\n\t\tconst { css, getCssText } = createStitches()\n\n\t\tcss({\n\t\t\t'& > p, & > ul': {\n\t\t\t\t'margin': 0,\n\t\t\t\t'& ~ &': {\n\t\t\t\t\tmarginTop: 0,\n\t\t\t\t},\n\t\t\t},\n\t\t})()\n\n\t\tconst parentCssRule = `.c-iJLHRt > p,.c-iJLHRt > ul{margin:0}`\n\t\tconst nestingCssRule = `:is(.c-iJLHRt > p) ~ :is(.c-iJLHRt > p),:is(.c-iJLHRt > ul) ~ :is(.c-iJLHRt > ul){margin-top:0}`\n\n\t\texpect(getCssText()).toBe(`--sxs{--sxs:2 c-iJLHRt}@media{${parentCssRule + nestingCssRule}}`)\n\t})\n})\n" }, { "path": "packages/core/tests/universal-numeric-values.js", "content": "import { createStitches } from '../src/index.js'\n\ndescribe('Numeric Values', () => {\n\ttest('Authors can use numeric values to assign px values', () => {\n\t\tconst { globalCss, toString } = createStitches()\n\n\t\texpect(toString()).toBe('')\n\n\t\tglobalCss({\n\t\t\tbody: {\n\t\t\t\tmargin: 0,\n\t\t\t},\n\t\t})()\n\n\t\texpect(toString()).toBe(`--sxs{--sxs:1 cSHHDh}@media{body{margin:0}}`)\n\n\t\tglobalCss({\n\t\t\tbody: {\n\t\t\t\tmargin: 10,\n\t\t\t},\n\t\t})()\n\n\t\texpect(toString()).toBe(`--sxs{--sxs:1 cSHHDh fFIrKk}@media{body{margin:0}body{margin:10px}}`)\n\t})\n\n\ttest('Authors can use numeric values to assign numeric values', () => {\n\t\tconst { globalCss, toString } = createStitches()\n\n\t\texpect(toString()).toBe('')\n\n\t\tglobalCss({\n\t\t\tbody: {\n\t\t\t\tlineHeight: 0,\n\t\t\t\twidth: 0,\n\t\t\t},\n\t\t})()\n\n\t\texpect(toString()).toBe(`--sxs{--sxs:1 bpctHq}@media{body{line-height:0;width:0}}`)\n\n\t\tglobalCss({\n\t\t\tbody: {\n\t\t\t\tlineHeight: 10,\n\t\t\t\twidth: 10,\n\t\t\t},\n\t\t})()\n\n\t\texpect(toString()).toBe(`--sxs{--sxs:1 bpctHq cudWGu}@media{body{line-height:0;width:0}body{line-height:10;width:10px}}`)\n\t})\n\n\ttest('Authors can use unit-less properties as known to React', () => {\n\t\tfor (let i = 0; i <= 33; i += 11) {\n\t\t\tconst { globalCss, getCssText } = createStitches()\n\n\t\t\tglobalCss({\n\t\t\t\tdiv: {\n\t\t\t\t\tanimationIterationCount: i,\n\t\t\t\t\tborderImageOutset: i,\n\t\t\t\t\tborderImageSlice: i,\n\t\t\t\t\tborderImageWidth: i,\n\t\t\t\t\tboxFlex: i,\n\t\t\t\t\tboxFlexGroup: i,\n\t\t\t\t\tboxOrdinalGroup: i,\n\t\t\t\t\tcolumnCount: i,\n\t\t\t\t\tcolumns: i,\n\t\t\t\t\tflex: i,\n\t\t\t\t\tflexGrow: i,\n\t\t\t\t\tflexShrink: i,\n\t\t\t\t\tflexOrder: i,\n\t\t\t\t\tgridRow: i,\n\t\t\t\t\tgridRowEnd: i,\n\t\t\t\t\tgridRowSpan: i,\n\t\t\t\t\tgridRowStart: i,\n\t\t\t\t\tgridColumn: i,\n\t\t\t\t\tgridColumnEnd: i,\n\t\t\t\t\tgridColumnSpan: i,\n\t\t\t\t\tgridColumnStart: i,\n\t\t\t\t\tfontWeight: i,\n\t\t\t\t\tlineHeight: i,\n\t\t\t\t\topacity: i,\n\t\t\t\t\torder: i,\n\t\t\t\t\torphans: i,\n\t\t\t\t\ttabSize: i,\n\t\t\t\t\twidows: i,\n\t\t\t\t\tzIndex: i,\n\t\t\t\t\tzoom: i,\n\t\t\t\t},\n\t\t\t})()\n\n\t\t\tconst cssText = getCssText().replace(/^.+@media\\{|\\}$/g, '')\n\n\t\t\texpect(cssText).toBe(\n\t\t\t\t'div' + '{' +\n\t\t\t\t\t'animation-iteration-count:' + i + ';' +\n\t\t\t\t\t'border-image-outset:' + i + ';' +\n\t\t\t\t\t'border-image-slice:' + i + ';' +\n\t\t\t\t\t'border-image-width:' + i + ';' +\n\t\t\t\t\t'box-flex:' + i + ';' +\n\t\t\t\t\t'box-flex-group:' + i + ';' +\n\t\t\t\t\t'box-ordinal-group:' + i + ';' +\n\t\t\t\t\t'column-count:' + i + ';' +\n\t\t\t\t\t'columns:' + i + ';' +\n\t\t\t\t\t'flex:' + i + ';' +\n\t\t\t\t\t'flex-grow:' + i + ';' +\n\t\t\t\t\t'flex-shrink:' + i + ';' +\n\t\t\t\t\t'flex-order:' + i + ';' +\n\t\t\t\t\t'grid-row:' + i + ';' +\n\t\t\t\t\t'grid-row-end:' + i + ';' +\n\t\t\t\t\t'grid-row-span:' + i + ';' +\n\t\t\t\t\t'grid-row-start:' + i + ';' +\n\t\t\t\t\t'grid-column:' + i + ';' +\n\t\t\t\t\t'grid-column-end:' + i + ';' +\n\t\t\t\t\t'grid-column-span:' + i + ';' +\n\t\t\t\t\t'grid-column-start:' + i + ';' +\n\t\t\t\t\t'font-weight:' + i + ';' +\n\t\t\t\t\t'line-height:' + i + ';' +\n\t\t\t\t\t'opacity:' + i + ';' +\n\t\t\t\t\t'order:' + i + ';' +\n\t\t\t\t\t'orphans:' + i + ';' +\n\t\t\t\t\t'tab-size:' + i + ';' +\n\t\t\t\t\t'widows:' + i + ';' +\n\t\t\t\t\t'z-index:' + i + ';' +\n\t\t\t\t\t'zoom:' + i +\n\t\t\t\t'}'\n\t\t\t)\n\t\t}\n\t})\n\n\tconst commonProps = 'fontSize margin marginTop marginRight marginBottom marginLeft padding paddingTop paddingRight paddingBottom paddingLeft'.split(' ')\n\n\tfor (const prop of commonProps) {\n\t\tconst kebabProp = prop.replace(/[A-Z]/g, (letter) => '-' + letter.toLowerCase())\n\n\t\ttest(`Author can use the unit-only ${kebabProp} property`, () => {\n\t\t\tfor (let i = 0; i <= 33; i += 11) {\n\t\t\t\tconst { globalCss, getCssText } = createStitches()\n\n\t\t\t\tglobalCss({\n\t\t\t\t\tdiv: {\n\t\t\t\t\t\t[prop]: i,\n\t\t\t\t\t},\n\t\t\t\t})()\n\n\t\t\t\tconst cssText = getCssText().replace(/^.+@media\\{|\\}$/g, '')\n\n\t\t\t\texpect(cssText).toBe(\n\t\t\t\t\t`div{` +\n\t\t\t\t\t\tkebabProp + `:` + i + (i ? 'px' : '') +\n\t\t\t\t\t`}`\n\t\t\t\t)\n\t\t\t}\n\t\t})\n\t}\n})\n" }, { "path": "packages/core/tests/universal-polyfill-prefixed-values.js", "content": "import { createStitches } from '../src/index.js'\n\ndescribe('Polyfill prefixed values', () => {\n\ttest('width:stretch', () => {\n\t\tconst { globalCss, toString } = createStitches()\n\n\t\tglobalCss({\n\t\t\t'.gro': {\n\t\t\t\twidth: 'stretch',\n\t\t\t},\n\t\t})()\n\n\t\texpect(toString()).toBe(\n\t\t\t`--sxs{--sxs:1 coIeei}@media{.gro{width:-moz-available;width:-webkit-fill-available}}`\n\t\t)\n\t})\n\n\ttest('width:fit-content', () => {\n\t\tconst { globalCss, toString } = createStitches()\n\n\t\tglobalCss({\n\t\t\t'.fit': {\n\t\t\t\twidth: 'fit-content',\n\t\t\t},\n\t\t})()\n\n\t\texpect(toString()).toBe(\n\t\t\t`--sxs{--sxs:1 gZsLvv}@media{.fit{width:-moz-fit-content;width:fit-content}}`\n\t\t)\n\t})\n})\n" }, { "path": "packages/core/tests/universal-prefix.js", "content": "import { createStitches } from '../src/index.js'\n\ndescribe('Prefix', () => {\n\tconst prefix = 'fusion'\n\n\ttest('Authors can define a prefix applied to themes', () => {\n\t\tconst { createTheme, toString } = createStitches({ prefix })\n\n\t\texpect(toString()).toBe('')\n\n\t\tconst hash = 'iknykm'\n\n\t\texpect(createTheme({ colors: { red: 'tomato' } }).toString()).toBe(`${prefix}-t-${hash}`)\n\n\t\texpect(toString()).toBe(`--sxs{--sxs:0 fusion-t-iknykm}@media{.${prefix}-t-${hash}{--fusion-colors-red:tomato}}`)\n\t})\n\n\ttest('Authors can define a prefix not applied to named themes', () => {\n\t\tconst { createTheme, toString } = createStitches({ prefix })\n\n\t\texpect(toString()).toBe('')\n\n\t\tconst themeName = 'my-theme-name'\n\n\t\tconst myTheme = createTheme(themeName, { colors: { red: 'tomato' } })\n\n\t\texpect(myTheme.toString()).toBe(`${themeName}`)\n\n\t\texpect(toString()).toBe(`--sxs{--sxs:0 my-theme-name}@media{.${themeName}{--fusion-colors-red:tomato}}`)\n\t})\n\n\ttest('Authors can define a prefix applied to components', () => {\n\t\tconst { css, toString } = createStitches({ prefix })\n\n\t\texpect(toString()).toBe('')\n\n\t\tconst component = css({ color: 'red' })\n\n\t\texpect(toString()).toBe('')\n\n\t\tcomponent.toString()\n\n\t\texpect(toString()).toBe(`--sxs{--sxs:2 fusion-c-gmqXFB}@media{.fusion-c-gmqXFB{color:red}}`)\n\t})\n})\n" }, { "path": "packages/core/tests/universal-serialization.js", "content": "import { createStitches } from '../src/index.js'\n\ndescribe('Serialization', () => {\n\tconst sheet = createStitches()\n\tconst { css, getCssText, toString, createTheme } = sheet\n\n\tconst myComponent = css({\n\t\tall: 'unset',\n\t\tfont: 'inherit',\n\t\tmargin: 0,\n\t\tpadding: '0.5em 1em',\n\t})\n\tconst myComponentClassName = 'c-cLikna'\n\n\tconst myTheme = createTheme({\n\t\tcolors: {\n\t\t\tblue: 'dodgerblue',\n\t\t},\n\t})\n\tconst myThemeClassName = 't-jPkpUS'\n\n\ttest('Components implicitly return their class name', () => {\n\t\texpect(String(myComponent)).toBe(myComponentClassName)\n\t\texpect('' + myComponent).toBe(myComponentClassName)\n\t\texpect(`${myComponent}`).toBe(myComponentClassName)\n\t})\n\n\ttest('Themes implicitly return their class name', () => {\n\t\texpect(String(myTheme)).toBe(myThemeClassName)\n\t\texpect('' + myTheme).toBe(myThemeClassName)\n\t\texpect(`${myTheme}`).toBe(myThemeClassName)\n\t})\n\n\ttest('Components can explicitly return their class name', () => {\n\t\texpect(myComponent.className).toBe(myComponentClassName)\n\t\texpect(myComponent.toString()).toBe(myComponentClassName)\n\t})\n\n\ttest('Themes can explicitly return their class name', () => {\n\t\texpect(myTheme.className).toBe(myThemeClassName)\n\t\texpect(myTheme.toString()).toBe(myThemeClassName)\n\t})\n\n\ttest('Components and themes can explicitly return their selector', () => {\n\t\texpect(myComponent.selector).toBe(`.${myComponentClassName}`)\n\t\texpect(myTheme.selector).toBe(`.${myThemeClassName}`)\n\t})\n\n\tconst sheetCssText = `--sxs{--sxs:0 t-jPkpUS}@media{.${myThemeClassName}{--colors-blue:dodgerblue}}--sxs{--sxs:2 c-cLikna}@media{.${myComponentClassName}{all:unset;font:inherit;margin:0;padding:0.5em 1em}}`\n\n\ttest('Sheets implicitly return their cssText', () => {\n\t\texpect(String(sheet)).toBe(sheetCssText)\n\t\texpect('' + sheet).toBe(sheetCssText)\n\t\texpect(`${sheet}`).toBe(sheetCssText)\n\t})\n\n\ttest('Sheets can explicitly return their cssText', () => {\n\t\texpect(getCssText()).toBe(sheetCssText)\n\t\texpect(toString()).toBe(sheetCssText)\n\t})\n})\n" }, { "path": "packages/core/tests/universal-tokens.js", "content": "import { createStitches } from '../src/index.js'\n\ndescribe('Tokens', () => {\n\ttest('Authors can use a regular token #1', () => {\n\t\tconst { globalCss, getCssText } = createStitches({\n\t\t\ttheme: {\n\t\t\t\tcolors: {\n\t\t\t\t\tred: 'tomato',\n\t\t\t\t},\n\t\t\t},\n\t\t})\n\n\t\tglobalCss({\n\t\t\tarticle: {\n\t\t\t\tcolor: '$red',\n\t\t\t},\n\t\t})()\n\n\t\texpect(getCssText()).toBe(\n\t\t\t`--sxs{--sxs:0 t-iknykm}@media{` +\n\t\t\t\t`:root,.t-iknykm{--colors-red:tomato}` +\n\t\t\t`}--sxs{--sxs:1 fMIGFF}@media{` +\n\t\t\t\t`article{color:var(--colors-red)}` +\n\t\t\t`}`\n\t\t)\n\t})\n\n\ttest('Authors can use a regular token #2', () => {\n\t\tconst { globalCss, getCssText } = createStitches({\n\t\t\ttheme: {\n\t\t\t\tshadows: {\n\t\t\t\t\tred: 'tomato',\n\t\t\t\t},\n\t\t\t},\n\t\t})\n\n\t\tglobalCss({\n\t\t\tarticle: {\n\t\t\t\tboxShadow: '0 0 0 1px $red',\n\t\t\t},\n\t\t})()\n\n\t\texpect(getCssText()).toBe(\n\t\t\t`--sxs{--sxs:0 t-daOLKV}@media{` +\n\t\t\t\t`:root,.t-daOLKV{--shadows-red:tomato}` +\n\t\t\t`}--sxs{--sxs:1 bstpNq}@media{` +\n\t\t\t\t`article{box-shadow:0 0 0 1px var(--shadows-red)}` +\n\t\t\t`}`\n\t\t)\n\t})\n\n\ttest('Authors can use a relative token #1', () => {\n\t\tconst { globalCss, getCssText } = createStitches({\n\t\t\ttheme: {\n\t\t\t\tcolors: {\n\t\t\t\t\tred: 'tomato',\n\t\t\t\t\tred500: '$red',\n\t\t\t\t},\n\t\t\t},\n\t\t})\n\n\t\tglobalCss({\n\t\t\tarticle: {\n\t\t\t\tcolor: '$red500',\n\t\t\t},\n\t\t})()\n\n\t\texpect(getCssText()).toBe(\n\t\t\t`--sxs{--sxs:0 t-eZaaph}@media{` +\n\t\t\t\t`:root,.t-eZaaph{--colors-red:tomato;--colors-red500:var(--colors-red)}` +\n\t\t\t`}--sxs{--sxs:1 fdgxsg}@media{` +\n\t\t\t\t`article{color:var(--colors-red500)}` +\n\t\t\t`}`\n\t\t)\n\t})\n\n\ttest('Authors can use a relative token #1', () => {\n\t\tconst { globalCss, getCssText } = createStitches({\n\t\t\ttheme: {\n\t\t\t\tshadows: {\n\t\t\t\t\tred: 'tomato',\n\t\t\t\t\tred500: '$red',\n\t\t\t\t\tredUnique: '$$red'\n\t\t\t\t},\n\t\t\t},\n\t\t})\n\n\t\tglobalCss({\n\t\t\tarticle: {\n\t\t\t\tboxShadow: '0 0 0 1px $red500',\n\t\t\t},\n\t\t})()\n\n\t\texpect(getCssText()).toBe(\n\t\t\t`--sxs{--sxs:0 t-gxqihb}@media{` +\n\t\t\t\t`:root,.t-gxqihb{--shadows-red:tomato;--shadows-red500:var(--shadows-red);--shadows-redUnique:var(---red)}` +\n\t\t\t`}` +\n\t\t\t`--sxs{--sxs:1 kyFUgb}@media{` +\n\t\t\t\t`article{box-shadow:0 0 0 1px var(--shadows-red500)}` +\n\t\t\t`}`\n\t\t)\n\t})\n\n\ttest('Authors can use an absolute token #1', () => {\n\t\tconst { globalCss, getCssText } = createStitches({\n\t\t\ttheme: {\n\t\t\t\tcolors: {\n\t\t\t\t\tred: 'tomato',\n\t\t\t\t},\n\t\t\t},\n\t\t})\n\n\t\tglobalCss({\n\t\t\tarticle: {\n\t\t\t\tboxShadow: '0 0 0 1px $colors$red',\n\t\t\t},\n\t\t})()\n\n\t\texpect(getCssText()).toBe(\n\t\t\t`--sxs{--sxs:0 t-iknykm}@media{` +\n\t\t\t\t`:root,.t-iknykm{--colors-red:tomato}` +\n\t\t\t`}` +\n\t\t\t`--sxs{--sxs:1 hNRkrs}@media{` +\n\t\t\t\t`article{box-shadow:0 0 0 1px var(--colors-red)}` +\n\t\t\t`}`\n\t\t)\n\t})\n\n\ttest('Authors can use an absolute token #2', () => {\n\t\tconst { globalCss, getCssText } = createStitches({\n\t\t\ttheme: {\n\t\t\t\tcolors: {\n\t\t\t\t\tred: 'tomato',\n\t\t\t\t},\n\t\t\t},\n\t\t})\n\n\t\tglobalCss({\n\t\t\tarticle: {\n\t\t\t\tboxShadow: '0 0 0 1px $colors$red',\n\t\t\t},\n\t\t})()\n\n\t\texpect(getCssText()).toBe(\n\t\t\t`--sxs{--sxs:0 t-iknykm}@media{` +\n\t\t\t\t`:root,.t-iknykm{--colors-red:tomato}` +\n\t\t\t`}` +\n\t\t\t`--sxs{--sxs:1 hNRkrs}@media{` +\n\t\t\t\t`article{box-shadow:0 0 0 1px var(--colors-red)}` +\n\t\t\t`}`\n\t\t)\n\t})\n\n\ttest('Authors can use a negative token #1', () => {\n\t\tconst { globalCss, getCssText } = createStitches({\n\t\t\ttheme: {\n\t\t\t\tspace: {\n\t\t\t\t\tsp1: '100px',\n\t\t\t\t\tsp2: '200px',\n\t\t\t\t},\n\t\t\t},\n\t\t})\n\n\t\tglobalCss({\n\t\t\tarticle: {\n\t\t\t\tmarginLeft: '-$sp1',\n\t\t\t\tmarginTop: '-$sp2',\n\t\t\t},\n\t\t})()\n\n\t\texpect(getCssText()).toBe(\n\t\t\t`--sxs{--sxs:0 t-hxjLZl}@media{` +\n\t\t\t\t`:root,.t-hxjLZl{--space-sp1:100px;--space-sp2:200px}` +\n\t\t\t`}` +\n\t\t\t`--sxs{--sxs:1 kTSGli}@media{` +\n\t\t\t\t`article{margin-left:calc(var(--space-sp1)*-1);margin-top:calc(var(--space-sp2)*-1)}` +\n\t\t\t`}`\n\t\t)\n\t})\n\n\ttest('Authors can use a negative token #2', () => {\n\t\tconst { globalCss, getCssText } = createStitches({\n\t\t\ttheme: {\n\t\t\t\tsizes: {\n\t\t\t\t\tsp1: '10px',\n\t\t\t\t\tsp2: '20px',\n\t\t\t\t\tsp3: '30px',\n\t\t\t\t},\n\t\t\t},\n\t\t})\n\n\t\tglobalCss({\n\t\t\tarticle: {\n\t\t\t\tmarginLeft: '-$sizes$sp1',\n\t\t\t\twidth: '$sp1',\n\t\t\t},\n\t\t})()\n\n\t\texpect(getCssText()).toBe(\n\t\t\t`--sxs{--sxs:0 t-ereMzu}@media{` +\n\t\t\t\t`:root,.t-ereMzu{--sizes-sp1:10px;--sizes-sp2:20px;--sizes-sp3:30px}` +\n\t\t\t`}` +\n\t\t\t`--sxs{--sxs:1 kuTEdV}@media{` +\n\t\t\t\t`article{margin-left:calc(var(--sizes-sp1)*-1);width:var(--sizes-sp1)}` +\n\t\t\t`}`\n\t\t)\n\t})\n\n\ttest('Authors can use tokens from the globalCss theme object', () => {\n\t\tconst { globalCss, theme, getCssText } = createStitches({\n\t\t\ttheme: {\n\t\t\t\tspace: {\n\t\t\t\t\tsp1: '100px',\n\t\t\t\t\tsp2: '200px',\n\t\t\t\t},\n\t\t\t},\n\t\t})\n\n\t\tglobalCss({\n\t\t\tarticle: {\n\t\t\t\tmarginLeft: theme.space.sp1,\n\t\t\t\tmarginTop: theme.space.sp2,\n\t\t\t},\n\t\t})()\n\n\t\texpect(getCssText()).toBe(\n\t\t\t`--sxs{--sxs:0 t-hxjLZl}@media{` +\n\t\t\t\t`:root,.t-hxjLZl{--space-sp1:100px;--space-sp2:200px}` +\n\t\t\t`}` +\n\t\t\t`--sxs{--sxs:1 lcIUgV}@media{` +\n\t\t\t\t`article{margin-left:var(--space-sp1);margin-top:var(--space-sp2)}` +\n\t\t\t`}`\n\t\t)\n\t})\n\n\ttest('Authors can use tokens from a new theme object', () => {\n\t\tconst { globalCss, createTheme, getCssText } = createStitches()\n\n\t\tconst mytheme = createTheme('my-theme', {\n\t\t\tspace: {\n\t\t\t\tsp1: '100px',\n\t\t\t\tsp2: '200px',\n\t\t\t},\n\t\t})\n\n\t\tglobalCss({\n\t\t\tarticle: {\n\t\t\t\tmarginLeft: mytheme.space.sp1,\n\t\t\t\tmarginTop: mytheme.space.sp2,\n\t\t\t},\n\t\t})()\n\n\t\texpect(getCssText()).toBe(\n\t\t\t`--sxs{--sxs:1 lcIUgV}@media{article{margin-left:var(--space-sp1);margin-top:var(--space-sp2)}}`,\n\t\t)\n\n\t\tvoid `${mytheme}`\n\n\t\texpect(getCssText()).toBe(\n\t\t\t`--sxs{--sxs:0 my-theme}@media{` +\n\t\t\t\t`.my-theme{--space-sp1:100px;--space-sp2:200px}` +\n\t\t\t`}--sxs{--sxs:1 lcIUgV}@media{` +\n\t\t\t\t`article{margin-left:var(--space-sp1);margin-top:var(--space-sp2)}` +\n\t\t\t`}`\n\t\t)\n\t})\n\n\ttest('Authors can use tokens from the globalCss theme object', () => {\n\t\tconst { globalCss, theme, getCssText } = createStitches({\n\t\t\ttheme: {\n\t\t\t\tspace: {\n\t\t\t\t\tsp1: '100px',\n\t\t\t\t\tsp2: '200px',\n\t\t\t\t},\n\t\t\t},\n\t\t})\n\n\t\tglobalCss({\n\t\t\tarticle: {\n\t\t\t\tmarginLeft: theme.space.sp1,\n\t\t\t\tmarginTop: theme.space.sp2,\n\t\t\t},\n\t\t})()\n\n\t\texpect(getCssText()).toBe(\n\t\t\t`--sxs{--sxs:0 t-hxjLZl}@media{` +\n\t\t\t\t`:root,.t-hxjLZl{--space-sp1:100px;--space-sp2:200px}` +\n\t\t\t`}` +\n\t\t\t`--sxs{--sxs:1 lcIUgV}@media{` +\n\t\t\t\t`article{margin-left:var(--space-sp1);margin-top:var(--space-sp2)}` +\n\t\t\t`}`\n\t\t)\n\t})\n\n\ttest('Authors can use the class from the root theme object', () => {\n\t\tconst { theme, getCssText } = createStitches({\n\t\t\tprefix: 'pedro',\n\t\t\ttheme: {\n\t\t\t\tcolors: {\n\t\t\t\t\tblue: 'dodgerblue',\n\t\t\t\t},\n\t\t\t}\n\t\t})\n\n\t\texpect(`
`).toBe(`
`)\n\n\t\texpect(getCssText()).toBe(\n\t\t\t`--sxs{--sxs:0 pedro-t-jPkpUS}@media{` +\n\t\t\t\t`:root,.pedro-t-jPkpUS{--pedro-colors-blue:dodgerblue}` +\n\t\t\t`}`\n\t\t)\n\t})\n\n\ttest('Authors can render custom units', () => {\n\t\tconst { globalCss, getCssText } = createStitches({\n\t\t\ttheme: {\n\t\t\t\tsizes: {\n\t\t\t\t\tfive: '5px',\n\t\t\t\t},\n\t\t\t}\n\t\t})\n\n\t\tglobalCss({\n\t\t\tbody: {\n\t\t\t\tmarginLeft: '5--sizes-five'\n\t\t\t}\n\t\t})()\n\n\t\texpect(getCssText()).toBe(\n\t\t\t`--sxs{--sxs:0 t-bhZLEQ}@media{` +\n\t\t\t\t`:root,.t-bhZLEQ{--sizes-five:5px}` +\n\t\t\t`}--sxs{--sxs:1 gvABwA}@media{` +\n\t\t\t\t`body{margin-left:calc(var(--sizes-five)*5)}` +\n\t\t\t`}`\n\t\t)\n\t})\n})\n" }, { "path": "packages/core/tests/universal-with-typing.ts", "content": "import { createStitches } from '../types'\n\nconst { css, toString } = createStitches({\n\tmedia: {\n\t\tbp1: '(min-width: 640px)',\n\t},\n})\n\nconst xyz = css({\n\tcolor: 'red',\n})\n\nvoid xyz()\nvoid toString()\n" }, { "path": "packages/core/tests/utils.js", "content": "import { createStitches } from '../src/index.js'\n\ndescribe('Utils', () => {\n\ttest('Authors can define utilties applied to components', () => {\n\t\tconst stitches = createStitches({\n\t\t\tutils: {\n\t\t\t\tbg: (value) => ({ backgroundColor: value }),\n\t\t\t},\n\t\t})\n\n\t\tconst component = stitches.css({\n\t\t\tbg: 'red',\n\t\t})\n\n\t\texpect(stitches.toString()).toBe('')\n\n\t\tcomponent.toString()\n\n\t\texpect(stitches.toString()).toBe(`--sxs{--sxs:2 c-bzwKCF}@media{.c-bzwKCF{background-color:red}}`)\n\t})\n})\n" }, { "path": "packages/core/tests/with-config-api.js", "content": "import { createStitches } from '../src/index.js'\n\ndescribe('css.withConfig', () => {\n\ttest('Basic css calls without a config', () => {\n\t\tconst { css, getCssText } = createStitches()\n\n\t\texpect(css.withConfig).toBeInstanceOf(Function)\n\n\t\tconst component1of2 = css.withConfig()()\n\t\tconst className1of2 = `${component1of2}`\n\t\tconst cssString1of2 = getCssText()\n\n\t\texpect(component1of2).toBeInstanceOf(Function)\n\t\texpect(className1of2).toBe('PJLV')\n\t\texpect(cssString1of2).toBe('')\n\n\t\tconst componentToRender = css.withConfig()({ color: 'DodgerBlue' })\n\t\tconst className = componentToRender().toString()\n\t\tconst cssString = getCssText()\n\n\t\texpect(componentToRender).toBeInstanceOf(Function)\n\t\texpect(className).toBe('c-dataoT')\n\t\texpect(cssString).toBe(`--sxs{--sxs:2 PJLV c-dataoT}@media{.c-dataoT{color:DodgerBlue}}`)\n\t})\n\ttest('Creates the correct className with a componentId', () => {\n\t\tconst { css, getCssText } = createStitches()\n\n\t\tconst componentConfig = {\n\t\t\tcomponentId: 'cool-id',\n\t\t}\n\t\tconst componentToRender = css.withConfig(componentConfig)({ color: 'red' })\n\t\tconst className = componentToRender().toString()\n\t\tconst cssString = getCssText()\n\n\t\texpect(componentToRender).toBeInstanceOf(Function)\n\t\texpect(className).toBe('c-cool-id')\n\t\texpect(cssString).toBe(`--sxs{--sxs:2 c-cool-id}@media{.c-cool-id{color:red}}`)\n\t})\n\n\ttest('Creates the correct className with a displayName', () => {\n\t\tconst { css, getCssText } = createStitches()\n\n\t\tconst componentConfig = {\n\t\t\tdisplayName: 'my-cool-display-name',\n\t\t}\n\t\tconst componentToRender = css.withConfig(componentConfig)({ color: 'red' })\n\t\tconst className = componentToRender().toString()\n\t\tconst cssString = getCssText()\n\n\t\texpect(componentToRender).toBeInstanceOf(Function)\n\t\texpect(className).toBe('c-my-cool-display-name-gmqXFB')\n\t\texpect(cssString).toBe(`--sxs{--sxs:2 c-my-cool-display-name-gmqXFB}@media{.c-my-cool-display-name-gmqXFB{color:red}}`)\n\t})\n\n\ttest('Creates the correct className with a displayName and componentId', () => {\n\t\tconst { css, getCssText } = createStitches()\n\n\t\tconst componentConfig = {\n\t\t\tcomponentId: 'cool-id',\n\t\t\tdisplayName: 'my-cool-display-name',\n\t\t}\n\t\tconst componentToRender = css.withConfig(componentConfig)({ color: 'red' })\n\t\tconst className = componentToRender().toString()\n\t\tconst cssString = getCssText()\n\n\t\texpect(componentToRender).toBeInstanceOf(Function)\n\t\texpect(className).toBe('c-my-cool-display-name-cool-id')\n\t\texpect(cssString).toBe(`--sxs{--sxs:2 c-my-cool-display-name-cool-id}@media{.c-my-cool-display-name-cool-id{color:red}}`)\n\t})\n\n\ttest('Creates the correct className with a componentConfig while extending components', () => {\n\t\tconst { css, getCssText } = createStitches()\n\n\t\tconst ComponentToExtend = css.withConfig({\n\t\t\tcomponentId: 'component-to-extend-id',\n\t\t})({ color: 'red' })\n\t\tconst componentToRender = css.withConfig({ componentId: 'cool-component-id' })(ComponentToExtend, { color: 'blue' })\n\t\tconst className = componentToRender().toString()\n\t\texpect(className).toBe('c-component-to-extend-id c-cool-component-id')\n\t\tconst cssString = getCssText()\n\n\t\texpect(cssString).toBe(`--sxs{--sxs:2 c-component-to-extend-id c-cool-component-id}@media{.c-component-to-extend-id{color:red}.c-cool-component-id{color:blue}}`)\n\t})\n})\n\ndescribe('shouldForwardStitchesProp', () => {\n\ttest('does not omit stitches props when shouldForwardStitchesProp returns true', () => {\n\t\tconst { css } = createStitches()\n\n\t\tconst componentOneConfig = {\n\t\t\tshouldForwardStitchesProp: () => false,\n\t\t}\n\t\tconst componentOne = css.withConfig(componentOneConfig)('button', {\n\t\t\tvariants: {\n\t\t\t\tvariant: {\n\t\t\t\t\tred: { background: 'red' },\n\t\t\t\t},\n\t\t\t},\n\t\t})\n\n\t\tconst {props: firstComponentProps} = componentOne({ variant: 'red', css: {} })\n\t\texpect(firstComponentProps.variant).toBe(undefined)\n\t\texpect(firstComponentProps.css).toEqual(undefined)\n\n\t\tconst componentTwoConfig = {\n\t\t\tshouldForwardStitchesProp: () => true,\n\t\t}\n\n\t\tconst componentTwo = css.withConfig(componentTwoConfig)('button', {\n\t\t\tvariants: {\n\t\t\t\tvariant: {\n\t\t\t\t\tred: { background: 'red' },\n\t\t\t\t},\n\t\t\t},\n\t\t})\n\n\t\tconst {props: secondComponentProps} = componentTwo({ variant: 'red', css: {} })\n\t\texpect(secondComponentProps.variant).toBe('red')\n\t\texpect(secondComponentProps.css).toEqual({})\n\t})\n\n\ttest('does not omit a non-stitches props when shouldForwardStitchesProp returns true', () => {\n\t\tconst { css } = createStitches()\n\t\tconst componentConfig = {\n\t\t\tshouldForwardStitchesProp: () => true,\n\t\t}\n\t\tconst componentToRender = css.withConfig(componentConfig)('button', {\n\t\t\tvariants: {\n\t\t\t\tvariant: {\n\t\t\t\t\tred: { background: 'red' },\n\t\t\t\t},\n\t\t\t},\n\t\t})\n\t\tconst props = componentToRender({ href: 'www.hello.com' }).props\n\t\texpect(props.href).toBe('www.hello.com')\n\t})\n\n\ttest('Omits variants when shouldForwardStitchesProp returns false', () => {\n\t\tconst { css } = createStitches()\n\t\tconst componentConfig = {\n\t\t\tshouldForwardStitchesProp: () => false,\n\t\t}\n\t\tconst componentToRender = css.withConfig(componentConfig)('button', {\n\t\t\tvariants: {\n\t\t\t\tvariant: {\n\t\t\t\t\tred: { background: 'red' },\n\t\t\t\t},\n\t\t\t},\n\t\t})\n\t\tconst props = componentToRender({ variant: 'red' }).props\n\t\texpect(props.variant).toBe(undefined)\n\t})\n})\n" }, { "path": "packages/core/types/config.d.ts", "content": "import type * as CSSUtil from './css-util.js'\nimport type Stitches from './stitches.js'\n\n/** Configuration Interface */\ndeclare namespace ConfigType {\n\t/** Prefix interface. */\n\texport type Prefix = T extends string ? T: string\n\n\t/** Media interface. */\n\texport type Media = {\n\t\t[name in keyof T]: T[name] extends string ? T[name] : string\n\t}\n\n\t/** Theme interface. */\n\texport type Theme = {\n\t\tborderStyles?: { [token in number | string]: boolean | number | string }\n\t\tborderWidths?: { [token in number | string]: boolean | number | string }\n\t\tcolors?: { [token in number | string]: boolean | number | string }\n\t\tfonts?: { [token in number | string]: boolean | number | string }\n\t\tfontSizes?: { [token in number | string]: boolean | number | string }\n\t\tfontWeights?: { [token in number | string]: boolean | number | string }\n\t\tletterSpacings?: { [token in number | string]: boolean | number | string }\n\t\tlineHeights?: { [token in number | string]: boolean | number | string }\n\t\tradii?: { [token in number | string]: boolean | number | string }\n\t\tshadows?: { [token in number | string]: boolean | number | string }\n\t\tsizes?: { [token in number | string]: boolean | number | string }\n\t\tspace?: { [token in number | string]: boolean | number | string }\n\t\ttransitions?: { [token in number | string]: boolean | number | string }\n\t\tzIndices?: { [token in number | string]: boolean | number | string }\n\t} & {\n\t\t[Scale in keyof T]: {\n\t\t\t[Token in keyof T[Scale]]: T[Scale][Token] extends (boolean | number | string) ? T[Scale][Token] : (boolean | number | string)\n\t\t}\n\t}\n\n\t/** ThemeMap interface. */\n\texport type ThemeMap = {\n\t\t[Property in keyof T]: T[Property] extends string ? T[Property] : string\n\t}\n\n\t/** Utility interface. */\n\texport type Utils = {\n\t\t[Property in keyof T]: T[Property] extends (value: infer V) => {} ? T[Property] | ((value: V) => {\n\t\t\t[K in keyof CSSUtil.CSSProperties]?: CSSUtil.CSSProperties[K] | V\n\t\t}) : never\n\t}\n}\n\n/** Default ThemeMap. */\nexport interface DefaultThemeMap {\n\tgap: 'space'\n\tgridGap: 'space'\n\tcolumnGap: 'space'\n\tgridColumnGap: 'space'\n\trowGap: 'space'\n\tgridRowGap: 'space'\n\tinset: 'space'\n\tinsetBlock: 'space'\n\tinsetBlockEnd: 'space'\n\tinsetBlockStart: 'space'\n\tinsetInline: 'space'\n\tinsetInlineEnd: 'space'\n\tinsetInlineStart: 'space'\n\tmargin: 'space'\n\tmarginTop: 'space'\n\tmarginRight: 'space'\n\tmarginBottom: 'space'\n\tmarginLeft: 'space'\n\tmarginBlock: 'space'\n\tmarginBlockEnd: 'space'\n\tmarginBlockStart: 'space'\n\tmarginInline: 'space'\n\tmarginInlineEnd: 'space'\n\tmarginInlineStart: 'space'\n\tpadding: 'space'\n\tpaddingTop: 'space'\n\tpaddingRight: 'space'\n\tpaddingBottom: 'space'\n\tpaddingLeft: 'space'\n\tpaddingBlock: 'space'\n\tpaddingBlockEnd: 'space'\n\tpaddingBlockStart: 'space'\n\tpaddingInline: 'space'\n\tpaddingInlineEnd: 'space'\n\tpaddingInlineStart: 'space'\n\tscrollMargin: 'space'\n\tscrollMarginTop: 'space'\n\tscrollMarginRight: 'space'\n\tscrollMarginBottom: 'space'\n\tscrollMarginLeft: 'space'\n\tscrollMarginBlock: 'space'\n\tscrollMarginBlockEnd: 'space'\n\tscrollMarginBlockStart: 'space'\n\tscrollMarginInline: 'space'\n\tscrollMarginInlineEnd: 'space'\n\tscrollMarginInlineStart: 'space'\n\tscrollPadding: 'space'\n\tscrollPaddingTop: 'space'\n\tscrollPaddingRight: 'space'\n\tscrollPaddingBottom: 'space'\n\tscrollPaddingLeft: 'space'\n\tscrollPaddingBlock: 'space'\n\tscrollPaddingBlockEnd: 'space'\n\tscrollPaddingBlockStart: 'space'\n\tscrollPaddingInline: 'space'\n\tscrollPaddingInlineEnd: 'space'\n\tscrollPaddingInlineStart: 'space'\n\ttop: 'space'\n\tright: 'space'\n\tbottom: 'space'\n\tleft: 'space'\n\n\tfontSize: 'fontSizes'\n\n\tbackground: 'colors'\n\tbackgroundColor: 'colors'\n\tbackgroundImage: 'colors'\n\tborderImage: 'colors'\n\tborder: 'colors'\n\tborderBlock: 'colors'\n\tborderBlockEnd: 'colors'\n\tborderBlockStart: 'colors'\n\tborderBottom: 'colors'\n\tborderBottomColor: 'colors'\n\tborderColor: 'colors'\n\tborderInline: 'colors'\n\tborderInlineEnd: 'colors'\n\tborderInlineStart: 'colors'\n\tborderLeft: 'colors'\n\tborderLeftColor: 'colors'\n\tborderRight: 'colors'\n\tborderRightColor: 'colors'\n\tborderTop: 'colors'\n\tborderTopColor: 'colors'\n\tcaretColor: 'colors'\n\tcolor: 'colors'\n\tcolumnRuleColor: 'colors'\n\toutline: 'colors'\n\toutlineColor: 'colors'\n\tfill: 'colors'\n\tstroke: 'colors'\n\ttextDecorationColor: 'colors'\n\n\tfontFamily: 'fonts'\n\n\tfontWeight: 'fontWeights'\n\tlineHeight: 'lineHeights'\n\n\tletterSpacing: 'letterSpacings'\n\n\tblockSize: 'sizes'\n\tminBlockSize: 'sizes'\n\tmaxBlockSize: 'sizes'\n\tinlineSize: 'sizes'\n\tminInlineSize: 'sizes'\n\tmaxInlineSize: 'sizes'\n\twidth: 'sizes'\n\tminWidth: 'sizes'\n\tmaxWidth: 'sizes'\n\theight: 'sizes'\n\tminHeight: 'sizes'\n\tmaxHeight: 'sizes'\n\tflexBasis: 'sizes'\n\tgridTemplateColumns: 'sizes'\n\tgridTemplateRows: 'sizes'\n\n\tborderWidth: 'borderWidths'\n\tborderTopWidth: 'borderWidths'\n\tborderLeftWidth: 'borderWidths'\n\tborderRightWidth: 'borderWidths'\n\tborderBottomWidth: 'borderWidths'\n\n\tborderStyle: 'borderStyles'\n\tborderTopStyle: 'borderStyles'\n\tborderLeftStyle: 'borderStyles'\n\tborderRightStyle: 'borderStyles'\n\tborderBottomStyle: 'borderStyles'\n\n\tborderRadius: 'radii'\n\tborderTopLeftRadius: 'radii'\n\tborderTopRightRadius: 'radii'\n\tborderBottomRightRadius: 'radii'\n\tborderBottomLeftRadius: 'radii'\n\n\tboxShadow: 'shadows'\n\ttextShadow: 'shadows'\n\n\ttransition: 'transitions'\n\n\tzIndex: 'zIndices'\n}\n\n/** Returns a function used to create a new Stitches interface. */\nexport type CreateStitches = {\n\t<\n\t\tPrefix extends string = '',\n\t\tMedia extends {} = {},\n\t\tTheme extends {} = {},\n\t\tThemeMap extends {} = DefaultThemeMap,\n\t\tUtils extends {} = {}\n\t>(\n\t\tconfig?: {\n\t\t\tprefix?: ConfigType.Prefix\n\t\t\tmedia?: ConfigType.Media\n\t\t\ttheme?: ConfigType.Theme\n\t\t\tthemeMap?: ConfigType.ThemeMap\n\t\t\tutils?: ConfigType.Utils\n\t\t}\n\t): Stitches\n}\n" }, { "path": "packages/core/types/css-util.d.ts", "content": "import type * as Native from './css.js'\nimport type * as Config from './config.js'\nimport type * as ThemeUtil from './theme.js'\nimport type * as Util from './util.js'\n\nexport { Native }\n\n/** CSS style declaration object. */\nexport interface CSSProperties extends Native.StandardLonghandProperties, Native.StandardShorthandProperties, Native.SvgProperties {}\n\ntype ValueByPropertyName = PropertyName extends keyof CSSProperties ? CSSProperties[PropertyName] : never\n\ntype TokenByPropertyName = PropertyName extends keyof ThemeMap ? TokenByScaleName : never\n\ntype TokenByScaleName = ScaleName extends keyof Theme ? Util.Prefixed<'$', keyof Theme[ScaleName]> : never\n\n/** Returns a Style interface, leveraging the given media and style map. */\nexport type CSS<\n\tMedia = {},\n\tTheme = {},\n\tThemeMap = Config.DefaultThemeMap,\n\tUtils = {},\n> = (\n\t// nested at-rule css styles\n\t& {\n\t\t[K in Util.Prefixed<'@', keyof Media>]?: CSS\n\t}\n\t// known property styles\n\t& {\n\t\t[K in keyof CSSProperties as K extends keyof Utils ? never : K]?: (\n\t\t\t| ValueByPropertyName\n\t\t\t| TokenByPropertyName\n\t\t\t| Native.Globals\n\t\t\t| ThemeUtil.ScaleValue\n\t\t\t| Util.Index\n\t\t\t| undefined\n\t\t)\n\t}\n\t// known utility styles\n\t& {\n\t\t[K in keyof Utils]?: Utils[K] extends (arg: infer P) => any\n\t\t\t? (\n\t\t\t\t| (\n\t\t\t\t\tP extends any[]\n\t\t\t\t\t\t? (\n\t\t\t\t\t\t\t| (\n\t\t\t\t\t\t\t\t$$PropertyValue extends keyof P[0]\n\t\t\t\t\t\t\t\t\t? (\n\t\t\t\t\t\t\t\t\t\t| ValueByPropertyName\n\t\t\t\t\t\t\t\t\t\t| TokenByPropertyName\n\t\t\t\t\t\t\t\t\t\t| Native.Globals\n\t\t\t\t\t\t\t\t\t\t| ThemeUtil.ScaleValue\n\t\t\t\t\t\t\t\t\t\t| undefined\n\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t: $$ScaleValue extends keyof P[0]\n\t\t\t\t\t\t\t\t\t? (\n\t\t\t\t\t\t\t\t\t\t| TokenByScaleName\n\t\t\t\t\t\t\t\t\t\t| { scale: P[0][$$ScaleValue] }\n\t\t\t\t\t\t\t\t\t\t| undefined\n\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t: never\n\t\t\t\t\t\t\t)[]\n\t\t\t\t\t\t\t| P\n\t\t\t\t\t\t)\n\t\t\t\t\t: $$PropertyValue extends keyof P\n\t\t\t\t\t\t? (\n\t\t\t\t\t\t\t| ValueByPropertyName\n\t\t\t\t\t\t\t| TokenByPropertyName\n\t\t\t\t\t\t\t| Native.Globals\n\t\t\t\t\t\t\t| undefined\n\t\t\t\t\t\t)\n\t\t\t\t\t: $$ScaleValue extends keyof P\n\t\t\t\t\t\t? (\n\t\t\t\t\t\t\t| TokenByScaleName\n\t\t\t\t\t\t\t| { scale: P[$$ScaleValue] }\n\t\t\t\t\t\t\t| undefined\n\t\t\t\t\t\t)\n\t\t\t\t\t: never\n\t\t\t\t)\n\t\t\t\t| P\n\t\t\t)\n\t\t: never\n\t}\n\t// known theme styles\n\t& {\n\t\t[K in keyof ThemeMap as K extends keyof CSSProperties ? never : K extends keyof Utils ? never : K]?: (\n\t\t\t\t| Native.Globals\n\t\t\t\t| Util.Index\n\t\t\t\t| undefined\n\t\t\t)\n\t}\n\t// unknown css declaration styles\n\t& {\n\t\t/** Unknown property. */\n\t\t[K: string]: (\n\t\t\t| number\n\t\t\t| string\n\t\t\t| CSS\n\t\t\t| {}\n\t\t\t| undefined\n\t\t)\n\t}\n)\n\n/** Unique symbol used to reference a property value. */\nexport declare const $$PropertyValue: unique symbol\n\n/** Unique symbol used to reference a property value. */\nexport type $$PropertyValue = typeof $$PropertyValue\n\n/** Unique symbol used to reference a token value. */\nexport declare const $$ScaleValue: unique symbol\n\n/** Unique symbol used to reference a token value. */\nexport type $$ScaleValue = typeof $$ScaleValue\n\nexport declare const $$ThemeValue: unique symbol\n\nexport type $$ThemeValue = typeof $$ThemeValue\n\n// https://github.com/microsoft/TypeScript/issues/37888#issuecomment-846638356\nexport type WithPropertyValue = {\n\treadonly [K in $$PropertyValue]: T\n}\nexport type WithScaleValue = {\n\treadonly [K in $$ScaleValue]: T;\n}\n" }, { "path": "packages/core/types/css.d.ts", "content": "/** @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 */\n\nexport {};\n\n\nexport interface StandardLonghandProperties {\n /**\n * The CSS **`align-content`** property sets the distribution of space between and around content items along a flexbox's cross-axis or a grid's block axis.\n *\n * **Syntax**: `normal | | | ? `\n *\n * **Initial value**: `normal`\n *\n */\n alignContent?: Property.AlignContent;\n /**\n * The CSS **`align-items`** property sets the `align-self` value on all direct children as a group. In Flexbox, it controls the alignment of items on the Cross Axis. In Grid Layout, it controls the alignment of items on the Block Axis within their grid area.\n *\n * **Syntax**: `normal | stretch | | [ ? ]`\n *\n * **Initial value**: `normal`\n *\n */\n alignItems?: Property.AlignItems;\n /**\n * The **`align-self`** CSS property overrides a grid or flex item's `align-items` value. In Grid, it aligns the item inside the grid area. In Flexbox, it aligns the item on the cross axis.\n *\n * **Syntax**: `auto | normal | stretch | | ? `\n *\n * **Initial value**: `auto`\n *\n */\n alignSelf?: Property.AlignSelf;\n /**\n * The **`align-tracks`** CSS property sets the alignment in the masonry axis for grid containers that have masonry in their block axis.\n *\n * **Syntax**: `[ normal | | | ? ]#`\n *\n * **Initial value**: `normal`\n *\n */\n alignTracks?: Property.AlignTracks;\n /**\n * The **`animation-delay`** CSS property specifies the amount of time to wait from applying the animation to an element before beginning to perform the animation. The animation can start later, immediately from its beginning, or immediately and partway through the animation.\n *\n * **Syntax**: `