How to I can use rollup-plugin-postcss with vite for obfuscate?

[sergeykorobeynikov]

Hello!
I want protect my source code with renaming css classes, similar solution i found here:
https://stackoverflow.com/questions/63462150/rollup-minify-classnames

Am I thinking in the right direction?

My vite.config.js looks like this:
`import obfuscator from 'rollup-plugin-obfuscator';
import postcss from 'rollup-plugin-postcss';

export default {
build: {
sourcemap: false,
rollupOptions : {
plugins : [
postcss({
modules: {
generateScopedName: "[hash:base64:8]",
},
autoModules: true,
}),
obfuscator ( {
transformObjectKeys : true,
unicodeEscapeSequence : true,
numberToExpressions : true,
shuffleStringArray : true,
splitStrings : true,
stringArrayThreshold : 1,
identifierNamesGenerator: 'hexadecimal'
}),
]
} ,
}
}
`

When I build the project I get the error:
`PS C:\data\node\project1> npm run build

project1@1.0.0 build
vite build

vite v2.6.7 building for production...
✓ 181 modules transformed.
[postcss] expected "{".
╷
1 │ export default ''
│ ^
╵
scss\style.scss 1:18 root stylesheet
file: C:/data/node/project1/scss/style.scss
error during build:
Error: expected "{".
╷
1 │ export default ''
│ ^
╵
scss\style.scss 1:18 root stylesheet
at Object.wrapException (C:\data\node\project1\node_modules\sass\sass.dart.js:1254:17)
at SpanScanner.error$3$length$position (C:\data\node\project1\node_modules\sass\sass.dart.js:66379:15)
at SpanScanner.expectChar$2$name (C:\data\node\project1\node_modules\sass\sass.dart.js:66443:12)
at SpanScanner.expectChar$1 (C:\data\node\project1\node_modules\sass\sass.dart.js:66446:19)
at ScssParser0.children$1 (C:\data\node\project1\node_modules\sass\sass.dart.js:89396:10)
at ScssParser0._stylesheet0$_withChildren$1$3 (C:\data\node\project1\node_modules\sass\sass.dart.js:95295:39)
at ScssParser0._stylesheet0$_withChildren$3 (C:\data\node\project1\node_modules\sass\sass.dart.js:95300:19)
at ScssParser0._stylesheet0$_styleRule$2 (C:\data\node\project1\node_modules\sass\sass.dart.js:92512:20)
at ScssParser0._stylesheet0$_variableDeclarationOrStyleRule$0 (C:\data\node\project1\node_modules\sass\sass.dart.js:92355:22)
at ScssParser0._stylesheet0$_statement$1$root (C:\data\node\project1\node_modules\sass\sass.dart.js:92278:215)`

Which direction to go next?

[przemekperon]

There's now a vite obfuscator plugin called vite-plugin-obfuscator.

Quick installation guide:

npm install --save-dev vite-plugin-obfuscator

// vite.config.js
import {viteObfuscateFile} from 'vite-plugin-obfuscator'

export default {
  plugins: [
    viteObfuscateFile({ /* obfuscator_options_here */ })
  ]
}

[cofob]

BUUUUUMP

[scajal]

BUMP

[driss-chelouati]

bump

[michaeljakob]

We need this!

[osbre]

This Vite plugin is currently wip:
https://github.com/kiosion/vite-plugin-class-mangler

[mattiapv]

I use CSS Modules

// vite.config.js
export default {
  css: {
    modules: {
      generateScopedName: '[hash:base64:5]',
    },
}

<!-- App.vue-->
<template>
  <div id="app">
    <p :class="[$style.red, $style.bold]">This should be red and bold</p>
  </div>
</template>

<style module lang="scss"> 
.red {
  color: red;
}
.bold {
  font-weight: 700;
}
</style>

Or import file ending with .module.css

Output

<div id="app">
  <p class="ahtBo Imbg7">This should be red and bold</p>
</div>

[skdishansachin]

But I think I cannot use this option with tailwinds.

[CanRau]

Maybe Uno could be an option for you? here's an example
I commented some more plugins somewhere but can't find it right now 😅