Showing preview only (270K chars total). Download the full file or copy to clipboard to get everything.
Repository: asmcss/assembler
Branch: master
Commit: 3d3a4af51618
Files: 33
Total size: 258.1 KB
Directory structure:
gitextract_tyodf_to/
├── .gitattributes
├── .github/
│ └── workflows/
│ └── tests.yml
├── .gitignore
├── LICENSE
├── README.md
├── dist/
│ ├── assembler.cjs.js
│ ├── assembler.es.js
│ └── assembler.js
├── package.json
├── rollup.config.js
├── src/
│ ├── Root.ts
│ ├── StyleHandler.ts
│ ├── autoload.ts
│ ├── generators.ts
│ ├── helpers.ts
│ ├── index.ts
│ ├── list.ts
│ ├── mixins.ts
│ ├── observers.ts
│ └── variables.ts
├── tests/
│ ├── mocks/
│ │ └── mock.js
│ └── properties/
│ └── color.test.js
├── tsconfig.json
└── types/
├── Root.d.ts
├── StyleHandler.d.ts
├── autoload.d.ts
├── generators.d.ts
├── helpers.d.ts
├── index.d.ts
├── list.d.ts
├── mixins.d.ts
├── observers.d.ts
└── variables.d.ts
================================================
FILE CONTENTS
================================================
================================================
FILE: .gitattributes
================================================
dist/* linguist-generated
================================================
FILE: .github/workflows/tests.yml
================================================
name: Tests
on: push
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- name: Install modules
run: yarn
- name: Run tests
run: yarn test
================================================
FILE: .gitignore
================================================
.idea
*.html
!tests/*.html
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
lerna-debug.log*
# Diagnostic reports (https://nodejs.org/api/report.html)
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
# Runtime data
pids
*.pid
*.seed
*.pid.lock
# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov
# Coverage directory used by tools like istanbul
coverage
*.lcov
# nyc test coverage
.nyc_output
# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
.grunt
# Bower dependency directory (https://bower.io/)
bower_components
# node-waf configuration
.lock-wscript
# Compiled binary addons (https://nodejs.org/api/addons.html)
build/Release
# Dependency directories
node_modules/
jspm_packages/
# TypeScript v1 declaration files
typings/
# TypeScript cache
*.tsbuildinfo
# Optional npm cache directory
.npm
# Optional eslint cache
.eslintcache
# Microbundle cache
.rpt2_cache/
.rts2_cache_cjs/
.rts2_cache_es/
.rts2_cache_umd/
# Optional REPL history
.node_repl_history
# Output of 'npm pack'
*.tgz
# Yarn Integrity file
.yarn-integrity
# dotenv environment variables file
.env
.env.test
# parcel-bundler cache (https://parceljs.org/)
.cache
# Next.js build output
.next
# Nuxt.js build / generate output
.nuxt
#dist
# Gatsby files
.cache/
# Comment in the public line in if your project uses Gatsby and *not* Next.js
# https://nextjs.org/blog/next-9-1#public-directory-support
# public
# vuepress build output
.vuepress/dist
# Serverless directories
.serverless/
# FuseBox cache
.fusebox/
# DynamoDB Local files
.dynamodb/
# TernJS port file
.tern-port
================================================
FILE: LICENSE
================================================
Apache License
Version 2.0, January 2004
http://www.apache.org/licenses/
TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
1. Definitions.
"License" shall mean the terms and conditions for use, reproduction,
and distribution as defined by Sections 1 through 9 of this document.
"Licensor" shall mean the copyright owner or entity authorized by
the copyright owner that is granting the License.
"Legal Entity" shall mean the union of the acting entity and all
other entities that control, are controlled by, or are under common
control with that entity. For the purposes of this definition,
"control" means (i) the power, direct or indirect, to cause the
direction or management of such entity, whether by contract or
otherwise, or (ii) ownership of fifty percent (50%) or more of the
outstanding shares, or (iii) beneficial ownership of such entity.
"You" (or "Your") shall mean an individual or Legal Entity
exercising permissions granted by this License.
"Source" form shall mean the preferred form for making modifications,
including but not limited to software source code, documentation
source, and configuration files.
"Object" form shall mean any form resulting from mechanical
transformation or translation of a Source form, including but
not limited to compiled object code, generated documentation,
and conversions to other media types.
"Work" shall mean the work of authorship, whether in Source or
Object form, made available under the License, as indicated by a
copyright notice that is included in or attached to the work
(an example is provided in the Appendix below).
"Derivative Works" shall mean any work, whether in Source or Object
form, that is based on (or derived from) the Work and for which the
editorial revisions, annotations, elaborations, or other modifications
represent, as a whole, an original work of authorship. For the purposes
of this License, Derivative Works shall not include works that remain
separable from, or merely link (or bind by name) to the interfaces of,
the Work and Derivative Works thereof.
"Contribution" shall mean any work of authorship, including
the original version of the Work and any modifications or additions
to that Work or Derivative Works thereof, that is intentionally
submitted to Licensor for inclusion in the Work by the copyright owner
or by an individual or Legal Entity authorized to submit on behalf of
the copyright owner. For the purposes of this definition, "submitted"
means any form of electronic, verbal, or written communication sent
to the Licensor or its representatives, including but not limited to
communication on electronic mailing lists, source code control systems,
and issue tracking systems that are managed by, or on behalf of, the
Licensor for the purpose of discussing and improving the Work, but
excluding communication that is conspicuously marked or otherwise
designated in writing by the copyright owner as "Not a Contribution."
"Contributor" shall mean Licensor and any individual or Legal Entity
on behalf of whom a Contribution has been received by Licensor and
subsequently incorporated within the Work.
2. Grant of Copyright License. Subject to the terms and conditions of
this License, each Contributor hereby grants to You a perpetual,
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
copyright license to reproduce, prepare Derivative Works of,
publicly display, publicly perform, sublicense, and distribute the
Work and such Derivative Works in Source or Object form.
3. Grant of Patent License. Subject to the terms and conditions of
this License, each Contributor hereby grants to You a perpetual,
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
(except as stated in this section) patent license to make, have made,
use, offer to sell, sell, import, and otherwise transfer the Work,
where such license applies only to those patent claims licensable
by such Contributor that are necessarily infringed by their
Contribution(s) alone or by combination of their Contribution(s)
with the Work to which such Contribution(s) was submitted. If You
institute patent litigation against any entity (including a
cross-claim or counterclaim in a lawsuit) alleging that the Work
or a Contribution incorporated within the Work constitutes direct
or contributory patent infringement, then any patent licenses
granted to You under this License for that Work shall terminate
as of the date such litigation is filed.
4. Redistribution. You may reproduce and distribute copies of the
Work or Derivative Works thereof in any medium, with or without
modifications, and in Source or Object form, provided that You
meet the following conditions:
(a) You must give any other recipients of the Work or
Derivative Works a copy of this License; and
(b) You must cause any modified files to carry prominent notices
stating that You changed the files; and
(c) You must retain, in the Source form of any Derivative Works
that You distribute, all copyright, patent, trademark, and
attribution notices from the Source form of the Work,
excluding those notices that do not pertain to any part of
the Derivative Works; and
(d) If the Work includes a "NOTICE" text file as part of its
distribution, then any Derivative Works that You distribute must
include a readable copy of the attribution notices contained
within such NOTICE file, excluding those notices that do not
pertain to any part of the Derivative Works, in at least one
of the following places: within a NOTICE text file distributed
as part of the Derivative Works; within the Source form or
documentation, if provided along with the Derivative Works; or,
within a display generated by the Derivative Works, if and
wherever such third-party notices normally appear. The contents
of the NOTICE file are for informational purposes only and
do not modify the License. You may add Your own attribution
notices within Derivative Works that You distribute, alongside
or as an addendum to the NOTICE text from the Work, provided
that such additional attribution notices cannot be construed
as modifying the License.
You may add Your own copyright statement to Your modifications and
may provide additional or different license terms and conditions
for use, reproduction, or distribution of Your modifications, or
for any such Derivative Works as a whole, provided Your use,
reproduction, and distribution of the Work otherwise complies with
the conditions stated in this License.
5. Submission of Contributions. Unless You explicitly state otherwise,
any Contribution intentionally submitted for inclusion in the Work
by You to the Licensor shall be under the terms and conditions of
this License, without any additional terms or conditions.
Notwithstanding the above, nothing herein shall supersede or modify
the terms of any separate license agreement you may have executed
with Licensor regarding such Contributions.
6. Trademarks. This License does not grant permission to use the trade
names, trademarks, service marks, or product names of the Licensor,
except as required for reasonable and customary use in describing the
origin of the Work and reproducing the content of the NOTICE file.
7. Disclaimer of Warranty. Unless required by applicable law or
agreed to in writing, Licensor provides the Work (and each
Contributor provides its Contributions) on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
implied, including, without limitation, any warranties or conditions
of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
PARTICULAR PURPOSE. You are solely responsible for determining the
appropriateness of using or redistributing the Work and assume any
risks associated with Your exercise of permissions under this License.
8. Limitation of Liability. In no event and under no legal theory,
whether in tort (including negligence), contract, or otherwise,
unless required by applicable law (such as deliberate and grossly
negligent acts) or agreed to in writing, shall any Contributor be
liable to You for damages, including any direct, indirect, special,
incidental, or consequential damages of any character arising as a
result of this License or out of the use or inability to use the
Work (including but not limited to damages for loss of goodwill,
work stoppage, computer failure or malfunction, or any and all
other commercial damages or losses), even if such Contributor
has been advised of the possibility of such damages.
9. Accepting Warranty or Additional Liability. While redistributing
the Work or Derivative Works thereof, You may choose to offer,
and charge a fee for, acceptance of support, warranty, indemnity,
or other liability obligations and/or rights consistent with this
License. However, in accepting such obligations, You may act only
on Your own behalf and on Your sole responsibility, not on behalf
of any other Contributor, and only if You agree to indemnify,
defend, and hold each Contributor harmless for any liability
incurred by, or claims asserted against, such Contributor by reason
of your accepting any such warranty or additional liability.
END OF TERMS AND CONDITIONS
APPENDIX: How to apply the Apache License to your work.
To apply the Apache License to your work, attach the following
boilerplate notice, with the fields enclosed by brackets "[]"
replaced with your own identifying information. (Don't include
the brackets!) The text should be enclosed in the appropriate
comment syntax for the file format. We also recommend that a
file or class name and description of purpose be included on the
same "printed page" as the copyright notice for easier
identification within third-party archives.
Copyright [yyyy] [name of copyright owner]
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
================================================
FILE: README.md
================================================
<hr>
<div align=center><h1>Assembler CSS</h1></div>
<div align=center><a href="https://asmcss.com/"><img width=600 src="https://d33wubrfki0l68.cloudfront.net/ad1ed8ef193a228e69394c846992f7a612cc0210/abc1a/assets/img/hero.png" alt="Call to action image"/></a></div>
<div align=center><i><a href="https://asmcss.com/docs/1.x/">Docs</a> — <a href="https://twitter.com/asmcss">Twitter</a> — <a href="https://asmcss.com/docs/1.x/#usage">Installation</a></i></div>
<div align=center><i><h4>Just-in-time CSS, unlimited possibilities</h4></i></div>
<hr>
Assembler CSS is a highly performant utility-first framework that allows you to quickly prototype and build modern
websites and UI components without the need to install and maintain complex software.
## Usage
Incorporating Assembler CSS within your project is a trivial task.
Just add a `script` tag before the `head` closing tag, and you are good to go!
```html
<script src="https://unpkg.com/@asmcss/assembler"></script>
```
Now you are ready to try out Assembler CSS and write your first UI component.
```html
<div x-style="max-w:80; mx:auto; radius:md; e:2; e.hover:4; transition:all 0.25s; cursor:pointer">
<img x-style="block; max-w:100%; w:100%; h:auto; radius-top:md" src="https://images.unsplash.com/photo-1512621776951-a57141f2eefd?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=640&q=80">
<div x-style="p:4">
<div x-style="text:lg; color:black; font-weight:700">Fresh veggies</div>
<div x-style="text:sm; color:silver; font-weight:400">600g</div>
<p x-style="pt:4">
Any veggie can belong on your menu, so choose what you love and use the rest
for future meals and snacks you can enjoy in flavorful ways.
</p>
</div>
</div>
```
## Documentation
The full documentation for Assembler CSS can be found [here][documentation].
## Installation
You could also install Assembler CSS as an npm package by issuing the following command:
```shell
npm install @asmcss/assembler
```
Or, if you are a Yarn user
```shell
yarn add @asmcss/assembler
```
## License
Assembler CSS is licensed under the permissive [Apache License, Version 2.0][apache_license].
## Browser support
Assembler CSS is designed to run on the latest stable versions of all the major browsers:
Chrome, Edge, Firefox, and Safari. We do not support any version of IE.
We have conducted intensive manual testing on the following operating systems and browsers:
- Ubuntu Linux 20.04: Chrome and Firefox
- Windows 10: Edge, Chrome, and Firefox
- MacOS Big Sur: Safari, Chrome, Edge, and Firefox
- Android (tablet and mobile): Chrome
- iOS 14 (tablet and mobile): Safari and Chrome
## Road to v1.0.0
- [x] Basic functionalities
- [x] Add support for states
- [x] Add support for scopes
- [x] Add support for mixins
- [x] Add support for custom selector attribute
- [x] Add support for custom elements
- [ ] Add automated tests, so we can make sure we don’t mess up things in future releases
- [ ] Cleanup & prepare stable releases
[apache_license]: https://www.apache.org/licenses/LICENSE-2.0 "Apache License"
[documentation]: https://asmcss.com/docs/1.x/ "Assembler CSS documentation"
================================================
FILE: dist/assembler.cjs.js
================================================
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
/*
* Copyright 2021 Zindex Software
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
const positive_number_regex = /^[0-9]+(\.5)?$/;
const number_regex = /^-?[0-9]+(\.5)?$/;
const font_size_regex = /^(xs|sm|base|lg|([2-9])?xl)$/;
const line_height_regex = /^(none|tight|snug|normal|relaxed|loose)$/;
const elevation_regex = /^[0-9]|1[0-9]|2[0-4]$/;
const shadow_regex = /^[1-6]$/;
const letter_spacing_regex = /^(tighter|tight|normal|wide|wider|widest)$/;
const radius_regex = /^(xs|sm|md|lg|xl|pill)$/;
const order_regex = /^(first|last|none)$/;
// do not match comma inside parenthesis
// 2px, linear-gradient(blue, red), inline => [2px, linear-gradient(blue, red), inline]
const args_delimiter = /\s*,\s*(?![^(]*\))/gm;
const PROPERTY_LIST = [
"align-content",
"align-items",
"align-self",
"animation",
"appearance",
"backdrop-filter",
"background",
"background-attachment",
"background-blend-mode",
"background-clip",
"background-color",
"background-image",
"background-position",
"background-repeat",
"background-size",
"backface-visibility",
"border",
"border-bottom",
"border-bottom-color",
"border-bottom-style",
"border-bottom-width",
"border-bottom-left-radius",
"border-bottom-right-radius",
"border-collapse",
"border-color",
"border-left",
"border-left-color",
"border-left-style",
"border-left-width",
"border-radius",
"border-right",
"border-right-color",
"border-right-style",
"border-right-width",
"border-style",
"border-top",
"border-top-color",
"border-top-style",
"border-top-width",
"border-top-left-radius",
"border-top-right-radius",
"border-width",
"bottom",
"box-orient",
"box-shadow",
"box-sizing",
"clear",
"clip",
"clip-path",
"color",
"column-gap",
"content",
"cursor",
"display",
"filter",
"flex",
"flex-basis",
"flex-direction",
"flex-flow",
"flex-grow",
"flex-shrink",
"flex-wrap",
"float",
"font-family",
"font-size",
"font-style",
"font-weight",
"font-variant-numeric",
"gap",
"grid",
"grid-area",
"grid-auto-columns",
"grid-auto-flow",
"grid-auto-rows",
"grid-column",
"grid-column-end",
"grid-column-start",
"grid-row",
"grid-row-end",
"grid-row-start",
"grid-template",
"grid-template-areas",
"grid-template-columns",
"grid-template-rows",
"height",
"isolation",
"justify-content",
"justify-items",
"justify-self",
"left",
"letter-spacing",
"line-break",
"line-clamp",
"line-height",
"list-style-position",
"list-style-type",
"margin",
"margin-bottom",
"margin-left",
"margin-right",
"margin-top",
"max-height",
"max-width",
"min-height",
"min-width",
"object-fit",
"object-position",
"opacity",
"order",
"outline",
"outline-offset",
"overflow",
"overflow-wrap",
"overflow-x",
"overflow-y",
"overscroll-behavior",
"overscroll-behavior-x",
"overscroll-behavior-y",
"padding",
"padding-bottom",
"padding-left",
"padding-right",
"padding-top",
"perspective",
"perspective-origin",
"place-content",
"place-items",
"place-self",
"pointer-events",
"position",
"resize",
"right",
"row-gap",
"table-layout",
"text-align",
"text-decoration",
"text-decoration-style",
"text-fill-color",
"text-overflow",
"text-shadow",
"text-transform",
"top",
"transform",
"transform-box",
"transform-origin",
"transform-style",
"transition",
"user-select",
"vertical-align",
"visibility",
"white-space",
"width",
"word-break",
"z-index",
];
const PROPERTY_VARIANTS = {
"animation": ["-webkit-animation"],
"appearance": ["-webkit-appearance", "-moz-appearance"],
"background-clip": ["-webkit-background-clip", "-moz-background-clip"],
"backdrop-filter": ["-webkit-backdrop-filter"],
"box-orient": ["-webkit-box-orient"],
"clip-path": ["-webkit-clip-path"],
"column-gap": ["-moz-column-gap"],
"line-clamp": ["-webkit-line-clamp"],
"user-select": ["-webkit-user-select", "-moz-user-select"],
"text-fill-color": ["-webkit-text-fill-color", "-moz-text-fill-color"]
};
const STATE_LIST = [
"normal",
"link",
"visited",
"empty",
"placeholder-shown",
"default",
"checked",
"indeterminate",
"valid",
"invalid",
"required",
"optional",
"out-of-range",
"in-range",
"hover",
"focus",
"focus-within",
"focus-visible",
"active",
"read-only",
"read-write",
"disabled",
"enabled",
];
const ALIASES = {
"backdrop": "backdrop-filter",
"bg": "background",
"bg-attachment": "background-attachment",
"bg-blend": "background-blend-mode",
"bg-clip": "background-clip",
"bg-color": "background-color",
"bg-image": "background-image",
"bg-position": "background-position",
"bg-repeat": "background-repeat",
"bg-size": "background-size",
"radius": "border-radius",
"radius-top": ["border-top-left-radius", "border-top-right-radius"],
"radius-bottom": ["border-bottom-left-radius", "border-bottom-right-radius"],
"radius-left": ["border-bottom-left-radius", "border-top-left-radius"],
"radius-right": ["border-bottom-right-radius", "border-top-right-radius"],
"radius-bl": "border-bottom-left-radius",
"radius-br": "border-bottom-right-radius",
"radius-tl": "border-top-left-radius",
"radius-tr": "border-top-right-radius",
"b": "border",
"bc": "border-color",
"bs": "border-style",
"bw": "border-width",
"bt": "border-top",
"bl": "border-left",
"br": "border-right",
"bb": "border-bottom",
"bt-color": "border-top-color",
"bt-style": "border-top-style",
"bt-width": "border-top-width",
"bl-color": "border-left-color",
"bl-style": "border-left-style",
"bl-width": "border-left-width",
"br-color": "border-right-color",
"br-style": "border-right-style",
"br-width": "border-right-width",
"bb-color": "border-bottom-color",
"bb-style": "border-bottom-style",
"bb-width": "border-bottom-width",
"m": "margin",
"mt": "margin-top",
"mb": "margin-bottom",
"ml": "margin-left",
"mr": "margin-right",
"mx": ["margin-left", "margin-right"],
"my": ["margin-top", "margin-bottom"],
"p": "padding",
"pt": "padding-top",
"pb": "padding-bottom",
"pl": "padding-left",
"pr": "padding-right",
"px": ["padding-left", "padding-right"],
"py": ["padding-top", "padding-bottom"],
"min-w": "min-width",
"max-w": "max-width",
"min-h": "min-height",
"max-h": "max-height",
"w": "width",
"h": "height",
"img": "background-image",
"gradient": "background-image",
"radial-gradient": "background-image",
"conic-gradient": "background-image",
"flex-dir": "flex-direction",
"col-reverse": "flex-direction",
"row-reverse": "flex-direction",
"grid-rows": "grid-template-rows",
"grid-flow": "grid-auto-flow",
"row-start": "grid-row-start",
"row-span": "grid-row-end",
"grid-cols": "grid-template-columns",
"col-start": "grid-column-start",
"col-span": "grid-column-end",
"col-gap": "column-gap",
"auto-cols": "grid-auto-columns",
"auto-rows": "grid-auto-rows",
"e": "box-shadow",
"shadow": "box-shadow",
"overscroll": "overscroll-behavior",
"overscroll-x": "overscroll-behavior-x",
"overscroll-y": "overscroll-behavior-y",
"inset": ["top", "bottom", "left", "right"],
"inset-x": ["left", "right"],
"inset-y": ["top", "bottom"],
"z": "z-index",
"decoration": "text-decoration",
"v-align": "vertical-align",
"ws": "white-space",
"ring": "box-shadow",
"leading": "line-height",
"tracking": "letter-spacing",
"break": v => {
if (v === "words")
return ["overflow-wrap"];
if (v === "all")
return ["word-break"];
return ["overflow-wrap", "word-break"];
},
"truncate": ["overflow", "text-overflow", "white-space"],
"flex": v => v ? "flex" : "display",
"inline-flex": "display",
"grid": "display",
"inline-grid": "display",
"hidden": "display",
"block": "display",
"inline-block": "display",
"static": "position",
"fixed": "position",
"absolute": "position",
"relative": "position",
"sticky": "position",
"visible": "visibility",
"invisible": "visibility",
"flex-row": "flex-direction",
"flex-col": "flex-direction",
"list": v => {
if (v === "inside" || v === "outside") {
return "list-style-position";
}
return "list-style-type";
},
"text": v => font_size_regex.test(v) ? ["font-size", "line-height"] : "font-size",
"uppercase": "text-transform",
"lowercase": "text-transform",
"capitalize": "text-transform",
"normal-case": "text-transform",
"variant": "font-variant-numeric",
"wave-clip": "clip-path",
};
const DEFAULT_VALUES = {
"border": ["1px solid transparent"],
"truncate": ["hidden", "ellipsis", "nowrap"],
"flex": "flex",
"inline-flex": "inline-flex",
"grid": "grid",
"inline-grid": "inline-grid",
"hidden": "none",
"block": "block",
"inline-block": "inline-block",
"static": "static",
"fixed": "fixed",
"absolute": "absolute",
"relative": "relative",
"sticky": "sticky",
"visible": "visible",
"invisible": "hidden",
"flex-row": "row",
"flex-col": "column",
"flex-wrap": "wrap",
"flex-grow": "1",
"flex-shrink": "1",
"col-reverse": "column-reverse",
"row-reverse": "row-reverse",
"uppercase": "uppercase",
"lowercase": "lowercase",
"capitalize": "capitalize",
"normal-case": "none",
"radius": "sm",
"shadow": "1",
"wave-clip": "50, 2, 50"
};
const unit = v => number_regex.test(v) ? `calc(${v} * @unit-size)` : v;
const positive_unit = v => positive_number_regex.test(v) ? `calc(${v} * @unit-size)` : v;
const grid_repeat = v => `repeat(${v}, minmax(0, 1fr))`;
const grid_rowspan = v => `span ${v}`;
const elevation = v => elevation_regex.test(v) ? `@elevation-${v}` : v;
const ring = v => `0 0 0 ${v}`;
const fontSize = v => font_size_regex.test(v) ? "@font-size-" + v : v;
const lineHeight = v => {
if (positive_number_regex.test(v)) {
return `calc(${v} * @unit-size)`;
}
return line_height_regex.test(v) ? "@line-height-" + v : v;
};
const letterSpacing = v => letter_spacing_regex.test(v) ? "@letter-spacing-" + v : v;
const radius = v => radius_regex.test(v) ? "@border-radius-" + v : v;
const breakCallback = v => {
if (v === "all")
return "break-all";
if (v === "words")
return "break-word";
return ["normal", "normal"];
};
const orderCallback = v => {
if (!order_regex.test(v)) {
return v;
}
if (v === "first")
return "-9999";
if (v === "last")
return "9999";
return "0";
};
const waveClipIds = new Set();
const generateWave = (value, original, media, state, handler) => {
const args = value.split(args_delimiter).map(v => v.trim()).map(v => parseInt(v));
let [amplitude, frequency, segments] = args;
amplitude = amplitude !== null && amplitude !== void 0 ? amplitude : 50;
frequency = frequency !== null && frequency !== void 0 ? frequency : 2;
segments = segments !== null && segments !== void 0 ? segments : 50;
const id = amplitude + '-' + frequency + '-' + segments;
if (waveClipIds.has(id)) {
return '@wave-clip-' + id;
}
waveClipIds.add(id);
const precision = segments * frequency;
const units = Math.PI * 2 * frequency;
const factor = precision / 100;
amplitude /= 2;
let polygon = 'polygon(100% 0%, 0% 0%';
for (let i = 0; i <= precision; i++) {
const val = Math.abs((amplitude * Math.cos((i / precision) * units) - amplitude)).toFixed(2);
polygon += ', ' + (i / factor) + '% calc(100% - ' + val + 'px)';
}
polygon += ')';
handler.style.cssRules[0].style.setProperty('--wave-clip-' + id, polygon);
return '@wave-clip-' + id;
};
const VALUE_WRAPPER = {
"img": v => `url(${v})`,
"gradient": (value) => `linear-gradient(${value})`,
"radial-gradient": (value) => `radial-gradient(${value})`,
"conic-gradient": (value) => `conic-gradient(${value})`,
"grid-rows": grid_repeat,
"row-span": grid_rowspan,
"grid-cols": grid_repeat,
"col-span": grid_rowspan,
"e": elevation,
"shadow": v => shadow_regex.test(v) ? `@shadow-${v}` : v,
"ring": ring,
"font-size": fontSize,
"leading": lineHeight,
"tracking": letterSpacing,
"text": v => font_size_regex.test(v) ? ["@font-size-" + v, "@font-size-leading-" + v] : v,
"radius": radius,
"radius-top": radius,
"radius-left": radius,
"radius-bottom": radius,
"radius-right": radius,
"radius-tl": radius,
"radius-bl": radius,
"radius-tr": radius,
"radius-br": radius,
"border-radius": radius,
"break": breakCallback,
"flex-wrap": (v) => v === "reverse" ? "wrap-reverse" : v,
"flex-row": v => v === "reverse" ? "row-reverse" : v,
"flex-col": v => v === "reverse" ? "column-reverse" : v,
"order": orderCallback,
"padding": positive_unit,
"padding-top": positive_unit,
"padding-bottom": positive_unit,
"padding-left": positive_unit,
"padding-right": positive_unit,
"p": positive_unit,
"pt": positive_unit,
"pb": positive_unit,
"pl": positive_unit,
"pr": positive_unit,
"px": positive_unit,
"py": positive_unit,
"margin": unit,
"margin-top": unit,
"margin-bottom": unit,
"margin-left": unit,
"margin-right": unit,
"m": unit,
"mt": unit,
"mb": unit,
"ml": unit,
"mr": unit,
"mx": unit,
"my": unit,
"w": positive_unit,
"h": positive_unit,
"width": positive_unit,
"height": positive_unit,
"min-w": positive_unit,
"max-w": positive_unit,
"min-h": positive_unit,
"max-h": positive_unit,
"min-width": positive_unit,
"max-width": positive_unit,
"min-height": positive_unit,
"max-height": positive_unit,
"wave-clip": generateWave,
};
/*
* Copyright 2021 Zindex Software
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
const ELEVATION_UMBRA = [
"0px 0px 0px 0px", "0px 2px 1px -1px", "0px 3px 1px -2px", "0px 3px 3px -2px", "0px 2px 4px -1px",
"0px 3px 5px -1px", "0px 3px 5px -1px", "0px 4px 5px -2px", "0px 5px 5px -3px", "0px 5px 6px -3px",
"0px 6px 6px -3px", "0px 6px 7px -4px", "0px 7px 8px -4px", "0px 7px 8px -4px", "0px 7px 9px -4px",
"0px 8px 9px -5px", "0px 8px 10px -5px", "0px 8px 11px -5px", "0px 9px 11px -5px", "0px 9px 12px -6px",
"0px 10px 13px -6px", "0px 10px 13px -6px", "0px 10px 14px -6px", "0px 11px 14px -7px", "0px 11px 15px -7px"
];
const ELEVATION_PENUMBRA = [
"0px 0px 0px 0px", "0px 1px 1px 0px", "0px 2px 2px 0px", "0px 3px 4px 0px", "0px 4px 5px 0px", "0px 5px 8px 0px",
"0px 6px 10px 0px", "0px 7px 10px 1px", "0px 8px 10px 1px", "0px 9px 12px 1px", "0px 10px 14px 1px",
"0px 11px 15px 1px", "0px 12px 17px 2px", "0px 13px 19px 2px", "0px 14px 21px 2px", "0px 15px 22px 2px",
"0px 16px 24px 2px", "0px 17px 26px 2px", "0px 18px 28px 2px", "0px 19px 29px 2px", "0px 20px 31px 3px",
"0px 21px 33px 3px", "0px 22px 35px 3px", "0px 23px 36px 3px", "0px 24px 38px 3px"
];
const ELEVATION_AMBIENT = [
"0px 0px 0px 0px", "0px 1px 3px 0px", "0px 1px 5px 0px", "0px 1px 8px 0px", "0px 1px 10px 0px", "0px 1px 14px 0px",
"0px 1px 18px 0px", "0px 2px 16px 1px", "0px 3px 14px 2px", "0px 3px 16px 2px", "0px 4px 18px 3px",
"0px 4px 20px 3px", "0px 5px 22px 4px", "0px 5px 24px 4px", "0px 5px 26px 4px", "0px 6px 28px 5px",
"0px 6px 30px 5px", "0px 6px 32px 5px", "0px 7px 34px 6px", "0px 7px 36px 6px", "0px 8px 38px 7px",
"0px 8px 40px 7px", "0px 8px 42px 7px", "0px 9px 44px 8px", "0px 9px 46px 8px"
];
const BORDER_RADIUS = {
none: "0",
xs: "0.125rem",
sm: "0.25rem",
md: "0.5rem",
lg: "0.75rem",
xl: "1rem",
pill: "9999px"
};
const LETTER_SPACING = {
tighter: "-0.05rem",
tight: "-0.025rem",
normal: "0",
wide: "0.025rem",
wider: "0.05rem",
widest: "0.1rem"
};
const LINE_HEIGHT = {
none: "1",
tight: "1.25",
snug: "1.375",
normal: "1.5",
relaxed: "1.625",
loose: "2"
};
const FONT_SIZES = {
xs: "0.75rem",
sm: "0.875rem",
base: "1rem",
lg: "1.125rem",
xl: "1.25rem",
"2xl": "1.5rem",
"3xl": "1.875rem",
"4xl": "2.25rem",
"5xl": "3rem",
"6xl": "3.75rem",
"7xl": "4.5rem",
"8xl": "6rem",
"9xl": "8rem",
};
const FONT_SIZE_LEADING = {
xs: "1rem",
sm: "1.25rem",
base: "1.5rem",
lg: "1.75rem",
xl: "1.75rem",
"2xl": "2rem",
"3xl": "2.25rem",
"4xl": "2.5rem",
"5xl": "1",
"6xl": "1",
"7xl": "1",
"8xl": "1",
"9xl": "1",
};
const FONT_FAMILIES = {
"sans-serif": "-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol",
serif: "Georgia, Cambria, Times New Roman, Times, serif",
monospace: "Lucida Console, Monaco, monospace"
};
const SHADOW = [
"0px 2px 4px 0px hsla(0, 0%, 20%, 0.1), 0px 6px 6px -8px hsla(0, 0%, 0%, 15%)",
"0px 2px 8px -1px hsla(0, 0%, 20%, 0.1), 0px 16px 16px -12px hsla(0, 0%, 0%, 15%)",
"0px 2px 16px -2px hsla(0, 0%, 20%, 0.1), 0px 22px 18px -16px hsla(0, 0%, 0%, 15%)",
"0px 2px 20px -3px hsla(0, 0%, 20%, 0.1), 0px 28px 22px -18px hsla(0, 0%, 0%, 15%)",
"0px 2px 32px -2px hsla(0, 0%, 20%, 0.1), 0px 32px 26px -18px hsla(0, 0%, 0%, 15%)",
"0px 2px 36px -1px hsla(0, 0%, 20%, 0.1), 0px 42px 34px -24px hsla(0, 0%, 0%, 15%)"
];
function generateRootVariables(settings) {
let vars = '--elevation-umbra: rgba(0, 0, 0, .2);--elevation-penumbra: rgba(0, 0, 0, .14);--elevation-ambient: rgba(0, 0, 0, .12);';
for (let i = 0; i < 25; i++) {
vars += `--elevation-${i}:${ELEVATION_UMBRA[i]} var(--elevation-umbra), ${ELEVATION_PENUMBRA[i]} var(--elevation-penumbra), ${ELEVATION_AMBIENT[i]} var(--elevation-ambient);`;
}
for (let i = 0; i < 6; i++) {
vars += `--shadow-${i + 1}:${SHADOW[i]};`;
}
for (const [key, value] of Object.entries(BORDER_RADIUS)) {
vars += `--border-radius-${key}:${value};`;
}
for (const [key, value] of Object.entries(LETTER_SPACING)) {
vars += `--letter-spacing-${key}:${value};`;
}
for (const [key, value] of Object.entries(LINE_HEIGHT)) {
vars += `--line-height-${key}:${value};`;
}
for (const [key, value] of Object.entries(FONT_FAMILIES)) {
vars += `--${key}:${value};`;
}
for (const [key, value] of Object.entries(FONT_SIZES)) {
vars += `--font-size-${key}:${value};`;
}
for (const [key, value] of Object.entries(FONT_SIZE_LEADING)) {
vars += `--font-size-leading-${key}:${value};`;
}
for (const bp of settings.breakpoints) {
if (bp === 'all') {
continue;
}
vars += `--breakpoint-${bp}: ${settings.media[bp]};`;
}
vars += '--unit-size:0.25rem;';
return ':root{' + vars + '}';
}
/*
* Copyright 2021 Zindex Software
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
const ESCAPE_REGEX = /\\\n/g;
const PROPERTY_REGEX$1 = /^--([a-zA-Z0-9-_]+)--(scope|mixin|register)$/;
class RootClass {
constructor() {
this.cache = new Map();
this.scopes = ["", "text-clip", "selection", "placeholder", "before", "after", "first-letter", "first-line",
"l1", "l2", "marker-l1", "marker", "sibling", "child", "even", "odd", "first", "last", "dark", "light",
"landscape", "portrait", "motion-reduce", "motion-safe"
];
this.registeredProperties = [];
const { cache } = this;
const tc = '-webkit-background-clip: text !important;-moz-background-clip:text !important;background-clip:text !important;';
cache.set("--text-clip--scope", `$selector {${tc}}`);
cache.set("--l1--scope", "$selector > * {$body}");
cache.set("--l2--scope", "$selector > * > * {$body}");
cache.set("--sibling--scope", "$selector > * + * {$body}");
cache.set("--child--scope", "$selector > $class {$body}");
cache.set("--selection--scope", "$selector::selection {$body}");
cache.set("--placeholder--scope", "$selector::placeholder {$body}");
cache.set("--marker--scope", "$selector::marker {$body}");
cache.set("--marker-l1--scope", "$selector > *::marker {$body}");
cache.set("--before--scope", "$selector::before {$body}");
cache.set("--after--scope", "$selector::after {$body}");
cache.set("--even--scope", "$selector:nth-child(even) {$body}");
cache.set("--odd--scope", "$selector:nth-child(odd) {$body}");
cache.set("--first--scope", "$selector:first-child {$body}");
cache.set("--last--scope", "$selector:last-child {$body}");
cache.set("--first-letter--scope", "$selector::first-letter {$body}");
cache.set("--first-line--scope", "$selector::first-line {$body}");
cache.set("--dark--scope", "@media(prefers-color-scheme: dark) {$selector {$body}}");
cache.set("--light--scope", "@media(prefers-color-scheme: light) {$selector {$body}}");
cache.set("--landscape--scope", "@media(orientation: landscape) {$selector {$body}}");
cache.set("--portrait--scope", "@media(orientation: portrait) {$selector {$body}}");
cache.set("--motion-reduce--scope", "@media(prefers-reduced-motion: reduce) {$selector {$body}}");
cache.set("--motion-safe--scope", "@media(prefers-reduced-motion: no-preference) {$selector {$body}}");
this.initialize();
}
initialize() {
const { cache, scopes, registeredProperties } = this;
for (const style of this.getComputedStyles()) {
for (const property of style) {
const match = PROPERTY_REGEX$1.exec(property);
if (match == null) {
continue;
}
const name = match[1];
const value = this.getValue(style, property);
cache.set(property, value);
switch (match[2]) {
case "scope":
if (scopes.indexOf(name) === -1) {
scopes.push(name);
}
break;
case "register":
if (value === 'true' || value === '') {
registeredProperties.push({ name, aliases: [] });
}
else {
const aliases = value.split(',').map(v => v.trim()).filter(v => v !== '');
registeredProperties.push({ name, aliases });
}
break;
}
}
}
}
getComputedStyles() {
const styles = [];
for (let si = 0, sl = document.styleSheets.length; si < sl; si++) {
const styleSheet = document.styleSheets[si];
if (styleSheet.href !== null && styleSheet.href.indexOf(window.location.origin) !== 0) {
continue;
}
if (styleSheet.href === null && styleSheet.ownerNode !== null
&& styleSheet.ownerNode instanceof Element && styleSheet.ownerNode.id === 'opis-assembler-css') {
continue;
}
const rule = styleSheet.cssRules[0];
if (rule.type === CSSRule.STYLE_RULE && rule.selectorText === ':root') {
styles.push(rule.style);
}
}
return styles;
}
getValue(style, property) {
let value = style.getPropertyValue(property).replace(ESCAPE_REGEX, "").trim();
if (value.startsWith('"') && value.endsWith('"')) {
value = value.substring(1, value.length - 1).trim();
}
return value;
}
getRegisteredScopes() {
return this.scopes;
}
getRegisteredProperties() {
return this.registeredProperties;
}
getPropertyValue(property) {
if (this.cache.has(property)) {
return this.cache.get(property);
}
return '';
}
}
const Root = new RootClass();
/*
* Copyright 2021 Zindex Software
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
const regex = /([a-z0-9]|(?=[A-Z]))([A-Z])/g;
const HASH_VAR_PREFIX = '--asm-';
const HASH_CLASS_PREFIX = 'asm';
const PROPERTY_REGEX = /^(?:(?<media>[a-z]{2})\|)?(?:(?<scope>[-a-zA-Z0-9]+)!)?(?<property>[-a-z]+)(?:\.(?<state>[-a-z]+))?$/m;
function getUserSettings(dataset) {
const enabled = dataset.enabled === undefined ? true : dataset.enabled === 'true';
const generate = dataset.generate === undefined ? false : dataset.generate === 'true';
const constructable = dataset.constructable === undefined ? true : dataset.constructable === 'true';
const desktopFirst = dataset.mode === undefined ? false : dataset.mode === 'desktop-first';
const selectorAttribute = dataset.selectorAttribute === undefined ? 'class' : dataset.selectorAttribute;
const cache = dataset.cache === undefined ? null : dataset.cache;
const cacheKey = dataset.cacheKey === undefined ? "assembler-css-cache" : dataset.cacheKey;
const registeredProperties = Root.getRegisteredProperties();
const scopes = Root.getRegisteredScopes();
for (let i = 0, l = registeredProperties.length; i < l; i++) {
const prop = registeredProperties[i];
if (PROPERTY_LIST.indexOf(prop.name) === -1) {
PROPERTY_LIST.push(prop.name);
}
if (prop.aliases.length > 0) {
PROPERTY_VARIANTS[prop.name] = prop.aliases;
}
}
// Consider all bp
let breakpoints = ['xs', 'sm', 'md', 'lg', 'xl'];
if (desktopFirst) {
// remove xl and reverse
breakpoints.pop();
breakpoints.reverse();
}
else {
// remove xs
breakpoints.shift();
}
// Add all
breakpoints.unshift('all');
const states = dataset.states === undefined
? ["normal", "hover"]
: getStringItemList(dataset.states.toLowerCase());
if (states.indexOf("normal") === -1) {
// always add normal state
states.unshift("normal");
}
const xs = dataset.breakpointXs || "512px";
const sm = dataset.breakpointSm || (desktopFirst ? "768px" : "512px");
const md = dataset.breakpointMd || (desktopFirst ? "1024px" : "768px");
const lg = dataset.breakpointLg || (desktopFirst ? "1280px" : "1024px");
const xl = dataset.breakpointXl || ("1280px");
const xStyleAttribute = dataset.xStyleAttribute || "x-style";
return {
enabled,
generate,
constructable,
cache,
cacheKey,
desktopFirst,
scopes,
states,
breakpoints,
media: { xs, sm, md, lg, xl },
xStyleAttribute,
selectorAttribute,
registeredProperties
};
}
function style(item) {
if (typeof item === 'string') {
return item.trim();
}
if (Array.isArray(item)) {
return item.map(style).join(';');
}
const list = [];
for (const key in item) {
const value = item[key];
if (value === undefined) {
continue;
}
const property = key.replace(regex, '$1-$2').toLowerCase();
list.push(value === null ? property : (property + ':' + value));
}
return list.join(';');
}
function getStringItemList(value, unique = true) {
const items = value
.replace(/[,;]/g, ' ')
.split(/\s\s*/g)
.map(trim)
.filter(nonEmptyString);
return unique ? items.filter(uniqueItems) : items;
}
function trim(value) {
return value.trim();
}
function nonEmptyString(value) {
return value !== '';
}
function uniqueItems(value, index, self) {
return self.indexOf(value) === index;
}
/*
* Copyright 2021 Zindex Software
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
function generateStyles(settings) {
if (settings.cache) {
const json = localStorage.getItem(settings.cacheKey + ':' + settings.cache);
if (json !== null) {
const content = JSON.parse(json);
content.tracker = new Set(content.tracker);
return content;
}
const oldCacheKey = localStorage.getItem(settings.cacheKey);
if (oldCacheKey !== null) {
localStorage.removeItem(settings.cacheKey + ':' + oldCacheKey);
}
localStorage.setItem(settings.cacheKey, settings.cache);
}
else {
const oldCacheKey = localStorage.getItem(settings.cacheKey);
if (oldCacheKey !== null) {
localStorage.removeItem(settings.cacheKey + ':' + oldCacheKey);
localStorage.removeItem(settings.cacheKey);
}
}
const base = STATE_LIST.length, result = [];
const breakpoints = settings.breakpoints;
const media_settings = settings.media;
const desktopFirst = settings.desktopFirst;
const states = settings.states;
const tracker = new Set();
const selectorAttribute = settings.selectorAttribute;
const selectorPfx = selectorAttribute === 'class'
? '.' + HASH_CLASS_PREFIX + '\\#'
: '[' + selectorAttribute + '~="' + HASH_CLASS_PREFIX + '#';
const selectorSfx = selectorAttribute === 'class' ? '' : '"]';
result.push(generateRootVariables(settings));
for (let media_index = 0, l = breakpoints.length; media_index < l; media_index++) {
const bp = breakpoints[media_index];
let str = '';
if (media_index !== 0) {
if (desktopFirst) {
str += `@media only screen and (max-width: ${media_settings[bp]}) {`;
}
else {
str += `@media only screen and (min-width: ${media_settings[bp]}) {`;
}
}
for (let name_index = 0, l = PROPERTY_LIST.length; name_index < l; name_index++) {
const name = PROPERTY_LIST[name_index];
// generate all states for default media
const stateList = media_index === 0 ? STATE_LIST : states;
for (const state of stateList) {
const state_index = STATE_LIST.indexOf(state);
if (state_index < 0) {
continue;
}
const hash = (((name_index * base) + media_index) * base + state_index).toString(16);
const property = HASH_VAR_PREFIX + (media_index > 0 ? bp + '--' : '') + name + (state_index > 0 ? '__' + stateList[state_index] : '');
tracker.add(hash);
let variants = PROPERTY_VARIANTS[name], prefix = '';
if (variants) {
for (let i = 0, l = variants.length; i < l; i++) {
prefix += `${variants[i]}:var(${property}) !important;`;
}
}
str += `${selectorPfx + hash + selectorSfx}${state_index > 0 ? ':' + state : ''}{${prefix}${name}:var(${property}) !important}`;
}
}
if (media_index !== 0) {
str += '}';
}
result.push(str);
}
const content = {
content: result.join(''),
tracker
};
if (settings.cache) {
localStorage.setItem(settings.cacheKey, settings.cache);
localStorage.setItem(settings.cacheKey + ':' + settings.cache, JSON.stringify({
content: content.content,
tracker: [...tracker]
}));
}
return content;
}
/*
* Copyright 2021 Zindex Software
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
let _documentObserver = null;
let _elementObserver = null;
let _shadowRootObserver = null;
const observedElements = new WeakMap();
function observeTree(element, handler) {
for (let e = element; e != null; e = e.nextElementSibling) {
if (!observedElements.has(e)) {
observe(e, handler);
}
else {
observeTree(e.firstElementChild, handler);
}
}
}
function observeDocument(document, handler) {
if (_documentObserver === null) {
_documentObserver = new MutationObserver(function (mutations) {
for (let i = 0, l = mutations.length; i < l; i++) {
const nodes = mutations[i].addedNodes;
for (let i = 0; i < nodes.length; i++) {
if (nodes[i] instanceof HTMLElement) {
observe(nodes[i], handler);
}
}
}
});
}
_documentObserver.observe(document, { childList: true, subtree: true });
}
function observeElement(element, handler) {
if (_elementObserver === null) {
_elementObserver = new MutationObserver(function (mutations) {
for (const mutation of mutations) {
const target = mutation.target;
observedElements.set(target, handler.handleStyleChange(target, target.getAttribute(mutation.attributeName), observedElements.get(target)));
}
});
}
_elementObserver.observe(element, {
attributes: true,
attributeOldValue: true,
childList: false,
attributeFilter: [handler.userSettings.xStyleAttribute],
});
}
function observeShadow(shadow, handler) {
if (_shadowRootObserver === null) {
_shadowRootObserver = new MutationObserver(function (mutations) {
for (let i = 0, l = mutations.length; i < l; i++) {
const nodes = mutations[i].addedNodes;
for (let i = 0; i < nodes.length; i++) {
if (nodes[i] instanceof HTMLElement) {
observe(nodes[i], handler);
}
}
}
});
}
_shadowRootObserver.observe(shadow, { childList: true, subtree: true });
}
function observe(element, handler) {
if (observedElements.has(element)) {
return;
}
const style = element.attributes.getNamedItem(handler.userSettings.xStyleAttribute);
observedElements.set(element, style ? handler.handleStyleChange(element, style.value, []) : []);
observeElement(element, handler);
for (let child = element.firstElementChild; child != null; child = child.nextElementSibling) {
observe(child, handler);
}
}
/*
* Copyright 2021 Zindex Software
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
const mixinRepository = new Map();
const MIXIN_ARGS_REGEX = /\${([0-9]+)(?:=([^}]+))?}/g;
const defaultMixinHandler = (context, name, args) => {
if (name.startsWith('.')) {
if (context.currentElement !== null) {
name = name.substring(1);
const attr = 'data-mixin-' + name;
for (let p = context.currentElement.parentElement; p != null; p = p.parentElement) {
if (p.hasAttribute(attr)) {
return p.getAttribute(attr)
.replace(MIXIN_ARGS_REGEX, (match, arg, fallback) => args[parseInt(arg)] || fallback || '');
}
}
}
return '';
}
return Root.getPropertyValue('--' + name + '--mixin')
.replace(MIXIN_ARGS_REGEX, (match, arg, fallback) => args[parseInt(arg)] || fallback || '');
};
mixinRepository.set('space-x', function (_, space, right) {
return right === 'true' ? `sibling!mr:${space || '0'}` : `sibling!ml:${space || '0'}`;
});
mixinRepository.set('space-y', function (_, space, bottom) {
return bottom === 'true' ? `sibling!mb:${space || '0'}` : `sibling!mt:${space || '0'}`;
});
mixinRepository.set('grid', function () {
return 'grid; l1!wb:break-all; l2!max-w:100%; child!justify-self:normal; child!align-self:normal';
});
mixinRepository.set('stack', function () {
return `grid; grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr);
grid-template-areas:"stackarea"; l1!grid-area:stackarea; l1!z:0; w:100%; h:100%`;
});
mixinRepository.set('sr-only', function () {
return 'absolute; w:1px; h:1px; p:0; m:-1px; bw:0; overflow:hidden; clip:rect(0, 0, 0, 0); left:-9999px';
});
mixinRepository.set('container', function (settings) {
if (settings.desktopFirst) {
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%`;
}
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`;
});
function resolveMixin(context, name, args) {
if (mixinRepository.has(name)) {
return style(mixinRepository.get(name)(context.userSettings, ...args));
}
return style(defaultMixinHandler(context, name, args));
}
function registerMixin(name, callback) {
mixinRepository.set(name, callback);
}
/*
* Copyright 2021 Zindex Software
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
const VAR_REGEX = /@([a-zA-Z0-9\-_]+)/g;
const REPLACE_REGEX = /\$(selector|body|class|value|property|state|variants|var)/g;
const SPLIT_REGEX = /;/;
const MIXIN_PREFIX = '^';
// do not match comma inside parenthesis
// 2px, linear-gradient(blue, red), inline => [2px, linear-gradient(blue, red), inline]
const COMMA_DELIMITED = /\s*,\s*(?![^(]*\))/gm;
class StyleHandler {
constructor(settings, style, tracker) {
this._currentElement = null;
this.style = style;
this.settings = settings;
this.tracker = tracker;
this.mediaSettings = settings.media;
this.desktopFirst = settings.desktopFirst;
this.breakpoints = settings.breakpoints;
this.rules = [];
this.padding = style.cssRules.length;
this.selectorAttribute = settings.selectorAttribute;
}
get userSettings() {
return this.settings;
}
get currentElement() {
return this._currentElement;
}
handleStyleChange(element, content, old) {
this._currentElement = element;
if (content === null) {
return this.handleStyleRemoved(element, old);
}
const newEntries = this.getStyleEntries(content);
const classList = element.hasAttribute(this.selectorAttribute) ? element.getAttribute(this.selectorAttribute).split(' ') : [];
const assemblerEntries = [];
// remove old entries
for (const { n: name, p: property, e: entry } of old) {
if (!newEntries.has(name)) {
const index = classList.indexOf(entry);
if (index >= 0) {
classList.splice(index, 1);
}
element.style.removeProperty(property);
}
}
for (const info of newEntries.values()) {
const { entry, property, hash, value, name } = info;
const index = classList.indexOf(entry);
if (index < 0) {
classList.push(entry);
}
if (!this.tracker.has(hash)) {
this.generateCSS(info);
}
element.style.setProperty(property, value);
assemblerEntries.push({ e: entry, n: name, p: property });
}
element.setAttribute(this.selectorAttribute, classList.join(' '));
this._currentElement = null;
return assemblerEntries;
}
handleStyleRemoved(element, old) {
this._currentElement = null;
const classList = element.hasAttribute(this.selectorAttribute) ? element.getAttribute(this.selectorAttribute).split(' ') : [];
for (const { p: property, e: entry } of old) {
const index = classList.indexOf(entry);
if (index >= 0) {
classList.splice(index, 1);
}
element.style.removeProperty(property);
}
element.setAttribute(this.selectorAttribute, classList.join(' '));
return [];
}
extract(attr, value = null) {
var _a;
const m = (_a = PROPERTY_REGEX.exec(attr)) === null || _a === void 0 ? void 0 : _a.groups;
if (!m || !m.property) {
return [];
}
const MEDIA_LIST = this.breakpoints;
const media = MEDIA_LIST.indexOf(m.media || 'all');
const state = STATE_LIST.indexOf(m.state || 'normal');
if (media < 0 || state < 0) {
return [];
}
let properties = m.property;
const original = properties;
const scopes = this.settings.scopes;
if (ALIASES.hasOwnProperty(properties)) {
properties = ALIASES[properties];
if (typeof properties === 'function') {
properties = properties(value);
}
}
if (!Array.isArray(properties)) {
properties = [properties];
}
if (value === null) {
value = DEFAULT_VALUES[original] || '';
}
if (VALUE_WRAPPER.hasOwnProperty(original)) {
value = VALUE_WRAPPER[original](value, original, media, state, this);
}
if (!Array.isArray(value)) {
value = Array(properties.length).fill(value.replace(VAR_REGEX, "var(--$1)"));
}
else {
value = value.map(value => value.replace(VAR_REGEX, "var(--$1)"));
}
const result = [];
const base = STATE_LIST.length;
let index = -1;
for (const property of properties) {
index++;
const name = PROPERTY_LIST.indexOf(property);
if (name < 0) {
continue;
}
const scope = m.scope || '';
const rank = ((name * base) + media) * base + state;
const hash = rank.toString(16) + (scope ? `-${scope}` : '');
const scopeRank = scopes.indexOf(scope) * 100000;
const internalProperty = (m.media ? m.media + '--' : '') + (scope ? scope + '__' : '') + property + (m.state ? '__' + m.state : '');
result.push({
name: (m.media ? m.media + '|' : '') + (scope ? scope + '!' : '') + property + (m.state ? '.' + m.state : ''),
//property: HASH_VAR_PREFIX + hash,
property: HASH_VAR_PREFIX + internalProperty,
entry: HASH_CLASS_PREFIX + '#' + hash,
value: value[index],
media: m.media || '',
state: m.state || '',
cssProperty: property,
hash,
scope,
rank: scopeRank < 0 ? -1 : rank + scopeRank,
});
}
return result;
}
getStyleEntries(content) {
const entries = new Map();
for (let name of this.getResolvedProperties(content)) {
let value = null;
const pos = name.indexOf(':');
if (pos >= 0) {
value = name.substr(pos + 1);
name = name.substr(0, pos).trim();
}
for (const info of this.extract(name, value)) {
entries.set(info.name, info);
}
}
return entries;
}
getResolvedProperties(content, stack = []) {
const entries = [];
for (let name of content.split(SPLIT_REGEX)) {
name = name.trim();
if (name === '') {
continue;
}
// extract mixin
if (name.startsWith(MIXIN_PREFIX)) {
const pos = name.indexOf(':');
let mixin, args;
if (pos < 0) {
mixin = name.substr(1);
args = [];
}
else {
mixin = name.substr(1, pos - 1);
args = name.substr(pos + 1).split(COMMA_DELIMITED).map(trim);
}
if (stack.indexOf(mixin) >= 0) {
stack.push(mixin);
throw new Error('Recursive mixin detected: ' + stack.join('->'));
}
stack.push(mixin);
entries.push(...this.getResolvedProperties(resolveMixin(this, mixin, args), stack));
stack.pop();
continue;
}
entries.push(name);
}
return entries;
}
generateCSS(info) {
const { tracker, mediaSettings, desktopFirst, style } = this;
const { hash, media, state, cssProperty, property, scope, rank } = info;
const hasMedia = media !== '';
const selectorAttribute = this.settings.selectorAttribute;
const selectorPfx = selectorAttribute === 'class'
? '.' + HASH_CLASS_PREFIX + '\\#'
: '[' + selectorAttribute + '~="' + HASH_CLASS_PREFIX + '#';
const selectorSfx = selectorAttribute === 'class' ? '' : '"]';
tracker.add(hash);
if (rank < 0) {
return;
}
let rule = '';
if (hasMedia) {
if (desktopFirst) {
rule += `@media only screen and (max-width: ${mediaSettings[media]}) {`;
}
else {
rule += `@media only screen and (min-width: ${mediaSettings[media]}) {`;
}
}
let variants = PROPERTY_VARIANTS[cssProperty], prefix = '';
if (variants) {
for (let i = 0, l = variants.length; i < l; i++) {
prefix += `${variants[i]}:var(${property}) !important;`;
}
}
if (scope) {
const scopeValue = Root.getPropertyValue('--' + scope + '--scope');
if (scopeValue === '') {
return;
}
rule += scopeValue.replace(REPLACE_REGEX, (match, p1) => {
switch (p1) {
case "selector":
return `${selectorPfx + hash + selectorSfx}${state ? ':' + state : ''}`;
case "body":
return prefix + cssProperty + ': var(' + property + ') !important';
case "variants":
return prefix;
case "property":
return cssProperty;
case "value":
return `var(${property})`;
case "class":
return selectorPfx + hash + selectorSfx;
case "state":
return state ? ':' + state : '';
case "var":
return property;
}
return p1;
});
}
else {
rule += `${selectorPfx + hash + selectorSfx}${state ? ':' + state : ''}{${prefix}${cssProperty}: var(${property}) !important}`;
}
if (hasMedia) {
rule += '}';
}
const ruleIndex = this.getRuleIndex(rank);
this.rules.splice(ruleIndex, 0, rank);
try {
style.insertRule(rule, this.padding + ruleIndex);
}
catch (_a) {
this.rules.splice(ruleIndex, 1);
console.warn("Unsupported rule:", rule);
}
}
getRuleIndex(rank) {
const { rules } = this;
for (let i = 0, l = rules.length; i < l; i++) {
if (rank < rules[i]) {
return i;
}
}
return rules.length;
}
}
/*
* Copyright 2021 Zindex Software
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
let styleHandler = null;
let supportsConstructable = true;
let supportsAdoptingStyleSheets = true;
let settings = null;
const observedShadowRoots = new WeakMap();
function init(options) {
supportsAdoptingStyleSheets = window.ShadowRoot &&
(window.ShadyCSS === undefined || window.ShadyCSS.nativeShadow) &&
'adoptedStyleSheets' in Document.prototype &&
'replace' in CSSStyleSheet.prototype;
settings = getUserSettings(options || document.currentScript.dataset);
if (!settings.enabled) {
return false;
}
let tracker;
let stylesheet;
if (supportsAdoptingStyleSheets && settings.constructable) {
stylesheet = new CSSStyleSheet();
if (settings.generate) {
const generated = generateStyles(settings);
tracker = generated.tracker;
stylesheet.replaceSync(generated.content);
}
else {
tracker = new Set();
stylesheet.replaceSync(generateRootVariables(settings));
}
document.adoptedStyleSheets = [...document.adoptedStyleSheets, stylesheet];
}
else {
supportsConstructable = false;
const style = document.createElement("style");
const generated = generateStyles(settings);
tracker = generated.tracker;
style.id = 'opis-assembler-css';
style.textContent = generated.content;
document.currentScript.parentElement.insertBefore(style, document.currentScript);
stylesheet = style.sheet;
}
styleHandler = new StyleHandler(settings, stylesheet, tracker);
observeDocument(document, styleHandler);
if (window) {
window.addEventListener('DOMContentLoaded', function () {
observeTree(document.body, styleHandler);
});
}
return true;
}
function handleShadowRoot(shadowRoot, add = true) {
if (styleHandler === null) {
init();
}
if (!supportsAdoptingStyleSheets || !supportsConstructable) {
return false;
}
if (observedShadowRoots.has(shadowRoot)) {
return true;
}
observedShadowRoots.set(shadowRoot, true);
if (add) {
shadowRoot.adoptedStyleSheets = [...shadowRoot.adoptedStyleSheets, styleHandler.style];
}
observeShadow(shadowRoot, styleHandler);
return true;
}
function cssStyleSheet() {
if (styleHandler === null) {
init();
}
return styleHandler.style;
}
exports.cssStyleSheet = cssStyleSheet;
exports.handleShadowRoot = handleShadowRoot;
exports.init = init;
exports.registerMixin = registerMixin;
exports.style = style;
================================================
FILE: dist/assembler.es.js
================================================
/*
* Copyright 2021 Zindex Software
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
const positive_number_regex = /^[0-9]+(\.5)?$/;
const number_regex = /^-?[0-9]+(\.5)?$/;
const font_size_regex = /^(xs|sm|base|lg|([2-9])?xl)$/;
const line_height_regex = /^(none|tight|snug|normal|relaxed|loose)$/;
const elevation_regex = /^[0-9]|1[0-9]|2[0-4]$/;
const shadow_regex = /^[1-6]$/;
const letter_spacing_regex = /^(tighter|tight|normal|wide|wider|widest)$/;
const radius_regex = /^(xs|sm|md|lg|xl|pill)$/;
const order_regex = /^(first|last|none)$/;
// do not match comma inside parenthesis
// 2px, linear-gradient(blue, red), inline => [2px, linear-gradient(blue, red), inline]
const args_delimiter = /\s*,\s*(?![^(]*\))/gm;
const PROPERTY_LIST = [
"align-content",
"align-items",
"align-self",
"animation",
"appearance",
"backdrop-filter",
"background",
"background-attachment",
"background-blend-mode",
"background-clip",
"background-color",
"background-image",
"background-position",
"background-repeat",
"background-size",
"backface-visibility",
"border",
"border-bottom",
"border-bottom-color",
"border-bottom-style",
"border-bottom-width",
"border-bottom-left-radius",
"border-bottom-right-radius",
"border-collapse",
"border-color",
"border-left",
"border-left-color",
"border-left-style",
"border-left-width",
"border-radius",
"border-right",
"border-right-color",
"border-right-style",
"border-right-width",
"border-style",
"border-top",
"border-top-color",
"border-top-style",
"border-top-width",
"border-top-left-radius",
"border-top-right-radius",
"border-width",
"bottom",
"box-orient",
"box-shadow",
"box-sizing",
"clear",
"clip",
"clip-path",
"color",
"column-gap",
"content",
"cursor",
"display",
"filter",
"flex",
"flex-basis",
"flex-direction",
"flex-flow",
"flex-grow",
"flex-shrink",
"flex-wrap",
"float",
"font-family",
"font-size",
"font-style",
"font-weight",
"font-variant-numeric",
"gap",
"grid",
"grid-area",
"grid-auto-columns",
"grid-auto-flow",
"grid-auto-rows",
"grid-column",
"grid-column-end",
"grid-column-start",
"grid-row",
"grid-row-end",
"grid-row-start",
"grid-template",
"grid-template-areas",
"grid-template-columns",
"grid-template-rows",
"height",
"isolation",
"justify-content",
"justify-items",
"justify-self",
"left",
"letter-spacing",
"line-break",
"line-clamp",
"line-height",
"list-style-position",
"list-style-type",
"margin",
"margin-bottom",
"margin-left",
"margin-right",
"margin-top",
"max-height",
"max-width",
"min-height",
"min-width",
"object-fit",
"object-position",
"opacity",
"order",
"outline",
"outline-offset",
"overflow",
"overflow-wrap",
"overflow-x",
"overflow-y",
"overscroll-behavior",
"overscroll-behavior-x",
"overscroll-behavior-y",
"padding",
"padding-bottom",
"padding-left",
"padding-right",
"padding-top",
"perspective",
"perspective-origin",
"place-content",
"place-items",
"place-self",
"pointer-events",
"position",
"resize",
"right",
"row-gap",
"table-layout",
"text-align",
"text-decoration",
"text-decoration-style",
"text-fill-color",
"text-overflow",
"text-shadow",
"text-transform",
"top",
"transform",
"transform-box",
"transform-origin",
"transform-style",
"transition",
"user-select",
"vertical-align",
"visibility",
"white-space",
"width",
"word-break",
"z-index",
];
const PROPERTY_VARIANTS = {
"animation": ["-webkit-animation"],
"appearance": ["-webkit-appearance", "-moz-appearance"],
"background-clip": ["-webkit-background-clip", "-moz-background-clip"],
"backdrop-filter": ["-webkit-backdrop-filter"],
"box-orient": ["-webkit-box-orient"],
"clip-path": ["-webkit-clip-path"],
"column-gap": ["-moz-column-gap"],
"line-clamp": ["-webkit-line-clamp"],
"user-select": ["-webkit-user-select", "-moz-user-select"],
"text-fill-color": ["-webkit-text-fill-color", "-moz-text-fill-color"]
};
const STATE_LIST = [
"normal",
"link",
"visited",
"empty",
"placeholder-shown",
"default",
"checked",
"indeterminate",
"valid",
"invalid",
"required",
"optional",
"out-of-range",
"in-range",
"hover",
"focus",
"focus-within",
"focus-visible",
"active",
"read-only",
"read-write",
"disabled",
"enabled",
];
const ALIASES = {
"backdrop": "backdrop-filter",
"bg": "background",
"bg-attachment": "background-attachment",
"bg-blend": "background-blend-mode",
"bg-clip": "background-clip",
"bg-color": "background-color",
"bg-image": "background-image",
"bg-position": "background-position",
"bg-repeat": "background-repeat",
"bg-size": "background-size",
"radius": "border-radius",
"radius-top": ["border-top-left-radius", "border-top-right-radius"],
"radius-bottom": ["border-bottom-left-radius", "border-bottom-right-radius"],
"radius-left": ["border-bottom-left-radius", "border-top-left-radius"],
"radius-right": ["border-bottom-right-radius", "border-top-right-radius"],
"radius-bl": "border-bottom-left-radius",
"radius-br": "border-bottom-right-radius",
"radius-tl": "border-top-left-radius",
"radius-tr": "border-top-right-radius",
"b": "border",
"bc": "border-color",
"bs": "border-style",
"bw": "border-width",
"bt": "border-top",
"bl": "border-left",
"br": "border-right",
"bb": "border-bottom",
"bt-color": "border-top-color",
"bt-style": "border-top-style",
"bt-width": "border-top-width",
"bl-color": "border-left-color",
"bl-style": "border-left-style",
"bl-width": "border-left-width",
"br-color": "border-right-color",
"br-style": "border-right-style",
"br-width": "border-right-width",
"bb-color": "border-bottom-color",
"bb-style": "border-bottom-style",
"bb-width": "border-bottom-width",
"m": "margin",
"mt": "margin-top",
"mb": "margin-bottom",
"ml": "margin-left",
"mr": "margin-right",
"mx": ["margin-left", "margin-right"],
"my": ["margin-top", "margin-bottom"],
"p": "padding",
"pt": "padding-top",
"pb": "padding-bottom",
"pl": "padding-left",
"pr": "padding-right",
"px": ["padding-left", "padding-right"],
"py": ["padding-top", "padding-bottom"],
"min-w": "min-width",
"max-w": "max-width",
"min-h": "min-height",
"max-h": "max-height",
"w": "width",
"h": "height",
"img": "background-image",
"gradient": "background-image",
"radial-gradient": "background-image",
"conic-gradient": "background-image",
"flex-dir": "flex-direction",
"col-reverse": "flex-direction",
"row-reverse": "flex-direction",
"grid-rows": "grid-template-rows",
"grid-flow": "grid-auto-flow",
"row-start": "grid-row-start",
"row-span": "grid-row-end",
"grid-cols": "grid-template-columns",
"col-start": "grid-column-start",
"col-span": "grid-column-end",
"col-gap": "column-gap",
"auto-cols": "grid-auto-columns",
"auto-rows": "grid-auto-rows",
"e": "box-shadow",
"shadow": "box-shadow",
"overscroll": "overscroll-behavior",
"overscroll-x": "overscroll-behavior-x",
"overscroll-y": "overscroll-behavior-y",
"inset": ["top", "bottom", "left", "right"],
"inset-x": ["left", "right"],
"inset-y": ["top", "bottom"],
"z": "z-index",
"decoration": "text-decoration",
"v-align": "vertical-align",
"ws": "white-space",
"ring": "box-shadow",
"leading": "line-height",
"tracking": "letter-spacing",
"break": v => {
if (v === "words")
return ["overflow-wrap"];
if (v === "all")
return ["word-break"];
return ["overflow-wrap", "word-break"];
},
"truncate": ["overflow", "text-overflow", "white-space"],
"flex": v => v ? "flex" : "display",
"inline-flex": "display",
"grid": "display",
"inline-grid": "display",
"hidden": "display",
"block": "display",
"inline-block": "display",
"static": "position",
"fixed": "position",
"absolute": "position",
"relative": "position",
"sticky": "position",
"visible": "visibility",
"invisible": "visibility",
"flex-row": "flex-direction",
"flex-col": "flex-direction",
"list": v => {
if (v === "inside" || v === "outside") {
return "list-style-position";
}
return "list-style-type";
},
"text": v => font_size_regex.test(v) ? ["font-size", "line-height"] : "font-size",
"uppercase": "text-transform",
"lowercase": "text-transform",
"capitalize": "text-transform",
"normal-case": "text-transform",
"variant": "font-variant-numeric",
"wave-clip": "clip-path",
};
const DEFAULT_VALUES = {
"border": ["1px solid transparent"],
"truncate": ["hidden", "ellipsis", "nowrap"],
"flex": "flex",
"inline-flex": "inline-flex",
"grid": "grid",
"inline-grid": "inline-grid",
"hidden": "none",
"block": "block",
"inline-block": "inline-block",
"static": "static",
"fixed": "fixed",
"absolute": "absolute",
"relative": "relative",
"sticky": "sticky",
"visible": "visible",
"invisible": "hidden",
"flex-row": "row",
"flex-col": "column",
"flex-wrap": "wrap",
"flex-grow": "1",
"flex-shrink": "1",
"col-reverse": "column-reverse",
"row-reverse": "row-reverse",
"uppercase": "uppercase",
"lowercase": "lowercase",
"capitalize": "capitalize",
"normal-case": "none",
"radius": "sm",
"shadow": "1",
"wave-clip": "50, 2, 50"
};
const unit = v => number_regex.test(v) ? `calc(${v} * @unit-size)` : v;
const positive_unit = v => positive_number_regex.test(v) ? `calc(${v} * @unit-size)` : v;
const grid_repeat = v => `repeat(${v}, minmax(0, 1fr))`;
const grid_rowspan = v => `span ${v}`;
const elevation = v => elevation_regex.test(v) ? `@elevation-${v}` : v;
const ring = v => `0 0 0 ${v}`;
const fontSize = v => font_size_regex.test(v) ? "@font-size-" + v : v;
const lineHeight = v => {
if (positive_number_regex.test(v)) {
return `calc(${v} * @unit-size)`;
}
return line_height_regex.test(v) ? "@line-height-" + v : v;
};
const letterSpacing = v => letter_spacing_regex.test(v) ? "@letter-spacing-" + v : v;
const radius = v => radius_regex.test(v) ? "@border-radius-" + v : v;
const breakCallback = v => {
if (v === "all")
return "break-all";
if (v === "words")
return "break-word";
return ["normal", "normal"];
};
const orderCallback = v => {
if (!order_regex.test(v)) {
return v;
}
if (v === "first")
return "-9999";
if (v === "last")
return "9999";
return "0";
};
const waveClipIds = new Set();
const generateWave = (value, original, media, state, handler) => {
const args = value.split(args_delimiter).map(v => v.trim()).map(v => parseInt(v));
let [amplitude, frequency, segments] = args;
amplitude = amplitude !== null && amplitude !== void 0 ? amplitude : 50;
frequency = frequency !== null && frequency !== void 0 ? frequency : 2;
segments = segments !== null && segments !== void 0 ? segments : 50;
const id = amplitude + '-' + frequency + '-' + segments;
if (waveClipIds.has(id)) {
return '@wave-clip-' + id;
}
waveClipIds.add(id);
const precision = segments * frequency;
const units = Math.PI * 2 * frequency;
const factor = precision / 100;
amplitude /= 2;
let polygon = 'polygon(100% 0%, 0% 0%';
for (let i = 0; i <= precision; i++) {
const val = Math.abs((amplitude * Math.cos((i / precision) * units) - amplitude)).toFixed(2);
polygon += ', ' + (i / factor) + '% calc(100% - ' + val + 'px)';
}
polygon += ')';
handler.style.cssRules[0].style.setProperty('--wave-clip-' + id, polygon);
return '@wave-clip-' + id;
};
const VALUE_WRAPPER = {
"img": v => `url(${v})`,
"gradient": (value) => `linear-gradient(${value})`,
"radial-gradient": (value) => `radial-gradient(${value})`,
"conic-gradient": (value) => `conic-gradient(${value})`,
"grid-rows": grid_repeat,
"row-span": grid_rowspan,
"grid-cols": grid_repeat,
"col-span": grid_rowspan,
"e": elevation,
"shadow": v => shadow_regex.test(v) ? `@shadow-${v}` : v,
"ring": ring,
"font-size": fontSize,
"leading": lineHeight,
"tracking": letterSpacing,
"text": v => font_size_regex.test(v) ? ["@font-size-" + v, "@font-size-leading-" + v] : v,
"radius": radius,
"radius-top": radius,
"radius-left": radius,
"radius-bottom": radius,
"radius-right": radius,
"radius-tl": radius,
"radius-bl": radius,
"radius-tr": radius,
"radius-br": radius,
"border-radius": radius,
"break": breakCallback,
"flex-wrap": (v) => v === "reverse" ? "wrap-reverse" : v,
"flex-row": v => v === "reverse" ? "row-reverse" : v,
"flex-col": v => v === "reverse" ? "column-reverse" : v,
"order": orderCallback,
"padding": positive_unit,
"padding-top": positive_unit,
"padding-bottom": positive_unit,
"padding-left": positive_unit,
"padding-right": positive_unit,
"p": positive_unit,
"pt": positive_unit,
"pb": positive_unit,
"pl": positive_unit,
"pr": positive_unit,
"px": positive_unit,
"py": positive_unit,
"margin": unit,
"margin-top": unit,
"margin-bottom": unit,
"margin-left": unit,
"margin-right": unit,
"m": unit,
"mt": unit,
"mb": unit,
"ml": unit,
"mr": unit,
"mx": unit,
"my": unit,
"w": positive_unit,
"h": positive_unit,
"width": positive_unit,
"height": positive_unit,
"min-w": positive_unit,
"max-w": positive_unit,
"min-h": positive_unit,
"max-h": positive_unit,
"min-width": positive_unit,
"max-width": positive_unit,
"min-height": positive_unit,
"max-height": positive_unit,
"wave-clip": generateWave,
};
/*
* Copyright 2021 Zindex Software
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
const ELEVATION_UMBRA = [
"0px 0px 0px 0px", "0px 2px 1px -1px", "0px 3px 1px -2px", "0px 3px 3px -2px", "0px 2px 4px -1px",
"0px 3px 5px -1px", "0px 3px 5px -1px", "0px 4px 5px -2px", "0px 5px 5px -3px", "0px 5px 6px -3px",
"0px 6px 6px -3px", "0px 6px 7px -4px", "0px 7px 8px -4px", "0px 7px 8px -4px", "0px 7px 9px -4px",
"0px 8px 9px -5px", "0px 8px 10px -5px", "0px 8px 11px -5px", "0px 9px 11px -5px", "0px 9px 12px -6px",
"0px 10px 13px -6px", "0px 10px 13px -6px", "0px 10px 14px -6px", "0px 11px 14px -7px", "0px 11px 15px -7px"
];
const ELEVATION_PENUMBRA = [
"0px 0px 0px 0px", "0px 1px 1px 0px", "0px 2px 2px 0px", "0px 3px 4px 0px", "0px 4px 5px 0px", "0px 5px 8px 0px",
"0px 6px 10px 0px", "0px 7px 10px 1px", "0px 8px 10px 1px", "0px 9px 12px 1px", "0px 10px 14px 1px",
"0px 11px 15px 1px", "0px 12px 17px 2px", "0px 13px 19px 2px", "0px 14px 21px 2px", "0px 15px 22px 2px",
"0px 16px 24px 2px", "0px 17px 26px 2px", "0px 18px 28px 2px", "0px 19px 29px 2px", "0px 20px 31px 3px",
"0px 21px 33px 3px", "0px 22px 35px 3px", "0px 23px 36px 3px", "0px 24px 38px 3px"
];
const ELEVATION_AMBIENT = [
"0px 0px 0px 0px", "0px 1px 3px 0px", "0px 1px 5px 0px", "0px 1px 8px 0px", "0px 1px 10px 0px", "0px 1px 14px 0px",
"0px 1px 18px 0px", "0px 2px 16px 1px", "0px 3px 14px 2px", "0px 3px 16px 2px", "0px 4px 18px 3px",
"0px 4px 20px 3px", "0px 5px 22px 4px", "0px 5px 24px 4px", "0px 5px 26px 4px", "0px 6px 28px 5px",
"0px 6px 30px 5px", "0px 6px 32px 5px", "0px 7px 34px 6px", "0px 7px 36px 6px", "0px 8px 38px 7px",
"0px 8px 40px 7px", "0px 8px 42px 7px", "0px 9px 44px 8px", "0px 9px 46px 8px"
];
const BORDER_RADIUS = {
none: "0",
xs: "0.125rem",
sm: "0.25rem",
md: "0.5rem",
lg: "0.75rem",
xl: "1rem",
pill: "9999px"
};
const LETTER_SPACING = {
tighter: "-0.05rem",
tight: "-0.025rem",
normal: "0",
wide: "0.025rem",
wider: "0.05rem",
widest: "0.1rem"
};
const LINE_HEIGHT = {
none: "1",
tight: "1.25",
snug: "1.375",
normal: "1.5",
relaxed: "1.625",
loose: "2"
};
const FONT_SIZES = {
xs: "0.75rem",
sm: "0.875rem",
base: "1rem",
lg: "1.125rem",
xl: "1.25rem",
"2xl": "1.5rem",
"3xl": "1.875rem",
"4xl": "2.25rem",
"5xl": "3rem",
"6xl": "3.75rem",
"7xl": "4.5rem",
"8xl": "6rem",
"9xl": "8rem",
};
const FONT_SIZE_LEADING = {
xs: "1rem",
sm: "1.25rem",
base: "1.5rem",
lg: "1.75rem",
xl: "1.75rem",
"2xl": "2rem",
"3xl": "2.25rem",
"4xl": "2.5rem",
"5xl": "1",
"6xl": "1",
"7xl": "1",
"8xl": "1",
"9xl": "1",
};
const FONT_FAMILIES = {
"sans-serif": "-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol",
serif: "Georgia, Cambria, Times New Roman, Times, serif",
monospace: "Lucida Console, Monaco, monospace"
};
const SHADOW = [
"0px 2px 4px 0px hsla(0, 0%, 20%, 0.1), 0px 6px 6px -8px hsla(0, 0%, 0%, 15%)",
"0px 2px 8px -1px hsla(0, 0%, 20%, 0.1), 0px 16px 16px -12px hsla(0, 0%, 0%, 15%)",
"0px 2px 16px -2px hsla(0, 0%, 20%, 0.1), 0px 22px 18px -16px hsla(0, 0%, 0%, 15%)",
"0px 2px 20px -3px hsla(0, 0%, 20%, 0.1), 0px 28px 22px -18px hsla(0, 0%, 0%, 15%)",
"0px 2px 32px -2px hsla(0, 0%, 20%, 0.1), 0px 32px 26px -18px hsla(0, 0%, 0%, 15%)",
"0px 2px 36px -1px hsla(0, 0%, 20%, 0.1), 0px 42px 34px -24px hsla(0, 0%, 0%, 15%)"
];
function generateRootVariables(settings) {
let vars = '--elevation-umbra: rgba(0, 0, 0, .2);--elevation-penumbra: rgba(0, 0, 0, .14);--elevation-ambient: rgba(0, 0, 0, .12);';
for (let i = 0; i < 25; i++) {
vars += `--elevation-${i}:${ELEVATION_UMBRA[i]} var(--elevation-umbra), ${ELEVATION_PENUMBRA[i]} var(--elevation-penumbra), ${ELEVATION_AMBIENT[i]} var(--elevation-ambient);`;
}
for (let i = 0; i < 6; i++) {
vars += `--shadow-${i + 1}:${SHADOW[i]};`;
}
for (const [key, value] of Object.entries(BORDER_RADIUS)) {
vars += `--border-radius-${key}:${value};`;
}
for (const [key, value] of Object.entries(LETTER_SPACING)) {
vars += `--letter-spacing-${key}:${value};`;
}
for (const [key, value] of Object.entries(LINE_HEIGHT)) {
vars += `--line-height-${key}:${value};`;
}
for (const [key, value] of Object.entries(FONT_FAMILIES)) {
vars += `--${key}:${value};`;
}
for (const [key, value] of Object.entries(FONT_SIZES)) {
vars += `--font-size-${key}:${value};`;
}
for (const [key, value] of Object.entries(FONT_SIZE_LEADING)) {
vars += `--font-size-leading-${key}:${value};`;
}
for (const bp of settings.breakpoints) {
if (bp === 'all') {
continue;
}
vars += `--breakpoint-${bp}: ${settings.media[bp]};`;
}
vars += '--unit-size:0.25rem;';
return ':root{' + vars + '}';
}
/*
* Copyright 2021 Zindex Software
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
const ESCAPE_REGEX = /\\\n/g;
const PROPERTY_REGEX$1 = /^--([a-zA-Z0-9-_]+)--(scope|mixin|register)$/;
class RootClass {
constructor() {
this.cache = new Map();
this.scopes = ["", "text-clip", "selection", "placeholder", "before", "after", "first-letter", "first-line",
"l1", "l2", "marker-l1", "marker", "sibling", "child", "even", "odd", "first", "last", "dark", "light",
"landscape", "portrait", "motion-reduce", "motion-safe"
];
this.registeredProperties = [];
const { cache } = this;
const tc = '-webkit-background-clip: text !important;-moz-background-clip:text !important;background-clip:text !important;';
cache.set("--text-clip--scope", `$selector {${tc}}`);
cache.set("--l1--scope", "$selector > * {$body}");
cache.set("--l2--scope", "$selector > * > * {$body}");
cache.set("--sibling--scope", "$selector > * + * {$body}");
cache.set("--child--scope", "$selector > $class {$body}");
cache.set("--selection--scope", "$selector::selection {$body}");
cache.set("--placeholder--scope", "$selector::placeholder {$body}");
cache.set("--marker--scope", "$selector::marker {$body}");
cache.set("--marker-l1--scope", "$selector > *::marker {$body}");
cache.set("--before--scope", "$selector::before {$body}");
cache.set("--after--scope", "$selector::after {$body}");
cache.set("--even--scope", "$selector:nth-child(even) {$body}");
cache.set("--odd--scope", "$selector:nth-child(odd) {$body}");
cache.set("--first--scope", "$selector:first-child {$body}");
cache.set("--last--scope", "$selector:last-child {$body}");
cache.set("--first-letter--scope", "$selector::first-letter {$body}");
cache.set("--first-line--scope", "$selector::first-line {$body}");
cache.set("--dark--scope", "@media(prefers-color-scheme: dark) {$selector {$body}}");
cache.set("--light--scope", "@media(prefers-color-scheme: light) {$selector {$body}}");
cache.set("--landscape--scope", "@media(orientation: landscape) {$selector {$body}}");
cache.set("--portrait--scope", "@media(orientation: portrait) {$selector {$body}}");
cache.set("--motion-reduce--scope", "@media(prefers-reduced-motion: reduce) {$selector {$body}}");
cache.set("--motion-safe--scope", "@media(prefers-reduced-motion: no-preference) {$selector {$body}}");
this.initialize();
}
initialize() {
const { cache, scopes, registeredProperties } = this;
for (const style of this.getComputedStyles()) {
for (const property of style) {
const match = PROPERTY_REGEX$1.exec(property);
if (match == null) {
continue;
}
const name = match[1];
const value = this.getValue(style, property);
cache.set(property, value);
switch (match[2]) {
case "scope":
if (scopes.indexOf(name) === -1) {
scopes.push(name);
}
break;
case "register":
if (value === 'true' || value === '') {
registeredProperties.push({ name, aliases: [] });
}
else {
const aliases = value.split(',').map(v => v.trim()).filter(v => v !== '');
registeredProperties.push({ name, aliases });
}
break;
}
}
}
}
getComputedStyles() {
const styles = [];
for (let si = 0, sl = document.styleSheets.length; si < sl; si++) {
const styleSheet = document.styleSheets[si];
if (styleSheet.href !== null && styleSheet.href.indexOf(window.location.origin) !== 0) {
continue;
}
if (styleSheet.href === null && styleSheet.ownerNode !== null
&& styleSheet.ownerNode instanceof Element && styleSheet.ownerNode.id === 'opis-assembler-css') {
continue;
}
const rule = styleSheet.cssRules[0];
if (rule.type === CSSRule.STYLE_RULE && rule.selectorText === ':root') {
styles.push(rule.style);
}
}
return styles;
}
getValue(style, property) {
let value = style.getPropertyValue(property).replace(ESCAPE_REGEX, "").trim();
if (value.startsWith('"') && value.endsWith('"')) {
value = value.substring(1, value.length - 1).trim();
}
return value;
}
getRegisteredScopes() {
return this.scopes;
}
getRegisteredProperties() {
return this.registeredProperties;
}
getPropertyValue(property) {
if (this.cache.has(property)) {
return this.cache.get(property);
}
return '';
}
}
const Root = new RootClass();
/*
* Copyright 2021 Zindex Software
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
const regex = /([a-z0-9]|(?=[A-Z]))([A-Z])/g;
const HASH_VAR_PREFIX = '--asm-';
const HASH_CLASS_PREFIX = 'asm';
const PROPERTY_REGEX = /^(?:(?<media>[a-z]{2})\|)?(?:(?<scope>[-a-zA-Z0-9]+)!)?(?<property>[-a-z]+)(?:\.(?<state>[-a-z]+))?$/m;
function getUserSettings(dataset) {
const enabled = dataset.enabled === undefined ? true : dataset.enabled === 'true';
const generate = dataset.generate === undefined ? false : dataset.generate === 'true';
const constructable = dataset.constructable === undefined ? true : dataset.constructable === 'true';
const desktopFirst = dataset.mode === undefined ? false : dataset.mode === 'desktop-first';
const selectorAttribute = dataset.selectorAttribute === undefined ? 'class' : dataset.selectorAttribute;
const cache = dataset.cache === undefined ? null : dataset.cache;
const cacheKey = dataset.cacheKey === undefined ? "assembler-css-cache" : dataset.cacheKey;
const registeredProperties = Root.getRegisteredProperties();
const scopes = Root.getRegisteredScopes();
for (let i = 0, l = registeredProperties.length; i < l; i++) {
const prop = registeredProperties[i];
if (PROPERTY_LIST.indexOf(prop.name) === -1) {
PROPERTY_LIST.push(prop.name);
}
if (prop.aliases.length > 0) {
PROPERTY_VARIANTS[prop.name] = prop.aliases;
}
}
// Consider all bp
let breakpoints = ['xs', 'sm', 'md', 'lg', 'xl'];
if (desktopFirst) {
// remove xl and reverse
breakpoints.pop();
breakpoints.reverse();
}
else {
// remove xs
breakpoints.shift();
}
// Add all
breakpoints.unshift('all');
const states = dataset.states === undefined
? ["normal", "hover"]
: getStringItemList(dataset.states.toLowerCase());
if (states.indexOf("normal") === -1) {
// always add normal state
states.unshift("normal");
}
const xs = dataset.breakpointXs || "512px";
const sm = dataset.breakpointSm || (desktopFirst ? "768px" : "512px");
const md = dataset.breakpointMd || (desktopFirst ? "1024px" : "768px");
const lg = dataset.breakpointLg || (desktopFirst ? "1280px" : "1024px");
const xl = dataset.breakpointXl || ("1280px");
const xStyleAttribute = dataset.xStyleAttribute || "x-style";
return {
enabled,
generate,
constructable,
cache,
cacheKey,
desktopFirst,
scopes,
states,
breakpoints,
media: { xs, sm, md, lg, xl },
xStyleAttribute,
selectorAttribute,
registeredProperties
};
}
function style(item) {
if (typeof item === 'string') {
return item.trim();
}
if (Array.isArray(item)) {
return item.map(style).join(';');
}
const list = [];
for (const key in item) {
const value = item[key];
if (value === undefined) {
continue;
}
const property = key.replace(regex, '$1-$2').toLowerCase();
list.push(value === null ? property : (property + ':' + value));
}
return list.join(';');
}
function getStringItemList(value, unique = true) {
const items = value
.replace(/[,;]/g, ' ')
.split(/\s\s*/g)
.map(trim)
.filter(nonEmptyString);
return unique ? items.filter(uniqueItems) : items;
}
function trim(value) {
return value.trim();
}
function nonEmptyString(value) {
return value !== '';
}
function uniqueItems(value, index, self) {
return self.indexOf(value) === index;
}
/*
* Copyright 2021 Zindex Software
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
function generateStyles(settings) {
if (settings.cache) {
const json = localStorage.getItem(settings.cacheKey + ':' + settings.cache);
if (json !== null) {
const content = JSON.parse(json);
content.tracker = new Set(content.tracker);
return content;
}
const oldCacheKey = localStorage.getItem(settings.cacheKey);
if (oldCacheKey !== null) {
localStorage.removeItem(settings.cacheKey + ':' + oldCacheKey);
}
localStorage.setItem(settings.cacheKey, settings.cache);
}
else {
const oldCacheKey = localStorage.getItem(settings.cacheKey);
if (oldCacheKey !== null) {
localStorage.removeItem(settings.cacheKey + ':' + oldCacheKey);
localStorage.removeItem(settings.cacheKey);
}
}
const base = STATE_LIST.length, result = [];
const breakpoints = settings.breakpoints;
const media_settings = settings.media;
const desktopFirst = settings.desktopFirst;
const states = settings.states;
const tracker = new Set();
const selectorAttribute = settings.selectorAttribute;
const selectorPfx = selectorAttribute === 'class'
? '.' + HASH_CLASS_PREFIX + '\\#'
: '[' + selectorAttribute + '~="' + HASH_CLASS_PREFIX + '#';
const selectorSfx = selectorAttribute === 'class' ? '' : '"]';
result.push(generateRootVariables(settings));
for (let media_index = 0, l = breakpoints.length; media_index < l; media_index++) {
const bp = breakpoints[media_index];
let str = '';
if (media_index !== 0) {
if (desktopFirst) {
str += `@media only screen and (max-width: ${media_settings[bp]}) {`;
}
else {
str += `@media only screen and (min-width: ${media_settings[bp]}) {`;
}
}
for (let name_index = 0, l = PROPERTY_LIST.length; name_index < l; name_index++) {
const name = PROPERTY_LIST[name_index];
// generate all states for default media
const stateList = media_index === 0 ? STATE_LIST : states;
for (const state of stateList) {
const state_index = STATE_LIST.indexOf(state);
if (state_index < 0) {
continue;
}
const hash = (((name_index * base) + media_index) * base + state_index).toString(16);
const property = HASH_VAR_PREFIX + (media_index > 0 ? bp + '--' : '') + name + (state_index > 0 ? '__' + stateList[state_index] : '');
tracker.add(hash);
let variants = PROPERTY_VARIANTS[name], prefix = '';
if (variants) {
for (let i = 0, l = variants.length; i < l; i++) {
prefix += `${variants[i]}:var(${property}) !important;`;
}
}
str += `${selectorPfx + hash + selectorSfx}${state_index > 0 ? ':' + state : ''}{${prefix}${name}:var(${property}) !important}`;
}
}
if (media_index !== 0) {
str += '}';
}
result.push(str);
}
const content = {
content: result.join(''),
tracker
};
if (settings.cache) {
localStorage.setItem(settings.cacheKey, settings.cache);
localStorage.setItem(settings.cacheKey + ':' + settings.cache, JSON.stringify({
content: content.content,
tracker: [...tracker]
}));
}
return content;
}
/*
* Copyright 2021 Zindex Software
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
let _documentObserver = null;
let _elementObserver = null;
let _shadowRootObserver = null;
const observedElements = new WeakMap();
function observeTree(element, handler) {
for (let e = element; e != null; e = e.nextElementSibling) {
if (!observedElements.has(e)) {
observe(e, handler);
}
else {
observeTree(e.firstElementChild, handler);
}
}
}
function observeDocument(document, handler) {
if (_documentObserver === null) {
_documentObserver = new MutationObserver(function (mutations) {
for (let i = 0, l = mutations.length; i < l; i++) {
const nodes = mutations[i].addedNodes;
for (let i = 0; i < nodes.length; i++) {
if (nodes[i] instanceof HTMLElement) {
observe(nodes[i], handler);
}
}
}
});
}
_documentObserver.observe(document, { childList: true, subtree: true });
}
function observeElement(element, handler) {
if (_elementObserver === null) {
_elementObserver = new MutationObserver(function (mutations) {
for (const mutation of mutations) {
const target = mutation.target;
observedElements.set(target, handler.handleStyleChange(target, target.getAttribute(mutation.attributeName), observedElements.get(target)));
}
});
}
_elementObserver.observe(element, {
attributes: true,
attributeOldValue: true,
childList: false,
attributeFilter: [handler.userSettings.xStyleAttribute],
});
}
function observeShadow(shadow, handler) {
if (_shadowRootObserver === null) {
_shadowRootObserver = new MutationObserver(function (mutations) {
for (let i = 0, l = mutations.length; i < l; i++) {
const nodes = mutations[i].addedNodes;
for (let i = 0; i < nodes.length; i++) {
if (nodes[i] instanceof HTMLElement) {
observe(nodes[i], handler);
}
}
}
});
}
_shadowRootObserver.observe(shadow, { childList: true, subtree: true });
}
function observe(element, handler) {
if (observedElements.has(element)) {
return;
}
const style = element.attributes.getNamedItem(handler.userSettings.xStyleAttribute);
observedElements.set(element, style ? handler.handleStyleChange(element, style.value, []) : []);
observeElement(element, handler);
for (let child = element.firstElementChild; child != null; child = child.nextElementSibling) {
observe(child, handler);
}
}
/*
* Copyright 2021 Zindex Software
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
const mixinRepository = new Map();
const MIXIN_ARGS_REGEX = /\${([0-9]+)(?:=([^}]+))?}/g;
const defaultMixinHandler = (context, name, args) => {
if (name.startsWith('.')) {
if (context.currentElement !== null) {
name = name.substring(1);
const attr = 'data-mixin-' + name;
for (let p = context.currentElement.parentElement; p != null; p = p.parentElement) {
if (p.hasAttribute(attr)) {
return p.getAttribute(attr)
.replace(MIXIN_ARGS_REGEX, (match, arg, fallback) => args[parseInt(arg)] || fallback || '');
}
}
}
return '';
}
return Root.getPropertyValue('--' + name + '--mixin')
.replace(MIXIN_ARGS_REGEX, (match, arg, fallback) => args[parseInt(arg)] || fallback || '');
};
mixinRepository.set('space-x', function (_, space, right) {
return right === 'true' ? `sibling!mr:${space || '0'}` : `sibling!ml:${space || '0'}`;
});
mixinRepository.set('space-y', function (_, space, bottom) {
return bottom === 'true' ? `sibling!mb:${space || '0'}` : `sibling!mt:${space || '0'}`;
});
mixinRepository.set('grid', function () {
return 'grid; l1!wb:break-all; l2!max-w:100%; child!justify-self:normal; child!align-self:normal';
});
mixinRepository.set('stack', function () {
return `grid; grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr);
grid-template-areas:"stackarea"; l1!grid-area:stackarea; l1!z:0; w:100%; h:100%`;
});
mixinRepository.set('sr-only', function () {
return 'absolute; w:1px; h:1px; p:0; m:-1px; bw:0; overflow:hidden; clip:rect(0, 0, 0, 0); left:-9999px';
});
mixinRepository.set('container', function (settings) {
if (settings.desktopFirst) {
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%`;
}
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`;
});
function resolveMixin(context, name, args) {
if (mixinRepository.has(name)) {
return style(mixinRepository.get(name)(context.userSettings, ...args));
}
return style(defaultMixinHandler(context, name, args));
}
function registerMixin(name, callback) {
mixinRepository.set(name, callback);
}
/*
* Copyright 2021 Zindex Software
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
const VAR_REGEX = /@([a-zA-Z0-9\-_]+)/g;
const REPLACE_REGEX = /\$(selector|body|class|value|property|state|variants|var)/g;
const SPLIT_REGEX = /;/;
const MIXIN_PREFIX = '^';
// do not match comma inside parenthesis
// 2px, linear-gradient(blue, red), inline => [2px, linear-gradient(blue, red), inline]
const COMMA_DELIMITED = /\s*,\s*(?![^(]*\))/gm;
class StyleHandler {
constructor(settings, style, tracker) {
this._currentElement = null;
this.style = style;
this.settings = settings;
this.tracker = tracker;
this.mediaSettings = settings.media;
this.desktopFirst = settings.desktopFirst;
this.breakpoints = settings.breakpoints;
this.rules = [];
this.padding = style.cssRules.length;
this.selectorAttribute = settings.selectorAttribute;
}
get userSettings() {
return this.settings;
}
get currentElement() {
return this._currentElement;
}
handleStyleChange(element, content, old) {
this._currentElement = element;
if (content === null) {
return this.handleStyleRemoved(element, old);
}
const newEntries = this.getStyleEntries(content);
const classList = element.hasAttribute(this.selectorAttribute) ? element.getAttribute(this.selectorAttribute).split(' ') : [];
const assemblerEntries = [];
// remove old entries
for (const { n: name, p: property, e: entry } of old) {
if (!newEntries.has(name)) {
const index = classList.indexOf(entry);
if (index >= 0) {
classList.splice(index, 1);
}
element.style.removeProperty(property);
}
}
for (const info of newEntries.values()) {
const { entry, property, hash, value, name } = info;
const index = classList.indexOf(entry);
if (index < 0) {
classList.push(entry);
}
if (!this.tracker.has(hash)) {
this.generateCSS(info);
}
element.style.setProperty(property, value);
assemblerEntries.push({ e: entry, n: name, p: property });
}
element.setAttribute(this.selectorAttribute, classList.join(' '));
this._currentElement = null;
return assemblerEntries;
}
handleStyleRemoved(element, old) {
this._currentElement = null;
const classList = element.hasAttribute(this.selectorAttribute) ? element.getAttribute(this.selectorAttribute).split(' ') : [];
for (const { p: property, e: entry } of old) {
const index = classList.indexOf(entry);
if (index >= 0) {
classList.splice(index, 1);
}
element.style.removeProperty(property);
}
element.setAttribute(this.selectorAttribute, classList.join(' '));
return [];
}
extract(attr, value = null) {
var _a;
const m = (_a = PROPERTY_REGEX.exec(attr)) === null || _a === void 0 ? void 0 : _a.groups;
if (!m || !m.property) {
return [];
}
const MEDIA_LIST = this.breakpoints;
const media = MEDIA_LIST.indexOf(m.media || 'all');
const state = STATE_LIST.indexOf(m.state || 'normal');
if (media < 0 || state < 0) {
return [];
}
let properties = m.property;
const original = properties;
const scopes = this.settings.scopes;
if (ALIASES.hasOwnProperty(properties)) {
properties = ALIASES[properties];
if (typeof properties === 'function') {
properties = properties(value);
}
}
if (!Array.isArray(properties)) {
properties = [properties];
}
if (value === null) {
value = DEFAULT_VALUES[original] || '';
}
if (VALUE_WRAPPER.hasOwnProperty(original)) {
value = VALUE_WRAPPER[original](value, original, media, state, this);
}
if (!Array.isArray(value)) {
value = Array(properties.length).fill(value.replace(VAR_REGEX, "var(--$1)"));
}
else {
value = value.map(value => value.replace(VAR_REGEX, "var(--$1)"));
}
const result = [];
const base = STATE_LIST.length;
let index = -1;
for (const property of properties) {
index++;
const name = PROPERTY_LIST.indexOf(property);
if (name < 0) {
continue;
}
const scope = m.scope || '';
const rank = ((name * base) + media) * base + state;
const hash = rank.toString(16) + (scope ? `-${scope}` : '');
const scopeRank = scopes.indexOf(scope) * 100000;
const internalProperty = (m.media ? m.media + '--' : '') + (scope ? scope + '__' : '') + property + (m.state ? '__' + m.state : '');
result.push({
name: (m.media ? m.media + '|' : '') + (scope ? scope + '!' : '') + property + (m.state ? '.' + m.state : ''),
//property: HASH_VAR_PREFIX + hash,
property: HASH_VAR_PREFIX + internalProperty,
entry: HASH_CLASS_PREFIX + '#' + hash,
value: value[index],
media: m.media || '',
state: m.state || '',
cssProperty: property,
hash,
scope,
rank: scopeRank < 0 ? -1 : rank + scopeRank,
});
}
return result;
}
getStyleEntries(content) {
const entries = new Map();
for (let name of this.getResolvedProperties(content)) {
let value = null;
const pos = name.indexOf(':');
if (pos >= 0) {
value = name.substr(pos + 1);
name = name.substr(0, pos).trim();
}
for (const info of this.extract(name, value)) {
entries.set(info.name, info);
}
}
return entries;
}
getResolvedProperties(content, stack = []) {
const entries = [];
for (let name of content.split(SPLIT_REGEX)) {
name = name.trim();
if (name === '') {
continue;
}
// extract mixin
if (name.startsWith(MIXIN_PREFIX)) {
const pos = name.indexOf(':');
let mixin, args;
if (pos < 0) {
mixin = name.substr(1);
args = [];
}
else {
mixin = name.substr(1, pos - 1);
args = name.substr(pos + 1).split(COMMA_DELIMITED).map(trim);
}
if (stack.indexOf(mixin) >= 0) {
stack.push(mixin);
throw new Error('Recursive mixin detected: ' + stack.join('->'));
}
stack.push(mixin);
entries.push(...this.getResolvedProperties(resolveMixin(this, mixin, args), stack));
stack.pop();
continue;
}
entries.push(name);
}
return entries;
}
generateCSS(info) {
const { tracker, mediaSettings, desktopFirst, style } = this;
const { hash, media, state, cssProperty, property, scope, rank } = info;
const hasMedia = media !== '';
const selectorAttribute = this.settings.selectorAttribute;
const selectorPfx = selectorAttribute === 'class'
? '.' + HASH_CLASS_PREFIX + '\\#'
: '[' + selectorAttribute + '~="' + HASH_CLASS_PREFIX + '#';
const selectorSfx = selectorAttribute === 'class' ? '' : '"]';
tracker.add(hash);
if (rank < 0) {
return;
}
let rule = '';
if (hasMedia) {
if (desktopFirst) {
rule += `@media only screen and (max-width: ${mediaSettings[media]}) {`;
}
else {
rule += `@media only screen and (min-width: ${mediaSettings[media]}) {`;
}
}
let variants = PROPERTY_VARIANTS[cssProperty], prefix = '';
if (variants) {
for (let i = 0, l = variants.length; i < l; i++) {
prefix += `${variants[i]}:var(${property}) !important;`;
}
}
if (scope) {
const scopeValue = Root.getPropertyValue('--' + scope + '--scope');
if (scopeValue === '') {
return;
}
rule += scopeValue.replace(REPLACE_REGEX, (match, p1) => {
switch (p1) {
case "selector":
return `${selectorPfx + hash + selectorSfx}${state ? ':' + state : ''}`;
case "body":
return prefix + cssProperty + ': var(' + property + ') !important';
case "variants":
return prefix;
case "property":
return cssProperty;
case "value":
return `var(${property})`;
case "class":
return selectorPfx + hash + selectorSfx;
case "state":
return state ? ':' + state : '';
case "var":
return property;
}
return p1;
});
}
else {
rule += `${selectorPfx + hash + selectorSfx}${state ? ':' + state : ''}{${prefix}${cssProperty}: var(${property}) !important}`;
}
if (hasMedia) {
rule += '}';
}
const ruleIndex = this.getRuleIndex(rank);
this.rules.splice(ruleIndex, 0, rank);
try {
style.insertRule(rule, this.padding + ruleIndex);
}
catch (_a) {
this.rules.splice(ruleIndex, 1);
console.warn("Unsupported rule:", rule);
}
}
getRuleIndex(rank) {
const { rules } = this;
for (let i = 0, l = rules.length; i < l; i++) {
if (rank < rules[i]) {
return i;
}
}
return rules.length;
}
}
/*
* Copyright 2021 Zindex Software
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
let styleHandler = null;
let supportsConstructable = true;
let supportsAdoptingStyleSheets = true;
let settings = null;
const observedShadowRoots = new WeakMap();
function init(options) {
supportsAdoptingStyleSheets = window.ShadowRoot &&
(window.ShadyCSS === undefined || window.ShadyCSS.nativeShadow) &&
'adoptedStyleSheets' in Document.prototype &&
'replace' in CSSStyleSheet.prototype;
settings = getUserSettings(options || document.currentScript.dataset);
if (!settings.enabled) {
return false;
}
let tracker;
let stylesheet;
if (supportsAdoptingStyleSheets && settings.constructable) {
stylesheet = new CSSStyleSheet();
if (settings.generate) {
const generated = generateStyles(settings);
tracker = generated.tracker;
stylesheet.replaceSync(generated.content);
}
else {
tracker = new Set();
stylesheet.replaceSync(generateRootVariables(settings));
}
document.adoptedStyleSheets = [...document.adoptedStyleSheets, stylesheet];
}
else {
supportsConstructable = false;
const style = document.createElement("style");
const generated = generateStyles(settings);
tracker = generated.tracker;
style.id = 'opis-assembler-css';
style.textContent = generated.content;
document.currentScript.parentElement.insertBefore(style, document.currentScript);
stylesheet = style.sheet;
}
styleHandler = new StyleHandler(settings, stylesheet, tracker);
observeDocument(document, styleHandler);
if (window) {
window.addEventListener('DOMContentLoaded', function () {
observeTree(document.body, styleHandler);
});
}
return true;
}
function handleShadowRoot(shadowRoot, add = true) {
if (styleHandler === null) {
init();
}
if (!supportsAdoptingStyleSheets || !supportsConstructable) {
return false;
}
if (observedShadowRoots.has(shadowRoot)) {
return true;
}
observedShadowRoots.set(shadowRoot, true);
if (add) {
shadowRoot.adoptedStyleSheets = [...shadowRoot.adoptedStyleSheets, styleHandler.style];
}
observeShadow(shadowRoot, styleHandler);
return true;
}
function cssStyleSheet() {
if (styleHandler === null) {
init();
}
return styleHandler.style;
}
export { cssStyleSheet, handleShadowRoot, init, registerMixin, style };
================================================
FILE: dist/assembler.js
================================================
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
typeof define === 'function' && define.amd ? define(['exports'], factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.AssemblerCSS = {}));
})(this, (function (exports) { 'use strict';
/*
* Copyright 2021 Zindex Software
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
const positive_number_regex = /^[0-9]+(\.5)?$/;
const number_regex = /^-?[0-9]+(\.5)?$/;
const font_size_regex = /^(xs|sm|base|lg|([2-9])?xl)$/;
const line_height_regex = /^(none|tight|snug|normal|relaxed|loose)$/;
const elevation_regex = /^[0-9]|1[0-9]|2[0-4]$/;
const shadow_regex = /^[1-6]$/;
const letter_spacing_regex = /^(tighter|tight|normal|wide|wider|widest)$/;
const radius_regex = /^(xs|sm|md|lg|xl|pill)$/;
const order_regex = /^(first|last|none)$/;
// do not match comma inside parenthesis
// 2px, linear-gradient(blue, red), inline => [2px, linear-gradient(blue, red), inline]
const args_delimiter = /\s*,\s*(?![^(]*\))/gm;
const PROPERTY_LIST = [
"align-content",
"align-items",
"align-self",
"animation",
"appearance",
"backdrop-filter",
"background",
"background-attachment",
"background-blend-mode",
"background-clip",
"background-color",
"background-image",
"background-position",
"background-repeat",
"background-size",
"backface-visibility",
"border",
"border-bottom",
"border-bottom-color",
"border-bottom-style",
"border-bottom-width",
"border-bottom-left-radius",
"border-bottom-right-radius",
"border-collapse",
"border-color",
"border-left",
"border-left-color",
"border-left-style",
"border-left-width",
"border-radius",
"border-right",
"border-right-color",
"border-right-style",
"border-right-width",
"border-style",
"border-top",
"border-top-color",
"border-top-style",
"border-top-width",
"border-top-left-radius",
"border-top-right-radius",
"border-width",
"bottom",
"box-orient",
"box-shadow",
"box-sizing",
"clear",
"clip",
"clip-path",
"color",
"column-gap",
"content",
"cursor",
"display",
"filter",
"flex",
"flex-basis",
"flex-direction",
"flex-flow",
"flex-grow",
"flex-shrink",
"flex-wrap",
"float",
"font-family",
"font-size",
"font-style",
"font-weight",
"font-variant-numeric",
"gap",
"grid",
"grid-area",
"grid-auto-columns",
"grid-auto-flow",
"grid-auto-rows",
"grid-column",
"grid-column-end",
"grid-column-start",
"grid-row",
"grid-row-end",
"grid-row-start",
"grid-template",
"grid-template-areas",
"grid-template-columns",
"grid-template-rows",
"height",
"isolation",
"justify-content",
"justify-items",
"justify-self",
"left",
"letter-spacing",
"line-break",
"line-clamp",
"line-height",
"list-style-position",
"list-style-type",
"margin",
"margin-bottom",
"margin-left",
"margin-right",
"margin-top",
"max-height",
"max-width",
"min-height",
"min-width",
"object-fit",
"object-position",
"opacity",
"order",
"outline",
"outline-offset",
"overflow",
"overflow-wrap",
"overflow-x",
"overflow-y",
"overscroll-behavior",
"overscroll-behavior-x",
"overscroll-behavior-y",
"padding",
"padding-bottom",
"padding-left",
"padding-right",
"padding-top",
"perspective",
"perspective-origin",
"place-content",
"place-items",
"place-self",
"pointer-events",
"position",
"resize",
"right",
"row-gap",
"table-layout",
"text-align",
"text-decoration",
"text-decoration-style",
"text-fill-color",
"text-overflow",
"text-shadow",
"text-transform",
"top",
"transform",
"transform-box",
"transform-origin",
"transform-style",
"transition",
"user-select",
"vertical-align",
"visibility",
"white-space",
"width",
"word-break",
"z-index",
];
const PROPERTY_VARIANTS = {
"animation": ["-webkit-animation"],
"appearance": ["-webkit-appearance", "-moz-appearance"],
"background-clip": ["-webkit-background-clip", "-moz-background-clip"],
"backdrop-filter": ["-webkit-backdrop-filter"],
"box-orient": ["-webkit-box-orient"],
"clip-path": ["-webkit-clip-path"],
"column-gap": ["-moz-column-gap"],
"line-clamp": ["-webkit-line-clamp"],
"user-select": ["-webkit-user-select", "-moz-user-select"],
"text-fill-color": ["-webkit-text-fill-color", "-moz-text-fill-color"]
};
const STATE_LIST = [
"normal",
"link",
"visited",
"empty",
"placeholder-shown",
"default",
"checked",
"indeterminate",
"valid",
"invalid",
"required",
"optional",
"out-of-range",
"in-range",
"hover",
"focus",
"focus-within",
"focus-visible",
"active",
"read-only",
"read-write",
"disabled",
"enabled",
];
const ALIASES = {
"backdrop": "backdrop-filter",
"bg": "background",
"bg-attachment": "background-attachment",
"bg-blend": "background-blend-mode",
"bg-clip": "background-clip",
"bg-color": "background-color",
"bg-image": "background-image",
"bg-position": "background-position",
"bg-repeat": "background-repeat",
"bg-size": "background-size",
"radius": "border-radius",
"radius-top": ["border-top-left-radius", "border-top-right-radius"],
"radius-bottom": ["border-bottom-left-radius", "border-bottom-right-radius"],
"radius-left": ["border-bottom-left-radius", "border-top-left-radius"],
"radius-right": ["border-bottom-right-radius", "border-top-right-radius"],
"radius-bl": "border-bottom-left-radius",
"radius-br": "border-bottom-right-radius",
"radius-tl": "border-top-left-radius",
"radius-tr": "border-top-right-radius",
"b": "border",
"bc": "border-color",
"bs": "border-style",
"bw": "border-width",
"bt": "border-top",
"bl": "border-left",
"br": "border-right",
"bb": "border-bottom",
"bt-color": "border-top-color",
"bt-style": "border-top-style",
"bt-width": "border-top-width",
"bl-color": "border-left-color",
"bl-style": "border-left-style",
"bl-width": "border-left-width",
"br-color": "border-right-color",
"br-style": "border-right-style",
"br-width": "border-right-width",
"bb-color": "border-bottom-color",
"bb-style": "border-bottom-style",
"bb-width": "border-bottom-width",
"m": "margin",
"mt": "margin-top",
"mb": "margin-bottom",
"ml": "margin-left",
"mr": "margin-right",
"mx": ["margin-left", "margin-right"],
"my": ["margin-top", "margin-bottom"],
"p": "padding",
"pt": "padding-top",
"pb": "padding-bottom",
"pl": "padding-left",
"pr": "padding-right",
"px": ["padding-left", "padding-right"],
"py": ["padding-top", "padding-bottom"],
"min-w": "min-width",
"max-w": "max-width",
"min-h": "min-height",
"max-h": "max-height",
"w": "width",
"h": "height",
"img": "background-image",
"gradient": "background-image",
"radial-gradient": "background-image",
"conic-gradient": "background-image",
"flex-dir": "flex-direction",
"col-reverse": "flex-direction",
"row-reverse": "flex-direction",
"grid-rows": "grid-template-rows",
"grid-flow": "grid-auto-flow",
"row-start": "grid-row-start",
"row-span": "grid-row-end",
"grid-cols": "grid-template-columns",
"col-start": "grid-column-start",
"col-span": "grid-column-end",
"col-gap": "column-gap",
"auto-cols": "grid-auto-columns",
"auto-rows": "grid-auto-rows",
"e": "box-shadow",
"shadow": "box-shadow",
"overscroll": "overscroll-behavior",
"overscroll-x": "overscroll-behavior-x",
"overscroll-y": "overscroll-behavior-y",
"inset": ["top", "bottom", "left", "right"],
"inset-x": ["left", "right"],
"inset-y": ["top", "bottom"],
"z": "z-index",
"decoration": "text-decoration",
"v-align": "vertical-align",
"ws": "white-space",
"ring": "box-shadow",
"leading": "line-height",
"tracking": "letter-spacing",
"break": v => {
if (v === "words")
return ["overflow-wrap"];
if (v === "all")
return ["word-break"];
return ["overflow-wrap", "word-break"];
},
"truncate": ["overflow", "text-overflow", "white-space"],
"flex": v => v ? "flex" : "display",
"inline-flex": "display",
"grid": "display",
"inline-grid": "display",
"hidden": "display",
"block": "display",
"inline-block": "display",
"static": "position",
"fixed": "position",
"absolute": "position",
"relative": "position",
"sticky": "position",
"visible": "visibility",
"invisible": "visibility",
"flex-row": "flex-direction",
"flex-col": "flex-direction",
"list": v => {
if (v === "inside" || v === "outside") {
return "list-style-position";
}
return "list-style-type";
},
"text": v => font_size_regex.test(v) ? ["font-size", "line-height"] : "font-size",
"uppercase": "text-transform",
"lowercase": "text-transform",
"capitalize": "text-transform",
"normal-case": "text-transform",
"variant": "font-variant-numeric",
"wave-clip": "clip-path",
};
const DEFAULT_VALUES = {
"border": ["1px solid transparent"],
"truncate": ["hidden", "ellipsis", "nowrap"],
"flex": "flex",
"inline-flex": "inline-flex",
"grid": "grid",
"inline-grid": "inline-grid",
"hidden": "none",
"block": "block",
"inline-block": "inline-block",
"static": "static",
"fixed": "fixed",
"absolute": "absolute",
"relative": "relative",
"sticky": "sticky",
"visible": "visible",
"invisible": "hidden",
"flex-row": "row",
"flex-col": "column",
"flex-wrap": "wrap",
"flex-grow": "1",
"flex-shrink": "1",
"col-reverse": "column-reverse",
"row-reverse": "row-reverse",
"uppercase": "uppercase",
"lowercase": "lowercase",
"capitalize": "capitalize",
"normal-case": "none",
"radius": "sm",
"shadow": "1",
"wave-clip": "50, 2, 50"
};
const unit = v => number_regex.test(v) ? `calc(${v} * @unit-size)` : v;
const positive_unit = v => positive_number_regex.test(v) ? `calc(${v} * @unit-size)` : v;
const grid_repeat = v => `repeat(${v}, minmax(0, 1fr))`;
const grid_rowspan = v => `span ${v}`;
const elevation = v => elevation_regex.test(v) ? `@elevation-${v}` : v;
const ring = v => `0 0 0 ${v}`;
const fontSize = v => font_size_regex.test(v) ? "@font-size-" + v : v;
const lineHeight = v => {
if (positive_number_regex.test(v)) {
return `calc(${v} * @unit-size)`;
}
return line_height_regex.test(v) ? "@line-height-" + v : v;
};
const letterSpacing = v => letter_spacing_regex.test(v) ? "@letter-spacing-" + v : v;
const radius = v => radius_regex.test(v) ? "@border-radius-" + v : v;
const breakCallback = v => {
if (v === "all")
return "break-all";
if (v === "words")
return "break-word";
return ["normal", "normal"];
};
const orderCallback = v => {
if (!order_regex.test(v)) {
return v;
}
if (v === "first")
return "-9999";
if (v === "last")
return "9999";
return "0";
};
const waveClipIds = new Set();
const generateWave = (value, original, media, state, handler) => {
const args = value.split(args_delimiter).map(v => v.trim()).map(v => parseInt(v));
let [amplitude, frequency, segments] = args;
amplitude = amplitude !== null && amplitude !== void 0 ? amplitude : 50;
frequency = frequency !== null && frequency !== void 0 ? frequency : 2;
segments = segments !== null && segments !== void 0 ? segments : 50;
const id = amplitude + '-' + frequency + '-' + segments;
if (waveClipIds.has(id)) {
return '@wave-clip-' + id;
}
waveClipIds.add(id);
const precision = segments * frequency;
const units = Math.PI * 2 * frequency;
const factor = precision / 100;
amplitude /= 2;
let polygon = 'polygon(100% 0%, 0% 0%';
for (let i = 0; i <= precision; i++) {
const val = Math.abs((amplitude * Math.cos((i / precision) * units) - amplitude)).toFixed(2);
polygon += ', ' + (i / factor) + '% calc(100% - ' + val + 'px)';
}
polygon += ')';
handler.style.cssRules[0].style.setProperty('--wave-clip-' + id, polygon);
return '@wave-clip-' + id;
};
const VALUE_WRAPPER = {
"img": v => `url(${v})`,
"gradient": (value) => `linear-gradient(${value})`,
"radial-gradient": (value) => `radial-gradient(${value})`,
"conic-gradient": (value) => `conic-gradient(${value})`,
"grid-rows": grid_repeat,
"row-span": grid_rowspan,
"grid-cols": grid_repeat,
"col-span": grid_rowspan,
"e": elevation,
"shadow": v => shadow_regex.test(v) ? `@shadow-${v}` : v,
"ring": ring,
"font-size": fontSize,
"leading": lineHeight,
"tracking": letterSpacing,
"text": v => font_size_regex.test(v) ? ["@font-size-" + v, "@font-size-leading-" + v] : v,
"radius": radius,
"radius-top": radius,
"radius-left": radius,
"radius-bottom": radius,
"radius-right": radius,
"radius-tl": radius,
"radius-bl": radius,
"radius-tr": radius,
"radius-br": radius,
"border-radius": radius,
"break": breakCallback,
"flex-wrap": (v) => v === "reverse" ? "wrap-reverse" : v,
"flex-row": v => v === "reverse" ? "row-reverse" : v,
"flex-col": v => v === "reverse" ? "column-reverse" : v,
"order": orderCallback,
"padding": positive_unit,
"padding-top": positive_unit,
"padding-bottom": positive_unit,
"padding-left": positive_unit,
"padding-right": positive_unit,
"p": positive_unit,
"pt": positive_unit,
"pb": positive_unit,
"pl": positive_unit,
"pr": positive_unit,
"px": positive_unit,
"py": positive_unit,
"margin": unit,
"margin-top": unit,
"margin-bottom": unit,
"margin-left": unit,
"margin-right": unit,
"m": unit,
"mt": unit,
"mb": unit,
"ml": unit,
"mr": unit,
"mx": unit,
"my": unit,
"w": positive_unit,
"h": positive_unit,
"width": positive_unit,
"height": positive_unit,
"min-w": positive_unit,
"max-w": positive_unit,
"min-h": positive_unit,
"max-h": positive_unit,
"min-width": positive_unit,
"max-width": positive_unit,
"min-height": positive_unit,
"max-height": positive_unit,
"wave-clip": generateWave,
};
/*
* Copyright 2021 Zindex Software
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
const ELEVATION_UMBRA = [
"0px 0px 0px 0px", "0px 2px 1px -1px", "0px 3px 1px -2px", "0px 3px 3px -2px", "0px 2px 4px -1px",
"0px 3px 5px -1px", "0px 3px 5px -1px", "0px 4px 5px -2px", "0px 5px 5px -3px", "0px 5px 6px -3px",
"0px 6px 6px -3px", "0px 6px 7px -4px", "0px 7px 8px -4px", "0px 7px 8px -4px", "0px 7px 9px -4px",
"0px 8px 9px -5px", "0px 8px 10px -5px", "0px 8px 11px -5px", "0px 9px 11px -5px", "0px 9px 12px -6px",
"0px 10px 13px -6px", "0px 10px 13px -6px", "0px 10px 14px -6px", "0px 11px 14px -7px", "0px 11px 15px -7px"
];
const ELEVATION_PENUMBRA = [
"0px 0px 0px 0px", "0px 1px 1px 0px", "0px 2px 2px 0px", "0px 3px 4px 0px", "0px 4px 5px 0px", "0px 5px 8px 0px",
"0px 6px 10px 0px", "0px 7px 10px 1px", "0px 8px 10px 1px", "0px 9px 12px 1px", "0px 10px 14px 1px",
"0px 11px 15px 1px", "0px 12px 17px 2px", "0px 13px 19px 2px", "0px 14px 21px 2px", "0px 15px 22px 2px",
"0px 16px 24px 2px", "0px 17px 26px 2px", "0px 18px 28px 2px", "0px 19px 29px 2px", "0px 20px 31px 3px",
"0px 21px 33px 3px", "0px 22px 35px 3px", "0px 23px 36px 3px", "0px 24px 38px 3px"
];
const ELEVATION_AMBIENT = [
"0px 0px 0px 0px", "0px 1px 3px 0px", "0px 1px 5px 0px", "0px 1px 8px 0px", "0px 1px 10px 0px", "0px 1px 14px 0px",
"0px 1px 18px 0px", "0px 2px 16px 1px", "0px 3px 14px 2px", "0px 3px 16px 2px", "0px 4px 18px 3px",
"0px 4px 20px 3px", "0px 5px 22px 4px", "0px 5px 24px 4px", "0px 5px 26px 4px", "0px 6px 28px 5px",
"0px 6px 30px 5px", "0px 6px 32px 5px", "0px 7px 34px 6px", "0px 7px 36px 6px", "0px 8px 38px 7px",
"0px 8px 40px 7px", "0px 8px 42px 7px", "0px 9px 44px 8px", "0px 9px 46px 8px"
];
const BORDER_RADIUS = {
none: "0",
xs: "0.125rem",
sm: "0.25rem",
md: "0.5rem",
lg: "0.75rem",
xl: "1rem",
pill: "9999px"
};
const LETTER_SPACING = {
tighter: "-0.05rem",
tight: "-0.025rem",
normal: "0",
wide: "0.025rem",
wider: "0.05rem",
widest: "0.1rem"
};
const LINE_HEIGHT = {
none: "1",
tight: "1.25",
snug: "1.375",
normal: "1.5",
relaxed: "1.625",
loose: "2"
};
const FONT_SIZES = {
xs: "0.75rem",
sm: "0.875rem",
base: "1rem",
lg: "1.125rem",
xl: "1.25rem",
"2xl": "1.5rem",
"3xl": "1.875rem",
"4xl": "2.25rem",
"5xl": "3rem",
"6xl": "3.75rem",
"7xl": "4.5rem",
"8xl": "6rem",
"9xl": "8rem",
};
const FONT_SIZE_LEADING = {
xs: "1rem",
sm: "1.25rem",
base: "1.5rem",
lg: "1.75rem",
xl: "1.75rem",
"2xl": "2rem",
"3xl": "2.25rem",
"4xl": "2.5rem",
"5xl": "1",
"6xl": "1",
"7xl": "1",
"8xl": "1",
"9xl": "1",
};
const FONT_FAMILIES = {
"sans-serif": "-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol",
serif: "Georgia, Cambria, Times New Roman, Times, serif",
monospace: "Lucida Console, Monaco, monospace"
};
const SHADOW = [
"0px 2px 4px 0px hsla(0, 0%, 20%, 0.1), 0px 6px 6px -8px hsla(0, 0%, 0%, 15%)",
"0px 2px 8px -1px hsla(0, 0%, 20%, 0.1), 0px 16px 16px -12px hsla(0, 0%, 0%, 15%)",
"0px 2px 16px -2px hsla(0, 0%, 20%, 0.1), 0px 22px 18px -16px hsla(0, 0%, 0%, 15%)",
"0px 2px 20px -3px hsla(0, 0%, 20%, 0.1), 0px 28px 22px -18px hsla(0, 0%, 0%, 15%)",
"0px 2px 32px -2px hsla(0, 0%, 20%, 0.1), 0px 32px 26px -18px hsla(0, 0%, 0%, 15%)",
"0px 2px 36px -1px hsla(0, 0%, 20%, 0.1), 0px 42px 34px -24px hsla(0, 0%, 0%, 15%)"
];
function generateRootVariables(settings) {
let vars = '--elevation-umbra: rgba(0, 0, 0, .2);--elevation-penumbra: rgba(0, 0, 0, .14);--elevation-ambient: rgba(0, 0, 0, .12);';
for (let i = 0; i < 25; i++) {
vars += `--elevation-${i}:${ELEVATION_UMBRA[i]} var(--elevation-umbra), ${ELEVATION_PENUMBRA[i]} var(--elevation-penumbra), ${ELEVATION_AMBIENT[i]} var(--elevation-ambient);`;
}
for (let i = 0; i < 6; i++) {
vars += `--shadow-${i + 1}:${SHADOW[i]};`;
}
for (const [key, value] of Object.entries(BORDER_RADIUS)) {
vars += `--border-radius-${key}:${value};`;
}
for (const [key, value] of Object.entries(LETTER_SPACING)) {
vars += `--letter-spacing-${key}:${value};`;
}
for (const [key, value] of Object.entries(LINE_HEIGHT)) {
vars += `--line-height-${key}:${value};`;
}
for (const [key, value] of Object.entries(FONT_FAMILIES)) {
vars += `--${key}:${value};`;
}
for (const [key, value] of Object.entries(FONT_SIZES)) {
vars += `--font-size-${key}:${value};`;
}
for (const [key, value] of Object.entries(FONT_SIZE_LEADING)) {
vars += `--font-size-leading-${key}:${value};`;
}
for (const bp of settings.breakpoints) {
if (bp === 'all') {
continue;
}
vars += `--breakpoint-${bp}: ${settings.media[bp]};`;
}
vars += '--unit-size:0.25rem;';
return ':root{' + vars + '}';
}
/*
* Copyright 2021 Zindex Software
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
const ESCAPE_REGEX = /\\\n/g;
const PROPERTY_REGEX$1 = /^--([a-zA-Z0-9-_]+)--(scope|mixin|register)$/;
class RootClass {
constructor() {
this.cache = new Map();
this.scopes = ["", "text-clip", "selection", "placeholder", "before", "after", "first-letter", "first-line",
"l1", "l2", "marker-l1", "marker", "sibling", "child", "even", "odd", "first", "last", "dark", "light",
"landscape", "portrait", "motion-reduce", "motion-safe"
];
this.registeredProperties = [];
const { cache } = this;
const tc = '-webkit-background-clip: text !important;-moz-background-clip:text !important;background-clip:text !important;';
cache.set("--text-clip--scope", `$selector {${tc}}`);
cache.set("--l1--scope", "$selector > * {$body}");
cache.set("--l2--scope", "$selector > * > * {$body}");
cache.set("--sibling--scope", "$selector > * + * {$body}");
cache.set("--child--scope", "$selector > $class {$body}");
cache.set("--selection--scope", "$selector::selection {$body}");
cache.set("--placeholder--scope", "$selector::placeholder {$body}");
cache.set("--marker--scope", "$selector::marker {$body}");
cache.set("--marker-l1--scope", "$selector > *::marker {$body}");
cache.set("--before--scope", "$selector::before {$body}");
cache.set("--after--scope", "$selector::after {$body}");
cache.set("--even--scope", "$selector:nth-child(even) {$body}");
cache.set("--odd--scope", "$selector:nth-child(odd) {$body}");
cache.set("--first--scope", "$selector:first-child {$body}");
cache.set("--last--scope", "$selector:last-child {$body}");
cache.set("--first-letter--scope", "$selector::first-letter {$body}");
cache.set("--first-line--scope", "$selector::first-line {$body}");
cache.set("--dark--scope", "@media(prefers-color-scheme: dark) {$selector {$body}}");
cache.set("--light--scope", "@media(prefers-color-scheme: light) {$selector {$body}}");
cache.set("--landscape--scope", "@media(orientation: landscape) {$selector {$body}}");
cache.set("--portrait--scope", "@media(orientation: portrait) {$selector {$body}}");
cache.set("--motion-reduce--scope", "@media(prefers-reduced-motion: reduce) {$selector {$body}}");
cache.set("--motion-safe--scope", "@media(prefers-reduced-motion: no-preference) {$selector {$body}}");
this.initialize();
}
initialize() {
const { cache, scopes, registeredProperties } = this;
for (const style of this.getComputedStyles()) {
for (const property of style) {
const match = PROPERTY_REGEX$1.exec(property);
if (match == null) {
continue;
}
const name = match[1];
const value = this.getValue(style, property);
cache.set(property, value);
switch (match[2]) {
case "scope":
if (scopes.indexOf(name) === -1) {
scopes.push(name);
}
break;
case "register":
if (value === 'true' || value === '') {
registeredProperties.push({ name, aliases: [] });
}
else {
const aliases = value.split(',').map(v => v.trim()).filter(v => v !== '');
registeredProperties.push({ name, aliases });
}
break;
}
}
}
}
getComputedStyles() {
const styles = [];
for (let si = 0, sl = document.styleSheets.length; si < sl; si++) {
const styleSheet = document.styleSheets[si];
if (styleSheet.href !== null && styleSheet.href.indexOf(window.location.origin) !== 0) {
continue;
}
if (styleSheet.href === null && styleSheet.ownerNode !== null
&& styleSheet.ownerNode instanceof Element && styleSheet.ownerNode.id === 'opis-assembler-css') {
continue;
}
const rule = styleSheet.cssRules[0];
if (rule.type === CSSRule.STYLE_RULE && rule.selectorText === ':root') {
styles.push(rule.style);
}
}
return styles;
}
getValue(style, property) {
let value = style.getPropertyValue(property).replace(ESCAPE_REGEX, "").trim();
if (value.startsWith('"') && value.endsWith('"')) {
value = value.substring(1, value.length - 1).trim();
}
return value;
}
getRegisteredScopes() {
return this.scopes;
}
getRegisteredProperties() {
return this.registeredProperties;
}
getPropertyValue(property) {
if (this.cache.has(property)) {
return this.cache.get(property);
}
return '';
}
}
const Root = new RootClass();
/*
* Copyright 2021 Zindex Software
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
const regex = /([a-z0-9]|(?=[A-Z]))([A-Z])/g;
const HASH_VAR_PREFIX = '--asm-';
const HASH_CLASS_PREFIX = 'asm';
const PROPERTY_REGEX = /^(?:(?<media>[a-z]{2})\|)?(?:(?<scope>[-a-zA-Z0-9]+)!)?(?<property>[-a-z]+)(?:\.(?<state>[-a-z]+))?$/m;
function getUserSettings(dataset) {
const enabled = dataset.enabled === undefined ? true : dataset.enabled === 'true';
const generate = dataset.generate === undefined ? false : dataset.generate === 'true';
const constructable = dataset.constructable === undefined ? true : dataset.constructable === 'true';
const desktopFirst = dataset.mode === undefined ? false : dataset.mode === 'desktop-first';
const selectorAttribute = dataset.selectorAttribute === undefined ? 'class' : dataset.selectorAttribute;
const cache = dataset.cache === undefined ? null : dataset.cache;
const cacheKey = dataset.cacheKey === undefined ? "assembler-css-cache" : dataset.cacheKey;
const registeredProperties = Root.getRegisteredProperties();
const scopes = Root.getRegisteredScopes();
for (let i = 0, l = registeredProperties.length; i < l; i++) {
const prop = registeredProperties[i];
if (PROPERTY_LIST.indexOf(prop.name) === -1) {
PROPERTY_LIST.push(prop.name);
}
if (prop.aliases.length > 0) {
PROPERTY_VARIANTS[prop.name] = prop.aliases;
}
}
// Consider all bp
let breakpoints = ['xs', 'sm', 'md', 'lg', 'xl'];
if (desktopFirst) {
// remove xl and reverse
breakpoints.pop();
breakpoints.reverse();
}
else {
// remove xs
breakpoints.shift();
}
// Add all
breakpoints.unshift('all');
const states = dataset.states === undefined
? ["normal", "hover"]
: getStringItemList(dataset.states.toLowerCase());
if (states.indexOf("normal") === -1) {
// always add normal state
states.unshift("normal");
}
const xs = dataset.breakpointXs || "512px";
const sm = dataset.breakpointSm || (desktopFirst ? "768px" : "512px");
const md = dataset.breakpointMd || (desktopFirst ? "1024px" : "768px");
const lg = dataset.breakpointLg || (desktopFirst ? "1280px" : "1024px");
const xl = dataset.breakpointXl || ("1280px");
const xStyleAttribute = dataset.xStyleAttribute || "x-style";
return {
enabled,
generate,
constructable,
cache,
cacheKey,
desktopFirst,
scopes,
states,
breakpoints,
media: { xs, sm, md, lg, xl },
xStyleAttribute,
selectorAttribute,
registeredProperties
};
}
function style(item) {
if (typeof item === 'string') {
return item.trim();
}
if (Array.isArray(item)) {
return item.map(style).join(';');
}
const list = [];
for (const key in item) {
const value = item[key];
if (value === undefined) {
continue;
}
const property = key.replace(regex, '$1-$2').toLowerCase();
list.push(value === null ? property : (property + ':' + value));
}
return list.join(';');
}
function getStringItemList(value, unique = true) {
const items = value
.replace(/[,;]/g, ' ')
.split(/\s\s*/g)
.map(trim)
.filter(nonEmptyString);
return unique ? items.filter(uniqueItems) : items;
}
function trim(value) {
return value.trim();
}
function nonEmptyString(value) {
return value !== '';
}
function uniqueItems(value, index, self) {
return self.indexOf(value) === index;
}
/*
* Copyright 2021 Zindex Software
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
function generateStyles(settings) {
if (settings.cache) {
const json = localStorage.getItem(settings.cacheKey + ':' + settings.cache);
if (json !== null) {
const content = JSON.parse(json);
content.tracker = new Set(content.tracker);
return content;
}
const oldCacheKey = localStorage.getItem(settings.cacheKey);
if (oldCacheKey !== null) {
localStorage.removeItem(settings.cacheKey + ':' + oldCacheKey);
}
localStorage.setItem(settings.cacheKey, settings.cache);
}
else {
const oldCacheKey = localStorage.getItem(settings.cacheKey);
if (oldCacheKey !== null) {
localStorage.removeItem(settings.cacheKey + ':' + oldCacheKey);
localStorage.removeItem(settings.cacheKey);
}
}
const base = STATE_LIST.length, result = [];
const breakpoints = settings.breakpoints;
const media_settings = settings.media;
const desktopFirst = settings.desktopFirst;
const states = settings.states;
const tracker = new Set();
const selectorAttribute = settings.selectorAttribute;
const selectorPfx = selectorAttribute === 'class'
? '.' + HASH_CLASS_PREFIX + '\\#'
: '[' + selectorAttribute + '~="' + HASH_CLASS_PREFIX + '#';
const selectorSfx = selectorAttribute === 'class' ? '' : '"]';
result.push(generateRootVariables(settings));
for (let media_index = 0, l = breakpoints.length; media_index < l; media_index++) {
const bp = breakpoints[media_index];
let str = '';
if (media_index !== 0) {
if (desktopFirst) {
str += `@media only screen and (max-width: ${media_settings[bp]}) {`;
}
else {
str += `@media only screen and (min-width: ${media_settings[bp]}) {`;
}
}
for (let name_index = 0, l = PROPERTY_LIST.length; name_index < l; name_index++) {
const name = PROPERTY_LIST[name_index];
// generate all states for default media
const stateList = media_index === 0 ? STATE_LIST : states;
for (const state of stateList) {
const state_index = STATE_LIST.indexOf(state);
if (state_index < 0) {
continue;
}
const hash = (((name_index * base) + media_index) * base + state_index).toString(16);
const property = HASH_VAR_PREFIX + (media_index > 0 ? bp + '--' : '') + name + (state_index > 0 ? '__' + stateList[state_index] : '');
tracker.add(hash);
let variants = PROPERTY_VARIANTS[name], prefix = '';
if (variants) {
for (let i = 0, l = variants.length; i < l; i++) {
prefix += `${variants[i]}:var(${property}) !important;`;
}
}
str += `${selectorPfx + hash + selectorSfx}${state_index > 0 ? ':' + state : ''}{${prefix}${name}:var(${property}) !important}`;
}
}
if (media_index !== 0) {
str += '}';
}
result.push(str);
}
const content = {
content: result.join(''),
tracker
};
if (settings.cache) {
localStorage.setItem(settings.cacheKey, settings.cache);
localStorage.setItem(settings.cacheKey + ':' + settings.cache, JSON.stringify({
content: content.content,
tracker: [...tracker]
}));
}
return content;
}
/*
* Copyright 2021 Zindex Software
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
let _documentObserver = null;
let _elementObserver = null;
let _shadowRootObserver = null;
const observedElements = new WeakMap();
function observeTree(element, handler) {
for (let e = element; e != null; e = e.nextElementSibling) {
if (!observedElements.has(e)) {
observe(e, handler);
}
else {
observeTree(e.firstElementChild, handler);
}
}
}
function observeDocument(document, handler) {
if (_documentObserver === null) {
_documentObserver = new MutationObserver(function (mutations) {
for (let i = 0, l = mutations.length; i < l; i++) {
const nodes = mutations[i].addedNodes;
for (let i = 0; i < nodes.length; i++) {
if (nodes[i] instanceof HTMLElement) {
observe(nodes[i], handler);
}
}
}
});
}
_documentObserver.observe(document, { childList: true, subtree: true });
}
function observeElement(element, handler) {
if (_elementObserver === null) {
_elementObserver = new MutationObserver(function (mutations) {
for (const mutation of mutations) {
const target = mutation.target;
observedElements.set(target, handler.handleStyleChange(target, target.getAttribute(mutation.attributeName), observedElements.get(target)));
}
});
}
_elementObserver.observe(element, {
attributes: true,
attributeOldValue: true,
childList: false,
attributeFilter: [handler.userSettings.xStyleAttribute],
});
}
function observeShadow(shadow, handler) {
if (_shadowRootObserver === null) {
_shadowRootObserver = new MutationObserver(function (mutations) {
for (let i = 0, l = mutations.length; i < l; i++) {
const nodes = mutations[i].addedNodes;
for (let i = 0; i < nodes.length; i++) {
if (nodes[i] instanceof HTMLElement) {
observe(nodes[i], handler);
}
}
}
});
}
_shadowRootObserver.observe(shadow, { childList: true, subtree: true });
}
function observe(element, handler) {
if (observedElements.has(element)) {
return;
}
const style = element.attributes.getNamedItem(handler.userSettings.xStyleAttribute);
observedElements.set(element, style ? handler.handleStyleChange(element, style.value, []) : []);
observeElement(element, handler);
for (let child = element.firstElementChild; child != null; child = child.nextElementSibling) {
observe(child, handler);
}
}
/*
* Copyright 2021 Zindex Software
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
const mixinRepository = new Map();
const MIXIN_ARGS_REGEX = /\${([0-9]+)(?:=([^}]+))?}/g;
const defaultMixinHandler = (context, name, args) => {
if (name.startsWith('.')) {
if (context.currentElement !== null) {
name = name.substring(1);
const attr = 'data-mixin-' + name;
for (let p = context.currentElement.parentElement; p != null; p = p.parentElement) {
if (p.hasAttribute(attr)) {
return p.getAttribute(attr)
.replace(MIXIN_ARGS_REGEX, (match, arg, fallback) => args[parseInt(arg)] || fallback || '');
}
}
}
return '';
}
return Root.getPropertyValue('--' + name + '--mixin')
.replace(MIXIN_ARGS_REGEX, (match, arg, fallback) => args[parseInt(arg)] || fallback || '');
};
mixinRepository.set('space-x', function (_, space, right) {
return right === 'true' ? `sibling!mr:${space || '0'}` : `sibling!ml:${space || '0'}`;
});
mixinRepository.set('space-y', function (_, space, bottom) {
return bottom === 'true' ? `sibling!mb:${space || '0'}` : `sibling!mt:${space || '0'}`;
});
mixinRepository.set('grid', function () {
return 'grid; l1!wb:break-all; l2!max-w:100%; child!justify-self:normal; child!align-self:normal';
});
mixinRepository.set('stack', function () {
return `grid; grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr);
grid-template-areas:"stackarea"; l1!grid-area:stackarea; l1!z:0; w:100%; h:100%`;
});
mixinRepository.set('sr-only', function () {
return 'absolute; w:1px; h:1px; p:0; m:-1px; bw:0; overflow:hidden; clip:rect(0, 0, 0, 0); left:-9999px';
});
mixinRepository.set('container', function (settings) {
if (settings.desktopFirst) {
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%`;
}
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`;
});
function resolveMixin(context, name, args) {
if (mixinRepository.has(name)) {
return style(mixinRepository.get(name)(context.userSettings, ...args));
}
return style(defaultMixinHandler(context, name, args));
}
function registerMixin(name, callback) {
mixinRepository.set(name, callback);
}
/*
* Copyright 2021 Zindex Software
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
const VAR_REGEX = /@([a-zA-Z0-9\-_]+)/g;
const REPLACE_REGEX = /\$(selector|body|class|value|property|state|variants|var)/g;
const SPLIT_REGEX = /;/;
const MIXIN_PREFIX = '^';
// do not match comma inside parenthesis
// 2px, linear-gradient(blue, red), inline => [2px, linear-gradient(blue, red), inline]
const COMMA_DELIMITED = /\s*,\s*(?![^(]*\))/gm;
class StyleHandler {
constructor(settings, style, tracker) {
this._currentElement = null;
this.style = style;
this.settings = settings;
this.tracker = tracker;
this.mediaSettings = settings.media;
this.desktopFirst = settings.desktopFirst;
this.breakpoints = settings.breakpoints;
this.rules = [];
this.padding = style.cssRules.length;
this.selectorAttribute = settings.selectorAttribute;
}
get userSettings() {
return this.settings;
}
get currentElement() {
return this._currentElement;
}
handleStyleChange(element, content, old) {
this._currentElement = element;
if (content === null) {
return this.handleStyleRemoved(element, old);
}
const newEntries = this.getStyleEntries(content);
const classList = element.hasAttribute(this.selectorAttribute) ? element.getAttribute(this.selectorAttribute).split(' ') : [];
const assemblerEntries = [];
// remove old entries
for (const { n: name, p: property, e: entry } of old) {
if (!newEntries.has(name)) {
const index = classList.indexOf(entry);
if (index >= 0) {
classList.splice(index, 1);
}
element.style.removeProperty(property);
}
}
for (const info of newEntries.values()) {
const { entry, property, hash, value, name } = info;
const index = classList.indexOf(entry);
if (index < 0) {
classList.push(entry);
}
if (!this.tracker.has(hash)) {
this.generateCSS(info);
}
element.style.setProperty(property, value);
assemblerEntries.push({ e: entry, n: name, p: property });
}
element.setAttribute(this.selectorAttribute, classList.join(' '));
this._currentElement = null;
return assemblerEntries;
}
handleStyleRemoved(element, old) {
this._currentElement = null;
const classList = element.hasAttribute(this.selectorAttribute) ? element.getAttribute(this.selectorAttribute).split(' ') : [];
for (const { p: property, e: entry } of old) {
const index = classList.indexOf(entry);
if (index >= 0) {
classList.splice(index, 1);
}
element.style.removeProperty(property);
}
element.setAttribute(this.selectorAttribute, classList.join(' '));
return [];
}
extract(attr, value = null) {
var _a;
const m = (_a = PROPERTY_REGEX.exec(attr)) === null || _a === void 0 ? void 0 : _a.groups;
if (!m || !m.property) {
return [];
}
const MEDIA_LIST = this.breakpoints;
const media = MEDIA_LIST.indexOf(m.media || 'all');
const state = STATE_LIST.indexOf(m.state || 'normal');
if (media < 0 || state < 0) {
return [];
}
let properties = m.property;
const original = properties;
const scopes = this.settings.scopes;
if (ALIASES.hasOwnProperty(properties)) {
properties = ALIASES[properties];
if (typeof properties === 'function') {
properties = properties(value);
}
}
if (!Array.isArray(properties)) {
properties = [properties];
}
if (value === null) {
value = DEFAULT_VALUES[original] || '';
}
if (VALUE_WRAPPER.hasOwnProperty(original)) {
value = VALUE_WRAPPER[original](value, original, media, state, this);
}
if (!Array.isArray(value)) {
value = Array(properties.length).fill(value.replace(VAR_REGEX, "var(--$1)"));
}
else {
value = value.map(value => value.replace(VAR_REGEX, "var(--$1)"));
}
const result = [];
const base = STATE_LIST.length;
let index = -1;
for (const property of properties) {
index++;
const name = PROPERTY_LIST.indexOf(property);
if (name < 0) {
continue;
}
const scope = m.scope || '';
const rank = ((name * base) + media) * base + state;
const hash = rank.toString(16) + (scope ? `-${scope}` : '');
const scopeRank = scopes.indexOf(scope) * 100000;
const internalProperty = (m.media ? m.media + '--' : '') + (scope ? scope + '__' : '') + property + (m.state ? '__' + m.state : '');
result.push({
name: (m.media ? m.media + '|' : '') + (scope ? scope + '!' : '') + property + (m.state ? '.' + m.state : ''),
//property: HASH_VAR_PREFIX + hash,
property: HASH_VAR_PREFIX + internalProperty,
entry: HASH_CLASS_PREFIX + '#' + hash,
value: value[index],
media: m.media || '',
state: m.state || '',
cssProperty: property,
hash,
scope,
rank: scopeRank < 0 ? -1 : rank + scopeRank,
});
}
return result;
}
getStyleEntries(content) {
const entries = new Map();
for (let name of this.getResolvedProperties(content)) {
let value = null;
const pos = name.indexOf(':');
if (pos >= 0) {
value = name.substr(pos + 1);
name = name.substr(0, pos).trim();
}
for (const info of this.extract(name, value)) {
entries.set(info.name, info);
}
}
return entries;
}
getResolvedProperties(content, stack = []) {
const entries = [];
for (let name of content.split(SPLIT_REGEX)) {
name = name.trim();
if (name === '') {
continue;
}
// extract mixin
if (name.startsWith(MIXIN_PREFIX)) {
const pos = name.indexOf(':');
let mixin, args;
if (pos < 0) {
mixin = name.substr(1);
args = [];
}
else {
mixin = name.substr(1, pos - 1);
args = name.substr(pos + 1).split(COMMA_DELIMITED).map(trim);
}
if (stack.indexOf(mixin) >= 0) {
stack.push(mixin);
throw new Error('Recursive mixin detected: ' + stack.join('->'));
}
stack.push(mixin);
entries.push(...this.getResolvedProperties(resolveMixin(this, mixin, args), stack));
stack.pop();
continue;
}
entries.push(name);
}
return entries;
}
generateCSS(info) {
const { tracker, mediaSettings, desktopFirst, style } = this;
const { hash, media, state, cssProperty, property, scope, rank } = info;
const hasMedia = media !== '';
const selectorAttribute = this.settings.selectorAttribute;
const selectorPfx = selectorAttribute === 'class'
? '.' + HASH_CLASS_PREFIX + '\\#'
: '[' + selectorAttribute + '~="' + HASH_CLASS_PREFIX + '#';
const selectorSfx = selectorAttribute === 'class' ? '' : '"]';
tracker.add(hash);
if (rank < 0) {
return;
}
let rule = '';
if (hasMedia) {
if (desktopFirst) {
rule += `@media only screen and (max-width: ${mediaSettings[media]}) {`;
}
else {
rule += `@media only screen and (min-width: ${mediaSettings[media]}) {`;
}
}
let variants = PROPERTY_VARIANTS[cssProperty], prefix = '';
if (variants) {
for (let i = 0, l = variants.length; i < l; i++) {
prefix += `${variants[i]}:var(${property}) !important;`;
}
}
if (scope) {
const scopeValue = Root.getPropertyValue('--' + scope + '--scope');
if (scopeValue === '') {
return;
}
rule += scopeValue.replace(REPLACE_REGEX, (match, p1) => {
switch (p1) {
case "selector":
return `${selectorPfx + hash + selectorSfx}${state ? ':' + state : ''}`;
case "body":
return prefix + cssProperty + ': var(' + property + ') !important';
case "variants":
return prefix;
case "property":
return cssProperty;
case "value":
return `var(${property})`;
case "class":
return selectorPfx + hash + selectorSfx;
case "state":
return state ? ':' + state : '';
case "var":
return property;
}
return p1;
});
}
else {
rule += `${selectorPfx + hash + selectorSfx}${state ? ':' + state : ''}{${prefix}${cssProperty}: var(${property}) !important}`;
}
if (hasMedia) {
rule += '}';
}
const ruleIndex = this.getRuleIndex(rank);
this.rules.splice(ruleIndex, 0, rank);
try {
style.insertRule(rule, this.padding + ruleIndex);
}
catch (_a) {
this.rules.splice(ruleIndex, 1);
console.warn("Unsupported rule:", rule);
}
}
getRuleIndex(rank) {
const { rules } = this;
for (let i = 0, l = rules.length; i < l; i++) {
if (rank < rules[i]) {
return i;
}
}
return rules.length;
}
}
/*
* Copyright 2021 Zindex Software
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
let styleHandler = null;
let supportsConstructable = true;
let supportsAdoptingStyleSheets = true;
let settings = null;
const observedShadowRoots = new WeakMap();
function init(options) {
supportsAdoptingStyleSheets = window.ShadowRoot &&
(window.ShadyCSS === undefined || window.ShadyCSS.nativeShadow) &&
'adoptedStyleSheets' in Document.prototype &&
'replace' in CSSStyleSheet.prototype;
settings = getUserSettings(options || document.currentScript.dataset);
if (!settings.enabled) {
return false;
}
let tracker;
let stylesheet;
if (supportsAdoptingStyleSheets && settings.constructable) {
stylesheet = new CSSStyleSheet();
if (settings.generate) {
const generated = generateStyles(settings);
tracker = generated.tracker;
stylesheet.replaceSync(generated.content);
}
else {
tracker = new Set();
stylesheet.replaceSync(generateRootVariables(settings));
}
document.adoptedStyleSheets = [...document.adoptedStyleSheets, stylesheet];
}
else {
supportsConstructable = false;
const style = document.createElement("style");
const generated = generateStyles(settings);
tracker = generated.tracker;
style.id = 'opis-assembler-css';
style.textContent = generated.content;
document.currentScript.parentElement.insertBefore(style, document.currentScript);
stylesheet = style.sheet;
}
styleHandler = new StyleHandler(settings, stylesheet, tracker);
observeDocument(document, styleHandler);
if (window) {
window.addEventListener('DOMContentLoaded', function () {
observeTree(document.body, styleHandler);
});
}
return true;
}
function handleShadowRoot(shadowRoot, add = true) {
if (styleHandler === null) {
init();
}
if (!supportsAdoptingStyleSheets || !supportsConstructable) {
return false;
}
if (observedShadowRoots.has(shadowRoot)) {
return true;
}
observedShadowRoots.set(shadowRoot, true);
if (add) {
shadowRoot.adoptedStyleSheets = [...shadowRoot.adoptedStyleSheets, styleHandler.style];
}
observeShadow(shadowRoot, styleHandler);
return true;
}
function cssStyleSheet() {
if (styleHandler === null) {
init();
}
return styleHandler.style;
}
/*
* Copyright 2022 Zindex Software
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
if (typeof window !== 'undefined') {
init();
}
exports.cssStyleSheet = cssStyleSheet;
exports.handleShadowRoot = handleShadowRoot;
exports.init = init;
exports.registerMixin = registerMixin;
exports.style = style;
Object.defineProperty(exports, '__esModule', { value: true });
}));
================================================
FILE: package.json
================================================
{
"name": "@asmcss/assembler",
"version": "0.8.3",
"main": "dist/assembler.cjs.js",
"module": "dist/assembler.es.js",
"browser": "dist/assembler.js",
"dependencies": {},
"scripts": {
"build": "rollup -c --environment BUILD:production && tsc",
"dev": "rollup -c -w",
"test": "jest"
},
"devDependencies": {
"@rollup/plugin-typescript": "^8.1.0",
"jest": "^26.6.3",
"rollup": "^2.36.1",
"rollup-plugin-import-resolver": "^1.0.5",
"rollup-plugin-terser": "^7.0.2",
"tslib": "^2.1.0",
"typescript": "^4.1.3"
},
"description": "Modern utility-first framework",
"repository": {
"type": "git",
"url": "git+https://github.com/asmcss/assembler.git"
},
"types": "types/index.d.ts",
"files": [
"dist/*",
"types/*"
],
"author": "Zindex Software",
"license": "Apache-2.0",
"bugs": {
"url": "https://github.com/asmcss/assembler/issues"
},
"homepage": "https://asmcss.com",
"jest": {
"setupFiles": [
"./tests/mocks/mock.js"
],
"modulePathIgnorePatterns": [
"mocks"
]
}
}
================================================
FILE: rollup.config.js
================================================
import importResolver from 'rollup-plugin-import-resolver';
import ts from "@rollup/plugin-typescript";
import {terser} from "rollup-plugin-terser";
import pkg from './package.json';
const NAME = 'AssemblerCSS';
const MAIN = 'src/index.ts';
const AUTOLOAD = 'src/autoload.ts';
const GLOBALS = {};
const EXTERNAL = Object.keys(GLOBALS);
const production = !process.env.ROLLUP_WATCH;
const resolver = importResolver(['.mjs', '.ts', '.js']);
const typescript = ts({
target: "es2015"
});
const CONFIG = [
{
input: AUTOLOAD,
output: {
name: NAME,
file: pkg.browser,
format: 'umd',
globals: GLOBALS
},
external: EXTERNAL,
plugins: [resolver, typescript]
}
];
if (production) {
CONFIG.push(...[
{
input: AUTOLOAD,
output: {
name: NAME,
file: pkg.browser.replace('.js', '.min.js'),
format: 'umd',
globals: GLOBALS
},
external: EXTERNAL,
plugins: [resolver, typescript, terser()]
},
{
input: MAIN,
output: {
name: NAME,
file: pkg.main,
format: 'cjs',
globals: GLOBALS
},
external: EXTERNAL,
plugins: [resolver, typescript]
},
{
input: MAIN,
output: {
name: NAME,
file: pkg.module,
format: 'es',
globals: GLOBALS
},
external: EXTERNAL,
plugins: [resolver, typescript]
}
]);
}
export default CONFIG;
================================================
FILE: src/Root.ts
================================================
/*
* Copyright 2021 Zindex Software
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
const ESCAPE_REGEX = /\\\n/g;
const PROPERTY_REGEX = /^--([a-zA-Z0-9-_]+)--(scope|mixin|register)$/;
const CONFIG_REGEX = /^--assembler-([a-zA-Z0-9-_]+)$/;
class RootClass {
private cache: Map<string, string> = new Map<string, string>();
private scopes: string[] = ["", "text-clip", "selection", "placeholder", "before", "after", "first-letter", "first-line",
"l1", "l2", "marker-l1", "marker", "sibling", "child", "even", "odd", "first", "last", "dark", "light",
"landscape", "portrait", "motion-reduce", "motion-safe"
];
private registeredProperties: {name: string, aliases:string[]}[] = [];
constructor() {
const {cache} = this;
const tc = '-webkit-background-clip: text !important;-moz-background-clip:text !important;background-clip:text !important;';
cache.set("--text-clip--scope", `$selector {${tc}}`);
cache.set("--l1--scope", "$selector > * {$body}");
cache.set("--l2--scope", "$selector > * > * {$body}");
cache.set("--sibling--scope", "$selector > * + * {$body}");
cache.set("--child--scope", "$selector > $class {$body}");
cache.set("--selection--scope", "$selector::selection {$body}");
cache.set("--placeholder--scope", "$selector::placeholder {$body}");
cache.set("--marker--scope", "$selector::marker {$body}");
cache.set("--marker-l1--scope", "$selector > *::marker {$body}");
cache.set("--before--scope", "$selector::before {$body}");
cache.set("--after--scope", "$selector::after {$body}");
cache.set("--even--scope", "$selector:nth-child(even) {$body}");
cache.set("--odd--scope", "$selector:nth-child(odd) {$body}");
cache.set("--first--scope", "$selector:first-child {$body}");
cache.set("--last--scope", "$selector:last-child {$body}");
cache.set("--first-letter--scope", "$selector::first-letter {$body}");
cache.set("--first-line--scope", "$selector::first-line {$body}");
cache.set("--dark--scope", "@media(prefers-color-scheme: dark) {$selector {$body}}");
cache.set("--light--scope", "@media(prefers-color-scheme: light) {$selector {$body}}");
cache.set("--landscape--scope", "@media(orientation: landscape) {$selector {$body}}");
cache.set("--portrait--scope", "@media(orientation: portrait) {$selector {$body}}");
cache.set("--motion-reduce--scope", "@media(prefers-reduced-motion: reduce) {$selector {$body}}");
cache.set("--motion-safe--scope", "@media(prefers-reduced-motion: no-preference) {$selector {$body}}");
this.initialize();
}
private initialize() {
const {cache, scopes, registeredProperties} = this;
for (const style of this.getComputedStyles()) {
for (const property of style) {
const match = PROPERTY_REGEX.exec(property);
if (match == null) {
continue;
}
const name = match[1];
const value = this.getValue(style, property);
cache.set(property, value);
switch (match[2]) {
case "scope":
if (scopes.indexOf(name) === -1) {
scopes.push(name);
}
break;
case "register":
if (value === 'true' || value === '') {
registeredProperties.push({name, aliases: []});
} else {
const aliases = value.split(',').map(v => v.trim()).filter(v => v !== '');
registeredProperties.push({name, aliases})
}
break;
}
}
}
}
private getComputedStyles(): CSSStyleDeclaration[] {
const styles = [];
for (let si = 0, sl = document.styleSheets.length; si < sl; si++) {
const styleSheet = document.styleSheets[si];
if (styleSheet.href !== null && styleSheet.href.indexOf(window.location.origin) !== 0) {
continue;
}
if (styleSheet.href === null && styleSheet.ownerNode !== null
&& styleSheet.ownerNode instanceof Element && (styleSheet.ownerNode as Element).id === 'opis-assembler-css') {
continue;
}
const rule = styleSheet.cssRules[0];
if (rule.type === CSSRule.STYLE_RULE && (rule as CSSStyleRule).selectorText === ':root') {
styles.push((rule as CSSStyleRule).style);
}
}
return styles;
}
private getValue(style: CSSStyleDeclaration, property: string): string {
let value = style.getPropertyValue(property).replace(ESCAPE_REGEX, "").trim();
if (value.startsWith('"') && value.endsWith('"')) {
value = value.substring(1, value.length - 1).trim();
}
return value;
}
getRegisteredScopes(): string[] {
return this.scopes;
}
getRegisteredProperties(): {name: string, aliases:string[]}[] {
return this.registeredProperties;
}
getPropertyValue(property: string): string {
if (this.cache.has(property)) {
return this.cache.get(property);
}
return '';
}
}
export const Root = new RootClass();
================================================
FILE: src/StyleHandler.ts
================================================
/*
* Copyright 2021 Zindex Software
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import {ALIASES, DEFAULT_VALUES, PROPERTY_LIST, PROPERTY_VARIANTS, STATE_LIST, VALUE_WRAPPER} from "./list";
import {HASH_VAR_PREFIX, PROPERTY_REGEX, HASH_CLASS_PREFIX, trim} from "./helpers";
import {Root} from "./Root";
impor
gitextract_tyodf_to/
├── .gitattributes
├── .github/
│ └── workflows/
│ └── tests.yml
├── .gitignore
├── LICENSE
├── README.md
├── dist/
│ ├── assembler.cjs.js
│ ├── assembler.es.js
│ └── assembler.js
├── package.json
├── rollup.config.js
├── src/
│ ├── Root.ts
│ ├── StyleHandler.ts
│ ├── autoload.ts
│ ├── generators.ts
│ ├── helpers.ts
│ ├── index.ts
│ ├── list.ts
│ ├── mixins.ts
│ ├── observers.ts
│ └── variables.ts
├── tests/
│ ├── mocks/
│ │ └── mock.js
│ └── properties/
│ └── color.test.js
├── tsconfig.json
└── types/
├── Root.d.ts
├── StyleHandler.d.ts
├── autoload.d.ts
├── generators.d.ts
├── helpers.d.ts
├── index.d.ts
├── list.d.ts
├── mixins.d.ts
├── observers.d.ts
└── variables.d.ts
SYMBOL INDEX (260 symbols across 19 files)
FILE: dist/assembler.cjs.js
constant PROPERTY_LIST (line 32) | const PROPERTY_LIST = [
constant PROPERTY_VARIANTS (line 188) | const PROPERTY_VARIANTS = {
constant STATE_LIST (line 200) | const STATE_LIST = [
constant ALIASES (line 225) | const ALIASES = {
constant DEFAULT_VALUES (line 355) | const DEFAULT_VALUES = {
constant VALUE_WRAPPER (line 444) | const VALUE_WRAPPER = {
constant ELEVATION_UMBRA (line 529) | const ELEVATION_UMBRA = [
constant ELEVATION_PENUMBRA (line 536) | const ELEVATION_PENUMBRA = [
constant ELEVATION_AMBIENT (line 543) | const ELEVATION_AMBIENT = [
constant BORDER_RADIUS (line 550) | const BORDER_RADIUS = {
constant LETTER_SPACING (line 559) | const LETTER_SPACING = {
constant LINE_HEIGHT (line 567) | const LINE_HEIGHT = {
constant FONT_SIZES (line 575) | const FONT_SIZES = {
constant FONT_SIZE_LEADING (line 590) | const FONT_SIZE_LEADING = {
constant FONT_FAMILIES (line 605) | const FONT_FAMILIES = {
constant SHADOW (line 610) | const SHADOW = [
function generateRootVariables (line 618) | function generateRootVariables(settings) {
constant ESCAPE_REGEX (line 669) | const ESCAPE_REGEX = /\\\n/g;
class RootClass (line 671) | class RootClass {
method constructor (line 672) | constructor() {
method initialize (line 706) | initialize() {
method getComputedStyles (line 736) | getComputedStyles() {
method getValue (line 754) | getValue(style, property) {
method getRegisteredScopes (line 761) | getRegisteredScopes() {
method getRegisteredProperties (line 764) | getRegisteredProperties() {
method getPropertyValue (line 767) | getPropertyValue(property) {
constant HASH_VAR_PREFIX (line 792) | const HASH_VAR_PREFIX = '--asm-';
constant HASH_CLASS_PREFIX (line 793) | const HASH_CLASS_PREFIX = 'asm';
constant PROPERTY_REGEX (line 794) | const PROPERTY_REGEX = /^(?:(?<media>[a-z]{2})\|)?(?:(?<scope>[-a-zA-Z0-...
function getUserSettings (line 795) | function getUserSettings(dataset) {
function style (line 856) | function style(item) {
function getStringItemList (line 874) | function getStringItemList(value, unique = true) {
function trim (line 882) | function trim(value) {
function nonEmptyString (line 885) | function nonEmptyString(value) {
function uniqueItems (line 888) | function uniqueItems(value, index, self) {
function generateStyles (line 907) | function generateStyles(settings) {
function observeTree (line 1010) | function observeTree(element, handler) {
function observeDocument (line 1020) | function observeDocument(document, handler) {
function observeElement (line 1035) | function observeElement(element, handler) {
function observeShadow (line 1051) | function observeShadow(shadow, handler) {
function observe (line 1066) | function observe(element, handler) {
constant MIXIN_ARGS_REGEX (line 1094) | const MIXIN_ARGS_REGEX = /\${([0-9]+)(?:=([^}]+))?}/g;
function resolveMixin (line 1134) | function resolveMixin(context, name, args) {
function registerMixin (line 1140) | function registerMixin(name, callback) {
constant VAR_REGEX (line 1159) | const VAR_REGEX = /@([a-zA-Z0-9\-_]+)/g;
constant REPLACE_REGEX (line 1160) | const REPLACE_REGEX = /\$(selector|body|class|value|property|state|varia...
constant SPLIT_REGEX (line 1161) | const SPLIT_REGEX = /;/;
constant MIXIN_PREFIX (line 1162) | const MIXIN_PREFIX = '^';
constant COMMA_DELIMITED (line 1165) | const COMMA_DELIMITED = /\s*,\s*(?![^(]*\))/gm;
class StyleHandler (line 1166) | class StyleHandler {
method constructor (line 1167) | constructor(settings, style, tracker) {
method userSettings (line 1179) | get userSettings() {
method currentElement (line 1182) | get currentElement() {
method handleStyleChange (line 1185) | handleStyleChange(element, content, old) {
method handleStyleRemoved (line 1219) | handleStyleRemoved(element, old) {
method extract (line 1232) | extract(attr, value = null) {
method getStyleEntries (line 1298) | getStyleEntries(content) {
method getResolvedProperties (line 1313) | getResolvedProperties(content, stack = []) {
method generateCSS (line 1345) | generateCSS(info) {
method getRuleIndex (line 1416) | getRuleIndex(rank) {
function init (line 1447) | function init(options) {
function handleShadowRoot (line 1490) | function handleShadowRoot(shadowRoot, add = true) {
function cssStyleSheet (line 1507) | function cssStyleSheet() {
FILE: dist/assembler.es.js
constant PROPERTY_LIST (line 28) | const PROPERTY_LIST = [
constant PROPERTY_VARIANTS (line 184) | const PROPERTY_VARIANTS = {
constant STATE_LIST (line 196) | const STATE_LIST = [
constant ALIASES (line 221) | const ALIASES = {
constant DEFAULT_VALUES (line 351) | const DEFAULT_VALUES = {
constant VALUE_WRAPPER (line 440) | const VALUE_WRAPPER = {
constant ELEVATION_UMBRA (line 525) | const ELEVATION_UMBRA = [
constant ELEVATION_PENUMBRA (line 532) | const ELEVATION_PENUMBRA = [
constant ELEVATION_AMBIENT (line 539) | const ELEVATION_AMBIENT = [
constant BORDER_RADIUS (line 546) | const BORDER_RADIUS = {
constant LETTER_SPACING (line 555) | const LETTER_SPACING = {
constant LINE_HEIGHT (line 563) | const LINE_HEIGHT = {
constant FONT_SIZES (line 571) | const FONT_SIZES = {
constant FONT_SIZE_LEADING (line 586) | const FONT_SIZE_LEADING = {
constant FONT_FAMILIES (line 601) | const FONT_FAMILIES = {
constant SHADOW (line 606) | const SHADOW = [
function generateRootVariables (line 614) | function generateRootVariables(settings) {
constant ESCAPE_REGEX (line 665) | const ESCAPE_REGEX = /\\\n/g;
class RootClass (line 667) | class RootClass {
method constructor (line 668) | constructor() {
method initialize (line 702) | initialize() {
method getComputedStyles (line 732) | getComputedStyles() {
method getValue (line 750) | getValue(style, property) {
method getRegisteredScopes (line 757) | getRegisteredScopes() {
method getRegisteredProperties (line 760) | getRegisteredProperties() {
method getPropertyValue (line 763) | getPropertyValue(property) {
constant HASH_VAR_PREFIX (line 788) | const HASH_VAR_PREFIX = '--asm-';
constant HASH_CLASS_PREFIX (line 789) | const HASH_CLASS_PREFIX = 'asm';
constant PROPERTY_REGEX (line 790) | const PROPERTY_REGEX = /^(?:(?<media>[a-z]{2})\|)?(?:(?<scope>[-a-zA-Z0-...
function getUserSettings (line 791) | function getUserSettings(dataset) {
function style (line 852) | function style(item) {
function getStringItemList (line 870) | function getStringItemList(value, unique = true) {
function trim (line 878) | function trim(value) {
function nonEmptyString (line 881) | function nonEmptyString(value) {
function uniqueItems (line 884) | function uniqueItems(value, index, self) {
function generateStyles (line 903) | function generateStyles(settings) {
function observeTree (line 1006) | function observeTree(element, handler) {
function observeDocument (line 1016) | function observeDocument(document, handler) {
function observeElement (line 1031) | function observeElement(element, handler) {
function observeShadow (line 1047) | function observeShadow(shadow, handler) {
function observe (line 1062) | function observe(element, handler) {
constant MIXIN_ARGS_REGEX (line 1090) | const MIXIN_ARGS_REGEX = /\${([0-9]+)(?:=([^}]+))?}/g;
function resolveMixin (line 1130) | function resolveMixin(context, name, args) {
function registerMixin (line 1136) | function registerMixin(name, callback) {
constant VAR_REGEX (line 1155) | const VAR_REGEX = /@([a-zA-Z0-9\-_]+)/g;
constant REPLACE_REGEX (line 1156) | const REPLACE_REGEX = /\$(selector|body|class|value|property|state|varia...
constant SPLIT_REGEX (line 1157) | const SPLIT_REGEX = /;/;
constant MIXIN_PREFIX (line 1158) | const MIXIN_PREFIX = '^';
constant COMMA_DELIMITED (line 1161) | const COMMA_DELIMITED = /\s*,\s*(?![^(]*\))/gm;
class StyleHandler (line 1162) | class StyleHandler {
method constructor (line 1163) | constructor(settings, style, tracker) {
method userSettings (line 1175) | get userSettings() {
method currentElement (line 1178) | get currentElement() {
method handleStyleChange (line 1181) | handleStyleChange(element, content, old) {
method handleStyleRemoved (line 1215) | handleStyleRemoved(element, old) {
method extract (line 1228) | extract(attr, value = null) {
method getStyleEntries (line 1294) | getStyleEntries(content) {
method getResolvedProperties (line 1309) | getResolvedProperties(content, stack = []) {
method generateCSS (line 1341) | generateCSS(info) {
method getRuleIndex (line 1412) | getRuleIndex(rank) {
function init (line 1443) | function init(options) {
function handleShadowRoot (line 1486) | function handleShadowRoot(shadowRoot, add = true) {
function cssStyleSheet (line 1503) | function cssStyleSheet() {
FILE: dist/assembler.js
function generateRootVariables (line 620) | function generateRootVariables(settings) {
class RootClass (line 673) | class RootClass {
method constructor (line 674) | constructor() {
method initialize (line 708) | initialize() {
method getComputedStyles (line 738) | getComputedStyles() {
method getValue (line 756) | getValue(style, property) {
method getRegisteredScopes (line 763) | getRegisteredScopes() {
method getRegisteredProperties (line 766) | getRegisteredProperties() {
method getPropertyValue (line 769) | getPropertyValue(property) {
function getUserSettings (line 797) | function getUserSettings(dataset) {
function style (line 858) | function style(item) {
function getStringItemList (line 876) | function getStringItemList(value, unique = true) {
function trim (line 884) | function trim(value) {
function nonEmptyString (line 887) | function nonEmptyString(value) {
function uniqueItems (line 890) | function uniqueItems(value, index, self) {
function generateStyles (line 909) | function generateStyles(settings) {
function observeTree (line 1012) | function observeTree(element, handler) {
function observeDocument (line 1022) | function observeDocument(document, handler) {
function observeElement (line 1037) | function observeElement(element, handler) {
function observeShadow (line 1053) | function observeShadow(shadow, handler) {
function observe (line 1068) | function observe(element, handler) {
function resolveMixin (line 1136) | function resolveMixin(context, name, args) {
function registerMixin (line 1142) | function registerMixin(name, callback) {
class StyleHandler (line 1168) | class StyleHandler {
method constructor (line 1169) | constructor(settings, style, tracker) {
method userSettings (line 1181) | get userSettings() {
method currentElement (line 1184) | get currentElement() {
method handleStyleChange (line 1187) | handleStyleChange(element, content, old) {
method handleStyleRemoved (line 1221) | handleStyleRemoved(element, old) {
method extract (line 1234) | extract(attr, value = null) {
method getStyleEntries (line 1300) | getStyleEntries(content) {
method getResolvedProperties (line 1315) | getResolvedProperties(content, stack = []) {
method generateCSS (line 1347) | generateCSS(info) {
method getRuleIndex (line 1418) | getRuleIndex(rank) {
function init (line 1449) | function init(options) {
function handleShadowRoot (line 1492) | function handleShadowRoot(shadowRoot, add = true) {
function cssStyleSheet (line 1509) | function cssStyleSheet() {
FILE: rollup.config.js
constant NAME (line 6) | const NAME = 'AssemblerCSS';
constant MAIN (line 7) | const MAIN = 'src/index.ts';
constant AUTOLOAD (line 8) | const AUTOLOAD = 'src/autoload.ts';
constant GLOBALS (line 9) | const GLOBALS = {};
constant EXTERNAL (line 10) | const EXTERNAL = Object.keys(GLOBALS);
constant CONFIG (line 19) | const CONFIG = [
FILE: src/Root.ts
constant ESCAPE_REGEX (line 17) | const ESCAPE_REGEX = /\\\n/g;
constant PROPERTY_REGEX (line 18) | const PROPERTY_REGEX = /^--([a-zA-Z0-9-_]+)--(scope|mixin|register)$/;
constant CONFIG_REGEX (line 19) | const CONFIG_REGEX = /^--assembler-([a-zA-Z0-9-_]+)$/;
class RootClass (line 21) | class RootClass {
method constructor (line 29) | constructor() {
method initialize (line 69) | private initialize() {
method getComputedStyles (line 99) | private getComputedStyles(): CSSStyleDeclaration[] {
method getValue (line 119) | private getValue(style: CSSStyleDeclaration, property: string): string {
method getRegisteredScopes (line 127) | getRegisteredScopes(): string[] {
method getRegisteredProperties (line 131) | getRegisteredProperties(): {name: string, aliases:string[]}[] {
method getPropertyValue (line 135) | getPropertyValue(property: string): string {
FILE: src/StyleHandler.ts
type PropertyInfo (line 23) | type PropertyInfo = {
type AssemblerEntry (line 36) | type AssemblerEntry = {
constant VAR_REGEX (line 42) | const VAR_REGEX = /@([a-zA-Z0-9\-_]+)/g;
constant REPLACE_REGEX (line 43) | const REPLACE_REGEX = /\$(selector|body|class|value|property|state|varia...
constant SPLIT_REGEX (line 44) | const SPLIT_REGEX = /;/;
constant MIXIN_PREFIX (line 45) | const MIXIN_PREFIX = '^';
constant COMMA_DELIMITED (line 49) | const COMMA_DELIMITED = /\s*,\s*(?![^(]*\))/gm;
class StyleHandler (line 51) | class StyleHandler {
method constructor (line 63) | constructor(settings: UserSettings, style: CSSStyleSheet, tracker: Set...
method userSettings (line 75) | get userSettings(): UserSettings {
method currentElement (line 79) | get currentElement(): HTMLElement|null {
method handleStyleChange (line 83) | handleStyleChange(element: HTMLElement, content: string|null, old: Ass...
method handleStyleRemoved (line 123) | handleStyleRemoved(element: HTMLElement, old: AssemblerEntry[]): Assem...
method extract (line 140) | private extract(attr: string, value: string|string[]|null = null): Pro...
method getStyleEntries (line 219) | private getStyleEntries(content: string): Map<string, PropertyInfo> {
method getResolvedProperties (line 239) | private getResolvedProperties(content: string, stack: string[] = []): ...
method generateCSS (line 277) | private generateCSS(info: PropertyInfo): void {
method getRuleIndex (line 356) | private getRuleIndex(rank: number): number {
FILE: src/generators.ts
type GeneratedStyles (line 22) | type GeneratedStyles = {content: string, tracker: Set<string>};
function generateStyles (line 24) | function generateStyles(settings: UserSettings): GeneratedStyles {
FILE: src/helpers.ts
type UserSettings (line 20) | type UserSettings = {
type MixinContext (line 36) | interface MixinContext {
type StyleType (line 41) | type StyleType = string|{[key: string]: string};
constant HASH_VAR_PREFIX (line 44) | const HASH_VAR_PREFIX = '--asm-';
constant HASH_CLASS_PREFIX (line 45) | const HASH_CLASS_PREFIX = 'asm';
constant PROPERTY_REGEX (line 46) | const PROPERTY_REGEX = /^(?:(?<media>[a-z]{2})\|)?(?:(?<scope>[-a-zA-Z0-...
function getUserSettings (line 48) | function getUserSettings(dataset: {[key: string]: string}): UserSettings {
function style (line 118) | function style(item: StyleType|StyleType[]): string {
function getStringItemList (line 141) | function getStringItemList(value: string, unique: boolean = true): strin...
function getRegisteredProperties (line 151) | function getRegisteredProperties(value: string): {name: string, aliases:...
function trim (line 168) | function trim(value: string): string {
function nonEmptyString (line 172) | function nonEmptyString(value: string): boolean {
function uniqueItems (line 176) | function uniqueItems(value: any, index: number, self: any[]): boolean {
FILE: src/index.ts
type Document (line 27) | interface Document {
type Window (line 30) | interface Window {
type CSSStyleSheet (line 33) | interface CSSStyleSheet {
type ShadowRoot (line 37) | interface ShadowRoot {
function init (line 49) | function init(options?: {[key: string]: string}): boolean {
function handleShadowRoot (line 98) | function handleShadowRoot(shadowRoot: ShadowRoot, add: boolean = true): ...
function cssStyleSheet (line 122) | function cssStyleSheet(): CSSStyleSheet {
FILE: src/list.ts
constant PROPERTY_LIST (line 33) | const PROPERTY_LIST = [
constant PROPERTY_VARIANTS (line 189) | const PROPERTY_VARIANTS = {
constant STATE_LIST (line 201) | const STATE_LIST = [
constant ALIASES (line 236) | const ALIASES = {
constant DEFAULT_VALUES (line 364) | const DEFAULT_VALUES = {
constant VALUE_WRAPPER (line 457) | const VALUE_WRAPPER = {
FILE: src/mixins.ts
type UserFunctionCallbackResult (line 21) | type UserFunctionCallbackResult = {[key: string]: string}|string;
type UserFunctionCallback (line 22) | type UserFunctionCallback =
constant MIXIN_ARGS_REGEX (line 27) | const MIXIN_ARGS_REGEX = /\${([0-9]+)(?:=([^}]+))?}/g;
function resolveMixin (line 75) | function resolveMixin(context: MixinContext, name: string, args: string[...
function registerMixin (line 83) | function registerMixin(name: string, callback: UserFunctionCallback): vo...
FILE: src/observers.ts
function observeTree (line 24) | function observeTree(element: HTMLElement, handler: StyleHandler): void {
function observeDocument (line 34) | function observeDocument(document: Document, handler: StyleHandler): void {
function observeElement (line 50) | function observeElement(element: Element, handler: StyleHandler): void {
function observeShadow (line 71) | function observeShadow(shadow: ShadowRoot, handler: StyleHandler) {
function observe (line 87) | function observe(element: HTMLElement, handler: StyleHandler): void {
FILE: src/variables.ts
constant ELEVATION_UMBRA (line 19) | const ELEVATION_UMBRA = [
constant ELEVATION_PENUMBRA (line 27) | const ELEVATION_PENUMBRA = [
constant ELEVATION_AMBIENT (line 35) | const ELEVATION_AMBIENT = [
constant BORDER_RADIUS (line 43) | const BORDER_RADIUS = {
constant LETTER_SPACING (line 53) | const LETTER_SPACING = {
constant LINE_HEIGHT (line 62) | const LINE_HEIGHT = {
constant FONT_SIZES (line 71) | const FONT_SIZES = {
constant FONT_SIZE_LEADING (line 87) | const FONT_SIZE_LEADING = {
constant FONT_FAMILIES (line 103) | const FONT_FAMILIES = {
constant SHADOW (line 109) | const SHADOW = [
function generateRootVariables (line 118) | function generateRootVariables(settings: UserSettings) {
FILE: types/Root.d.ts
class RootClass (line 1) | class RootClass {
FILE: types/StyleHandler.d.ts
type AssemblerEntry (line 2) | type AssemblerEntry = {
class StyleHandler (line 7) | class StyleHandler {
FILE: types/generators.d.ts
type GeneratedStyles (line 2) | type GeneratedStyles = {
FILE: types/helpers.d.ts
type UserSettings (line 1) | type UserSettings = {
type MixinContext (line 25) | interface MixinContext {
type StyleType (line 29) | type StyleType = string | {
FILE: types/index.d.ts
type Document (line 4) | interface Document {
type Window (line 7) | interface Window {
type CSSStyleSheet (line 10) | interface CSSStyleSheet {
type ShadowRoot (line 14) | interface ShadowRoot {
FILE: types/mixins.d.ts
type UserFunctionCallbackResult (line 2) | type UserFunctionCallbackResult = {
type UserFunctionCallback (line 5) | type UserFunctionCallback = (() => UserFunctionCallbackResult) | ((setti...
Condensed preview — 33 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (281K chars).
[
{
"path": ".gitattributes",
"chars": 25,
"preview": "dist/* linguist-generated"
},
{
"path": ".github/workflows/tests.yml",
"chars": 202,
"preview": "name: Tests\non: push\njobs:\n build:\n runs-on: ubuntu-latest\n steps:\n - uses: actions/checkout@v2\n - name"
},
{
"path": ".gitignore",
"chars": 1639,
"preview": ".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# Diagnos"
},
{
"path": "LICENSE",
"chars": 11357,
"preview": " Apache License\n Version 2.0, January 2004\n "
},
{
"path": "README.md",
"chars": 3232,
"preview": "<hr>\n<div align=center><h1>Assembler CSS</h1></div>\n<div align=center><a href=\"https://asmcss.com/\"><img width=600 src=\""
},
{
"path": "dist/assembler.cjs.js",
"chars": 55167,
"preview": "'use strict';\n\nObject.defineProperty(exports, '__esModule', { value: true });\n\n/*\n * Copyright 2021 Zindex Software\n *\n "
},
{
"path": "dist/assembler.es.js",
"chars": 54993,
"preview": "/*\n * Copyright 2021 Zindex Software\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may no"
},
{
"path": "dist/assembler.js",
"chars": 62257,
"preview": "(function (global, factory) {\n typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :\n "
},
{
"path": "package.json",
"chars": 1089,
"preview": "{\n \"name\": \"@asmcss/assembler\",\n \"version\": \"0.8.3\",\n \"main\": \"dist/assembler.cjs.js\",\n \"module\": \"dist/assembler.es"
},
{
"path": "rollup.config.js",
"chars": 1723,
"preview": "import importResolver from 'rollup-plugin-import-resolver';\nimport ts from \"@rollup/plugin-typescript\";\nimport {terser} "
},
{
"path": "src/Root.ts",
"chars": 6024,
"preview": "/* \n * Copyright 2021 Zindex Software\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may n"
},
{
"path": "src/StyleHandler.ts",
"chars": 12399,
"preview": "/* \n * Copyright 2021 Zindex Software\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may n"
},
{
"path": "src/autoload.ts",
"chars": 705,
"preview": "/*\n * Copyright 2022 Zindex Software\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may no"
},
{
"path": "src/generators.ts",
"chars": 4515,
"preview": "/*\n * Copyright 2021 Zindex Software\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may no"
},
{
"path": "src/helpers.ts",
"chars": 5637,
"preview": "/* \n * Copyright 2021 Zindex Software\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may n"
},
{
"path": "src/index.ts",
"chars": 3859,
"preview": "/*\n * Copyright 2021 Zindex Software\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may no"
},
{
"path": "src/list.ts",
"chars": 15019,
"preview": "/*\n * Copyright 2021 Zindex Software\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may no"
},
{
"path": "src/mixins.ts",
"chars": 3730,
"preview": "/* \n * Copyright 2021 Zindex Software\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may n"
},
{
"path": "src/observers.ts",
"chars": 3822,
"preview": "/* \n * Copyright 2021 Zindex Software\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may n"
},
{
"path": "src/variables.ts",
"chars": 5652,
"preview": "/* \n * Copyright 2021 Zindex Software\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may n"
},
{
"path": "tests/mocks/mock.js",
"chars": 147,
"preview": "const crt = document.createElement('script');\ndocument.head.appendChild(crt);\nObject.defineProperty(document, 'currentSc"
},
{
"path": "tests/properties/color.test.js",
"chars": 60,
"preview": "test('fake test', () => {\n expect(true).toBe(true);\n});\n\n"
},
{
"path": "tsconfig.json",
"chars": 317,
"preview": "{\n \"lib\": [\"es2020\", \"dom\"],\n \"compilerOptions\": {\n \"moduleResolution\": \"Node\",\n \"target\": \"ES2020\",\n \"declar"
},
{
"path": "types/Root.d.ts",
"chars": 422,
"preview": "declare class RootClass {\n private cache;\n private scopes;\n private registeredProperties;\n constructor();\n "
},
{
"path": "types/StyleHandler.d.ts",
"chars": 970,
"preview": "import type { UserSettings } from \"./helpers\";\ndeclare type AssemblerEntry = {\n n: string;\n p: string;\n e: stri"
},
{
"path": "types/autoload.d.ts",
"chars": 25,
"preview": "export * from \"./index\";\n"
},
{
"path": "types/generators.d.ts",
"chars": 222,
"preview": "import type { UserSettings } from \"./helpers\";\ndeclare type GeneratedStyles = {\n content: string;\n tracker: Set<st"
},
{
"path": "types/helpers.d.ts",
"chars": 1237,
"preview": "export declare type UserSettings = {\n enabled: boolean;\n generate: boolean;\n constructable: boolean;\n cache:"
},
{
"path": "types/index.d.ts",
"chars": 641,
"preview": "export { registerMixin } from \"./mixins\";\nexport { style } from \"./helpers\";\ndeclare global {\n interface Document {\n "
},
{
"path": "types/list.d.ts",
"chars": 6182,
"preview": "import type StyleHandler from \"./StyleHandler\";\nexport declare const PROPERTY_LIST: string[];\nexport declare const PROPE"
},
{
"path": "types/mixins.d.ts",
"chars": 554,
"preview": "import type { UserSettings, MixinContext } from \"./helpers\";\ndeclare type UserFunctionCallbackResult = {\n [key: strin"
},
{
"path": "types/observers.d.ts",
"chars": 309,
"preview": "import StyleHandler from \"./StyleHandler\";\nexport declare function observeTree(element: HTMLElement, handler: StyleHandl"
},
{
"path": "types/variables.d.ts",
"chars": 126,
"preview": "import type { UserSettings } from \"./helpers\";\nexport declare function generateRootVariables(settings: UserSettings): st"
}
]
About this extraction
This page contains the full source code of the asmcss/assembler GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 33 files (258.1 KB), approximately 67.1k tokens, and a symbol index with 260 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.