bun icon indicating copy to clipboard operation
bun copied to clipboard

React css module class name generation doesn't work

Open Lanskask opened this issue 2 years ago • 7 comments

Version

0.1.4

Platform

Darwin Macs-MacBook-Pro-3.local 21.4.0 Darwin Kernel Version 21.4.0: Fri Mar 18 00:45:05 PDT 2022; root:xnu-8020.101.4~15/RELEASE_X86_64 x86_64

What steps will reproduce the bug?

Part I: Create a project with bun 1.

 bun create react BUN_APP
cd BUN_APP
  1. mkdir {button,button2} add to button folder files MyButton.jsx:
import React from "react";
import classes from "./MyButton.module.css";

const MyButton = ({children, ...props}) => {
  return (
    <button {...props} className={classes.myBtn}>
      {children}
    </button>
  );
}

export default MyButton;

and file MyButton.module.css

.myBtn {
    padding: 5px 15px;
    color: teal;
    font-size: 14px;
    background: transparent;
    border: 1px solid teal;
    cursor: pointer;
}
  1. create in folder button2 the same button but with different colour (rebeccapurple for example) MyButton2.jsx (content is the same, just another name):
import React from "react";
import classes from './MyButton2.module.css';

const MyButton2 = ({children, ...props}) => {
  return (
    <button className={classes.myBtn}>
      {children}
    </button>
  );
}

export default MyButton2;

MyButton2.module.css (same content, just another color - to see a difference, same classname - .myBtn):

.myBtn {
    padding: 5px 15px;
    color: rebeccapurple;
    font-size: 14px;
    background: transparent;
    border: 1px solid rebeccapurple;
    cursor: pointer;
}
  1. bun dev

Part II: 1.

npx create-react-app NPX_APP
cd NPX_APP
  1. Create the same files in the src folder as in Part I
  2. npm start

How often does it reproduce? Is there a required condition?

Each time in a new bun react project

What is the expected behaviour?

The colours of the buttons should be different because of adding-a-css-modules-stylesheet

And names should differ from each other.
For example MyButton_myBtn__yobKk and MyButton2_myBtn__Da8mm

What do you see instead?

Colours are the same because the buttons' classes are the same:

myBtn and myBtn

Additional information

No response

Lanskask avatar Jul 19 '22 16:07 Lanskask