parcel-bundler / parcel-bundler/lightningcss

More flexibility over cssModules pattern

Open
#491 2 comments 5 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

area: css-modules
Dominant language
Rust
Stars
7.7k
Forks
302
PR merge metrics
No merged PRs in 30d

Description

Currently, the generated scoped class can be customized to an extent:

cssModules: {
  pattern: 'whatever-[name]-[hash]-[local]'
}

It would be nice if there was a way to customize it further. One of the use cases for this is when file names / local classes are too long and need to be truncated.

This could be offered using a function (might be difficult to communicate into Rust):

cssModules: {
  pattern: (name, hash, local) => `w-${name.split('-')[0]}-${hash}-${local.slice(0, 5)}'
}

Or it could be through more advanced pattern matching that includes built-in truncation (kinda similar to webpack).

cssModules: {
  pattern: 'w-[name:5]-[hash]-[local:4]'
}

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start at the cssModules pattern entry point and trace how the pattern is passed into Rust; compare the existing [name], [hash], and [local] handling with the proposed function or truncation syntax. Done means users can customize or truncate generated scoped class components through a documented, tested option.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, rust
Domain
build-system, frontend
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.