From f48ba4340f3c97dde7b34d863eef227f9cd8fd1c Mon Sep 17 00:00:00 2001
From: Harlan Wilton
Date: Sun, 9 May 2021 13:01:53 +1000
Subject: [PATCH] feat: build mode WIP
---
example/nuxt/pages/index.vue | 9 +
example/nuxt/windi.config.ts | 1 +
example/vue2/public/index.html | 2 +-
example/vue2/src/App.vue | 16 +-
example/vue2/tmp.css | 2231 +++++++++++++++++++++++++++++
src/loaders/transform-css.ts | 5 +
src/loaders/transform-template.ts | 87 +-
src/loaders/virtual-module.ts | 20 +-
8 files changed, 2354 insertions(+), 17 deletions(-)
create mode 100644 example/vue2/tmp.css
diff --git a/example/nuxt/pages/index.vue b/example/nuxt/pages/index.vue
index 239b7fe..4687db3 100644
--- a/example/nuxt/pages/index.vue
+++ b/example/nuxt/pages/index.vue
@@ -18,6 +18,15 @@
SCSS global
+
diff --git a/example/nuxt/windi.config.ts b/example/nuxt/windi.config.ts
index b41e61f..edc1439 100644
--- a/example/nuxt/windi.config.ts
+++ b/example/nuxt/windi.config.ts
@@ -2,6 +2,7 @@ import { defineConfig } from 'windicss/helpers'
export default defineConfig({
extract: {
+ include: ['**/*.{vue,css,html}'],
exclude: ['node_modules', '.git', 'dist', 'mock', '.umi'],
},
attributify: true,
diff --git a/example/vue2/public/index.html b/example/vue2/public/index.html
index ada46da..92fba24 100644
--- a/example/vue2/public/index.html
+++ b/example/vue2/public/index.html
@@ -7,7 +7,7 @@
<%= htmlWebpackPlugin.options.title %>
-
+
diff --git a/example/vue2/src/App.vue b/example/vue2/src/App.vue
index 34e0abc..de9f3be 100644
--- a/example/vue2/src/App.vue
+++ b/example/vue2/src/App.vue
@@ -5,11 +5,20 @@
Windi test CSS
Hello World
+
@@ -29,8 +38,6 @@ import LessScoped from './components/LessScoped'
import CssScoped from './components/CssScoped'
import 'windi.css'
import './assets/test.css'
-import videojs from "video.js";
-import "video.js/dist/video-js.css";
export default {
name: 'App',
@@ -42,8 +49,5 @@ export default {
LessScoped,
CssScoped
},
- mounted () {
- console.log(videojs)
- }
}
diff --git a/example/vue2/tmp.css b/example/vue2/tmp.css
new file mode 100644
index 0000000..94a4d88
--- /dev/null
+++ b/example/vue2/tmp.css
@@ -0,0 +1,2231 @@
+*, :after, :before {
+ box-sizing: border-box;
+ border: 0 solid #e5e7eb
+}
+
+* {
+ --tw-ring-inset: var(--tw-empty,); /*!*//*!*/
+ --tw-ring-offset-width: 0px;
+ --tw-ring-offset-color: #fff;
+ --tw-ring-color: rgba(0, 75, 133, 0.5);
+ --tw-ring-offset-shadow: 0 0 transparent;
+ --tw-ring-shadow: 0 0 transparent;
+ --tw-shadow: 0 0 transparent
+}
+
+:root {
+ -moz-tab-size: 4;
+ -o-tab-size: 4;
+ tab-size: 4
+}
+
+:-moz-focusring {
+ outline: 1px dotted ButtonText
+}
+
+:-moz-ui-invalid {
+ box-shadow: none
+}
+
+::moz-focus-inner {
+ border-style: none;
+ padding: 0
+}
+
+::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
+ height: auto
+}
+
+::-webkit-search-decoration {
+ -webkit-appearance: none
+}
+
+::-webkit-file-upload-button {
+ -webkit-appearance: button;
+ font: inherit
+}
+
+[type=search] {
+ -webkit-appearance: textfield;
+ outline-offset: -2px
+}
+
+abbr[title] {
+ -webkit-text-decoration: underline dotted;
+ text-decoration: underline dotted
+}
+
+body {
+ margin: 0;
+ font-family: inherit;
+ line-height: inherit
+}
+
+html {
+ -webkit-text-size-adjust: 100%;
+ font-family: Pangea, sans-serif;
+ line-height: 1.5
+}
+
+a {
+ color: inherit;
+ text-decoration: inherit
+}
+
+button, input {
+ font-family: inherit;
+ font-size: 100%;
+ line-height: 1.15;
+ margin: 0;
+ padding: 0;
+ line-height: inherit;
+ color: inherit
+}
+
+button {
+ text-transform: none;
+ background-color: transparent;
+ background-image: none
+}
+
+[type=button], [type=reset], [type=submit], button {
+ -webkit-appearance: button
+}
+
+button:focus {
+ outline: 1px dotted;
+ outline: 5px auto -webkit-focus-ring-color
+}
+
+[role=button], button {
+ cursor: pointer
+}
+
+h1, h2, h3, p {
+ margin: 0
+}
+
+h1, h2, h3 {
+ font-size: inherit;
+ font-weight: inherit
+}
+
+img {
+ border-style: solid;
+ max-width: 100%;
+ height: auto
+}
+
+input::placeholder {
+ opacity: 1;
+ color: #9ca3af
+}
+
+input::webkit-input-placeholder {
+ opacity: 1;
+ color: #9ca3af
+}
+
+input::-moz-placeholder {
+ opacity: 1;
+ color: #9ca3af
+}
+
+input:-ms-input-placeholder {
+ opacity: 1;
+ color: #9ca3af
+}
+
+input::-ms-input-placeholder {
+ opacity: 1;
+ color: #9ca3af
+}
+
+strong {
+ font-weight: bolder
+}
+
+img, svg {
+ display: block;
+ vertical-align: middle
+}
+
+ol, ul {
+ list-style: none;
+ margin: 0;
+ padding: 0
+}
+
+[multiple], [type=date], [type=datetime-local], [type=email], [type=month], [type=number], [type=password], [type=search], [type=tel], [type=text], [type=time], [type=url], [type=week], select, textarea {
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ appearance: none;
+ background-color: #fff;
+ border-color: #6b7280;
+ border-width: 1px;
+ border-radius: 0;
+ padding: .5rem .75rem;
+ font-size: 1rem;
+ line-height: 1.5rem
+}
+
+[multiple]:focus, [type=date]:focus, [type=datetime-local]:focus, [type=email]:focus, [type=month]:focus, [type=number]:focus, [type=password]:focus, [type=search]:focus, [type=tel]:focus, [type=text]:focus, [type=time]:focus, [type=url]:focus, [type=week]:focus, select:focus, textarea:focus {
+ outline: 2px solid transparent;
+ outline-offset: 2px;
+ --tw-ring-inset: var(--tw-empty,); /*!*//*!*/
+ --tw-ring-offset-width: 0px;
+ --tw-ring-offset-color: #fff;
+ --tw-ring-color: #004478;
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 transparent;
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 transparent);
+ border-color: #004478
+}
+
+[type=checkbox], [type=radio] {
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ appearance: none;
+ padding: 0;
+ -webkit-print-color-adjust: exact;
+ color-adjust: exact;
+ display: inline-block;
+ vertical-align: middle;
+ background-origin: border-box;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ flex-shrink: 0;
+ height: 1rem;
+ width: 1rem;
+ color: #004478;
+ background-color: #fff;
+ border-color: #6b7280;
+ border-width: 1px
+}
+
+[type=checkbox]:focus, [type=radio]:focus {
+ outline: 2px solid transparent;
+ outline-offset: 2px;
+ --tw-ring-inset: var(--tw-empty,); /*!*//*!*/
+ --tw-ring-offset-width: 2px;
+ --tw-ring-offset-color: #fff;
+ --tw-ring-color: #004478;
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 transparent;
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 transparent);
+ border-color: #6b7280
+}
+
+[type=checkbox]:checked, [type=radio]:checked {
+ background-size: 100% 100%;
+ background-position: 50%;
+ background-repeat: no-repeat
+}
+
+[type=checkbox]:checked, [type=checkbox]:checked:focus, [type=checkbox]:checked:hover, [type=radio]:checked, [type=radio]:checked:focus, [type=radio]:checked:hover {
+ border-color: transparent;
+ background-color: currentColor
+}
+
+[type=checkbox]:indeterminate:focus, [type=checkbox]:indeterminate:hover {
+ border-color: transparent;
+ background-color: currentColor
+}
+
+::-webkit-datetime-edit-fields-wrapper {
+ padding: 0
+}
+
+::-webkit-date-and-time-value {
+ min-height: 1.5em
+}
+
+[multiple] {
+ background-image: none;
+ background-position: 0 0;
+ background-repeat: unset;
+ background-size: auto auto;
+ background-size: initial;
+ padding-right: .75rem;
+ -webkit-print-color-adjust: unset;
+ color-adjust: unset
+}
+
+[type=checkbox] {
+ border-radius: 0
+}
+
+[type=radio] {
+ border-radius: 100%
+}
+
+[type=checkbox]:checked {
+ background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 16 16' fill='%23fff' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3E%3C/svg%3E")
+}
+
+[type=radio]:checked {
+ background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 16 16' fill='%23fff' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='3'/%3E%3C/svg%3E")
+}
+
+[type=checkbox]:indeterminate {
+ background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cpath stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3E%3C/svg%3E");
+ border-color: transparent;
+ background-color: currentColor;
+ background-size: 100% 100%;
+ background-position: 50%;
+ background-repeat: no-repeat
+}
+
+[type=file] {
+ background: unset;
+ border-color: inherit;
+ border-width: 0;
+ border-radius: 0;
+ padding: 0;
+ font-size: unset;
+ line-height: inherit
+}
+
+[type=file]:focus {
+ outline: 1px solid ButtonText;
+ outline: 1px auto -webkit-focus-ring-color
+}
+
+input::-moz-placeholder, textarea::-moz-placeholder {
+ color: #6b7280;
+ opacity: 1
+}
+
+input:-ms-input-placeholder, textarea:-ms-input-placeholder {
+ color: #6b7280;
+ opacity: 1
+}
+
+input::placeholder, textarea::placeholder {
+ color: #6b7280;
+ opacity: 1
+}
+
+select {
+ background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
+ background-position: right .5rem center;
+ background-repeat: no-repeat;
+ background-size: 1.5em 1.5em;
+ padding-right: 2.5rem;
+ -webkit-print-color-adjust: exact;
+ color-adjust: exact
+}
+
+.container {
+ width: 100%
+}
+
+.prose {
+ color: #374151;
+ max-width: 65ch;
+ font-size: 1rem;
+ line-height: 1.75
+}
+
+.prose [class~=lead] {
+ color: #4b5563;
+ font-size: 1.25em;
+ line-height: 1.6;
+ margin-top: 1.2em;
+ margin-bottom: 1.2em
+}
+
+.prose a {
+ color: #003864;
+ text-decoration: none;
+ text-decoration: initial;
+ font-weight: 500
+}
+
+.prose strong {
+ color: #111827;
+ font-weight: 500
+}
+
+.prose ol[type=A] {
+ --list-counter-style: upper-alpha
+}
+
+.prose ol[type=a] {
+ --list-counter-style: lower-alpha
+}
+
+.prose ol[type="A s"] {
+ --list-counter-style: upper-alpha
+}
+
+.prose ol[type="a s"] {
+ --list-counter-style: lower-alpha
+}
+
+.prose ol[type=I] {
+ --list-counter-style: upper-roman
+}
+
+.prose ol[type=i] {
+ --list-counter-style: lower-roman
+}
+
+.prose ol[type="I s"] {
+ --list-counter-style: upper-roman
+}
+
+.prose ol[type="i s"] {
+ --list-counter-style: lower-roman
+}
+
+.prose ol[type="1"] {
+ --list-counter-style: decimal
+}
+
+.prose ol > li {
+ position: relative;
+ padding-left: 1.75em
+}
+
+.prose ol > li:before {
+ content: counter(list-item, decimal) ".";
+ content: counter(list-item, var(--list-counter-style, decimal)) ".";
+ position: absolute;
+ font-weight: 400;
+ color: #6b7280;
+ left: 0
+}
+
+.prose ul > li {
+ position: relative;
+ padding-left: 1.75em
+}
+
+.prose ul > li:before {
+ content: "";
+ position: absolute;
+ background-color: #d1d5db;
+ border-radius: 50%;
+ width: .375em;
+ height: .375em;
+ top: .6875em;
+ left: .25em
+}
+
+.prose hr {
+ border-color: #e5e7eb;
+ margin-top: 3em;
+ margin-bottom: 3em
+}
+
+.prose blockquote {
+ font-weight: 500;
+ font-style: italic;
+ color: #111827;
+ border-left-width: .25rem;
+ border-left-color: #e5e7eb;
+ quotes: "\201C" "\201D" "\2018" "\2019";
+ margin-top: 1.6em;
+ margin-bottom: 1.6em;
+ padding-left: 1em
+}
+
+.prose h1 {
+ color: #111827;
+ font-weight: 800;
+ font-size: 2.25em;
+ margin-top: 0;
+ margin-bottom: .8888889em;
+ line-height: 1.1111111
+}
+
+.prose h2 {
+ color: #111827;
+ font-weight: 700;
+ font-size: 1.5em;
+ margin-top: 2em;
+ margin-bottom: 1em;
+ line-height: 1.3333333
+}
+
+.prose h3 {
+ font-size: 1.25em;
+ margin-top: 1.6em;
+ margin-bottom: .6em;
+ line-height: 1.6
+}
+
+.prose h3, .prose h4 {
+ color: #111827;
+ font-weight: 600
+}
+
+.prose h4 {
+ margin-top: 1.5em;
+ margin-bottom: .5em;
+ line-height: 1.5
+}
+
+.prose figure figcaption {
+ color: #6b7280;
+ font-size: .875em;
+ line-height: 1.4285714;
+ margin-top: .8571429em
+}
+
+.prose code {
+ color: #111827;
+ font-weight: 600;
+ font-size: .875em
+}
+
+.prose code:after, .prose code:before {
+ content: "`"
+}
+
+.prose a code {
+ color: #111827
+}
+
+.prose pre {
+ color: #e5e7eb;
+ background-color: #1f2937;
+ overflow-x: auto;
+ font-size: .875em;
+ line-height: 1.7142857;
+ margin-top: 1.7142857em;
+ margin-bottom: 1.7142857em;
+ border-radius: .375rem;
+ padding: .8571429em 1.1428571em
+}
+
+.prose pre code {
+ background-color: transparent;
+ border-width: 0;
+ border-radius: 0;
+ padding: 0;
+ font-weight: 400;
+ color: inherit;
+ font-size: inherit;
+ font-family: inherit;
+ line-height: inherit
+}
+
+.prose pre code:after, .prose pre code:before {
+ content: none
+}
+
+.prose table {
+ width: 100%;
+ table-layout: auto;
+ text-align: left;
+ margin-top: 2em;
+ margin-bottom: 2em;
+ font-size: .875rem;
+ line-height: 1.25rem
+}
+
+.prose thead {
+ color: #4b5563;
+ font-weight: 600;
+ border-bottom-width: 1px;
+ border-bottom-color: #e5e7eb
+}
+
+.prose thead th {
+ vertical-align: bottom;
+ padding: 0 .5714286em .5714286em;
+ font-weight: 600
+}
+
+.prose tbody tr {
+ border-bottom-color: #e5e7eb
+}
+
+.prose tbody tr, .prose tbody tr:last-child {
+ border-bottom-width: 1px
+}
+
+.prose tbody td {
+ vertical-align: top;
+ padding: .5714286em
+}
+
+.prose p {
+ margin-top: 1.25em;
+ margin-bottom: 1.25em
+}
+
+.prose img {
+ border-radius: 5px
+}
+
+.prose img, .prose video {
+ margin-top: 2em;
+ margin-bottom: 2em
+}
+
+.prose figure {
+ margin: 2em auto;
+ max-width: 100%
+}
+
+.prose figure > * {
+ margin-top: 0;
+ margin-bottom: 0
+}
+
+.prose h2 code {
+ font-size: .875em
+}
+
+.prose h3 code {
+ font-size: .9em
+}
+
+.prose ol, .prose ul {
+ margin-top: 1.25em;
+ margin-bottom: 1.25em;
+ list-style-type: none
+}
+
+.prose li {
+ margin-top: .5em;
+ margin-bottom: .5em
+}
+
+.prose > ul > li p {
+ margin-top: .75em;
+ margin-bottom: .75em
+}
+
+.prose > ul > li > :first-child {
+ margin-top: 1.25em
+}
+
+.prose > ul > li > :last-child {
+ margin-bottom: 1.25em
+}
+
+.prose > ol > li > :first-child {
+ margin-top: 1.25em
+}
+
+.prose > ol > li > :last-child {
+ margin-bottom: 1.25em
+}
+
+.prose ol ol, .prose ol ul, .prose ul ol, .prose ul ul {
+ margin-top: .75em;
+ margin-bottom: .75em
+}
+
+.prose h2 + *, .prose h3 + *, .prose h4 + *, .prose hr + * {
+ margin-top: 0
+}
+
+.prose thead th:first-child {
+ padding-left: 0
+}
+
+.prose thead th:last-child {
+ padding-right: 0
+}
+
+.prose tbody td:first-child {
+ padding-left: 0
+}
+
+.prose tbody td:last-child {
+ padding-right: 0
+}
+
+.prose > :first-child {
+ margin-top: 0
+}
+
+.prose > :last-child {
+ margin-bottom: 0
+}
+
+.prose h1, .prose h2 {
+ letter-spacing: -.025em;
+ font-weight: 600
+}
+
+.prose h1, .prose h2, .prose h3, .prose h4 {
+ font-weight: 600;
+ color: #002541
+}
+
+.prose a strong {
+ color: inherit;
+ font-weight: inherit
+}
+
+.prose tbody code {
+ font-size: .75rem
+}
+
+.prose-lg {
+ font-size: 1.125rem;
+ line-height: 1.7777778;
+ max-width: 70ch
+}
+
+.prose-lg p {
+ margin-top: 1.3333333em;
+ margin-bottom: 1.3333333em
+}
+
+.prose-lg [class~=lead] {
+ font-size: 1.2222222em;
+ line-height: 1.4545455;
+ margin-top: 1.0909091em;
+ margin-bottom: 1.0909091em
+}
+
+.prose-lg blockquote {
+ margin-top: 1.6666667em;
+ margin-bottom: 1.6666667em;
+ padding-left: 1em
+}
+
+.prose-lg h1 {
+ font-size: 2.6666667em;
+ margin-top: 0;
+ margin-bottom: .8333333em;
+ line-height: 1.3
+}
+
+.prose-lg h2 {
+ font-size: 1.6666667em;
+ margin-top: 1.8666667em;
+ margin-bottom: 1.0666667em;
+ line-height: 1.3333333
+}
+
+.prose-lg h3 {
+ font-size: 1.3333333em;
+ margin-top: 1.6666667em;
+ margin-bottom: .6666667em;
+ line-height: 1.5
+}
+
+.prose-lg h4 {
+ margin-top: 1.7777778em;
+ margin-bottom: .4444444em;
+ line-height: 1.5555556
+}
+
+.prose-lg figure, .prose-lg img, .prose-lg video {
+ margin-top: 1.7777778em;
+ margin-bottom: 1.7777778em
+}
+
+.prose-lg figure > * {
+ margin-top: 0;
+ margin-bottom: 0
+}
+
+.prose-lg figure figcaption {
+ font-size: .8888889em;
+ line-height: 1.5;
+ margin-top: 1em
+}
+
+.prose-lg code {
+ font-size: .8888889em
+}
+
+.prose-lg h2 code {
+ font-size: .8666667em
+}
+
+.prose-lg h3 code {
+ font-size: .875em
+}
+
+.prose-lg pre {
+ font-size: .8888889em;
+ line-height: 1.75;
+ margin-top: 2em;
+ margin-bottom: 2em;
+ border-radius: .375rem;
+ padding: 1em 1.5em
+}
+
+.prose-lg ol, .prose-lg ul {
+ margin-top: 1.3333333em;
+ margin-bottom: 1.3333333em
+}
+
+.prose-lg li {
+ margin-top: .6666667em;
+ margin-bottom: .6666667em
+}
+
+.prose-lg ol > li {
+ padding-left: 1.6666667em
+}
+
+.prose-lg ol > li:before {
+ left: 0
+}
+
+.prose-lg ul > li {
+ padding-left: 1.6666667em
+}
+
+.prose-lg ul > li:before {
+ width: .3333333em;
+ height: .3333333em;
+ top: .72222em;
+ left: .2222222em
+}
+
+.prose-lg > ul > li p {
+ margin-top: .8888889em;
+ margin-bottom: .8888889em
+}
+
+.prose-lg > ul > li > :first-child {
+ margin-top: 1.3333333em
+}
+
+.prose-lg > ul > li > :last-child {
+ margin-bottom: 1.3333333em
+}
+
+.prose-lg > ol > li > :first-child {
+ margin-top: 1.3333333em
+}
+
+.prose-lg > ol > li > :last-child {
+ margin-bottom: 1.3333333em
+}
+
+.prose-lg ol ol, .prose-lg ol ul, .prose-lg ul ol, .prose-lg ul ul {
+ margin-top: .8888889em;
+ margin-bottom: .8888889em
+}
+
+.prose-lg hr {
+ margin-top: 3.1111111em;
+ margin-bottom: 3.1111111em
+}
+
+.prose-lg h2 + *, .prose-lg h3 + *, .prose-lg h4 + *, .prose-lg hr + * {
+ margin-top: 0
+}
+
+.prose-lg table {
+ font-size: .8888889em;
+ line-height: 1.5
+}
+
+.prose-lg thead th {
+ padding-right: .75em;
+ padding-bottom: .75em;
+ padding-left: .75em
+}
+
+.prose-lg thead th:first-child {
+ padding-left: 0
+}
+
+.prose-lg thead th:last-child {
+ padding-right: 0
+}
+
+.prose-lg tbody td {
+ padding: .75em
+}
+
+.prose-lg tbody td:first-child {
+ padding-left: 0
+}
+
+.prose-lg tbody td:last-child {
+ padding-right: 0
+}
+
+.prose-lg > :first-child {
+ margin-top: 0
+}
+
+.prose-lg > :last-child {
+ margin-bottom: 0
+}
+
+.space-y-1 > :not([hidden]) ~ :not([hidden]) {
+ --tw-space-y-reverse: 0;
+ margin-top: calc(.25rem * (1 - var(--tw-space-y-reverse)));
+ margin-bottom: calc(.25rem * var(--tw-space-y-reverse))
+}
+
+.sr-only {
+ position: absolute;
+ width: 1px;
+ height: 1px;
+ padding: 0;
+ margin: -1px;
+ overflow: hidden;
+ clip: rect(0, 0, 0, 0);
+ white-space: nowrap;
+ border-width: 0
+}
+
+.bg-blue-200 {
+ --tw-bg-opacity: 1;
+ background-color: rgba(191, 210, 225, var(--tw-bg-opacity))
+}
+
+.bg-white {
+ --tw-bg-opacity: 1;
+ background-color: rgba(255, 255, 255, var(--tw-bg-opacity))
+}
+
+.bg-green-50 {
+ --tw-bg-opacity: 1;
+ background-color: rgba(236, 253, 245, var(--tw-bg-opacity))
+}
+
+.bg-yellow-50 {
+ --tw-bg-opacity: 1;
+ background-color: rgba(255, 251, 235, var(--tw-bg-opacity))
+}
+
+.bg-blue-700 {
+ --tw-bg-opacity: 1;
+ background-color: rgba(0, 56, 100, var(--tw-bg-opacity))
+}
+
+.bg-blue-500 {
+ --tw-bg-opacity: 1;
+ background-color: rgba(0, 75, 133, var(--tw-bg-opacity))
+}
+
+.bg-blue-50 {
+ --tw-bg-opacity: 1;
+ background-color: rgba(242, 246, 249, var(--tw-bg-opacity))
+}
+
+.bg-orange-400 {
+ --tw-bg-opacity: 1;
+ background-color: rgba(251, 146, 60, var(--tw-bg-opacity))
+}
+
+.bg-orange-100 {
+ --tw-bg-opacity: 1;
+ background-color: rgba(255, 237, 213, var(--tw-bg-opacity))
+}
+
+.bg-gray-200 {
+ --tw-bg-opacity: 1;
+ background-color: rgba(229, 231, 235, var(--tw-bg-opacity))
+}
+
+.bg-pink-500 {
+ --tw-bg-opacity: 1;
+ background-color: rgba(236, 72, 153, var(--tw-bg-opacity))
+}
+
+.bg-blue-100 {
+ --tw-bg-opacity: 1;
+ background-color: rgba(230, 237, 243, var(--tw-bg-opacity))
+}
+
+.bg-orange-500 {
+ --tw-bg-opacity: 1;
+ background-color: rgba(249, 115, 22, var(--tw-bg-opacity))
+}
+
+.hover\:bg-gray-700:hover {
+ --tw-bg-opacity: 1;
+ background-color: rgba(55, 65, 81, var(--tw-bg-opacity))
+}
+
+.hover\:bg-blue-400:hover {
+ --tw-bg-opacity: 1;
+ background-color: rgba(77, 129, 170, var(--tw-bg-opacity))
+}
+
+.odd\:bg-blue-50:nth-child(odd) {
+ --tw-bg-opacity: 1;
+ background-color: rgba(242, 246, 249, var(--tw-bg-opacity))
+}
+
+.hover\:bg-blue-800:hover {
+ --tw-bg-opacity: 1;
+ background-color: rgba(0, 45, 80, var(--tw-bg-opacity))
+}
+
+.hover\:bg-orange-700:hover {
+ --tw-bg-opacity: 1;
+ background-color: rgba(194, 65, 12, var(--tw-bg-opacity))
+}
+
+.bg-repeat {
+ background-repeat: repeat
+}
+
+.bg-cover {
+ background-size: cover
+}
+
+.border-transparent {
+ border-color: transparent
+}
+
+.border-blue-100 {
+ --tw-border-opacity: 1;
+ border-color: rgba(230, 237, 243, var(--tw-border-opacity))
+}
+
+.border-gray-200 {
+ --tw-border-opacity: 1;
+ border-color: rgba(229, 231, 235, var(--tw-border-opacity))
+}
+
+.border-blue-400 {
+ --tw-border-opacity: 1;
+ border-color: rgba(77, 129, 170, var(--tw-border-opacity))
+}
+
+.border-blue-200 {
+ --tw-border-opacity: 1;
+ border-color: rgba(191, 210, 225, var(--tw-border-opacity))
+}
+
+.border-white {
+ --tw-border-opacity: 1;
+ border-color: rgba(255, 255, 255, var(--tw-border-opacity))
+}
+
+.border-blue-500 {
+ --tw-border-opacity: 1;
+ border-color: rgba(0, 75, 133, var(--tw-border-opacity))
+}
+
+.rounded-md {
+ border-radius: .375rem
+}
+
+.rounded {
+ border-radius: .25rem
+}
+
+.rounded-full {
+ border-radius: 9999px
+}
+
+.rounded-sm {
+ border-radius: .125rem
+}
+
+.rounded-t-md {
+ border-top-left-radius: .375rem;
+ border-top-right-radius: .375rem
+}
+
+.rounded-b-md {
+ border-bottom-right-radius: .375rem;
+ border-bottom-left-radius: .375rem
+}
+
+.rounded-l {
+ border-top-left-radius: .25rem;
+ border-bottom-left-radius: .25rem
+}
+
+.rounded-r {
+ border-top-right-radius: .25rem;
+ border-bottom-right-radius: .25rem
+}
+
+.border-2 {
+ border-width: 2px
+}
+
+.border-0 {
+ border-width: 0
+}
+
+.border-b-0 {
+ border-bottom-width: 0
+}
+
+.border-b-1 {
+ border-bottom-width: 1px
+}
+
+.border-t-2 {
+ border-top-width: 2px
+}
+
+.border-l-2 {
+ border-left-width: 2px
+}
+
+.border-r-2 {
+ border-right-width: 2px
+}
+
+.cursor-pointer {
+ cursor: pointer
+}
+
+.block {
+ display: block
+}
+
+.inline-block {
+ display: inline-block
+}
+
+.inline {
+ display: inline
+}
+
+.flex {
+ display: flex
+}
+
+.inline-flex {
+ display: inline-flex
+}
+
+.hidden {
+ display: none
+}
+
+.flex-row {
+ flex-direction: row
+}
+
+.flex-col {
+ flex-direction: column
+}
+
+.flex-wrap {
+ flex-wrap: wrap
+}
+
+.items-end {
+ align-items: flex-end
+}
+
+.items-center {
+ align-items: center
+}
+
+.self-start {
+ align-self: flex-start
+}
+
+.self-end {
+ align-self: flex-end
+}
+
+.justify-end {
+ justify-content: flex-end
+}
+
+.justify-center {
+ justify-content: center
+}
+
+.justify-between {
+ justify-content: space-between
+}
+
+.justify-around {
+ justify-content: space-around
+}
+
+.flex-grow {
+ flex-grow: 1
+}
+
+.font-semibold, .font-weight-semibold {
+ font-weight: 600
+}
+
+.font-bold {
+ font-weight: 700
+}
+
+.font-light {
+ font-weight: 300
+}
+
+.font-medium {
+ font-weight: 500
+}
+
+.h-7 {
+ height: 1.75rem
+}
+
+.h-60 {
+ height: 15rem
+}
+
+.h-4 {
+ height: 1rem
+}
+
+.h-8 {
+ height: 2rem
+}
+
+.h-10 {
+ height: 2.5rem
+}
+
+.h-200px {
+ height: 200px
+}
+
+.h-80px {
+ height: 80px
+}
+
+.h-30 {
+ height: 7.5rem
+}
+
+.h-50 {
+ height: 12.5rem
+}
+
+.h-56px {
+ height: 56px
+}
+
+.h-700px {
+ height: 700px
+}
+
+.h-48px {
+ height: 48px
+}
+
+.h-250px {
+ height: 250px
+}
+
+.h-120px {
+ height: 120px
+}
+
+.h-60px {
+ height: 60px
+}
+
+.h-24px {
+ height: 24px
+}
+
+.h-354px {
+ height: 354px
+}
+
+.h-42px {
+ height: 42px
+}
+
+.h-150px {
+ height: 150px
+}
+
+.h-35px {
+ height: 35px
+}
+
+.h-21 {
+ height: 5.25rem
+}
+
+.h-100px {
+ height: 100px
+}
+
+.text-sm {
+ font-size: .875rem;
+ line-height: 1.25rem
+}
+
+.text-lg {
+ font-size: 1.125rem;
+ line-height: 1.75rem
+}
+
+.text-4xl {
+ font-size: 2.25rem;
+ line-height: 2.5rem
+}
+
+.text-xl {
+ font-size: 1.25rem;
+ line-height: 1.75rem
+}
+
+.text-2xl {
+ font-size: 1.5rem;
+ line-height: 2rem
+}
+
+.text-3xl {
+ font-size: 1.875rem;
+ line-height: 2.25rem
+}
+
+.text-5xl {
+ font-size: 3rem;
+ line-height: 1
+}
+
+.text-xs {
+ font-size: .75rem;
+ line-height: 1rem
+}
+
+.text-base {
+ font-size: 1rem;
+ line-height: 1.5rem
+}
+
+.m-2 {
+ margin: .5rem
+}
+
+.mx-auto {
+ margin-left: auto;
+ margin-right: auto
+}
+
+.-mx-3 {
+ margin-left: -.75rem;
+ margin-right: -.75rem
+}
+
+.mx-5 {
+ margin-left: 1.25rem;
+ margin-right: 1.25rem
+}
+
+.-mx-5 {
+ margin-left: -1.25rem;
+ margin-right: -1.25rem
+}
+
+.mt-8 {
+ margin-top: 2rem
+}
+
+.mt-3 {
+ margin-top: .75rem
+}
+
+.mt-2 {
+ margin-top: .5rem
+}
+
+.mt-1 {
+ margin-top: .25rem
+}
+
+.mt-15 {
+ margin-top: 3.75rem
+}
+
+.mr-3 {
+ margin-right: .75rem
+}
+
+.mr-2 {
+ margin-right: .5rem
+}
+
+.mr-1 {
+ margin-right: .25rem
+}
+
+.mr-5 {
+ margin-right: 1.25rem
+}
+
+.mb-4 {
+ margin-bottom: 1rem
+}
+
+.mb-2 {
+ margin-bottom: .5rem
+}
+
+.mb-1 {
+ margin-bottom: .25rem
+}
+
+.mb-10 {
+ margin-bottom: 2.5rem
+}
+
+.mb-5 {
+ margin-bottom: 1.25rem
+}
+
+.mb-6 {
+ margin-bottom: 1.5rem
+}
+
+.mb-20 {
+ margin-bottom: 5rem
+}
+
+.mb-3 {
+ margin-bottom: .75rem
+}
+
+.mb-7 {
+ margin-bottom: 1.75rem
+}
+
+.mb-16 {
+ margin-bottom: 4rem
+}
+
+.mb-12 {
+ margin-bottom: 3rem
+}
+
+.-ml-30 {
+ margin-left: -7.5rem
+}
+
+.ml-3 {
+ margin-left: .75rem
+}
+
+.ml-1 {
+ margin-left: .25rem
+}
+
+.ml-2 {
+ margin-left: .5rem
+}
+
+.max-w-60ch {
+ max-width: 60ch
+}
+
+.object-cover {
+ -o-object-fit: cover;
+ object-fit: cover
+}
+
+.opacity-50 {
+ opacity: .5
+}
+
+.opacity-90 {
+ opacity: .9
+}
+
+.opacity-0 {
+ opacity: 0
+}
+
+.focus\:outline-none:focus, .outline-none {
+ outline: 2px solid transparent;
+ outline-offset: 2px
+}
+
+.overflow-hidden {
+ overflow: hidden
+}
+
+.p-7 {
+ padding: 1.75rem
+}
+
+.p-5 {
+ padding: 1.25rem
+}
+
+.p-2 {
+ padding: .5rem
+}
+
+.p-6 {
+ padding: 1.5rem
+}
+
+.p-3 {
+ padding: .75rem
+}
+
+.py-3 {
+ padding-top: .75rem;
+ padding-bottom: .75rem
+}
+
+.py-10 {
+ padding-top: 2.5rem;
+ padding-bottom: 2.5rem
+}
+
+.py-7 {
+ padding-top: 1.75rem;
+ padding-bottom: 1.75rem
+}
+
+.py-6 {
+ padding-top: 1.5rem;
+ padding-bottom: 1.5rem
+}
+
+.py-2 {
+ padding-top: .5rem;
+ padding-bottom: .5rem
+}
+
+.py-50px {
+ padding-top: 50px;
+ padding-bottom: 50px
+}
+
+.py-9 {
+ padding-top: 2.25rem;
+ padding-bottom: 2.25rem
+}
+
+.py-1 {
+ padding-top: .25rem;
+ padding-bottom: .25rem
+}
+
+.py-5 {
+ padding-top: 1.25rem;
+ padding-bottom: 1.25rem
+}
+
+.px-1 {
+ padding-left: .25rem;
+ padding-right: .25rem
+}
+
+.px-5 {
+ padding-left: 1.25rem;
+ padding-right: 1.25rem
+}
+
+.px-3 {
+ padding-left: .75rem;
+ padding-right: .75rem
+}
+
+.px-4 {
+ padding-left: 1rem;
+ padding-right: 1rem
+}
+
+.px-2 {
+ padding-left: .5rem;
+ padding-right: .5rem
+}
+
+.px-20px {
+ padding-left: 20px;
+ padding-right: 20px
+}
+
+.px {
+ padding-left: 1px;
+ padding-right: 1px
+}
+
+.pt-3 {
+ padding-top: .75rem
+}
+
+.pt-2 {
+ padding-top: .5rem
+}
+
+.pr-2 {
+ padding-right: .5rem
+}
+
+.pr-4 {
+ padding-right: 1rem
+}
+
+.pb-5 {
+ padding-bottom: 1.25rem
+}
+
+.pb-20 {
+ padding-bottom: 5rem
+}
+
+.pb-3 {
+ padding-bottom: .75rem
+}
+
+.pb-4 {
+ padding-bottom: 1rem
+}
+
+.pl-4 {
+ padding-left: 1rem
+}
+
+.static {
+ position: static
+}
+
+.absolute {
+ position: absolute
+}
+
+.relative {
+ position: relative
+}
+
+.sticky {
+ position: sticky;
+ position: -webkit-sticky
+}
+
+.inset-y-0 {
+ top: 0;
+ bottom: 0
+}
+
+.top-1 {
+ top: .25rem
+}
+
+.right-10 {
+ right: 2.5rem
+}
+
+.left-0 {
+ left: 0
+}
+
+.shadow-sm {
+ --tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05)
+}
+
+.shadow-lg, .shadow-sm {
+ box-shadow: 0 0 transparent, 0 0 transparent, var(--tw-shadow);
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 transparent), var(--tw-ring-shadow, 0 0 transparent), var(--tw-shadow)
+}
+
+.shadow-lg {
+ --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)
+}
+
+.shadow-xl {
+ --tw-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)
+}
+
+.shadow, .shadow-xl {
+ box-shadow: 0 0 transparent, 0 0 transparent, var(--tw-shadow);
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 transparent), var(--tw-ring-shadow, 0 0 transparent), var(--tw-shadow)
+}
+
+.shadow {
+ --tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)
+}
+
+.focus\:ring-2:focus {
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 transparent;
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 transparent)
+}
+
+.focus\:ring-inset:focus {
+ --tw-ring-inset: inset
+}
+
+.focus\:ring-white:focus {
+ --tw-ring-opacity: 1;
+ --tw-ring-color: rgba(255, 255, 255, var(--tw-ring-opacity))
+}
+
+.text-center {
+ text-align: center
+}
+
+.text-right {
+ text-align: right
+}
+
+.text-gray-600 {
+ --tw-text-opacity: 1;
+ color: rgba(75, 85, 99, var(--tw-text-opacity))
+}
+
+.text-gray-700 {
+ --tw-text-opacity: 1;
+ color: rgba(55, 65, 81, var(--tw-text-opacity))
+}
+
+.text-blue-900 {
+ --tw-text-opacity: 1;
+ color: rgba(0, 37, 65, var(--tw-text-opacity))
+}
+
+.text-blue-400 {
+ --tw-text-opacity: 1;
+ color: rgba(77, 129, 170, var(--tw-text-opacity))
+}
+
+.text-green-800 {
+ --tw-text-opacity: 1;
+ color: rgba(6, 95, 70, var(--tw-text-opacity))
+}
+
+.text-yellow-800 {
+ --tw-text-opacity: 1;
+ color: rgba(146, 64, 14, var(--tw-text-opacity))
+}
+
+.text-blue-800 {
+ --tw-text-opacity: 1;
+ color: rgba(0, 45, 80, var(--tw-text-opacity))
+}
+
+.text-blue-700 {
+ --tw-text-opacity: 1;
+ color: rgba(0, 56, 100, var(--tw-text-opacity))
+}
+
+.text-white {
+ --tw-text-opacity: 1;
+ color: rgba(255, 255, 255, var(--tw-text-opacity))
+}
+
+.text-blue-100 {
+ --tw-text-opacity: 1;
+ color: rgba(230, 237, 243, var(--tw-text-opacity))
+}
+
+.text-blue-300 {
+ --tw-text-opacity: 1;
+ color: rgba(153, 183, 206, var(--tw-text-opacity))
+}
+
+.text-blue-500 {
+ --tw-text-opacity: 1;
+ color: rgba(0, 75, 133, var(--tw-text-opacity))
+}
+
+.text-gray-400 {
+ --tw-text-opacity: 1;
+ color: rgba(156, 163, 175, var(--tw-text-opacity))
+}
+
+.text-gray-50 {
+ --tw-text-opacity: 1;
+ color: rgba(249, 250, 251, var(--tw-text-opacity))
+}
+
+.text-gray-200 {
+ --tw-text-opacity: 1;
+ color: rgba(229, 231, 235, var(--tw-text-opacity))
+}
+
+.text-gray-100 {
+ --tw-text-opacity: 1;
+ color: rgba(243, 244, 246, var(--tw-text-opacity))
+}
+
+.text-gray-800 {
+ --tw-text-opacity: 1;
+ color: rgba(31, 41, 55, var(--tw-text-opacity))
+}
+
+.text-gray-300 {
+ --tw-text-opacity: 1;
+ color: rgba(209, 213, 219, var(--tw-text-opacity))
+}
+
+.text-gray-500 {
+ --tw-text-opacity: 1;
+ color: rgba(107, 114, 128, var(--tw-text-opacity))
+}
+
+.text-orange-500 {
+ --tw-text-opacity: 1;
+ color: rgba(249, 115, 22, var(--tw-text-opacity))
+}
+
+.hover\:text-white:hover {
+ --tw-text-opacity: 1;
+ color: rgba(255, 255, 255, var(--tw-text-opacity))
+}
+
+.hover\:text-gray-50:hover {
+ --tw-text-opacity: 1;
+ color: rgba(249, 250, 251, var(--tw-text-opacity))
+}
+
+.capitalize {
+ text-transform: capitalize
+}
+
+.no-underline {
+ text-decoration: none
+}
+
+.whitespace-nowrap {
+ white-space: nowrap
+}
+
+.w-full {
+ width: 100%
+}
+
+.w-1\/2 {
+ width: 50%
+}
+
+.w-12 {
+ width: 3rem
+}
+
+.w-1\/4 {
+ width: 25%
+}
+
+.w-1\/3 {
+ width: 33.333333%
+}
+
+.w-screen {
+ width: 100vw
+}
+
+.w-56 {
+ width: 14rem
+}
+
+.w-5\/12 {
+ width: 41.666667%
+}
+
+.w-8 {
+ width: 2rem
+}
+
+.w-1\/6 {
+ width: 16.666667%
+}
+
+.w-2\/3 {
+ width: 66.666667%
+}
+
+.w-auto {
+ width: auto
+}
+
+.w-10 {
+ width: 2.5rem
+}
+
+.w-495px {
+ width: 495px
+}
+
+.w-1536px {
+ width: 1536px
+}
+
+.w-48px {
+ width: 48px
+}
+
+.w-366px {
+ width: 366px
+}
+
+.w-120px {
+ width: 120px
+}
+
+.w-65ch {
+ width: 65ch
+}
+
+.w-60px {
+ width: 60px
+}
+
+.w-24px {
+ width: 24px
+}
+
+.w-354px {
+ width: 354px
+}
+
+.w-531px {
+ width: 531px
+}
+
+.w-150px {
+ width: 150px
+}
+
+.w-1\/7 {
+ width: 14.285714%
+}
+
+.w-300px {
+ width: 300px
+}
+
+.w-1\/8 {
+ width: 12.5%
+}
+
+.w-200px {
+ width: 200px
+}
+
+.w-125 {
+ width: 31.25rem
+}
+
+.w-35px {
+ width: 35px
+}
+
+.w-356px {
+ width: 356px
+}
+
+.w-70ch {
+ width: 70ch
+}
+
+.w-525px {
+ width: 525px
+}
+
+.w-100 {
+ width: 25rem
+}
+
+.w-90 {
+ width: 22.5rem
+}
+
+.w-25px {
+ width: 25px
+}
+
+.w-100px {
+ width: 100px
+}
+
+.z-0 {
+ z-index: 0
+}
+
+.z-10 {
+ z-index: 10
+}
+
+.z-20 {
+ z-index: 20
+}
+
+.z-50 {
+ z-index: 50
+}
+
+.transition-all {
+ transition-property: all;
+ transition-timing-function: cubic-bezier(.4, 0, .2, 1);
+ transition-duration: .15s
+}
+
+.transition-colors {
+ transition-property: background-color, border-color, color, fill, stroke;
+ transition-timing-function: cubic-bezier(.4, 0, .2, 1);
+ transition-duration: .15s
+}
+
+.transition {
+ transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
+ transition-timing-function: cubic-bezier(.4, 0, .2, 1);
+ transition-duration: .15s
+}
+
+.duration-200 {
+ transition-duration: .2s
+}
+
+.animate-fadeIn {
+ -webkit-animation: fadeIn .2s ease-in forwards;
+ animation: fadeIn .2s ease-in forwards
+}
+
+@media (min-width: 640px) {
+ .container {
+ max-width: 640px
+ }
+
+ .sm\:mb-0 {
+ margin-bottom: 0
+ }
+}
+
+@media (min-width: 768px) {
+ .container {
+ max-width: 768px
+ }
+
+ .md\:w-1\/2 {
+ width: 50%
+ }
+}
+
+@media (min-width: 1024px) {
+ .container {
+ max-width: 1024px
+ }
+
+ .lg\:block {
+ display: block
+ }
+
+ .lg\:flex {
+ display: flex
+ }
+
+ .lg\:hidden {
+ display: none
+ }
+
+ .lg\:h-auto {
+ height: auto
+ }
+
+ .lg\:text-base {
+ font-size: 1rem;
+ line-height: 1.5rem
+ }
+
+ .lg\:mr-30 {
+ margin-right: 7.5rem
+ }
+
+ .lg\:mb-0 {
+ margin-bottom: 0
+ }
+
+ .lg\:p-6 {
+ padding: 1.5rem
+ }
+
+ .lg\:px-10 {
+ padding-left: 2.5rem;
+ padding-right: 2.5rem
+ }
+
+ .lg\:w-1\/3 {
+ width: 33.333333%
+ }
+
+ .lg\:w-3\/4 {
+ width: 75%
+ }
+
+ .lg\:w-1\/4 {
+ width: 25%
+ }
+
+ .lg\:w-15 {
+ width: 3.75rem
+ }
+}
+
+@media (min-width: 1280px) {
+ .container {
+ max-width: 1280px
+ }
+
+ .xl\:block {
+ display: block
+ }
+}
+
+@media (min-width: 1536px) {
+ .container {
+ max-width: 1536px
+ }
+}
+
+@keyframes fadeIn {
+ to {
+ opacity: 1
+ }
+}
+
+@-webkit-keyframes fadeIn {
+ to {
+ opacity: 1
+ }
+}
+
+.nuxt-progress {
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ height: 2px;
+ width: 0;
+ opacity: 1;
+ transition: width .1s, opacity .4s;
+ background-color: #000;
+ z-index: 999999
+}
+
+.nuxt-progress.nuxt-progress-notransition {
+ transition: none
+}
+
+.nuxt-progress-failed {
+ background-color: red
+}
+
+a[data-v-42083e0f] {
+ opacity: .5
+}
+
+a[data-v-42083e0f]:not(:last-child) {
+ margin-right: 1rem
+}
+
+.toggle-input:not(checked) ~ .mega-menu[data-v-168e476b], .toggle-input[data-v-168e476b] {
+ display: none
+}
+
+.toggle-input:checked ~ .mega-menu[data-v-168e476b] {
+ display: block
+}
+
+.image-link {
+ display: flex;
+ position: relative
+}
+
+.image-link__overlay {
+ pointer-events: none;
+ opacity: 0;
+ content: " ";
+ z-index: 10;
+ position: absolute;
+ left: -120px;
+ top: -120px;
+ width: 0;
+ height: 0;
+ transform: rotate(45deg);
+ transform-origin: center right;
+ border-right: 10px solid;
+ border-top: 10px solid transparent;
+ border-bottom: 10px solid transparent;
+ --tw-text-opacity: 1;
+ color: rgba(230, 237, 243, var(--tw-text-opacity));
+ border-radius: .5rem;
+ transition-property: all;
+ transition-timing-function: cubic-bezier(.4, 0, .2, 1);
+ transition-duration: .15s;
+ transition-duration: .2s
+}
+
+.image-link:hover .image-link__overlay {
+ border-right: 400px solid;
+ border-top: 400px solid transparent;
+ border-bottom: 400px solid transparent;
+ opacity: .1
+}
+
+.breadcrumbs li:not(:last-child):after {
+ padding-left: .5rem;
+ --tw-text-opacity: 1;
+ color: rgba(156, 163, 175, var(--tw-text-opacity));
+ display: inline-block;
+ content: "/"
+}
+
+.banner[data-v-0bdb0846] {
+ background-position: 50%;
+ height: 500px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ --tw-text-opacity: 1;
+ color: rgba(255, 255, 255, var(--tw-text-opacity));
+ position: relative;
+ --tw-bg-opacity: 1;
+ background-color: rgba(0, 37, 65, var(--tw-bg-opacity))
+}
+
+.banner[data-v-0bdb0846]:before {
+ content: " ";
+ background: linear-gradient(90deg, rgba(0, 0, 0, .8), hsla(0, 0%, 100%, 0));
+ display: block;
+ position: absolute;
+ width: 100%;
+ height: 100%
+}
+
+.banner__content[data-v-0bdb0846] {
+ z-index: 10
+}
+
+.background[data-v-39ebd3c0] {
+ background-position: 50%;
+ background-size: cover
+}
+
+.background__overlay[data-v-39ebd3c0] {
+ background-color: #023761;
+ height: 100%;
+ left: 0;
+ opacity: .8;
+ position: absolute;
+ top: 0;
+ width: 100%;
+ z-index: -1
+}
+
+.link-wrap[data-v-2ef1a906] {
+ margin-bottom: .75rem
+}
+
+.title[data-v-2ef1a906] {
+ margin-bottom: 1.25rem;
+ font-size: .75rem;
+ line-height: 1rem;
+ font-weight: 700;
+ text-transform: uppercase;
+ --tw-text-opacity: 1;
+ color: rgba(191, 210, 225, var(--tw-text-opacity))
+}
diff --git a/src/loaders/transform-css.ts b/src/loaders/transform-css.ts
index 118f64f..885fa96 100644
--- a/src/loaders/transform-css.ts
+++ b/src/loaders/transform-css.ts
@@ -3,6 +3,7 @@ import type {Compiler} from '../interfaces'
import {MODULE_ID_VIRTUAL} from '../constants'
import debug from '../debug'
import {resolve} from "upath";
+const crypto = require('crypto');
function TransformCss(
this: webpack.loader.LoaderContext,
@@ -31,6 +32,10 @@ function TransformCss(
let output = source
try {
output = service.transformCSS(source, this.resource)
+ service.classesGenerated.forEach(c => {
+ const mapped = 'w' + crypto.createHash('md5').update(c).digest('hex').slice(0, 4);
+ output = output.replace(c, mapped)
+ })
debug.loader('Transformed CSS', this.resource)
} catch (e) {
this.emitWarning(`[Windi CSS] Failed to css for resource: ${this.resource}.`)
diff --git a/src/loaders/transform-template.ts b/src/loaders/transform-template.ts
index d5480da..e06a1ce 100644
--- a/src/loaders/transform-template.ts
+++ b/src/loaders/transform-template.ts
@@ -6,27 +6,38 @@ import {resolve} from "upath";
const _ = require('lodash');
const loaderUtils = require('loader-utils');
-function TransformTemplate(
+async function TransformTemplate(
this: webpack.loader.LoaderContext,
source: string,
-): string {
+): Promise {
+ const callback = this.async()!
+
if (!this._compiler) {
- return source
+ callback(null, source)
+ return
}
this.cacheable(true)
const service = (this._compiler as Compiler).$windyCSSService
if (!service) {
- return source
+ callback(null, source)
+ return
}
/*
* Via the pitcher loader we can transfer post-interpreted CSS
*/
if (this.resource.indexOf('type=style') > 0) {
- return service.transformCSS(source, this.resource)
+ callback(null, service.transformCSS(source, this.resource))
+ return
}
+ await service.extractFile(source, this.resource, true)
+ service.buildPendingStyles()
+ // const sortedGeneratedClasses = Array.from(service.classesGenerated).sort(function(a, b) {
+ // return b.length - a.length;
+ // });
+
// cache file changes to invalidate the virtual module
this.addDependency(resolve(this.rootContext, MODULE_ID_VIRTUAL))
@@ -46,12 +57,33 @@ function TransformTemplate(
*/
const options = this.query !== '' ? loaderUtils.parseQuery(this.query) : {};
const template = _.template(source, _.defaults(options, { variable: 'data' }));
+
+ let output = template.source
+ const transformed = service.transformGroups(output, false)
+ if (transformed) {
+ output = transformed.code
+ // sortedGeneratedClasses.forEach(c => {
+ // if (c.indexOf(':') !== -1) {
+ // const mapped = crypto.createHash('md5').update(c).digest('hex').slice(0, 3);
+ // output = output.replace(c, mapped)
+ // output = output.replace(c.replace(':', '\\:'), mapped)
+ // }
+ // })
+ // sortedGeneratedClasses.forEach(c => {
+ // if (c.indexOf(':') === -1) {
+ // const mapped = crypto.createHash('md5').update(c).digest('hex').slice(0, 3);
+ // output = output.replace(c, mapped)
+ // }
+ // })
+ }
+
// Require !!lodash - using !! will disable all loaders (e.g. babel)
- return 'var _ = require(' + loaderUtils.stringifyRequest(this, '!!' + require.resolve('lodash')) + ');' +
+ callback(null, 'var _ = require(' + loaderUtils.stringifyRequest(this, '!!' + require.resolve('lodash')) + ');' +
'module.exports = function (templateParams) { with(templateParams) {' +
// Execute the lodash template
- 'return (' + template.source + ')();' +
- '}}';
+ 'return (' + output + ')();' +
+ '}}')
+ return
}
let output = source
@@ -88,14 +120,51 @@ function TransformTemplate(
return `\n${service.transformCSS(css, this.resource)}\n`
})
debug.loader('template', this.resource, templateWithTransformedCSS)
+
const transformed = service.transformGroups(templateWithTransformedCSS)
if (transformed) {
+ //const doubleQuotes = /"(.*?)"/gm;
+ //const singleQuotes = /'(.*?)'/gm;
output = transformed.code
+ // output = output.replace(doubleQuotes, (match) => {
+ // sortedGeneratedClasses.forEach(c => {
+ // if (c.indexOf(':') !== -1) {
+ // const mapped = crypto.createHash('md5').update(c).digest('hex').slice(0, 3);
+ // match = match.replace(c, mapped)
+ // match = match.replace(c.replace(':', '\\:'), mapped)
+ // }
+ // })
+ // sortedGeneratedClasses.forEach(c => {
+ // if (c.indexOf(':') === -1) {
+ // const mapped = crypto.createHash('md5').update(c).digest('hex').slice(0, 3);
+ // match = match.replace(c, mapped)
+ // }
+ // })
+ // return `${match}`
+ // })
+ // output = output.replace(singleQuotes, (match) => {
+ // sortedGeneratedClasses.forEach(c => {
+ // if (c.indexOf(':') !== -1) {
+ // const mapped = crypto.createHash('md5').update(c).digest('hex').slice(0, 3);
+ // c = c.replace(':', '\\:')
+ // match = match.replace(c, mapped)
+ // }
+ // })
+ // sortedGeneratedClasses.forEach(c => {
+ // if (c.indexOf(':') === -1) {
+ // const mapped = crypto.createHash('md5').update(c).digest('hex').slice(0, 3);
+ // match = match.replace(c, mapped)
+ // }
+ // })
+ // return `${match}`
+ // })
}
+
} catch (e) {
this.emitWarning(`[Windi CSS] Failed to transform groups and css for template: ${this.resource}.`)
}
- return output
+ callback(null, output)
+ return
}
export default TransformTemplate
diff --git a/src/loaders/virtual-module.ts b/src/loaders/virtual-module.ts
index 4a3a266..c5851a0 100644
--- a/src/loaders/virtual-module.ts
+++ b/src/loaders/virtual-module.ts
@@ -22,7 +22,25 @@ async function VirtualModule(
const isBoot = source.indexOf('(boot)') > 0
const generateCSS = async () => {
try {
- const css = await service.generateCSS()
+ let css = await service.generateCSS()
+
+ // const sortedGeneratedClasses = Array.from(service.classesGenerated).sort(function(a, b) {
+ // return b.length - a.length;
+ // });
+ //
+ // sortedGeneratedClasses.forEach(c => {
+ // if (c.indexOf(':') !== -1) {
+ // const mapped = crypto.createHash('md5').update(c).digest('hex').slice(0, 3);
+ // css = css.replace(c, mapped)
+ // css = css.replace(c.replace(':', '\\:'), mapped)
+ // }
+ // })
+ // sortedGeneratedClasses.forEach(c => {
+ // if (c.indexOf(':') === -1) {
+ // const mapped = crypto.createHash('md5').update(c).digest('hex').slice(0, 3);
+ // css = css.replace(c, mapped)
+ // }
+ // })
callback(null, source + '\n' + css)
} catch (e) {
callback(e, source + '\n' + `/* Error: ${JSON.stringify(e, null, 2)}*/`)