Tengo un componente Svelte con clases dinámicas y, de acuerdo con la mayoría de los problemas de GitHub y las respuestas de StackOverflow, la mejor opción para garantizar que los selectores no utilizados no se eliminen de la compilación innecesariamente es usar la función :global() para el elemento CSS.
Desafortunadamente, parece que no funciona y la sintaxis me da error para las clases anidadas. El siguiente es mi componente:
<script lang="ts"> export let color: "orange" | "blue" | "green" | "purple" = "blue"; export let text: string = ""; export let showDot: boolean = false; export let active: boolean = false; </script> <button class={color === "orange" + active ? " active" : ""}> <span>{text}</span> {#if showDot} <span class="dot">•</span> {/if} </button> <style lang="scss"> button { width: 80px; color: #00000099; opacity: 80%; &.orange { .dot { color: #ff9100; } &.active { background-color: #ff9100; color: #fff; } } &.blue { .dot { color: #69bcff; } &.active { background-color: #69bcff; color: #fff; } } &.purple { .dot { color: #5c6bc0; } &.active { background-color: #5c6bc0; color: #fff; } } &.green { .dot { color: #66bb6a; } &.active { background-color: #66bb6a; color: #fff; } } } </style>Actualmente este código me da el error (o advertencia más bien):
Unused CSS selector "button.orange .dot" svelte(css-unused-selector) Unused CSS selector "button.orange.active" svelte(css-unused-selector) Unused CSS selector "button.blue .dot" svelte(css-unused-selector) Unused CSS selector "button.blue.active" svelte(css-unused-selector) Unused CSS selector "button.purple .dot" svelte(css-unused-selector) Unused CSS selector "button.purple.active" svelte(css-unused-selector) Unused CSS selector "button.green .dot" svelte(css-unused-selector) Unused CSS selector "button.green.active" svelte(css-unused-selector) Intenté usar :global(button) pero me da el mismo error, y cuando lo uso sobre una de las clases anidadas (por ejemplo :global(&.orange) ) o cualquiera de las variantes, me da un error de sintaxis.
¿Cómo podría yo:
una. ¿Usar :global() para asegurarse de que los selectores no se eliminen?
O
b. ¿Encontrar alguna otra forma de evitar que se eliminen los selectores?
Parece que he encontrado una solución alternativa que no implica el uso :global() . Dado que mi objetivo principal es evitar que los selectores de CSS se marquen como no utilizados, en su lugar utilicé las "directivas de clase" en svelte y modifiqué mi botón de esta manera:
<button class:orange={color === "orange"} class:blue={color === "blue"} class:purple={color === "purple"} class:green={color === "green"} class:active > <span>{text}</span> {#if showDot} <span class="dot">•</span> {/if} </button>Puedes usar así
<style lang="scss"> :global(button) { width: 80px; color: #00000099; opacity: 80%; & :global(.orange) { .dot { color: #ff9100; } & :global(.active) { background-color: #ff9100; color: #fff; } } </style>