bun
bun copied to clipboard
React css module class name generation doesn't work
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
- mkdir {button,button2}
add to
button
folder filesMyButton.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;
}
- 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;
}
-
bun dev
Part II: 1.
npx create-react-app NPX_APP
cd NPX_APP
- Create the same files in the
src
folder as in Part I -
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