No class selectors on _goober style for some websites
matang28 opened this issue · 2 comments
matang28 commented
Hello, first I'd like to say that we use goober with preact and LOVE IT.
We use goober to inject standalone widgets into multiple websites and until now everything worked fine, but we came across one website that the components have no styles at all.
After some debugging we saw that the <style></style> tag that goober adds has no class selectors.
For example the styles tag for same widget (same code, same injection method) on a working site is:
<style id="_goober">.go1017296306{all:unset;display:block;width:100%;height:auto;font-size:30px;font-weight:800;font-family:Roboto;text-align:center;text-decoration:;text-shadow:none;color:rgba(211,60,105,1);padding:0px 0px 0px 0px;margin:0 15px;}@media (min-width: 960px){.go1017296306{font-size:46px;font-weight:900;font-family:Raleway;text-align:center;text-decoration:;text-shadow:none;color:rgba(211,33,36,1);padding:20px 0px 20px 0px;margin:0 15px;}}.go266526411{all:unset;display:block;width:auto;height:auto;padding:0px 0px 0px 0px;margin:0;background:rgba(255,0,0,0);background-size:cover;background-position:center center;background-repeat:no-repeat;border:none;border-radius:0px;box-shadow:none;}@media (min-width: 960px){.go266526411{width:auto;height:auto;padding:20px 0px 20px 0px;margin:0;background:rgba(255,0,0,0);background-size:cover;background-position:center center;background-repeat:no-repeat;border-radius:0px;box-shadow:none;border:none;}}.go2711761626{all:unset;display:block;width:100%;height:220px;padding:20px 0px 20px 0px;margin:0;background:url(https://sdk.loomi-prod.xyz/widgets/placeholder.jpeg);background-size:cover;background-position:center center;background-repeat:no-repeat;border:none;border-radius:0px;box-shadow:none;}@media (min-width: 960px){.go2711761626{width:100%;height:425px;padding:-37px 0px 60px 0px;margin:0;background:url(https://sdk.loomi-prod.xyz/widgets/default_desktop_placeholder.jpeg);background-size:cover;background-position:center center;background-repeat:no-repeat;border-radius:0px;box-shadow:none;border:none;}}.go3876741191{all:unset;display:block;width:auto;height:auto;padding:20px 0px 20px 0px;margin:0;background:rgba(255,255,255,0);background-size:cover;background-position:center center;background-repeat:no-repeat;border:none;border-radius:0px;box-shadow:none;}@media (min-width: 960px){.go3876741191{width:auto;height:auto;padding:20px 0px 20px 0px;margin:0;background:rgba(255,255,255,0);background-size:cover;background-position:center center;background-repeat:no-repeat;border-radius:0px;box-shadow:none;border:none;}} .go1596356512 > div{padding-bottom:8px;padding-top:8px;}.go1833341310.go1833341310.go1833341310::placeholder{color:#B4BBC3;font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;font-size:16px;font-weight:400;letter-spacing:0px;}.go1833341310.go1833341310.go1833341310::-moz-placeholder{line-height:40px;}.go1833341310.go1833341310.go1833341310:hover{border-color:#000000 !important;}.go1832929144.go1832929144.go1832929144:focus{box-shadow:0 0 5px #0064CD;}.go1832929144.go1832929144.go1832929144:hover{background-color:rgba(61,60,60,1) !important;color:#FFFFFF !important;}.go1860872658{box-sizing:border-box;width:calc(100% - 0px - 0px);height:auto;display:flex;flex-direction:column;justify-content:center;position:relative;margin-top:20px;margin-bottom:20px;margin-left:0px;margin-right:0px;}.go1860872658 *{box-sizing:border-box;-ms-overflow-style:none;scrollbar-width:none;}.go1860872658 > *{width:100%;max-width:100%;}@media (min-width: 960px){.go1860872658{width:calc(100% - 0px - 0px);margin-top:20px;margin-bottom:20px;margin-left:0px;margin-right:0px;}}.go1860872658 *::-webkit-scrollbar{display:none;}.go1860872658::before{content:"";height:0.1px;width:100%;background:transparent;opacity:0;}.go1860872658:after{content:"";height:0.1px;width:100%;background:transparent;opacity:0;}.go109101102{all:unset;display:block;width:100%;height:350px;padding:0;margin:0;background:url(https://sdk.loomi-prod.xyz/widgets/placeholder.jpeg);background-size:cover;background-position:center center;background-repeat:no-repeat;border:none;border-radius:0px;box-shadow:none;}@media (min-width: 960px){.go109101102{width:100%;height:480px;padding:0;margin:0;background:url(https://sdk.loomi-prod.xyz/widgets/default_desktop_placeholder.jpeg);background-size:cover;background-position:center center;background-repeat:no-repeat;border-radius:0px;box-shadow:none;border:none;}}.go3408994245{width:100%;height:100%;display:grid;grid-template-columns:repeat(2, 1fr);grid-gap:10px;}.go985294169{display:flex;justify-content:center;align-items:flex-end;}.go858939923{width:100%;display:flex;flex-flow:row wrap;justify-content:center;align-items:center;}.go2876752800{all:unset;display:flex;justify-content:center;align-items:center;font-size:14px;font-weight:500;font-family:Roboto;text-align:center;text-decoration:;text-shadow:0px 4px 14px 0px rgba(34,25,77,0.18);color:rgba(17,17,17,1);height:auto;width:auto;padding:10px 20px;margin:5px 5px 30px 5px;background:#ffffff;background-size:cover;background-position:center center;background-repeat:no-repeat;border:1px solid rgba(247,248,249,1);border-radius:0px;box-shadow:0px 4px 14px 0px rgba(34,25,77,0.18);}@media (min-width: 960px){.go2876752800{padding:10px 30px;font-size:18px;font-weight:500;font-family:Roboto;text-align:center;text-decoration:;text-shadow:0px 4px 14px 0px rgba(34,25,77,0.18);color:rgba(17,17,17,1);margin:5px 10px 20px 10px;background:#ffffff;background-size:cover;background-position:center center;background-repeat:no-repeat;border-radius:0px;box-shadow:0px 4px 14px 0px rgba(34,25,77,0.18);border:1px solid rgba(247,248,249,1);}}.go2043890697.go2043890697{cursor:pointer;display:flex;align-items:center;justify-content:center;height:auto;padding:0px 0px 0px 0px;}@media (min-width: 960px){.go2043890697.go2043890697{padding:20px 0px 20px 0px;}}.go3920580346.go3920580346{padding:0;}@media (min-width: 960px){.go3920580346{padding:0;}}</style>
and for non-working site:
<style id="_goober">all:unset;display:block;width:100%;height:auto;font-size:30px;font-weight:800;font-family:Roboto;text-align:center;text-decoration:;text-shadow:none;color:rgba(180,93,119,1);padding:0px 0px 0px 0px;margin:0 15px;@media (min-width: 960px){font-size:46px;font-weight:900;font-family:Raleway;text-align:center;text-decoration:;text-shadow:none;color:rgba(211,33,36,1);padding:20px 0px 20px 0px;margin:0 15px;}all:unset;display:block;width:100%;height:auto;font-size:30px;font-weight:800;font-family:Roboto;text-align:center;text-decoration:;text-shadow:none;color:rgba(211,60,105,1);padding:0px 0px 0px 0px;margin:0 15px;@media (min-width: 960px){font-size:46px;font-weight:900;font-family:Raleway;text-align:center;text-decoration:;text-shadow:none;color:rgba(211,33,36,1);padding:20px 0px 20px 0px;margin:0 15px;}all:unset;display:block;width:auto;height:auto;padding:0px 0px 0px 0px;margin:0;background:rgba(255,0,0,0);background-size:cover;background-position:center center;background-repeat:no-repeat;border:none;border-radius:0px;box-shadow:none;@media (min-width: 960px){width:auto;height:auto;padding:20px 0px 20px 0px;margin:0;background:rgba(255,0,0,0);background-size:cover;background-position:center center;background-repeat:no-repeat;border-radius:0px;box-shadow:none;border:none;}all:unset;display:block;width:100%;height:190px;padding:0px 0px 0px 0px;margin:0;background:url(https://sdk.loomi-prod.xyz/widgets/placeholder.jpeg);background-size:cover;background-position:center center;background-repeat:no-repeat;border:none;border-radius:0px;box-shadow:none;@media (min-width: 960px){width:100%;height:250px;padding:0px 0px 0px 0px;margin:0;background:url(https://sdk.loomi-prod.xyz/widgets/mix_desktop_placeholder.jpeg);background-size:cover;background-position:center center;background-repeat:no-repeat;border-radius:0px;box-shadow:none;border:none;}all:unset;display:block;width:auto;height:auto;padding:0;margin:0;background:none;background-size:;background-position:;background-repeat:no-repeat;border:1px solid rgba(231,235,237,1);border-radius:0px;box-shadow:0px 4px 14px 0px rgba(231,235,237,1);@media (min-width: 960px){width:auto;height:auto;padding:0;margin:0;background:;background-size:;background-position:;background-repeat:no-repeat;border-radius:0px;box-shadow:0px 4px 14px 0px rgba(231,235,237,1);border:1px solid rgba(231,235,237,1);}all:unset;display:block;width:100%;height:auto;font-size:28px;font-weight:900;font-family:Roboto;text-align:center;text-decoration:;text-shadow:none;color:rgba(149,243,46,1);padding:20px 0px 20px 0px;margin:0 15px;@media (min-width: 960px){font-size:33px;font-weight:900;font-family:Roboto;text-align:center;text-decoration:;text-shadow:none;color:rgba(149,243,46,1);padding:20px 0px 20px 0px;margin:0 15px;}all:unset;display:block;width:auto;height:auto;padding:20px 0px 20px 0px;margin:0;background:rgba(255,0,0,0);background-size:cover;background-position:center center;background-repeat:no-repeat;border:none;border-radius:0px;box-shadow:none;@media (min-width: 960px){width:auto;height:auto;padding:20px 0px 20px 0px;margin:0;background:rgba(255,0,0,0);background-size:cover;background-position:center center;background-repeat:no-repeat;border-radius:0px;box-shadow:none;border:none;}all:unset;display:block;width:100%;height:auto;font-size:12px;font-weight:400;font-family:Roboto;text-align:center;text-decoration:;text-shadow:none;color:rgba(17,17,17,1);padding:0px 0px 20px 0px;margin:0 15px;@media (min-width: 960px){font-size:14px;font-weight:400;font-family:Roboto;text-align:center;text-decoration:;text-shadow:none;color:rgba(17,17,17,1);padding:0px 0px 20px 0px;margin:0 15px;}all:unset;display:block;width:100%;height:auto;font-size:12px;font-weight:400;font-family:Roboto;text-align:center;text-decoration:line-through;text-shadow:none;color:rgba(137,149,156,1);padding:0px 10px 20px 0px;margin:0 15px;@media (min-width: 960px){font-size:15px;font-weight:400;font-family:Roboto;text-align:center;text-decoration:line-through;text-shadow:none;color:rgba(137,149,156,1);padding:0px 10px 20px 0px;margin:0 15px;}all:unset;display:block;width:100%;height:auto;font-size:13px;font-weight:600;font-family:Roboto;text-align:center;text-decoration:;text-shadow:none;color:rgba(17,17,17,1);padding:10px 0px 5px 0px;margin:0 15px;@media (min-width: 960px){font-size:16px;font-weight:600;font-family:Roboto;text-align:center;text-decoration:;text-shadow:none;color:rgba(17,17,17,1);padding:15px 0px 8px 0px;margin:0 15px;}all:unset;display:block;width:auto;height:auto;padding:20px 0px 20px 0px;margin:0;background:none;background-size:;background-position:;background-repeat:no-repeat;border:none;border-radius:;box-shadow:none;@media (min-width: 960px){width:auto;height:auto;padding:20px 0px 20px 0px;margin:0;background:;background-size:;background-position:;background-repeat:no-repeat;border-radius:;box-shadow:none;border:none;}all:unset;display:block;width:100%;height:400px;padding:0;margin:0;background:url(https://sdk.loomi-prod.xyz/widgets/placeholder.jpeg);background-size:cover;background-position:center center;background-repeat:no-repeat;border:none;border-radius:;box-shadow:none;@media (min-width: 960px){width:100%;height:550px;padding:0;margin:0;background:url(https://sdk.loomi-prod.xyz/widgets/default_desktop_placeholder.jpeg);background-size:cover;background-position:center center;background-repeat:no-repeat;border-radius:;box-shadow:none;border:none;}all:unset;display:block;width:100%;height:400px;padding:0;margin:0;background:url(https://sdk.loomi-prod.xyz/widgets/placeholder.jpeg);background-size:cover;background-position:center center;background-repeat:no-repeat;border:none;border-radius:;box-shadow:none;@media (min-width: 960px){width:100%;height:550px;padding:0;margin:0;background:url(https://sdk.loomi-prod.xyz/widgets/placeholder.jpeg);background-size:cover;background-position:center center;background-repeat:no-repeat;border-radius:;box-shadow:none;border:none;} box-sizing:border-box;width:calc(100% - 0px - 0px);height:auto;display:flex;flex-direction:column;justify-content:center;position:relative;margin-top:20px;margin-bottom:20px;margin-left:0px;margin-right:0px;*{box-sizing:border-box;-ms-overflow-style:none;scrollbar-width:none;}& > *{width:100%;max-width:100%;}@media (min-width: 960px){width:calc(100% - 0px - 0px);margin-top:20px;margin-bottom:20px;margin-left:0px;margin-right:0px;}*::-webkit-scrollbar{display:none;}&::before{content:"";height:0.1px;width:100%;background:transparent;opacity:0;}&:after{content:"";height:0.1px;width:100%;background:transparent;opacity:0;}width:100%;overflow-x:auto;white-space:nowrap;position:relative;display:grid;grid-template-columns:repeat(3, 100%);grid-auto-flow:column;grid-gap:10px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;& > *{scroll-behavior:smooth;scroll-snap-align:center;}&&{padding:0;display:flex;flex-direction:column;align-items:center;justify-content:center;}@media (min-width: 960px){&&{padding:0;}}all:unset;display:block;width:100%;height:auto;font-size:16px;font-weight:500;font-family:Roboto;text-align:center;text-decoration:;text-shadow:none;color:#000000;padding:50px 10px 0px 10px;margin:0 15px;@media (min-width: 960px){font-size:18px;font-weight:500;font-family:Roboto;text-align:center;text-decoration:;text-shadow:none;color:#000000;padding:35px 15px 10px 15px;margin:0 15px;}all:unset;display:block;width:100%;height:auto;font-size:34px;font-weight:900;font-family:Roboto;text-align:center;text-decoration:;text-shadow:none;color:rgba(17,17,17,1);padding:15px 10px 40px 10px;margin:0 15px;@media (min-width: 960px){font-size:44px;font-weight:900;font-family:Roboto;text-align:center;text-decoration:;text-shadow:none;color:rgba(17,17,17,1);padding:10px 15px 20px 15px;margin:0 15px;}width:100%;display:flex;flex-flow:row wrap;justify-content:center;align-items:center;all:unset;display:block;width:100%;height:auto;font-size:32px;font-weight:900;font-family:Roboto;text-align:center;text-decoration:;text-shadow:none;color:rgba(17,17,17,1);padding:15px 10px 40px 10px;margin:0 15px;@media (min-width: 960px){font-size:44px;font-weight:900;font-family:Roboto;text-align:center;text-decoration:;text-shadow:none;color:rgba(17,17,17,1);padding:10px 15px 20px 15px;margin:0 15px;}position:absolute;bottom:15px;left:0;right:0;display:flex;justify-content:center;display:grid;justify-content:center;align-items:center;grid-auto-flow:column;grid-gap:5px;background:none;background-size:;background-position:;background-repeat:no-repeat;margin:0;padding:0;border:none;border-radius:;box-shadow:none;@media (min-width: 960px){padding:0;margin:0;background:;background-size:;background-position:;background-repeat:no-repeat;border-radius:;box-shadow:none;border:none;}all:unset;display:block;cursor:pointer;opacity:1;transition:opacity 0.2s linear;width:10px;height:10px;padding:0;margin:0;background:#A8BDD0;background-size:cover;background-position:center center;background-repeat:no-repeat;border:none;border-radius:100px;box-shadow:1px 1px 1px 1px #B5C1CC;@media (min-width: 960px){width:12px;height:12px;padding:0;margin:0;background:#A8BDD0;background-size:cover;background-position:center center;background-repeat:no-repeat;border-radius:100px;box-shadow:0px 4px 7px 0px rgba(34,25,77,0.1);border:none;}all:unset;display:block;cursor:pointer;opacity:0.5;transition:opacity 0.2s linear;width:10px;height:10px;padding:0;margin:0;background:#A8BDD0;background-size:cover;background-position:center center;background-repeat:no-repeat;border:none;border-radius:100px;box-shadow:1px 1px 1px 1px #B5C1CC;@media (min-width: 960px){width:12px;height:12px;padding:0;margin:0;background:#A8BDD0;background-size:cover;background-position:center center;background-repeat:no-repeat;border-radius:100px;box-shadow:0px 4px 7px 0px rgba(34,25,77,0.1);border:none;}position:absolute;left:20px;top:0;bottom:0;display:flex;justify-content:space-between;align-items:center;@media (max-width: 960px){display:none;}all:unset;outline:none;appearance:none;display:flex;justify-content:center;align-items:center;height:auto;width:auto;padding:10px 10px;margin:0;background:#ffffff;background-size:cover;background-position:center center;background-repeat:no-repeat;border:1px solid rgba(0,0,0,1);border-radius:100px;box-shadow:1px 1px 1px 1px #B5C1CC;font-size:16px;font-weight:400;font-family:Lato;text-align:center;text-decoration:;color:#A3AFB9;cursor:pointer;user-select:none;transition:opacity 0.1s ease-in-out, transform 0.1s ease-in-out;@media (min-width: 960px){padding:7px 15px;margin:0;background:#ffffff;background-size:cover;background-position:center center;background-repeat:no-repeat;border-radius:100px;box-shadow:0px 4px 7px 0px rgba(34,25,77,0.1);border:1px solid rgba(231,235,237,1);font-size:20px;font-weight:700;font-family:Jetbrains Mono;text-align:center;text-decoration:;color:rgba(17,17,17,1);}& > *{user-select:none;}&:hover{opacity:0.8;}&:active{transform:scale(0.8);}position:absolute;right:20px;top:0;bottom:0;display:flex;justify-content:space-between;align-items:center;@media (max-width: 960px){display:none;}all:unset;display:flex;justify-content:center;align-items:center;font-size:16px;font-weight:500;font-family:Open Sans;text-align:center;text-decoration:;text-shadow:0px 4px 14px 0px rgba(34,25,77,0.18);color:#5B656E;height:auto;width:auto;padding:10px 20px;margin:5px 5px 5px 5px;background:#FFFFFF;background-size:cover;background-position:center center;background-repeat:no-repeat;border:1px solid rgba(247,248,249,1);border-radius:0px;box-shadow:0px 4px 14px 0px rgba(34,25,77,0.18);@media (min-width: 960px){padding:15px 30px;font-size:18px;font-weight:500;font-family:Open Sans;text-align:center;text-decoration:;text-shadow:0px 4px 14px 0px rgba(34,25,77,0.17);color:rgba(17,17,17,1);margin:30px 15px 20px 15px;background:#FFFFFF;background-size:cover;background-position:center center;background-repeat:no-repeat;border-radius:0px;box-shadow:0px 4px 14px 0px rgba(34,25,77,0.17);border:1px solid rgba(247,248,249,1);}all:unset;display:flex;justify-content:center;align-items:center;font-size:16px;font-weight:500;font-family:Open Sans;text-align:center;text-decoration:;text-shadow:0px 4px 14px 0px rgba(34,25,77,0.18);color:rgba(17,17,17,1);height:auto;width:auto;padding:10px 20px;margin:5px 5px 5px 5px;background:#FFFFFF;background-size:cover;background-position:center center;background-repeat:no-repeat;border:1px solid rgba(247,248,249,1);border-radius:0px;box-shadow:0px 4px 14px 0px rgba(34,25,77,0.18);@media (min-width: 960px){padding:15px 30px;font-size:18px;font-weight:500;font-family:Open Sans;text-align:center;text-decoration:;text-shadow:0px 2px 14px 0px rgba(34,25,77,0.18);color:rgba(17,17,17,1);margin:30px 15px 20px 15px;background:#FFFFFF;background-size:cover;background-position:center center;background-repeat:no-repeat;border-radius:0px;box-shadow:0px 2px 14px 0px rgba(34,25,77,0.18);border:1px solid rgba(247,248,249,1);}all:unset;display:flex;justify-content:center;align-items:center;font-size:14px;font-weight:600;font-family:Open Sans;text-align:center;text-decoration:;text-shadow:0px 4px 14px 0px rgba(34,25,77,0.18);color:#5B656E;height:auto;width:auto;padding:10px 20px;margin:5px 5px 5px 5px;background:#FFFFFF;background-size:cover;background-position:center center;background-repeat:no-repeat;border:1px solid rgba(247,248,249,1);border-radius:0px;box-shadow:0px 4px 14px 0px rgba(34,25,77,0.18);@media (min-width: 960px){padding:15px 30px;font-size:18px;font-weight:500;font-family:Open Sans;text-align:center;text-decoration:;text-shadow:0px 4px 14px 0px rgba(34,25,77,0.18);color:rgba(17,17,17,1);margin:30px 15px 20px 15px;background:#FFFFFF;background-size:cover;background-position:center center;background-repeat:no-repeat;border-radius:0px;box-shadow:0px 4px 14px 0px rgba(34,25,77,0.18);border:1px solid rgba(247,248,249,1);}all:unset;display:block;width:100%;height:auto;font-size:24px;font-weight:500;font-family:Roboto;text-align:center;text-decoration:;text-shadow:none;color:rgba(17,17,17,1);padding:0px 0px 30px 0px;margin:0 15px;@media (min-width: 960px){font-size:36px;font-weight:500;font-family:Roboto;text-align:center;text-decoration:;text-shadow:none;color:rgba(17,17,17,1);padding:0px 0px 50px 0px;margin:0 15px;}&&{width:100%;height:auto;padding:0 !important;margin:0 !important;display:grid;grid-template-columns:repeat(2, 1fr);justify-content:center;align-items:flex-start;grid-column-gap:16px;grid-row-gap:24px;}@media (min-width: 960px){&&{padding:0 !important;margin:0 !important;grid-template-columns:repeat(2, 1fr);grid-column-gap:24px;grid-row-gap:34px;}}all:unset;width:100%;height:auto;background:linear-gradient(100deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, .5) 50%, rgba(255, 255, 255, 0) 60%) #E1E9F0;background-size:200% 100%;background-position:;background-repeat:no-repeat;border:none;border-radius:10px;box-shadow:none;background-color:#E1E9F0;background-position-x:180%;animation:3s lmi-shine ease-in-out infinite;color:black;font-size:18px;display:flex;align-items:center;justify-content:center;@media (min-width: 960px){width:100%;height:auto;background:;background-size:;background-position:;background-repeat:no-repeat;border-radius:14px;box-shadow:none;border:none;}@keyframes lmi-shine{to{background-position-x:-20%;}}all:unset;width:100%;height:calc(428px / 1);background:linear-gradient(100deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, .5) 50%, rgba(255, 255, 255, 0) 60%) #E1E9F0;background-size:200% 100%;background-position:;background-repeat:no-repeat;border:none;border-radius:10px;box-shadow:none;background-color:#E1E9F0;background-position-x:180%;animation:3s lmi-shine ease-in-out infinite;color:black;font-size:18px;display:flex;align-items:center;justify-content:center;@media (min-width: 960px){width:100%;height:calc(428px / 1);background:;background-size:;background-position:;background-repeat:no-repeat;border-radius:14px;box-shadow:none;border:none;}@keyframes lmi-shine{to{background-position-x:-20%;}}height:auto;width:100%;display:flex;justify-content:center;align-items:center;flex-direction:column;@media (min-width: 960px){width:100%;.mobile-only{opacity:0 !important;visibility:hidden !important;pointer-events:none !important;}.desktop-only{opacity:1 !important;visibility:visible !important;pointer-events:auto !important;}}a{height:auto;width:100%;all:unset;display:grid;grid-template-columns:1fr;grid-template-rows:calc(428px / 1) max-content max-content;justify-content:center;align-items:center;border:none;border-radius:10px;box-shadow:none;}@media (min-width: 960px){a{grid-template-rows:calc(428px / 1) max-content max-content;border-radius:14px;box-shadow:none;border:none;}}a picture{display:flex;justify-content:center;position:relative;width:100%;height:calc(428px / 1);border-radius:10px;}@media (min-width: 960px){a picture{height:calc(428px / 1);width:100%;border-radius:14px;}}a picture img{width:100%;height:calc(428px / 1);object-fit:cover;border-radius:10px;}@media (min-width: 960px){a picture img{height:calc(428px / 1);width:100%;border-radius:14px;}}.mobile-only{opacity:1;visibility:visible;pointer-events:auto;}.desktop-only{opacity:0;visibility:hidden;pointer-events:none;}&&{margin:0;line-height:1.5;}@media (min-width: 960px){&&{margin:0;}}display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center;& > *{width:auto;}height:auto;width:100%;display:flex;justify-content:center;align-items:center;flex-direction:column;@media (min-width: 960px){width:100%;.mobile-only{opacity:0 !important;visibility:hidden !important;pointer-events:none !important;}.desktop-only{opacity:1 !important;visibility:visible !important;pointer-events:auto !important;}}a{height:auto;width:100%;all:unset;display:grid;grid-template-columns:1fr;grid-template-rows:auto max-content max-content;justify-content:center;align-items:center;border:none;border-radius:10px;box-shadow:none;}@media (min-width: 960px){a{grid-template-rows:auto max-content max-content;border-radius:14px;box-shadow:none;border:none;}}a picture{display:flex;justify-content:center;position:relative;width:100%;height:auto;border-radius:10px;}@media (min-width: 960px){a picture{height:auto;width:100%;border-radius:14px;}}a picture img{width:100%;height:auto;object-fit:cover;border-radius:10px;}@media (min-width: 960px){a picture img{height:auto;width:100%;border-radius:14px;}}.mobile-only{opacity:1;visibility:visible;pointer-events:auto;}.desktop-only{opacity:0;visibility:hidden;pointer-events:none;}&&{cursor:pointer;display:flex;align-items:center;justify-content:center;overflow:hidden;height:auto;padding:0 !important;}@media (min-width: 960px){&&{padding:0 !important;}}&&{overflow:hidden;white-space:nowrap;}&& span{position:absolute;top:0;left:var(--marqueeContentWidth);bottom:0;display:inline-flex;align-items:center;justify-content:center;}&& span:first-child{animation:marquee 10000s linear infinite;}@media (min-width: 960px){&& span:first-child{animation:marquee 20000s linear infinite;}}@keyframes marquee{from{left:var(--marqueeContentWidth);}to{left:calc(-1000 * var(--marqueeContentWidth));}}&{grid-gap:15px;}&.vsly-mix-horizontal{overflow:hidden;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:calc(190px * 2);}&.vsly-mix-horizontal .vsly-mix-bg{height:auto;}@media (min-width: 960px){&.vsly-mix-horizontal{grid-template-rows:calc(250px * 2);}}&.vsly-mix-vertical{display:grid;grid-template-columns:1fr;grid-template-rows:190px 1fr;}@media (min-width: 960px){&.vsly-mix-vertical{grid-template-rows:250px 1fr;}}&&{border-bottom-left-radius:0;border-bottom-right-radius:0;}padding:15px;height:auto;display:flex;flex-direction:column;justify-content:center;align-items:center;align-self:center;justify-self:center;all:unset;display:block;width:100%;height:auto;font-size:24px;font-weight:700;font-family:Open Sans;text-align:center;text-decoration:;text-shadow:none;color:rgba(0,0,0,0.85);padding:2px 0px 7px 0px;margin:0 15px;@media (min-width: 960px){font-size:30px;font-weight:700;font-family:Open Sans;text-align:center;text-decoration:;text-shadow:none;color:rgba(0,0,0,0.85);padding:-7px 0px 40px 0px;margin:0 15px;}all:unset;display:block;width:100%;height:auto;font-size:15px;font-weight:400;font-family:Open Sans;text-align:center;text-decoration:;text-shadow:none;color:rgba(0,0,0,0.85);padding:0px 0px 28px 0px;margin:0 15px;@media (min-width: 960px){font-size:20px;font-weight:500;font-family:Open Sans;text-align:center;text-decoration:;text-shadow:none;color:rgba(0,0,0,0.85);padding:0px 0px 42px 0px;margin:0 15px;}all:unset;display:flex;justify-content:center;align-items:center;font-size:15px;font-weight:500;font-family:Open Sans;text-align:center;text-decoration:;text-shadow:0px 4px 14px 0px rgba(49,206,105,0.07);color:rgba(255,255,255,1);height:auto;width:auto;padding:10px 20px;margin:0px 0px 16px 0px;background:#262626;background-size:cover;background-position:center center;background-repeat:no-repeat;border:none;border-radius:0px;box-shadow:0px 4px 14px 0px rgba(49,206,105,0.07);@media (min-width: 960px){padding:10px 30px;font-size:18px;font-weight:500;font-family:Open Sans;text-align:center;text-decoration:;text-shadow:0px 4px 14px 0px rgba(49,206,105,0.07);color:rgba(255,255,255,1);margin:0px 0px 24px 0px;background:#262626;background-size:cover;background-position:center center;background-repeat:no-repeat;border-radius:0px;box-shadow:0px 4px 14px 0px rgba(49,206,105,0.07);border:none;}&&{cursor:pointer;display:flex;align-items:center;justify-content:center;height:auto;padding:0px 0px 0px 0px;}@media (min-width: 960px){&&{padding:20px 0px 20px 0px;}}&&{padding:0;}@media (min-width: 960px){padding:0;}</style>
Any kind of help will be appreciated....
cristianbote commented
Hey @matang28,
Thanks for opening this issue! This is kinda strange to not have the first className in there. The only way for that to happen that I can think of, would be to use glob instead of css. So for example:
css`
all: unset;
`
// will generate
<style id="_goober">
.go2354687 {
all: unset;
}
</style>where glob will act differently:
glob`
all: unset;
`
// will generate
<style id="_goober">
all: unset;
</style>Is there any chance of sharing more? Or isolating the reproducing issue into a codesandbox?
matang28 commented
Hi, thanks @cristianbote but at the end we've managed to resolve the issue by removing several instances of goober running on the same website.