Tailwind Regex

[gino]

Hello,

What regex should I use if I am using TailwindCSS?
I saw an issue with a Tailwind regex but this used the tw- prefix. I tried to remove this from the regex and it stopped working unfortunately. Since I am not using that prefix. I am just using basic Tailwind utilities without any configuration so far.

Thanks.

[sndyuk]

@gino A prefix for css classes is required otherwise the plugin won't work. The prefix must be unique in the all your source code since the plugin replace a string in the code using regex.

FYI: https://tailwindcss.com/docs/configuration/#prefix

[gino]

Hey, I am going to use this for my project again and now will use the prefix as well but what is the latest and recommended regex that I should use for TailwindCSS? Since there are a lot of selectors and pseudo selectors..

[sndyuk]

Does anyone watching the repo have the knowledge?

Anyway, I'll close the issue in a few weeks since it doesn't the issue of the plugin.

[gino]

@sndyuk I am experimenting with a couple of different regex patterns but I was wondering, is it possible to have longer generated classnames instead of just having a b c and instead have actual obfuscation going on, like 1wbh5a2, like Twitter has for example.

Edit: for example, provide some sort of a pattern like localIdentName does: https://github.com/webpack-contrib/css-loader#localidentname

[sndyuk]

@gino How about adding the option classGenerator:

module.exports = {
  ...
  plugins: [
    new MangleCssClassPlugin({
      ...,
      // original: original class name
      // opts: options of the plugin
      // context: own context of the class generator(initial value is just an empty object)
      classGenerator: (original, opts, context) => {
        // return custom generated class name.
        // Or return undefined if you want to leave it to the original behavior.
      }
    }),
  ],
};

[gino]

@sndyuk That’s a really nice approach! Could you also perhaps provide an example how to achieve random strings. But so far this looks very promising! 🤩

[sndyuk]

@gino I added the new option at version 4.0.12. Please check the example bellow in the test case. It replaces class names starts with c-* into c{auto generated number}

mangle-css-class-webpack-plugin/spec/BasicSpec.js

Lines 208 to 220 in 54fd701

	plugins: [new MangleCssClassPlugin({
	classNameRegExp: defaultCssClassRegExp,
	log: true,
	classGenerator: (original, opts, context) => {
	if (!context.id) {
	context.id = 1;
	}
	if (original.startsWith('c-')) {
	const className = `c${context.id}`;
	context.id++;
	return className;
	}
	}

[gino]

@sndyuk Looks really good! I am currently trying it in a Tailwind project and also using the same scenario as you, with an auto generated number, but without the c-:

classGenerator: (original, opts, context) => {
  if (!context.id) {
    context.id = 1;
  }

  const className = `${context.id}`;
  context.id++;

  return className;
},

It does output all the numbers (log) and all the classes in my HTML are having those auto-generated numbers, but all the classes have 0 styles.. even though they all should have a background color. So I am not sure if there is a bug or if I am doing something wrong. I was just trying to get the auto-generated numbers working with all classes. Even though I would love to have just random strings instead of numbers, like how localIdentName handles their obfuscation. I might be able to achieve something like that with some base64 encode stuff, since that's also how they provide it in their pattern (localIdentName: '[path][name]__[local]--[hash:base64:5]', with this base64 hash stuff).

So yeah, looks very good though! But I might be implementing it the wrong way..
If you have a better idea how to achieve strings like "1wbh5a2" for example, let me know!

[sndyuk]

@gino

but all the classes have 0 styles..

I think class name starts with number is invalid.

If you have a better idea how to achieve strings like "1wbh5a2" for example, let me know!

You can use a random 7 chars. For example https://stackoverflow.com/questions/1349404/generate-random-string-characters-in-javascript

[yuriti]

Please tell me how to use [\\\\]* ?

I use tailwind with jit and I need a similar expression
(([a-z-:]*)[\\\\]*:)*tw-[a-z_-](([.\[\]\%a-zA-Z0-9_-]*)[\\\\]*)*

[yuriti]

@gino

try a more elegant solution https://medium.com/@my_own_grave/recting-css-generated-by-vue-loader-by-using-classnames-shorten-trick-aa1d25d77473

all the magic lies in the createUniqueIdGenerator method

[gino]

@mr-httdd I am not quite sure if I am using a great regex either and I am not quite sure how to use the approach from that Medium article since I am not using Vue.. I am using Next.js, not sure if I can also use that method in my environment?