Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Inconsistency of whether to capitalize a character after numbers among different versions #236

Open
msmx-mnakagawa opened this issue Jan 29, 2025 · 0 comments

Comments

@msmx-mnakagawa
Copy link

From the following style, this package generates different classnames based on its version.

.table--5columns-10rows {
  background: red;
}

Some versions generate table5Columns10Rows, and others do table5columns10rows.

Depending on its version, whether to capitalize c in 5columns and r in 10rows, which are characters after numbers, differs.

Minimal reproducible example

https://github.com/msmx-mnakagawa/typed-scss-modules-char-after-number-minimal-reproduction

Steps to Reproduce (for bugs)

  1. Clone the example repository.
  2. Install dependencies.
    $ yarn
    
  3. Confirm the version of typed-scss-modules is 6.3.0.
  4. Execute the transform npm script, which generates a type definition file as target.scss.d.ts from target.scss.
    $ yarn transform
    
  5. Confirm the command generated a capitalized classname as table5Columns10Rows in the target.scss.d.ts.
  6. Install the typed-scss-modules@8.1.1, which would be the latest version for now, instead of the current version.
    $ yarn add -D [email protected]
    
  7. Execute the transform again.
    $ yarn transform
    
  8. Confirm the command generated a non-capitalized classname as table5columns10rows.

Expected Behavior

  • Clarify which behavior is correct.
  • Align behaviors among versions.

Context

IMO, it would be better to align to capitalize.

This is because the latest version of postcss-modules, on which Vite depends, generates a capitalized classname at a runtime.

We can confirm that to do the following steps after the last step of Steps to Reproduce section.

  1. Confirm the version of postcss-modules installed with [email protected] is 6.0.1, which would be the latest version for now.
  2. Execute the postcss-modules npm script, which consoles a pair of key/value of the classname.
    $ yarn postcss-modules
    
  3. Confirm the command shows a capitalized key like the following in your console.
    { table5Columns10Rows: '_table--5columns-10rows_fs1ss_1' }
    

Your Environment

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant