What about this .css file is making my Rails/React app fail to build using Heroku? - reactjs

Question

Commenting out the import statement pointing to this css file is the difference between my app building and not building. This is the only css file that does this. I even tried removing the :root custom variables and hardcoding the values.
:root {
--font-size-a: 1.25rem;
--font-size-b: 0.9rem;
--font-size-c: 0.5rem;
--font-size-d: 0.35rem;
--scoresheet-border: 2px solid #222;
}
[data-font-size="A"] {
font-size: var(--font-size-a);
}
[data-font-size="B"] {
font-size: var(--font-size-b);
line-height: 80%;
}
[data-font-size="C"] {
font-size: var(--font-size-c);
}
[data-font-size="D"] {
font-size: var(--font-size-d);
letter-spacing: -1px;
line-height: 80%;
}
.scoresheet-container {
border: 4px solid #333;
background-color: #e4e4e4;
max-width: min-content;
padding: 0 1rem 1rem;
position: relative;
}
.scoresheet-container .scoresheet-top {
width: 100%;
display: inline-flex;
padding: 0.5rem 0.75rem;
}
.scoresheet-container .scoresheet-top .player-name {
flex-basis: 100%;
display: flex;
gap: 0.5rem;
}
.scoresheet-container .scoresheet-top .player-name h5 {
align-self: flex-end;
margin-bottom: 0.5rem;
}
.scoresheet-container .scoresheet-top .player-name-slot {
flex-basis: 80%;
border-bottom: 2px solid black;
display: flex;
place-items: center;
justify-content: center;
}
.scoresheet-container .scoresheet-top .player-name-slot p {
font-size: clamp(1rem, 2rem);
font-weight: bold;
}
.scoresheet[data-layout="horizontal"] {
border: var(--scoresheet-border);
display: flex;
align-items: flex-start;
flex-direction: row;
gap: 0.25rem;
}
.scoresheet[data-layout="vertical"] {
border: var(--scoresheet-border);
display: flex;
/* align-items: flex-start; */
flex-direction: column;
gap: 0.75rem;
}
.scoresheet-section {
width: 400px;
font-weight: bold;
display: grid;
grid-template-rows: 1fr;
display: flex;
flex-direction: column;
margin: 2px;
border: var(--scoresheet-border);
}
.scoresheet-section header {
border-bottom: var(--scoresheet-border);
}
.scoresheet-section-header .header-cell:not(:first-child) {
justify-content: center;
}
.scoresheet-section-header {
background-color: #666;
color: #fff;
}
.scoresheet-row {
display: flex;
max-height: 2rem;
justify-content: center;
}
.scoresheet-row :first-child {
padding-left: 0.25rem;
}
.scoresheet-row:not(:last-of-type) {
border-bottom: var(--scoresheet-border);
}
.scoresheet-row > * {
display: flex;
justify-content: center;
align-items: center;
}
.scoresheet-row .header-cell {
justify-content: flex-start;
}
.scoresheet-row > :not(:last-child) {
border-right: var(--scoresheet-border);
/* background-color: green; */
}
.scoring-option-label {
flex-basis: 45%;
}
.how-to-score {
flex-basis: 30%;
text-align: center;
}
.how-to-score:not(.header-cell) {
line-height: 12px;
}
.points-scored {
/* flex-grow: 1; */
flex-basis: 25%;
}
.points-scored.total {
background-color: #ccc;
}
.scoring-option .points-scored:not(.locked):hover {
cursor: pointer;
}
.points-scored.selected {
background-color: #b52717;
color: #eee;
}
svg.right-arrow {
max-height: 1.5rem;
max-width: min-content;
}
.scoring-option-label img {
margin-left: auto;
margin-right: 1rem;
border: 1px solid black;
border-radius: 8%;
}
/* .scoresheet-row p {
margin-right: 0.5rem;
} */
.header-cell.scoresheet-row > p {
margin: auto 0;
}
.scoresheet-row p ~ span {
text-align: center;
}
.scoresheet-cell {
display: flex;
gap: min(10%, 0.5rem);
}
.capitalize {
text-transform: capitalize;
}
.uppercase {
text-transform: uppercase;
}
#takeScoreMessage {
display: flex;
place-items: center;
gap: 0.75rem;
position: absolute;
top: 40%;
left: 103%;
font-size: 2rem;
font-family: "Righteous", cursive;
font-weight: bold;
color: goldenrod;
text-shadow: -1px 2px 2px #333;
/* bottom: 0; */
/* visibility: visible; */
}
This is the error when I run npm run heroku-postbuild to more quickly check if it would fail pushing it up to Heroku:
Creating an optimized production build...
Failed to compile.
TypeError: Cannot read properties of undefined (reading 'toLowerCase')
at Array.some (<anonymous>)
at runMicrotasks (<anonymous>)
There isn't a single toLowerCase() in the code I wrote, so I have NO idea where it is or how to find it. Again, simply commenting out the import statement pointed at the above css file fixes EVERYTHING. At this point, I'm commenting out each block of code and testing to pinpoint the specific line responsible, but I'm tired of solving a styling issue while building a fullstack application. I got this far... let me know if you can help!