Weird error relating to CSS commons while using gatsby js - html

Question

As the title suggests I got an insanely weird error code which barely describes the error itself (shown below)
error message I got
I can't really pinpoint to the culprit, but I suspect it has something to do with the webpack or imports in my CSS code. I tried reverting back to before I had this error but it still appeared.
Searching for answers I found none as no one seems to have this specific problem.
http://localhost:8000/commons.css
#import url(https://fonts.googleapis.com/css2?family=Karantina:wght#700&display=swap);
#import url(https://fonts.googleapis.com/css2?family=Heebo:wght#400;800&display=swap);
#import url(https://fonts.googleapis.com/css2?family=M+PLUS+1p:wght#600&display=swap);
#import url(https://fonts.googleapis.com/css2?family=Karantina:wght#700&display=swap);
#import url(https://fonts.googleapis.com/css2?family=Heebo:wght#400;800&display=swap);
#import url(https://fonts.googleapis.com/css2?family=Miriam+Libre:wght#700&display=swap);
html{
margin: 0;
padding: 0;
background-color: whitesmoke;
}
body{
margin: 0;
padding: 0;
}
input{
font-size: 1rem;
}
.hide{
display: none;
}
.layout-module--heading--8VjLO{
display: flex;
justify-content: space-between;
align-items: center;
padding: 2rem 5%;
margin-bottom: 5rem;
background-color: #2F4F4F;
border-bottom: 5px solid #C4F0C4;
border-radius: 0px 0px 15px 15px;
}
.layout-module--menubtn--xDRG0{
border: 0;
padding: 0;
}
.layout-module--menu--P1Nbr{
display: none;
}
.layout-module--menudropdown--81ZJJ{
display: none;
position: absolute;
font-family: 'Karantina', cursive;
font-weight: 700;
text-decoration: none;
color: #D4F0AA;
font-size: 32px;
min-width: 160px;
z-index: 1;
}
.layout-module--menuimg--MXGBY{
display: block!important;
background-color: #2F4F4F;
height: 50px;
width: 50px;
padding: 0;
border: 0;
}
.layout-module--mainlogo--JD3jr{
width: 12.5rem;
height: 12.5rem;
}
#media only screen and (max-width: 992px) {
.layout-module--mainlogo--JD3jr{
display: none!important;
}
.layout-module--menu--P1Nbr{
display: block;
}
.layout-module--heading--8VjLO ul{
display: none;
}
.layout-module--menu--P1Nbr:hover > .layout-module--menudropdown--81ZJJ{
background-color: blue;
}
}
.layout-module--heading--8VjLO ul{
list-style: none;
}
.layout-module--heading--8VjLO ul li{
display: inline-block;
padding: 0 .8rem;
}
.layout-module--navlink--odahv{
font-family: 'Karantina', cursive;
font-weight: 700;
text-decoration: none;
color: #D4F0AA;
font-size: 32px;
}
.layout-module--navlink--odahv::after{
content: "";
background-color: #C4F0C4;
height: 3px;
width: 0%;
display: block;
transition: 0.3s ease-in;
}
.layout-module--navlink--odahv:hover::after, .layout-module--navlink--odahv:active::after{
width: 100%;
}
.index-module--flexcont--E5tVn{
position: relative;
display: flex;
flex-wrap: wrap;
gap: 2em;
margin-left: 10%;
margin-right: 10%;
flex-wrap: wrap;
}
.index-module--flexcont--E5tVn article{
margin: 1em;
flex: 1 1 20rem;
box-shadow: 5px 5px 30px 2px rgba(0,0,0,0.66);
border-bottom: 5px solid #C4F0C4;
border-radius: 0px 0px 25px 25px;
transition-property: all;
transition-duration: 0.3s ;
transition-timing-function: ease;
}
.index-module--under--t50Wv{
width: 100%;
font-size: 1em;
color: black;
text-align: center;
font-family: 'M PLUS 1p', sans-serif;
font-weight: 600;
letter-spacing: 1.5px;
text-overflow: ellipsis;
overflow: hidden;
line-clamp: 2;
-webkit-line-clamp: 2;
display: -webkit-box;
-webkit-box-orient: vertical;
}
.index-module--flexcont--E5tVn article h2{
text-align: center;
margin-top: 12.5px;
margin-bottom: 5px;
font-family: 'Heebo', sans-serif;
font-weight: 800;
padding-left: 10px;
padding-right: 10px;
letter-spacing: 1.5px;
}
.index-module--flexcont--E5tVn article a{
text-decoration: none;
color: black;
}
.index-module--showthumb--jLQ1t{
width: 100%;
height: auto;
}
.index-module--flexcont--E5tVn article:hover, .index-module--flexcont--E5tVn article:active{
cursor: pointer;
-webkit-transform: scale(1.15);
transform: scale(1.15);
/*transform: translate(0, -20px);*/
}
#media only screen and (max-width: 992px){
.index-module--flexcont--E5tVn{
gap: 1em;
margin-left: 5%;
margin-right: 5%;
}
.index-module--flexcont--E5tVn article{
flex: 1 1 10rem;
margin: 0.5rem;
}
.index-module--under--t50Wv{
display: none;
}
/*.under p{
margin: 0.5rem, 0;
}*/
.index-module--flexcont--E5tVn article h2{
min-width: 6ch;
line-break: auto;
}
}
.footer-module--wrapper--iAZv8{
background-color: #2F4F4F;
margin-top: 5rem;
padding: 2rem 5%;
border-top: 5px solid #C4F0C4;
border-radius: 15px 15px 0 0;
display: flex;
justify-content: space-between;
}
.footer-module--wrapper--iAZv8 div{
display: flex;
justify-content: end;
}
.footer-module--wrapper--iAZv8 div p{
font-family: 'Karantina', sans-serif;
font-weight: 700;
font-size: 40px;
color: #D4F0AA;
text-align: right;
}
.footer-module--tglogo--fTM1x{
margin: 1rem;
width: 12.5rem;
height: 12.5rem;
}
.slug-module--title--g3-bA{
font-family: 'Heebo', sans-serif;
font-weight: 800;
font-size: 54px;
text-align: center;
}
.slug-module--label--ZZRK6{
font-family: 'Heebo', sans-serif;
font-weight: 400;
font-size: 36px;
text-align: center;
}
.slug-module--main--4LR6u{
display: flex;
height: 25rem;
justify-content: space-between;
margin: 0 3rem;
}
.slug-module--ads--JOrBO{
display: block;
}
.slug-module--main--4LR6u div{
min-width: 30%;
min-height: 15rem;
}
.slug-module--desc--jV-dL{
font-family: 'Miriam Libre', sans-serif;
font-weight: 700;
text-align: center;
font-size: 2rem;
margin: 5rem;
}
.slug-module--desc--jV-dL li{
list-style: none;
}
#media only screen and (max-width: 992px){
.slug-module--ads--JOrBO{
display: none;
}
.slug-module--main--4LR6u{
justify-content: center;
}
.slug-module--main--4LR6u div{
min-width: 100%;
}
}
I would really appreciate any help with the matter as it is mind-boggling.
Thanks!

Answer 1

I figured it out on my own, I think (Seems to work for now at least). I moved all my imports to HTML after checking they're indeed correct. Deleted all the cookies from the site and restarted the development server. Seems to do the trick for now. Hope this helps anyone cause I struggled with it for a bit there!