Shortening CSS classes with css-modules

[adrianani]

❔ Question

I think the context says it.

🔦 Context

I want to rebuild my css file with shorter classes to reduce overall file size when delivering through the website. So far I've been able to achive this with babel-plugin-css-modules-transform but it kinda bothers me while developing because I lose the hotreload. More info on the subject here

💻 Code Sample

here

🌍 Your Environment

npm@6.9.0
Node@10.16.1
parcel-bundler@1.12.3
Windows 10 - 10.0.17763 Build 17763

[Banou26]

This is something that the Parcel docs talk about in the CSS features, https://parceljs.org/css.html

You could either use cssnano or PostCSS to minify/transform your CSS.

If this is a feature request, since the Parcel team launched the v2 pre-release, they are now focusing on it, so you probably won't get a favorable response concerning something for the v1.

To concentrate on Parcel 2, Parcel 1.x.x will only receive bugfixes (and likely only critical ones).

Though, this could probably be done with the plugins in the v1, I can't really give you directions as my experience with plugins on the v1 has been limited to one small plugin.

If you want however to maybe, try and test with the v2 plugin api, if i'm not mistaken, you should look at optimisers.

[adrianani]

Okey, I've managed to use postcss to achive what I want but there is still a thing that bothers me, how can I set a custom function for generateScopedName like shown here (Quote from here)

To generate custom classes, use the generateScopedName callback:

postcss([
  require('postcss-modules')({
    generateScopedName: function(name, filename, css) {
      var path  = require('path');
      var i     = css.indexOf('.' + name);
      var line  = css.substr(0, i).split(/[\r\n]/).length;
      var file  = path.basename(filename, '.css');

      return '_' + file + '_' + line + '_' + name;
    }
  })
]);

[garthenweb]

@portocala You should be able to use any of the files types to define the postcss config as listed here: https://github.com/parcel-bundler/parcel/blob/master/packages/core/parcel-bundler/src/transforms/postcss.js#L26

For your case the .postcssrc.js file looks to me like the best option, but I never tried it on my own, I always used .postcssrc.

One hint: Best do not implement the line number into your custom class name resolution as this might cause duplicate lines of CSS when using composes, especially when using none CSS files (e.g. sass).

[adrianani]

Back after a long time, sry, been busy...
I've done some more reading and seems like I simply can't change the generateScopedName function.

This is my .postcssrc file

{
    "modules": true,
    "plugins": {
        "autoprefixer": true,
        "postcss-modules": {
            "generateScopedName": "[sha1:hash:base64:5]"
        },
    }
}

It seems to be a similar issue to #972

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 14 days if no further activity occurs.