shiyangzhaoa/css-modules-to-tailwind

Tailwind css convert tool

css-modules-to-tailwind's Issues

Support for Gatsby css modules import

Hi, thanks for this library, it's really great!

I have a use case I would like this library to support. I am willing to implement it but may need some guidance. I figured I would open this issue before a PR either way.

Feature Request

Support import * as styles syntax

Problem

The way to import css modules in Gatsby uses the import * as syntax. This doesn't work out of the box with css-modules-to-tailwind.

Thanks in advance.

Removing className may cause some problems.

Removing 'unused' classes is a nice feature, but may introduce some bugs.

Problem

Let's look at this:

const Com = () => (
  <div className={style.tab}>
    <img src={src} alt={alt} />
  <div>
);

.tab {
  position: sticky;
  top: 0;
}

.tab img {
  width: 0.625rem;
}

The tab is a class that can be fully converted to tailwind CSS, so I removed it, it became like this:

const Com = () => (
  <div className='sticky top-0'>
    <img src={src} alt={alt} />
  <div>
);

.tab img {
  @apply w-2.5;
}

There will be problems with the style of img.

Fix

If className is multiple, won't remove it in jsx.

const Com = () => (
  <div className=`${style.tab} sticky top-0`>
    <img src={src} alt={alt} />
  <div>
);

.tab img {
  @apply w-2.5;
}

Remove unused class from jsx if the class is removed from the css module file

Hi, I have another request in order for this library to work a bit better for Gatsby related projects 😄.

Problem

Gatsby will throw errors if you import a style that does not exist in the css module file at build time.

Cannot read properties of undefined (reading 'e')
error Generating JavaScript bundles failed

For example, the jsx is left like so after the conversion: ${styles.navItemLink} text-blue-300 no-underline

But .navItemLink is removed from the css module file because all styles have been transformed to tailwindcss classes.
Gatsby will attempt to import .navItemLink from the file and throw an error because it is no longer present.

Proposed Solution

Remove the styles.className from the className={} if the class no longer exists in the module.