Treeshaking imported classes from processed/compiled tailwind stylesheet

[dvzrd]

I'm trying to create a styles library (inside a design-system) that's organized into separate stylesheets, so I can import these stylesheets into tailwind stylesheets and apply certain classes inside others to avoid writing duplicate style rules.

The reason to decouple them from tailwind layers and keep them separate is in case the design-system needs to be used for projects that don't support or need tailwind, but still need the same style patterns as tailwind apps (think of it as a published module or monorepo package that's not strictly designed around tailwind, but includes tailwind as an option).

To provide detail, let's say I have a styles directory that's organized in the following manner:

styles/
  components/           # component styles (decoupled css classes that can be used outside of tailwind if necessary - not layered)
     button.css
  themes/                 # theme variables (mainly colors) separated into separate stylesheets (so you can import just the theme variables you need - idea is to have multiple themes that can be used for different use cases in a monorepo env)
    dark.css
    light.css
  utilities/                  # these can be similar to mixins (scss), which are reusable style patterns that can be combined to create complex styles (i.e. components)
    box.css
    text.css
  # The following stylesheets can also be organized inside a `tailwind/` dir)
  base.css                 # tailwind base layer (i.e. @layer base) - theme imports would go here, and other css variables, or typography, or other global overrides
  components.css    # tailwind components layer - import styles from components and use @apply to create tailwind component classes
  main.css                 # main tailwind stylesheet that contains all the imported layers (will be used to build the processed tailwind stylesheet)
  utilities.css             # tailwind utilities layer - mainly for custom utilities imported from utilities dir.

In this type of library, the button component may look like this:

@import "../utilities/box.css";
@import "../utilities/text.css";

.button {
  @apply action-box;
  @apply action-font-style;
}

Using a custom postcss build script, the above button can be processed into a stylesheet the browser can read. But this requires some customization to get a clean output. The button stylesheet should be outputted as follows (after cleaning up imports and using postcss plugins with tailwind for processing:

.button {
  position: relative;
  box-sizing: border-box;
  white-space: nowrap;
  align-items: center;
  justify-content: center;
  display: inline-flex;
  font-family: var(--font-action);
  font-weight: 500;
  line-height: 2;
}

That's not the problem I'm having however. The main issue is when trying to apply these imported classes inside tailwind layers using tailwind cli. For example, say I have this light theme stylesheet:

.light-theme {
  --border: 259 29% 35%;
  --input: 0 0% 89.8%;
  --ring: 259 29% 25%;

  --background: 0 0% 100%;
  --foreground: 0 0% 9%;
  --shadow: 0 0% 17%;

  --card: 0 0% 100%;
  --card-foreground: 259 29% 17%;

  --popover: 0 0% 100%;
  --popover-foreground: 259 29% 17%;

  --muted: 259 29% 80%;
  --muted-foreground: 259 29% 35%;

  --accent: 205 100% 38%;
  --accent-foreground: 259 29% 17%;

  --neutral: 0 0% 42.4%;
  --neutral-foreground: 0 0% 98%;

  --primary: 259 29% 17%;
  --primary-foreground: 0 0% 100%;

  --secondary: 205 100% 38%;
  --secondary-foreground: 0 0% 98%;

  --danger: 345 99% 45%;
  --danger-foreground: 0 0% 98%;
}

And I want to import it, and apply into tailwind's base layer like this, inside base.css (or themes.css):

@import "./themes/light.css";

@layer base {
  :root {
    @apply light-theme;
  }
}  

After running the tailwindcss -i ... command, the output does include the :root in the base with these theme variables (at the top of the stylesheet) which is what I expected. However, the imports are also included so the stylesheet also has the .light-theme class which is not really what I want (considering how this may scale with many imports - there's going to be a lot of duplicate styles and unwanted classes that can essentially override the base styles because they're still there below all the base styles).

As far as I know, it's not possible to import directly inside a layer like this:

@layer base {
   @import './themes/dark.css'
}

Is here a way to purge certain imports using the tailwind cli command (and/or config) or do I need to handle the build with postcss using custom build scripts so it can exclude certain imports (in this case the theme imports) from the processed stylesheet?

NOTE: I added -theme to the theme class name because I was unable to apply the same class name.

For example, this does not work (because they share the same 'dark' class name):

@import './themes/dark.css';

@layer base {
   .dark {
      @apply dark;
   }
}

The above causes a circular dependency error (probably because the imported classes aren't purged by default).

[dvzrd]

Maybe it would be good to have a shake function so we can do something like this:

@import shake('./themes/dark.css');

@layer base {
   .dark {
      @apply dark;
   }
}

So the outputted file can exclude the imports in this case.

Weather this should be a tailwind function (like @apply and @base) or some kind of postcss plugin or mod to the postcss-import plugin is what I'm unsure about.

Ideally, I think tailwind should have custom importing much like how it handles nesting (tailwindcss/nesting) - this way something like @import shake '...' or @import shake('...') can be used with limited config.

I'm willing to help implement this feature if needed.

[wongjn]

You can use the CSS-native cascade layer syntax to place @imported stylesheets into a Tailwind CSS @layer:

@import './themes/dark.css' layer(base);

[dvzrd]

Thanks @wongjn that worked perfectly.

Here's what I ended up doing:

@import './themes/dark.css' layer(base);
@import './themes/light.css' layer(base);

@layer base {
  :root {
    @apply light;
  }
}