arlyon/stailwc

Tailwind in SWC, Nextjs, and Vite, fast 🚀

stailwc (speedy tailwind compiler)

This is an experimental SWC transpiler to bring compile time tailwind macros to SWC (and nextjs) a-la twin macro. The goal is to give the same great compile-time ergonomics and flexibility while performing considerably better than babel-based alternatives. Supports both emotion and styled-components for CSS-in-JS, and many build systems such as SWC, nextjs, Vite, etc.

Compatibility Chart

We are currently testing against the following versions. Other versions outside these may still work, however.

stailwc	NextJS	Emotion	Styled Components	swc	Vite
latest	13.4.3	11.10.5	5.3.6	1.3.24	4.1.0

Feature Chart

Feature	Emotion	Styled Components
tw jsx attribute	✅	✅
tw template tag	✅	✅
tw component syntax	✅	✅
tw component extension syntax	✅	✅
Global styles	✅	✅
Plugin parameter suggestions	✅	✅

Getting started

> npm add -D stailwc
> yarn add -D stailwc
> pnpm add -D stailwc

To get started with NextJS, place the following in your next.config.js. For other framworks / tools, please see the examples.

next.config.js

const stailwc = require("stailwc/install");

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  experimental: {
    swcPlugins: [
      stailwc({
        engine: "emotion", // or "styled-components"
      }),
    ],
  },
  compiler: {
    emotion: true,
    // or
    styledComponents: true,
  },
};

module.exports = nextConfig;

Optionally, you can also include the tailwind normalizer + forms plugin by including the <TailwindStyle /> component. Please see the relevant examples.

_document.tsx

import { TailwindStyle } from "stailwc";

export default function App({ Component, pageProps }) {
  return (
    <>
      <TailwindStyle />
      <Component {...pageProps} />
    </>
  );
}

Types

There is one step you need to take to get types working. You need to add stailwc.d.ts to the root of your source folder.

Usage

The tw tag

You can interact with stailwc in two ways. The first is through the tw JSW attribute, and the second is via the tw template tag.

import { useState } from "react";

export const ColorButton = () => {
  const [clicked, setClicked] = useState(0);
  return (
    <button
      tw="p-1 m-4 text-green bg-white hover:(bg-gray text-yellow md:text-red) border-3"
      css={clicked % 2 == 0 ? tw`border-green` : tw`border-blue`}
      onClick={() => setClicked(clicked + 1)}
    >
      Clicked {clicked} times
    </button>
  );
};

Component syntax

You can also create styled components using the tw template tag. This will automatically create the correct syntax for both emotion and styled-components.

export const StyledButton = tw.button`p-1 m-4 text-green bg-white hover:(bg-gray text-yellow md:text-red) border-3`;
export const ShadowButton = tw(StyledButton)`shadow-lg`;

Examples

There are examples available for both emotion and styled-components. You can run them by cloning the repo and running yarn followed by yarn dev in the example directory. You will need to stailwc first.

stailwc's Issues

Missing default colors

We noticed that tw('macro') does not process default colors. For example to use {purple: {DEFAULT: '#color'}}, we needed to use tw('text-purple-DEFAULT'). So we had to add a function over the stailwc/install plugin in our vite.config.ts :

/**
 * Add missing default colors. For example, `purple.DEFAULT` is inject in colors as `purple`
 * 
 * @param pluginConfig 
 * @returns 
 */
const overrideStailWc = (pluginConfig): any => {
  const newConfig = pluginConfig[1].config;
  const additionalColors = Object.keys(newConfig.theme.colors).filter(
    (c) => c.indexOf("-DEFAULT") > -1
  );
  for (const color of additionalColors) {
    newConfig.theme.colors[color.replace("-DEFAULT", "")] =
      newConfig.theme.colors[color];
  }
  return [
    pluginConfig[0],
    {
      ...pluginConfig[1],
      config: newConfig,
    },
  ];
};

and

plugins: [
    dts(),
    react({
      plugins: [
        overrideStailWc(
          stailwc({
            engine: "styled-components",
            tailwindPath: path.join(__dirname, "tailwind.config.cjs"),
          })
        ),
        ["@swc/plugin-styled-components", {}],
      ],
    }),
  ],

Error in Next.js 13.4.4 using the app router

I've used the following config with Next.js 13.4.4 and the app router:

const stailwc = require('stailwc/install')

/** @type {import('next').NextConfig} */
const nextConfig = {
  swcMinify: true,
  compiler: {
    styledComponents: true
  },
  experimental: {
    swcPlugins: [stailwc()]
  }
}

module.exports = nextConfig

I get the following error from Next trying to load a page:

- error ./node_modules/next/dist/pages/_app.js
Error: Filesystem cache is not enabled, cannot read plugin from phsyical path

Project does not build + import ESM instead of require

I try to install this project (to fix an issue reported by @halfbakedsneed and to fix the install.js for import ESM instead of module.exports require) so I wanted to fork+build and release a new vesion. I'm on Ubuntu 23.

When I ~/.cargo/bin/cargo build --release --target wasm32-wasi, I got plenty of errors. (Cannot contribute to this repo if I can't even build the release, sadly..).

I rewrited the install.js because the actual one seems deprecated if our tailwind.config.js is written in ESM (export default instead of module.exports).

So this is what I'v got now in my vite.config.ts (without any stailwc/install) :

import tailwindConfig from "./tailwind.config.js";
import resolveConfig from "tailwindcss/resolveConfig";

const stailwc = (
  options: { wasm?: string; strict?: boolean; engine?: string } = {}
): any => {
  const config = resolveConfig(tailwindConfig);
  config.theme.colors = Object.entries(config.theme.colors)
    .flatMap(([k, v]) => {
      if (typeof v === "object") {
        const items = Object.entries(v).map(([k2, v2]) => [
          k + (k2 !== "DEFAULT" ? "-" + k2 : ""),
          v2,
        ]);
        return items;
      } else {
        return [[k, v]];
      }
    })
    .reduce(
      (acc, [k, v]) => ({
        ...acc,
        [k]: v,
      }),
      {}
    );

  return [
    options?.wasm ?? "stailwc",
    {
      config,
      strict: options?.strict ?? false,
      engine: options?.engine ?? "emotion",
    },
  ];
};

export default defineConfig({
  plugins: [
    dts(),
    react({
      plugins: [
        stailwc({
          engine: "styled-components",
        }),
        ["@swc/plugin-styled-components", {}],
      ],
    }),
  ],

Support partial plugin application

As of now the expression is left untransformed if the directive cannot be converted. We want to expose those errors and do a best-effort transform.

Suggest valid plugin commands if the command is missing

Multiple fonts in a fontFamily does not work

We cannot set multiple fonts for a fontFamily definition in our tailwind because on tw() render it concatenates with (space) instead of concatenating with , (comma), so for :

// tailwind.config.js
{
    fontFamily: {
      body: ["Inter", "sans-serif"],
    }
}

we got :

/* once` transpiled on runtime : ... */
font-family: "Inter sans-serif"; 

and "Inter sans-serif" isnt an existing font.

Getting ReactServerComponentsError when using `tw`

Hej. I've set up everything exactly the way described in your documentation and how Next.js told me to set up styled-components.

I use the App Router for Next.js as I find this one pretty useful in my use-case. I've used this documentation part to set up styled-components: https://nextjs.org/docs/app/building-your-application/styling/css-in-js#styled-components

Then I used your documentation to set up stailwc but getting an error, when using tw. styling which says the following:

- error ./app/page.tsx
ReactServerComponentsError:

The "use client" directive must be placed before other expressions. Move it to the top of the file to resolve this issue.

   ,-[/home/XXX/Development/XXX/app/page.tsx:1:1]
 1 | 'use client';
   : ^^^^^^^^^^^^^
 2 | 
 3 | import styled from 'styled-components';
   `----

Import path:
  ./app/page.tsx

Right now I'm using an example from the styled-components set up of Next.js, which looks like this:

'use client';

import styled from 'styled-components';

const Container = styled.div`
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem /* 24px */;
`;

const SkeletonInner = styled.div`
  padding: 1rem /* 16px */;
  background-color: rgb(24 24 27 / 0.8);
  border-radius: 1rem /* 16px */;
`;

const SkeletonImg = styled.div`
  height: 3.5rem /* 56px */;
  border-radius: 0.5rem /* 8px */;
  background-color: rgb(63 63 70 / 1);
`;

const SkeletonBtn = styled.div`
  margin-top: 0.75rem /* 12px */;
  width: 25%;
  height: 0.75rem /* 12px */;
  border-radius: 0.5rem /* 8px */;
  background-color: rgb(255 0 128 / 1);
`;

const SkeletonLineOne = styled.div`
  margin-top: 0.75rem /* 12px */;
  height: 0.75rem /* 12px */;
  width: 91.666667%;
  border-radius: 0.5rem /* 8px */;
  background-color: rgb(63 63 70 / 1);
`;

const SkeletonLineTwo = styled.div`
  margin-top: 0.75rem /* 12px */;
  height: 0.75rem /* 12px */;
  width: 66.666667%;
  border-radius: 0.5rem /* 8px */;
  background-color: rgb(63 63 70 / 1);
`;

const Title = tw.h1`text-2xl font-bold`;

const Skeleton = () => (
  <SkeletonInner>
    <SkeletonImg />
    <SkeletonBtn />
    <SkeletonLineOne />
    <SkeletonLineTwo />
  </SkeletonInner>
);

export default function Page() {
  return (
    <div className="space-y-4">
      <Title>Styled with Styled Components</Title>
      <Container>
        <Skeleton />
        <Skeleton />
        <Skeleton />
      </Container>
    </div>
  );
}

What am I doing wrong?

Is this lib gonna be maintained ?

Is this lib still a good choice for production-released app ? Because I found few things in my last issues and we noticed that only very few people work on this lib. I can't contribute because i'm not enough familiar with rust, and I just want to ensure is there still anyone working on this lib ?

`grid-flow-col` doesn't work as expected

Hi, thanks for a great tool.

I've tried to migrate from twin.macro and noticed an issue with grid-flow-col. It doesn't seem to be applied and works differently compared to twin.macro and className.

Using styled-components compiler.

Difference:

 <div tw="grid grid-cols-3 gap-1">
      <b></b>
      <b>className</b>
      <b>tw (stailwc)</b>
      <div>
        <div>grid grid-cols-3</div>
      </div>
      <div tw="bg-blue-200">
        <div className="grid grid-cols-3">
          <div>A</div>
          <div>B</div>
          <div>C</div>
        </div>
      </div>
      <div tw="bg-red-200">
        <div tw="grid grid-cols-3">
          <div>A</div>
          <div>B</div>
          <div>C</div>
        </div>
      </div>
      <div>
        <div>grid grid-flow-col</div>
      </div>
      <div tw="bg-blue-200">
        <div className="grid grid-flow-col">
          <div>A</div>
          <div>B</div>
          <div>C</div>
        </div>
      </div>
      <div tw="bg-red-200">
        <div tw="grid grid-flow-col">
          <div>A</div>
          <div>B</div>
          <div>C</div>
        </div>
      </div>
    </div>

Support for emotion components

It would be nice if we could transform tw.div as well as tw(Container) style directives into the equivalent statements:

const Box = tw.div`text-red-500`;
const BoxExtended = tw(Box)`bg-blue-500`;
---
const Box = _styled.div({
    "--tw-text-opacity": "1",
    color: "rgb(239 68 68 / var(--tw-text-opacity))"
});
const BoxExtended = _styled(Box)({
    "--tw-bg-opacity": "1",
    backgroundColor: "rgb(59 130 246 / var(--tw-bg-opacity))"
});

Linaria support?

It would be great to see this project support a linaria target. Especially after the release of RSC and the app directory in next.js 🙂

Properly merge transform statements

When merging css definitions transform statements are not treated equally and so end up replacing one-another. This needs to be fixed.

Rework mutliple tag detection

This case currently fails because the check isn't set up for recursive cases:

          <InputText
            register={register}
            name="value"
            tw="flex h-[20px] items-center"
            prefix={
              <button type="submit" tw="-mx-3 h-full w-full flex-1 px-3">
                <CheckIcon tw="h-5 w-5 text-neutral-400" />
              </button>
            }
          />

Error: 
  x tw attribute already exists, ignoring
    ,----
 61 | <button type="submit" tw="-mx-3 h-full w-full flex-1 px-3">
    :                       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    `----

Error: 
  > previous encountered here
    ,----
 59 | tw="flex h-[20px] items-center"
    :    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    `----

Handle negatives correctly for transform

Currently -transform-x-full transpiles to transform: -translateX(100%) while the correct value is translateX(-100%). Solution is likely to have the plugin operate on the entire Subject rather than just the Literal.

Track and fail coverage regressions in CI

We have a coverage suite which isn't complete (yet), however we want to prevent regressions by tracking individual tests and ensuring each PR strictly increases the coverage.

To do this, we should split out the snapshots where possible to the smallest unit of granularity so we get insight at the tranformation level rather than at the file level. Then we need to store some metadata about which tests are expected to pass.

support for styled-components

hey,
ben-rogerson/twin.macro#516 (reply in thread)
the styled-components support would be really appreciated 🙏

IDE Integration Guide

The linter experience is not great atm as traditional tools don't really pick it up very easily. We would like to fix this.

Error with storybook

We met difficulties to setup a Storybook on a Vite project that use stailwc. (https://storybook.js.org/docs/react/configure/frameworks#configure)

We can successfuly make tw working in our exported components in our dist directory (that we include in another project, so rollup works well).

But we got the following error when we are running RUST_BACKTRACE=full npm run storybook :

8:27:11 PM [vite] Internal server error: failed to handle: failed to invoke plugin: failed to invoke plugin on 'Some("/var/webprojects/our-uikit/.storybook/stories/TextField.stories.ts")'

Caused by:
    0: failed to invoke `/var/webprojects/our-uikit/node_modules/@swc/plugin-styled-components/swc_plugin_styled_components.wasm` as js transform plugin at /var/webprojects/our-uikit/node_modules/@swc/plugin-styled-components/swc_plugin_styled_components.wasm
    1: RuntimeError: call stack exhausted
  Plugin: vite:react-swc
  File: /var/webprojects/our-uikit/.storybook/stories/TextField.stories.ts

Is there any good practice to setup storybook using your lib ?

Here is our vite.config.ts :

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";
import dts from "vite-plugin-dts";
import stailwc from "stailwc/install";
import path from "path";

export default defineConfig({
  plugins: [
    dts(),
    react({
      plugins: [
        stailwc({
          engine: "styled-components",
          tailwindPath: path.join(__dirname, "tailwind.config.cjs"),
        }),
        ["@swc/plugin-styled-components", {}],
      ],
    }),
  ],

And here is our .storybook/main.tsx :

import type { StorybookConfig } from "@storybook/react-vite";

const config: StorybookConfig = {
  stories: ["./stories/*.mdx", "./stories/*.stories.@(js|jsx|ts|tsx)"],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions",
    'storybook-addon-swc',
  ],
  framework: {
    name: "@storybook/react-vite",
    options: {},
  },
  docs: {
    autodocs: "tag",
  },
};
export default config;

Thanks a lot

The automated release is failing 🚨

🚨 The automated release from the master branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you can benefit from your bug fixes and new features again.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can fix this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the master branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here are some links that can help you:

• Usage documentation
• Frequently Asked Questions
• Support channels

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

---

Unfortunately this error doesn't have any additional information. Feel free to kindly ask the author of the @semantic-release/exec plugin to add more helpful information.

---

Good luck with your project ✨

Your semantic-release bot 📦🚀

Support fontFamily in the tailwind config

The automated release is failing 🚨

🚨 The automated release from the master branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you can benefit from your bug fixes and new features again.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can fix this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the master branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here are some links that can help you:

• Usage documentation
• Frequently Asked Questions
• Support channels

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

---

Unable to build workspace dependencies graph: Unable to parse the workspace structure starting at /home/runner/work/stailwc/stailwc/Cargo.toml

Unfortunately this error doesn't have any additional information. Feel free to kindly ask the author of the @semantic-release/exec plugin to add more helpful information.

---

Good luck with your project ✨

Your semantic-release bot 📦🚀

Question: How to build a working wasm

I'm trying to develop this plugin locally. I cloned the repository and ran the build command from the 'yarn prepublishOnly' command, which generated a wasm file. However, when I tried to set the wasm path in the Next.js plugin to the generated wasm file.

It threw an error message. The wasm file in npm load normally though.

thread '<unnamed>' panicked at 'called `Result::unwrap()` on an `Err` value: LayoutError', /Users/fengkx/.cargo/registry/src/mirrors.tuna.tsinghua.edu.cn-df7c3c540f42cdbd/rkyv-0.7.37/src/impls/core/mod.rs:265:67
note: run with `RUST_BACKTRACE=1` environment variable to display a backtrace
thread '<unnamed>' panicked at 'failed to invoke plugin: failed to invoke plugin on 'Some("/Users/fengkx/me/code/style9-twin/node_modules/next/dist/client/dev/amp-dev.js")'

Caused by:
    0: failed to invoke `/Users/fengkx/me/code/style9-twin/stailwc.wasm` as js transform plugin at /Users/fengkx/me/code/style9-twin/stailwc.wasm
    1: RuntimeError: out of bounds memory access
    2: heap_get_oob

Stack backtrace:
   0: _napi_register_module_v1
   1: _napi_register_module_v1
   2: <unknown>
   3: <unknown>
   4: <unknown>
   5: <unknown>
   6: <unknown>
   7: <unknown>
   8: <unknown>
   9: <unknown>
  10: <unknown>
  11: <unknown>', /Users/runner/.cargo/registry/src/github.com-1ecc6299db9ec823/swc-0.245.27/src/plugin.rs:228:14
thread '<unnamed>' panicked at 'failed to invoke plugin: failed to invoke plugin on 'Some("/Users/fengkx/me/code/style9-twin/node_modules/next/dist/client/router.js")'

Caused by:
    0: failed to invoke `/Users/fengkx/me/code/style9-twin/stailwc.wasm` as js transform plugin at /Users/fengkx/me/code/style9-twin/stailwc.wasm
    1: RuntimeError: call stack exhausted
    2: stk_ovf

Stack backtrace:
   0: _napi_register_module_v1
   1: _napi_register_module_v1
   2: <unknown>
   3: <unknown>
   4: <unknown>
   5: <unknown>
   6: <unknown>
   7: <unknown>
   8: <unknown>
   9: <unknown>
  10: <unknown>
  11: <unknown>', /Users/runner/.cargo/registry/src/github.com-1ecc6299db9ec823/swc-0.245.27/src/plugin.rs:228:14
thread '<unnamed>' panicked at 'failed to invoke plugin: failed to invoke plugin on 'Some("/Users/fengkx/me/code/style9-twin/node_modules/next/dist/client/app-next-dev.js")'

Align the usage with TailwindCSS

Great project!
IMO, I think aligning the usage with TailwindCSS would provide better DX for anyone who wants to use this project.

display block / flex are not always processed

I got issue with display flex and block when I set multiple properties in a ${tw macro} inside styled components css :
This does not work :
(block is not injected in css)

And this works :

Is there anything wrong ?

Get rid of global style workarounds

Right now for both global styles and emotion styles we rely on some ugly workarounds to handle some 'odd' behaviour from SWC which is described in this comment: swc-project/swc#6233 (comment). Our only recourse is to sit and wait until they are resolved upstream.

Backtrack when failing to parse a plugin

Error in next 14.0.4 with app router

It always report error, see dev.log

The automated release is failing 🚨

🚨 The automated release from the master branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you can benefit from your bug fixes and new features again.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can fix this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the master branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here are some links that can help you:

• Usage documentation
• Frequently Asked Questions
• Support channels

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

---

Unable to build workspace dependencies graph: Unable to parse the workspace structure starting at /home/runner/work/stailwc/stailwc/Cargo.toml

Unfortunately this error doesn't have any additional information. Feel free to kindly ask the author of the @semantic-release/exec plugin to add more helpful information.

---

Good luck with your project ✨

Your semantic-release bot 📦🚀

Styles not applied if starting on very first line character

Found another difference between className/twin.macro and stailwc.

If the style is starting on the very first character on a new line, it is not being applied. If adding one or more spaces or tabs it works as expected.

    <div tw="grid grid-cols-2 m-8 border border-black">
      <div
        className="
bg-blue-200"
      >
        className / twin.macro
      </div>
      <div
        tw="
bg-blue-200"
      >
        tw (stailwc)
      </div>
    </div>

Benchmarks and profiling

This library has been written with the goal of doing as few allocations as possible however there are probably plenty for performance / speed gains to be had still. As an idea for potential pitfalls:

• creating too many intermediate ObjectLit
• inefficient config loading (parse and allocate the json config per file)
• inefficient parsing
• inefficient match for finding commands (rust_phf?)

I would like to build out flamegraphs for the snapshot tests to determine larger-than-expected execution times as well as run benchmarks on those to track perf over time.

Suggest a plugin when plugin parsing fails

Issue in example

Hi there, thanks for the addon i will be testing it but i noticed there is a small error with the node sample there is a " missing after staliwc

/** @type {import('next').NextConfig} */ const nextConfig = { reactStrictMode: true, swcMinify: true, experimental: { swcPlugins: **[["stailwc", {}]],** }, compiler: { emotion: true, }, };

Issue with tailwind Font Size that should inject line-height too

According to docs, when we do: tw`text-xs`

We should see line-height injected, but I only see font-family injected by stailwc.

tw global not defined in TypeScript

I'm having some issues with TypeScript since tw needs to be defined as a global. I can see stailwc.d.ts has the right types, but it's not included or exported in the published package. Should it be?

Looking in node_modules, this is the contents of my installed copy of stailwc 0.17:

node_modules/stailwc
├── CHANGELOG.md
├── LICENSE-APACHE
├── LICENSE-MIT
├── index.d.ts
├── install.js
├── package.json
├── readme.md
└── target
    └── wasm32-wasi
        └── release
            └── stailwc.wasm

4 directories, 8 files

The automated release is failing 🚨

🚨 The automated release from the master branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you can benefit from your bug fixes and new features again.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can fix this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the master branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here are some links that can help you:

• Usage documentation
• Frequently Asked Questions
• Support channels

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

---

Unable to build workspace dependencies graph: Unable to parse the workspace structure starting at /home/runner/work/stailwc/stailwc/Cargo.toml

Unfortunately this error doesn't have any additional information. Feel free to kindly ask the author of the @semantic-release/exec plugin to add more helpful information.

---

Good luck with your project ✨

Your semantic-release bot 📦🚀

Inject ${tw`some-macro`} inside material StyledComponent css

I'm using the vite.config from your examples.
I'd like to do something like :

import styled from "styled-components";
import Button from "@material-ui/core/Button";

export default styled(Button)`
  background-color: blue;
  height: 80px;
  ${tw('text-red')}
`;

Is it possible ?

For now, we are doing like this :

/**
 * tcss is "to CSS"
 * 
 * It parses a CSSInterlopation (compiled by stailwc on runtime) to a CSS string.
 * Indeed, tw`...` does not render a pure CSS string, so we need this function.
 * https://github.com/arlyon/stailwc/issues/39
 *
 * @param styleObject
 * @returns
 */
export const tcss = (styleObject: CSSInterpolation) => {
  const cssPropValue = (value: any) => {
    // stailwc alreayd concatenates arrays of tailwind.config, which is an issue/bug
    // https://github.com/arlyon/stailwc/issues/42
    // return `${Array.isArray(value) ? value.join(",") : value}`;
    return value;
  };
  const mediaQueryValue = (key: any, value: any): string => {
    return typeof value === "object" && value !== null
      ? `${key}{ ` + // === @media screen and (min-width:xxx) {
          Object.entries(value)
            .map(([key, value]) => `${kebabize(key)}: ${cssPropValue(value)};`)
            .join(" ") +
          `}`
      : value;
  };

  const css = Object.entries(styleObject as any[])
    .map(([key, value]) =>
      typeof value === "object" && value !== null
        ? `${mediaQueryValue(key, value)}`
        : `${kebabize(key)}: ${cssPropValue(value)};`
    )
    .join(" ");
  return css;
};

const StyledTypography = styled(Typography)`
  &.MuiTypography-root {
    font-family: "Inter";
    ${tcss(tw`text-green-500`)}
  }
`;

Thanks!