Svelte Deep Wind Preprocessor

Converts a Svelte file containing a child component with class names like this:

<script>
  import Button from './Button.svelte';
</script>
<Button class="text-yellow-500 text-lg">
  Yellow
</Button>

Into this:

<script>
  import Button from './Button.svelte';
</script>
<Button class="deep_text-yellow-500_text-lg">
      Yellow
</Button>
<style> 
  :global(.deep_text-yellow-500) { @apply text-yellow-500 text-lg; }
</style>

This will allow you to pass Windi CSS classes to children Svelte components. When run before svelte-windicss-preprocess this will allow you to continue using component scoped styles, but now in a deep manner to pass to child components. It was not intended for this but it would also allow you to use Tailwind classes arbitrarily on children components without any of those styles contributing to your sitewide stylesheet size.

How to use with svelte-windicss-preprocess

• install npm i -D svelte-deep-wind-preprocess
• import deepWind from "svelte-deep-wind-preprocess"; and add deepWind() to your preprocessor array in svelte.config.js before svelte-windicss-preprocess runs.
• in Typescript situations due to markup being handed to this preprocessor before types are removed, we can't build an AST from the content without first stripping out the script block(s)

Optional RTL support

• Pass {rtl: true} as the first argument to the preprocessor to turn on RTL support, for example: deepWind({rtl: true}). This will cause the preprocessor to handle rtl:____ and ltr:____ classes because they don't work without being placed inside :global() styles if your dir="rtl" attribute is outside of the component at hand (almost always because you place this close to your document body). Note that important ! prefixes in these classes should be placed after the direction prefix, e.g. rtl:!-translate-x-full. Don't @apply rtl:/ltr: styles inside your