Rollup plugin for dynamic safelisting

[benjaminpreiss]

Hey y'all

I have been thinking about possibilities to dynamically safelist classes for a component library based on how they are used.
This is about solving the problem of providing responsive component variants for different screens. More specifically:

<SomeComponent sizes={base: "small", md: "medium"} />

Should render a "medium" sized component on a tailwind md breakpoint and a "small" sized component on mobile screens.

There are several ways to achieve this (to my knowledge), two of which I analyzed in more detail:

Utilizing css variables

We can create css variables inline to achieve the desired effect: #12204 (comment)

The problem is, that we can only offer breakpoints that we have thought of before (no custom values allowed) and writing styles this way is very cumbersome as we need to write a lot of code to achieve this effect.

The amount of code required to be written can be reduced by creating components in tailwind, but that creates the possibilty of duplication for atomic styles:

@layer components {
    .component1 {
        @apply px-10;
    }
    .component2 { 
        @apply px-10;
    }
}

Will generate:

.component1 {
  padding-left: 2.5rem;
  padding-right: 2.5rem
}

.component2 {
  /* DUPLICATION! (due to @apply) */
  padding-left: 2.5rem;
  padding-right: 2.5rem
}

Safelisting variants

The other variant is simply safelisting the used classes that cannot be detected by tailwind:

<!-- Always apply the "small" version of the component and on the tailwind breakpoint "md" the "medium" component version -->
<Component sizes={{default: "small", md: "medium"}} />

So let's say the component is a button with the following mapping of component version to mapping:

• "small" version -> "px-2 py-4" tailwind classes
• "medium" version -> "px-4 py-8" tailwind classes

In that case, the above props should result in the following component

<script>
    const styles = {
        small: "px-2 py-4"
        medium: "px-4 py-8"
    }
</script>

<!-- Safelist px-2 py-4 md:px-4 md:py-8 -->
<button class="px-2 py-4 md:px-4 md:py-8" />

To my knowledge the comment about the safelist in the markup should be sufficient to make tailwind generate this class.

So I wonder now - could we automatically generate this comment by some rollup plugin magic?

Rollup plugin idea

Each component should export a sizes() function that takes in the sizes and just simply returns them.
That way, using a rollup plugin and some smart AST transforms, we could possibly detect which variants are used on which breakpoint and inject them into the safelist. (?)

const styles = {
    xsmall: "px-10 py-12",
    small: "px-20 py-24",
    large: "px-40 py-48"
}

export const sizes = (sizes) => {
    // Generate tailwind safelist here - how do we register new styles to the project safelist?
    // Safelist could look like a comment with: "px-10 py-12 md:px-20 md:py-24 max-[600px]:px-40 max-[600px]:py-48"
    return sizes // Could be {base:"xsmall", sm:"small", "max-[600px]":"large"}
}

Then, by using this in our component, we can do:

<script>
    import sizes from 'path-to-component-styles'
    import Component from 'path-to-component'
</script>


<Button sizes={sizes({base:xsmall, sm:small})}></Button>

I am curious what you folks think about this!