Use with Vite + React + Tailwind ? #2

sort72 · 2023-05-03T19:39:22Z

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 · 2023-05-03T19:47:32Z

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

n4j1Br4ch1D · 2023-05-03T21:28:37Z

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 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 · 2023-05-04T09:39:49Z

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 · 2023-05-04T13:32:34Z

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 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

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!

n4j1Br4ch1D · 2023-05-04T13:43:00Z

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: ```shell # 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 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
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 · 2023-05-04T13:54:50Z

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 · 2023-05-04T14:10:19Z

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 · 2023-05-04T15:07:49Z

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 · 2023-05-04T15:18:46Z

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 &&
2. change npm script: set env to obfuscation

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

n4j1Br4ch1D · 2023-05-04T15:42:32Z

@sort72 have you tried this?

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

sort72 · 2023-05-04T15:44:46Z

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 · 2023-05-04T16:37:00Z

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 · 2023-05-04T17:14:10Z

@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 · 2023-05-04T17:31:45Z

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 · 2023-05-04T17:47:15Z

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 · 2023-05-04T18:39:24Z

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 · 2023-05-04T18:51:33Z

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

sort72 · 2023-05-04T18:53:36Z

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 GitHub<#2 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/ALMDVHBAP6TP5FNUV5RKVKTXEP3D7ANCNFSM6AAAAAAXU3GMRQ>. You are receiving this because you were mentioned.Message ID: ***@***.***>

n4j1Br4ch1D · 2023-05-04T19:03:51Z

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 · 2023-05-04T20:29:21Z

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 · 2023-05-05T20:18:09Z

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 · 2023-05-08T13:24:49Z

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)

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.

That's probably a problem only with prefixes.

sort72 · 2023-05-08T13:35:55Z

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

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 · 2023-05-08T13:51:34Z

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 · 2023-05-08T14:05:35Z

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 · 2023-05-08T14:16:39Z

@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 · 2023-05-08T16:03:38Z

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 · 2023-05-08T16:29:42Z

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 · 2023-05-08T16:40:29Z

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 · 2023-05-08T16:44:07Z

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 self-assigned this May 3, 2023

n4j1Br4ch1D added documentation Improvements or additions to documentation help wanted Extra attention is needed good first issue Good for newcomers question Further information is requested labels May 3, 2023

n4j1Br4ch1D pinned this issue May 3, 2023

sort72 closed this as completed May 8, 2023

n4j1Br4ch1D changed the title ~~How could I use this within a project using React + Tailwind + Vite?~~ use with React + Tailwind + Vite? May 9, 2023

n4j1Br4ch1D changed the title ~~use with React + Tailwind + Vite?~~ Use with React + Tailwind + Vite? May 9, 2023

n4j1Br4ch1D changed the title ~~Use with React + Tailwind + Vite?~~ Use with Vite + React + Tailwind ? May 9, 2023

rakeshbhai0091 mentioned this issue Dec 8, 2023

vite + React + tailwind not working #22

Open

billpebert mentioned this issue May 14, 2024

CSS file not detected #27

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Use with Vite + React + Tailwind ? #2

Use with Vite + React + Tailwind ? #2

sort72 commented May 3, 2023

sort72 commented May 3, 2023

n4j1Br4ch1D commented May 3, 2023 •

edited

Loading

n4j1Br4ch1D commented May 4, 2023 •

edited

Loading

sort72 commented May 4, 2023

I got it running with React + Vite + TailwindCSS :

Fork this Replit:

How it's done:

n4j1Br4ch1D commented May 4, 2023 •

edited

Loading

I got it running with React + Vite + TailwindCSS :

sort72 commented May 4, 2023

n4j1Br4ch1D commented May 4, 2023 •

edited

Loading

n4j1Br4ch1D commented May 4, 2023 •

edited

Loading

sort72 commented May 4, 2023 •

edited by n4j1Br4ch1D

Loading

n4j1Br4ch1D commented May 4, 2023

sort72 commented May 4, 2023

sort72 commented May 4, 2023

n4j1Br4ch1D commented May 4, 2023 •

edited

Loading

sort72 commented May 4, 2023

n4j1Br4ch1D commented May 4, 2023 •

edited

Loading

sort72 commented May 4, 2023

n4j1Br4ch1D commented May 4, 2023 •

edited

Loading

sort72 commented May 4, 2023 via email

n4j1Br4ch1D commented May 4, 2023

sort72 commented May 4, 2023

n4j1Br4ch1D commented May 5, 2023

sort72 commented May 8, 2023

sort72 commented May 8, 2023

n4j1Br4ch1D commented May 8, 2023 •

edited

Loading

n4j1Br4ch1D commented May 8, 2023

n4j1Br4ch1D commented May 8, 2023 •

edited

Loading

sort72 commented May 8, 2023 •

edited

Loading

n4j1Br4ch1D commented May 8, 2023

sort72 commented May 8, 2023

n4j1Br4ch1D commented May 8, 2023

Use with Vite + React + Tailwind ? #2

Use with Vite + React + Tailwind ? #2

Comments

sort72 commented May 3, 2023

sort72 commented May 3, 2023

n4j1Br4ch1D commented May 3, 2023 • edited Loading

I got it running with React + Vite + TailwindCSS :

Fork this Replit:

How it's done:

n4j1Br4ch1D commented May 4, 2023 • edited Loading

sort72 commented May 4, 2023

I got it running with React + Vite + TailwindCSS :

Fork this Replit:

How it's done:

n4j1Br4ch1D commented May 4, 2023 • edited Loading

I got it running with React + Vite + TailwindCSS :

sort72 commented May 4, 2023

n4j1Br4ch1D commented May 4, 2023 • edited Loading

n4j1Br4ch1D commented May 4, 2023 • edited Loading

sort72 commented May 4, 2023 • edited by n4j1Br4ch1D Loading

n4j1Br4ch1D commented May 4, 2023

sort72 commented May 4, 2023

sort72 commented May 4, 2023

n4j1Br4ch1D commented May 4, 2023 • edited Loading

sort72 commented May 4, 2023

n4j1Br4ch1D commented May 4, 2023 • edited Loading

sort72 commented May 4, 2023

n4j1Br4ch1D commented May 4, 2023 • edited Loading

sort72 commented May 4, 2023 via email

n4j1Br4ch1D commented May 4, 2023

sort72 commented May 4, 2023

n4j1Br4ch1D commented May 5, 2023

sort72 commented May 8, 2023

sort72 commented May 8, 2023

n4j1Br4ch1D commented May 8, 2023 • edited Loading

n4j1Br4ch1D commented May 8, 2023

n4j1Br4ch1D commented May 8, 2023 • edited Loading

sort72 commented May 8, 2023 • edited Loading

n4j1Br4ch1D commented May 8, 2023

sort72 commented May 8, 2023

n4j1Br4ch1D commented May 8, 2023

n4j1Br4ch1D commented May 3, 2023 •

edited

Loading

n4j1Br4ch1D commented May 4, 2023 •

edited

Loading

n4j1Br4ch1D commented May 4, 2023 •

edited

Loading

n4j1Br4ch1D commented May 4, 2023 •

edited

Loading

n4j1Br4ch1D commented May 4, 2023 •

edited

Loading

sort72 commented May 4, 2023 •

edited by n4j1Br4ch1D

Loading

n4j1Br4ch1D commented May 4, 2023 •

edited

Loading

n4j1Br4ch1D commented May 4, 2023 •

edited

Loading

n4j1Br4ch1D commented May 4, 2023 •

edited

Loading

n4j1Br4ch1D commented May 8, 2023 •

edited

Loading

n4j1Br4ch1D commented May 8, 2023 •

edited

Loading

sort72 commented May 8, 2023 •

edited

Loading