search

unpreset / unocss-preset-theme

The dynamic theme presets for UnoCSS.
https://unocss-preset-theme.todev.cc
131 stars 11 forks source link

unocss-preset-theme not playing nice with svelte-preprocess "external files" #9

Closed CapitalMarkets closed 1 year ago

CapitalMarkets commented 1 year ago

I'm primarily a back-end developer only now starting out on my frontend journey so it's possible I've inadvertently made a mistake somewhere.

I have two Svelte components I am using to learn what is going on with npm, typescript, css, Svelte, Unocss, pre-processors, presets, variants, etc:

Checkbox.svelte which uses the external files approach provided by svelte-preprocess:

<script lang="ts" src="./Checkbox.ts"></script>
<style lang="css" src="./Checkbox.css" uno:preflights uno:safelist></style>
<template lang="html" src="./Checkbox.html"></template>

Newbox.svelte which doesn't use external files but instead places each of the template, styling and logic in the same Svelte file.

<script lang="ts">
export let name = 'NEWBOX';
export let textColor = '#ff3e00';
function reset() {
    name = 'NEWBOX';
    textColor = '#ff3e00';
}
</script>

<style lang="css" uno:preflights uno:safelist>
h1 {
    margin: auto;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 5rem;
    font-weight: lighter;
    text-align: center;
}
h2 {
        margin: auto;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 5rem;
        font-weight: lighter;
}
</style>
<template lang="html">
<h1 style="color: {textColor}" on:dblclick={reset}>Hello {name}!</h1>
<h1 style="color: {textColor}" class="spring" on:dblclick={reset}>SPR Hello {name}!</h1>
<p class="ml-10">ML10 para</p>
<p class="ml-20">ML20 para</p>
<p class="bg-red-100">BG red</p>
<p class="bg-blue-100">BG blue</p>
<p class="bg-red-100 spring">SPR BG red</p>
<p class="bg-blue-100 spring">SPR BG blue</p>
<p class="bg-red-100 winter">WIN BG red</p>
<p class="bg-blue-100 winter">WIN BG blue</p>
<p class="bg-red-100 text-primary">BG TP red</p>
<p class="bg-blue-100 text-primary">BG TP blue</p>
<p class="text-primary">TP red</p>
<p class="text-primary autumn">AUT TP</p>
<p class="text-primary spring">SPR TP</p>
<p class="text-primary summer">SUM TP</p>
<p class="text-primary winter">WIN TP</p>
<div class="logo1"></div>
<div class="logo2"></div>
</template>

THE PROBLEM

After npm run build has finished:

The only real difference between these components are their names and this External vs. non-External files usage.

GENERATED FILES (dist folder)

Checkbox.svelte

<style src=./Checkbox.css uno:preflights uno:safelist>/* layer: preflights */
*,::before,::after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom:
;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing:
;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgba(0,0,0,0);--un-ring-shadow:0
0 rgba(0,0,0,0);--un-shadow-inset: ;--un-shadow:0 0
rgba(0,0,0,0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147,197,253,0.5);--un-blur: ;--un-brightness: ;--un-contrast:
;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert:
;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness:
;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert:
;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}::backdrop{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x:
;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero:
;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0
0 rgba(0,0,0,0);--un-ring-shadow:0 0 rgba(0,0,0,0);--un-shadow-inset:
;--un-shadow:0 0 rgba(0,0,0,0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147,197,253,0.5);--un-blur:
;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale:
;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia:
;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale:
;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate:
;--un-backdrop-sepia: ;}:global(.logo1){background:url(data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 308' display='inline-block' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23FF3E00' d='M239.682 40.707C211.113-.182 154.69-12.301 113.895 13.69L42.247 59.356a82.198 82.198 0 0 0-37.135 55.056a86.566 86.566 0 0 0 8.536 55.576a82.425 82.425 0 0 0-12.296 30.719a87.596 87.596 0 0 0 14.964 66.244c28.574 40.893 84.997 53.007 125.787 27.016l71.648-45.664a82.182 82.182 0 0 0 37.135-55.057a86.601 86.601 0 0 0-8.53-55.577a82.409 82.409 0 0 0 12.29-30.718a87.573 87.573 0 0 0-14.963-66.244'/%3E%3Cpath fill='%23FFF' d='M106.889 270.841c-23.102 6.007-47.497-3.036-61.103-22.648a52.685 52.685 0 0 1-9.003-39.85a49.978 49.978 0 0 1 1.713-6.693l1.35-4.115l3.671 2.697a92.447 92.447 0 0 0 28.036 14.007l2.663.808l-.245 2.659a16.067 16.067 0 0 0 2.89 10.656a17.143 17.143 0 0 0 18.397 6.828a15.786 15.786 0 0 0 4.403-1.935l71.67-45.672a14.922 14.922 0 0 0 6.734-9.977a15.923 15.923 0 0 0-2.713-12.011a17.156 17.156 0 0 0-18.404-6.832a15.78 15.78 0 0 0-4.396 1.933l-27.35 17.434a52.298 52.298 0 0 1-14.553 6.391c-23.101 6.007-47.497-3.036-61.101-22.649a52.681 52.681 0 0 1-9.004-39.849a49.428 49.428 0 0 1 22.34-33.114l71.664-45.677a52.218 52.218 0 0 1 14.563-6.398c23.101-6.007 47.497 3.036 61.101 22.648a52.685 52.685 0 0 1 9.004 39.85a50.559 50.559 0 0 1-1.713 6.692l-1.35 4.116l-3.67-2.693a92.373 92.373 0 0 0-28.037-14.013l-2.664-.809l.246-2.658a16.099 16.099 0 0 0-2.89-10.656a17.143 17.143 0 0 0-18.398-6.828a15.786 15.786 0 0 0-4.402 1.935l-71.67 45.674a14.898 14.898 0 0 0-6.73 9.975a15.9 15.9 0 0 0 2.709 12.012a17.156 17.156 0 0 0 18.404 6.832a15.841 15.841 0 0 0 4.402-1.935l27.345-17.427a52.147 52.147 0 0 1 14.552-6.397c23.101-6.006 47.497 3.037 61.102 22.65a52.681 52.681 0 0 1 9.003 39.848a49.453 49.453 0 0 1-22.34 33.12l-71.664 45.673a52.218 52.218 0 0 1-14.563 6.398'/%3E%3C/svg%3E) no-repeat;background-size:100% 100%;background-color:transparent;display:inline-block;width:1em;height:1em;width:6em;height:6em;transform:translateX(var(--un-translate-x))
translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x))
rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y))
scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0,
0.2, 1);transition-duration:800ms;}:global(.logo2){background:url(data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 308' display='inline-block' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23FF3E00' d='M239.682 40.707C211.113-.182 154.69-12.301 113.895 13.69L42.247 59.356a82.198 82.198 0 0 0-37.135 55.056a86.566 86.566 0 0 0 8.536 55.576a82.425 82.425 0 0 0-12.296 30.719a87.596 87.596 0 0 0 14.964 66.244c28.574 40.893 84.997 53.007 125.787 27.016l71.648-45.664a82.182 82.182 0 0 0 37.135-55.057a86.601 86.601 0 0 0-8.53-55.577a82.409 82.409 0 0 0 12.29-30.718a87.573 87.573 0 0 0-14.963-66.244'/%3E%3Cpath fill='%23FFF' d='M106.889 270.841c-23.102 6.007-47.497-3.036-61.103-22.648a52.685 52.685 0 0 1-9.003-39.85a49.978 49.978 0 0 1 1.713-6.693l1.35-4.115l3.671 2.697a92.447 92.447 0 0 0 28.036 14.007l2.663.808l-.245 2.659a16.067 16.067 0 0 0 2.89 10.656a17.143 17.143 0 0 0 18.397 6.828a15.786 15.786 0 0 0 4.403-1.935l71.67-45.672a14.922 14.922 0 0 0 6.734-9.977a15.923 15.923 0 0 0-2.713-12.011a17.156 17.156 0 0 0-18.404-6.832a15.78 15.78 0 0 0-4.396 1.933l-27.35 17.434a52.298 52.298 0 0 1-14.553 6.391c-23.101 6.007-47.497-3.036-61.101-22.649a52.681 52.681 0 0 1-9.004-39.849a49.428 49.428 0 0 1 22.34-33.114l71.664-45.677a52.218 52.218 0 0 1 14.563-6.398c23.101-6.007 47.497 3.036 61.101 22.648a52.685 52.685 0 0 1 9.004 39.85a50.559 50.559 0 0 1-1.713 6.692l-1.35 4.116l-3.67-2.693a92.373 92.373 0 0 0-28.037-14.013l-2.664-.809l.246-2.658a16.099 16.099 0 0 0-2.89-10.656a17.143 17.143 0 0 0-18.398-6.828a15.786 15.786 0 0 0-4.402 1.935l-71.67 45.674a14.898 14.898 0 0 0-6.73 9.975a15.9 15.9 0 0 0 2.709 12.012a17.156 17.156 0 0 0 18.404 6.832a15.841 15.841 0 0 0 4.402-1.935l27.345-17.427a52.147 52.147 0 0 1 14.552-6.397c23.101-6.006 47.497 3.037 61.102 22.65a52.681 52.681 0 0 1 9.003 39.848a49.453 49.453 0 0 1-22.34 33.12l-71.664 45.673a52.218 52.218 0 0 1-14.563 6.398'/%3E%3C/svg%3E) no-repeat;background-size:100% 100%;background-color:transparent;display:inline-block;width:1em;height:1em;width:4em;height:4em;transform:translateX(var(--un-translate-x))
translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x))
rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y))
scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0,
0.2, 1);transition-duration:300ms;}:global(.uxi-v93l9f){margin-left:2.5rem;}:global(.uxi-yd928i){margin-left:5rem;}:global(.logo1:hover){--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-rotate:90deg;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z))
rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z))
skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y))
scaleZ(var(--un-scale-z));}:global(.logo2:hover){--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-rotate:180deg;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate))
rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x))
skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}:global(.uxi-bnio77){--un-bg-opacity:1;background-color:rgba(254,226,226,var(--un-bg-opacity));}:global(.uxi-f3dqqn){--un-bg-opacity:1;background-color:rgba(254,226,226,var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--un-preset-theme-colors-primary),var(--un-text-opacity));}:global(.uxi-gchwb0){--un-bg-opacity:1;background-color:rgba(219,234,254,var(--un-bg-opacity));}:global(.uxi-huxlha){--un-bg-opacity:1;background-color:rgba(219,234,254,var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--un-preset-theme-colors-primary),var(--un-text-opacity));}:global(.uxi-ib965a){--un-text-opacity:1;color:rgba(var(--un-preset-theme-colors-primary),var(--un-text-opacity));}</style>

<h1 style="color: {textColor}" on:dblclick={reset}>Hello {name}!</h1>
<h1 style="color: {textColor}" class="spring" on:dblclick={reset}>SPR Hello {name}!</h1>
<p class="uxi-v93l9f">ML10 para</p>
<p class="uxi-yd928i">ML20 para</p>
<p class="uxi-bnio77">BG red</p>
<p class="uxi-gchwb0">BG blue</p>
<p class="uxi-bnio77 spring">SPR BG red</p>
<p class="uxi-gchwb0 spring">SPR BG blue</p>
<p class="uxi-bnio77 winter">WIN BG red</p>
<p class="uxi-gchwb0 winter">WIN BG blue</p>
<p class="uxi-f3dqqn">BG TP red</p>
<p class="uxi-huxlha">BG TP blue</p>
<p class="uxi-ib965a">TP red</p>
<p class="uxi-ib965a autumn">AUT TP</p>
<p class="uxi-ib965a spring">SPR TP</p>
<p class="uxi-ib965a summer">SUM TP</p>
<p class="uxi-ib965a winter">WIN TP</p>
<div class="logo1"></div>
<div class="logo2"></div>

Newbox.svelte

<style uno:preflights uno:safelist>/* layer: preflights */
*,::before,::after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x:
;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero:
;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0
0 rgba(0,0,0,0);--un-ring-shadow:0 0 rgba(0,0,0,0);--un-shadow-inset:
;--un-shadow:0 0 rgba(0,0,0,0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147,197,253,0.5);--un-blur:
;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale:
;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia:
;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale:
;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate:
;--un-backdrop-sepia: ;}::backdrop{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom:
;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing:
;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgba(0,0,0,0);--un-ring-shadow:0
0 rgba(0,0,0,0);--un-shadow-inset: ;--un-shadow:0 0
rgba(0,0,0,0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147,197,253,0.5);--un-blur: ;--un-brightness: ;--un-contrast:
;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert:
;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness:
;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert:
;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}
/* layer: theme */
:root{--un-preset-theme-colors-primary:16, 34, 51;} .autumn{--un-preset-theme-colors-primary:246,
119, 47;} .spring{--un-preset-theme-colors-primary:51, 50,
240;} .summer{--un-preset-theme-colors-primary:22, 67, 47;}
.winter{--un-preset-theme-colors-primary:134, 121, 153;}:global(.logo1){background:url(data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 308' display='inline-block' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23FF3E00' d='M239.682 40.707C211.113-.182 154.69-12.301 113.895 13.69L42.247 59.356a82.198 82.198 0 0 0-37.135 55.056a86.566 86.566 0 0 0 8.536 55.576a82.425 82.425 0 0 0-12.296 30.719a87.596 87.596 0 0 0 14.964 66.244c28.574 40.893 84.997 53.007 125.787 27.016l71.648-45.664a82.182 82.182 0 0 0 37.135-55.057a86.601 86.601 0 0 0-8.53-55.577a82.409 82.409 0 0 0 12.29-30.718a87.573 87.573 0 0 0-14.963-66.244'/%3E%3Cpath fill='%23FFF' d='M106.889 270.841c-23.102 6.007-47.497-3.036-61.103-22.648a52.685 52.685 0 0 1-9.003-39.85a49.978 49.978 0 0 1 1.713-6.693l1.35-4.115l3.671 2.697a92.447 92.447 0 0 0 28.036 14.007l2.663.808l-.245 2.659a16.067 16.067 0 0 0 2.89 10.656a17.143 17.143 0 0 0 18.397 6.828a15.786 15.786 0 0 0 4.403-1.935l71.67-45.672a14.922 14.922 0 0 0 6.734-9.977a15.923 15.923 0 0 0-2.713-12.011a17.156 17.156 0 0 0-18.404-6.832a15.78 15.78 0 0 0-4.396 1.933l-27.35 17.434a52.298 52.298 0 0 1-14.553 6.391c-23.101 6.007-47.497-3.036-61.101-22.649a52.681 52.681 0 0 1-9.004-39.849a49.428 49.428 0 0 1 22.34-33.114l71.664-45.677a52.218 52.218 0 0 1 14.563-6.398c23.101-6.007 47.497 3.036 61.101 22.648a52.685 52.685 0 0 1 9.004 39.85a50.559 50.559 0 0 1-1.713 6.692l-1.35 4.116l-3.67-2.693a92.373 92.373 0 0 0-28.037-14.013l-2.664-.809l.246-2.658a16.099 16.099 0 0 0-2.89-10.656a17.143 17.143 0 0 0-18.398-6.828a15.786 15.786 0 0 0-4.402 1.935l-71.67 45.674a14.898 14.898 0 0 0-6.73 9.975a15.9 15.9 0 0 0 2.709 12.012a17.156 17.156 0 0 0 18.404 6.832a15.841 15.841 0 0 0 4.402-1.935l27.345-17.427a52.147 52.147 0 0 1 14.552-6.397c23.101-6.006 47.497 3.037 61.102 22.65a52.681 52.681 0 0 1 9.003 39.848a49.453 49.453 0 0 1-22.34 33.12l-71.664 45.673a52.218 52.218 0 0 1-14.563 6.398'/%3E%3C/svg%3E) no-repeat;background-size:100%
100%;background-color:transparent;display:inline-block;width:1em;height:1em;width:6em;height:6em;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate))
rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x))
skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(0.4,
0, 0.2, 1);transition-duration:800ms;}:global(.logo2){background:url(data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 308' display='inline-block' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23FF3E00' d='M239.682 40.707C211.113-.182 154.69-12.301 113.895 13.69L42.247 59.356a82.198 82.198 0 0 0-37.135 55.056a86.566 86.566 0 0 0 8.536 55.576a82.425 82.425 0 0 0-12.296 30.719a87.596 87.596 0 0 0 14.964 66.244c28.574 40.893 84.997 53.007 125.787 27.016l71.648-45.664a82.182 82.182 0 0 0 37.135-55.057a86.601 86.601 0 0 0-8.53-55.577a82.409 82.409 0 0 0 12.29-30.718a87.573 87.573 0 0 0-14.963-66.244'/%3E%3Cpath fill='%23FFF' d='M106.889 270.841c-23.102 6.007-47.497-3.036-61.103-22.648a52.685 52.685 0 0 1-9.003-39.85a49.978 49.978 0 0 1 1.713-6.693l1.35-4.115l3.671 2.697a92.447 92.447 0 0 0 28.036 14.007l2.663.808l-.245 2.659a16.067 16.067 0 0 0 2.89 10.656a17.143 17.143 0 0 0 18.397 6.828a15.786 15.786 0 0 0 4.403-1.935l71.67-45.672a14.922 14.922 0 0 0 6.734-9.977a15.923 15.923 0 0 0-2.713-12.011a17.156 17.156 0 0 0-18.404-6.832a15.78 15.78 0 0 0-4.396 1.933l-27.35 17.434a52.298 52.298 0 0 1-14.553 6.391c-23.101 6.007-47.497-3.036-61.101-22.649a52.681 52.681 0 0 1-9.004-39.849a49.428 49.428 0 0 1 22.34-33.114l71.664-45.677a52.218 52.218 0 0 1 14.563-6.398c23.101-6.007 47.497 3.036 61.101 22.648a52.685 52.685 0 0 1 9.004 39.85a50.559 50.559 0 0 1-1.713 6.692l-1.35 4.116l-3.67-2.693a92.373 92.373 0 0 0-28.037-14.013l-2.664-.809l.246-2.658a16.099 16.099 0 0 0-2.89-10.656a17.143 17.143 0 0 0-18.398-6.828a15.786 15.786 0 0 0-4.402 1.935l-71.67 45.674a14.898 14.898 0 0 0-6.73 9.975a15.9 15.9 0 0 0 2.709 12.012a17.156 17.156 0 0 0 18.404 6.832a15.841 15.841 0 0 0 4.402-1.935l27.345-17.427a52.147 52.147 0 0 1 14.552-6.397c23.101-6.006 47.497 3.037 61.102 22.65a52.681 52.681 0 0 1 9.003 39.848a49.453 49.453 0 0 1-22.34 33.12l-71.664 45.673a52.218 52.218 0 0 1-14.563 6.398'/%3E%3C/svg%3E) no-repeat;background-size:100%
100%;background-color:transparent;display:inline-block;width:1em;height:1em;width:4em;height:4em;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate))
rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x))
skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(0.4,
0, 0.2, 1);transition-duration:300ms;}:global(.uxi-0tr3h3){margin-left:2.5rem;}:global(.uxi-47hns6){margin-left:5rem;}:global(.logo1:hover){--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-rotate:90deg;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y))
translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y))
rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x))
scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}:global(.logo2:hover){--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-rotate:180deg;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z))
rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z))
skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y))
scaleZ(var(--un-scale-z));}:global(.uxi-20bcki){--un-bg-opacity:1;background-color:rgba(219,234,254,var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--un-preset-theme-colors-primary),var(--un-text-opacity));}:global(.uxi-3ylnrn){--un-bg-opacity:1;background-color:rgba(254,226,226,var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--un-preset-theme-colors-primary),var(--un-text-opacity));}:global(.uxi-b41fgw){--un-bg-opacity:1;background-color:rgba(219,234,254,var(--un-bg-opacity));}:global(.uxi-ny8zuf){--un-bg-opacity:1;background-color:rgba(254,226,226,var(--un-bg-opacity));}:global(.uxi-t6e0ci){--un-text-opacity:1;color:rgba(var(--un-preset-theme-colors-primary),var(--un-text-opacity));} h1 { margin:
auto; font-family: Arial, Helvetica,
sans-serif; font-size: 5rem; font-weight:
lighter; text-align: center; }
h2 { margin: auto;
font-family: Arial, Helvetica, sans-serif;
font-size: 5rem; font-weight: lighter;
} </style>

<h1 style="color: {textColor}" on:dblclick={reset}>Hello {name}!</h1>
<h1 style="color: {textColor}" class="spring" on:dblclick={reset}>SPR Hello {name}!</h1>
<p class="uxi-0tr3h3">ML10 para</p>
<p class="uxi-47hns6">ML20 para</p>
<p class="uxi-ny8zuf">BG red</p>
<p class="uxi-b41fgw">BG blue</p>
<p class="uxi-ny8zuf spring">SPR BG red</p>
<p class="uxi-b41fgw spring">SPR BG blue</p>
<p class="uxi-ny8zuf winter">WIN BG red</p>
<p class="uxi-b41fgw winter">WIN BG blue</p>
<p class="uxi-3ylnrn">BG TP red</p>
<p class="uxi-20bcki">BG TP blue</p>
<p class="uxi-t6e0ci">TP red</p>
<p class="uxi-t6e0ci autumn">AUT TP</p>
<p class="uxi-t6e0ci spring">SPR TP</p>
<p class="uxi-t6e0ci summer">SUM TP</p>
<p class="uxi-t6e0ci winter">WIN TP</p>
<div class="logo1"></div>
<div class="logo2"></div>

CONFIG THAT MAY HELP

unocss is running in svelte-scoped mode so no global css files being generated

Package.json

     "build": "svelte-kit sync && svelte-package"
      "@sveltejs/kit": "next"
      "@sveltejs/package": "next"
      "@tsconfig/svelte": "^3.0.0"
      "svelte": "^3.55.1"
      "svelte-preprocess": "^5.0.1"
      "typescript": "^4.9.5"
      "unocss": "^0.48.5"
      "unocss-preset-theme": "^0.5.0"
      "vite": "^4.1.4"

Svelte.config.js

import adapter from '@sveltejs/adapter-static';
import preprocess from 'svelte-preprocess';
import UnoCSS from 'temp-s-p-u';

/** @type {import('@sveltejs/kit').Config} */
const config = {
   kit: {
      adapter: adapter(),
      files: {
         lib: "src/main/ts"
      }
   },
   package: {
      dir: "dist"
   },
   preprocess: [
      preprocess({
      }),
      UnoCSS({
         options: {
            classPrefix: 'uxi-',
            combine: true
         },
      })
   ]
};

export default config;

Unocss.config.ts

import type {Theme} from 'unocss/preset-uno';

import {defineConfig} from 'unocss';
import {presetAttributify} from 'unocss';
import {presetIcons} from 'unocss';
import {presetUno} from 'unocss';
import {UserConfig} from 'unocss';

import presetTheme from 'unocss-preset-theme';
import Unocss from 'unocss/vite';

import defaultTheme from './src/main/ts/themes/uxi/UXI';
import themeAutumn from './src/main/ts/themes/autumn/Autumn';
import themeSpring from './src/main/ts/themes/spring/Spring';
import themeSummer from './src/main/ts/themes/summer/Summer';
import themeWinter from './src/main/ts/themes/winter/Winter';

export default defineConfig<Theme>({
   theme: defaultTheme(),
   presets: [
      presetUno(),
      presetAttributify({
         prefix: 'uno-'
      }),
      presetIcons({
         prefix: 'i-',
         extraProperties: {
            display: 'inline-block'
         }
      }),
      presetTheme<Theme>({
         theme: {
            autumn: themeAutumn(),
            spring: themeSpring(),
            summer: themeSummer(),
            winter: themeWinter(),
         }
      })
   ],
   rules: [
   ],
   shortcuts: {
      logo1: 'i-logos:svelte-icon w-6em h-6em transform transition-800 hover:rotate-90',
      logo2: 'i-logos:svelte-icon w-4em h-4em transform transition-300 hover:rotate-180'
   }
});
Dunqing commented 1 year ago

Can you provide a minimal reproduction to help me troubleshoot?

CapitalMarkets commented 1 year ago

@Dunqing hope this helps preset-theme-issue.zip

Dunqing commented 1 year ago

Sorry for taking so long to get back to you. I looked closer and found that the generated file contained text-primary CSS.

image

CapitalMarkets commented 1 year ago

Thanks for the reply and no problem about the time.

I see the point you have made - that there is CSS information for text-primary color:rgba(var(--un-preset-theme-colors-primary) but I didn't understand why this is important.

Forgive me if I misunderstand how CSS works but in my understanding - yes the CSS variable is there hold the value for text primary color but what is the value of the variable?

1) Checkbox.svelte - the themes from the plugin config (autumn, winter, spring, summer) are not shown anywhere in this component to set variable.

2) NewBox.svelte - the plugin has included css classes for the themes in the config that actually set the variable: :root{--un-preset-theme-colors-primary:16, 34, 51;} .autumn{--un-preset-theme-colors-primary:246,119, 47;} .spring{--un-preset-theme-colors-primary:51, 50,240;} .summer{--un-preset-theme-colors-primary:22, 67, 47;} .winter{--un-preset-theme-colors-primary:134, 121, 153;}

Also shouldn't we see / layer: theme / section in both example outputs if everything is ok ?

Dunqing commented 1 year ago

Yes, The Checkbox.svelte is missing layer: theme, this is not working. but I don't find the reason for this issue.

I tried adding text-red in Checkbox.html, but the generated Checkbox.svelte still isn't contain text-red class, I guess this issue maybe don't work in external files. And I also noticed that your project doesn't seem to do so as required by the unocss documentation. This could also be the reason why it doesn't work

CapitalMarkets commented 1 year ago

@Dunqing

And I also noticed that your project doesn't seem to do so as required by the unocss documentation

The unocss documentation there is talking about Extractors for SvelteKit but this one is not needed because I am using SVELTE/SVELEKIT SCOPED MODE ("There is no need to add the extractorSvelte when using svelte-scoped mode.")

:warning::warning::warning: I have good news for you :smile::smile::smile:

OK - so I did some debugging today of the plugin:

I start to add console.log() and JSON.stringify() to _nodemodules/unocss-preset-theme/dist/index.cjs

I COULD NOT FIND ANY PROBLEMS!!! :+1:

So I start to think, MAYBE the Checkbox component is broken or has other problem.

:computer: I created EXTRA-BOX (copy of NEW-BOX) - I can see theme layer and theme colours.

:computer: I split EXTRA-BOX into External files - I CAN SEE theme layer and theme colours :eyes: :eyes:

:computer: I refactor CHECK-BOX to remove External files - I still CANNOT SEE any theme layer or colours :eyes: :eyes:

SO THE PROBLEM IS NOT EXTERNAL FILES BUT THE NAME OF THE COMPONENT??? :thinking:

To confirm, I create:

  1. Checkbox2 (copy of Checkbox)
  2. Newbox2 (copy of NewBox)

Result:

  1. Checkbox BROKEN
  2. Checkbox2 WORKING
  3. Newbox WORKING
  4. Newbox2 WORKING

Above problem is NOT related to this plugin.

Minimal reproduction with above result: preset-theme-issue-working.zip