Use with Vite + React + Tailwind ?

sort72 commented 1 year ago

Hi, I like this plugin, but I'm not able to install it on my project which uses Tailwind, React, Vite and PostCSS, could you offer some guidance, please?

I saw the instructions in Astro + Tailwind example but it won't work for me

Thanks!

sort72 commented 1 year ago

I used 'yarn build' and it generated the following output in console:

Output

And it also generated 'out' and 'dist' directories, however if I access 'dist/index.html' file, it says:

Unexpected Application Error! 404 Not Found

n4j1Br4ch1D commented 1 year ago

Hi, Thanks for Asking.

I got it running with React + Vite + TailwindCSS :

Fork this Replit:

https://replit.com/@n4j1Br4ch1D/postcss-obfuscator-react-vite-tailwindcss

How it's done:

1- install postcss-obfuscator:

# npm
npm install postcss-obfuscator --save-dev
# yarn
yarn add postcss-obfuscator --dev

2- install tailwindcss and configure it:

# Using NPM
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

3- create src/input.css and import tailwindcss:

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

4- create postcss.config.cjs this minimum config I used in demo

//postcss.config.cjs 

process.env.NODE_ENV = "development" //development //obfuscation //production
const isObfscMode = process.env.NODE_ENV === 'obfuscation'; 

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
    require('postcss-obfuscator')({
    /* options */
      enable: isObfscMode, // Force Run on Dev Env or when srcPath equals desPath.
      srcPath: "src", // Source of your files.
      desPath: "out", // Destination for obfuscated html/js/.. files.
      extensions: ['.jsx'],
      formatJson: true, // Format obfuscation data JSON file.
    })
  ]
}

5- add this npm script's to package.json

    "tailwindcss": "npx tailwindcss -i ./src/input.css -o ./src/output.css",
    "postcss": "postcss src/**/*.css  --dir out/css",
    "obfuscate": "npm run tailwindcss && npm run postcss"

6- Install postcss-cli:

npm i -D postcss postcss-cli

7- now to obfuscate, set the env mode to obfuscation , and in your console run :

 npm run obfuscate

which will generate obfuscated JSON file, with obfuscated files in an output folder.

Note: postcss is automatically run with Vite so its preferred to create a customer postcss script to run only when you want to obfuscate ready for production see the readme for more details. and feel free to contact me again. Also you can use two tricks:

the enable option (as used in demo) to enable it only in specific mode and to make sure tailwindcsss works fine in dev mode:


process.env.NODE_ENV = "development" //development //obfuscation //production
const isObfscMode = process.env.NODE_ENV === 'obfuscation';

//enable: isObfscMode,

2. the `callBack `option, a Callback function to call after obfuscation is done. that way once obfuscation is done you can config and prepare your project for production: so basically you use `callBack` option to set the env mode back to `production` so that obsfucation will not run, and then config your app source folder to use `out` folder instead of `src` for production. and the imported tawilwindcss file. if u want css file to be obfuscated to same path just set the ouput directory of postcss directly to `out`

"postcss": "postcss src/*/.css --dir out",


so basically you use `callBack` option to set the env mode back to `production` and to source folder of production to `out` instead of `src` that way it will work. when you run `npm run build`

n4j1Br4ch1D commented 1 year ago

I used 'yarn build' and it generated the following output in console:

And it also generated 'out' and 'dist' directories, however if I access 'dist/index.html' file, it says:

Unexpected Application Error! 404 Not Found

I think thats a different issue for me it worked fine so plz try this: in dist/index.html change url paths (remove the slash/) instead of /assets/... should be assets/... and so on

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + React</title>
    <script type="module" crossorigin src="assets/index-6e17a1d2.js"></script>
    <link rel="stylesheet" href="assets/index-fffba02c.css">
  </head>
  <body>
    <div id="root"></div>

  </body>
</html>

Also if u have any classes that uses reserved names change them: for example: if you have a class called react (which comes with react boilerplate) then it will cause a problem:

import React from 'react'

that will be turned in to

import React from 'j6yay'

which will result in an error:

Failed to resolve import "j6yay" from "src/main.jsx". Does the file exist?

@sort72 plz if the issue was resolved then close it. else contact me back I don't close issues until they are truly solved and the issuers close them themselves. and consider starting the project to keep it going

sort72 commented 1 year ago

Hi, Thanks for Asking.

I got it running with React + Vite + TailwindCSS :

Fork this Replit:

https://replit.com/@n4j1Br4ch1D/postcss-obfuscator-react-vite-tailwindcss

How it's done:

1- install postcss-obfuscator:
# npm
npm install postcss-obfuscator --save-dev
# yarn
yarn add postcss-obfuscator --dev
2- install tailwindcss and configure it:
# Using NPM
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
3- create src/input.css and import tailwindcss:
@tailwind base;
@tailwind components;
@tailwind utilities;
4- create postcss.config.cjs this minimum config I used in demo
//postcss.config.cjs 

process.env.NODE_ENV = "development" //development //obfuscation //production
const isObfscMode = process.env.NODE_ENV === 'obfuscation'; 

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
    require('postcss-obfuscator')({
    /* options */
      enable: isObfscMode, // Force Run on Dev Env or when srcPath equals desPath.
      srcPath: "src", // Source of your files.
      desPath: "out", // Destination for obfuscated html/js/.. files.
      extensions: ['.jsx'],
      formatJson: true, // Format obfuscation data JSON file.
    })
  ]
}
5- add this npm script's to package.json
    "tailwindcss": "npx tailwindcss -i ./src/input.css -o ./src/output.css",
    "postcss": "postcss src/**/*.css  --dir out/css",
    "obfuscate": "npm run tailwindcss && npm run postcss"
6- Install postcss-cli:
npm i -D postcss postcss-cli
7- now to obfuscate, set the env mode to obfuscation , and in your console run :
 npm run obfuscate 
which will generate obfuscated JSON file, with obfuscated files in an output folder.

Note: postcss is automatically run with Vite so its preferred to create a customer postcss script to run only when you want to obfuscate ready for production see the readme for more details. and feel free to contact me again. Also you can use two tricks:

the enable option (as used in demo) to enable it only in specific mode and to make sure tailwindcsss works fine in dev mode:
process.env.NODE_ENV = "development" //development //obfuscation //production
const isObfscMode = process.env.NODE_ENV === 'obfuscation'; 

//enable: isObfscMode,
the callBackoption, a Callback function to call after obfuscation is done. that way once obfuscation is done you can config and prepare your project for production: so basically you use callBack option to set the env mode back to production so that obsfucation will not run, and then config your app source folder to use out folder instead of src for production. and the imported tawilwindcss file. if u want css file to be obfuscated to same path just set the ouput directory of postcss directly to out
 "postcss": "postcss src/**/*.css  --dir out",
so basically you use callBack option to set the env mode back to production and to source folder of production to out instead of src that way it will work. when you run npm run build

Hi, thanks for your response

I did the steps you mentioned and I'm almost there, but I have a problem I can't understand why is happening, it looks like a bug

I run first

  yarn obfuscate

Then

 yarn build

And it's showing some warnings, because I was using classes with arbitrary values before (Like h-[0.5rem]) and the parser was not able to obfuscate them properly, showing those warnings.

Then I removed the arbitrary values and replaced them for built-in tailwind values, then obfuscated it again and all that. But, when I build it one more time, it still shows warnings (Even when I'm not using the arbitrary values anymore). If I search any of the warning classes, none of them exist! See the photo:

Screenshot_10

So I ignored warning and renamed out to src and built it, but it was complainig about a syntax error in the CSS. I fixed it and built again, with a successful built, then I opened my project but none of the styles were there. The css classes in the html tags were named different than in the CSS file (For example, in the html class, the name was 'abcd' and in the css file, that class had the 'xyz' name).

Maybe this last issue is related with warnings thing, I removed css-obfuscator, dist and out folders before building again (I also removed node_modules, and restarted the pc, lol), and the warnings were still there.

Any hint?

Thank you!

n4j1Br4ch1D commented 1 year ago

Hi, Thanks for Asking.

I got it running with React + Vite + TailwindCSS :

Fork this Replit:

https://replit.com/@n4j1Br4ch1D/postcss-obfuscator-react-vite-tailwindcss

How it's done:

1- install postcss-obfuscator:
# npm
npm install postcss-obfuscator --save-dev
# yarn
yarn add postcss-obfuscator --dev
2- install tailwindcss and configure it:
# Using NPM
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
3- create src/input.css and import tailwindcss:
@tailwind base;
@tailwind components;
@tailwind utilities;
4- create postcss.config.cjs this minimum config I used in demo
//postcss.config.cjs 

process.env.NODE_ENV = "development" //development //obfuscation //production
const isObfscMode = process.env.NODE_ENV === 'obfuscation'; 

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
    require('postcss-obfuscator')({
    /* options */
      enable: isObfscMode, // Force Run on Dev Env or when srcPath equals desPath.
      srcPath: "src", // Source of your files.
      desPath: "out", // Destination for obfuscated html/js/.. files.
      extensions: ['.jsx'],
      formatJson: true, // Format obfuscation data JSON file.
    })
  ]
}
5- add this npm script's to package.json
    "tailwindcss": "npx tailwindcss -i ./src/input.css -o ./src/output.css",
    "postcss": "postcss src/**/*.css  --dir out/css",
    "obfuscate": "npm run tailwindcss && npm run postcss"
6- Install postcss-cli:
npm i -D postcss postcss-cli
7- now to obfuscate, set the env mode to obfuscation , and in your console run :
 npm run obfuscate 
which will generate obfuscated JSON file, with obfuscated files in an output folder. Note: postcss is automatically run with Vite so its preferred to create a customer postcss script to run only when you want to obfuscate ready for production see the readme for more details. and feel free to contact me again. Also you can use two tricks:

the enable option (as used in demo) to enable it only in specific mode and to make sure tailwindcsss works fine in dev mode:
process.env.NODE_ENV = "development" //development //obfuscation //production
const isObfscMode = process.env.NODE_ENV === 'obfuscation'; 

//enable: isObfscMode,
the callBackoption, a Callback function to call after obfuscation is done. that way once obfuscation is done you can config and prepare your project for production: so basically you use callBack option to set the env mode back to production so that obsfucation will not run, and then config your app source folder to use out folder instead of src for production. and the imported tawilwindcss file. if u want css file to be obfuscated to same path just set the ouput directory of postcss directly to out
 "postcss": "postcss src/**/*.css  --dir out",
so basically you use callBack option to set the env mode back to production and to source folder of production to out instead of src that way it will work. when you run npm run build
Hi, thanks for your response

I did the steps you mentioned and I'm almost there, but I have a problem I can't understand why is happening, it looks like a bug

I run first
  yarn obfuscate
Then
 yarn build
And it's showing some warnings, because I was using classes with arbitrary values before (Like h-[0.5rem]) and the parser was not able to obfuscate them properly, showing those warnings.

Then I removed the arbitrary values and replaced them for built-in tailwind values, then obfuscated it again and all that. But, when I build it one more time, it still shows warnings (Even when I'm not using the arbitrary values anymore). If I search any of the warning classes, none of them exist! See the photo:

So I ignored warning and renamed out to src and built it, but it was complainig about a syntax error in the CSS. I fixed it and built again, with a successful built, then I opened my project but none of the styles were there. The css classes in the html tags were named different than in the CSS file (For example, in the html class, the name was 'abcd' and in the css file, that class had the 'xyz' name).

Maybe this last issue is related with warnings thing, I removed css-obfuscator, dist and out folders before building again (I also removed node_modules, and restarted the pc, lol), and the warnings were still there.

Any hint?

Thank you!

You welcome ok let me check m but 1st I been updating my answers: also i would recommend checking this https://stackoverflow.com/questions/66863200/changing-the-input-and-output-directory-in-vite its better then renaming the src and out folder as it will cause issues . make sure your src files remain original also use enabled option as I explained change env mode to production so obfuscation wont run.

sort72 commented 1 year ago

Actually, I tried the thing in vite.config.js like 1 hour ago, but I was not able to get it working.

I added root to my vite config

export default defineConfig({
    plugins: [svgr(), react()],
    root: "src",
});

But it said it was not able to find the file src/index.html (Which is in root path, not in src), so I was not able to do so. I thought it was a problem more related to vite than to your package, so I was thinking to solve it after I had obfuscation working

n4j1Br4ch1D commented 1 year ago

I opened an issue for tailwindcss arbitrary values it doesn't work since it's a new feature in tailwindcss Using tailwindcss arbitrary values hopefully, I will be able to solve it very soon.

n4j1Br4ch1D commented 1 year ago

Actually, I tried the thing in vite.config.js like 1 hour ago, but I was not able to get it working.

I added root to my vite config
export default defineConfig({
  plugins: [svgr(), react()],
  root: "src",
});
But it said it was not able to find the file src/index.html (Which is in root path, not in src), so I was not able to do so. I thought it was a problem more related to vite than to your package, so I was thinking to solve it after I had obfuscation working

@sort72 hi check the replit demo I made this changes: see if they work for you:

install cross-env
```
npm install --save-dev cross-env
```

change npm script: set env to obfuscation

"tailwindPostcss": "npm run tailwindcss && npm run postcss",
"obfuscate": "cross-env NODE_ENV=obfuscation npm run tailwindPostcss"

I used the enable and callBack option:

//postcss.config.cjs 
const isObfscMode = process.env.NODE_ENV === 'obfuscation'; 
module.exports = {
dir: 'dist/css',
plugins: [
require('tailwindcss'),
require('autoprefixer'),
require('postcss-obfuscator')({
/* options */
  enable: isObfscMode, // Force Run on Dev Env or when srcPath equals desPath.
  srcPath: "src", // Source of your files.
  desPath: "out", // Destination for obfuscated html/js/.. files.
  extensions: ['.jsx'],
  formatJson: true, // Format obfuscation data JSON file.
  callBack: function () { // Callback function to call after obfuscation is done.
    process.env.NODE_ENV = "production" // make sure postcss-obfuscator doesnt run  
  } 
})
]
}

change vite config for build command & production env to set out as source directory:
```
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
```

// https://vitejs.dev/config/ export default defineConfig(({ command, mode }) => { if (command === 'build' && mode === 'production') { // build and production specific config return { base: '', root: 'out', server: { host: '0.0.0.0', }, plugins: [react()], } } else { return { server: { host: '0.0.0.0', }, plugins: [react()], } } })

sort72 commented 1 year ago

I made your suggested changes and I first ran

yarn obfucaste

Then

yarn build

But I'm facing the following error:

yarn run v1.22.5
$ vite build
vite v4.2.0 building for production...
✓ 0 modules transformed.
✓ built in 24ms
Could not resolve entry module "out/index.html".
error during build:
RollupError: Could not resolve entry module "out/index.html".
    at error (file:///C:/dev/book/node_modules/rollup/dist/es/shared/node-entry.js:2125:30)
    at ModuleLoader.loadEntryModule (file:///C:/dev/book/booking/node_modules/rollup/dist/es/shared/node-entry.js:23798:20)
    at async Promise.all (index 0)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

I saw you changed root in vite.config.js to out but I don't know why Vite checks if index.html exists there (It's in root directory, outside /out, as a default Vite installation)

I think that this is the last thing we need to fix to get it working

ya I think so a problem with vite(Rollup): plz notice recent change in my previous answer: since cross-env doesn't support &&

change npm script: set env to obfuscation

"tailwindPostcss": "npm run tailwindcss && npm run postcss",
"obfuscate": "cross-env NODE_ENV=obfuscation npm run tailwindPostcss"

n4j1Br4ch1D commented 1 year ago

@sort72 have you tried this?

      "build": "vite build out --emptyOutDir",

sort72 commented 1 year ago

I discovered that we don't need to set a root value inside vite config, instead, change the js path in index.html

From

<script type="module" src="/src/index.jsx"></script>

To

<script type="module" src="/out/index.jsx"></script>

How could we handle it with environment vars?

sort72 commented 1 year ago

So I added 2 .env files: .env.production and .env.dev . And I'm able to switch what folder I want to use on a build (src or out)

.env.production

VITE_OBFUSCATE=true
VITE_SOURCE_PATH='out'

.env.dev

VITE_OBFUSCATE=false
VITE_SOURCE_PATH='src'

And in index.html

<script type="module" src="/%VITE_SOURCE_PATH%/main.jsx"></script>

So on production, I need to run

yarn obfuscate
yarn build

And it creates everything with out directory

However, I'm still facing an issue: The css is not shown properly because the classes in html are obfuscated, but the index.css generated file on /dist contains non obfuscated classes (Html: asdhjba, CSS: border-2, for example)

n4j1Br4ch1D commented 1 year ago

@sort72 can i see your postcss config and can u validate if 1st out/output.css classes are obfuscated. if so check if classes in dist/assets/index-*.css are also obfuscated same for dist/assets/index-*.js. also npm scripts realted.

sort72 commented 1 year ago

Here is my postcss config

module.exports = {
    plugins: [
        require("tailwindcss"),
        require("autoprefixer"),
        require("postcss-obfuscator")({
            /* options */
            enable: true, // Force Run on Dev Env or when srcPath equals desPath.
            fresh: true,
            srcPath: "src", // Source of your files.
            desPath: "out", // Destination for obfuscated html/js/.. files.
            extensions: [".jsx", ".js"],
            classPrefix: "msy-", // Prefix for obfuscated CSS class names.
            formatJson: true, // Format obfuscation data JSON file.
            callBack: function () {
                process.env.NODE_ENV = "production"; // make sure postcss-obfuscator doesnt run
            },
        }),
    ],
};

I'm using enable: true for the moment because it seems that process.env.NODE_ENV doesn't get updated with the code you shared on package.json and it's always 'development'. So I'm looking for a solution to this.

I added fresh: true to see if I was able to fix something I mentioned before:

I don't understand why the heck this is including a very old css code in the out/index.css (aka input.css) file, as I mentioned earlier today, I had tailwind arbitrary values and it didn't work (You created a new issue about this), so I changed it to tailwind classes to fix and be able to compile the obfuscated css. BUT, I don't understand why it is still adding old css classes with arbitrary values, even when those arbitrary values DON'T exist anywhere on my code and I also reinstalled node_modules...

n4j1Br4ch1D commented 1 year ago

maybe because postcss is automatically run so plz consider my demo its working fine

const isObfscMode = process.env.NODE_ENV === 'obfuscation'; 
 //  enable: isObfscMode, // Force Run on Dev Env or when srcPath equals desPath.

npm script

    "obfuscate": "cross-env NODE_ENV=obfuscation npm run tailwindPostcss"

refer to cross-env doc for linux

sort72 commented 1 year ago

So I fixed that issue but I'm still having problems showing the CSS.

My classes on out/output.css are obfuscated and the classes inside dist/assets/main-*.css are obfuscated as well BUT those classes do not match

I have a prefix set on my postcss settings (msy-) And, on output, it generates class with prefixes as shown here:

.msy-qhcmd {
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
}

However, on dist/assets/main-*.css that same class is:

.chb5e {
    --tw-bg-opacity: 1;
    background-color: rgb(243 244 246 / var(--tw-bg-opacity));
}

The prefix is not present and also the class name changed totally, so they don't match and the style is not shown. (That's for ALL classes, but I gave you just an example)

n4j1Br4ch1D commented 1 year ago

I see can you try deleting the css-obsucator folder also remove fresh option

sort72 commented 1 year ago

I have removed it so many times without success. Also tried with and without fresh option. I’ll continue trying things and will add an answer with my new findings

De: Najib Rachid @.> Enviado: Thursday, May 4, 2023 1:51:43 PM Para: n4j1Br4ch1D/postcss-obfuscator @.> Cc: sort72 @.>; Mention @.> Asunto: Re: [n4j1Br4ch1D/postcss-obfuscator] How could I use this within a project using React + Tailwind + Vite? (Issue #2)

I see can you try deleting the css-obsucator folder

— Reply to this email directly, view it on GitHubhttps://github.com/n4j1Br4ch1D/postcss-obfuscator/issues/2#issuecomment-1535249540, or unsubscribehttps://github.com/notifications/unsubscribe-auth/ALMDVHBAP6TP5FNUV5RKVKTXEP3D7ANCNFSM6AAAAAAXU3GMRQ. You are receiving this because you were mentioned.Message ID: @.***>

n4j1Br4ch1D commented 1 year ago

yes plz do, I wish I can re-produce the issue, and by the way, Check Using tailwindcss arbitrary values. I just identified the problem.

sort72 commented 1 year ago

Thanks for taking the time to handle this issue, the solution you mentioned there seems good for all Tailwind arbitrary values, please do so.

I'll continue my tests related to css names mismatch tomorrow and let you know

n4j1Br4ch1D commented 1 year ago

The new Version released, check the release notes:

and to help you with your issue use this options to debug along with the prefix option:

classMethod: 'none'

also try excluding some paths or files maybe focus on one file as a start.

cssExcludes: Files and paths to exclude from css obfuscation, default is none.

or recreate a fresh demo project for testing: see if the same issue will appear.

sort72 commented 1 year ago

Hi, I'm working on this at the moment but I'm facing some issues with the parser. It seems not to support responsive classes in Tailwind

I created a separated project just for testing this (And uploaded my code here so you can test)

I just created a new react vite project and added tailwindcss and the obfuscator, and followed the instructions you have given in this topic.

I added a div with 2 classes: bg-red-400 md:bg-blue-400

On dev, if you resize the window to something small, the background is red. And, on bigger screens, the background is blue.

However, on the obfuscated built, the div is always red (It doesn't recognize md:bg-blue-400)

Screenshot_12

I think the parser is good on the css part, but, the class in the html is malformed. Now it's generated as msy-md\:bg-blue-400 BUT it should be msy-md:bg-blue-400. Removing the \ fixes that.

Screenshot_13

That's probably a problem only with prefixes.

sort72 commented 1 year ago

I tested without the prefix and it doesn't work either:

Screenshot_14

The class should be md:bg-blue-400-obfsctd instead of md\:bg-blue-400-obfsctd (Without the \) after the :

(I'm using latest version)

n4j1Br4ch1D commented 1 year ago

i just tested the last version as well in the replit , responsive seems working there's still an issue though with arbitrary values replacement in HTML can u make a replit for your situation plz, I think I get the bug cuz if used with prefixes and suffixes right?

n4j1Br4ch1D commented 1 year ago

in the replit i have this:

    <main class="pt-[50px] m-4 bg-blue-500 md:bg-red-500">
      <h1 class="text-xl">Welcome to <span class="text-indigo-500">postcss-obsfucator</span></h1>
      <p class="border p-4 m-2 rounded">
        this demo is to try postcss-obsfucator with react, tyescript, vite & tailwindcss
      </p>
    </main>

I get this:

{
  ".read-the-docs": ".c-va7vn-c",
  ".m-2": ".c-ecywa-c",
  ".m-4": ".c-fwnil-c",
  ".rounded": ".c-fpb7h-c",
  ".border": ".c-zup9i-c",
  ".bg-blue-500": ".c-alvnn-c",
  ".p-4": ".c-mc2w6-c",
  ".pt-\\[50px\\]": ".c-vi531-c",
  ".text-xl": ".c-qu856-c",
  ".text-indigo-500": ".c-j4e13-c",
  ".md\\:bg-red-500": ".c-ilin8-c"
}

    <main class="pt-[50px] c-fwnil-c c-alvnn-c c-ilin8-c">
      <h1 class="c-qu856-c">Welcome to <span class="c-j4e13-c">postcss-obsfucator</span></h1>
      <p class="c-zup9i-c c-mc2w6-c c-ecywa-c c-fpb7h-c">
        this demo is to try postcss-obsfucator with react, tyescript, vite & tailwindcss
      </p>
    </main>

.c-ecywa-c {
  margin: 0.5rem;
}

.c-fwnil-c {
  margin: 1rem;
}

.c-fpb7h-c {
  border-radius: 0.25rem;
}

.c-zup9i-c {
  border-width: 1px;
}

.c-alvnn-c {
  --tw-bg-opacity: 1;
  background-color: rgb(59 130 246 / var(--tw-bg-opacity));
}

.c-mc2w6-c {
  padding: 1rem;
}

.c-vi531-c {
  padding-top: 50px;
}

.c-qu856-c {
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.c-j4e13-c {
  --tw-text-opacity: 1;
  color: rgb(99 102 241 / var(--tw-text-opacity));
}

@media (min-width: 768px) {
  .c-ilin8-c {
    --tw-bg-opacity: 1;
    background-color: rgb(239 68 68 / var(--tw-bg-opacity));
  }
}

I used prefixes and suffixes. the only issue I see is pt-[50px] doesn't get replaced in HTML , I have re-opend the issue ill fix it soon. I'm I wrong?

n4j1Br4ch1D commented 1 year ago

@sort72 ok I reproduced the issue it's related to classMethod: "none" used with prefixes and suffixes. ill open an issue and solve both of them soon. thanks so much for your cooperation. for now u can comment classMethod: "none" . if works fine close this issue.

sort72 commented 1 year ago

I found another bug. In tailwind, you can use / in classes. For example: md:w-1/2

That is not mapped properly in the output.css file:

...

.o58kp {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

@media (min-width: 768px) {
  .md\:w-1\/2  /* this should be .x3bsu */
  {
    width: 50%;
  }

  .od5k0 {
    --tw-bg-opacity: 1;
    background-color: rgb(96 165 250 / var(--tw-bg-opacity));
  }
}

css-obfuscator/main.json

{
  ...
  ".shadow": ".o58kp",
  ".md\\:w-1\\\\/2": ".x3bsu",
  ".md\\:bg-blue-400": ".od5k0"
}

n4j1Br4ch1D commented 1 year ago

yes, I think it's probably broken by the last version, ill fix it as well. ill open an issue. but is everything beside those issues work fine? if so close this one and follow up with the other issues.

sort72 commented 1 year ago

Yeah, with the blank project I created to test it, it seems to be working perfectly. So we can continue with the new issues you created, I'll close this. Thanks!

Little note: I set keepData to false, but it only removed te css-obfuscator directory. It would be nice if that property remove the out created directory and the output.css file as well. Is it possible?

n4j1Br4ch1D commented 1 year ago

Yeah, with the blank project I created to test it, it seems to be working perfectly. So we can continue with the new issues you created, I'll close this. Thanks!

Little note: I set keepData to false, but it only removed te css-obfuscator directory. It would be nice if that property remove the out created directory and the output.css file as well. Is it possible?

@sort72 glad to hear it open new issues as a feature request.

n4j1Br4ch1D / postcss-obfuscator