Option to disable mangling?

[Sollace]

Describe the problem

I'd like to start writing my own themes for cinny, particularly to use on my own hosted version of it, but that's not really possible when the markup looks like this:

Describe the solution you'd like

An option, maybe in the build process, to just turn off the css names randomisation. It doesn't have to unminify it, only not obfuscate it.

Alternatives considered

I have tried turning it off by modifying vite.config.js and adding:

    minify: false,
    terserOptions: {
      compress: false,
      mangle: false,
    },

These however do not seem to have any effect.

Additional context

No response

[mserajnik]

The mangling appears to be done via vanilla-extract and it should be configurable via the identifiers setting.

I've tried using a custom function as suggested to get rid of the hashes, e.g.:

// [...]
vanillaExtractPlugin({
  identifiers: ({ hash, filePath, debugId }) => {
    const fileName = path.basename(filePath, path.extname(filePath));
    return `${fileName}_${debugId}`;
  },
}),

However, this didn't change anything for me, the class names stayed in the same style. Neither did setting it to the built-in 'debug', which should at least result in more human-readable class names (that still include the hash); but that didn't have any effect either.

I think the @vanilla-extract/vite-plugin version used in Cinny (3.7.1) might simply be too old and not support configuring this (or requires a different way of configuring it). The latest version that the docs are referring to currently (at the time of writing this comment) is 5.1.4.

I was too lazy to try to dig up docs for 3.7.1 as I don't really need this myself, but got curious and decided to look into it a bit. I figured I might leave this information here in case it helps.

[Sollace]

The mangling appears to be done via vanilla-extract and it should be configurable via the identifiers setting.

I've tried using a custom function as suggested to get rid of the hashes, e.g.:

// [...]
vanillaExtractPlugin({
identifiers: ({ hash, filePath, debugId }) => {
const fileName = path.basename(filePath, path.extname(filePath));
return ${fileName}_${debugId};
},
}),

However, this didn't change anything for me, the class names stayed in the same style. Neither did setting it to the built-in 'debug', which should at least result in more human-readable class names (that still include the hash); but that didn't have any effect either.

I think the @vanilla-extract/vite-plugin version used in Cinny (3.7.1) might simply be too old and not support configuring this (or requires a different way of configuring it). The latest version that the docs are referring to currently (at the time of writing this comment) is 5.1.4.

I was too lazy to try to dig up docs for 3.7.1 as I don't really need this myself, but got curious and decided to look into it a bit. I figured I might leave this information here in case it helps.

Had some time to look at it again today. After updating a bunch of dependencies I've still had no luck getting human readable class names out of this project.

Looking at the code though I can't see any way this could ever produce non-garbage output. You would have to rewrite all of the css as css. Not this weird oroboros of typescript compiled to javascript that outputs css.

Stuff like this:

export const Emoticon = recipe({
  base: [
    DefaultReset,
    {
      display: 'inline-flex',
      justifyContent: 'center',
      alignItems: 'center',

      height: '1em',
      minWidth: '1em',
      fontSize: '1.33em',
      lineHeight: '1em',
      verticalAlign: 'middle',
      position: 'relative',
      top: '-0.35em',
      borderRadius: config.radii.R300,
    },
  ],
  variants: {
    focus: {
      true: {
        boxShadow: `0 0 0 ${config.borderWidth.B300} ${color.SurfaceVariant.OnContainer}`,
      },
    },
  },
});

Would have to become this:

.emoticon {
   display: inline-flex;
   justify-content: center;
   align-items: center;
   height: 1em;
   min-width: 1em;
   line-height: 1em;
   vertical-align: middle;
   position: relative;
   top: -0.35em;
   border-radius: var(--radii-r3000);

   &::focus {
      box-shadow: 0 0 0 var(--border-width-b300) var(--surface-variant-on-container);
   }
}

It's very doable, but I don't envy the life of whoever's job it would become to disentangle this.

Edit: This is vanilla css by the way. Every major browser supports nesting and variables. You can just use this.

[Sollace]

And honestly I don't see the purpose of using projects like vanilla-extract at all.

I do see what it's doing. It's extracting common styles into classes. It's making the css smaller but it's... making the html bigger. You're hamstringing your ability to change how the application looks and you're not really gaining anything for it.