How to obfuscate classnames inside the php files?

[semdzh]

Hi,

I'm trying to obfuscate the class names of the Wordpress template.

I used this plugin and connected it via Webpack. After running the npm run build command, all class names in main.css are encrypted, but how do I make the classes in the all php files encrypted too?

Here is the code of my webpack

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const MangleCssClassPlugin = require('mangle-css-class-webpack-plugin');
 
module.exports = {
    mode: 'production',
    entry: './src/index.js',
    output:{
        filename:"scripts.js",
        path: path.resolve(__dirname,"assets")
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename:"/css/main.css",
        }),
        new MangleCssClassPlugin({
            classNameRegExp: '((hover|focus|active|disabled|visited|first|last|odd|even|group-hover|focus-within|xs|sm|md|lg|xl)[\\\\]*:)*tw-[a-zA-Z0-9_-]*([\\\\]*\/[0-9]*)?',
            ignorePrefixRegExp: '((hover|focus|active|disabled|visited|first|last|odd|even|group-hover|focus-within|xs|sm|md||lg|xl)[\\\\]*:)*',
            log: true,
          }),
    ],
    module: {
        rules: [{
            test: /\.css$/,
            use: [
                MiniCssExtractPlugin.loader,
                'css-loader',
                'postcss-loader',
            ]
        }]
    },
};```

**Also, is there any way to make sure that all these changes are saved in separate files, and not change the main files?** 

[sndyuk]

Hi @semdzh,

If your webpack loads the PHP files, the function should handle these files
https://github.com/sndyuk/mangle-css-class-webpack-plugin/blob/master/lib/optimizer.js#L20

If true, the regex doesn't match any CSS written a PHP file.
I would like to see the raw source: https://github.com/sndyuk/mangle-css-class-webpack-plugin/blob/master/lib/optimizer.js#L39

[semdzh]

Hi @semdzh,

If your webpack loads the PHP files, the function should handle these files
https://github.com/sndyuk/mangle-css-class-webpack-plugin/blob/master/lib/optimizer.js#L20

If true, the regex doesn't match any CSS written a PHP file.
I would like to see the raw source: https://github.com/sndyuk/mangle-css-class-webpack-plugin/blob/master/lib/optimizer.js#L39

Hi @sndyuk
Thank you for your feedback.

How do I make webpack handle php files? I didn't find any plugin or loader for webpack to load the php files.
Which raw source do you mean?

Sorry for the stupid questions. I've been trying to connect this plugin for the third day now, my head is not thinking straight.

[sndyuk]

@semdzh

How do I make webpack handle php files?

Webpack loads all dependencies included by the entry point(IJS) and pass them to loaders/plugins and generate output.
ref. https://webpack.js.org/concepts/#entry

So your case is unusual but I think you can although it depends on the architecture. Could you provide the sample PHP application that can reproduce the issue?

[semdzh]

@semdzh

How do I make webpack handle php files?

Webpack loads all dependencies included by the entry point(IJS) and pass them to loaders/plugins and generate output.
ref. https://webpack.js.org/concepts/#entry

So your case is unusual but I think you can although it depends on the architecture. Could you provide the sample PHP application that can reproduce the issue?

Hey @sndyuk,
You're right. I spent a few days and didn't find any solution.

I'm working on WordPress template, so I can share this template with you.
Wordpress template link

Ignore the plugins I added to package.json 😅

[sndyuk]

FYI: I'm planning to take a look at it this weekend.

[semdzh]

Solved.
I used an adapted version of this plugin without webpack.

[sndyuk]

@semdzh

I used an adapted version of this plugin without webpack.

That's interesting. Could you elaborate on it?