Purging not work using class name stored in typescript variable #React #Crico #TSX

[anhzf]

Currently, I'm developing a react-app using craco with tailwindcss and purgeCSS plugin.

Expected

I want all class name is whitelisted during the purging process so I've only have required CSS inside classes.ts to compress the CSS file size

Problem

All classes inside classes.ts not whitelisted in the production build this make my app missing all the styles

classes.ts

export default {
    [key: string]: string
} = {
    header: 'w-full px-6 flex flex-col',
    
    navbar: 'w-full max-w-screen-lg my-0 mx-auto px-8 flex items-center',
    navbar__container: 'm-0 ml-auto h-full py-2 list-none flex justify-center items-center',
    navbar__item: 'my-3 mx-2 py-1 px-4 font-poppins font-bold text-blue-400 uppercase rounded-full hover:bg-blue-400 hover:font-semibold hover:text-white transition-colors duration-75 ease-in',
    
    brand: 'font-montserrat font-extrabold text-4xl text-blue-500',
    badge: 'cursor-pointer m-1 py-1 px-5 bg-blue-400 text-white font-normal rounded-full shadow-xl hover:bg-blue-500 hover:shadow-sm transition-colors transition-shadow duration-100 ease-in',

    headerBanner: 'h-full px-6 grid grid-cols-12 gap-x-16',
    headerBanner__photo: 'w-full self-end col-span-3 col-start-2',

    headerBanner__content: 'flex flex-col justify-center col-span-7',
    headerBanner__content__title1: 'm-0 font-epilogue font-medium text-4xl text-gray-500',
    headerBanner__content__title2: 'm-0 font-montserrat font-bold text-5xl text-gray-800',
    headerBanner__content__subtitle: 'flex flex-wrap',
}

someComponent.tsx

import * as React from 'react';
import NavItems, { navItem } from './navItems';
import './style.scss';
import C from './classes';

interface TheHeaderProps {
    heroImg: string;
}

export default function TheHeader({
    heroImg
}: TheHeaderProps): JSX.Element {
    const navs: navItem[] = [
        // some data...
    ];

    const badges = [
       // some data...
    ];

    return (
        <header className={C.header}>
            <nav className={C.navbar}>
                <a href="./#" className={C.brand}>Anhzf</a>

                <NavItems items={navs} />
            </nav>

            <section className={C.headerBanner}>
                <img src={heroImg} className={C.headerBanner__photo} alt="" />
                <article className={C.headerBanner__content}>
                    <h2 className={C.headerBanner__content__title1}>Hello</h2>
                    <h1 className={C.headerBanner__content__title2}>Lorem ipsum dolor sit amet</h1>
                    <div className={C.headerBanner__content__subtitle}>
                        {badges.map((badge, i) => (
                            <span className={C.badge} key={`badge_${i}`}>{badge}</span>
                        ))}
                    </div>
                </article>
            </section>
        </header>
    )
}

craco.config.js

module.exports = {
    style: {
        postcss: {
            plugins: [
                require('@fullhuman/postcss-purgecss')({
                    content: [
                        './src/**/*.html',
                        './src/**/*.tsx',
                        './src/**/*.tsx',
                        './src/**/*.jsx',
                        './src/**/*.js',
                    ]
                }),
                require('tailwindcss')('./tailwind.config.js'),
            ],
        }
    }
}

Notes

• I've tried to import the variable inside classes.ts to whitelist option but look like it does not support to include typescript file during compiling
• Sorry for my bad English

[simonswiss]

Hey!

Looks like you need to add the .ts extension in your purge array of paths, since the classname strings actually live in classes.ts. In your example above, you have 2x .tsx:

module.exports = {
    style: {
        postcss: {
            plugins: [
                require('@fullhuman/postcss-purgecss')({
                    content: [
                        './src/**/*.html',
                        './src/**/*.tsx',
-                        './src/**/*.tsx',
+                        './src/**/*.ts',
                        './src/**/*.jsx',
                        './src/**/*.js',
                    ]
                }),
                require('tailwindcss')('./tailwind.config.js'),
            ],
        }
    }
}

Also, Tailwind CSS now supports purge out of the box, so you probably want to move that purge config out of craco.config.js, and inside your purge key in the Tailwind config file 👍

[anhzf]

Thank you very much @simonswiss I really appreciate it. i don't realize if I missed it, sorry for that 😅😂
and thank you for another suggestion