fix(svelte-scoped): respect passed options (#2815)

Co-authored-by: Jacob Bowdoin <7559478+jacob-8@users.noreply.github.com> Co-authored-by: jacob-8 <jwrunner7@gmail.com>
unocss · Jul 22, 2023 · 994b302 · 994b302
1 parent 9bcfd0b
commit 994b302
Show file tree

Hide file tree

Showing 6 changed files with 15 additions and 12 deletions.
diff --git a/packages/svelte-scoped/src/_preprocess/index.ts b/packages/svelte-scoped/src/_preprocess/index.ts
@@ -10,7 +10,7 @@ import { wrapSelectorsWithGlobal } from './transformClasses/wrapGlobal'
 
 export function UnocssSveltePreprocess(options: UnocssSveltePreprocessOptions = {}, unoContextFromVite?: SvelteScopedContext, isViteBuild?: () => boolean): PreprocessorGroup {
   if (!options.classPrefix)
-    options.classPrefix = 'spu-'
+    options.classPrefix = 'usp-'
 
   let uno: UnoGenerator
 
@@ -19,7 +19,7 @@ export function UnocssSveltePreprocess(options: UnocssSveltePreprocessOptions =
       if (!uno)
         uno = await getGenerator(options.configOrPath, unoContextFromVite)
 
-      if (isViteBuild && !options.combine)
+      if (isViteBuild && options.combine === undefined)
         options.combine = isViteBuild()
 
       return await transformClasses({ content, filename: filename || '', uno, options })

diff --git a/packages/svelte-scoped/src/_vite/index.ts b/packages/svelte-scoped/src/_vite/index.ts
@@ -15,6 +15,9 @@ export function UnocssSvelteScopedVite(options: UnocssSvelteScopedViteOptions =
   if (context.uno.config.transformers)
     throw new Error('Due to the differences in normal UnoCSS global usage and Svelte Scoped usage, "config.transformers" will be ignored. You can still use transformers in CSS files with the "cssFileTransformers" option.')
 
+  if (!options.classPrefix)
+    options.classPrefix = 'uno-'
+
   const plugins: Plugin[] = [
     GlobalStylesPlugin(context, options.injectReset),
   ]

diff --git a/packages/svelte-scoped/test/cases/basic/OutputProd.svelte b/packages/svelte-scoped/test/cases/basic/OutputProd.svelte
@@ -1,7 +1,7 @@
-<div class="spu-dyjh78" />
+<div class="usp-dyjh78" />
 
 <style>
-  :global(.spu-dyjh78) {
+  :global(.usp-dyjh78) {
     --un-bg-opacity: 1;
     background-color: rgba(239, 68, 68, var(--un-bg-opacity));
     font-weight: 600;

diff --git a/packages/svelte-scoped/test/cases/needs-parent/OutputProd.svelte b/packages/svelte-scoped/test/cases/needs-parent/OutputProd.svelte
@@ -2,13 +2,13 @@
   export let onclick: () => any;
 </script>
 
-<button class="spu-n69tx1" on:click={onclick} type="button">
-  <span class="spu-g9gauz" />
+<button class="usp-n69tx1" on:click={onclick} type="button">
+  <span class="usp-g9gauz" />
   <slot /></button
 >
 
 <style>
-  :global(.spu-g9gauz) {
+  :global(.usp-g9gauz) {
     background: url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 308' display='inline-block' vertical-align='middle' 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%;
@@ -18,7 +18,7 @@
     width: 1em;
     height: 1em;
   }
-  :global(.spu-n69tx1) {
+  :global(.usp-n69tx1) {
     font-weight: 600;
   }
   button {

diff --git a/packages/svelte-scoped/test/cases/preflights/OutputProd.svelte b/packages/svelte-scoped/test/cases/preflights/OutputProd.svelte
@@ -1,4 +1,4 @@
-<div class="spu-ff1ijb" />
+<div class="usp-ff1ijb" />
 
 <style uno-preflights>
   *,
@@ -107,7 +107,7 @@
     --un-backdrop-saturate: ;
     --un-backdrop-sepia: ;
   }
-  :global(.spu-ff1ijb) {
+  :global(.usp-ff1ijb) {
     margin-bottom: 0.25rem;
     --un-shadow: var(--un-shadow-inset) 0 1px 3px 0
         var(--un-shadow-color, rgba(0, 0, 0, 0.1)),

diff --git a/packages/svelte-scoped/test/cases/theme/OutputProd.svelte b/packages/svelte-scoped/test/cases/theme/OutputProd.svelte
@@ -1,7 +1,7 @@
-<div class="spu-xjcfo6" />
+<div class="usp-xjcfo6" />
 
 <style>
-  :global(.spu-xjcfo6) {
+  :global(.usp-xjcfo6) {
     margin-right: 0.25rem;
   }
   div {