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

[shiyangzhaoa]

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

[shiyangzhaoa]

@CobyPear I wanted to solve this problem before but I was too lazy, and nobody asked me this question.

I tried to fix it, can you try the version 0.1.9-beta.1?

For some cases, I have done processing:

1. className={style.className} => className='flex ...'
2. className={clsx(style.className1, style.className2)} => className={clsx('flex ...', ...)}
3. className={`${style.className1} ${style.className2}`} => className={`flex ...`}
4. className={clsx({ [style.className]: true })} => className={clsx({ ['flex ...']: true })}

Thanks.

[shiyangzhaoa]

@CobyPear Can you try version 0.1.9-beta.4, I found a bug with an unhandled promise rejection in the code.

Thanks for your suggestion, if no one uses it, I don't bother to optimize it.

[shiyangzhaoa]

Oh, I see. I read the file directly, the processed file has some newlines, file content converted to boolean is true, but it should be false... 😅

[email protected] will delete the import specifier, and css files are also removed.

[shiyangzhaoa]

Version 0.1.9, released.

[CobyPear]

Thank you for the quick response and implementation (again)!

This works really nicely.

There is one more case to solve for–when the *.module.css file is empty, it should be removed, and the import of that file in the jsx should also be removed. That way a project wouldn't have empty files or unused imports.

I understand if this is somewhat out of scope, but it would be a nice to have.

[shiyangzhaoa]

Hi, you can try version 0.1.9-beta.2, because the import specifier is removed, the corresponding style member expressions also needs to be modified, for example:

/** index.module.css */
.test {
   display: flex;
}

import style from 'index.module.css';

const Component = () => (
   <div className={style.test}>
     <div className={style.invalid}></div>
   </div>
);

After removed:

const Component = () => (
   <div className='flex'>
     <div className={'invalid-class'}></div>
   </div>
);

Deleting import specifier is a dangerous operation, please make sure your code run successfully, thanks~

[CobyPear]

I tried 0.1.9-beta.2 and I got the same result as beta.1 where the *.css.module file is empty after the transform, but the import * from styles import specifier is still in the file, so I'm not seeing any change in the output. Is there any other config to tell it to remove the specifier? Maybe if it was opt + a warning when using it instead of default behavior it would be OK that it is a dangerous operation?

Also, please let me know if you accept sponsorships/donations through any platform as I am trying to get some $$ to you on behalf of my employer for all this work, thank you!

[CobyPear]

I am seeing the same result for 0.1.9-beta.4.

Thanks for your suggestion, if no one uses it, I don't bother to optimize it.

You're welcome, thanks for implementing it so quickly!

[shiyangzhaoa]

I need code samples that can reproduce the problem, such as https://codesandbox.io/

[CobyPear]

I am trying to get together a minimal reproduction for you, but it is a bit difficult since we are using your library via npx as a step in our CLI, and right before we run your library we run postcss on our css variables to transform those into something your library can read first (another feature that would be awesome if it was built in to your library 😄 ). I can outline the steps to setup our CLI locally but I worry it's a bit of work. I will try to get something less involved on Monday, but if you'd like I'll outline the steps I am using below. Please do not feel pressured to use these steps as I understand it is quite involved.

1. Clone the following monorepo: [email protected]:pantheon-systems/decoupled-kit-js.git
2. in the root of the monorepo, pnpm i you may need pnpm 8.1.0 You may see errors of things failing to build, you can ignore those. Make sure pnpm build:cli passes tho.
3. On this line, change update the css-modules-to-tailwind command to the @0.1.9-beta.4 https://github.com/pantheon-systems/decoupled-kit-js/blob/canary/packages/create-pantheon-decoupled-kit/src/actions/convertCSSModules.ts#L45
4. The, to call the CLI the easiest thing to do is to set up a watch script. I will copy one below that you can use. You may want to change the outDir to something else. the important part that will run the convert action is tailwindcss: true
5. in the terminal, run pnpm watch:cli. You should see the CLI generate a new app then try to convert the CSS modules. The last linting step will fail due to styles being an unused var in the src/pages/404.jsx file. You can see the 404.module.css is empty

Here is the `watch.ts` file you will put at the root of `decoupled-kit-js/packages/create-pantheon-decoupled-kit`

import type { ParsedArgs } from 'minimist';
import path from 'path';
export const watchOptions: ParsedArgs = {
	_: ['gatsby-wp'],
	outDir: path.resolve(process.env.HOME as string, 'test-cli', 'css-mods-repro'),
	appName: 'css-modules-to-tw-repro',
	cmsEndpoint: 'https://any',
	noInstall: false,
	// force overwrite of the target directory.
	// WARNING: this option could overwrite uncommitted work.
	// Choose an empty outDir for best results with this options.
	force: true,
	// silent: true,
	// number of milliseconds to debounce file system watching
	tailwindcss: true,
	debounce: 5000,
};

[CobyPear]

Nice, LGTM! Thanks again for the quick turnaround on this, it is very much appreciated!

[CobyPear]

Thanks again, just ran another test and it works great.