build production bug Modified the contents of the original document

[hppking]

const cssRecordSelector = config.mangledSelector ? this.mangledSelector : this.selector;
-> const cssRecordSelector = config.minimize ? this.mangledSelector : this.selector;

[Machy8]

Hi, @hppking.

Could you please provide a bit more detail on this issue? I don't understand, what you mean.
Like how can I reproduce that bug? Which tool you use?

[hppking]

@Machy8
solidjs+stylify demo:
cmd yarn build production
to

[hppking]

Cannot modify source file todo-list.jsx

[Machy8]

This behavior is actually correct. Since some frameworks (Symfony, Laravel, Next) don't have hooks for generating files as NuxtJS does. Because of that, Stylify must access the files before framework compilers, therefore it processes source files directly.

However try to add rewriteSelectorsInFiles: false to your Bundle configuration as follows:

 bundles: [
    {
      outputFile: './src/stylify.css',
      files: ['./src/**/*.jsx'],
      rewriteSelectorsInFiles: false,
    },
  ],

I have tested it in SolidJS example and it seems to work (I have updated the example).

Then, you can run yarn build and the selectors will be rewritten only in build files.

[hppking]

Good

[mzaini30]

This behavior is actually correct. Since some frameworks (Symfony, Laravel, Next) don't have hooks for generating files as NuxtJS does. Because of that, Stylify must access the files before framework compilers, therefore it processes source files directly.

However try to add rewriteSelectorsInFiles: false to your Bundle configuration as follows:

 bundles: [
    {
      outputFile: './src/stylify.css',
      files: ['./src/**/*.jsx'],
      rewriteSelectorsInFiles: false,
    },
  ],

I have tested it in SolidJS example and it seems to work (I have updated the example).

Then, you can run yarn build and the selectors will be rewritten only in build files.

But not works in Svelte component parent

Dev:

<div class="padding:10px background:pink">
  <p class="color:blue font-style:italic">Cat</p>
</div>

Build:

<div class="padding:10px background:pink">
  <p class="c d">Cat</p>
</div>

[Machy8]

Hi @mzaini30.

Are you using SvelteKit or svelte+vite or any other combination? If it is a Stackblitz playground, could you share a link?

Could you please send the parent and child component template? I will try to reproduce the error and fix it.

[mzaini30]

I using it: https://github.com/mzaini30/svelte

[Machy8]

I have forked your example.

Here is your example with a working configuration: https://stackblitz.com/edit/github-z2waev?file=vite.config.js.

The problem is with Svelte compilation under the hood with the combination with Vite converts class="..." to add_attribute(div, "class", "...") that Stylify doesn't match.

The only option here now is to remove the rewriteSelectorsInFiles option from the config. This will rewrite selectors during build (production) pipeline in Vercel/Github but not in local environment (unless you run build locally).

If you need to test the production build process locally without selectors mangling or disabling it entirely, you can set the mangleSelectors:false in the Compiler config. I have added comment for you into the vite.config.js configuration at stackblitz:

const stylifyPlugin = stylifyVite({
	// ...
	bundles: [ /* */ ],
	compiler: {
		mangleSelectors: false
	}
});

Please let me know if it works.

P.S.

If you use class:something="{variable === 'foo'}", then you need to add this area to be matched like below. I have added that into the config file too:

const stylifyPlugin = stylifyVite({
	// ...
	compiler: {
		selectorsAreas: ['(?:^|\\s+)class:(\\S+)=["\']']
	}
});

I will add that to the Stylify in the next version, so you this will not be needed anymore.

[mzaini30]

I usually build it locally because I using compiled Svelte for Android app webview 😅

Okay, I'll use mangleSelectors false

[Machy8]

Hm, this is bad. Sorry for that.

I have tried to configure some parsing before you send me your repo, but Svelte compiles that into a ton of variants of output, so I haven't send any patch.

Will have to look into it. But I need to test it first.

You can possibly check if there is for example .env.local file, that you create in your local cloned repo, in the vite.config.js through fs.existsSync(), which returns true/false and pass it to the compiler.

If the .env.local will be in the gitignore and not pushed into the git repository, it will always automatically setup dev environment. I do it for my repos in PHP frameworks like Symfony/Laravel and it works fine.

Something like:

import fs from 'fs';

const isLocalEnv = fs.existsSync('./.env.local');

const stylifyPlugin = stylifyVite({
	// ...
	bundles: [ /* */ ],
	compiler: {
		mangleSelectors: !isLocalEnv
	}
});

But if you release the package after manual bundling, this will probably not be what you need.

[mzaini30]

Nice idea. I'll create scripts like pnpm build:online

[Machy8]

Try it. If you find any issues, let me know.

[mzaini30]

Solved

import { defineConfig } from "vite";
import { svelte } from "@sveltejs/vite-plugin-svelte";
import legacy from "@vitejs/plugin-legacy";
import pages from "vite-plugin-pages-svelte";
import { stylifyVite } from '@stylify/unplugin';

const stylifyPlugin = (mangle) => (stylifyVite({
    bundles: [{
        outputFile: './src/stylify.css',
        files: ['./src/**/*.svelte'],
    }],
    compiler: {
      mangleSelectors: mangle
    }
}));

let plugins = [
  svelte(),
  pages(),
];

// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {
  if (mode == "android") {
    return {
      plugins: [legacy(), ...plugins, stylifyPlugin(false)],
    };
  } else if (mode == "online") {
    return {
      plugins: [...plugins, stylifyPlugin(true)],
    };
  } else {
    return {
      plugins: [...plugins, stylifyPlugin(false)],
    };
  }
});

[Machy8]

Great! I will add this to snippets. Thanks a lot for testing!

[Machy8]

The mangling is now opt-in.

For further reading.
Mangling info: https://stylifycss.com/en/docs/get-started/mangling-selectors/
Release info: https://stylifycss.com/en/docs/get-started/releases/