[Feature Request] Support generateScopedName config like postcss-modules

[indooorsman]

e.g. generateScopedName: "[name]__[local]___[hash]"

https://github.com/madyankin/postcss-modules#generating-scoped-names

[devongovett]

What's the usecase for this? What are you looking to customize and why?

[indooorsman]

@devongovett my usecase is using parcel-css in a legacy frontend project, which has some E2E testing cases using class name as selector of element, e.g.:

cy.get('[class^="some-class-name"]').click()...

in the latest version of parcel-css, the class name will be [hash]_some-class-name, and it does break my E2E testing cases above.
currently i have to lock parcel-css version to <=1.7.3 which add [hash] to the end of class name, while in version >= 1.7.4 the [hash] is added to the start of class name.
otherwise i have to change a really large amount of my E2E testing cases ...

[indooorsman]

btw, I think change position of [hash] is really a breaking change that should be highlighted in release note

[devongovett]

Hmm I think the point of css modules is to avoid relying on specific class names, and to keep them locally scoped. The hash position change was necessary to accommodate css grid line names, which the browser may automatically postfix in some cases. I'll have to think about this more.

[indooorsman]

Hmm I think the point of css modules is to avoid relying on specific class names, and to keep them locally scoped. The hash position change was necessary to accommodate css grid line names, which the browser may automatically postfix in some cases. I'll have to think about this more.

how about give developer a chance to choose the hash position?

[devongovett]

Well, if it's not at the start then css grid will be broken...

[indooorsman]

Well, if it's not at the start then css grid will be broken...

no css grid in my project 😂
not sure whether postcss-modules has css grid issue

[axyz]

@devongovett I have an interesting use case for custom generateScopedName

https://github.com/utilitycss/atomic is a framework based on postCSS that relies on postcss-modules hevily using composition and relying on a "stable" hashing strategy that guarantees that a hash will only change if the final css rule itself is changed (by default it will change in a number of other cases e.g. adding composes, changing something in the rest of the file, adding a comment, etc...)

I have a long term dream to migrate the project to rust, but doubt it would be feasible without a plugin system like in postcss. Said that this project may be a good starting point (not sure if among the goals there is the possibility to include a plugin system).

Just wanted to contribute my use case for a custom generateScopedName and also eventually get a hint on where the project is going and if being a substitute for postcss is a long term goal or not.

here you can see the generateScopedName function I use, to give an idea: https://github.com/utilitycss/atomic/blob/master/src/postcss/atomic-css-modules/generateScopedName.ts

Also custom hash functions can have some use cases: https://github.com/utilitycss/atomic/blob/master/src/postcss/atomic-css-modules/hashFunction.ts The most important here is to be able to choose the length (depending on the amount of classess you foresee to use you can use more or less characters while keeping the risk of collisions extremely low)

[devongovett]

I think we could provide limited support for this. I wouldn't want to support a callback function where you can do any arbitrary computation in JavaScript because that will slow things down a lot. But we could probably support a pattern syntax like this:

{
  "cssModules": {
    "pattern": "prefix-[name]-[hash]"
  }
}

For CSS grid, we'd need to enforce that the hash is added at the start - or rather, that the pattern ends with "[name]".

[devongovett]

Working on support for it here if anyone has feedback: #180

[joelmoss]

YES! :) This would solve #96 🎉

Would need to know how to reproduce the hash externally from parcel-css though. Are you planning on supporting that in #180?

[devongovett]

I think rather than trying to reproduce the same logic it would be better to just not use [hash] at all, and pass it in yourself via the API.

let myHash = computeHash(filename);

parcelCss.transform({
  // ...
  cssModules: {
    pattern: `[local]-${myHash}`
  }
})

[joelmoss]

Ah of course. I suppose I was thinking that the hash created by rust would be faster, but that may not be an issue.