[
{
"path": ".gitattributes",
"content": "dist/* linguist-generated"
},
{
"path": ".github/workflows/tests.yml",
"content": "name: Tests\non: push\njobs:\n build:\n runs-on: ubuntu-latest\n steps:\n - uses: actions/checkout@v2\n - name: Install modules\n run: yarn\n - name: Run tests\n run: yarn test"
},
{
"path": ".gitignore",
"content": ".idea\n*.html\n!tests/*.html\n\n# Logs\nlogs\n*.log\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\nlerna-debug.log*\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\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/\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\n#dist\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"
},
{
"path": "LICENSE",
"content": " Apache License\n Version 2.0, January 2004\n http://www.apache.org/licenses/\n\n TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION\n\n 1. Definitions.\n\n \"License\" shall mean the terms and conditions for use, reproduction,\n and distribution as defined by Sections 1 through 9 of this document.\n\n \"Licensor\" shall mean the copyright owner or entity authorized by\n the copyright owner that is granting the License.\n\n \"Legal Entity\" shall mean the union of the acting entity and all\n other entities that control, are controlled by, or are under common\n control with that entity. For the purposes of this definition,\n \"control\" means (i) the power, direct or indirect, to cause the\n direction or management of such entity, whether by contract or\n otherwise, or (ii) ownership of fifty percent (50%) or more of the\n outstanding shares, or (iii) beneficial ownership of such entity.\n\n \"You\" (or \"Your\") shall mean an individual or Legal Entity\n exercising permissions granted by this License.\n\n \"Source\" form shall mean the preferred form for making modifications,\n including but not limited to software source code, documentation\n source, and configuration files.\n\n \"Object\" form shall mean any form resulting from mechanical\n transformation or translation of a Source form, including but\n not limited to compiled object code, generated documentation,\n and conversions to other media types.\n\n \"Work\" shall mean the work of authorship, whether in Source or\n Object form, made available under the License, as indicated by a\n copyright notice that is included in or attached to the work\n (an example is provided in the Appendix below).\n\n \"Derivative Works\" shall mean any work, whether in Source or Object\n form, that is based on (or derived from) the Work and for which the\n editorial revisions, annotations, elaborations, or other modifications\n represent, as a whole, an original work of authorship. For the purposes\n of this License, Derivative Works shall not include works that remain\n separable from, or merely link (or bind by name) to the interfaces of,\n the Work and Derivative Works thereof.\n\n \"Contribution\" shall mean any work of authorship, including\n the original version of the Work and any modifications or additions\n to that Work or Derivative Works thereof, that is intentionally\n submitted to Licensor for inclusion in the Work by the copyright owner\n or by an individual or Legal Entity authorized to submit on behalf of\n the copyright owner. For the purposes of this definition, \"submitted\"\n means any form of electronic, verbal, or written communication sent\n to the Licensor or its representatives, including but not limited to\n communication on electronic mailing lists, source code control systems,\n and issue tracking systems that are managed by, or on behalf of, the\n Licensor for the purpose of discussing and improving the Work, but\n excluding communication that is conspicuously marked or otherwise\n designated in writing by the copyright owner as \"Not a Contribution.\"\n\n \"Contributor\" shall mean Licensor and any individual or Legal Entity\n on behalf of whom a Contribution has been received by Licensor and\n subsequently incorporated within the Work.\n\n 2. Grant of Copyright License. Subject to the terms and conditions of\n this License, each Contributor hereby grants to You a perpetual,\n worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n copyright license to reproduce, prepare Derivative Works of,\n publicly display, publicly perform, sublicense, and distribute the\n Work and such Derivative Works in Source or Object form.\n\n 3. Grant of Patent License. Subject to the terms and conditions of\n this License, each Contributor hereby grants to You a perpetual,\n worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n (except as stated in this section) patent license to make, have made,\n use, offer to sell, sell, import, and otherwise transfer the Work,\n where such license applies only to those patent claims licensable\n by such Contributor that are necessarily infringed by their\n Contribution(s) alone or by combination of their Contribution(s)\n with the Work to which such Contribution(s) was submitted. If You\n institute patent litigation against any entity (including a\n cross-claim or counterclaim in a lawsuit) alleging that the Work\n or a Contribution incorporated within the Work constitutes direct\n or contributory patent infringement, then any patent licenses\n granted to You under this License for that Work shall terminate\n as of the date such litigation is filed.\n\n 4. Redistribution. You may reproduce and distribute copies of the\n Work or Derivative Works thereof in any medium, with or without\n modifications, and in Source or Object form, provided that You\n meet the following conditions:\n\n (a) You must give any other recipients of the Work or\n Derivative Works a copy of this License; and\n\n (b) You must cause any modified files to carry prominent notices\n stating that You changed the files; and\n\n (c) You must retain, in the Source form of any Derivative Works\n that You distribute, all copyright, patent, trademark, and\n attribution notices from the Source form of the Work,\n excluding those notices that do not pertain to any part of\n the Derivative Works; and\n\n (d) If the Work includes a \"NOTICE\" text file as part of its\n distribution, then any Derivative Works that You distribute must\n include a readable copy of the attribution notices contained\n within such NOTICE file, excluding those notices that do not\n pertain to any part of the Derivative Works, in at least one\n of the following places: within a NOTICE text file distributed\n as part of the Derivative Works; within the Source form or\n documentation, if provided along with the Derivative Works; or,\n within a display generated by the Derivative Works, if and\n wherever such third-party notices normally appear. The contents\n of the NOTICE file are for informational purposes only and\n do not modify the License. You may add Your own attribution\n notices within Derivative Works that You distribute, alongside\n or as an addendum to the NOTICE text from the Work, provided\n that such additional attribution notices cannot be construed\n as modifying the License.\n\n You may add Your own copyright statement to Your modifications and\n may provide additional or different license terms and conditions\n for use, reproduction, or distribution of Your modifications, or\n for any such Derivative Works as a whole, provided Your use,\n reproduction, and distribution of the Work otherwise complies with\n the conditions stated in this License.\n\n 5. Submission of Contributions. Unless You explicitly state otherwise,\n any Contribution intentionally submitted for inclusion in the Work\n by You to the Licensor shall be under the terms and conditions of\n this License, without any additional terms or conditions.\n Notwithstanding the above, nothing herein shall supersede or modify\n the terms of any separate license agreement you may have executed\n with Licensor regarding such Contributions.\n\n 6. Trademarks. This License does not grant permission to use the trade\n names, trademarks, service marks, or product names of the Licensor,\n except as required for reasonable and customary use in describing the\n origin of the Work and reproducing the content of the NOTICE file.\n\n 7. Disclaimer of Warranty. Unless required by applicable law or\n agreed to in writing, Licensor provides the Work (and each\n Contributor provides its Contributions) on an \"AS IS\" BASIS,\n WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or\n implied, including, without limitation, any warranties or conditions\n of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A\n PARTICULAR PURPOSE. You are solely responsible for determining the\n appropriateness of using or redistributing the Work and assume any\n risks associated with Your exercise of permissions under this License.\n\n 8. Limitation of Liability. In no event and under no legal theory,\n whether in tort (including negligence), contract, or otherwise,\n unless required by applicable law (such as deliberate and grossly\n negligent acts) or agreed to in writing, shall any Contributor be\n liable to You for damages, including any direct, indirect, special,\n incidental, or consequential damages of any character arising as a\n result of this License or out of the use or inability to use the\n Work (including but not limited to damages for loss of goodwill,\n work stoppage, computer failure or malfunction, or any and all\n other commercial damages or losses), even if such Contributor\n has been advised of the possibility of such damages.\n\n 9. Accepting Warranty or Additional Liability. While redistributing\n the Work or Derivative Works thereof, You may choose to offer,\n and charge a fee for, acceptance of support, warranty, indemnity,\n or other liability obligations and/or rights consistent with this\n License. However, in accepting such obligations, You may act only\n on Your own behalf and on Your sole responsibility, not on behalf\n of any other Contributor, and only if You agree to indemnify,\n defend, and hold each Contributor harmless for any liability\n incurred by, or claims asserted against, such Contributor by reason\n of your accepting any such warranty or additional liability.\n\n END OF TERMS AND CONDITIONS\n\n APPENDIX: How to apply the Apache License to your work.\n\n To apply the Apache License to your work, attach the following\n boilerplate notice, with the fields enclosed by brackets \"[]\"\n replaced with your own identifying information. (Don't include\n the brackets!) The text should be enclosed in the appropriate\n comment syntax for the file format. We also recommend that a\n file or class name and description of purpose be included on the\n same \"printed page\" as the copyright notice for easier\n identification within third-party archives.\n\n Copyright [yyyy] [name of copyright owner]\n\n Licensed under the Apache License, Version 2.0 (the \"License\");\n you may not use this file except in compliance with the License.\n You may obtain a copy of the License at\n\n http://www.apache.org/licenses/LICENSE-2.0\n\n Unless required by applicable law or agreed to in writing, software\n distributed under the License is distributed on an \"AS IS\" BASIS,\n WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n See the License for the specific language governing permissions and\n limitations under the License.\n"
},
{
"path": "README.md",
"content": "\n
\n\n\nAssembler CSS is a highly performant utility-first framework that allows you to quickly prototype and build modern \nwebsites and UI components without the need to install and maintain complex software.\n\n## Usage\n\nIncorporating Assembler CSS within your project is a trivial task. \nJust add a `script` tag before the `head` closing tag, and you are good to go!\n\n```html\n\n```\n\nNow you are ready to try out Assembler CSS and write your first UI component.\n\n```html\n
\n \n
\n
Fresh veggies
\n
600g
\n
\n Any veggie can belong on your menu, so choose what you love and use the rest\n for future meals and snacks you can enjoy in flavorful ways.\n
\n
\n
\n```\n\n## Documentation\n\nThe full documentation for Assembler CSS can be found [here][documentation].\n\n## Installation\n\nYou could also install Assembler CSS as an npm package by issuing the following command:\n\n```shell\nnpm install @asmcss/assembler\n```\n\nOr, if you are a Yarn user\n\n```shell\nyarn add @asmcss/assembler\n```\n\n## License\n\nAssembler CSS is licensed under the permissive [Apache License, Version 2.0][apache_license].\n\n## Browser support\n\nAssembler CSS is designed to run on the latest stable versions of all the major browsers: \nChrome, Edge, Firefox, and Safari. We do not support any version of IE.\n\nWe have conducted intensive manual testing on the following operating systems and browsers:\n\n- Ubuntu Linux 20.04: Chrome and Firefox\n- Windows 10: Edge, Chrome, and Firefox\n- MacOS Big Sur: Safari, Chrome, Edge, and Firefox\n- Android (tablet and mobile): Chrome\n- iOS 14 (tablet and mobile): Safari and Chrome\n\n## Road to v1.0.0\n\n- [x] Basic functionalities\n- [x] Add support for states\n- [x] Add support for scopes\n- [x] Add support for mixins\n- [x] Add support for custom selector attribute\n- [x] Add support for custom elements\n- [ ] Add automated tests, so we can make sure we don’t mess up things in future releases\n- [ ] Cleanup & prepare stable releases\n\n\n[apache_license]: https://www.apache.org/licenses/LICENSE-2.0 \"Apache License\"\n[documentation]: https://asmcss.com/docs/1.x/ \"Assembler CSS documentation\"\n\n"
},
{
"path": "dist/assembler.cjs.js",
"content": "'use strict';\n\nObject.defineProperty(exports, '__esModule', { value: true });\n\n/*\n * Copyright 2021 Zindex Software\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nconst positive_number_regex = /^[0-9]+(\\.5)?$/;\nconst number_regex = /^-?[0-9]+(\\.5)?$/;\nconst font_size_regex = /^(xs|sm|base|lg|([2-9])?xl)$/;\nconst line_height_regex = /^(none|tight|snug|normal|relaxed|loose)$/;\nconst elevation_regex = /^[0-9]|1[0-9]|2[0-4]$/;\nconst shadow_regex = /^[1-6]$/;\nconst letter_spacing_regex = /^(tighter|tight|normal|wide|wider|widest)$/;\nconst radius_regex = /^(xs|sm|md|lg|xl|pill)$/;\nconst order_regex = /^(first|last|none)$/;\n// do not match comma inside parenthesis\n// 2px, linear-gradient(blue, red), inline => [2px, linear-gradient(blue, red), inline]\nconst args_delimiter = /\\s*,\\s*(?![^(]*\\))/gm;\nconst PROPERTY_LIST = [\n \"align-content\",\n \"align-items\",\n \"align-self\",\n \"animation\",\n \"appearance\",\n \"backdrop-filter\",\n \"background\",\n \"background-attachment\",\n \"background-blend-mode\",\n \"background-clip\",\n \"background-color\",\n \"background-image\",\n \"background-position\",\n \"background-repeat\",\n \"background-size\",\n \"backface-visibility\",\n \"border\",\n \"border-bottom\",\n \"border-bottom-color\",\n \"border-bottom-style\",\n \"border-bottom-width\",\n \"border-bottom-left-radius\",\n \"border-bottom-right-radius\",\n \"border-collapse\",\n \"border-color\",\n \"border-left\",\n \"border-left-color\",\n \"border-left-style\",\n \"border-left-width\",\n \"border-radius\",\n \"border-right\",\n \"border-right-color\",\n \"border-right-style\",\n \"border-right-width\",\n \"border-style\",\n \"border-top\",\n \"border-top-color\",\n \"border-top-style\",\n \"border-top-width\",\n \"border-top-left-radius\",\n \"border-top-right-radius\",\n \"border-width\",\n \"bottom\",\n \"box-orient\",\n \"box-shadow\",\n \"box-sizing\",\n \"clear\",\n \"clip\",\n \"clip-path\",\n \"color\",\n \"column-gap\",\n \"content\",\n \"cursor\",\n \"display\",\n \"filter\",\n \"flex\",\n \"flex-basis\",\n \"flex-direction\",\n \"flex-flow\",\n \"flex-grow\",\n \"flex-shrink\",\n \"flex-wrap\",\n \"float\",\n \"font-family\",\n \"font-size\",\n \"font-style\",\n \"font-weight\",\n \"font-variant-numeric\",\n \"gap\",\n \"grid\",\n \"grid-area\",\n \"grid-auto-columns\",\n \"grid-auto-flow\",\n \"grid-auto-rows\",\n \"grid-column\",\n \"grid-column-end\",\n \"grid-column-start\",\n \"grid-row\",\n \"grid-row-end\",\n \"grid-row-start\",\n \"grid-template\",\n \"grid-template-areas\",\n \"grid-template-columns\",\n \"grid-template-rows\",\n \"height\",\n \"isolation\",\n \"justify-content\",\n \"justify-items\",\n \"justify-self\",\n \"left\",\n \"letter-spacing\",\n \"line-break\",\n \"line-clamp\",\n \"line-height\",\n \"list-style-position\",\n \"list-style-type\",\n \"margin\",\n \"margin-bottom\",\n \"margin-left\",\n \"margin-right\",\n \"margin-top\",\n \"max-height\",\n \"max-width\",\n \"min-height\",\n \"min-width\",\n \"object-fit\",\n \"object-position\",\n \"opacity\",\n \"order\",\n \"outline\",\n \"outline-offset\",\n \"overflow\",\n \"overflow-wrap\",\n \"overflow-x\",\n \"overflow-y\",\n \"overscroll-behavior\",\n \"overscroll-behavior-x\",\n \"overscroll-behavior-y\",\n \"padding\",\n \"padding-bottom\",\n \"padding-left\",\n \"padding-right\",\n \"padding-top\",\n \"perspective\",\n \"perspective-origin\",\n \"place-content\",\n \"place-items\",\n \"place-self\",\n \"pointer-events\",\n \"position\",\n \"resize\",\n \"right\",\n \"row-gap\",\n \"table-layout\",\n \"text-align\",\n \"text-decoration\",\n \"text-decoration-style\",\n \"text-fill-color\",\n \"text-overflow\",\n \"text-shadow\",\n \"text-transform\",\n \"top\",\n \"transform\",\n \"transform-box\",\n \"transform-origin\",\n \"transform-style\",\n \"transition\",\n \"user-select\",\n \"vertical-align\",\n \"visibility\",\n \"white-space\",\n \"width\",\n \"word-break\",\n \"z-index\",\n];\nconst PROPERTY_VARIANTS = {\n \"animation\": [\"-webkit-animation\"],\n \"appearance\": [\"-webkit-appearance\", \"-moz-appearance\"],\n \"background-clip\": [\"-webkit-background-clip\", \"-moz-background-clip\"],\n \"backdrop-filter\": [\"-webkit-backdrop-filter\"],\n \"box-orient\": [\"-webkit-box-orient\"],\n \"clip-path\": [\"-webkit-clip-path\"],\n \"column-gap\": [\"-moz-column-gap\"],\n \"line-clamp\": [\"-webkit-line-clamp\"],\n \"user-select\": [\"-webkit-user-select\", \"-moz-user-select\"],\n \"text-fill-color\": [\"-webkit-text-fill-color\", \"-moz-text-fill-color\"]\n};\nconst STATE_LIST = [\n \"normal\",\n \"link\",\n \"visited\",\n \"empty\",\n \"placeholder-shown\",\n \"default\",\n \"checked\",\n \"indeterminate\",\n \"valid\",\n \"invalid\",\n \"required\",\n \"optional\",\n \"out-of-range\",\n \"in-range\",\n \"hover\",\n \"focus\",\n \"focus-within\",\n \"focus-visible\",\n \"active\",\n \"read-only\",\n \"read-write\",\n \"disabled\",\n \"enabled\",\n];\nconst ALIASES = {\n \"backdrop\": \"backdrop-filter\",\n \"bg\": \"background\",\n \"bg-attachment\": \"background-attachment\",\n \"bg-blend\": \"background-blend-mode\",\n \"bg-clip\": \"background-clip\",\n \"bg-color\": \"background-color\",\n \"bg-image\": \"background-image\",\n \"bg-position\": \"background-position\",\n \"bg-repeat\": \"background-repeat\",\n \"bg-size\": \"background-size\",\n \"radius\": \"border-radius\",\n \"radius-top\": [\"border-top-left-radius\", \"border-top-right-radius\"],\n \"radius-bottom\": [\"border-bottom-left-radius\", \"border-bottom-right-radius\"],\n \"radius-left\": [\"border-bottom-left-radius\", \"border-top-left-radius\"],\n \"radius-right\": [\"border-bottom-right-radius\", \"border-top-right-radius\"],\n \"radius-bl\": \"border-bottom-left-radius\",\n \"radius-br\": \"border-bottom-right-radius\",\n \"radius-tl\": \"border-top-left-radius\",\n \"radius-tr\": \"border-top-right-radius\",\n \"b\": \"border\",\n \"bc\": \"border-color\",\n \"bs\": \"border-style\",\n \"bw\": \"border-width\",\n \"bt\": \"border-top\",\n \"bl\": \"border-left\",\n \"br\": \"border-right\",\n \"bb\": \"border-bottom\",\n \"bt-color\": \"border-top-color\",\n \"bt-style\": \"border-top-style\",\n \"bt-width\": \"border-top-width\",\n \"bl-color\": \"border-left-color\",\n \"bl-style\": \"border-left-style\",\n \"bl-width\": \"border-left-width\",\n \"br-color\": \"border-right-color\",\n \"br-style\": \"border-right-style\",\n \"br-width\": \"border-right-width\",\n \"bb-color\": \"border-bottom-color\",\n \"bb-style\": \"border-bottom-style\",\n \"bb-width\": \"border-bottom-width\",\n \"m\": \"margin\",\n \"mt\": \"margin-top\",\n \"mb\": \"margin-bottom\",\n \"ml\": \"margin-left\",\n \"mr\": \"margin-right\",\n \"mx\": [\"margin-left\", \"margin-right\"],\n \"my\": [\"margin-top\", \"margin-bottom\"],\n \"p\": \"padding\",\n \"pt\": \"padding-top\",\n \"pb\": \"padding-bottom\",\n \"pl\": \"padding-left\",\n \"pr\": \"padding-right\",\n \"px\": [\"padding-left\", \"padding-right\"],\n \"py\": [\"padding-top\", \"padding-bottom\"],\n \"min-w\": \"min-width\",\n \"max-w\": \"max-width\",\n \"min-h\": \"min-height\",\n \"max-h\": \"max-height\",\n \"w\": \"width\",\n \"h\": \"height\",\n \"img\": \"background-image\",\n \"gradient\": \"background-image\",\n \"radial-gradient\": \"background-image\",\n \"conic-gradient\": \"background-image\",\n \"flex-dir\": \"flex-direction\",\n \"col-reverse\": \"flex-direction\",\n \"row-reverse\": \"flex-direction\",\n \"grid-rows\": \"grid-template-rows\",\n \"grid-flow\": \"grid-auto-flow\",\n \"row-start\": \"grid-row-start\",\n \"row-span\": \"grid-row-end\",\n \"grid-cols\": \"grid-template-columns\",\n \"col-start\": \"grid-column-start\",\n \"col-span\": \"grid-column-end\",\n \"col-gap\": \"column-gap\",\n \"auto-cols\": \"grid-auto-columns\",\n \"auto-rows\": \"grid-auto-rows\",\n \"e\": \"box-shadow\",\n \"shadow\": \"box-shadow\",\n \"overscroll\": \"overscroll-behavior\",\n \"overscroll-x\": \"overscroll-behavior-x\",\n \"overscroll-y\": \"overscroll-behavior-y\",\n \"inset\": [\"top\", \"bottom\", \"left\", \"right\"],\n \"inset-x\": [\"left\", \"right\"],\n \"inset-y\": [\"top\", \"bottom\"],\n \"z\": \"z-index\",\n \"decoration\": \"text-decoration\",\n \"v-align\": \"vertical-align\",\n \"ws\": \"white-space\",\n \"ring\": \"box-shadow\",\n \"leading\": \"line-height\",\n \"tracking\": \"letter-spacing\",\n \"break\": v => {\n if (v === \"words\")\n return [\"overflow-wrap\"];\n if (v === \"all\")\n return [\"word-break\"];\n return [\"overflow-wrap\", \"word-break\"];\n },\n \"truncate\": [\"overflow\", \"text-overflow\", \"white-space\"],\n \"flex\": v => v ? \"flex\" : \"display\",\n \"inline-flex\": \"display\",\n \"grid\": \"display\",\n \"inline-grid\": \"display\",\n \"hidden\": \"display\",\n \"block\": \"display\",\n \"inline-block\": \"display\",\n \"static\": \"position\",\n \"fixed\": \"position\",\n \"absolute\": \"position\",\n \"relative\": \"position\",\n \"sticky\": \"position\",\n \"visible\": \"visibility\",\n \"invisible\": \"visibility\",\n \"flex-row\": \"flex-direction\",\n \"flex-col\": \"flex-direction\",\n \"list\": v => {\n if (v === \"inside\" || v === \"outside\") {\n return \"list-style-position\";\n }\n return \"list-style-type\";\n },\n \"text\": v => font_size_regex.test(v) ? [\"font-size\", \"line-height\"] : \"font-size\",\n \"uppercase\": \"text-transform\",\n \"lowercase\": \"text-transform\",\n \"capitalize\": \"text-transform\",\n \"normal-case\": \"text-transform\",\n \"variant\": \"font-variant-numeric\",\n \"wave-clip\": \"clip-path\",\n};\nconst DEFAULT_VALUES = {\n \"border\": [\"1px solid transparent\"],\n \"truncate\": [\"hidden\", \"ellipsis\", \"nowrap\"],\n \"flex\": \"flex\",\n \"inline-flex\": \"inline-flex\",\n \"grid\": \"grid\",\n \"inline-grid\": \"inline-grid\",\n \"hidden\": \"none\",\n \"block\": \"block\",\n \"inline-block\": \"inline-block\",\n \"static\": \"static\",\n \"fixed\": \"fixed\",\n \"absolute\": \"absolute\",\n \"relative\": \"relative\",\n \"sticky\": \"sticky\",\n \"visible\": \"visible\",\n \"invisible\": \"hidden\",\n \"flex-row\": \"row\",\n \"flex-col\": \"column\",\n \"flex-wrap\": \"wrap\",\n \"flex-grow\": \"1\",\n \"flex-shrink\": \"1\",\n \"col-reverse\": \"column-reverse\",\n \"row-reverse\": \"row-reverse\",\n \"uppercase\": \"uppercase\",\n \"lowercase\": \"lowercase\",\n \"capitalize\": \"capitalize\",\n \"normal-case\": \"none\",\n \"radius\": \"sm\",\n \"shadow\": \"1\",\n \"wave-clip\": \"50, 2, 50\"\n};\nconst unit = v => number_regex.test(v) ? `calc(${v} * @unit-size)` : v;\nconst positive_unit = v => positive_number_regex.test(v) ? `calc(${v} * @unit-size)` : v;\nconst grid_repeat = v => `repeat(${v}, minmax(0, 1fr))`;\nconst grid_rowspan = v => `span ${v}`;\nconst elevation = v => elevation_regex.test(v) ? `@elevation-${v}` : v;\nconst ring = v => `0 0 0 ${v}`;\nconst fontSize = v => font_size_regex.test(v) ? \"@font-size-\" + v : v;\nconst lineHeight = v => {\n if (positive_number_regex.test(v)) {\n return `calc(${v} * @unit-size)`;\n }\n return line_height_regex.test(v) ? \"@line-height-\" + v : v;\n};\nconst letterSpacing = v => letter_spacing_regex.test(v) ? \"@letter-spacing-\" + v : v;\nconst radius = v => radius_regex.test(v) ? \"@border-radius-\" + v : v;\nconst breakCallback = v => {\n if (v === \"all\")\n return \"break-all\";\n if (v === \"words\")\n return \"break-word\";\n return [\"normal\", \"normal\"];\n};\nconst orderCallback = v => {\n if (!order_regex.test(v)) {\n return v;\n }\n if (v === \"first\")\n return \"-9999\";\n if (v === \"last\")\n return \"9999\";\n return \"0\";\n};\nconst waveClipIds = new Set();\nconst generateWave = (value, original, media, state, handler) => {\n const args = value.split(args_delimiter).map(v => v.trim()).map(v => parseInt(v));\n let [amplitude, frequency, segments] = args;\n amplitude = amplitude !== null && amplitude !== void 0 ? amplitude : 50;\n frequency = frequency !== null && frequency !== void 0 ? frequency : 2;\n segments = segments !== null && segments !== void 0 ? segments : 50;\n const id = amplitude + '-' + frequency + '-' + segments;\n if (waveClipIds.has(id)) {\n return '@wave-clip-' + id;\n }\n waveClipIds.add(id);\n const precision = segments * frequency;\n const units = Math.PI * 2 * frequency;\n const factor = precision / 100;\n amplitude /= 2;\n let polygon = 'polygon(100% 0%, 0% 0%';\n for (let i = 0; i <= precision; i++) {\n const val = Math.abs((amplitude * Math.cos((i / precision) * units) - amplitude)).toFixed(2);\n polygon += ', ' + (i / factor) + '% calc(100% - ' + val + 'px)';\n }\n polygon += ')';\n handler.style.cssRules[0].style.setProperty('--wave-clip-' + id, polygon);\n return '@wave-clip-' + id;\n};\nconst VALUE_WRAPPER = {\n \"img\": v => `url(${v})`,\n \"gradient\": (value) => `linear-gradient(${value})`,\n \"radial-gradient\": (value) => `radial-gradient(${value})`,\n \"conic-gradient\": (value) => `conic-gradient(${value})`,\n \"grid-rows\": grid_repeat,\n \"row-span\": grid_rowspan,\n \"grid-cols\": grid_repeat,\n \"col-span\": grid_rowspan,\n \"e\": elevation,\n \"shadow\": v => shadow_regex.test(v) ? `@shadow-${v}` : v,\n \"ring\": ring,\n \"font-size\": fontSize,\n \"leading\": lineHeight,\n \"tracking\": letterSpacing,\n \"text\": v => font_size_regex.test(v) ? [\"@font-size-\" + v, \"@font-size-leading-\" + v] : v,\n \"radius\": radius,\n \"radius-top\": radius,\n \"radius-left\": radius,\n \"radius-bottom\": radius,\n \"radius-right\": radius,\n \"radius-tl\": radius,\n \"radius-bl\": radius,\n \"radius-tr\": radius,\n \"radius-br\": radius,\n \"border-radius\": radius,\n \"break\": breakCallback,\n \"flex-wrap\": (v) => v === \"reverse\" ? \"wrap-reverse\" : v,\n \"flex-row\": v => v === \"reverse\" ? \"row-reverse\" : v,\n \"flex-col\": v => v === \"reverse\" ? \"column-reverse\" : v,\n \"order\": orderCallback,\n \"padding\": positive_unit,\n \"padding-top\": positive_unit,\n \"padding-bottom\": positive_unit,\n \"padding-left\": positive_unit,\n \"padding-right\": positive_unit,\n \"p\": positive_unit,\n \"pt\": positive_unit,\n \"pb\": positive_unit,\n \"pl\": positive_unit,\n \"pr\": positive_unit,\n \"px\": positive_unit,\n \"py\": positive_unit,\n \"margin\": unit,\n \"margin-top\": unit,\n \"margin-bottom\": unit,\n \"margin-left\": unit,\n \"margin-right\": unit,\n \"m\": unit,\n \"mt\": unit,\n \"mb\": unit,\n \"ml\": unit,\n \"mr\": unit,\n \"mx\": unit,\n \"my\": unit,\n \"w\": positive_unit,\n \"h\": positive_unit,\n \"width\": positive_unit,\n \"height\": positive_unit,\n \"min-w\": positive_unit,\n \"max-w\": positive_unit,\n \"min-h\": positive_unit,\n \"max-h\": positive_unit,\n \"min-width\": positive_unit,\n \"max-width\": positive_unit,\n \"min-height\": positive_unit,\n \"max-height\": positive_unit,\n \"wave-clip\": generateWave,\n};\n\n/*\n * Copyright 2021 Zindex Software\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nconst ELEVATION_UMBRA = [\n \"0px 0px 0px 0px\", \"0px 2px 1px -1px\", \"0px 3px 1px -2px\", \"0px 3px 3px -2px\", \"0px 2px 4px -1px\",\n \"0px 3px 5px -1px\", \"0px 3px 5px -1px\", \"0px 4px 5px -2px\", \"0px 5px 5px -3px\", \"0px 5px 6px -3px\",\n \"0px 6px 6px -3px\", \"0px 6px 7px -4px\", \"0px 7px 8px -4px\", \"0px 7px 8px -4px\", \"0px 7px 9px -4px\",\n \"0px 8px 9px -5px\", \"0px 8px 10px -5px\", \"0px 8px 11px -5px\", \"0px 9px 11px -5px\", \"0px 9px 12px -6px\",\n \"0px 10px 13px -6px\", \"0px 10px 13px -6px\", \"0px 10px 14px -6px\", \"0px 11px 14px -7px\", \"0px 11px 15px -7px\"\n];\nconst ELEVATION_PENUMBRA = [\n \"0px 0px 0px 0px\", \"0px 1px 1px 0px\", \"0px 2px 2px 0px\", \"0px 3px 4px 0px\", \"0px 4px 5px 0px\", \"0px 5px 8px 0px\",\n \"0px 6px 10px 0px\", \"0px 7px 10px 1px\", \"0px 8px 10px 1px\", \"0px 9px 12px 1px\", \"0px 10px 14px 1px\",\n \"0px 11px 15px 1px\", \"0px 12px 17px 2px\", \"0px 13px 19px 2px\", \"0px 14px 21px 2px\", \"0px 15px 22px 2px\",\n \"0px 16px 24px 2px\", \"0px 17px 26px 2px\", \"0px 18px 28px 2px\", \"0px 19px 29px 2px\", \"0px 20px 31px 3px\",\n \"0px 21px 33px 3px\", \"0px 22px 35px 3px\", \"0px 23px 36px 3px\", \"0px 24px 38px 3px\"\n];\nconst ELEVATION_AMBIENT = [\n \"0px 0px 0px 0px\", \"0px 1px 3px 0px\", \"0px 1px 5px 0px\", \"0px 1px 8px 0px\", \"0px 1px 10px 0px\", \"0px 1px 14px 0px\",\n \"0px 1px 18px 0px\", \"0px 2px 16px 1px\", \"0px 3px 14px 2px\", \"0px 3px 16px 2px\", \"0px 4px 18px 3px\",\n \"0px 4px 20px 3px\", \"0px 5px 22px 4px\", \"0px 5px 24px 4px\", \"0px 5px 26px 4px\", \"0px 6px 28px 5px\",\n \"0px 6px 30px 5px\", \"0px 6px 32px 5px\", \"0px 7px 34px 6px\", \"0px 7px 36px 6px\", \"0px 8px 38px 7px\",\n \"0px 8px 40px 7px\", \"0px 8px 42px 7px\", \"0px 9px 44px 8px\", \"0px 9px 46px 8px\"\n];\nconst BORDER_RADIUS = {\n none: \"0\",\n xs: \"0.125rem\",\n sm: \"0.25rem\",\n md: \"0.5rem\",\n lg: \"0.75rem\",\n xl: \"1rem\",\n pill: \"9999px\"\n};\nconst LETTER_SPACING = {\n tighter: \"-0.05rem\",\n tight: \"-0.025rem\",\n normal: \"0\",\n wide: \"0.025rem\",\n wider: \"0.05rem\",\n widest: \"0.1rem\"\n};\nconst LINE_HEIGHT = {\n none: \"1\",\n tight: \"1.25\",\n snug: \"1.375\",\n normal: \"1.5\",\n relaxed: \"1.625\",\n loose: \"2\"\n};\nconst FONT_SIZES = {\n xs: \"0.75rem\",\n sm: \"0.875rem\",\n base: \"1rem\",\n lg: \"1.125rem\",\n xl: \"1.25rem\",\n \"2xl\": \"1.5rem\",\n \"3xl\": \"1.875rem\",\n \"4xl\": \"2.25rem\",\n \"5xl\": \"3rem\",\n \"6xl\": \"3.75rem\",\n \"7xl\": \"4.5rem\",\n \"8xl\": \"6rem\",\n \"9xl\": \"8rem\",\n};\nconst FONT_SIZE_LEADING = {\n xs: \"1rem\",\n sm: \"1.25rem\",\n base: \"1.5rem\",\n lg: \"1.75rem\",\n xl: \"1.75rem\",\n \"2xl\": \"2rem\",\n \"3xl\": \"2.25rem\",\n \"4xl\": \"2.5rem\",\n \"5xl\": \"1\",\n \"6xl\": \"1\",\n \"7xl\": \"1\",\n \"8xl\": \"1\",\n \"9xl\": \"1\",\n};\nconst FONT_FAMILIES = {\n \"sans-serif\": \"-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol\",\n serif: \"Georgia, Cambria, Times New Roman, Times, serif\",\n monospace: \"Lucida Console, Monaco, monospace\"\n};\nconst SHADOW = [\n \"0px 2px 4px 0px hsla(0, 0%, 20%, 0.1), 0px 6px 6px -8px hsla(0, 0%, 0%, 15%)\",\n \"0px 2px 8px -1px hsla(0, 0%, 20%, 0.1), 0px 16px 16px -12px hsla(0, 0%, 0%, 15%)\",\n \"0px 2px 16px -2px hsla(0, 0%, 20%, 0.1), 0px 22px 18px -16px hsla(0, 0%, 0%, 15%)\",\n \"0px 2px 20px -3px hsla(0, 0%, 20%, 0.1), 0px 28px 22px -18px hsla(0, 0%, 0%, 15%)\",\n \"0px 2px 32px -2px hsla(0, 0%, 20%, 0.1), 0px 32px 26px -18px hsla(0, 0%, 0%, 15%)\",\n \"0px 2px 36px -1px hsla(0, 0%, 20%, 0.1), 0px 42px 34px -24px hsla(0, 0%, 0%, 15%)\"\n];\nfunction generateRootVariables(settings) {\n let vars = '--elevation-umbra: rgba(0, 0, 0, .2);--elevation-penumbra: rgba(0, 0, 0, .14);--elevation-ambient: rgba(0, 0, 0, .12);';\n for (let i = 0; i < 25; i++) {\n vars += `--elevation-${i}:${ELEVATION_UMBRA[i]} var(--elevation-umbra), ${ELEVATION_PENUMBRA[i]} var(--elevation-penumbra), ${ELEVATION_AMBIENT[i]} var(--elevation-ambient);`;\n }\n for (let i = 0; i < 6; i++) {\n vars += `--shadow-${i + 1}:${SHADOW[i]};`;\n }\n for (const [key, value] of Object.entries(BORDER_RADIUS)) {\n vars += `--border-radius-${key}:${value};`;\n }\n for (const [key, value] of Object.entries(LETTER_SPACING)) {\n vars += `--letter-spacing-${key}:${value};`;\n }\n for (const [key, value] of Object.entries(LINE_HEIGHT)) {\n vars += `--line-height-${key}:${value};`;\n }\n for (const [key, value] of Object.entries(FONT_FAMILIES)) {\n vars += `--${key}:${value};`;\n }\n for (const [key, value] of Object.entries(FONT_SIZES)) {\n vars += `--font-size-${key}:${value};`;\n }\n for (const [key, value] of Object.entries(FONT_SIZE_LEADING)) {\n vars += `--font-size-leading-${key}:${value};`;\n }\n for (const bp of settings.breakpoints) {\n if (bp === 'all') {\n continue;\n }\n vars += `--breakpoint-${bp}: ${settings.media[bp]};`;\n }\n vars += '--unit-size:0.25rem;';\n return ':root{' + vars + '}';\n}\n\n/*\n * Copyright 2021 Zindex Software\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nconst ESCAPE_REGEX = /\\\\\\n/g;\nconst PROPERTY_REGEX$1 = /^--([a-zA-Z0-9-_]+)--(scope|mixin|register)$/;\nclass RootClass {\n constructor() {\n this.cache = new Map();\n this.scopes = [\"\", \"text-clip\", \"selection\", \"placeholder\", \"before\", \"after\", \"first-letter\", \"first-line\",\n \"l1\", \"l2\", \"marker-l1\", \"marker\", \"sibling\", \"child\", \"even\", \"odd\", \"first\", \"last\", \"dark\", \"light\",\n \"landscape\", \"portrait\", \"motion-reduce\", \"motion-safe\"\n ];\n this.registeredProperties = [];\n const { cache } = this;\n const tc = '-webkit-background-clip: text !important;-moz-background-clip:text !important;background-clip:text !important;';\n cache.set(\"--text-clip--scope\", `$selector {${tc}}`);\n cache.set(\"--l1--scope\", \"$selector > * {$body}\");\n cache.set(\"--l2--scope\", \"$selector > * > * {$body}\");\n cache.set(\"--sibling--scope\", \"$selector > * + * {$body}\");\n cache.set(\"--child--scope\", \"$selector > $class {$body}\");\n cache.set(\"--selection--scope\", \"$selector::selection {$body}\");\n cache.set(\"--placeholder--scope\", \"$selector::placeholder {$body}\");\n cache.set(\"--marker--scope\", \"$selector::marker {$body}\");\n cache.set(\"--marker-l1--scope\", \"$selector > *::marker {$body}\");\n cache.set(\"--before--scope\", \"$selector::before {$body}\");\n cache.set(\"--after--scope\", \"$selector::after {$body}\");\n cache.set(\"--even--scope\", \"$selector:nth-child(even) {$body}\");\n cache.set(\"--odd--scope\", \"$selector:nth-child(odd) {$body}\");\n cache.set(\"--first--scope\", \"$selector:first-child {$body}\");\n cache.set(\"--last--scope\", \"$selector:last-child {$body}\");\n cache.set(\"--first-letter--scope\", \"$selector::first-letter {$body}\");\n cache.set(\"--first-line--scope\", \"$selector::first-line {$body}\");\n cache.set(\"--dark--scope\", \"@media(prefers-color-scheme: dark) {$selector {$body}}\");\n cache.set(\"--light--scope\", \"@media(prefers-color-scheme: light) {$selector {$body}}\");\n cache.set(\"--landscape--scope\", \"@media(orientation: landscape) {$selector {$body}}\");\n cache.set(\"--portrait--scope\", \"@media(orientation: portrait) {$selector {$body}}\");\n cache.set(\"--motion-reduce--scope\", \"@media(prefers-reduced-motion: reduce) {$selector {$body}}\");\n cache.set(\"--motion-safe--scope\", \"@media(prefers-reduced-motion: no-preference) {$selector {$body}}\");\n this.initialize();\n }\n initialize() {\n const { cache, scopes, registeredProperties } = this;\n for (const style of this.getComputedStyles()) {\n for (const property of style) {\n const match = PROPERTY_REGEX$1.exec(property);\n if (match == null) {\n continue;\n }\n const name = match[1];\n const value = this.getValue(style, property);\n cache.set(property, value);\n switch (match[2]) {\n case \"scope\":\n if (scopes.indexOf(name) === -1) {\n scopes.push(name);\n }\n break;\n case \"register\":\n if (value === 'true' || value === '') {\n registeredProperties.push({ name, aliases: [] });\n }\n else {\n const aliases = value.split(',').map(v => v.trim()).filter(v => v !== '');\n registeredProperties.push({ name, aliases });\n }\n break;\n }\n }\n }\n }\n getComputedStyles() {\n const styles = [];\n for (let si = 0, sl = document.styleSheets.length; si < sl; si++) {\n const styleSheet = document.styleSheets[si];\n if (styleSheet.href !== null && styleSheet.href.indexOf(window.location.origin) !== 0) {\n continue;\n }\n if (styleSheet.href === null && styleSheet.ownerNode !== null\n && styleSheet.ownerNode instanceof Element && styleSheet.ownerNode.id === 'opis-assembler-css') {\n continue;\n }\n const rule = styleSheet.cssRules[0];\n if (rule.type === CSSRule.STYLE_RULE && rule.selectorText === ':root') {\n styles.push(rule.style);\n }\n }\n return styles;\n }\n getValue(style, property) {\n let value = style.getPropertyValue(property).replace(ESCAPE_REGEX, \"\").trim();\n if (value.startsWith('\"') && value.endsWith('\"')) {\n value = value.substring(1, value.length - 1).trim();\n }\n return value;\n }\n getRegisteredScopes() {\n return this.scopes;\n }\n getRegisteredProperties() {\n return this.registeredProperties;\n }\n getPropertyValue(property) {\n if (this.cache.has(property)) {\n return this.cache.get(property);\n }\n return '';\n }\n}\nconst Root = new RootClass();\n\n/*\n * Copyright 2021 Zindex Software\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nconst regex = /([a-z0-9]|(?=[A-Z]))([A-Z])/g;\nconst HASH_VAR_PREFIX = '--asm-';\nconst HASH_CLASS_PREFIX = 'asm';\nconst PROPERTY_REGEX = /^(?:(?[a-z]{2})\\|)?(?:(?[-a-zA-Z0-9]+)!)?(?[-a-z]+)(?:\\.(?[-a-z]+))?$/m;\nfunction getUserSettings(dataset) {\n const enabled = dataset.enabled === undefined ? true : dataset.enabled === 'true';\n const generate = dataset.generate === undefined ? false : dataset.generate === 'true';\n const constructable = dataset.constructable === undefined ? true : dataset.constructable === 'true';\n const desktopFirst = dataset.mode === undefined ? false : dataset.mode === 'desktop-first';\n const selectorAttribute = dataset.selectorAttribute === undefined ? 'class' : dataset.selectorAttribute;\n const cache = dataset.cache === undefined ? null : dataset.cache;\n const cacheKey = dataset.cacheKey === undefined ? \"assembler-css-cache\" : dataset.cacheKey;\n const registeredProperties = Root.getRegisteredProperties();\n const scopes = Root.getRegisteredScopes();\n for (let i = 0, l = registeredProperties.length; i < l; i++) {\n const prop = registeredProperties[i];\n if (PROPERTY_LIST.indexOf(prop.name) === -1) {\n PROPERTY_LIST.push(prop.name);\n }\n if (prop.aliases.length > 0) {\n PROPERTY_VARIANTS[prop.name] = prop.aliases;\n }\n }\n // Consider all bp\n let breakpoints = ['xs', 'sm', 'md', 'lg', 'xl'];\n if (desktopFirst) {\n // remove xl and reverse\n breakpoints.pop();\n breakpoints.reverse();\n }\n else {\n // remove xs\n breakpoints.shift();\n }\n // Add all\n breakpoints.unshift('all');\n const states = dataset.states === undefined\n ? [\"normal\", \"hover\"]\n : getStringItemList(dataset.states.toLowerCase());\n if (states.indexOf(\"normal\") === -1) {\n // always add normal state\n states.unshift(\"normal\");\n }\n const xs = dataset.breakpointXs || \"512px\";\n const sm = dataset.breakpointSm || (desktopFirst ? \"768px\" : \"512px\");\n const md = dataset.breakpointMd || (desktopFirst ? \"1024px\" : \"768px\");\n const lg = dataset.breakpointLg || (desktopFirst ? \"1280px\" : \"1024px\");\n const xl = dataset.breakpointXl || (\"1280px\");\n const xStyleAttribute = dataset.xStyleAttribute || \"x-style\";\n return {\n enabled,\n generate,\n constructable,\n cache,\n cacheKey,\n desktopFirst,\n scopes,\n states,\n breakpoints,\n media: { xs, sm, md, lg, xl },\n xStyleAttribute,\n selectorAttribute,\n registeredProperties\n };\n}\nfunction style(item) {\n if (typeof item === 'string') {\n return item.trim();\n }\n if (Array.isArray(item)) {\n return item.map(style).join(';');\n }\n const list = [];\n for (const key in item) {\n const value = item[key];\n if (value === undefined) {\n continue;\n }\n const property = key.replace(regex, '$1-$2').toLowerCase();\n list.push(value === null ? property : (property + ':' + value));\n }\n return list.join(';');\n}\nfunction getStringItemList(value, unique = true) {\n const items = value\n .replace(/[,;]/g, ' ')\n .split(/\\s\\s*/g)\n .map(trim)\n .filter(nonEmptyString);\n return unique ? items.filter(uniqueItems) : items;\n}\nfunction trim(value) {\n return value.trim();\n}\nfunction nonEmptyString(value) {\n return value !== '';\n}\nfunction uniqueItems(value, index, self) {\n return self.indexOf(value) === index;\n}\n\n/*\n * Copyright 2021 Zindex Software\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nfunction generateStyles(settings) {\n if (settings.cache) {\n const json = localStorage.getItem(settings.cacheKey + ':' + settings.cache);\n if (json !== null) {\n const content = JSON.parse(json);\n content.tracker = new Set(content.tracker);\n return content;\n }\n const oldCacheKey = localStorage.getItem(settings.cacheKey);\n if (oldCacheKey !== null) {\n localStorage.removeItem(settings.cacheKey + ':' + oldCacheKey);\n }\n localStorage.setItem(settings.cacheKey, settings.cache);\n }\n else {\n const oldCacheKey = localStorage.getItem(settings.cacheKey);\n if (oldCacheKey !== null) {\n localStorage.removeItem(settings.cacheKey + ':' + oldCacheKey);\n localStorage.removeItem(settings.cacheKey);\n }\n }\n const base = STATE_LIST.length, result = [];\n const breakpoints = settings.breakpoints;\n const media_settings = settings.media;\n const desktopFirst = settings.desktopFirst;\n const states = settings.states;\n const tracker = new Set();\n const selectorAttribute = settings.selectorAttribute;\n const selectorPfx = selectorAttribute === 'class'\n ? '.' + HASH_CLASS_PREFIX + '\\\\#'\n : '[' + selectorAttribute + '~=\"' + HASH_CLASS_PREFIX + '#';\n const selectorSfx = selectorAttribute === 'class' ? '' : '\"]';\n result.push(generateRootVariables(settings));\n for (let media_index = 0, l = breakpoints.length; media_index < l; media_index++) {\n const bp = breakpoints[media_index];\n let str = '';\n if (media_index !== 0) {\n if (desktopFirst) {\n str += `@media only screen and (max-width: ${media_settings[bp]}) {`;\n }\n else {\n str += `@media only screen and (min-width: ${media_settings[bp]}) {`;\n }\n }\n for (let name_index = 0, l = PROPERTY_LIST.length; name_index < l; name_index++) {\n const name = PROPERTY_LIST[name_index];\n // generate all states for default media\n const stateList = media_index === 0 ? STATE_LIST : states;\n for (const state of stateList) {\n const state_index = STATE_LIST.indexOf(state);\n if (state_index < 0) {\n continue;\n }\n const hash = (((name_index * base) + media_index) * base + state_index).toString(16);\n const property = HASH_VAR_PREFIX + (media_index > 0 ? bp + '--' : '') + name + (state_index > 0 ? '__' + stateList[state_index] : '');\n tracker.add(hash);\n let variants = PROPERTY_VARIANTS[name], prefix = '';\n if (variants) {\n for (let i = 0, l = variants.length; i < l; i++) {\n prefix += `${variants[i]}:var(${property}) !important;`;\n }\n }\n str += `${selectorPfx + hash + selectorSfx}${state_index > 0 ? ':' + state : ''}{${prefix}${name}:var(${property}) !important}`;\n }\n }\n if (media_index !== 0) {\n str += '}';\n }\n result.push(str);\n }\n const content = {\n content: result.join(''),\n tracker\n };\n if (settings.cache) {\n localStorage.setItem(settings.cacheKey, settings.cache);\n localStorage.setItem(settings.cacheKey + ':' + settings.cache, JSON.stringify({\n content: content.content,\n tracker: [...tracker]\n }));\n }\n return content;\n}\n\n/*\n * Copyright 2021 Zindex Software\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nlet _documentObserver = null;\nlet _elementObserver = null;\nlet _shadowRootObserver = null;\nconst observedElements = new WeakMap();\nfunction observeTree(element, handler) {\n for (let e = element; e != null; e = e.nextElementSibling) {\n if (!observedElements.has(e)) {\n observe(e, handler);\n }\n else {\n observeTree(e.firstElementChild, handler);\n }\n }\n}\nfunction observeDocument(document, handler) {\n if (_documentObserver === null) {\n _documentObserver = new MutationObserver(function (mutations) {\n for (let i = 0, l = mutations.length; i < l; i++) {\n const nodes = mutations[i].addedNodes;\n for (let i = 0; i < nodes.length; i++) {\n if (nodes[i] instanceof HTMLElement) {\n observe(nodes[i], handler);\n }\n }\n }\n });\n }\n _documentObserver.observe(document, { childList: true, subtree: true });\n}\nfunction observeElement(element, handler) {\n if (_elementObserver === null) {\n _elementObserver = new MutationObserver(function (mutations) {\n for (const mutation of mutations) {\n const target = mutation.target;\n observedElements.set(target, handler.handleStyleChange(target, target.getAttribute(mutation.attributeName), observedElements.get(target)));\n }\n });\n }\n _elementObserver.observe(element, {\n attributes: true,\n attributeOldValue: true,\n childList: false,\n attributeFilter: [handler.userSettings.xStyleAttribute],\n });\n}\nfunction observeShadow(shadow, handler) {\n if (_shadowRootObserver === null) {\n _shadowRootObserver = new MutationObserver(function (mutations) {\n for (let i = 0, l = mutations.length; i < l; i++) {\n const nodes = mutations[i].addedNodes;\n for (let i = 0; i < nodes.length; i++) {\n if (nodes[i] instanceof HTMLElement) {\n observe(nodes[i], handler);\n }\n }\n }\n });\n }\n _shadowRootObserver.observe(shadow, { childList: true, subtree: true });\n}\nfunction observe(element, handler) {\n if (observedElements.has(element)) {\n return;\n }\n const style = element.attributes.getNamedItem(handler.userSettings.xStyleAttribute);\n observedElements.set(element, style ? handler.handleStyleChange(element, style.value, []) : []);\n observeElement(element, handler);\n for (let child = element.firstElementChild; child != null; child = child.nextElementSibling) {\n observe(child, handler);\n }\n}\n\n/*\n * Copyright 2021 Zindex Software\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nconst mixinRepository = new Map();\nconst MIXIN_ARGS_REGEX = /\\${([0-9]+)(?:=([^}]+))?}/g;\nconst defaultMixinHandler = (context, name, args) => {\n if (name.startsWith('.')) {\n if (context.currentElement !== null) {\n name = name.substring(1);\n const attr = 'data-mixin-' + name;\n for (let p = context.currentElement.parentElement; p != null; p = p.parentElement) {\n if (p.hasAttribute(attr)) {\n return p.getAttribute(attr)\n .replace(MIXIN_ARGS_REGEX, (match, arg, fallback) => args[parseInt(arg)] || fallback || '');\n }\n }\n }\n return '';\n }\n return Root.getPropertyValue('--' + name + '--mixin')\n .replace(MIXIN_ARGS_REGEX, (match, arg, fallback) => args[parseInt(arg)] || fallback || '');\n};\nmixinRepository.set('space-x', function (_, space, right) {\n return right === 'true' ? `sibling!mr:${space || '0'}` : `sibling!ml:${space || '0'}`;\n});\nmixinRepository.set('space-y', function (_, space, bottom) {\n return bottom === 'true' ? `sibling!mb:${space || '0'}` : `sibling!mt:${space || '0'}`;\n});\nmixinRepository.set('grid', function () {\n return 'grid; l1!wb:break-all; l2!max-w:100%; child!justify-self:normal; child!align-self:normal';\n});\nmixinRepository.set('stack', function () {\n return `grid; grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr); \n grid-template-areas:\"stackarea\"; l1!grid-area:stackarea; l1!z:0; w:100%; h:100%`;\n});\nmixinRepository.set('sr-only', function () {\n return 'absolute; w:1px; h:1px; p:0; m:-1px; bw:0; overflow:hidden; clip:rect(0, 0, 0, 0); left:-9999px';\n});\nmixinRepository.set('container', function (settings) {\n if (settings.desktopFirst) {\n return `px: 1rem; mx:auto; max-w:@breakpoint-lg; lg|max-w:@breakpoint-md; md|max-w:@breakpoint-sm; sm|max-w:@breakpoint-xs; xs|max-w:100%`;\n }\n return `px: 1rem; mx:auto; max-w:100%; sm|max-w:@breakpoint-sm; md|max-w:@breakpoint-md; lg|max-w:@breakpoint-lg; xl|max-w:@breakpoint-xl`;\n});\nfunction resolveMixin(context, name, args) {\n if (mixinRepository.has(name)) {\n return style(mixinRepository.get(name)(context.userSettings, ...args));\n }\n return style(defaultMixinHandler(context, name, args));\n}\nfunction registerMixin(name, callback) {\n mixinRepository.set(name, callback);\n}\n\n/*\n * Copyright 2021 Zindex Software\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nconst VAR_REGEX = /@([a-zA-Z0-9\\-_]+)/g;\nconst REPLACE_REGEX = /\\$(selector|body|class|value|property|state|variants|var)/g;\nconst SPLIT_REGEX = /;/;\nconst MIXIN_PREFIX = '^';\n// do not match comma inside parenthesis\n// 2px, linear-gradient(blue, red), inline => [2px, linear-gradient(blue, red), inline]\nconst COMMA_DELIMITED = /\\s*,\\s*(?![^(]*\\))/gm;\nclass StyleHandler {\n constructor(settings, style, tracker) {\n this._currentElement = null;\n this.style = style;\n this.settings = settings;\n this.tracker = tracker;\n this.mediaSettings = settings.media;\n this.desktopFirst = settings.desktopFirst;\n this.breakpoints = settings.breakpoints;\n this.rules = [];\n this.padding = style.cssRules.length;\n this.selectorAttribute = settings.selectorAttribute;\n }\n get userSettings() {\n return this.settings;\n }\n get currentElement() {\n return this._currentElement;\n }\n handleStyleChange(element, content, old) {\n this._currentElement = element;\n if (content === null) {\n return this.handleStyleRemoved(element, old);\n }\n const newEntries = this.getStyleEntries(content);\n const classList = element.hasAttribute(this.selectorAttribute) ? element.getAttribute(this.selectorAttribute).split(' ') : [];\n const assemblerEntries = [];\n // remove old entries\n for (const { n: name, p: property, e: entry } of old) {\n if (!newEntries.has(name)) {\n const index = classList.indexOf(entry);\n if (index >= 0) {\n classList.splice(index, 1);\n }\n element.style.removeProperty(property);\n }\n }\n for (const info of newEntries.values()) {\n const { entry, property, hash, value, name } = info;\n const index = classList.indexOf(entry);\n if (index < 0) {\n classList.push(entry);\n }\n if (!this.tracker.has(hash)) {\n this.generateCSS(info);\n }\n element.style.setProperty(property, value);\n assemblerEntries.push({ e: entry, n: name, p: property });\n }\n element.setAttribute(this.selectorAttribute, classList.join(' '));\n this._currentElement = null;\n return assemblerEntries;\n }\n handleStyleRemoved(element, old) {\n this._currentElement = null;\n const classList = element.hasAttribute(this.selectorAttribute) ? element.getAttribute(this.selectorAttribute).split(' ') : [];\n for (const { p: property, e: entry } of old) {\n const index = classList.indexOf(entry);\n if (index >= 0) {\n classList.splice(index, 1);\n }\n element.style.removeProperty(property);\n }\n element.setAttribute(this.selectorAttribute, classList.join(' '));\n return [];\n }\n extract(attr, value = null) {\n var _a;\n const m = (_a = PROPERTY_REGEX.exec(attr)) === null || _a === void 0 ? void 0 : _a.groups;\n if (!m || !m.property) {\n return [];\n }\n const MEDIA_LIST = this.breakpoints;\n const media = MEDIA_LIST.indexOf(m.media || 'all');\n const state = STATE_LIST.indexOf(m.state || 'normal');\n if (media < 0 || state < 0) {\n return [];\n }\n let properties = m.property;\n const original = properties;\n const scopes = this.settings.scopes;\n if (ALIASES.hasOwnProperty(properties)) {\n properties = ALIASES[properties];\n if (typeof properties === 'function') {\n properties = properties(value);\n }\n }\n if (!Array.isArray(properties)) {\n properties = [properties];\n }\n if (value === null) {\n value = DEFAULT_VALUES[original] || '';\n }\n if (VALUE_WRAPPER.hasOwnProperty(original)) {\n value = VALUE_WRAPPER[original](value, original, media, state, this);\n }\n if (!Array.isArray(value)) {\n value = Array(properties.length).fill(value.replace(VAR_REGEX, \"var(--$1)\"));\n }\n else {\n value = value.map(value => value.replace(VAR_REGEX, \"var(--$1)\"));\n }\n const result = [];\n const base = STATE_LIST.length;\n let index = -1;\n for (const property of properties) {\n index++;\n const name = PROPERTY_LIST.indexOf(property);\n if (name < 0) {\n continue;\n }\n const scope = m.scope || '';\n const rank = ((name * base) + media) * base + state;\n const hash = rank.toString(16) + (scope ? `-${scope}` : '');\n const scopeRank = scopes.indexOf(scope) * 100000;\n const internalProperty = (m.media ? m.media + '--' : '') + (scope ? scope + '__' : '') + property + (m.state ? '__' + m.state : '');\n result.push({\n name: (m.media ? m.media + '|' : '') + (scope ? scope + '!' : '') + property + (m.state ? '.' + m.state : ''),\n //property: HASH_VAR_PREFIX + hash,\n property: HASH_VAR_PREFIX + internalProperty,\n entry: HASH_CLASS_PREFIX + '#' + hash,\n value: value[index],\n media: m.media || '',\n state: m.state || '',\n cssProperty: property,\n hash,\n scope,\n rank: scopeRank < 0 ? -1 : rank + scopeRank,\n });\n }\n return result;\n }\n getStyleEntries(content) {\n const entries = new Map();\n for (let name of this.getResolvedProperties(content)) {\n let value = null;\n const pos = name.indexOf(':');\n if (pos >= 0) {\n value = name.substr(pos + 1);\n name = name.substr(0, pos).trim();\n }\n for (const info of this.extract(name, value)) {\n entries.set(info.name, info);\n }\n }\n return entries;\n }\n getResolvedProperties(content, stack = []) {\n const entries = [];\n for (let name of content.split(SPLIT_REGEX)) {\n name = name.trim();\n if (name === '') {\n continue;\n }\n // extract mixin\n if (name.startsWith(MIXIN_PREFIX)) {\n const pos = name.indexOf(':');\n let mixin, args;\n if (pos < 0) {\n mixin = name.substr(1);\n args = [];\n }\n else {\n mixin = name.substr(1, pos - 1);\n args = name.substr(pos + 1).split(COMMA_DELIMITED).map(trim);\n }\n if (stack.indexOf(mixin) >= 0) {\n stack.push(mixin);\n throw new Error('Recursive mixin detected: ' + stack.join('->'));\n }\n stack.push(mixin);\n entries.push(...this.getResolvedProperties(resolveMixin(this, mixin, args), stack));\n stack.pop();\n continue;\n }\n entries.push(name);\n }\n return entries;\n }\n generateCSS(info) {\n const { tracker, mediaSettings, desktopFirst, style } = this;\n const { hash, media, state, cssProperty, property, scope, rank } = info;\n const hasMedia = media !== '';\n const selectorAttribute = this.settings.selectorAttribute;\n const selectorPfx = selectorAttribute === 'class'\n ? '.' + HASH_CLASS_PREFIX + '\\\\#'\n : '[' + selectorAttribute + '~=\"' + HASH_CLASS_PREFIX + '#';\n const selectorSfx = selectorAttribute === 'class' ? '' : '\"]';\n tracker.add(hash);\n if (rank < 0) {\n return;\n }\n let rule = '';\n if (hasMedia) {\n if (desktopFirst) {\n rule += `@media only screen and (max-width: ${mediaSettings[media]}) {`;\n }\n else {\n rule += `@media only screen and (min-width: ${mediaSettings[media]}) {`;\n }\n }\n let variants = PROPERTY_VARIANTS[cssProperty], prefix = '';\n if (variants) {\n for (let i = 0, l = variants.length; i < l; i++) {\n prefix += `${variants[i]}:var(${property}) !important;`;\n }\n }\n if (scope) {\n const scopeValue = Root.getPropertyValue('--' + scope + '--scope');\n if (scopeValue === '') {\n return;\n }\n rule += scopeValue.replace(REPLACE_REGEX, (match, p1) => {\n switch (p1) {\n case \"selector\":\n return `${selectorPfx + hash + selectorSfx}${state ? ':' + state : ''}`;\n case \"body\":\n return prefix + cssProperty + ': var(' + property + ') !important';\n case \"variants\":\n return prefix;\n case \"property\":\n return cssProperty;\n case \"value\":\n return `var(${property})`;\n case \"class\":\n return selectorPfx + hash + selectorSfx;\n case \"state\":\n return state ? ':' + state : '';\n case \"var\":\n return property;\n }\n return p1;\n });\n }\n else {\n rule += `${selectorPfx + hash + selectorSfx}${state ? ':' + state : ''}{${prefix}${cssProperty}: var(${property}) !important}`;\n }\n if (hasMedia) {\n rule += '}';\n }\n const ruleIndex = this.getRuleIndex(rank);\n this.rules.splice(ruleIndex, 0, rank);\n try {\n style.insertRule(rule, this.padding + ruleIndex);\n }\n catch (_a) {\n this.rules.splice(ruleIndex, 1);\n console.warn(\"Unsupported rule:\", rule);\n }\n }\n getRuleIndex(rank) {\n const { rules } = this;\n for (let i = 0, l = rules.length; i < l; i++) {\n if (rank < rules[i]) {\n return i;\n }\n }\n return rules.length;\n }\n}\n\n/*\n * Copyright 2021 Zindex Software\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nlet styleHandler = null;\nlet supportsConstructable = true;\nlet supportsAdoptingStyleSheets = true;\nlet settings = null;\nconst observedShadowRoots = new WeakMap();\nfunction init(options) {\n supportsAdoptingStyleSheets = window.ShadowRoot &&\n (window.ShadyCSS === undefined || window.ShadyCSS.nativeShadow) &&\n 'adoptedStyleSheets' in Document.prototype &&\n 'replace' in CSSStyleSheet.prototype;\n settings = getUserSettings(options || document.currentScript.dataset);\n if (!settings.enabled) {\n return false;\n }\n let tracker;\n let stylesheet;\n if (supportsAdoptingStyleSheets && settings.constructable) {\n stylesheet = new CSSStyleSheet();\n if (settings.generate) {\n const generated = generateStyles(settings);\n tracker = generated.tracker;\n stylesheet.replaceSync(generated.content);\n }\n else {\n tracker = new Set();\n stylesheet.replaceSync(generateRootVariables(settings));\n }\n document.adoptedStyleSheets = [...document.adoptedStyleSheets, stylesheet];\n }\n else {\n supportsConstructable = false;\n const style = document.createElement(\"style\");\n const generated = generateStyles(settings);\n tracker = generated.tracker;\n style.id = 'opis-assembler-css';\n style.textContent = generated.content;\n document.currentScript.parentElement.insertBefore(style, document.currentScript);\n stylesheet = style.sheet;\n }\n styleHandler = new StyleHandler(settings, stylesheet, tracker);\n observeDocument(document, styleHandler);\n if (window) {\n window.addEventListener('DOMContentLoaded', function () {\n observeTree(document.body, styleHandler);\n });\n }\n return true;\n}\nfunction handleShadowRoot(shadowRoot, add = true) {\n if (styleHandler === null) {\n init();\n }\n if (!supportsAdoptingStyleSheets || !supportsConstructable) {\n return false;\n }\n if (observedShadowRoots.has(shadowRoot)) {\n return true;\n }\n observedShadowRoots.set(shadowRoot, true);\n if (add) {\n shadowRoot.adoptedStyleSheets = [...shadowRoot.adoptedStyleSheets, styleHandler.style];\n }\n observeShadow(shadowRoot, styleHandler);\n return true;\n}\nfunction cssStyleSheet() {\n if (styleHandler === null) {\n init();\n }\n return styleHandler.style;\n}\n\nexports.cssStyleSheet = cssStyleSheet;\nexports.handleShadowRoot = handleShadowRoot;\nexports.init = init;\nexports.registerMixin = registerMixin;\nexports.style = style;\n"
},
{
"path": "dist/assembler.es.js",
"content": "/*\n * Copyright 2021 Zindex Software\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nconst positive_number_regex = /^[0-9]+(\\.5)?$/;\nconst number_regex = /^-?[0-9]+(\\.5)?$/;\nconst font_size_regex = /^(xs|sm|base|lg|([2-9])?xl)$/;\nconst line_height_regex = /^(none|tight|snug|normal|relaxed|loose)$/;\nconst elevation_regex = /^[0-9]|1[0-9]|2[0-4]$/;\nconst shadow_regex = /^[1-6]$/;\nconst letter_spacing_regex = /^(tighter|tight|normal|wide|wider|widest)$/;\nconst radius_regex = /^(xs|sm|md|lg|xl|pill)$/;\nconst order_regex = /^(first|last|none)$/;\n// do not match comma inside parenthesis\n// 2px, linear-gradient(blue, red), inline => [2px, linear-gradient(blue, red), inline]\nconst args_delimiter = /\\s*,\\s*(?![^(]*\\))/gm;\nconst PROPERTY_LIST = [\n \"align-content\",\n \"align-items\",\n \"align-self\",\n \"animation\",\n \"appearance\",\n \"backdrop-filter\",\n \"background\",\n \"background-attachment\",\n \"background-blend-mode\",\n \"background-clip\",\n \"background-color\",\n \"background-image\",\n \"background-position\",\n \"background-repeat\",\n \"background-size\",\n \"backface-visibility\",\n \"border\",\n \"border-bottom\",\n \"border-bottom-color\",\n \"border-bottom-style\",\n \"border-bottom-width\",\n \"border-bottom-left-radius\",\n \"border-bottom-right-radius\",\n \"border-collapse\",\n \"border-color\",\n \"border-left\",\n \"border-left-color\",\n \"border-left-style\",\n \"border-left-width\",\n \"border-radius\",\n \"border-right\",\n \"border-right-color\",\n \"border-right-style\",\n \"border-right-width\",\n \"border-style\",\n \"border-top\",\n \"border-top-color\",\n \"border-top-style\",\n \"border-top-width\",\n \"border-top-left-radius\",\n \"border-top-right-radius\",\n \"border-width\",\n \"bottom\",\n \"box-orient\",\n \"box-shadow\",\n \"box-sizing\",\n \"clear\",\n \"clip\",\n \"clip-path\",\n \"color\",\n \"column-gap\",\n \"content\",\n \"cursor\",\n \"display\",\n \"filter\",\n \"flex\",\n \"flex-basis\",\n \"flex-direction\",\n \"flex-flow\",\n \"flex-grow\",\n \"flex-shrink\",\n \"flex-wrap\",\n \"float\",\n \"font-family\",\n \"font-size\",\n \"font-style\",\n \"font-weight\",\n \"font-variant-numeric\",\n \"gap\",\n \"grid\",\n \"grid-area\",\n \"grid-auto-columns\",\n \"grid-auto-flow\",\n \"grid-auto-rows\",\n \"grid-column\",\n \"grid-column-end\",\n \"grid-column-start\",\n \"grid-row\",\n \"grid-row-end\",\n \"grid-row-start\",\n \"grid-template\",\n \"grid-template-areas\",\n \"grid-template-columns\",\n \"grid-template-rows\",\n \"height\",\n \"isolation\",\n \"justify-content\",\n \"justify-items\",\n \"justify-self\",\n \"left\",\n \"letter-spacing\",\n \"line-break\",\n \"line-clamp\",\n \"line-height\",\n \"list-style-position\",\n \"list-style-type\",\n \"margin\",\n \"margin-bottom\",\n \"margin-left\",\n \"margin-right\",\n \"margin-top\",\n \"max-height\",\n \"max-width\",\n \"min-height\",\n \"min-width\",\n \"object-fit\",\n \"object-position\",\n \"opacity\",\n \"order\",\n \"outline\",\n \"outline-offset\",\n \"overflow\",\n \"overflow-wrap\",\n \"overflow-x\",\n \"overflow-y\",\n \"overscroll-behavior\",\n \"overscroll-behavior-x\",\n \"overscroll-behavior-y\",\n \"padding\",\n \"padding-bottom\",\n \"padding-left\",\n \"padding-right\",\n \"padding-top\",\n \"perspective\",\n \"perspective-origin\",\n \"place-content\",\n \"place-items\",\n \"place-self\",\n \"pointer-events\",\n \"position\",\n \"resize\",\n \"right\",\n \"row-gap\",\n \"table-layout\",\n \"text-align\",\n \"text-decoration\",\n \"text-decoration-style\",\n \"text-fill-color\",\n \"text-overflow\",\n \"text-shadow\",\n \"text-transform\",\n \"top\",\n \"transform\",\n \"transform-box\",\n \"transform-origin\",\n \"transform-style\",\n \"transition\",\n \"user-select\",\n \"vertical-align\",\n \"visibility\",\n \"white-space\",\n \"width\",\n \"word-break\",\n \"z-index\",\n];\nconst PROPERTY_VARIANTS = {\n \"animation\": [\"-webkit-animation\"],\n \"appearance\": [\"-webkit-appearance\", \"-moz-appearance\"],\n \"background-clip\": [\"-webkit-background-clip\", \"-moz-background-clip\"],\n \"backdrop-filter\": [\"-webkit-backdrop-filter\"],\n \"box-orient\": [\"-webkit-box-orient\"],\n \"clip-path\": [\"-webkit-clip-path\"],\n \"column-gap\": [\"-moz-column-gap\"],\n \"line-clamp\": [\"-webkit-line-clamp\"],\n \"user-select\": [\"-webkit-user-select\", \"-moz-user-select\"],\n \"text-fill-color\": [\"-webkit-text-fill-color\", \"-moz-text-fill-color\"]\n};\nconst STATE_LIST = [\n \"normal\",\n \"link\",\n \"visited\",\n \"empty\",\n \"placeholder-shown\",\n \"default\",\n \"checked\",\n \"indeterminate\",\n \"valid\",\n \"invalid\",\n \"required\",\n \"optional\",\n \"out-of-range\",\n \"in-range\",\n \"hover\",\n \"focus\",\n \"focus-within\",\n \"focus-visible\",\n \"active\",\n \"read-only\",\n \"read-write\",\n \"disabled\",\n \"enabled\",\n];\nconst ALIASES = {\n \"backdrop\": \"backdrop-filter\",\n \"bg\": \"background\",\n \"bg-attachment\": \"background-attachment\",\n \"bg-blend\": \"background-blend-mode\",\n \"bg-clip\": \"background-clip\",\n \"bg-color\": \"background-color\",\n \"bg-image\": \"background-image\",\n \"bg-position\": \"background-position\",\n \"bg-repeat\": \"background-repeat\",\n \"bg-size\": \"background-size\",\n \"radius\": \"border-radius\",\n \"radius-top\": [\"border-top-left-radius\", \"border-top-right-radius\"],\n \"radius-bottom\": [\"border-bottom-left-radius\", \"border-bottom-right-radius\"],\n \"radius-left\": [\"border-bottom-left-radius\", \"border-top-left-radius\"],\n \"radius-right\": [\"border-bottom-right-radius\", \"border-top-right-radius\"],\n \"radius-bl\": \"border-bottom-left-radius\",\n \"radius-br\": \"border-bottom-right-radius\",\n \"radius-tl\": \"border-top-left-radius\",\n \"radius-tr\": \"border-top-right-radius\",\n \"b\": \"border\",\n \"bc\": \"border-color\",\n \"bs\": \"border-style\",\n \"bw\": \"border-width\",\n \"bt\": \"border-top\",\n \"bl\": \"border-left\",\n \"br\": \"border-right\",\n \"bb\": \"border-bottom\",\n \"bt-color\": \"border-top-color\",\n \"bt-style\": \"border-top-style\",\n \"bt-width\": \"border-top-width\",\n \"bl-color\": \"border-left-color\",\n \"bl-style\": \"border-left-style\",\n \"bl-width\": \"border-left-width\",\n \"br-color\": \"border-right-color\",\n \"br-style\": \"border-right-style\",\n \"br-width\": \"border-right-width\",\n \"bb-color\": \"border-bottom-color\",\n \"bb-style\": \"border-bottom-style\",\n \"bb-width\": \"border-bottom-width\",\n \"m\": \"margin\",\n \"mt\": \"margin-top\",\n \"mb\": \"margin-bottom\",\n \"ml\": \"margin-left\",\n \"mr\": \"margin-right\",\n \"mx\": [\"margin-left\", \"margin-right\"],\n \"my\": [\"margin-top\", \"margin-bottom\"],\n \"p\": \"padding\",\n \"pt\": \"padding-top\",\n \"pb\": \"padding-bottom\",\n \"pl\": \"padding-left\",\n \"pr\": \"padding-right\",\n \"px\": [\"padding-left\", \"padding-right\"],\n \"py\": [\"padding-top\", \"padding-bottom\"],\n \"min-w\": \"min-width\",\n \"max-w\": \"max-width\",\n \"min-h\": \"min-height\",\n \"max-h\": \"max-height\",\n \"w\": \"width\",\n \"h\": \"height\",\n \"img\": \"background-image\",\n \"gradient\": \"background-image\",\n \"radial-gradient\": \"background-image\",\n \"conic-gradient\": \"background-image\",\n \"flex-dir\": \"flex-direction\",\n \"col-reverse\": \"flex-direction\",\n \"row-reverse\": \"flex-direction\",\n \"grid-rows\": \"grid-template-rows\",\n \"grid-flow\": \"grid-auto-flow\",\n \"row-start\": \"grid-row-start\",\n \"row-span\": \"grid-row-end\",\n \"grid-cols\": \"grid-template-columns\",\n \"col-start\": \"grid-column-start\",\n \"col-span\": \"grid-column-end\",\n \"col-gap\": \"column-gap\",\n \"auto-cols\": \"grid-auto-columns\",\n \"auto-rows\": \"grid-auto-rows\",\n \"e\": \"box-shadow\",\n \"shadow\": \"box-shadow\",\n \"overscroll\": \"overscroll-behavior\",\n \"overscroll-x\": \"overscroll-behavior-x\",\n \"overscroll-y\": \"overscroll-behavior-y\",\n \"inset\": [\"top\", \"bottom\", \"left\", \"right\"],\n \"inset-x\": [\"left\", \"right\"],\n \"inset-y\": [\"top\", \"bottom\"],\n \"z\": \"z-index\",\n \"decoration\": \"text-decoration\",\n \"v-align\": \"vertical-align\",\n \"ws\": \"white-space\",\n \"ring\": \"box-shadow\",\n \"leading\": \"line-height\",\n \"tracking\": \"letter-spacing\",\n \"break\": v => {\n if (v === \"words\")\n return [\"overflow-wrap\"];\n if (v === \"all\")\n return [\"word-break\"];\n return [\"overflow-wrap\", \"word-break\"];\n },\n \"truncate\": [\"overflow\", \"text-overflow\", \"white-space\"],\n \"flex\": v => v ? \"flex\" : \"display\",\n \"inline-flex\": \"display\",\n \"grid\": \"display\",\n \"inline-grid\": \"display\",\n \"hidden\": \"display\",\n \"block\": \"display\",\n \"inline-block\": \"display\",\n \"static\": \"position\",\n \"fixed\": \"position\",\n \"absolute\": \"position\",\n \"relative\": \"position\",\n \"sticky\": \"position\",\n \"visible\": \"visibility\",\n \"invisible\": \"visibility\",\n \"flex-row\": \"flex-direction\",\n \"flex-col\": \"flex-direction\",\n \"list\": v => {\n if (v === \"inside\" || v === \"outside\") {\n return \"list-style-position\";\n }\n return \"list-style-type\";\n },\n \"text\": v => font_size_regex.test(v) ? [\"font-size\", \"line-height\"] : \"font-size\",\n \"uppercase\": \"text-transform\",\n \"lowercase\": \"text-transform\",\n \"capitalize\": \"text-transform\",\n \"normal-case\": \"text-transform\",\n \"variant\": \"font-variant-numeric\",\n \"wave-clip\": \"clip-path\",\n};\nconst DEFAULT_VALUES = {\n \"border\": [\"1px solid transparent\"],\n \"truncate\": [\"hidden\", \"ellipsis\", \"nowrap\"],\n \"flex\": \"flex\",\n \"inline-flex\": \"inline-flex\",\n \"grid\": \"grid\",\n \"inline-grid\": \"inline-grid\",\n \"hidden\": \"none\",\n \"block\": \"block\",\n \"inline-block\": \"inline-block\",\n \"static\": \"static\",\n \"fixed\": \"fixed\",\n \"absolute\": \"absolute\",\n \"relative\": \"relative\",\n \"sticky\": \"sticky\",\n \"visible\": \"visible\",\n \"invisible\": \"hidden\",\n \"flex-row\": \"row\",\n \"flex-col\": \"column\",\n \"flex-wrap\": \"wrap\",\n \"flex-grow\": \"1\",\n \"flex-shrink\": \"1\",\n \"col-reverse\": \"column-reverse\",\n \"row-reverse\": \"row-reverse\",\n \"uppercase\": \"uppercase\",\n \"lowercase\": \"lowercase\",\n \"capitalize\": \"capitalize\",\n \"normal-case\": \"none\",\n \"radius\": \"sm\",\n \"shadow\": \"1\",\n \"wave-clip\": \"50, 2, 50\"\n};\nconst unit = v => number_regex.test(v) ? `calc(${v} * @unit-size)` : v;\nconst positive_unit = v => positive_number_regex.test(v) ? `calc(${v} * @unit-size)` : v;\nconst grid_repeat = v => `repeat(${v}, minmax(0, 1fr))`;\nconst grid_rowspan = v => `span ${v}`;\nconst elevation = v => elevation_regex.test(v) ? `@elevation-${v}` : v;\nconst ring = v => `0 0 0 ${v}`;\nconst fontSize = v => font_size_regex.test(v) ? \"@font-size-\" + v : v;\nconst lineHeight = v => {\n if (positive_number_regex.test(v)) {\n return `calc(${v} * @unit-size)`;\n }\n return line_height_regex.test(v) ? \"@line-height-\" + v : v;\n};\nconst letterSpacing = v => letter_spacing_regex.test(v) ? \"@letter-spacing-\" + v : v;\nconst radius = v => radius_regex.test(v) ? \"@border-radius-\" + v : v;\nconst breakCallback = v => {\n if (v === \"all\")\n return \"break-all\";\n if (v === \"words\")\n return \"break-word\";\n return [\"normal\", \"normal\"];\n};\nconst orderCallback = v => {\n if (!order_regex.test(v)) {\n return v;\n }\n if (v === \"first\")\n return \"-9999\";\n if (v === \"last\")\n return \"9999\";\n return \"0\";\n};\nconst waveClipIds = new Set();\nconst generateWave = (value, original, media, state, handler) => {\n const args = value.split(args_delimiter).map(v => v.trim()).map(v => parseInt(v));\n let [amplitude, frequency, segments] = args;\n amplitude = amplitude !== null && amplitude !== void 0 ? amplitude : 50;\n frequency = frequency !== null && frequency !== void 0 ? frequency : 2;\n segments = segments !== null && segments !== void 0 ? segments : 50;\n const id = amplitude + '-' + frequency + '-' + segments;\n if (waveClipIds.has(id)) {\n return '@wave-clip-' + id;\n }\n waveClipIds.add(id);\n const precision = segments * frequency;\n const units = Math.PI * 2 * frequency;\n const factor = precision / 100;\n amplitude /= 2;\n let polygon = 'polygon(100% 0%, 0% 0%';\n for (let i = 0; i <= precision; i++) {\n const val = Math.abs((amplitude * Math.cos((i / precision) * units) - amplitude)).toFixed(2);\n polygon += ', ' + (i / factor) + '% calc(100% - ' + val + 'px)';\n }\n polygon += ')';\n handler.style.cssRules[0].style.setProperty('--wave-clip-' + id, polygon);\n return '@wave-clip-' + id;\n};\nconst VALUE_WRAPPER = {\n \"img\": v => `url(${v})`,\n \"gradient\": (value) => `linear-gradient(${value})`,\n \"radial-gradient\": (value) => `radial-gradient(${value})`,\n \"conic-gradient\": (value) => `conic-gradient(${value})`,\n \"grid-rows\": grid_repeat,\n \"row-span\": grid_rowspan,\n \"grid-cols\": grid_repeat,\n \"col-span\": grid_rowspan,\n \"e\": elevation,\n \"shadow\": v => shadow_regex.test(v) ? `@shadow-${v}` : v,\n \"ring\": ring,\n \"font-size\": fontSize,\n \"leading\": lineHeight,\n \"tracking\": letterSpacing,\n \"text\": v => font_size_regex.test(v) ? [\"@font-size-\" + v, \"@font-size-leading-\" + v] : v,\n \"radius\": radius,\n \"radius-top\": radius,\n \"radius-left\": radius,\n \"radius-bottom\": radius,\n \"radius-right\": radius,\n \"radius-tl\": radius,\n \"radius-bl\": radius,\n \"radius-tr\": radius,\n \"radius-br\": radius,\n \"border-radius\": radius,\n \"break\": breakCallback,\n \"flex-wrap\": (v) => v === \"reverse\" ? \"wrap-reverse\" : v,\n \"flex-row\": v => v === \"reverse\" ? \"row-reverse\" : v,\n \"flex-col\": v => v === \"reverse\" ? \"column-reverse\" : v,\n \"order\": orderCallback,\n \"padding\": positive_unit,\n \"padding-top\": positive_unit,\n \"padding-bottom\": positive_unit,\n \"padding-left\": positive_unit,\n \"padding-right\": positive_unit,\n \"p\": positive_unit,\n \"pt\": positive_unit,\n \"pb\": positive_unit,\n \"pl\": positive_unit,\n \"pr\": positive_unit,\n \"px\": positive_unit,\n \"py\": positive_unit,\n \"margin\": unit,\n \"margin-top\": unit,\n \"margin-bottom\": unit,\n \"margin-left\": unit,\n \"margin-right\": unit,\n \"m\": unit,\n \"mt\": unit,\n \"mb\": unit,\n \"ml\": unit,\n \"mr\": unit,\n \"mx\": unit,\n \"my\": unit,\n \"w\": positive_unit,\n \"h\": positive_unit,\n \"width\": positive_unit,\n \"height\": positive_unit,\n \"min-w\": positive_unit,\n \"max-w\": positive_unit,\n \"min-h\": positive_unit,\n \"max-h\": positive_unit,\n \"min-width\": positive_unit,\n \"max-width\": positive_unit,\n \"min-height\": positive_unit,\n \"max-height\": positive_unit,\n \"wave-clip\": generateWave,\n};\n\n/*\n * Copyright 2021 Zindex Software\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nconst ELEVATION_UMBRA = [\n \"0px 0px 0px 0px\", \"0px 2px 1px -1px\", \"0px 3px 1px -2px\", \"0px 3px 3px -2px\", \"0px 2px 4px -1px\",\n \"0px 3px 5px -1px\", \"0px 3px 5px -1px\", \"0px 4px 5px -2px\", \"0px 5px 5px -3px\", \"0px 5px 6px -3px\",\n \"0px 6px 6px -3px\", \"0px 6px 7px -4px\", \"0px 7px 8px -4px\", \"0px 7px 8px -4px\", \"0px 7px 9px -4px\",\n \"0px 8px 9px -5px\", \"0px 8px 10px -5px\", \"0px 8px 11px -5px\", \"0px 9px 11px -5px\", \"0px 9px 12px -6px\",\n \"0px 10px 13px -6px\", \"0px 10px 13px -6px\", \"0px 10px 14px -6px\", \"0px 11px 14px -7px\", \"0px 11px 15px -7px\"\n];\nconst ELEVATION_PENUMBRA = [\n \"0px 0px 0px 0px\", \"0px 1px 1px 0px\", \"0px 2px 2px 0px\", \"0px 3px 4px 0px\", \"0px 4px 5px 0px\", \"0px 5px 8px 0px\",\n \"0px 6px 10px 0px\", \"0px 7px 10px 1px\", \"0px 8px 10px 1px\", \"0px 9px 12px 1px\", \"0px 10px 14px 1px\",\n \"0px 11px 15px 1px\", \"0px 12px 17px 2px\", \"0px 13px 19px 2px\", \"0px 14px 21px 2px\", \"0px 15px 22px 2px\",\n \"0px 16px 24px 2px\", \"0px 17px 26px 2px\", \"0px 18px 28px 2px\", \"0px 19px 29px 2px\", \"0px 20px 31px 3px\",\n \"0px 21px 33px 3px\", \"0px 22px 35px 3px\", \"0px 23px 36px 3px\", \"0px 24px 38px 3px\"\n];\nconst ELEVATION_AMBIENT = [\n \"0px 0px 0px 0px\", \"0px 1px 3px 0px\", \"0px 1px 5px 0px\", \"0px 1px 8px 0px\", \"0px 1px 10px 0px\", \"0px 1px 14px 0px\",\n \"0px 1px 18px 0px\", \"0px 2px 16px 1px\", \"0px 3px 14px 2px\", \"0px 3px 16px 2px\", \"0px 4px 18px 3px\",\n \"0px 4px 20px 3px\", \"0px 5px 22px 4px\", \"0px 5px 24px 4px\", \"0px 5px 26px 4px\", \"0px 6px 28px 5px\",\n \"0px 6px 30px 5px\", \"0px 6px 32px 5px\", \"0px 7px 34px 6px\", \"0px 7px 36px 6px\", \"0px 8px 38px 7px\",\n \"0px 8px 40px 7px\", \"0px 8px 42px 7px\", \"0px 9px 44px 8px\", \"0px 9px 46px 8px\"\n];\nconst BORDER_RADIUS = {\n none: \"0\",\n xs: \"0.125rem\",\n sm: \"0.25rem\",\n md: \"0.5rem\",\n lg: \"0.75rem\",\n xl: \"1rem\",\n pill: \"9999px\"\n};\nconst LETTER_SPACING = {\n tighter: \"-0.05rem\",\n tight: \"-0.025rem\",\n normal: \"0\",\n wide: \"0.025rem\",\n wider: \"0.05rem\",\n widest: \"0.1rem\"\n};\nconst LINE_HEIGHT = {\n none: \"1\",\n tight: \"1.25\",\n snug: \"1.375\",\n normal: \"1.5\",\n relaxed: \"1.625\",\n loose: \"2\"\n};\nconst FONT_SIZES = {\n xs: \"0.75rem\",\n sm: \"0.875rem\",\n base: \"1rem\",\n lg: \"1.125rem\",\n xl: \"1.25rem\",\n \"2xl\": \"1.5rem\",\n \"3xl\": \"1.875rem\",\n \"4xl\": \"2.25rem\",\n \"5xl\": \"3rem\",\n \"6xl\": \"3.75rem\",\n \"7xl\": \"4.5rem\",\n \"8xl\": \"6rem\",\n \"9xl\": \"8rem\",\n};\nconst FONT_SIZE_LEADING = {\n xs: \"1rem\",\n sm: \"1.25rem\",\n base: \"1.5rem\",\n lg: \"1.75rem\",\n xl: \"1.75rem\",\n \"2xl\": \"2rem\",\n \"3xl\": \"2.25rem\",\n \"4xl\": \"2.5rem\",\n \"5xl\": \"1\",\n \"6xl\": \"1\",\n \"7xl\": \"1\",\n \"8xl\": \"1\",\n \"9xl\": \"1\",\n};\nconst FONT_FAMILIES = {\n \"sans-serif\": \"-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol\",\n serif: \"Georgia, Cambria, Times New Roman, Times, serif\",\n monospace: \"Lucida Console, Monaco, monospace\"\n};\nconst SHADOW = [\n \"0px 2px 4px 0px hsla(0, 0%, 20%, 0.1), 0px 6px 6px -8px hsla(0, 0%, 0%, 15%)\",\n \"0px 2px 8px -1px hsla(0, 0%, 20%, 0.1), 0px 16px 16px -12px hsla(0, 0%, 0%, 15%)\",\n \"0px 2px 16px -2px hsla(0, 0%, 20%, 0.1), 0px 22px 18px -16px hsla(0, 0%, 0%, 15%)\",\n \"0px 2px 20px -3px hsla(0, 0%, 20%, 0.1), 0px 28px 22px -18px hsla(0, 0%, 0%, 15%)\",\n \"0px 2px 32px -2px hsla(0, 0%, 20%, 0.1), 0px 32px 26px -18px hsla(0, 0%, 0%, 15%)\",\n \"0px 2px 36px -1px hsla(0, 0%, 20%, 0.1), 0px 42px 34px -24px hsla(0, 0%, 0%, 15%)\"\n];\nfunction generateRootVariables(settings) {\n let vars = '--elevation-umbra: rgba(0, 0, 0, .2);--elevation-penumbra: rgba(0, 0, 0, .14);--elevation-ambient: rgba(0, 0, 0, .12);';\n for (let i = 0; i < 25; i++) {\n vars += `--elevation-${i}:${ELEVATION_UMBRA[i]} var(--elevation-umbra), ${ELEVATION_PENUMBRA[i]} var(--elevation-penumbra), ${ELEVATION_AMBIENT[i]} var(--elevation-ambient);`;\n }\n for (let i = 0; i < 6; i++) {\n vars += `--shadow-${i + 1}:${SHADOW[i]};`;\n }\n for (const [key, value] of Object.entries(BORDER_RADIUS)) {\n vars += `--border-radius-${key}:${value};`;\n }\n for (const [key, value] of Object.entries(LETTER_SPACING)) {\n vars += `--letter-spacing-${key}:${value};`;\n }\n for (const [key, value] of Object.entries(LINE_HEIGHT)) {\n vars += `--line-height-${key}:${value};`;\n }\n for (const [key, value] of Object.entries(FONT_FAMILIES)) {\n vars += `--${key}:${value};`;\n }\n for (const [key, value] of Object.entries(FONT_SIZES)) {\n vars += `--font-size-${key}:${value};`;\n }\n for (const [key, value] of Object.entries(FONT_SIZE_LEADING)) {\n vars += `--font-size-leading-${key}:${value};`;\n }\n for (const bp of settings.breakpoints) {\n if (bp === 'all') {\n continue;\n }\n vars += `--breakpoint-${bp}: ${settings.media[bp]};`;\n }\n vars += '--unit-size:0.25rem;';\n return ':root{' + vars + '}';\n}\n\n/*\n * Copyright 2021 Zindex Software\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nconst ESCAPE_REGEX = /\\\\\\n/g;\nconst PROPERTY_REGEX$1 = /^--([a-zA-Z0-9-_]+)--(scope|mixin|register)$/;\nclass RootClass {\n constructor() {\n this.cache = new Map();\n this.scopes = [\"\", \"text-clip\", \"selection\", \"placeholder\", \"before\", \"after\", \"first-letter\", \"first-line\",\n \"l1\", \"l2\", \"marker-l1\", \"marker\", \"sibling\", \"child\", \"even\", \"odd\", \"first\", \"last\", \"dark\", \"light\",\n \"landscape\", \"portrait\", \"motion-reduce\", \"motion-safe\"\n ];\n this.registeredProperties = [];\n const { cache } = this;\n const tc = '-webkit-background-clip: text !important;-moz-background-clip:text !important;background-clip:text !important;';\n cache.set(\"--text-clip--scope\", `$selector {${tc}}`);\n cache.set(\"--l1--scope\", \"$selector > * {$body}\");\n cache.set(\"--l2--scope\", \"$selector > * > * {$body}\");\n cache.set(\"--sibling--scope\", \"$selector > * + * {$body}\");\n cache.set(\"--child--scope\", \"$selector > $class {$body}\");\n cache.set(\"--selection--scope\", \"$selector::selection {$body}\");\n cache.set(\"--placeholder--scope\", \"$selector::placeholder {$body}\");\n cache.set(\"--marker--scope\", \"$selector::marker {$body}\");\n cache.set(\"--marker-l1--scope\", \"$selector > *::marker {$body}\");\n cache.set(\"--before--scope\", \"$selector::before {$body}\");\n cache.set(\"--after--scope\", \"$selector::after {$body}\");\n cache.set(\"--even--scope\", \"$selector:nth-child(even) {$body}\");\n cache.set(\"--odd--scope\", \"$selector:nth-child(odd) {$body}\");\n cache.set(\"--first--scope\", \"$selector:first-child {$body}\");\n cache.set(\"--last--scope\", \"$selector:last-child {$body}\");\n cache.set(\"--first-letter--scope\", \"$selector::first-letter {$body}\");\n cache.set(\"--first-line--scope\", \"$selector::first-line {$body}\");\n cache.set(\"--dark--scope\", \"@media(prefers-color-scheme: dark) {$selector {$body}}\");\n cache.set(\"--light--scope\", \"@media(prefers-color-scheme: light) {$selector {$body}}\");\n cache.set(\"--landscape--scope\", \"@media(orientation: landscape) {$selector {$body}}\");\n cache.set(\"--portrait--scope\", \"@media(orientation: portrait) {$selector {$body}}\");\n cache.set(\"--motion-reduce--scope\", \"@media(prefers-reduced-motion: reduce) {$selector {$body}}\");\n cache.set(\"--motion-safe--scope\", \"@media(prefers-reduced-motion: no-preference) {$selector {$body}}\");\n this.initialize();\n }\n initialize() {\n const { cache, scopes, registeredProperties } = this;\n for (const style of this.getComputedStyles()) {\n for (const property of style) {\n const match = PROPERTY_REGEX$1.exec(property);\n if (match == null) {\n continue;\n }\n const name = match[1];\n const value = this.getValue(style, property);\n cache.set(property, value);\n switch (match[2]) {\n case \"scope\":\n if (scopes.indexOf(name) === -1) {\n scopes.push(name);\n }\n break;\n case \"register\":\n if (value === 'true' || value === '') {\n registeredProperties.push({ name, aliases: [] });\n }\n else {\n const aliases = value.split(',').map(v => v.trim()).filter(v => v !== '');\n registeredProperties.push({ name, aliases });\n }\n break;\n }\n }\n }\n }\n getComputedStyles() {\n const styles = [];\n for (let si = 0, sl = document.styleSheets.length; si < sl; si++) {\n const styleSheet = document.styleSheets[si];\n if (styleSheet.href !== null && styleSheet.href.indexOf(window.location.origin) !== 0) {\n continue;\n }\n if (styleSheet.href === null && styleSheet.ownerNode !== null\n && styleSheet.ownerNode instanceof Element && styleSheet.ownerNode.id === 'opis-assembler-css') {\n continue;\n }\n const rule = styleSheet.cssRules[0];\n if (rule.type === CSSRule.STYLE_RULE && rule.selectorText === ':root') {\n styles.push(rule.style);\n }\n }\n return styles;\n }\n getValue(style, property) {\n let value = style.getPropertyValue(property).replace(ESCAPE_REGEX, \"\").trim();\n if (value.startsWith('\"') && value.endsWith('\"')) {\n value = value.substring(1, value.length - 1).trim();\n }\n return value;\n }\n getRegisteredScopes() {\n return this.scopes;\n }\n getRegisteredProperties() {\n return this.registeredProperties;\n }\n getPropertyValue(property) {\n if (this.cache.has(property)) {\n return this.cache.get(property);\n }\n return '';\n }\n}\nconst Root = new RootClass();\n\n/*\n * Copyright 2021 Zindex Software\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nconst regex = /([a-z0-9]|(?=[A-Z]))([A-Z])/g;\nconst HASH_VAR_PREFIX = '--asm-';\nconst HASH_CLASS_PREFIX = 'asm';\nconst PROPERTY_REGEX = /^(?:(?[a-z]{2})\\|)?(?:(?[-a-zA-Z0-9]+)!)?(?[-a-z]+)(?:\\.(?[-a-z]+))?$/m;\nfunction getUserSettings(dataset) {\n const enabled = dataset.enabled === undefined ? true : dataset.enabled === 'true';\n const generate = dataset.generate === undefined ? false : dataset.generate === 'true';\n const constructable = dataset.constructable === undefined ? true : dataset.constructable === 'true';\n const desktopFirst = dataset.mode === undefined ? false : dataset.mode === 'desktop-first';\n const selectorAttribute = dataset.selectorAttribute === undefined ? 'class' : dataset.selectorAttribute;\n const cache = dataset.cache === undefined ? null : dataset.cache;\n const cacheKey = dataset.cacheKey === undefined ? \"assembler-css-cache\" : dataset.cacheKey;\n const registeredProperties = Root.getRegisteredProperties();\n const scopes = Root.getRegisteredScopes();\n for (let i = 0, l = registeredProperties.length; i < l; i++) {\n const prop = registeredProperties[i];\n if (PROPERTY_LIST.indexOf(prop.name) === -1) {\n PROPERTY_LIST.push(prop.name);\n }\n if (prop.aliases.length > 0) {\n PROPERTY_VARIANTS[prop.name] = prop.aliases;\n }\n }\n // Consider all bp\n let breakpoints = ['xs', 'sm', 'md', 'lg', 'xl'];\n if (desktopFirst) {\n // remove xl and reverse\n breakpoints.pop();\n breakpoints.reverse();\n }\n else {\n // remove xs\n breakpoints.shift();\n }\n // Add all\n breakpoints.unshift('all');\n const states = dataset.states === undefined\n ? [\"normal\", \"hover\"]\n : getStringItemList(dataset.states.toLowerCase());\n if (states.indexOf(\"normal\") === -1) {\n // always add normal state\n states.unshift(\"normal\");\n }\n const xs = dataset.breakpointXs || \"512px\";\n const sm = dataset.breakpointSm || (desktopFirst ? \"768px\" : \"512px\");\n const md = dataset.breakpointMd || (desktopFirst ? \"1024px\" : \"768px\");\n const lg = dataset.breakpointLg || (desktopFirst ? \"1280px\" : \"1024px\");\n const xl = dataset.breakpointXl || (\"1280px\");\n const xStyleAttribute = dataset.xStyleAttribute || \"x-style\";\n return {\n enabled,\n generate,\n constructable,\n cache,\n cacheKey,\n desktopFirst,\n scopes,\n states,\n breakpoints,\n media: { xs, sm, md, lg, xl },\n xStyleAttribute,\n selectorAttribute,\n registeredProperties\n };\n}\nfunction style(item) {\n if (typeof item === 'string') {\n return item.trim();\n }\n if (Array.isArray(item)) {\n return item.map(style).join(';');\n }\n const list = [];\n for (const key in item) {\n const value = item[key];\n if (value === undefined) {\n continue;\n }\n const property = key.replace(regex, '$1-$2').toLowerCase();\n list.push(value === null ? property : (property + ':' + value));\n }\n return list.join(';');\n}\nfunction getStringItemList(value, unique = true) {\n const items = value\n .replace(/[,;]/g, ' ')\n .split(/\\s\\s*/g)\n .map(trim)\n .filter(nonEmptyString);\n return unique ? items.filter(uniqueItems) : items;\n}\nfunction trim(value) {\n return value.trim();\n}\nfunction nonEmptyString(value) {\n return value !== '';\n}\nfunction uniqueItems(value, index, self) {\n return self.indexOf(value) === index;\n}\n\n/*\n * Copyright 2021 Zindex Software\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nfunction generateStyles(settings) {\n if (settings.cache) {\n const json = localStorage.getItem(settings.cacheKey + ':' + settings.cache);\n if (json !== null) {\n const content = JSON.parse(json);\n content.tracker = new Set(content.tracker);\n return content;\n }\n const oldCacheKey = localStorage.getItem(settings.cacheKey);\n if (oldCacheKey !== null) {\n localStorage.removeItem(settings.cacheKey + ':' + oldCacheKey);\n }\n localStorage.setItem(settings.cacheKey, settings.cache);\n }\n else {\n const oldCacheKey = localStorage.getItem(settings.cacheKey);\n if (oldCacheKey !== null) {\n localStorage.removeItem(settings.cacheKey + ':' + oldCacheKey);\n localStorage.removeItem(settings.cacheKey);\n }\n }\n const base = STATE_LIST.length, result = [];\n const breakpoints = settings.breakpoints;\n const media_settings = settings.media;\n const desktopFirst = settings.desktopFirst;\n const states = settings.states;\n const tracker = new Set();\n const selectorAttribute = settings.selectorAttribute;\n const selectorPfx = selectorAttribute === 'class'\n ? '.' + HASH_CLASS_PREFIX + '\\\\#'\n : '[' + selectorAttribute + '~=\"' + HASH_CLASS_PREFIX + '#';\n const selectorSfx = selectorAttribute === 'class' ? '' : '\"]';\n result.push(generateRootVariables(settings));\n for (let media_index = 0, l = breakpoints.length; media_index < l; media_index++) {\n const bp = breakpoints[media_index];\n let str = '';\n if (media_index !== 0) {\n if (desktopFirst) {\n str += `@media only screen and (max-width: ${media_settings[bp]}) {`;\n }\n else {\n str += `@media only screen and (min-width: ${media_settings[bp]}) {`;\n }\n }\n for (let name_index = 0, l = PROPERTY_LIST.length; name_index < l; name_index++) {\n const name = PROPERTY_LIST[name_index];\n // generate all states for default media\n const stateList = media_index === 0 ? STATE_LIST : states;\n for (const state of stateList) {\n const state_index = STATE_LIST.indexOf(state);\n if (state_index < 0) {\n continue;\n }\n const hash = (((name_index * base) + media_index) * base + state_index).toString(16);\n const property = HASH_VAR_PREFIX + (media_index > 0 ? bp + '--' : '') + name + (state_index > 0 ? '__' + stateList[state_index] : '');\n tracker.add(hash);\n let variants = PROPERTY_VARIANTS[name], prefix = '';\n if (variants) {\n for (let i = 0, l = variants.length; i < l; i++) {\n prefix += `${variants[i]}:var(${property}) !important;`;\n }\n }\n str += `${selectorPfx + hash + selectorSfx}${state_index > 0 ? ':' + state : ''}{${prefix}${name}:var(${property}) !important}`;\n }\n }\n if (media_index !== 0) {\n str += '}';\n }\n result.push(str);\n }\n const content = {\n content: result.join(''),\n tracker\n };\n if (settings.cache) {\n localStorage.setItem(settings.cacheKey, settings.cache);\n localStorage.setItem(settings.cacheKey + ':' + settings.cache, JSON.stringify({\n content: content.content,\n tracker: [...tracker]\n }));\n }\n return content;\n}\n\n/*\n * Copyright 2021 Zindex Software\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nlet _documentObserver = null;\nlet _elementObserver = null;\nlet _shadowRootObserver = null;\nconst observedElements = new WeakMap();\nfunction observeTree(element, handler) {\n for (let e = element; e != null; e = e.nextElementSibling) {\n if (!observedElements.has(e)) {\n observe(e, handler);\n }\n else {\n observeTree(e.firstElementChild, handler);\n }\n }\n}\nfunction observeDocument(document, handler) {\n if (_documentObserver === null) {\n _documentObserver = new MutationObserver(function (mutations) {\n for (let i = 0, l = mutations.length; i < l; i++) {\n const nodes = mutations[i].addedNodes;\n for (let i = 0; i < nodes.length; i++) {\n if (nodes[i] instanceof HTMLElement) {\n observe(nodes[i], handler);\n }\n }\n }\n });\n }\n _documentObserver.observe(document, { childList: true, subtree: true });\n}\nfunction observeElement(element, handler) {\n if (_elementObserver === null) {\n _elementObserver = new MutationObserver(function (mutations) {\n for (const mutation of mutations) {\n const target = mutation.target;\n observedElements.set(target, handler.handleStyleChange(target, target.getAttribute(mutation.attributeName), observedElements.get(target)));\n }\n });\n }\n _elementObserver.observe(element, {\n attributes: true,\n attributeOldValue: true,\n childList: false,\n attributeFilter: [handler.userSettings.xStyleAttribute],\n });\n}\nfunction observeShadow(shadow, handler) {\n if (_shadowRootObserver === null) {\n _shadowRootObserver = new MutationObserver(function (mutations) {\n for (let i = 0, l = mutations.length; i < l; i++) {\n const nodes = mutations[i].addedNodes;\n for (let i = 0; i < nodes.length; i++) {\n if (nodes[i] instanceof HTMLElement) {\n observe(nodes[i], handler);\n }\n }\n }\n });\n }\n _shadowRootObserver.observe(shadow, { childList: true, subtree: true });\n}\nfunction observe(element, handler) {\n if (observedElements.has(element)) {\n return;\n }\n const style = element.attributes.getNamedItem(handler.userSettings.xStyleAttribute);\n observedElements.set(element, style ? handler.handleStyleChange(element, style.value, []) : []);\n observeElement(element, handler);\n for (let child = element.firstElementChild; child != null; child = child.nextElementSibling) {\n observe(child, handler);\n }\n}\n\n/*\n * Copyright 2021 Zindex Software\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nconst mixinRepository = new Map();\nconst MIXIN_ARGS_REGEX = /\\${([0-9]+)(?:=([^}]+))?}/g;\nconst defaultMixinHandler = (context, name, args) => {\n if (name.startsWith('.')) {\n if (context.currentElement !== null) {\n name = name.substring(1);\n const attr = 'data-mixin-' + name;\n for (let p = context.currentElement.parentElement; p != null; p = p.parentElement) {\n if (p.hasAttribute(attr)) {\n return p.getAttribute(attr)\n .replace(MIXIN_ARGS_REGEX, (match, arg, fallback) => args[parseInt(arg)] || fallback || '');\n }\n }\n }\n return '';\n }\n return Root.getPropertyValue('--' + name + '--mixin')\n .replace(MIXIN_ARGS_REGEX, (match, arg, fallback) => args[parseInt(arg)] || fallback || '');\n};\nmixinRepository.set('space-x', function (_, space, right) {\n return right === 'true' ? `sibling!mr:${space || '0'}` : `sibling!ml:${space || '0'}`;\n});\nmixinRepository.set('space-y', function (_, space, bottom) {\n return bottom === 'true' ? `sibling!mb:${space || '0'}` : `sibling!mt:${space || '0'}`;\n});\nmixinRepository.set('grid', function () {\n return 'grid; l1!wb:break-all; l2!max-w:100%; child!justify-self:normal; child!align-self:normal';\n});\nmixinRepository.set('stack', function () {\n return `grid; grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr); \n grid-template-areas:\"stackarea\"; l1!grid-area:stackarea; l1!z:0; w:100%; h:100%`;\n});\nmixinRepository.set('sr-only', function () {\n return 'absolute; w:1px; h:1px; p:0; m:-1px; bw:0; overflow:hidden; clip:rect(0, 0, 0, 0); left:-9999px';\n});\nmixinRepository.set('container', function (settings) {\n if (settings.desktopFirst) {\n return `px: 1rem; mx:auto; max-w:@breakpoint-lg; lg|max-w:@breakpoint-md; md|max-w:@breakpoint-sm; sm|max-w:@breakpoint-xs; xs|max-w:100%`;\n }\n return `px: 1rem; mx:auto; max-w:100%; sm|max-w:@breakpoint-sm; md|max-w:@breakpoint-md; lg|max-w:@breakpoint-lg; xl|max-w:@breakpoint-xl`;\n});\nfunction resolveMixin(context, name, args) {\n if (mixinRepository.has(name)) {\n return style(mixinRepository.get(name)(context.userSettings, ...args));\n }\n return style(defaultMixinHandler(context, name, args));\n}\nfunction registerMixin(name, callback) {\n mixinRepository.set(name, callback);\n}\n\n/*\n * Copyright 2021 Zindex Software\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nconst VAR_REGEX = /@([a-zA-Z0-9\\-_]+)/g;\nconst REPLACE_REGEX = /\\$(selector|body|class|value|property|state|variants|var)/g;\nconst SPLIT_REGEX = /;/;\nconst MIXIN_PREFIX = '^';\n// do not match comma inside parenthesis\n// 2px, linear-gradient(blue, red), inline => [2px, linear-gradient(blue, red), inline]\nconst COMMA_DELIMITED = /\\s*,\\s*(?![^(]*\\))/gm;\nclass StyleHandler {\n constructor(settings, style, tracker) {\n this._currentElement = null;\n this.style = style;\n this.settings = settings;\n this.tracker = tracker;\n this.mediaSettings = settings.media;\n this.desktopFirst = settings.desktopFirst;\n this.breakpoints = settings.breakpoints;\n this.rules = [];\n this.padding = style.cssRules.length;\n this.selectorAttribute = settings.selectorAttribute;\n }\n get userSettings() {\n return this.settings;\n }\n get currentElement() {\n return this._currentElement;\n }\n handleStyleChange(element, content, old) {\n this._currentElement = element;\n if (content === null) {\n return this.handleStyleRemoved(element, old);\n }\n const newEntries = this.getStyleEntries(content);\n const classList = element.hasAttribute(this.selectorAttribute) ? element.getAttribute(this.selectorAttribute).split(' ') : [];\n const assemblerEntries = [];\n // remove old entries\n for (const { n: name, p: property, e: entry } of old) {\n if (!newEntries.has(name)) {\n const index = classList.indexOf(entry);\n if (index >= 0) {\n classList.splice(index, 1);\n }\n element.style.removeProperty(property);\n }\n }\n for (const info of newEntries.values()) {\n const { entry, property, hash, value, name } = info;\n const index = classList.indexOf(entry);\n if (index < 0) {\n classList.push(entry);\n }\n if (!this.tracker.has(hash)) {\n this.generateCSS(info);\n }\n element.style.setProperty(property, value);\n assemblerEntries.push({ e: entry, n: name, p: property });\n }\n element.setAttribute(this.selectorAttribute, classList.join(' '));\n this._currentElement = null;\n return assemblerEntries;\n }\n handleStyleRemoved(element, old) {\n this._currentElement = null;\n const classList = element.hasAttribute(this.selectorAttribute) ? element.getAttribute(this.selectorAttribute).split(' ') : [];\n for (const { p: property, e: entry } of old) {\n const index = classList.indexOf(entry);\n if (index >= 0) {\n classList.splice(index, 1);\n }\n element.style.removeProperty(property);\n }\n element.setAttribute(this.selectorAttribute, classList.join(' '));\n return [];\n }\n extract(attr, value = null) {\n var _a;\n const m = (_a = PROPERTY_REGEX.exec(attr)) === null || _a === void 0 ? void 0 : _a.groups;\n if (!m || !m.property) {\n return [];\n }\n const MEDIA_LIST = this.breakpoints;\n const media = MEDIA_LIST.indexOf(m.media || 'all');\n const state = STATE_LIST.indexOf(m.state || 'normal');\n if (media < 0 || state < 0) {\n return [];\n }\n let properties = m.property;\n const original = properties;\n const scopes = this.settings.scopes;\n if (ALIASES.hasOwnProperty(properties)) {\n properties = ALIASES[properties];\n if (typeof properties === 'function') {\n properties = properties(value);\n }\n }\n if (!Array.isArray(properties)) {\n properties = [properties];\n }\n if (value === null) {\n value = DEFAULT_VALUES[original] || '';\n }\n if (VALUE_WRAPPER.hasOwnProperty(original)) {\n value = VALUE_WRAPPER[original](value, original, media, state, this);\n }\n if (!Array.isArray(value)) {\n value = Array(properties.length).fill(value.replace(VAR_REGEX, \"var(--$1)\"));\n }\n else {\n value = value.map(value => value.replace(VAR_REGEX, \"var(--$1)\"));\n }\n const result = [];\n const base = STATE_LIST.length;\n let index = -1;\n for (const property of properties) {\n index++;\n const name = PROPERTY_LIST.indexOf(property);\n if (name < 0) {\n continue;\n }\n const scope = m.scope || '';\n const rank = ((name * base) + media) * base + state;\n const hash = rank.toString(16) + (scope ? `-${scope}` : '');\n const scopeRank = scopes.indexOf(scope) * 100000;\n const internalProperty = (m.media ? m.media + '--' : '') + (scope ? scope + '__' : '') + property + (m.state ? '__' + m.state : '');\n result.push({\n name: (m.media ? m.media + '|' : '') + (scope ? scope + '!' : '') + property + (m.state ? '.' + m.state : ''),\n //property: HASH_VAR_PREFIX + hash,\n property: HASH_VAR_PREFIX + internalProperty,\n entry: HASH_CLASS_PREFIX + '#' + hash,\n value: value[index],\n media: m.media || '',\n state: m.state || '',\n cssProperty: property,\n hash,\n scope,\n rank: scopeRank < 0 ? -1 : rank + scopeRank,\n });\n }\n return result;\n }\n getStyleEntries(content) {\n const entries = new Map();\n for (let name of this.getResolvedProperties(content)) {\n let value = null;\n const pos = name.indexOf(':');\n if (pos >= 0) {\n value = name.substr(pos + 1);\n name = name.substr(0, pos).trim();\n }\n for (const info of this.extract(name, value)) {\n entries.set(info.name, info);\n }\n }\n return entries;\n }\n getResolvedProperties(content, stack = []) {\n const entries = [];\n for (let name of content.split(SPLIT_REGEX)) {\n name = name.trim();\n if (name === '') {\n continue;\n }\n // extract mixin\n if (name.startsWith(MIXIN_PREFIX)) {\n const pos = name.indexOf(':');\n let mixin, args;\n if (pos < 0) {\n mixin = name.substr(1);\n args = [];\n }\n else {\n mixin = name.substr(1, pos - 1);\n args = name.substr(pos + 1).split(COMMA_DELIMITED).map(trim);\n }\n if (stack.indexOf(mixin) >= 0) {\n stack.push(mixin);\n throw new Error('Recursive mixin detected: ' + stack.join('->'));\n }\n stack.push(mixin);\n entries.push(...this.getResolvedProperties(resolveMixin(this, mixin, args), stack));\n stack.pop();\n continue;\n }\n entries.push(name);\n }\n return entries;\n }\n generateCSS(info) {\n const { tracker, mediaSettings, desktopFirst, style } = this;\n const { hash, media, state, cssProperty, property, scope, rank } = info;\n const hasMedia = media !== '';\n const selectorAttribute = this.settings.selectorAttribute;\n const selectorPfx = selectorAttribute === 'class'\n ? '.' + HASH_CLASS_PREFIX + '\\\\#'\n : '[' + selectorAttribute + '~=\"' + HASH_CLASS_PREFIX + '#';\n const selectorSfx = selectorAttribute === 'class' ? '' : '\"]';\n tracker.add(hash);\n if (rank < 0) {\n return;\n }\n let rule = '';\n if (hasMedia) {\n if (desktopFirst) {\n rule += `@media only screen and (max-width: ${mediaSettings[media]}) {`;\n }\n else {\n rule += `@media only screen and (min-width: ${mediaSettings[media]}) {`;\n }\n }\n let variants = PROPERTY_VARIANTS[cssProperty], prefix = '';\n if (variants) {\n for (let i = 0, l = variants.length; i < l; i++) {\n prefix += `${variants[i]}:var(${property}) !important;`;\n }\n }\n if (scope) {\n const scopeValue = Root.getPropertyValue('--' + scope + '--scope');\n if (scopeValue === '') {\n return;\n }\n rule += scopeValue.replace(REPLACE_REGEX, (match, p1) => {\n switch (p1) {\n case \"selector\":\n return `${selectorPfx + hash + selectorSfx}${state ? ':' + state : ''}`;\n case \"body\":\n return prefix + cssProperty + ': var(' + property + ') !important';\n case \"variants\":\n return prefix;\n case \"property\":\n return cssProperty;\n case \"value\":\n return `var(${property})`;\n case \"class\":\n return selectorPfx + hash + selectorSfx;\n case \"state\":\n return state ? ':' + state : '';\n case \"var\":\n return property;\n }\n return p1;\n });\n }\n else {\n rule += `${selectorPfx + hash + selectorSfx}${state ? ':' + state : ''}{${prefix}${cssProperty}: var(${property}) !important}`;\n }\n if (hasMedia) {\n rule += '}';\n }\n const ruleIndex = this.getRuleIndex(rank);\n this.rules.splice(ruleIndex, 0, rank);\n try {\n style.insertRule(rule, this.padding + ruleIndex);\n }\n catch (_a) {\n this.rules.splice(ruleIndex, 1);\n console.warn(\"Unsupported rule:\", rule);\n }\n }\n getRuleIndex(rank) {\n const { rules } = this;\n for (let i = 0, l = rules.length; i < l; i++) {\n if (rank < rules[i]) {\n return i;\n }\n }\n return rules.length;\n }\n}\n\n/*\n * Copyright 2021 Zindex Software\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nlet styleHandler = null;\nlet supportsConstructable = true;\nlet supportsAdoptingStyleSheets = true;\nlet settings = null;\nconst observedShadowRoots = new WeakMap();\nfunction init(options) {\n supportsAdoptingStyleSheets = window.ShadowRoot &&\n (window.ShadyCSS === undefined || window.ShadyCSS.nativeShadow) &&\n 'adoptedStyleSheets' in Document.prototype &&\n 'replace' in CSSStyleSheet.prototype;\n settings = getUserSettings(options || document.currentScript.dataset);\n if (!settings.enabled) {\n return false;\n }\n let tracker;\n let stylesheet;\n if (supportsAdoptingStyleSheets && settings.constructable) {\n stylesheet = new CSSStyleSheet();\n if (settings.generate) {\n const generated = generateStyles(settings);\n tracker = generated.tracker;\n stylesheet.replaceSync(generated.content);\n }\n else {\n tracker = new Set();\n stylesheet.replaceSync(generateRootVariables(settings));\n }\n document.adoptedStyleSheets = [...document.adoptedStyleSheets, stylesheet];\n }\n else {\n supportsConstructable = false;\n const style = document.createElement(\"style\");\n const generated = generateStyles(settings);\n tracker = generated.tracker;\n style.id = 'opis-assembler-css';\n style.textContent = generated.content;\n document.currentScript.parentElement.insertBefore(style, document.currentScript);\n stylesheet = style.sheet;\n }\n styleHandler = new StyleHandler(settings, stylesheet, tracker);\n observeDocument(document, styleHandler);\n if (window) {\n window.addEventListener('DOMContentLoaded', function () {\n observeTree(document.body, styleHandler);\n });\n }\n return true;\n}\nfunction handleShadowRoot(shadowRoot, add = true) {\n if (styleHandler === null) {\n init();\n }\n if (!supportsAdoptingStyleSheets || !supportsConstructable) {\n return false;\n }\n if (observedShadowRoots.has(shadowRoot)) {\n return true;\n }\n observedShadowRoots.set(shadowRoot, true);\n if (add) {\n shadowRoot.adoptedStyleSheets = [...shadowRoot.adoptedStyleSheets, styleHandler.style];\n }\n observeShadow(shadowRoot, styleHandler);\n return true;\n}\nfunction cssStyleSheet() {\n if (styleHandler === null) {\n init();\n }\n return styleHandler.style;\n}\n\nexport { cssStyleSheet, handleShadowRoot, init, registerMixin, style };\n"
},
{
"path": "dist/assembler.js",
"content": "(function (global, factory) {\n typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :\n typeof define === 'function' && define.amd ? define(['exports'], factory) :\n (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.AssemblerCSS = {}));\n})(this, (function (exports) { 'use strict';\n\n /*\n * Copyright 2021 Zindex Software\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n const positive_number_regex = /^[0-9]+(\\.5)?$/;\n const number_regex = /^-?[0-9]+(\\.5)?$/;\n const font_size_regex = /^(xs|sm|base|lg|([2-9])?xl)$/;\n const line_height_regex = /^(none|tight|snug|normal|relaxed|loose)$/;\n const elevation_regex = /^[0-9]|1[0-9]|2[0-4]$/;\n const shadow_regex = /^[1-6]$/;\n const letter_spacing_regex = /^(tighter|tight|normal|wide|wider|widest)$/;\n const radius_regex = /^(xs|sm|md|lg|xl|pill)$/;\n const order_regex = /^(first|last|none)$/;\n // do not match comma inside parenthesis\n // 2px, linear-gradient(blue, red), inline => [2px, linear-gradient(blue, red), inline]\n const args_delimiter = /\\s*,\\s*(?![^(]*\\))/gm;\n const PROPERTY_LIST = [\n \"align-content\",\n \"align-items\",\n \"align-self\",\n \"animation\",\n \"appearance\",\n \"backdrop-filter\",\n \"background\",\n \"background-attachment\",\n \"background-blend-mode\",\n \"background-clip\",\n \"background-color\",\n \"background-image\",\n \"background-position\",\n \"background-repeat\",\n \"background-size\",\n \"backface-visibility\",\n \"border\",\n \"border-bottom\",\n \"border-bottom-color\",\n \"border-bottom-style\",\n \"border-bottom-width\",\n \"border-bottom-left-radius\",\n \"border-bottom-right-radius\",\n \"border-collapse\",\n \"border-color\",\n \"border-left\",\n \"border-left-color\",\n \"border-left-style\",\n \"border-left-width\",\n \"border-radius\",\n \"border-right\",\n \"border-right-color\",\n \"border-right-style\",\n \"border-right-width\",\n \"border-style\",\n \"border-top\",\n \"border-top-color\",\n \"border-top-style\",\n \"border-top-width\",\n \"border-top-left-radius\",\n \"border-top-right-radius\",\n \"border-width\",\n \"bottom\",\n \"box-orient\",\n \"box-shadow\",\n \"box-sizing\",\n \"clear\",\n \"clip\",\n \"clip-path\",\n \"color\",\n \"column-gap\",\n \"content\",\n \"cursor\",\n \"display\",\n \"filter\",\n \"flex\",\n \"flex-basis\",\n \"flex-direction\",\n \"flex-flow\",\n \"flex-grow\",\n \"flex-shrink\",\n \"flex-wrap\",\n \"float\",\n \"font-family\",\n \"font-size\",\n \"font-style\",\n \"font-weight\",\n \"font-variant-numeric\",\n \"gap\",\n \"grid\",\n \"grid-area\",\n \"grid-auto-columns\",\n \"grid-auto-flow\",\n \"grid-auto-rows\",\n \"grid-column\",\n \"grid-column-end\",\n \"grid-column-start\",\n \"grid-row\",\n \"grid-row-end\",\n \"grid-row-start\",\n \"grid-template\",\n \"grid-template-areas\",\n \"grid-template-columns\",\n \"grid-template-rows\",\n \"height\",\n \"isolation\",\n \"justify-content\",\n \"justify-items\",\n \"justify-self\",\n \"left\",\n \"letter-spacing\",\n \"line-break\",\n \"line-clamp\",\n \"line-height\",\n \"list-style-position\",\n \"list-style-type\",\n \"margin\",\n \"margin-bottom\",\n \"margin-left\",\n \"margin-right\",\n \"margin-top\",\n \"max-height\",\n \"max-width\",\n \"min-height\",\n \"min-width\",\n \"object-fit\",\n \"object-position\",\n \"opacity\",\n \"order\",\n \"outline\",\n \"outline-offset\",\n \"overflow\",\n \"overflow-wrap\",\n \"overflow-x\",\n \"overflow-y\",\n \"overscroll-behavior\",\n \"overscroll-behavior-x\",\n \"overscroll-behavior-y\",\n \"padding\",\n \"padding-bottom\",\n \"padding-left\",\n \"padding-right\",\n \"padding-top\",\n \"perspective\",\n \"perspective-origin\",\n \"place-content\",\n \"place-items\",\n \"place-self\",\n \"pointer-events\",\n \"position\",\n \"resize\",\n \"right\",\n \"row-gap\",\n \"table-layout\",\n \"text-align\",\n \"text-decoration\",\n \"text-decoration-style\",\n \"text-fill-color\",\n \"text-overflow\",\n \"text-shadow\",\n \"text-transform\",\n \"top\",\n \"transform\",\n \"transform-box\",\n \"transform-origin\",\n \"transform-style\",\n \"transition\",\n \"user-select\",\n \"vertical-align\",\n \"visibility\",\n \"white-space\",\n \"width\",\n \"word-break\",\n \"z-index\",\n ];\n const PROPERTY_VARIANTS = {\n \"animation\": [\"-webkit-animation\"],\n \"appearance\": [\"-webkit-appearance\", \"-moz-appearance\"],\n \"background-clip\": [\"-webkit-background-clip\", \"-moz-background-clip\"],\n \"backdrop-filter\": [\"-webkit-backdrop-filter\"],\n \"box-orient\": [\"-webkit-box-orient\"],\n \"clip-path\": [\"-webkit-clip-path\"],\n \"column-gap\": [\"-moz-column-gap\"],\n \"line-clamp\": [\"-webkit-line-clamp\"],\n \"user-select\": [\"-webkit-user-select\", \"-moz-user-select\"],\n \"text-fill-color\": [\"-webkit-text-fill-color\", \"-moz-text-fill-color\"]\n };\n const STATE_LIST = [\n \"normal\",\n \"link\",\n \"visited\",\n \"empty\",\n \"placeholder-shown\",\n \"default\",\n \"checked\",\n \"indeterminate\",\n \"valid\",\n \"invalid\",\n \"required\",\n \"optional\",\n \"out-of-range\",\n \"in-range\",\n \"hover\",\n \"focus\",\n \"focus-within\",\n \"focus-visible\",\n \"active\",\n \"read-only\",\n \"read-write\",\n \"disabled\",\n \"enabled\",\n ];\n const ALIASES = {\n \"backdrop\": \"backdrop-filter\",\n \"bg\": \"background\",\n \"bg-attachment\": \"background-attachment\",\n \"bg-blend\": \"background-blend-mode\",\n \"bg-clip\": \"background-clip\",\n \"bg-color\": \"background-color\",\n \"bg-image\": \"background-image\",\n \"bg-position\": \"background-position\",\n \"bg-repeat\": \"background-repeat\",\n \"bg-size\": \"background-size\",\n \"radius\": \"border-radius\",\n \"radius-top\": [\"border-top-left-radius\", \"border-top-right-radius\"],\n \"radius-bottom\": [\"border-bottom-left-radius\", \"border-bottom-right-radius\"],\n \"radius-left\": [\"border-bottom-left-radius\", \"border-top-left-radius\"],\n \"radius-right\": [\"border-bottom-right-radius\", \"border-top-right-radius\"],\n \"radius-bl\": \"border-bottom-left-radius\",\n \"radius-br\": \"border-bottom-right-radius\",\n \"radius-tl\": \"border-top-left-radius\",\n \"radius-tr\": \"border-top-right-radius\",\n \"b\": \"border\",\n \"bc\": \"border-color\",\n \"bs\": \"border-style\",\n \"bw\": \"border-width\",\n \"bt\": \"border-top\",\n \"bl\": \"border-left\",\n \"br\": \"border-right\",\n \"bb\": \"border-bottom\",\n \"bt-color\": \"border-top-color\",\n \"bt-style\": \"border-top-style\",\n \"bt-width\": \"border-top-width\",\n \"bl-color\": \"border-left-color\",\n \"bl-style\": \"border-left-style\",\n \"bl-width\": \"border-left-width\",\n \"br-color\": \"border-right-color\",\n \"br-style\": \"border-right-style\",\n \"br-width\": \"border-right-width\",\n \"bb-color\": \"border-bottom-color\",\n \"bb-style\": \"border-bottom-style\",\n \"bb-width\": \"border-bottom-width\",\n \"m\": \"margin\",\n \"mt\": \"margin-top\",\n \"mb\": \"margin-bottom\",\n \"ml\": \"margin-left\",\n \"mr\": \"margin-right\",\n \"mx\": [\"margin-left\", \"margin-right\"],\n \"my\": [\"margin-top\", \"margin-bottom\"],\n \"p\": \"padding\",\n \"pt\": \"padding-top\",\n \"pb\": \"padding-bottom\",\n \"pl\": \"padding-left\",\n \"pr\": \"padding-right\",\n \"px\": [\"padding-left\", \"padding-right\"],\n \"py\": [\"padding-top\", \"padding-bottom\"],\n \"min-w\": \"min-width\",\n \"max-w\": \"max-width\",\n \"min-h\": \"min-height\",\n \"max-h\": \"max-height\",\n \"w\": \"width\",\n \"h\": \"height\",\n \"img\": \"background-image\",\n \"gradient\": \"background-image\",\n \"radial-gradient\": \"background-image\",\n \"conic-gradient\": \"background-image\",\n \"flex-dir\": \"flex-direction\",\n \"col-reverse\": \"flex-direction\",\n \"row-reverse\": \"flex-direction\",\n \"grid-rows\": \"grid-template-rows\",\n \"grid-flow\": \"grid-auto-flow\",\n \"row-start\": \"grid-row-start\",\n \"row-span\": \"grid-row-end\",\n \"grid-cols\": \"grid-template-columns\",\n \"col-start\": \"grid-column-start\",\n \"col-span\": \"grid-column-end\",\n \"col-gap\": \"column-gap\",\n \"auto-cols\": \"grid-auto-columns\",\n \"auto-rows\": \"grid-auto-rows\",\n \"e\": \"box-shadow\",\n \"shadow\": \"box-shadow\",\n \"overscroll\": \"overscroll-behavior\",\n \"overscroll-x\": \"overscroll-behavior-x\",\n \"overscroll-y\": \"overscroll-behavior-y\",\n \"inset\": [\"top\", \"bottom\", \"left\", \"right\"],\n \"inset-x\": [\"left\", \"right\"],\n \"inset-y\": [\"top\", \"bottom\"],\n \"z\": \"z-index\",\n \"decoration\": \"text-decoration\",\n \"v-align\": \"vertical-align\",\n \"ws\": \"white-space\",\n \"ring\": \"box-shadow\",\n \"leading\": \"line-height\",\n \"tracking\": \"letter-spacing\",\n \"break\": v => {\n if (v === \"words\")\n return [\"overflow-wrap\"];\n if (v === \"all\")\n return [\"word-break\"];\n return [\"overflow-wrap\", \"word-break\"];\n },\n \"truncate\": [\"overflow\", \"text-overflow\", \"white-space\"],\n \"flex\": v => v ? \"flex\" : \"display\",\n \"inline-flex\": \"display\",\n \"grid\": \"display\",\n \"inline-grid\": \"display\",\n \"hidden\": \"display\",\n \"block\": \"display\",\n \"inline-block\": \"display\",\n \"static\": \"position\",\n \"fixed\": \"position\",\n \"absolute\": \"position\",\n \"relative\": \"position\",\n \"sticky\": \"position\",\n \"visible\": \"visibility\",\n \"invisible\": \"visibility\",\n \"flex-row\": \"flex-direction\",\n \"flex-col\": \"flex-direction\",\n \"list\": v => {\n if (v === \"inside\" || v === \"outside\") {\n return \"list-style-position\";\n }\n return \"list-style-type\";\n },\n \"text\": v => font_size_regex.test(v) ? [\"font-size\", \"line-height\"] : \"font-size\",\n \"uppercase\": \"text-transform\",\n \"lowercase\": \"text-transform\",\n \"capitalize\": \"text-transform\",\n \"normal-case\": \"text-transform\",\n \"variant\": \"font-variant-numeric\",\n \"wave-clip\": \"clip-path\",\n };\n const DEFAULT_VALUES = {\n \"border\": [\"1px solid transparent\"],\n \"truncate\": [\"hidden\", \"ellipsis\", \"nowrap\"],\n \"flex\": \"flex\",\n \"inline-flex\": \"inline-flex\",\n \"grid\": \"grid\",\n \"inline-grid\": \"inline-grid\",\n \"hidden\": \"none\",\n \"block\": \"block\",\n \"inline-block\": \"inline-block\",\n \"static\": \"static\",\n \"fixed\": \"fixed\",\n \"absolute\": \"absolute\",\n \"relative\": \"relative\",\n \"sticky\": \"sticky\",\n \"visible\": \"visible\",\n \"invisible\": \"hidden\",\n \"flex-row\": \"row\",\n \"flex-col\": \"column\",\n \"flex-wrap\": \"wrap\",\n \"flex-grow\": \"1\",\n \"flex-shrink\": \"1\",\n \"col-reverse\": \"column-reverse\",\n \"row-reverse\": \"row-reverse\",\n \"uppercase\": \"uppercase\",\n \"lowercase\": \"lowercase\",\n \"capitalize\": \"capitalize\",\n \"normal-case\": \"none\",\n \"radius\": \"sm\",\n \"shadow\": \"1\",\n \"wave-clip\": \"50, 2, 50\"\n };\n const unit = v => number_regex.test(v) ? `calc(${v} * @unit-size)` : v;\n const positive_unit = v => positive_number_regex.test(v) ? `calc(${v} * @unit-size)` : v;\n const grid_repeat = v => `repeat(${v}, minmax(0, 1fr))`;\n const grid_rowspan = v => `span ${v}`;\n const elevation = v => elevation_regex.test(v) ? `@elevation-${v}` : v;\n const ring = v => `0 0 0 ${v}`;\n const fontSize = v => font_size_regex.test(v) ? \"@font-size-\" + v : v;\n const lineHeight = v => {\n if (positive_number_regex.test(v)) {\n return `calc(${v} * @unit-size)`;\n }\n return line_height_regex.test(v) ? \"@line-height-\" + v : v;\n };\n const letterSpacing = v => letter_spacing_regex.test(v) ? \"@letter-spacing-\" + v : v;\n const radius = v => radius_regex.test(v) ? \"@border-radius-\" + v : v;\n const breakCallback = v => {\n if (v === \"all\")\n return \"break-all\";\n if (v === \"words\")\n return \"break-word\";\n return [\"normal\", \"normal\"];\n };\n const orderCallback = v => {\n if (!order_regex.test(v)) {\n return v;\n }\n if (v === \"first\")\n return \"-9999\";\n if (v === \"last\")\n return \"9999\";\n return \"0\";\n };\n const waveClipIds = new Set();\n const generateWave = (value, original, media, state, handler) => {\n const args = value.split(args_delimiter).map(v => v.trim()).map(v => parseInt(v));\n let [amplitude, frequency, segments] = args;\n amplitude = amplitude !== null && amplitude !== void 0 ? amplitude : 50;\n frequency = frequency !== null && frequency !== void 0 ? frequency : 2;\n segments = segments !== null && segments !== void 0 ? segments : 50;\n const id = amplitude + '-' + frequency + '-' + segments;\n if (waveClipIds.has(id)) {\n return '@wave-clip-' + id;\n }\n waveClipIds.add(id);\n const precision = segments * frequency;\n const units = Math.PI * 2 * frequency;\n const factor = precision / 100;\n amplitude /= 2;\n let polygon = 'polygon(100% 0%, 0% 0%';\n for (let i = 0; i <= precision; i++) {\n const val = Math.abs((amplitude * Math.cos((i / precision) * units) - amplitude)).toFixed(2);\n polygon += ', ' + (i / factor) + '% calc(100% - ' + val + 'px)';\n }\n polygon += ')';\n handler.style.cssRules[0].style.setProperty('--wave-clip-' + id, polygon);\n return '@wave-clip-' + id;\n };\n const VALUE_WRAPPER = {\n \"img\": v => `url(${v})`,\n \"gradient\": (value) => `linear-gradient(${value})`,\n \"radial-gradient\": (value) => `radial-gradient(${value})`,\n \"conic-gradient\": (value) => `conic-gradient(${value})`,\n \"grid-rows\": grid_repeat,\n \"row-span\": grid_rowspan,\n \"grid-cols\": grid_repeat,\n \"col-span\": grid_rowspan,\n \"e\": elevation,\n \"shadow\": v => shadow_regex.test(v) ? `@shadow-${v}` : v,\n \"ring\": ring,\n \"font-size\": fontSize,\n \"leading\": lineHeight,\n \"tracking\": letterSpacing,\n \"text\": v => font_size_regex.test(v) ? [\"@font-size-\" + v, \"@font-size-leading-\" + v] : v,\n \"radius\": radius,\n \"radius-top\": radius,\n \"radius-left\": radius,\n \"radius-bottom\": radius,\n \"radius-right\": radius,\n \"radius-tl\": radius,\n \"radius-bl\": radius,\n \"radius-tr\": radius,\n \"radius-br\": radius,\n \"border-radius\": radius,\n \"break\": breakCallback,\n \"flex-wrap\": (v) => v === \"reverse\" ? \"wrap-reverse\" : v,\n \"flex-row\": v => v === \"reverse\" ? \"row-reverse\" : v,\n \"flex-col\": v => v === \"reverse\" ? \"column-reverse\" : v,\n \"order\": orderCallback,\n \"padding\": positive_unit,\n \"padding-top\": positive_unit,\n \"padding-bottom\": positive_unit,\n \"padding-left\": positive_unit,\n \"padding-right\": positive_unit,\n \"p\": positive_unit,\n \"pt\": positive_unit,\n \"pb\": positive_unit,\n \"pl\": positive_unit,\n \"pr\": positive_unit,\n \"px\": positive_unit,\n \"py\": positive_unit,\n \"margin\": unit,\n \"margin-top\": unit,\n \"margin-bottom\": unit,\n \"margin-left\": unit,\n \"margin-right\": unit,\n \"m\": unit,\n \"mt\": unit,\n \"mb\": unit,\n \"ml\": unit,\n \"mr\": unit,\n \"mx\": unit,\n \"my\": unit,\n \"w\": positive_unit,\n \"h\": positive_unit,\n \"width\": positive_unit,\n \"height\": positive_unit,\n \"min-w\": positive_unit,\n \"max-w\": positive_unit,\n \"min-h\": positive_unit,\n \"max-h\": positive_unit,\n \"min-width\": positive_unit,\n \"max-width\": positive_unit,\n \"min-height\": positive_unit,\n \"max-height\": positive_unit,\n \"wave-clip\": generateWave,\n };\n\n /*\n * Copyright 2021 Zindex Software\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n const ELEVATION_UMBRA = [\n \"0px 0px 0px 0px\", \"0px 2px 1px -1px\", \"0px 3px 1px -2px\", \"0px 3px 3px -2px\", \"0px 2px 4px -1px\",\n \"0px 3px 5px -1px\", \"0px 3px 5px -1px\", \"0px 4px 5px -2px\", \"0px 5px 5px -3px\", \"0px 5px 6px -3px\",\n \"0px 6px 6px -3px\", \"0px 6px 7px -4px\", \"0px 7px 8px -4px\", \"0px 7px 8px -4px\", \"0px 7px 9px -4px\",\n \"0px 8px 9px -5px\", \"0px 8px 10px -5px\", \"0px 8px 11px -5px\", \"0px 9px 11px -5px\", \"0px 9px 12px -6px\",\n \"0px 10px 13px -6px\", \"0px 10px 13px -6px\", \"0px 10px 14px -6px\", \"0px 11px 14px -7px\", \"0px 11px 15px -7px\"\n ];\n const ELEVATION_PENUMBRA = [\n \"0px 0px 0px 0px\", \"0px 1px 1px 0px\", \"0px 2px 2px 0px\", \"0px 3px 4px 0px\", \"0px 4px 5px 0px\", \"0px 5px 8px 0px\",\n \"0px 6px 10px 0px\", \"0px 7px 10px 1px\", \"0px 8px 10px 1px\", \"0px 9px 12px 1px\", \"0px 10px 14px 1px\",\n \"0px 11px 15px 1px\", \"0px 12px 17px 2px\", \"0px 13px 19px 2px\", \"0px 14px 21px 2px\", \"0px 15px 22px 2px\",\n \"0px 16px 24px 2px\", \"0px 17px 26px 2px\", \"0px 18px 28px 2px\", \"0px 19px 29px 2px\", \"0px 20px 31px 3px\",\n \"0px 21px 33px 3px\", \"0px 22px 35px 3px\", \"0px 23px 36px 3px\", \"0px 24px 38px 3px\"\n ];\n const ELEVATION_AMBIENT = [\n \"0px 0px 0px 0px\", \"0px 1px 3px 0px\", \"0px 1px 5px 0px\", \"0px 1px 8px 0px\", \"0px 1px 10px 0px\", \"0px 1px 14px 0px\",\n \"0px 1px 18px 0px\", \"0px 2px 16px 1px\", \"0px 3px 14px 2px\", \"0px 3px 16px 2px\", \"0px 4px 18px 3px\",\n \"0px 4px 20px 3px\", \"0px 5px 22px 4px\", \"0px 5px 24px 4px\", \"0px 5px 26px 4px\", \"0px 6px 28px 5px\",\n \"0px 6px 30px 5px\", \"0px 6px 32px 5px\", \"0px 7px 34px 6px\", \"0px 7px 36px 6px\", \"0px 8px 38px 7px\",\n \"0px 8px 40px 7px\", \"0px 8px 42px 7px\", \"0px 9px 44px 8px\", \"0px 9px 46px 8px\"\n ];\n const BORDER_RADIUS = {\n none: \"0\",\n xs: \"0.125rem\",\n sm: \"0.25rem\",\n md: \"0.5rem\",\n lg: \"0.75rem\",\n xl: \"1rem\",\n pill: \"9999px\"\n };\n const LETTER_SPACING = {\n tighter: \"-0.05rem\",\n tight: \"-0.025rem\",\n normal: \"0\",\n wide: \"0.025rem\",\n wider: \"0.05rem\",\n widest: \"0.1rem\"\n };\n const LINE_HEIGHT = {\n none: \"1\",\n tight: \"1.25\",\n snug: \"1.375\",\n normal: \"1.5\",\n relaxed: \"1.625\",\n loose: \"2\"\n };\n const FONT_SIZES = {\n xs: \"0.75rem\",\n sm: \"0.875rem\",\n base: \"1rem\",\n lg: \"1.125rem\",\n xl: \"1.25rem\",\n \"2xl\": \"1.5rem\",\n \"3xl\": \"1.875rem\",\n \"4xl\": \"2.25rem\",\n \"5xl\": \"3rem\",\n \"6xl\": \"3.75rem\",\n \"7xl\": \"4.5rem\",\n \"8xl\": \"6rem\",\n \"9xl\": \"8rem\",\n };\n const FONT_SIZE_LEADING = {\n xs: \"1rem\",\n sm: \"1.25rem\",\n base: \"1.5rem\",\n lg: \"1.75rem\",\n xl: \"1.75rem\",\n \"2xl\": \"2rem\",\n \"3xl\": \"2.25rem\",\n \"4xl\": \"2.5rem\",\n \"5xl\": \"1\",\n \"6xl\": \"1\",\n \"7xl\": \"1\",\n \"8xl\": \"1\",\n \"9xl\": \"1\",\n };\n const FONT_FAMILIES = {\n \"sans-serif\": \"-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol\",\n serif: \"Georgia, Cambria, Times New Roman, Times, serif\",\n monospace: \"Lucida Console, Monaco, monospace\"\n };\n const SHADOW = [\n \"0px 2px 4px 0px hsla(0, 0%, 20%, 0.1), 0px 6px 6px -8px hsla(0, 0%, 0%, 15%)\",\n \"0px 2px 8px -1px hsla(0, 0%, 20%, 0.1), 0px 16px 16px -12px hsla(0, 0%, 0%, 15%)\",\n \"0px 2px 16px -2px hsla(0, 0%, 20%, 0.1), 0px 22px 18px -16px hsla(0, 0%, 0%, 15%)\",\n \"0px 2px 20px -3px hsla(0, 0%, 20%, 0.1), 0px 28px 22px -18px hsla(0, 0%, 0%, 15%)\",\n \"0px 2px 32px -2px hsla(0, 0%, 20%, 0.1), 0px 32px 26px -18px hsla(0, 0%, 0%, 15%)\",\n \"0px 2px 36px -1px hsla(0, 0%, 20%, 0.1), 0px 42px 34px -24px hsla(0, 0%, 0%, 15%)\"\n ];\n function generateRootVariables(settings) {\n let vars = '--elevation-umbra: rgba(0, 0, 0, .2);--elevation-penumbra: rgba(0, 0, 0, .14);--elevation-ambient: rgba(0, 0, 0, .12);';\n for (let i = 0; i < 25; i++) {\n vars += `--elevation-${i}:${ELEVATION_UMBRA[i]} var(--elevation-umbra), ${ELEVATION_PENUMBRA[i]} var(--elevation-penumbra), ${ELEVATION_AMBIENT[i]} var(--elevation-ambient);`;\n }\n for (let i = 0; i < 6; i++) {\n vars += `--shadow-${i + 1}:${SHADOW[i]};`;\n }\n for (const [key, value] of Object.entries(BORDER_RADIUS)) {\n vars += `--border-radius-${key}:${value};`;\n }\n for (const [key, value] of Object.entries(LETTER_SPACING)) {\n vars += `--letter-spacing-${key}:${value};`;\n }\n for (const [key, value] of Object.entries(LINE_HEIGHT)) {\n vars += `--line-height-${key}:${value};`;\n }\n for (const [key, value] of Object.entries(FONT_FAMILIES)) {\n vars += `--${key}:${value};`;\n }\n for (const [key, value] of Object.entries(FONT_SIZES)) {\n vars += `--font-size-${key}:${value};`;\n }\n for (const [key, value] of Object.entries(FONT_SIZE_LEADING)) {\n vars += `--font-size-leading-${key}:${value};`;\n }\n for (const bp of settings.breakpoints) {\n if (bp === 'all') {\n continue;\n }\n vars += `--breakpoint-${bp}: ${settings.media[bp]};`;\n }\n vars += '--unit-size:0.25rem;';\n return ':root{' + vars + '}';\n }\n\n /*\n * Copyright 2021 Zindex Software\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n const ESCAPE_REGEX = /\\\\\\n/g;\n const PROPERTY_REGEX$1 = /^--([a-zA-Z0-9-_]+)--(scope|mixin|register)$/;\n class RootClass {\n constructor() {\n this.cache = new Map();\n this.scopes = [\"\", \"text-clip\", \"selection\", \"placeholder\", \"before\", \"after\", \"first-letter\", \"first-line\",\n \"l1\", \"l2\", \"marker-l1\", \"marker\", \"sibling\", \"child\", \"even\", \"odd\", \"first\", \"last\", \"dark\", \"light\",\n \"landscape\", \"portrait\", \"motion-reduce\", \"motion-safe\"\n ];\n this.registeredProperties = [];\n const { cache } = this;\n const tc = '-webkit-background-clip: text !important;-moz-background-clip:text !important;background-clip:text !important;';\n cache.set(\"--text-clip--scope\", `$selector {${tc}}`);\n cache.set(\"--l1--scope\", \"$selector > * {$body}\");\n cache.set(\"--l2--scope\", \"$selector > * > * {$body}\");\n cache.set(\"--sibling--scope\", \"$selector > * + * {$body}\");\n cache.set(\"--child--scope\", \"$selector > $class {$body}\");\n cache.set(\"--selection--scope\", \"$selector::selection {$body}\");\n cache.set(\"--placeholder--scope\", \"$selector::placeholder {$body}\");\n cache.set(\"--marker--scope\", \"$selector::marker {$body}\");\n cache.set(\"--marker-l1--scope\", \"$selector > *::marker {$body}\");\n cache.set(\"--before--scope\", \"$selector::before {$body}\");\n cache.set(\"--after--scope\", \"$selector::after {$body}\");\n cache.set(\"--even--scope\", \"$selector:nth-child(even) {$body}\");\n cache.set(\"--odd--scope\", \"$selector:nth-child(odd) {$body}\");\n cache.set(\"--first--scope\", \"$selector:first-child {$body}\");\n cache.set(\"--last--scope\", \"$selector:last-child {$body}\");\n cache.set(\"--first-letter--scope\", \"$selector::first-letter {$body}\");\n cache.set(\"--first-line--scope\", \"$selector::first-line {$body}\");\n cache.set(\"--dark--scope\", \"@media(prefers-color-scheme: dark) {$selector {$body}}\");\n cache.set(\"--light--scope\", \"@media(prefers-color-scheme: light) {$selector {$body}}\");\n cache.set(\"--landscape--scope\", \"@media(orientation: landscape) {$selector {$body}}\");\n cache.set(\"--portrait--scope\", \"@media(orientation: portrait) {$selector {$body}}\");\n cache.set(\"--motion-reduce--scope\", \"@media(prefers-reduced-motion: reduce) {$selector {$body}}\");\n cache.set(\"--motion-safe--scope\", \"@media(prefers-reduced-motion: no-preference) {$selector {$body}}\");\n this.initialize();\n }\n initialize() {\n const { cache, scopes, registeredProperties } = this;\n for (const style of this.getComputedStyles()) {\n for (const property of style) {\n const match = PROPERTY_REGEX$1.exec(property);\n if (match == null) {\n continue;\n }\n const name = match[1];\n const value = this.getValue(style, property);\n cache.set(property, value);\n switch (match[2]) {\n case \"scope\":\n if (scopes.indexOf(name) === -1) {\n scopes.push(name);\n }\n break;\n case \"register\":\n if (value === 'true' || value === '') {\n registeredProperties.push({ name, aliases: [] });\n }\n else {\n const aliases = value.split(',').map(v => v.trim()).filter(v => v !== '');\n registeredProperties.push({ name, aliases });\n }\n break;\n }\n }\n }\n }\n getComputedStyles() {\n const styles = [];\n for (let si = 0, sl = document.styleSheets.length; si < sl; si++) {\n const styleSheet = document.styleSheets[si];\n if (styleSheet.href !== null && styleSheet.href.indexOf(window.location.origin) !== 0) {\n continue;\n }\n if (styleSheet.href === null && styleSheet.ownerNode !== null\n && styleSheet.ownerNode instanceof Element && styleSheet.ownerNode.id === 'opis-assembler-css') {\n continue;\n }\n const rule = styleSheet.cssRules[0];\n if (rule.type === CSSRule.STYLE_RULE && rule.selectorText === ':root') {\n styles.push(rule.style);\n }\n }\n return styles;\n }\n getValue(style, property) {\n let value = style.getPropertyValue(property).replace(ESCAPE_REGEX, \"\").trim();\n if (value.startsWith('\"') && value.endsWith('\"')) {\n value = value.substring(1, value.length - 1).trim();\n }\n return value;\n }\n getRegisteredScopes() {\n return this.scopes;\n }\n getRegisteredProperties() {\n return this.registeredProperties;\n }\n getPropertyValue(property) {\n if (this.cache.has(property)) {\n return this.cache.get(property);\n }\n return '';\n }\n }\n const Root = new RootClass();\n\n /*\n * Copyright 2021 Zindex Software\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n const regex = /([a-z0-9]|(?=[A-Z]))([A-Z])/g;\n const HASH_VAR_PREFIX = '--asm-';\n const HASH_CLASS_PREFIX = 'asm';\n const PROPERTY_REGEX = /^(?:(?[a-z]{2})\\|)?(?:(?[-a-zA-Z0-9]+)!)?(?[-a-z]+)(?:\\.(?[-a-z]+))?$/m;\n function getUserSettings(dataset) {\n const enabled = dataset.enabled === undefined ? true : dataset.enabled === 'true';\n const generate = dataset.generate === undefined ? false : dataset.generate === 'true';\n const constructable = dataset.constructable === undefined ? true : dataset.constructable === 'true';\n const desktopFirst = dataset.mode === undefined ? false : dataset.mode === 'desktop-first';\n const selectorAttribute = dataset.selectorAttribute === undefined ? 'class' : dataset.selectorAttribute;\n const cache = dataset.cache === undefined ? null : dataset.cache;\n const cacheKey = dataset.cacheKey === undefined ? \"assembler-css-cache\" : dataset.cacheKey;\n const registeredProperties = Root.getRegisteredProperties();\n const scopes = Root.getRegisteredScopes();\n for (let i = 0, l = registeredProperties.length; i < l; i++) {\n const prop = registeredProperties[i];\n if (PROPERTY_LIST.indexOf(prop.name) === -1) {\n PROPERTY_LIST.push(prop.name);\n }\n if (prop.aliases.length > 0) {\n PROPERTY_VARIANTS[prop.name] = prop.aliases;\n }\n }\n // Consider all bp\n let breakpoints = ['xs', 'sm', 'md', 'lg', 'xl'];\n if (desktopFirst) {\n // remove xl and reverse\n breakpoints.pop();\n breakpoints.reverse();\n }\n else {\n // remove xs\n breakpoints.shift();\n }\n // Add all\n breakpoints.unshift('all');\n const states = dataset.states === undefined\n ? [\"normal\", \"hover\"]\n : getStringItemList(dataset.states.toLowerCase());\n if (states.indexOf(\"normal\") === -1) {\n // always add normal state\n states.unshift(\"normal\");\n }\n const xs = dataset.breakpointXs || \"512px\";\n const sm = dataset.breakpointSm || (desktopFirst ? \"768px\" : \"512px\");\n const md = dataset.breakpointMd || (desktopFirst ? \"1024px\" : \"768px\");\n const lg = dataset.breakpointLg || (desktopFirst ? \"1280px\" : \"1024px\");\n const xl = dataset.breakpointXl || (\"1280px\");\n const xStyleAttribute = dataset.xStyleAttribute || \"x-style\";\n return {\n enabled,\n generate,\n constructable,\n cache,\n cacheKey,\n desktopFirst,\n scopes,\n states,\n breakpoints,\n media: { xs, sm, md, lg, xl },\n xStyleAttribute,\n selectorAttribute,\n registeredProperties\n };\n }\n function style(item) {\n if (typeof item === 'string') {\n return item.trim();\n }\n if (Array.isArray(item)) {\n return item.map(style).join(';');\n }\n const list = [];\n for (const key in item) {\n const value = item[key];\n if (value === undefined) {\n continue;\n }\n const property = key.replace(regex, '$1-$2').toLowerCase();\n list.push(value === null ? property : (property + ':' + value));\n }\n return list.join(';');\n }\n function getStringItemList(value, unique = true) {\n const items = value\n .replace(/[,;]/g, ' ')\n .split(/\\s\\s*/g)\n .map(trim)\n .filter(nonEmptyString);\n return unique ? items.filter(uniqueItems) : items;\n }\n function trim(value) {\n return value.trim();\n }\n function nonEmptyString(value) {\n return value !== '';\n }\n function uniqueItems(value, index, self) {\n return self.indexOf(value) === index;\n }\n\n /*\n * Copyright 2021 Zindex Software\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n function generateStyles(settings) {\n if (settings.cache) {\n const json = localStorage.getItem(settings.cacheKey + ':' + settings.cache);\n if (json !== null) {\n const content = JSON.parse(json);\n content.tracker = new Set(content.tracker);\n return content;\n }\n const oldCacheKey = localStorage.getItem(settings.cacheKey);\n if (oldCacheKey !== null) {\n localStorage.removeItem(settings.cacheKey + ':' + oldCacheKey);\n }\n localStorage.setItem(settings.cacheKey, settings.cache);\n }\n else {\n const oldCacheKey = localStorage.getItem(settings.cacheKey);\n if (oldCacheKey !== null) {\n localStorage.removeItem(settings.cacheKey + ':' + oldCacheKey);\n localStorage.removeItem(settings.cacheKey);\n }\n }\n const base = STATE_LIST.length, result = [];\n const breakpoints = settings.breakpoints;\n const media_settings = settings.media;\n const desktopFirst = settings.desktopFirst;\n const states = settings.states;\n const tracker = new Set();\n const selectorAttribute = settings.selectorAttribute;\n const selectorPfx = selectorAttribute === 'class'\n ? '.' + HASH_CLASS_PREFIX + '\\\\#'\n : '[' + selectorAttribute + '~=\"' + HASH_CLASS_PREFIX + '#';\n const selectorSfx = selectorAttribute === 'class' ? '' : '\"]';\n result.push(generateRootVariables(settings));\n for (let media_index = 0, l = breakpoints.length; media_index < l; media_index++) {\n const bp = breakpoints[media_index];\n let str = '';\n if (media_index !== 0) {\n if (desktopFirst) {\n str += `@media only screen and (max-width: ${media_settings[bp]}) {`;\n }\n else {\n str += `@media only screen and (min-width: ${media_settings[bp]}) {`;\n }\n }\n for (let name_index = 0, l = PROPERTY_LIST.length; name_index < l; name_index++) {\n const name = PROPERTY_LIST[name_index];\n // generate all states for default media\n const stateList = media_index === 0 ? STATE_LIST : states;\n for (const state of stateList) {\n const state_index = STATE_LIST.indexOf(state);\n if (state_index < 0) {\n continue;\n }\n const hash = (((name_index * base) + media_index) * base + state_index).toString(16);\n const property = HASH_VAR_PREFIX + (media_index > 0 ? bp + '--' : '') + name + (state_index > 0 ? '__' + stateList[state_index] : '');\n tracker.add(hash);\n let variants = PROPERTY_VARIANTS[name], prefix = '';\n if (variants) {\n for (let i = 0, l = variants.length; i < l; i++) {\n prefix += `${variants[i]}:var(${property}) !important;`;\n }\n }\n str += `${selectorPfx + hash + selectorSfx}${state_index > 0 ? ':' + state : ''}{${prefix}${name}:var(${property}) !important}`;\n }\n }\n if (media_index !== 0) {\n str += '}';\n }\n result.push(str);\n }\n const content = {\n content: result.join(''),\n tracker\n };\n if (settings.cache) {\n localStorage.setItem(settings.cacheKey, settings.cache);\n localStorage.setItem(settings.cacheKey + ':' + settings.cache, JSON.stringify({\n content: content.content,\n tracker: [...tracker]\n }));\n }\n return content;\n }\n\n /*\n * Copyright 2021 Zindex Software\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n let _documentObserver = null;\n let _elementObserver = null;\n let _shadowRootObserver = null;\n const observedElements = new WeakMap();\n function observeTree(element, handler) {\n for (let e = element; e != null; e = e.nextElementSibling) {\n if (!observedElements.has(e)) {\n observe(e, handler);\n }\n else {\n observeTree(e.firstElementChild, handler);\n }\n }\n }\n function observeDocument(document, handler) {\n if (_documentObserver === null) {\n _documentObserver = new MutationObserver(function (mutations) {\n for (let i = 0, l = mutations.length; i < l; i++) {\n const nodes = mutations[i].addedNodes;\n for (let i = 0; i < nodes.length; i++) {\n if (nodes[i] instanceof HTMLElement) {\n observe(nodes[i], handler);\n }\n }\n }\n });\n }\n _documentObserver.observe(document, { childList: true, subtree: true });\n }\n function observeElement(element, handler) {\n if (_elementObserver === null) {\n _elementObserver = new MutationObserver(function (mutations) {\n for (const mutation of mutations) {\n const target = mutation.target;\n observedElements.set(target, handler.handleStyleChange(target, target.getAttribute(mutation.attributeName), observedElements.get(target)));\n }\n });\n }\n _elementObserver.observe(element, {\n attributes: true,\n attributeOldValue: true,\n childList: false,\n attributeFilter: [handler.userSettings.xStyleAttribute],\n });\n }\n function observeShadow(shadow, handler) {\n if (_shadowRootObserver === null) {\n _shadowRootObserver = new MutationObserver(function (mutations) {\n for (let i = 0, l = mutations.length; i < l; i++) {\n const nodes = mutations[i].addedNodes;\n for (let i = 0; i < nodes.length; i++) {\n if (nodes[i] instanceof HTMLElement) {\n observe(nodes[i], handler);\n }\n }\n }\n });\n }\n _shadowRootObserver.observe(shadow, { childList: true, subtree: true });\n }\n function observe(element, handler) {\n if (observedElements.has(element)) {\n return;\n }\n const style = element.attributes.getNamedItem(handler.userSettings.xStyleAttribute);\n observedElements.set(element, style ? handler.handleStyleChange(element, style.value, []) : []);\n observeElement(element, handler);\n for (let child = element.firstElementChild; child != null; child = child.nextElementSibling) {\n observe(child, handler);\n }\n }\n\n /*\n * Copyright 2021 Zindex Software\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n const mixinRepository = new Map();\n const MIXIN_ARGS_REGEX = /\\${([0-9]+)(?:=([^}]+))?}/g;\n const defaultMixinHandler = (context, name, args) => {\n if (name.startsWith('.')) {\n if (context.currentElement !== null) {\n name = name.substring(1);\n const attr = 'data-mixin-' + name;\n for (let p = context.currentElement.parentElement; p != null; p = p.parentElement) {\n if (p.hasAttribute(attr)) {\n return p.getAttribute(attr)\n .replace(MIXIN_ARGS_REGEX, (match, arg, fallback) => args[parseInt(arg)] || fallback || '');\n }\n }\n }\n return '';\n }\n return Root.getPropertyValue('--' + name + '--mixin')\n .replace(MIXIN_ARGS_REGEX, (match, arg, fallback) => args[parseInt(arg)] || fallback || '');\n };\n mixinRepository.set('space-x', function (_, space, right) {\n return right === 'true' ? `sibling!mr:${space || '0'}` : `sibling!ml:${space || '0'}`;\n });\n mixinRepository.set('space-y', function (_, space, bottom) {\n return bottom === 'true' ? `sibling!mb:${space || '0'}` : `sibling!mt:${space || '0'}`;\n });\n mixinRepository.set('grid', function () {\n return 'grid; l1!wb:break-all; l2!max-w:100%; child!justify-self:normal; child!align-self:normal';\n });\n mixinRepository.set('stack', function () {\n return `grid; grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr); \n grid-template-areas:\"stackarea\"; l1!grid-area:stackarea; l1!z:0; w:100%; h:100%`;\n });\n mixinRepository.set('sr-only', function () {\n return 'absolute; w:1px; h:1px; p:0; m:-1px; bw:0; overflow:hidden; clip:rect(0, 0, 0, 0); left:-9999px';\n });\n mixinRepository.set('container', function (settings) {\n if (settings.desktopFirst) {\n return `px: 1rem; mx:auto; max-w:@breakpoint-lg; lg|max-w:@breakpoint-md; md|max-w:@breakpoint-sm; sm|max-w:@breakpoint-xs; xs|max-w:100%`;\n }\n return `px: 1rem; mx:auto; max-w:100%; sm|max-w:@breakpoint-sm; md|max-w:@breakpoint-md; lg|max-w:@breakpoint-lg; xl|max-w:@breakpoint-xl`;\n });\n function resolveMixin(context, name, args) {\n if (mixinRepository.has(name)) {\n return style(mixinRepository.get(name)(context.userSettings, ...args));\n }\n return style(defaultMixinHandler(context, name, args));\n }\n function registerMixin(name, callback) {\n mixinRepository.set(name, callback);\n }\n\n /*\n * Copyright 2021 Zindex Software\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n const VAR_REGEX = /@([a-zA-Z0-9\\-_]+)/g;\n const REPLACE_REGEX = /\\$(selector|body|class|value|property|state|variants|var)/g;\n const SPLIT_REGEX = /;/;\n const MIXIN_PREFIX = '^';\n // do not match comma inside parenthesis\n // 2px, linear-gradient(blue, red), inline => [2px, linear-gradient(blue, red), inline]\n const COMMA_DELIMITED = /\\s*,\\s*(?![^(]*\\))/gm;\n class StyleHandler {\n constructor(settings, style, tracker) {\n this._currentElement = null;\n this.style = style;\n this.settings = settings;\n this.tracker = tracker;\n this.mediaSettings = settings.media;\n this.desktopFirst = settings.desktopFirst;\n this.breakpoints = settings.breakpoints;\n this.rules = [];\n this.padding = style.cssRules.length;\n this.selectorAttribute = settings.selectorAttribute;\n }\n get userSettings() {\n return this.settings;\n }\n get currentElement() {\n return this._currentElement;\n }\n handleStyleChange(element, content, old) {\n this._currentElement = element;\n if (content === null) {\n return this.handleStyleRemoved(element, old);\n }\n const newEntries = this.getStyleEntries(content);\n const classList = element.hasAttribute(this.selectorAttribute) ? element.getAttribute(this.selectorAttribute).split(' ') : [];\n const assemblerEntries = [];\n // remove old entries\n for (const { n: name, p: property, e: entry } of old) {\n if (!newEntries.has(name)) {\n const index = classList.indexOf(entry);\n if (index >= 0) {\n classList.splice(index, 1);\n }\n element.style.removeProperty(property);\n }\n }\n for (const info of newEntries.values()) {\n const { entry, property, hash, value, name } = info;\n const index = classList.indexOf(entry);\n if (index < 0) {\n classList.push(entry);\n }\n if (!this.tracker.has(hash)) {\n this.generateCSS(info);\n }\n element.style.setProperty(property, value);\n assemblerEntries.push({ e: entry, n: name, p: property });\n }\n element.setAttribute(this.selectorAttribute, classList.join(' '));\n this._currentElement = null;\n return assemblerEntries;\n }\n handleStyleRemoved(element, old) {\n this._currentElement = null;\n const classList = element.hasAttribute(this.selectorAttribute) ? element.getAttribute(this.selectorAttribute).split(' ') : [];\n for (const { p: property, e: entry } of old) {\n const index = classList.indexOf(entry);\n if (index >= 0) {\n classList.splice(index, 1);\n }\n element.style.removeProperty(property);\n }\n element.setAttribute(this.selectorAttribute, classList.join(' '));\n return [];\n }\n extract(attr, value = null) {\n var _a;\n const m = (_a = PROPERTY_REGEX.exec(attr)) === null || _a === void 0 ? void 0 : _a.groups;\n if (!m || !m.property) {\n return [];\n }\n const MEDIA_LIST = this.breakpoints;\n const media = MEDIA_LIST.indexOf(m.media || 'all');\n const state = STATE_LIST.indexOf(m.state || 'normal');\n if (media < 0 || state < 0) {\n return [];\n }\n let properties = m.property;\n const original = properties;\n const scopes = this.settings.scopes;\n if (ALIASES.hasOwnProperty(properties)) {\n properties = ALIASES[properties];\n if (typeof properties === 'function') {\n properties = properties(value);\n }\n }\n if (!Array.isArray(properties)) {\n properties = [properties];\n }\n if (value === null) {\n value = DEFAULT_VALUES[original] || '';\n }\n if (VALUE_WRAPPER.hasOwnProperty(original)) {\n value = VALUE_WRAPPER[original](value, original, media, state, this);\n }\n if (!Array.isArray(value)) {\n value = Array(properties.length).fill(value.replace(VAR_REGEX, \"var(--$1)\"));\n }\n else {\n value = value.map(value => value.replace(VAR_REGEX, \"var(--$1)\"));\n }\n const result = [];\n const base = STATE_LIST.length;\n let index = -1;\n for (const property of properties) {\n index++;\n const name = PROPERTY_LIST.indexOf(property);\n if (name < 0) {\n continue;\n }\n const scope = m.scope || '';\n const rank = ((name * base) + media) * base + state;\n const hash = rank.toString(16) + (scope ? `-${scope}` : '');\n const scopeRank = scopes.indexOf(scope) * 100000;\n const internalProperty = (m.media ? m.media + '--' : '') + (scope ? scope + '__' : '') + property + (m.state ? '__' + m.state : '');\n result.push({\n name: (m.media ? m.media + '|' : '') + (scope ? scope + '!' : '') + property + (m.state ? '.' + m.state : ''),\n //property: HASH_VAR_PREFIX + hash,\n property: HASH_VAR_PREFIX + internalProperty,\n entry: HASH_CLASS_PREFIX + '#' + hash,\n value: value[index],\n media: m.media || '',\n state: m.state || '',\n cssProperty: property,\n hash,\n scope,\n rank: scopeRank < 0 ? -1 : rank + scopeRank,\n });\n }\n return result;\n }\n getStyleEntries(content) {\n const entries = new Map();\n for (let name of this.getResolvedProperties(content)) {\n let value = null;\n const pos = name.indexOf(':');\n if (pos >= 0) {\n value = name.substr(pos + 1);\n name = name.substr(0, pos).trim();\n }\n for (const info of this.extract(name, value)) {\n entries.set(info.name, info);\n }\n }\n return entries;\n }\n getResolvedProperties(content, stack = []) {\n const entries = [];\n for (let name of content.split(SPLIT_REGEX)) {\n name = name.trim();\n if (name === '') {\n continue;\n }\n // extract mixin\n if (name.startsWith(MIXIN_PREFIX)) {\n const pos = name.indexOf(':');\n let mixin, args;\n if (pos < 0) {\n mixin = name.substr(1);\n args = [];\n }\n else {\n mixin = name.substr(1, pos - 1);\n args = name.substr(pos + 1).split(COMMA_DELIMITED).map(trim);\n }\n if (stack.indexOf(mixin) >= 0) {\n stack.push(mixin);\n throw new Error('Recursive mixin detected: ' + stack.join('->'));\n }\n stack.push(mixin);\n entries.push(...this.getResolvedProperties(resolveMixin(this, mixin, args), stack));\n stack.pop();\n continue;\n }\n entries.push(name);\n }\n return entries;\n }\n generateCSS(info) {\n const { tracker, mediaSettings, desktopFirst, style } = this;\n const { hash, media, state, cssProperty, property, scope, rank } = info;\n const hasMedia = media !== '';\n const selectorAttribute = this.settings.selectorAttribute;\n const selectorPfx = selectorAttribute === 'class'\n ? '.' + HASH_CLASS_PREFIX + '\\\\#'\n : '[' + selectorAttribute + '~=\"' + HASH_CLASS_PREFIX + '#';\n const selectorSfx = selectorAttribute === 'class' ? '' : '\"]';\n tracker.add(hash);\n if (rank < 0) {\n return;\n }\n let rule = '';\n if (hasMedia) {\n if (desktopFirst) {\n rule += `@media only screen and (max-width: ${mediaSettings[media]}) {`;\n }\n else {\n rule += `@media only screen and (min-width: ${mediaSettings[media]}) {`;\n }\n }\n let variants = PROPERTY_VARIANTS[cssProperty], prefix = '';\n if (variants) {\n for (let i = 0, l = variants.length; i < l; i++) {\n prefix += `${variants[i]}:var(${property}) !important;`;\n }\n }\n if (scope) {\n const scopeValue = Root.getPropertyValue('--' + scope + '--scope');\n if (scopeValue === '') {\n return;\n }\n rule += scopeValue.replace(REPLACE_REGEX, (match, p1) => {\n switch (p1) {\n case \"selector\":\n return `${selectorPfx + hash + selectorSfx}${state ? ':' + state : ''}`;\n case \"body\":\n return prefix + cssProperty + ': var(' + property + ') !important';\n case \"variants\":\n return prefix;\n case \"property\":\n return cssProperty;\n case \"value\":\n return `var(${property})`;\n case \"class\":\n return selectorPfx + hash + selectorSfx;\n case \"state\":\n return state ? ':' + state : '';\n case \"var\":\n return property;\n }\n return p1;\n });\n }\n else {\n rule += `${selectorPfx + hash + selectorSfx}${state ? ':' + state : ''}{${prefix}${cssProperty}: var(${property}) !important}`;\n }\n if (hasMedia) {\n rule += '}';\n }\n const ruleIndex = this.getRuleIndex(rank);\n this.rules.splice(ruleIndex, 0, rank);\n try {\n style.insertRule(rule, this.padding + ruleIndex);\n }\n catch (_a) {\n this.rules.splice(ruleIndex, 1);\n console.warn(\"Unsupported rule:\", rule);\n }\n }\n getRuleIndex(rank) {\n const { rules } = this;\n for (let i = 0, l = rules.length; i < l; i++) {\n if (rank < rules[i]) {\n return i;\n }\n }\n return rules.length;\n }\n }\n\n /*\n * Copyright 2021 Zindex Software\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n let styleHandler = null;\n let supportsConstructable = true;\n let supportsAdoptingStyleSheets = true;\n let settings = null;\n const observedShadowRoots = new WeakMap();\n function init(options) {\n supportsAdoptingStyleSheets = window.ShadowRoot &&\n (window.ShadyCSS === undefined || window.ShadyCSS.nativeShadow) &&\n 'adoptedStyleSheets' in Document.prototype &&\n 'replace' in CSSStyleSheet.prototype;\n settings = getUserSettings(options || document.currentScript.dataset);\n if (!settings.enabled) {\n return false;\n }\n let tracker;\n let stylesheet;\n if (supportsAdoptingStyleSheets && settings.constructable) {\n stylesheet = new CSSStyleSheet();\n if (settings.generate) {\n const generated = generateStyles(settings);\n tracker = generated.tracker;\n stylesheet.replaceSync(generated.content);\n }\n else {\n tracker = new Set();\n stylesheet.replaceSync(generateRootVariables(settings));\n }\n document.adoptedStyleSheets = [...document.adoptedStyleSheets, stylesheet];\n }\n else {\n supportsConstructable = false;\n const style = document.createElement(\"style\");\n const generated = generateStyles(settings);\n tracker = generated.tracker;\n style.id = 'opis-assembler-css';\n style.textContent = generated.content;\n document.currentScript.parentElement.insertBefore(style, document.currentScript);\n stylesheet = style.sheet;\n }\n styleHandler = new StyleHandler(settings, stylesheet, tracker);\n observeDocument(document, styleHandler);\n if (window) {\n window.addEventListener('DOMContentLoaded', function () {\n observeTree(document.body, styleHandler);\n });\n }\n return true;\n }\n function handleShadowRoot(shadowRoot, add = true) {\n if (styleHandler === null) {\n init();\n }\n if (!supportsAdoptingStyleSheets || !supportsConstructable) {\n return false;\n }\n if (observedShadowRoots.has(shadowRoot)) {\n return true;\n }\n observedShadowRoots.set(shadowRoot, true);\n if (add) {\n shadowRoot.adoptedStyleSheets = [...shadowRoot.adoptedStyleSheets, styleHandler.style];\n }\n observeShadow(shadowRoot, styleHandler);\n return true;\n }\n function cssStyleSheet() {\n if (styleHandler === null) {\n init();\n }\n return styleHandler.style;\n }\n\n /*\n * Copyright 2022 Zindex Software\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n if (typeof window !== 'undefined') {\n init();\n }\n\n exports.cssStyleSheet = cssStyleSheet;\n exports.handleShadowRoot = handleShadowRoot;\n exports.init = init;\n exports.registerMixin = registerMixin;\n exports.style = style;\n\n Object.defineProperty(exports, '__esModule', { value: true });\n\n}));\n"
},
{
"path": "package.json",
"content": "{\n \"name\": \"@asmcss/assembler\",\n \"version\": \"0.8.3\",\n \"main\": \"dist/assembler.cjs.js\",\n \"module\": \"dist/assembler.es.js\",\n \"browser\": \"dist/assembler.js\",\n \"dependencies\": {},\n \"scripts\": {\n \"build\": \"rollup -c --environment BUILD:production && tsc\",\n \"dev\": \"rollup -c -w\",\n \"test\": \"jest\"\n },\n \"devDependencies\": {\n \"@rollup/plugin-typescript\": \"^8.1.0\",\n \"jest\": \"^26.6.3\",\n \"rollup\": \"^2.36.1\",\n \"rollup-plugin-import-resolver\": \"^1.0.5\",\n \"rollup-plugin-terser\": \"^7.0.2\",\n \"tslib\": \"^2.1.0\",\n \"typescript\": \"^4.1.3\"\n },\n \"description\": \"Modern utility-first framework\",\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"git+https://github.com/asmcss/assembler.git\"\n },\n \"types\": \"types/index.d.ts\",\n \"files\": [\n \"dist/*\",\n \"types/*\"\n ],\n \"author\": \"Zindex Software\",\n \"license\": \"Apache-2.0\",\n \"bugs\": {\n \"url\": \"https://github.com/asmcss/assembler/issues\"\n },\n \"homepage\": \"https://asmcss.com\",\n \"jest\": {\n \"setupFiles\": [\n \"./tests/mocks/mock.js\"\n ],\n \"modulePathIgnorePatterns\": [\n \"mocks\"\n ]\n }\n}\n"
},
{
"path": "rollup.config.js",
"content": "import importResolver from 'rollup-plugin-import-resolver';\nimport ts from \"@rollup/plugin-typescript\";\nimport {terser} from \"rollup-plugin-terser\";\nimport pkg from './package.json';\n\nconst NAME = 'AssemblerCSS';\nconst MAIN = 'src/index.ts';\nconst AUTOLOAD = 'src/autoload.ts';\nconst GLOBALS = {};\nconst EXTERNAL = Object.keys(GLOBALS);\n\nconst production = !process.env.ROLLUP_WATCH;\n\nconst resolver = importResolver(['.mjs', '.ts', '.js']);\nconst typescript = ts({\n target: \"es2015\"\n});\n\nconst CONFIG = [\n {\n input: AUTOLOAD,\n output: {\n name: NAME,\n file: pkg.browser,\n format: 'umd',\n globals: GLOBALS\n },\n external: EXTERNAL,\n plugins: [resolver, typescript]\n }\n];\n\nif (production) {\n CONFIG.push(...[\n {\n input: AUTOLOAD,\n output: {\n name: NAME,\n file: pkg.browser.replace('.js', '.min.js'),\n format: 'umd',\n globals: GLOBALS\n },\n external: EXTERNAL,\n plugins: [resolver, typescript, terser()]\n },\n {\n input: MAIN,\n output: {\n name: NAME,\n file: pkg.main,\n format: 'cjs',\n globals: GLOBALS\n },\n external: EXTERNAL,\n plugins: [resolver, typescript]\n },\n {\n input: MAIN,\n output: {\n name: NAME,\n file: pkg.module,\n format: 'es',\n globals: GLOBALS\n },\n external: EXTERNAL,\n plugins: [resolver, typescript]\n }\n ]);\n}\n\n\nexport default CONFIG;"
},
{
"path": "src/Root.ts",
"content": "/* \n * Copyright 2021 Zindex Software\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nconst ESCAPE_REGEX = /\\\\\\n/g;\nconst PROPERTY_REGEX = /^--([a-zA-Z0-9-_]+)--(scope|mixin|register)$/;\nconst CONFIG_REGEX = /^--assembler-([a-zA-Z0-9-_]+)$/;\n\nclass RootClass {\n private cache: Map = new Map();\n private scopes: string[] = [\"\", \"text-clip\", \"selection\", \"placeholder\", \"before\", \"after\", \"first-letter\", \"first-line\",\n \"l1\", \"l2\", \"marker-l1\", \"marker\", \"sibling\", \"child\", \"even\", \"odd\", \"first\", \"last\", \"dark\", \"light\",\n \"landscape\", \"portrait\", \"motion-reduce\", \"motion-safe\"\n ];\n private registeredProperties: {name: string, aliases:string[]}[] = [];\n\n constructor() {\n const {cache} = this;\n const tc = '-webkit-background-clip: text !important;-moz-background-clip:text !important;background-clip:text !important;';\n\n cache.set(\"--text-clip--scope\", `$selector {${tc}}`);\n cache.set(\"--l1--scope\", \"$selector > * {$body}\");\n cache.set(\"--l2--scope\", \"$selector > * > * {$body}\");\n cache.set(\"--sibling--scope\", \"$selector > * + * {$body}\");\n cache.set(\"--child--scope\", \"$selector > $class {$body}\");\n\n\n cache.set(\"--selection--scope\", \"$selector::selection {$body}\");\n cache.set(\"--placeholder--scope\", \"$selector::placeholder {$body}\");\n\n cache.set(\"--marker--scope\", \"$selector::marker {$body}\");\n cache.set(\"--marker-l1--scope\", \"$selector > *::marker {$body}\");\n\n cache.set(\"--before--scope\", \"$selector::before {$body}\");\n cache.set(\"--after--scope\", \"$selector::after {$body}\");\n\n cache.set(\"--even--scope\", \"$selector:nth-child(even) {$body}\");\n cache.set(\"--odd--scope\", \"$selector:nth-child(odd) {$body}\");\n cache.set(\"--first--scope\", \"$selector:first-child {$body}\");\n cache.set(\"--last--scope\", \"$selector:last-child {$body}\");\n\n cache.set(\"--first-letter--scope\", \"$selector::first-letter {$body}\");\n cache.set(\"--first-line--scope\", \"$selector::first-line {$body}\");\n\n cache.set(\"--dark--scope\", \"@media(prefers-color-scheme: dark) {$selector {$body}}\");\n cache.set(\"--light--scope\", \"@media(prefers-color-scheme: light) {$selector {$body}}\");\n\n cache.set(\"--landscape--scope\", \"@media(orientation: landscape) {$selector {$body}}\");\n cache.set(\"--portrait--scope\", \"@media(orientation: portrait) {$selector {$body}}\");\n\n cache.set(\"--motion-reduce--scope\", \"@media(prefers-reduced-motion: reduce) {$selector {$body}}\");\n cache.set(\"--motion-safe--scope\", \"@media(prefers-reduced-motion: no-preference) {$selector {$body}}\");\n\n this.initialize();\n }\n\n private initialize() {\n const {cache, scopes, registeredProperties} = this;\n for (const style of this.getComputedStyles()) {\n for (const property of style) {\n const match = PROPERTY_REGEX.exec(property);\n if (match == null) {\n continue;\n }\n const name = match[1];\n const value = this.getValue(style, property);\n cache.set(property, value);\n switch (match[2]) {\n case \"scope\":\n if (scopes.indexOf(name) === -1) {\n scopes.push(name);\n }\n break;\n case \"register\":\n if (value === 'true' || value === '') {\n registeredProperties.push({name, aliases: []});\n } else {\n const aliases = value.split(',').map(v => v.trim()).filter(v => v !== '');\n registeredProperties.push({name, aliases})\n }\n break;\n }\n }\n }\n }\n\n private getComputedStyles(): CSSStyleDeclaration[] {\n const styles = [];\n for (let si = 0, sl = document.styleSheets.length; si < sl; si++) {\n const styleSheet = document.styleSheets[si];\n if (styleSheet.href !== null && styleSheet.href.indexOf(window.location.origin) !== 0) {\n continue;\n }\n if (styleSheet.href === null && styleSheet.ownerNode !== null\n && styleSheet.ownerNode instanceof Element && (styleSheet.ownerNode as Element).id === 'opis-assembler-css') {\n continue;\n }\n const rule = styleSheet.cssRules[0];\n if (rule.type === CSSRule.STYLE_RULE && (rule as CSSStyleRule).selectorText === ':root') {\n styles.push((rule as CSSStyleRule).style);\n }\n }\n\n return styles;\n }\n\n private getValue(style: CSSStyleDeclaration, property: string): string {\n let value = style.getPropertyValue(property).replace(ESCAPE_REGEX, \"\").trim();\n if (value.startsWith('\"') && value.endsWith('\"')) {\n value = value.substring(1, value.length - 1).trim();\n }\n return value;\n }\n\n getRegisteredScopes(): string[] {\n return this.scopes;\n }\n\n getRegisteredProperties(): {name: string, aliases:string[]}[] {\n return this.registeredProperties;\n }\n\n getPropertyValue(property: string): string {\n if (this.cache.has(property)) {\n return this.cache.get(property);\n }\n\n return '';\n }\n}\n\nexport const Root = new RootClass();"
},
{
"path": "src/StyleHandler.ts",
"content": "/* \n * Copyright 2021 Zindex Software\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport {ALIASES, DEFAULT_VALUES, PROPERTY_LIST, PROPERTY_VARIANTS, STATE_LIST, VALUE_WRAPPER} from \"./list\";\nimport {HASH_VAR_PREFIX, PROPERTY_REGEX, HASH_CLASS_PREFIX, trim} from \"./helpers\";\nimport {Root} from \"./Root\";\nimport type {UserSettings} from \"./helpers\";\nimport {resolveMixin} from \"./mixins\";\n\ntype PropertyInfo = {\n entry: string,\n property: string,\n cssProperty: string,\n media: string,\n state: string,\n name: string,\n value: string|null,\n hash: string,\n scope: string,\n rank: number\n};\n\ntype AssemblerEntry = {\n n: string, //name\n p: string, //property\n e: string, //class|entry\n}\n\nconst VAR_REGEX = /@([a-zA-Z0-9\\-_]+)/g;\nconst REPLACE_REGEX = /\\$(selector|body|class|value|property|state|variants|var)/g;\nconst SPLIT_REGEX = /;/;\nconst MIXIN_PREFIX = '^';\n\n// do not match comma inside parenthesis\n// 2px, linear-gradient(blue, red), inline => [2px, linear-gradient(blue, red), inline]\nconst COMMA_DELIMITED = /\\s*,\\s*(?![^(]*\\))/gm;\n\nexport default class StyleHandler {\n readonly style: CSSStyleSheet;\n private readonly settings: UserSettings;\n private tracker: Set;\n private mediaSettings: object;\n private desktopFirst: boolean;\n private readonly breakpoints: string[];\n private rules: number[];\n private readonly padding: number;\n private readonly selectorAttribute: string;\n private _currentElement: HTMLElement|null = null;\n\n constructor(settings: UserSettings, style: CSSStyleSheet, tracker: Set) {\n this.style = style;\n this.settings = settings;\n this.tracker = tracker;\n this.mediaSettings = settings.media;\n this.desktopFirst = settings.desktopFirst;\n this.breakpoints = settings.breakpoints;\n this.rules = [];\n this.padding = style.cssRules.length;\n this.selectorAttribute = settings.selectorAttribute;\n }\n\n get userSettings(): UserSettings {\n return this.settings;\n }\n\n get currentElement(): HTMLElement|null {\n return this._currentElement;\n }\n\n handleStyleChange(element: HTMLElement, content: string|null, old: AssemblerEntry[]): AssemblerEntry[] {\n this._currentElement = element;\n\n if (content === null) {\n return this.handleStyleRemoved(element, old);\n }\n\n const newEntries = this.getStyleEntries(content);\n const classList = element.hasAttribute(this.selectorAttribute) ? element.getAttribute(this.selectorAttribute).split(' ') : [];\n const assemblerEntries: AssemblerEntry[] = [];\n\n // remove old entries\n for (const {n:name, p:property, e:entry} of old) {\n if (!newEntries.has(name)) {\n const index = classList.indexOf(entry);\n if (index >= 0) {\n classList.splice(index, 1);\n }\n element.style.removeProperty(property);\n }\n }\n\n for (const info of newEntries.values()) {\n const {entry, property, hash, value, name} = info;\n const index = classList.indexOf(entry);\n if (index < 0) {\n classList.push(entry);\n }\n if (!this.tracker.has(hash)) {\n this.generateCSS(info);\n }\n element.style.setProperty(property, value);\n assemblerEntries.push({e:entry, n: name, p: property});\n }\n\n element.setAttribute(this.selectorAttribute, classList.join(' '));\n this._currentElement = null;\n return assemblerEntries;\n }\n\n handleStyleRemoved(element: HTMLElement, old: AssemblerEntry[]): AssemblerEntry[] {\n this._currentElement = null;\n const classList = element.hasAttribute(this.selectorAttribute) ? element.getAttribute(this.selectorAttribute).split(' ') : [];\n\n for (const {p:property, e:entry} of old) {\n const index = classList.indexOf(entry);\n if (index >= 0) {\n classList.splice(index, 1);\n }\n element.style.removeProperty(property);\n }\n\n element.setAttribute(this.selectorAttribute, classList.join(' '));\n\n return [];\n }\n\n private extract(attr: string, value: string|string[]|null = null): PropertyInfo[] {\n const m = PROPERTY_REGEX.exec(attr)?.groups;\n\n if (!m || !m.property) {\n return [];\n }\n\n const MEDIA_LIST = this.breakpoints;\n\n const media = MEDIA_LIST.indexOf(m.media || 'all');\n const state = STATE_LIST.indexOf(m.state || 'normal');\n\n if (media < 0 || state < 0) {\n return [];\n }\n\n let properties: string|string[] = m.property;\n const original = properties;\n const scopes = this.settings.scopes;\n\n if (ALIASES.hasOwnProperty(properties)) {\n properties = ALIASES[properties];\n if (typeof properties === 'function') {\n properties = (properties as (a: string|null) => string[])(value as string|null);\n }\n }\n\n if (!Array.isArray(properties)) {\n properties = [properties];\n }\n\n if (value === null) {\n value = DEFAULT_VALUES[original] || '';\n }\n if (VALUE_WRAPPER.hasOwnProperty(original)) {\n value = VALUE_WRAPPER[original](value, original, media, state, this);\n }\n if (!Array.isArray(value)) {\n value = Array(properties.length).fill(value.replace(VAR_REGEX, \"var(--$1)\"));\n } else {\n value = value.map(value => value.replace(VAR_REGEX, \"var(--$1)\"));\n }\n\n const result = [];\n const base = STATE_LIST.length;\n\n let index = -1;\n for (const property of properties) {\n index++;\n const name = PROPERTY_LIST.indexOf(property);\n\n if (name < 0) {\n continue;\n }\n\n const scope = m.scope || '';\n const rank = ((name * base) + media) * base + state;\n const hash = rank.toString(16) + (scope ? `-${scope}` : '');\n const scopeRank = scopes.indexOf(scope) * 100000;\n const internalProperty = (m.media ? m.media + '--' : '') + (scope ? scope + '__' : '') + property + (m.state ? '__' + m.state : '');\n\n result.push({\n name: (m.media ? m.media + '|' : '') + (scope ? scope + '!' : '') + property + (m.state ? '.' + m.state : ''),\n //property: HASH_VAR_PREFIX + hash,\n property: HASH_VAR_PREFIX + internalProperty,\n entry: HASH_CLASS_PREFIX + '#' + hash,\n value: value[index],\n media: m.media || '',\n state: m.state || '',\n cssProperty: property,\n hash,\n scope,\n rank: scopeRank < 0 ? -1 : rank + scopeRank,\n });\n }\n\n return result;\n }\n\n private getStyleEntries(content: string): Map {\n const entries = new Map();\n\n for (let name of this.getResolvedProperties(content)) {\n let value = null;\n const pos = name.indexOf(':');\n\n if (pos >= 0) {\n value = name.substr(pos + 1);\n name = name.substr(0, pos).trim();\n }\n\n for (const info of this.extract(name, value)) {\n entries.set(info.name, info);\n }\n }\n\n return entries;\n }\n\n private getResolvedProperties(content: string, stack: string[] = []): string[] {\n const entries = [];\n for (let name of content.split(SPLIT_REGEX)) {\n name = name.trim();\n if (name === '') {\n continue;\n }\n // extract mixin\n if (name.startsWith(MIXIN_PREFIX)) {\n const pos = name.indexOf(':');\n let mixin, args;\n\n if (pos < 0) {\n mixin = name.substr(1);\n args = [];\n } else {\n mixin = name.substr(1, pos - 1);\n args = name.substr(pos + 1).split(COMMA_DELIMITED).map(trim);\n }\n\n if (stack.indexOf(mixin) >= 0) {\n stack.push(mixin);\n throw new Error('Recursive mixin detected: ' + stack.join('->'));\n }\n\n stack.push(mixin);\n entries.push(...this.getResolvedProperties(resolveMixin(this, mixin, args), stack))\n stack.pop();\n\n continue;\n }\n\n entries.push(name);\n }\n\n return entries;\n }\n\n private generateCSS(info: PropertyInfo): void {\n const {tracker, mediaSettings, desktopFirst, style} = this;\n const {hash, media, state, cssProperty, property, scope, rank} = info;\n const hasMedia = media !== '';\n const selectorAttribute = this.settings.selectorAttribute;\n const selectorPfx = selectorAttribute === 'class'\n ? '.' + HASH_CLASS_PREFIX + '\\\\#'\n : '[' + selectorAttribute + '~=\"' + HASH_CLASS_PREFIX + '#' ;\n const selectorSfx = selectorAttribute === 'class' ? '' : '\"]';\n\n tracker.add(hash);\n\n if (rank < 0) {\n return;\n }\n\n let rule = '';\n\n if (hasMedia) {\n if (desktopFirst) {\n rule += `@media only screen and (max-width: ${mediaSettings[media]}) {`;\n } else {\n rule += `@media only screen and (min-width: ${mediaSettings[media]}) {`;\n }\n }\n\n let variants = PROPERTY_VARIANTS[cssProperty], prefix = '';\n\n if (variants) {\n for (let i = 0, l = variants.length; i < l; i++) {\n prefix += `${variants[i]}:var(${property}) !important;`;\n }\n }\n\n if (scope) {\n const scopeValue = Root.getPropertyValue('--' + scope + '--scope');\n if (scopeValue === '') {\n return;\n }\n rule += scopeValue.replace(REPLACE_REGEX, (match, p1) => {\n switch (p1) {\n case \"selector\":\n return `${selectorPfx + hash + selectorSfx}${state ? ':' + state : ''}`;\n case \"body\":\n return prefix + cssProperty + ': var(' + property + ') !important';\n case \"variants\":\n return prefix;\n case \"property\":\n return cssProperty;\n case \"value\":\n return `var(${property})`;\n case \"class\":\n return selectorPfx + hash + selectorSfx;\n case \"state\":\n return state ? ':' + state : '';\n case \"var\":\n return property;\n }\n return p1;\n });\n } else {\n rule += `${selectorPfx + hash + selectorSfx}${state ? ':' + state : ''}{${prefix}${cssProperty}: var(${property}) !important}`;\n }\n\n if (hasMedia) {\n rule += '}'\n }\n\n const ruleIndex = this.getRuleIndex(rank);\n this.rules.splice(ruleIndex, 0, rank);\n\n try {\n style.insertRule(rule, this.padding + ruleIndex);\n } catch {\n this.rules.splice(ruleIndex, 1);\n console.warn(\"Unsupported rule:\", rule);\n }\n }\n\n private getRuleIndex(rank: number): number {\n const {rules} = this;\n for (let i = 0, l = rules.length; i < l; i++) {\n if (rank < rules[i]) {\n return i;\n }\n }\n return rules.length;\n }\n}"
},
{
"path": "src/autoload.ts",
"content": "/*\n * Copyright 2022 Zindex Software\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport {init} from \"./index\";\nexport * from \"./index\";\n\nif (typeof window !== 'undefined') {\n init();\n}"
},
{
"path": "src/generators.ts",
"content": "/*\n * Copyright 2021 Zindex Software\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport {PROPERTY_LIST, STATE_LIST, PROPERTY_VARIANTS} from \"./list\";\nimport {generateRootVariables} from \"./variables\";\nimport {HASH_VAR_PREFIX, HASH_CLASS_PREFIX} from \"./helpers\";\nimport type {UserSettings} from \"./helpers\";\n\ntype GeneratedStyles = {content: string, tracker: Set};\n\nexport function generateStyles(settings: UserSettings): GeneratedStyles {\n\n if (settings.cache) {\n const json = localStorage.getItem(settings.cacheKey + ':' + settings.cache);\n\n if (json !== null) {\n const content = JSON.parse(json);\n content.tracker = new Set(content.tracker);\n return content;\n }\n\n const oldCacheKey = localStorage.getItem(settings.cacheKey);\n\n if (oldCacheKey !== null) {\n localStorage.removeItem(settings.cacheKey + ':' + oldCacheKey);\n }\n\n localStorage.setItem(settings.cacheKey, settings.cache);\n } else {\n const oldCacheKey = localStorage.getItem(settings.cacheKey);\n if (oldCacheKey !== null) {\n localStorage.removeItem(settings.cacheKey + ':' + oldCacheKey);\n localStorage.removeItem(settings.cacheKey);\n }\n }\n\n const base = STATE_LIST.length, result = [];\n const breakpoints = settings.breakpoints;\n const media_settings = settings.media;\n const desktopFirst = settings.desktopFirst;\n const states = settings.states;\n const tracker = new Set();\n const selectorAttribute = settings.selectorAttribute;\n const selectorPfx = selectorAttribute === 'class'\n ? '.' + HASH_CLASS_PREFIX + '\\\\#'\n : '[' + selectorAttribute + '~=\"' + HASH_CLASS_PREFIX + '#' ;\n const selectorSfx = selectorAttribute === 'class' ? '' : '\"]';\n\n result.push(generateRootVariables(settings));\n\n for (let media_index = 0, l = breakpoints.length; media_index < l; media_index++) {\n const bp = breakpoints[media_index];\n\n let str = '';\n\n if (media_index !== 0) {\n if (desktopFirst) {\n str += `@media only screen and (max-width: ${media_settings[bp]}) {`;\n } else {\n str += `@media only screen and (min-width: ${media_settings[bp]}) {`;\n }\n }\n\n for (let name_index = 0, l = PROPERTY_LIST.length; name_index < l; name_index++) {\n const name = PROPERTY_LIST[name_index];\n\n // generate all states for default media\n const stateList = media_index === 0 ? STATE_LIST : states;\n for (const state of stateList) {\n const state_index = STATE_LIST.indexOf(state);\n if (state_index < 0) {\n continue;\n }\n\n const hash = (((name_index * base) + media_index) * base + state_index).toString(16);\n const property = HASH_VAR_PREFIX + (media_index > 0 ? bp + '--' : '') + name + (state_index > 0 ? '__' + stateList[state_index] : '');\n tracker.add(hash);\n\n let variants = PROPERTY_VARIANTS[name], prefix = '';\n if (variants) {\n for (let i = 0, l = variants.length; i < l; i++) {\n prefix += `${variants[i]}:var(${property}) !important;`;\n }\n }\n str += `${selectorPfx + hash + selectorSfx}${state_index > 0 ? ':' + state : ''}{${prefix}${name}:var(${property}) !important}`;\n }\n }\n\n if (media_index !== 0) {\n str += '}';\n }\n result.push(str);\n }\n\n const content = {\n content: result.join(''),\n tracker\n };\n\n if (settings.cache) {\n localStorage.setItem(settings.cacheKey, settings.cache);\n localStorage.setItem(settings.cacheKey + ':' + settings.cache, JSON.stringify({\n content: content.content,\n tracker: [...tracker]\n }));\n }\n\n return content;\n}\n"
},
{
"path": "src/helpers.ts",
"content": "/* \n * Copyright 2021 Zindex Software\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport {PROPERTY_LIST, PROPERTY_VARIANTS} from \"./list\";\nimport {Root} from \"./Root\";\n\nexport type UserSettings = {\n enabled: boolean,\n generate: boolean,\n constructable: boolean,\n cache: string|null,\n cacheKey: string,\n desktopFirst: boolean,\n breakpoints: string[],\n media: {xs: string, sm: string, md: string, lg:string, xl:string},\n states: string[],\n scopes: string[],\n xStyleAttribute: string,\n selectorAttribute: string,\n registeredProperties: {name: string, aliases: string[]}[],\n};\n\nexport interface MixinContext {\n readonly userSettings: UserSettings;\n readonly currentElement: HTMLElement|null;\n}\n\ntype StyleType = string|{[key: string]: string};\nconst regex = /([a-z0-9]|(?=[A-Z]))([A-Z])/g;\n\nexport const HASH_VAR_PREFIX = '--asm-';\nexport const HASH_CLASS_PREFIX = 'asm';\nexport const PROPERTY_REGEX = /^(?:(?[a-z]{2})\\|)?(?:(?[-a-zA-Z0-9]+)!)?(?[-a-z]+)(?:\\.(?[-a-z]+))?$/m;\n\nexport function getUserSettings(dataset: {[key: string]: string}): UserSettings {\n const enabled = dataset.enabled === undefined ? true : dataset.enabled === 'true';\n const generate = dataset.generate === undefined ? false : dataset.generate === 'true';\n const constructable = dataset.constructable === undefined ? true : dataset.constructable === 'true';\n const desktopFirst = dataset.mode === undefined ? false : dataset.mode === 'desktop-first';\n const selectorAttribute = dataset.selectorAttribute === undefined ? 'class' : dataset.selectorAttribute;\n const cache = dataset.cache === undefined ? null : dataset.cache;\n const cacheKey = dataset.cacheKey === undefined ? \"assembler-css-cache\" : dataset.cacheKey;\n\n const registeredProperties = Root.getRegisteredProperties();\n const scopes = Root.getRegisteredScopes();\n\n for (let i = 0, l = registeredProperties.length; i < l; i++) {\n const prop = registeredProperties[i];\n if (PROPERTY_LIST.indexOf(prop.name) === -1) {\n PROPERTY_LIST.push(prop.name);\n }\n if (prop.aliases.length > 0) {\n PROPERTY_VARIANTS[prop.name] = prop.aliases;\n }\n }\n\n // Consider all bp\n let breakpoints = ['xs', 'sm', 'md', 'lg', 'xl'];\n\n if (desktopFirst) {\n // remove xl and reverse\n breakpoints.pop();\n breakpoints.reverse();\n } else {\n // remove xs\n breakpoints.shift();\n }\n\n // Add all\n breakpoints.unshift('all');\n\n const states = dataset.states === undefined\n ? [\"normal\", \"hover\"]\n : getStringItemList(dataset.states.toLowerCase());\n if (states.indexOf(\"normal\") === -1) {\n // always add normal state\n states.unshift(\"normal\");\n }\n\n const xs = dataset.breakpointXs || \"512px\";\n const sm = dataset.breakpointSm || (desktopFirst ? \"768px\" : \"512px\");\n const md = dataset.breakpointMd || (desktopFirst ? \"1024px\" : \"768px\");\n const lg = dataset.breakpointLg || (desktopFirst ? \"1280px\": \"1024px\");\n const xl = dataset.breakpointXl || (\"1280px\");\n\n const xStyleAttribute = dataset.xStyleAttribute || \"x-style\";\n\n return {\n enabled,\n generate,\n constructable,\n cache,\n cacheKey,\n desktopFirst,\n scopes,\n states,\n breakpoints,\n media: {xs, sm, md, lg, xl},\n xStyleAttribute,\n selectorAttribute,\n registeredProperties\n };\n}\n\nexport function style(item: StyleType|StyleType[]): string {\n if (typeof item === 'string') {\n return item.trim();\n }\n\n if (Array.isArray(item)) {\n return item.map(style).join(';');\n }\n\n const list = [];\n\n for (const key in item) {\n const value = item[key];\n if (value === undefined) {\n continue;\n }\n const property = key.replace(regex, '$1-$2').toLowerCase();\n list.push(value === null ? property : (property + ':' + value));\n }\n\n return list.join(';');\n}\n\nfunction getStringItemList(value: string, unique: boolean = true): string[] {\n const items = value\n .replace(/[,;]/g, ' ')\n .split(/\\s\\s*/g)\n .map(trim)\n .filter(nonEmptyString);\n\n return unique ? items.filter(uniqueItems) : items;\n}\n\nfunction getRegisteredProperties(value: string): {name: string, aliases:string[]}[] {\n return value\n .split(';')\n .map(v => v.trim())\n .filter(v => v !== '')\n .map(v => {\n const index = v.indexOf(':');\n if (index < 0) {\n return {name: v, aliases: []};\n }\n return {\n name: v.substr(0, index),\n aliases: v.substr(index + 1).split(',').map(v => v.trim()).filter(v => v !== '')\n }\n });\n}\n\nexport function trim(value: string): string {\n return value.trim();\n}\n\nexport function nonEmptyString(value: string): boolean {\n return value !== '';\n}\n\nexport function uniqueItems(value: any, index: number, self: any[]): boolean {\n return self.indexOf(value) === index;\n}\n"
},
{
"path": "src/index.ts",
"content": "/*\n * Copyright 2021 Zindex Software\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport {generateStyles} from \"./generators\";\nimport {observeDocument, observeShadow, observeTree} from \"./observers\";\nimport {getUserSettings} from \"./helpers\";\nimport {generateRootVariables} from \"./variables\";\nimport StyleHandler from \"./StyleHandler\";\n\nexport {registerMixin} from \"./mixins\";\nexport {style} from \"./helpers\";\n\ndeclare global {\n interface Document {\n adoptedStyleSheets: CSSStyleSheet[];\n }\n interface Window {\n ShadyCSS?: any;\n }\n interface CSSStyleSheet {\n replace(css: string);\n replaceSync(css: string);\n }\n interface ShadowRoot {\n adoptedStyleSheets?: CSSStyleSheet[];\n }\n}\n\n\nlet styleHandler: StyleHandler = null;\nlet supportsConstructable = true;\nlet supportsAdoptingStyleSheets = true;\nlet settings = null;\nconst observedShadowRoots = new WeakMap();\n\nexport function init(options?: {[key: string]: string}): boolean {\n supportsAdoptingStyleSheets = window.ShadowRoot &&\n (window.ShadyCSS === undefined || window.ShadyCSS.nativeShadow) &&\n 'adoptedStyleSheets' in Document.prototype &&\n 'replace' in CSSStyleSheet.prototype;\n settings = getUserSettings(options || document.currentScript.dataset);\n\n if (!settings.enabled) {\n return false;\n }\n\n let tracker: Set;\n let stylesheet: CSSStyleSheet;\n\n if (supportsAdoptingStyleSheets && settings.constructable) {\n stylesheet = new CSSStyleSheet();\n if (settings.generate) {\n const generated = generateStyles(settings);\n tracker = generated.tracker;\n stylesheet.replaceSync(generated.content);\n } else {\n tracker = new Set();\n stylesheet.replaceSync(generateRootVariables(settings));\n }\n document.adoptedStyleSheets = [...document.adoptedStyleSheets, stylesheet];\n } else {\n supportsConstructable = false;\n const style = document.createElement(\"style\");\n const generated = generateStyles(settings);\n tracker = generated.tracker;\n style.id = 'opis-assembler-css';\n style.textContent = generated.content;\n document.currentScript.parentElement.insertBefore(style, document.currentScript);\n stylesheet = style.sheet;\n }\n\n styleHandler = new StyleHandler(settings, stylesheet, tracker);\n\n observeDocument(document, styleHandler);\n\n if (window) {\n window.addEventListener('DOMContentLoaded', function () {\n observeTree(document.body, styleHandler);\n });\n }\n\n return true;\n}\n\nexport function handleShadowRoot(shadowRoot: ShadowRoot, add: boolean = true): boolean {\n if (styleHandler === null) {\n init();\n }\n\n if (!supportsAdoptingStyleSheets || !supportsConstructable) {\n return false;\n }\n\n if (observedShadowRoots.has(shadowRoot)) {\n return true;\n }\n\n observedShadowRoots.set(shadowRoot, true);\n\n if (add) {\n shadowRoot.adoptedStyleSheets = [...shadowRoot.adoptedStyleSheets, styleHandler.style];\n }\n\n observeShadow(shadowRoot, styleHandler);\n\n return true;\n}\n\nexport function cssStyleSheet(): CSSStyleSheet {\n if (styleHandler === null) {\n init();\n }\n return styleHandler.style;\n}\n\n"
},
{
"path": "src/list.ts",
"content": "/*\n * Copyright 2021 Zindex Software\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport type StyleHandler from \"./StyleHandler\";\n\nconst positive_number_regex = /^[0-9]+(\\.5)?$/;\nconst number_regex = /^-?[0-9]+(\\.5)?$/;\nconst font_size_regex = /^(xs|sm|base|lg|([2-9])?xl)$/;\nconst line_height_regex = /^(none|tight|snug|normal|relaxed|loose)$/;\nconst elevation_regex = /^[0-9]|1[0-9]|2[0-4]$/;\nconst shadow_regex = /^[1-6]$/;\nconst letter_spacing_regex = /^(tighter|tight|normal|wide|wider|widest)$/;\nconst radius_regex = /^(xs|sm|md|lg|xl|pill)$/;\nconst order_regex = /^(first|last|none)$/;\n\n// do not match comma inside parenthesis\n// 2px, linear-gradient(blue, red), inline => [2px, linear-gradient(blue, red), inline]\nconst args_delimiter = /\\s*,\\s*(?![^(]*\\))/gm;\n\nexport const PROPERTY_LIST = [\n \"align-content\",\n \"align-items\",\n \"align-self\",\n \"animation\",\n \"appearance\",\n \"backdrop-filter\",\n \"background\",\n \"background-attachment\",\n \"background-blend-mode\",\n \"background-clip\",\n \"background-color\",\n \"background-image\",\n \"background-position\",\n \"background-repeat\",\n \"background-size\",\n \"backface-visibility\",\n \"border\",\n \"border-bottom\",\n \"border-bottom-color\",\n \"border-bottom-style\",\n \"border-bottom-width\",\n \"border-bottom-left-radius\",\n \"border-bottom-right-radius\",\n \"border-collapse\",\n \"border-color\",\n \"border-left\",\n \"border-left-color\",\n \"border-left-style\",\n \"border-left-width\",\n \"border-radius\",\n \"border-right\",\n \"border-right-color\",\n \"border-right-style\",\n \"border-right-width\",\n \"border-style\",\n \"border-top\",\n \"border-top-color\",\n \"border-top-style\",\n \"border-top-width\",\n \"border-top-left-radius\",\n \"border-top-right-radius\",\n \"border-width\",\n \"bottom\",\n \"box-orient\",\n \"box-shadow\",\n \"box-sizing\",\n \"clear\",\n \"clip\",\n \"clip-path\",\n \"color\",\n \"column-gap\",\n \"content\",\n \"cursor\",\n \"display\",\n \"filter\",\n \"flex\",\n \"flex-basis\",\n \"flex-direction\",\n \"flex-flow\",\n \"flex-grow\",\n \"flex-shrink\",\n \"flex-wrap\",\n \"float\",\n \"font-family\",\n \"font-size\",\n \"font-style\",\n \"font-weight\",\n \"font-variant-numeric\",\n \"gap\",\n \"grid\",\n \"grid-area\",\n \"grid-auto-columns\",\n \"grid-auto-flow\",\n \"grid-auto-rows\",\n \"grid-column\",\n \"grid-column-end\",\n \"grid-column-start\",\n \"grid-row\",\n \"grid-row-end\",\n \"grid-row-start\",\n \"grid-template\",\n \"grid-template-areas\",\n \"grid-template-columns\",\n \"grid-template-rows\",\n \"height\",\n \"isolation\",\n \"justify-content\",\n \"justify-items\",\n \"justify-self\",\n \"left\",\n \"letter-spacing\",\n \"line-break\",\n \"line-clamp\",\n \"line-height\",\n \"list-style-position\",\n \"list-style-type\",\n \"margin\",\n \"margin-bottom\",\n \"margin-left\",\n \"margin-right\",\n \"margin-top\",\n \"max-height\",\n \"max-width\",\n \"min-height\",\n \"min-width\",\n \"object-fit\",\n \"object-position\",\n \"opacity\",\n \"order\",\n \"outline\",\n \"outline-offset\",\n \"overflow\",\n \"overflow-wrap\",\n \"overflow-x\",\n \"overflow-y\",\n \"overscroll-behavior\",\n \"overscroll-behavior-x\",\n \"overscroll-behavior-y\",\n \"padding\",\n \"padding-bottom\",\n \"padding-left\",\n \"padding-right\",\n \"padding-top\",\n \"perspective\",\n \"perspective-origin\",\n \"place-content\",\n \"place-items\",\n \"place-self\",\n \"pointer-events\",\n \"position\",\n \"resize\",\n \"right\",\n \"row-gap\",\n \"table-layout\",\n \"text-align\",\n \"text-decoration\",\n \"text-decoration-style\",\n \"text-fill-color\",\n \"text-overflow\",\n \"text-shadow\",\n \"text-transform\",\n \"top\",\n \"transform\",\n \"transform-box\",\n \"transform-origin\",\n \"transform-style\",\n \"transition\",\n \"user-select\",\n \"vertical-align\",\n \"visibility\",\n \"white-space\",\n \"width\",\n \"word-break\",\n \"z-index\",\n];\nexport const PROPERTY_VARIANTS = {\n \"animation\": [\"-webkit-animation\"],\n \"appearance\": [\"-webkit-appearance\", \"-moz-appearance\"],\n \"background-clip\": [\"-webkit-background-clip\", \"-moz-background-clip\"],\n \"backdrop-filter\": [\"-webkit-backdrop-filter\"],\n \"box-orient\": [\"-webkit-box-orient\"],\n \"clip-path\": [\"-webkit-clip-path\"],\n \"column-gap\": [\"-moz-column-gap\"],\n \"line-clamp\": [\"-webkit-line-clamp\"],\n \"user-select\": [\"-webkit-user-select\", \"-moz-user-select\"],\n \"text-fill-color\": [\"-webkit-text-fill-color\", \"-moz-text-fill-color\"]\n};\nexport const STATE_LIST = [\n \"normal\",\n\n \"link\",\n \"visited\",\n\n \"empty\",\n \"placeholder-shown\",\n\n \"default\",\n \"checked\",\n \"indeterminate\",\n\n \"valid\",\n \"invalid\",\n\n \"required\",\n \"optional\",\n\n \"out-of-range\",\n \"in-range\",\n\n \"hover\",\n \"focus\",\n \"focus-within\",\n \"focus-visible\",\n \"active\",\n\n \"read-only\",\n \"read-write\",\n\n \"disabled\",\n \"enabled\",\n];\n\nexport const ALIASES = {\n \"backdrop\": \"backdrop-filter\",\n \"bg\": \"background\",\n \"bg-attachment\": \"background-attachment\",\n \"bg-blend\": \"background-blend-mode\",\n \"bg-clip\": \"background-clip\",\n \"bg-color\": \"background-color\",\n \"bg-image\": \"background-image\",\n \"bg-position\": \"background-position\",\n \"bg-repeat\": \"background-repeat\",\n \"bg-size\": \"background-size\",\n \"radius\": \"border-radius\",\n \"radius-top\": [\"border-top-left-radius\", \"border-top-right-radius\"],\n \"radius-bottom\": [\"border-bottom-left-radius\", \"border-bottom-right-radius\"],\n \"radius-left\": [\"border-bottom-left-radius\", \"border-top-left-radius\"],\n \"radius-right\": [\"border-bottom-right-radius\", \"border-top-right-radius\"],\n \"radius-bl\": \"border-bottom-left-radius\",\n \"radius-br\": \"border-bottom-right-radius\",\n \"radius-tl\": \"border-top-left-radius\",\n \"radius-tr\": \"border-top-right-radius\",\n \"b\": \"border\",\n \"bc\": \"border-color\",\n \"bs\": \"border-style\",\n \"bw\": \"border-width\",\n \"bt\": \"border-top\",\n \"bl\": \"border-left\",\n \"br\": \"border-right\",\n \"bb\": \"border-bottom\",\n \"bt-color\": \"border-top-color\",\n \"bt-style\": \"border-top-style\",\n \"bt-width\": \"border-top-width\",\n \"bl-color\": \"border-left-color\",\n \"bl-style\": \"border-left-style\",\n \"bl-width\": \"border-left-width\",\n \"br-color\": \"border-right-color\",\n \"br-style\": \"border-right-style\",\n \"br-width\": \"border-right-width\",\n \"bb-color\": \"border-bottom-color\",\n \"bb-style\": \"border-bottom-style\",\n \"bb-width\": \"border-bottom-width\",\n \"m\": \"margin\",\n \"mt\": \"margin-top\",\n \"mb\": \"margin-bottom\",\n \"ml\": \"margin-left\",\n \"mr\": \"margin-right\",\n \"mx\": [\"margin-left\", \"margin-right\"],\n \"my\": [\"margin-top\", \"margin-bottom\"],\n \"p\": \"padding\",\n \"pt\": \"padding-top\",\n \"pb\": \"padding-bottom\",\n \"pl\": \"padding-left\",\n \"pr\": \"padding-right\",\n \"px\": [\"padding-left\", \"padding-right\"],\n \"py\": [\"padding-top\", \"padding-bottom\"],\n \"min-w\": \"min-width\",\n \"max-w\": \"max-width\",\n \"min-h\": \"min-height\",\n \"max-h\": \"max-height\",\n \"w\": \"width\",\n \"h\": \"height\",\n \"img\": \"background-image\",\n \"gradient\": \"background-image\",\n \"radial-gradient\": \"background-image\",\n \"conic-gradient\": \"background-image\",\n \"flex-dir\": \"flex-direction\",\n \"col-reverse\": \"flex-direction\",\n \"row-reverse\": \"flex-direction\",\n \"grid-rows\": \"grid-template-rows\",\n \"grid-flow\": \"grid-auto-flow\",\n \"row-start\": \"grid-row-start\",\n \"row-span\": \"grid-row-end\",\n \"grid-cols\": \"grid-template-columns\",\n \"col-start\": \"grid-column-start\",\n \"col-span\": \"grid-column-end\",\n \"col-gap\": \"column-gap\",\n \"auto-cols\": \"grid-auto-columns\",\n \"auto-rows\": \"grid-auto-rows\",\n \"e\": \"box-shadow\",\n \"shadow\": \"box-shadow\",\n \"overscroll\": \"overscroll-behavior\",\n \"overscroll-x\": \"overscroll-behavior-x\",\n \"overscroll-y\": \"overscroll-behavior-y\",\n \"inset\": [\"top\", \"bottom\", \"left\", \"right\"],\n \"inset-x\": [\"left\", \"right\"],\n \"inset-y\": [\"top\", \"bottom\"],\n \"z\": \"z-index\",\n \"decoration\": \"text-decoration\",\n \"v-align\": \"vertical-align\",\n \"ws\": \"white-space\",\n \"ring\": \"box-shadow\",\n \"leading\": \"line-height\",\n \"tracking\": \"letter-spacing\",\n \"break\": v => {\n if (v === \"words\") return [\"overflow-wrap\"];\n if (v === \"all\") return [\"word-break\"];\n return [\"overflow-wrap\", \"word-break\"];\n },\n \"truncate\": [\"overflow\", \"text-overflow\", \"white-space\"],\n \"flex\": v => v ? \"flex\" : \"display\",\n \"inline-flex\": \"display\",\n \"grid\": \"display\",\n \"inline-grid\": \"display\",\n \"hidden\": \"display\",\n \"block\": \"display\",\n \"inline-block\": \"display\",\n \"static\": \"position\",\n \"fixed\": \"position\",\n \"absolute\": \"position\",\n \"relative\": \"position\",\n \"sticky\": \"position\",\n \"visible\": \"visibility\",\n \"invisible\": \"visibility\",\n \"flex-row\": \"flex-direction\",\n \"flex-col\": \"flex-direction\",\n \"list\": v => {\n if (v === \"inside\" || v === \"outside\") {\n return \"list-style-position\";\n }\n return \"list-style-type\";\n },\n \"text\": v => font_size_regex.test(v) ? [\"font-size\", \"line-height\"] : \"font-size\",\n \"uppercase\": \"text-transform\",\n \"lowercase\": \"text-transform\",\n \"capitalize\": \"text-transform\",\n \"normal-case\": \"text-transform\",\n \"variant\": \"font-variant-numeric\",\n \"wave-clip\": \"clip-path\",\n};\nexport const DEFAULT_VALUES = {\n \"border\": [\"1px solid transparent\"],\n \"truncate\": [\"hidden\", \"ellipsis\", \"nowrap\"],\n \"flex\": \"flex\",\n \"inline-flex\": \"inline-flex\",\n \"grid\": \"grid\",\n \"inline-grid\": \"inline-grid\",\n \"hidden\": \"none\",\n \"block\": \"block\",\n \"inline-block\": \"inline-block\",\n \"static\": \"static\",\n \"fixed\": \"fixed\",\n \"absolute\": \"absolute\",\n \"relative\": \"relative\",\n \"sticky\": \"sticky\",\n \"visible\": \"visible\",\n \"invisible\": \"hidden\",\n \"flex-row\": \"row\",\n \"flex-col\": \"column\",\n \"flex-wrap\": \"wrap\",\n \"flex-grow\": \"1\",\n \"flex-shrink\": \"1\",\n \"col-reverse\": \"column-reverse\",\n \"row-reverse\": \"row-reverse\",\n \"uppercase\": \"uppercase\",\n \"lowercase\": \"lowercase\",\n \"capitalize\": \"capitalize\",\n \"normal-case\": \"none\",\n \"radius\": \"sm\",\n \"shadow\": \"1\",\n \"wave-clip\": \"50, 2, 50\"\n}\n\nconst unit = v => number_regex.test(v) ? `calc(${v} * @unit-size)` : v;\nconst positive_unit = v => positive_number_regex.test(v) ? `calc(${v} * @unit-size)` : v;\nconst grid_repeat = v => `repeat(${v}, minmax(0, 1fr))`;\nconst grid_rowspan = v => `span ${v}`;\nconst elevation = v => elevation_regex.test(v) ? `@elevation-${v}` : v;\nconst ring = v => `0 0 0 ${v}`;\nconst fontSize = v => font_size_regex.test(v) ? \"@font-size-\" + v : v;\nconst lineHeight = v => {\n if (positive_number_regex.test(v)) {\n return `calc(${v} * @unit-size)`;\n }\n return line_height_regex.test(v) ? \"@line-height-\" + v : v\n};\nconst letterSpacing = v => letter_spacing_regex.test(v) ? \"@letter-spacing-\" + v : v;\nconst radius = v => radius_regex.test(v) ? \"@border-radius-\" + v : v;\nconst breakCallback = v => {\n if (v === \"all\") return \"break-all\";\n if (v === \"words\") return \"break-word\";\n return [\"normal\", \"normal\"];\n};\nconst orderCallback = v => {\n if (!order_regex.test(v)) {\n return v;\n }\n if (v === \"first\") return \"-9999\";\n if (v === \"last\") return \"9999\";\n return \"0\";\n}\n\nconst waveClipIds = new Set();\nconst generateWave = (value: string, original: string, media: string, state: string, handler: StyleHandler) => {\n const args = value.split(args_delimiter).map(v => v.trim()).map(v => parseInt(v));\n let [amplitude, frequency, segments] = args;\n\n amplitude = amplitude ?? 50;\n frequency = frequency ?? 2;\n segments = segments ?? 50;\n\n const id = amplitude + '-' + frequency + '-' + segments;\n if (waveClipIds.has(id)) {\n return '@wave-clip-' + id;\n }\n\n waveClipIds.add(id);\n\n const precision = segments * frequency;\n const units = Math.PI * 2 * frequency;\n const factor = precision / 100;\n amplitude /= 2;\n\n let polygon = 'polygon(100% 0%, 0% 0%';\n for (let i = 0; i <= precision; i++) {\n const val = Math.abs((amplitude * Math.cos((i / precision) * units) - amplitude)).toFixed(2);\n polygon += ', ' + (i / factor) + '% calc(100% - ' + val + 'px)';\n }\n polygon += ')';\n (handler.style.cssRules[0] as CSSStyleRule).style.setProperty('--wave-clip-' + id, polygon);\n return '@wave-clip-' + id;\n}\n\nexport const VALUE_WRAPPER = {\n \"img\": v => `url(${v})`,\n \"gradient\": (value) => `linear-gradient(${value})`,\n \"radial-gradient\": (value) => `radial-gradient(${value})`,\n \"conic-gradient\": (value) => `conic-gradient(${value})`,\n \"grid-rows\": grid_repeat,\n \"row-span\": grid_rowspan,\n \"grid-cols\": grid_repeat,\n \"col-span\": grid_rowspan,\n \"e\": elevation,\n \"shadow\": v => shadow_regex.test(v) ? `@shadow-${v}` : v,\n \"ring\": ring,\n \"font-size\": fontSize,\n \"leading\": lineHeight,\n \"tracking\": letterSpacing,\n \"text\": v => font_size_regex.test(v) ? [\"@font-size-\" + v, \"@font-size-leading-\" + v] : v,\n \"radius\": radius,\n \"radius-top\": radius,\n \"radius-left\": radius,\n \"radius-bottom\": radius,\n \"radius-right\": radius,\n \"radius-tl\": radius,\n \"radius-bl\": radius,\n \"radius-tr\": radius,\n \"radius-br\": radius,\n \"border-radius\": radius,\n \"break\": breakCallback,\n \"flex-wrap\": (v) => v === \"reverse\" ? \"wrap-reverse\" : v,\n \"flex-row\": v => v === \"reverse\" ? \"row-reverse\" : v,\n \"flex-col\": v => v === \"reverse\" ? \"column-reverse\" : v,\n \"order\": orderCallback,\n \"padding\": positive_unit,\n \"padding-top\": positive_unit,\n \"padding-bottom\": positive_unit,\n \"padding-left\": positive_unit,\n \"padding-right\": positive_unit,\n \"p\": positive_unit,\n \"pt\": positive_unit,\n \"pb\": positive_unit,\n \"pl\": positive_unit,\n \"pr\": positive_unit,\n \"px\": positive_unit,\n \"py\": positive_unit,\n \"margin\": unit,\n \"margin-top\": unit,\n \"margin-bottom\": unit,\n \"margin-left\": unit,\n \"margin-right\": unit,\n \"m\": unit,\n \"mt\": unit,\n \"mb\": unit,\n \"ml\": unit,\n \"mr\": unit,\n \"mx\": unit,\n \"my\": unit,\n \"w\": positive_unit,\n \"h\": positive_unit,\n \"width\": positive_unit,\n \"height\": positive_unit,\n \"min-w\": positive_unit,\n \"max-w\": positive_unit,\n \"min-h\": positive_unit,\n \"max-h\": positive_unit,\n \"min-width\": positive_unit,\n \"max-width\": positive_unit,\n \"min-height\": positive_unit,\n \"max-height\": positive_unit,\n \"wave-clip\": generateWave,\n};\n"
},
{
"path": "src/mixins.ts",
"content": "/* \n * Copyright 2021 Zindex Software\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport {style} from \"./helpers\";\nimport {Root} from \"./Root\";\nimport type {UserSettings, MixinContext} from \"./helpers\";\n\ntype UserFunctionCallbackResult = {[key: string]: string}|string;\ntype UserFunctionCallback =\n (() => UserFunctionCallbackResult) |\n ((settings: UserSettings) => UserFunctionCallbackResult) |\n ((settings: UserSettings, ...args: string[]) => UserFunctionCallbackResult);\nconst mixinRepository: Map = new Map();\nconst MIXIN_ARGS_REGEX = /\\${([0-9]+)(?:=([^}]+))?}/g;\n\nconst defaultMixinHandler = (context: MixinContext, name: string, args: string[]): string => {\n if (name.startsWith('.')) {\n if (context.currentElement !== null) {\n name = name.substring(1);\n const attr = 'data-mixin-' + name;\n for (let p = context.currentElement.parentElement; p != null; p = p.parentElement) {\n if (p.hasAttribute(attr)) {\n return p.getAttribute(attr)\n .replace(MIXIN_ARGS_REGEX, (match, arg, fallback) => args[parseInt(arg)] || fallback || '');\n }\n }\n }\n return '';\n }\n return Root.getPropertyValue('--' + name + '--mixin')\n .replace(MIXIN_ARGS_REGEX, (match, arg, fallback) => args[parseInt(arg)] || fallback || '');\n};\n\nmixinRepository.set('space-x', function (_: UserSettings, space?: string, right?: string): string {\n return right === 'true' ? `sibling!mr:${space || '0'}` : `sibling!ml:${space || '0'}`;\n});\n\nmixinRepository.set('space-y', function (_: UserSettings, space?: string, bottom?: string): string {\n return bottom === 'true' ? `sibling!mb:${space || '0'}` : `sibling!mt:${space || '0'}`;\n});\n\nmixinRepository.set('grid', function (): string {\n return 'grid; l1!wb:break-all; l2!max-w:100%; child!justify-self:normal; child!align-self:normal';\n});\n\nmixinRepository.set('stack', function (): string {\n return `grid; grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr); \n grid-template-areas:\"stackarea\"; l1!grid-area:stackarea; l1!z:0; w:100%; h:100%`;\n});\n\nmixinRepository.set('sr-only', function (): string {\n return 'absolute; w:1px; h:1px; p:0; m:-1px; bw:0; overflow:hidden; clip:rect(0, 0, 0, 0); left:-9999px';\n});\n\nmixinRepository.set('container', function (settings: UserSettings): string {\n if (settings.desktopFirst) {\n return `px: 1rem; mx:auto; max-w:@breakpoint-lg; lg|max-w:@breakpoint-md; md|max-w:@breakpoint-sm; sm|max-w:@breakpoint-xs; xs|max-w:100%`;\n }\n return `px: 1rem; mx:auto; max-w:100%; sm|max-w:@breakpoint-sm; md|max-w:@breakpoint-md; lg|max-w:@breakpoint-lg; xl|max-w:@breakpoint-xl`;\n});\n\nexport function resolveMixin(context: MixinContext, name: string, args: string[]): string {\n if (mixinRepository.has(name)) {\n return style(mixinRepository.get(name)(context.userSettings, ...args));\n }\n\n return style(defaultMixinHandler(context, name, args));\n}\n\nexport function registerMixin(name: string, callback: UserFunctionCallback): void {\n mixinRepository.set(name, callback);\n}"
},
{
"path": "src/observers.ts",
"content": "/* \n * Copyright 2021 Zindex Software\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport StyleHandler from \"./StyleHandler\";\n\nlet _documentObserver:MutationObserver = null;\nlet _elementObserver:MutationObserver = null;\nlet _shadowRootObserver:MutationObserver = null;\nconst observedElements = new WeakMap();\n\nexport function observeTree(element: HTMLElement, handler: StyleHandler): void {\n for (let e = element; e != null; e = e.nextElementSibling as HTMLElement) {\n if (!observedElements.has(e)) {\n observe(e, handler);\n } else {\n observeTree(e.firstElementChild as HTMLElement, handler);\n }\n }\n}\n\nexport function observeDocument(document: Document, handler: StyleHandler): void {\n if (_documentObserver === null) {\n _documentObserver = new MutationObserver(function (mutations: MutationRecord[]): void {\n for (let i = 0, l = mutations.length; i < l; i++) {\n const nodes = mutations[i].addedNodes;\n for (let i = 0; i < nodes.length; i++) {\n if (nodes[i] instanceof HTMLElement) {\n observe(nodes[i] as HTMLElement, handler);\n }\n }\n }\n });\n }\n _documentObserver.observe(document, {childList: true, subtree: true});\n}\n\nfunction observeElement(element: Element, handler: StyleHandler): void {\n if (_elementObserver === null) {\n _elementObserver = new MutationObserver(function (mutations: MutationRecord[]): void {\n for (const mutation of mutations) {\n const target = mutation.target as HTMLElement;\n observedElements.set(target, handler.handleStyleChange(\n target,\n target.getAttribute(mutation.attributeName),\n observedElements.get(target)\n ));\n }\n });\n }\n _elementObserver.observe(element, {\n attributes: true,\n attributeOldValue: true,\n childList: false,\n attributeFilter: [handler.userSettings.xStyleAttribute],\n });\n}\n\nexport function observeShadow(shadow: ShadowRoot, handler: StyleHandler) {\n if (_shadowRootObserver === null) {\n _shadowRootObserver = new MutationObserver(function (mutations: MutationRecord[]): void {\n for (let i = 0, l = mutations.length; i < l; i++) {\n const nodes = mutations[i].addedNodes;\n for (let i = 0; i < nodes.length; i++) {\n if (nodes[i] instanceof HTMLElement) {\n observe(nodes[i] as HTMLElement, handler);\n }\n }\n }\n });\n }\n _shadowRootObserver.observe(shadow, {childList: true, subtree: true});\n}\n\nfunction observe(element: HTMLElement, handler: StyleHandler): void {\n if (observedElements.has(element)) {\n return;\n }\n const style = element.attributes.getNamedItem(handler.userSettings.xStyleAttribute);\n observedElements.set(element, style ? handler.handleStyleChange(element, style.value, []) : []);\n\n observeElement(element, handler);\n\n for (let child = element.firstElementChild; child != null; child = child.nextElementSibling) {\n observe(child as HTMLElement, handler);\n }\n}\n"
},
{
"path": "src/variables.ts",
"content": "/* \n * Copyright 2021 Zindex Software\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport type {UserSettings} from \"./helpers\";\n\nconst ELEVATION_UMBRA = [\n \"0px 0px 0px 0px\", \"0px 2px 1px -1px\", \"0px 3px 1px -2px\", \"0px 3px 3px -2px\", \"0px 2px 4px -1px\",\n \"0px 3px 5px -1px\", \"0px 3px 5px -1px\", \"0px 4px 5px -2px\", \"0px 5px 5px -3px\", \"0px 5px 6px -3px\",\n \"0px 6px 6px -3px\", \"0px 6px 7px -4px\", \"0px 7px 8px -4px\", \"0px 7px 8px -4px\", \"0px 7px 9px -4px\",\n \"0px 8px 9px -5px\", \"0px 8px 10px -5px\", \"0px 8px 11px -5px\", \"0px 9px 11px -5px\", \"0px 9px 12px -6px\",\n \"0px 10px 13px -6px\", \"0px 10px 13px -6px\", \"0px 10px 14px -6px\", \"0px 11px 14px -7px\", \"0px 11px 15px -7px\"\n];\n\nconst ELEVATION_PENUMBRA = [\n \"0px 0px 0px 0px\", \"0px 1px 1px 0px\", \"0px 2px 2px 0px\", \"0px 3px 4px 0px\", \"0px 4px 5px 0px\", \"0px 5px 8px 0px\",\n \"0px 6px 10px 0px\", \"0px 7px 10px 1px\", \"0px 8px 10px 1px\", \"0px 9px 12px 1px\", \"0px 10px 14px 1px\",\n \"0px 11px 15px 1px\", \"0px 12px 17px 2px\", \"0px 13px 19px 2px\", \"0px 14px 21px 2px\", \"0px 15px 22px 2px\",\n \"0px 16px 24px 2px\", \"0px 17px 26px 2px\", \"0px 18px 28px 2px\", \"0px 19px 29px 2px\", \"0px 20px 31px 3px\",\n \"0px 21px 33px 3px\", \"0px 22px 35px 3px\", \"0px 23px 36px 3px\", \"0px 24px 38px 3px\"\n];\n\nconst ELEVATION_AMBIENT = [\n \"0px 0px 0px 0px\", \"0px 1px 3px 0px\", \"0px 1px 5px 0px\", \"0px 1px 8px 0px\", \"0px 1px 10px 0px\", \"0px 1px 14px 0px\",\n \"0px 1px 18px 0px\", \"0px 2px 16px 1px\", \"0px 3px 14px 2px\", \"0px 3px 16px 2px\", \"0px 4px 18px 3px\",\n \"0px 4px 20px 3px\", \"0px 5px 22px 4px\", \"0px 5px 24px 4px\", \"0px 5px 26px 4px\", \"0px 6px 28px 5px\",\n \"0px 6px 30px 5px\", \"0px 6px 32px 5px\", \"0px 7px 34px 6px\", \"0px 7px 36px 6px\", \"0px 8px 38px 7px\",\n \"0px 8px 40px 7px\", \"0px 8px 42px 7px\", \"0px 9px 44px 8px\", \"0px 9px 46px 8px\"\n];\n\nconst BORDER_RADIUS = {\n none: \"0\",\n xs: \"0.125rem\",\n sm: \"0.25rem\",\n md: \"0.5rem\",\n lg: \"0.75rem\",\n xl: \"1rem\",\n pill: \"9999px\"\n};\n\nconst LETTER_SPACING = {\n tighter: \"-0.05rem\",\n tight: \"-0.025rem\",\n normal: \"0\",\n wide: \"0.025rem\",\n wider: \"0.05rem\",\n widest: \"0.1rem\"\n};\n\nconst LINE_HEIGHT = {\n none: \"1\",\n tight: \"1.25\",\n snug: \"1.375\",\n normal: \"1.5\",\n relaxed: \"1.625\",\n loose: \"2\"\n};\n\nconst FONT_SIZES = {\n xs: \"0.75rem\",\n sm: \"0.875rem\",\n base: \"1rem\",\n lg: \"1.125rem\",\n xl: \"1.25rem\",\n \"2xl\": \"1.5rem\",\n \"3xl\": \"1.875rem\",\n \"4xl\": \"2.25rem\",\n \"5xl\": \"3rem\",\n \"6xl\": \"3.75rem\",\n \"7xl\": \"4.5rem\",\n \"8xl\": \"6rem\",\n \"9xl\": \"8rem\",\n};\n\nconst FONT_SIZE_LEADING = {\n xs: \"1rem\",\n sm: \"1.25rem\",\n base: \"1.5rem\",\n lg: \"1.75rem\",\n xl: \"1.75rem\",\n \"2xl\": \"2rem\",\n \"3xl\": \"2.25rem\",\n \"4xl\": \"2.5rem\",\n \"5xl\": \"1\",\n \"6xl\": \"1\",\n \"7xl\": \"1\",\n \"8xl\": \"1\",\n \"9xl\": \"1\",\n};\n\nconst FONT_FAMILIES = {\n \"sans-serif\": \"-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol\",\n serif: \"Georgia, Cambria, Times New Roman, Times, serif\",\n monospace: \"Lucida Console, Monaco, monospace\"\n};\n\nconst SHADOW = [\n \"0px 2px 4px 0px hsla(0, 0%, 20%, 0.1), 0px 6px 6px -8px hsla(0, 0%, 0%, 15%)\",\n \"0px 2px 8px -1px hsla(0, 0%, 20%, 0.1), 0px 16px 16px -12px hsla(0, 0%, 0%, 15%)\",\n \"0px 2px 16px -2px hsla(0, 0%, 20%, 0.1), 0px 22px 18px -16px hsla(0, 0%, 0%, 15%)\",\n \"0px 2px 20px -3px hsla(0, 0%, 20%, 0.1), 0px 28px 22px -18px hsla(0, 0%, 0%, 15%)\",\n \"0px 2px 32px -2px hsla(0, 0%, 20%, 0.1), 0px 32px 26px -18px hsla(0, 0%, 0%, 15%)\",\n \"0px 2px 36px -1px hsla(0, 0%, 20%, 0.1), 0px 42px 34px -24px hsla(0, 0%, 0%, 15%)\"\n]\n\nexport function generateRootVariables(settings: UserSettings) {\n let vars: string = '--elevation-umbra: rgba(0, 0, 0, .2);--elevation-penumbra: rgba(0, 0, 0, .14);--elevation-ambient: rgba(0, 0, 0, .12);';\n for (let i = 0; i < 25; i++) {\n vars += `--elevation-${i}:${ELEVATION_UMBRA[i]} var(--elevation-umbra), ${ELEVATION_PENUMBRA[i]} var(--elevation-penumbra), ${ELEVATION_AMBIENT[i]} var(--elevation-ambient);`;\n }\n for (let i = 0; i < 6; i++) {\n vars += `--shadow-${i + 1}:${SHADOW[i]};`\n }\n for (const [key, value] of Object.entries(BORDER_RADIUS)) {\n vars += `--border-radius-${key}:${value};`;\n }\n for (const [key, value] of Object.entries(LETTER_SPACING)) {\n vars += `--letter-spacing-${key}:${value};`;\n }\n for (const [key, value] of Object.entries(LINE_HEIGHT)) {\n vars += `--line-height-${key}:${value};`;\n }\n for (const [key, value] of Object.entries(FONT_FAMILIES)) {\n vars += `--${key}:${value};`;\n }\n for (const [key, value] of Object.entries(FONT_SIZES)) {\n vars += `--font-size-${key}:${value};`;\n }\n for (const [key, value] of Object.entries(FONT_SIZE_LEADING)) {\n vars += `--font-size-leading-${key}:${value};`;\n }\n for (const bp of settings.breakpoints) {\n if (bp === 'all') {\n continue;\n }\n vars += `--breakpoint-${bp}: ${settings.media[bp]};`;\n }\n vars += '--unit-size:0.25rem;'\n\n return ':root{' + vars + '}';\n}"
},
{
"path": "tests/mocks/mock.js",
"content": "const crt = document.createElement('script');\ndocument.head.appendChild(crt);\nObject.defineProperty(document, 'currentScript', {\n value: crt\n});"
},
{
"path": "tests/properties/color.test.js",
"content": "test('fake test', () => {\n expect(true).toBe(true);\n});\n\n"
},
{
"path": "tsconfig.json",
"content": "{\n \"lib\": [\"es2020\", \"dom\"],\n \"compilerOptions\": {\n \"moduleResolution\": \"Node\",\n \"target\": \"ES2020\",\n \"declaration\": true,\n \"emitDeclarationOnly\": true,\n \"outDir\": \"./types\",\n \"sourceMap\": false,\n \"rootDir\": \"src\"\n },\n \"exclude\": [\n \"node_modules\"\n ],\n \"include\": [\n \"src/**.ts\"\n ]\n}"
},
{
"path": "types/Root.d.ts",
"content": "declare class RootClass {\n private cache;\n private scopes;\n private registeredProperties;\n constructor();\n private initialize;\n private getComputedStyles;\n private getValue;\n getRegisteredScopes(): string[];\n getRegisteredProperties(): {\n name: string;\n aliases: string[];\n }[];\n getPropertyValue(property: string): string;\n}\nexport declare const Root: RootClass;\nexport {};\n"
},
{
"path": "types/StyleHandler.d.ts",
"content": "import type { UserSettings } from \"./helpers\";\ndeclare type AssemblerEntry = {\n n: string;\n p: string;\n e: string;\n};\nexport default class StyleHandler {\n readonly style: CSSStyleSheet;\n private readonly settings;\n private tracker;\n private mediaSettings;\n private desktopFirst;\n private readonly breakpoints;\n private rules;\n private readonly padding;\n private readonly selectorAttribute;\n private _currentElement;\n constructor(settings: UserSettings, style: CSSStyleSheet, tracker: Set);\n get userSettings(): UserSettings;\n get currentElement(): HTMLElement | null;\n handleStyleChange(element: HTMLElement, content: string | null, old: AssemblerEntry[]): AssemblerEntry[];\n handleStyleRemoved(element: HTMLElement, old: AssemblerEntry[]): AssemblerEntry[];\n private extract;\n private getStyleEntries;\n private getResolvedProperties;\n private generateCSS;\n private getRuleIndex;\n}\nexport {};\n"
},
{
"path": "types/autoload.d.ts",
"content": "export * from \"./index\";\n"
},
{
"path": "types/generators.d.ts",
"content": "import type { UserSettings } from \"./helpers\";\ndeclare type GeneratedStyles = {\n content: string;\n tracker: Set;\n};\nexport declare function generateStyles(settings: UserSettings): GeneratedStyles;\nexport {};\n"
},
{
"path": "types/helpers.d.ts",
"content": "export declare type UserSettings = {\n enabled: boolean;\n generate: boolean;\n constructable: boolean;\n cache: string | null;\n cacheKey: string;\n desktopFirst: boolean;\n breakpoints: string[];\n media: {\n xs: string;\n sm: string;\n md: string;\n lg: string;\n xl: string;\n };\n states: string[];\n scopes: string[];\n xStyleAttribute: string;\n selectorAttribute: string;\n registeredProperties: {\n name: string;\n aliases: string[];\n }[];\n};\nexport interface MixinContext {\n readonly userSettings: UserSettings;\n readonly currentElement: HTMLElement | null;\n}\ndeclare type StyleType = string | {\n [key: string]: string;\n};\nexport declare const HASH_VAR_PREFIX = \"--asm-\";\nexport declare const HASH_CLASS_PREFIX = \"asm\";\nexport declare const PROPERTY_REGEX: RegExp;\nexport declare function getUserSettings(dataset: {\n [key: string]: string;\n}): UserSettings;\nexport declare function style(item: StyleType | StyleType[]): string;\nexport declare function trim(value: string): string;\nexport declare function nonEmptyString(value: string): boolean;\nexport declare function uniqueItems(value: any, index: number, self: any[]): boolean;\nexport {};\n"
},
{
"path": "types/index.d.ts",
"content": "export { registerMixin } from \"./mixins\";\nexport { style } from \"./helpers\";\ndeclare global {\n interface Document {\n adoptedStyleSheets: CSSStyleSheet[];\n }\n interface Window {\n ShadyCSS?: any;\n }\n interface CSSStyleSheet {\n replace(css: string): any;\n replaceSync(css: string): any;\n }\n interface ShadowRoot {\n adoptedStyleSheets?: CSSStyleSheet[];\n }\n}\nexport declare function init(options?: {\n [key: string]: string;\n}): boolean;\nexport declare function handleShadowRoot(shadowRoot: ShadowRoot, add?: boolean): boolean;\nexport declare function cssStyleSheet(): CSSStyleSheet;\n"
},
{
"path": "types/list.d.ts",
"content": "import type StyleHandler from \"./StyleHandler\";\nexport declare const PROPERTY_LIST: string[];\nexport declare const PROPERTY_VARIANTS: {\n animation: string[];\n appearance: string[];\n \"background-clip\": string[];\n \"backdrop-filter\": string[];\n \"box-orient\": string[];\n \"clip-path\": string[];\n \"column-gap\": string[];\n \"line-clamp\": string[];\n \"user-select\": string[];\n \"text-fill-color\": string[];\n};\nexport declare const STATE_LIST: string[];\nexport declare const ALIASES: {\n backdrop: string;\n bg: string;\n \"bg-attachment\": string;\n \"bg-blend\": string;\n \"bg-clip\": string;\n \"bg-color\": string;\n \"bg-image\": string;\n \"bg-position\": string;\n \"bg-repeat\": string;\n \"bg-size\": string;\n radius: string;\n \"radius-top\": string[];\n \"radius-bottom\": string[];\n \"radius-left\": string[];\n \"radius-right\": string[];\n \"radius-bl\": string;\n \"radius-br\": string;\n \"radius-tl\": string;\n \"radius-tr\": string;\n b: string;\n bc: string;\n bs: string;\n bw: string;\n bt: string;\n bl: string;\n br: string;\n bb: string;\n \"bt-color\": string;\n \"bt-style\": string;\n \"bt-width\": string;\n \"bl-color\": string;\n \"bl-style\": string;\n \"bl-width\": string;\n \"br-color\": string;\n \"br-style\": string;\n \"br-width\": string;\n \"bb-color\": string;\n \"bb-style\": string;\n \"bb-width\": string;\n m: string;\n mt: string;\n mb: string;\n ml: string;\n mr: string;\n mx: string[];\n my: string[];\n p: string;\n pt: string;\n pb: string;\n pl: string;\n pr: string;\n px: string[];\n py: string[];\n \"min-w\": string;\n \"max-w\": string;\n \"min-h\": string;\n \"max-h\": string;\n w: string;\n h: string;\n img: string;\n gradient: string;\n \"radial-gradient\": string;\n \"conic-gradient\": string;\n \"flex-dir\": string;\n \"col-reverse\": string;\n \"row-reverse\": string;\n \"grid-rows\": string;\n \"grid-flow\": string;\n \"row-start\": string;\n \"row-span\": string;\n \"grid-cols\": string;\n \"col-start\": string;\n \"col-span\": string;\n \"col-gap\": string;\n \"auto-cols\": string;\n \"auto-rows\": string;\n e: string;\n shadow: string;\n overscroll: string;\n \"overscroll-x\": string;\n \"overscroll-y\": string;\n inset: string[];\n \"inset-x\": string[];\n \"inset-y\": string[];\n z: string;\n decoration: string;\n \"v-align\": string;\n ws: string;\n ring: string;\n leading: string;\n tracking: string;\n break: (v: any) => string[];\n truncate: string[];\n flex: (v: any) => \"display\" | \"flex\";\n \"inline-flex\": string;\n grid: string;\n \"inline-grid\": string;\n hidden: string;\n block: string;\n \"inline-block\": string;\n static: string;\n fixed: string;\n absolute: string;\n relative: string;\n sticky: string;\n visible: string;\n invisible: string;\n \"flex-row\": string;\n \"flex-col\": string;\n list: (v: any) => \"list-style-position\" | \"list-style-type\";\n text: (v: any) => string[] | \"font-size\";\n uppercase: string;\n lowercase: string;\n capitalize: string;\n \"normal-case\": string;\n variant: string;\n \"wave-clip\": string;\n};\nexport declare const DEFAULT_VALUES: {\n border: string[];\n truncate: string[];\n flex: string;\n \"inline-flex\": string;\n grid: string;\n \"inline-grid\": string;\n hidden: string;\n block: string;\n \"inline-block\": string;\n static: string;\n fixed: string;\n absolute: string;\n relative: string;\n sticky: string;\n visible: string;\n invisible: string;\n \"flex-row\": string;\n \"flex-col\": string;\n \"flex-wrap\": string;\n \"flex-grow\": string;\n \"flex-shrink\": string;\n \"col-reverse\": string;\n \"row-reverse\": string;\n uppercase: string;\n lowercase: string;\n capitalize: string;\n \"normal-case\": string;\n radius: string;\n shadow: string;\n \"wave-clip\": string;\n};\nexport declare const VALUE_WRAPPER: {\n img: (v: any) => string;\n gradient: (value: any) => string;\n \"radial-gradient\": (value: any) => string;\n \"conic-gradient\": (value: any) => string;\n \"grid-rows\": (v: any) => string;\n \"row-span\": (v: any) => string;\n \"grid-cols\": (v: any) => string;\n \"col-span\": (v: any) => string;\n e: (v: any) => any;\n shadow: (v: any) => any;\n ring: (v: any) => string;\n \"font-size\": (v: any) => any;\n leading: (v: any) => any;\n tracking: (v: any) => any;\n text: (v: any) => any;\n radius: (v: any) => any;\n \"radius-top\": (v: any) => any;\n \"radius-left\": (v: any) => any;\n \"radius-bottom\": (v: any) => any;\n \"radius-right\": (v: any) => any;\n \"radius-tl\": (v: any) => any;\n \"radius-bl\": (v: any) => any;\n \"radius-tr\": (v: any) => any;\n \"radius-br\": (v: any) => any;\n \"border-radius\": (v: any) => any;\n break: (v: any) => string[] | \"break-all\" | \"break-word\";\n \"flex-wrap\": (v: any) => any;\n \"flex-row\": (v: any) => any;\n \"flex-col\": (v: any) => any;\n order: (v: any) => any;\n padding: (v: any) => any;\n \"padding-top\": (v: any) => any;\n \"padding-bottom\": (v: any) => any;\n \"padding-left\": (v: any) => any;\n \"padding-right\": (v: any) => any;\n p: (v: any) => any;\n pt: (v: any) => any;\n pb: (v: any) => any;\n pl: (v: any) => any;\n pr: (v: any) => any;\n px: (v: any) => any;\n py: (v: any) => any;\n margin: (v: any) => any;\n \"margin-top\": (v: any) => any;\n \"margin-bottom\": (v: any) => any;\n \"margin-left\": (v: any) => any;\n \"margin-right\": (v: any) => any;\n m: (v: any) => any;\n mt: (v: any) => any;\n mb: (v: any) => any;\n ml: (v: any) => any;\n mr: (v: any) => any;\n mx: (v: any) => any;\n my: (v: any) => any;\n w: (v: any) => any;\n h: (v: any) => any;\n width: (v: any) => any;\n height: (v: any) => any;\n \"min-w\": (v: any) => any;\n \"max-w\": (v: any) => any;\n \"min-h\": (v: any) => any;\n \"max-h\": (v: any) => any;\n \"min-width\": (v: any) => any;\n \"max-width\": (v: any) => any;\n \"min-height\": (v: any) => any;\n \"max-height\": (v: any) => any;\n \"wave-clip\": (value: string, original: string, media: string, state: string, handler: StyleHandler) => string;\n};\n"
},
{
"path": "types/mixins.d.ts",
"content": "import type { UserSettings, MixinContext } from \"./helpers\";\ndeclare type UserFunctionCallbackResult = {\n [key: string]: string;\n} | string;\ndeclare type UserFunctionCallback = (() => UserFunctionCallbackResult) | ((settings: UserSettings) => UserFunctionCallbackResult) | ((settings: UserSettings, ...args: string[]) => UserFunctionCallbackResult);\nexport declare function resolveMixin(context: MixinContext, name: string, args: string[]): string;\nexport declare function registerMixin(name: string, callback: UserFunctionCallback): void;\nexport {};\n"
},
{
"path": "types/observers.d.ts",
"content": "import StyleHandler from \"./StyleHandler\";\nexport declare function observeTree(element: HTMLElement, handler: StyleHandler): void;\nexport declare function observeDocument(document: Document, handler: StyleHandler): void;\nexport declare function observeShadow(shadow: ShadowRoot, handler: StyleHandler): void;\n"
},
{
"path": "types/variables.d.ts",
"content": "import type { UserSettings } from \"./helpers\";\nexport declare function generateRootVariables(settings: UserSettings): string;\n"
}
]
![\"Call](\"https://d33wubrfki0l68.cloudfront.net/ad1ed8ef193a228e69394c846992f7a612cc0210/abc1a/assets/img/hero.png\")
![](\"https://images.unsplash.com/photo-1512621776951-a57141f2eefd?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=640&q=80\")
\n