Use with Laravel-Mix (outside Laravel) ?

[la5digital]

Hi

The plugin doesn't seem to be updating the respective html/php files. I'm using Laravel-Mix (outside Laravel), PostCSS.

My postcss.config.js file:

module.exports = {
    plugins: [
        require("tailwindcss")({
        }),
        require("autoprefixer")({
        }),
        require("postcss-obfuscator")({
            enable: true,
            jsonsPath: 'css-obfuscator',
            srcPath: "resources", // Source of your files.
            desPath: "public", // Destination for obfuscated html/js/.. files.
            extensions: ['.html', '.php'],
            cssExcludes: ['resources/scss/icons.scss'],
            showConfig: true,
            fresh: true,
            keepData: true,
            multi: true,
            /* options */
        }),
    ],
};

Webpack.mix.js:

const mix = require('laravel-mix');

mix.sass('resources/css/frontend.scss', 'public/css')
    .sass('resources/css/icons.scss', 'public/css');
mix.js('resources/js/app.js', 'public/js');

Project Structure:

/resources/ & /resources/pages has source html/php files with HTML code
/resources/css has css files

package.json scripts:

  "scripts": {
    "minify": "html-minifier --input-dir ./resources/pages --output-dir ./public/pages --file-ext php --collapse-whitespace --remove-comments --process-conditional-comments --minify-js true",
    "dev": "npm run development",
    "development": "mix",
    "watch": "mix watch",
    "hot": "mix watch --hot",
    "prod": "npm run production && npm run minify",
    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js"
  },

Tailwind:

const defaultTheme = require('tailwindcss/defaultTheme');

/** @type {import('tailwindcss').Config} */

module.exports = {
  content: ["./resources/**/*.{htm,html,js, php}"],
........

[n4j1Br4ch1D]

ok ill check 4 u

[n4j1Br4ch1D]

hi @la5digital , plz check the project setup & configuration used in this project: php / tailwindcss.
no Laravel-Mix is used but I expect it to work the same. else if it doesn't work for you ill make a new replit using Laravel-Mix.
https://replit.com/@n4j1Br4ch1D/postcss-obsfucator-php-and-tailwindcss?v=1

// postcss.config.js
module.exports = {
    plugins: [
        require("tailwindcss")({
        }),
        require("autoprefixer")({
        }),
        require("postcss-obfuscator")({
            srcPath: "resources", // Source of your files.
            desPath: "public", // Destination for obfuscated html/js/.. files.
            extensions: ['.html', '.php'],
            // cssExcludes: ['resources/scss/icons.scss'],
            formatJson: true // Format obfuscation data JSON file.
        }),
    ],
};

    "scripts": {
      "postcss": "postcss resources/**/*.css  --dir public/css"
    },

and can you try this:

 // webpack.mix.js:
const mix = require('laravel-mix');

mix.sass('resources/css/frontend.scss', 'resources/css')
    .sass('resources/css/icons.scss', 'resources/css');
mix.js('resources/js/app.js', 'public/js');

[n4j1Br4ch1D]

so it generates main.json correctly, same for CSS file they are all obfuscated. but HTML/PHP files are not obfuscated??

[la5digital]

I've realised the issue. My source style files were .scss instead of .css.

[n4j1Br4ch1D]

so is everything working fine now?

[n4j1Br4ch1D]

I got it working too

by the way, you can do this chain everything in webpack mix instead of separated postcss config and of course exclude scss files:

// webpack.mix.js

let mix = require('laravel-mix');

mix.sass('src/css/frontend.scss', 'dist/css')
    .sass('src/css/icons.scss', 'dist/css')
    .postCss("src/css/tailwind.css", "dist/css", [
        require("tailwindcss"),
        require("autoprefixer")(),
        require("postcss-obfuscator")({
            srcPath: "src", // Source of your files.
           // desPath: "out", // Destination for obfuscated html/js/.. files.
            extensions: ['.html', '.php'],
            cssExcludes: ['src/css/icons.scss'],
            formatJson: true // Format obfuscation data JSON file.
        }),
    ]);

mix.js('src/js/app.js', 'dist/js');

[n4j1Br4ch1D]

@la5digital if everything works fine plz close the issue.

[la5digital]

@n4j1Br4ch1D My frontend.css is file is basically just main tailwind styling:

@tailwind base;
@tailwind components;
@tailwind utilities;

The script runs fine now but I've noticed quite a few styles are broken.

What is the best approach to diagnose this?

[n4j1Br4ch1D]

what exactly is broken? are some css classes not being obfuscated mainly ones declared inside .SCSS ??

[la5digital]

All class names are obfuscated but some buttons, general page layout and some other things are not resolving correctly to original styles.

[n4j1Br4ch1D]

1. Add this options to debug/diagnose:

  fresh: true, // Create new obfuscation data list or use already existed one (to keep production cache or prevent data scrapping).
  classMethod:  'none', obfuscation method for classes.
  classPrefix: "c-", // ClassName prefix.
  classSuffix: "-c", // ClassName suffix.
  formatJson: true, // Format obfuscation data JSON file.

2. Then check if main.json file has all classes including the ones defined in scss , and also if the prefix & suffix are added.
   check if classes in destination CSS files are obfuscated (have prefixes & suffixes set).

3. Check classes in destination HTML files m if they had prefixes and suffixes added correctly.

[n4j1Br4ch1D]

once you realize something odd let me know

[la5digital]

With the following design is still broken:
classMethod: 'none',
classPrefix: "c-",

Broken with the following:
classSuffix: "-c",

Works with the following options:
classMethod: 'none',
classSuffix: "-c",

Works with the following options:
classMethod: 'none',

Main issue seems to be with classMethod

[n4j1Br4ch1D]

what version are u using? last 1.5.4

[la5digital]

"postcss-obfuscator": "^1.5.4",

[n4j1Br4ch1D]

plz, provide an example of a broken CSS selector: how it looks. originally and inside main.json inside css and inside html

[n4j1Br4ch1D]

@la5digital Plz if the new issue isn't related plz close this one and open a new one with and example:

an example of a broken CSS selector: how it looks. originally and inside main.json inside css and inside html

[la5digital]

sure, will make a new issue later with more details.