-
-
Notifications
You must be signed in to change notification settings - Fork 4
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Use with Astro + Tailwind ? #1
Comments
Hi, Thanks for Asking. I got it running with Astro + TailwindCSS :Fork this Replit:https://replit.com/@n4j1Br4ch1D/postcss-obfuscator-astro-tailwindcss How it's done:1- install postcss-obfuscator: # npm
npm install postcss-obfuscator --save-dev
# yarn
yarn add postcss-obfuscator --dev 2- add tailwindcss: # Using NPM
npx astro add tailwind
# Using Yarn
yarn astro add tailwind
# Using PNPM
pnpm astro add tailwind 3- create src/css/input.css and import tailwindcss @tailwind base;
@tailwind components;
@tailwind utilities; 4- create postcss.config.cjs (Astro already comes with PostCSS included as part of Vite). put this minimal configuration used in my demo or go to the readme for more: //postcss.config.js
module.exports = {
plugins: [
require('postcss-obfuscator')({
/* options */
srcPath: "src", // Source of your files.
desPath: "out", // Destination for obfuscated html/js/.. files.
extensions: ['.astro'],
cssExcludes: ['css/input.css'], // Files and paths to exclude from css obfuscation.
formatJson: true, // Format obfuscation data JSON file.
})
]
} 5- add this npm script's to package.json "tailwindcss": "npx tailwindcss -i ./src/css/input.css -o ./src/css/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, in your console run : npm run obfuscate which will first run Tailwindcss to generate an output.css for all classes used in your project. Note: postcss is automatically run with Astro so stop Astro first then run the obfuscation command, otherwise it's preferred to create a customer postcss script to run only when you want to obfuscate in production see the readme for more details. and feel free to contact me again. |
Thank you for your detailed answer, I tried it and it worked fine, thank you for such a great tool.👏 |
Hi, super huge thanks for making this and supporting Astro!! Question: How does this work with different astro modes and related to hashed style files. I will test this further but i wanted to start a conversation about this. You’ve selected out as the destination dir but it’s typically dist. That’s making me think this creates separate files and im curious how you get astro to point to those files or maybe i’m misunderstanding. Unrelated Q: How difficult would it be to hash class names with a seed value in a .env, and then shorten down to the lowest length possible. Google does this, as in, the out put starts with a,b,c, etc, eventually getting to aB, etc. Just reduces the size a bit and if it’s a lot of work not worth it. But looking at the code with a simple hash it looks like it should be do relatively straight forward. When i get a chance i’ll take a closer look. 🙏 |
I'm using Astro + TailwindCSS to build a website,how could I use this plugin to obfuscate Tailwindcss class names?
The text was updated successfully, but these errors were encountered: