Giters

GoogleChromeLabs / critters

🦔 A Webpack plugin to inline your critical CSS and lazy-load the rest.

Home Page:https://npm.im/critters-webpack-plugin

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Not inserting every critical css

zoltantoth-seon opened this issue · comments

commented

I started to use Critters with preact-cli and i can't really find any article about how it is decided wether a css count as critical or not. The README says "Critters inlines all CSS rules used by your document" however in my case many of the critical css are not inlined which cause a flick.

I blocked javascript and loaded my page so i can check what is actually prerendered and instantly presented in the DOM and half of the required css is missing. Any idea what cause the problem, how to debug, how to fix it or how can i force Critters to inline css for specific components? Tried several log levels but didn't help as only wrote out how much of all css has been inlined.

commented

Critters will decide if a CSS rule is critical if there is a corresponding element in the document that matches the selector.

For eg: Assume the rule

.container .title {
  margin: 0;
}

Critters will parse your document and check if the element exists by doing document.querySelector('.container .title')
If the element exists then its considered critical

My best guess as to why some of CSS isn't inlined could be that the DOM is changing dynamically?
It would be a lot easier to give you some advice if I could see some code or the website.

commented

Thank you for your quick answer and sorry for missing code fragments.
I thought of dynamic DOM changing as well thats why i turned off JS and checked the actual source of the page which is prerendered. The code fragments are simplified but the problem still occurs so it's good for presentation.

Main app:

import { Router } from 'preact-router';

const App = () => {
  return (
    <div id='app'>
      <Navbar />
      <Router>
        <Home path='/' />
      </Router>
      <Footer />
      <div id='popup-container' />
    </div>
  );
}

export default App;

Home app:

const Home = () => (
      <div class='container' >
        <HeaderBox variant='IllustrationHero' />
        <Hero />
      </div>
);

export default Home;

Hero:

const HeroTitleContent = () => {
  const [inputText, setInputText] = useState('');

  const onInputSubmit = () => {
    if (inputText) {
      openPopup({ variant: 'testApi', additionalData: inputText });
    }
  };

  return (
    <div class={`${style.HeroTitle} col-4 col-12-md`}>
      <h1>
        <strong>Fight against </strong> fraudsters
        <FistIcon color={theme.palette.warning.main} className={ style.FistIcon } />
      </h1>
      <p>Detect fake accounts</p>
      <Input
        disabled={false}
        boxClassName={`${style.HeroInput} hidden-md` }
        placeholderText='Test SEON with an email / phone number'
        onClick={ onInputSubmit }
        onEnter={ onInputSubmit }
        onChange={ (e) => { setInputText(e.target.value) } }
        value={ inputText }
      />
      <div className={` hidden-lg ${style.HeroTitleImg} ${style.IconScroll}`} />
    </div>
  );
}

const Hero = () => (
  <header class={style.Hero}>
      <div class={`${style.Wrapper} row`}>
        <HeroTitleContent />
        <div class='col-8'>
          <div class={style.HeroImageContainer}>
            <DeferImg
              src='/assets/hero/illustration-hero.svg'
              alt='hero illustartion image'
              className={`${style.Illustration} hidden-between hidden-md`}
            />
          </div>
        </div>
      </div>
      <div class={`row ${style.TrustedBrands} `}>
        <div className={`col-10`}>
          <p class={style.TrustedBrandsTitle}>
            Trusted by 5K+ global brands
          </p>
          <Carousel />
        </div>
      </div>
  </header>
);

export default Hero;

Header box:

const HeaderBox = ( { className, variant = '' } ) => (
  <div className={ style[variant] } >
    <div className={ classNames(style.HeaderBox, className) } />
  </div>
);

export default HeaderBox;

And the corresponding style:
<style>.HeaderBox__2tv2u{background-color:#60bdb2;border-radius:276px 0 0 0;height:1727px;width:104%;position:absolute;transform:rotate(-174.44deg);top:-1216px;left:21px;display:flex}@media only screen and (min-width:33.75em){.HeaderBox__2tv2u{height:1851px}}@media only screen and (max-width:48em){.IllustrationHero__3GzxE .HeaderBox__2tv2u{width:136%}.IllustrationHero__3GzxE .HeaderBox__2tv2u:after{content:"";background-image:url(/assets/hero/illustration-hero.svg);background-size:784px 467px;background-repeat:no-repeat;z-index:1;height:1547px;width:103%;transform:rotate(-187deg);background-position-x:-10px;background-position-y:995px;opacity:.4}}@media only screen and (max-width:48em) and (min-width:33.75em){.IllustrationHero__3GzxE .HeaderBox__2tv2u:after{background-position-y:880px}}@media only screen and (min-width:33.75em) and (max-width:60em){.IllustrationHero__3GzxE .HeaderBox__2tv2u{width:114%}.IllustrationHero__3GzxE .HeaderBox__2tv2u:after{background-position-x:4px;background-position-y:1028px}}.BaseBox__20D8n{width:100%;height:54px;background-color:#60bdb2;color:#fff;display:flex;flex-direction:row;border:2px solid #fff;border-radius:4px;margin:4px}.StartIcon__2KrMd{display:flex;flex-direction:column;justify-content:center;align-items:center;width:10%}.InputField__i6ymS{display:flex;flex-direction:column;justify-content:center;flex:1 0 auto;width:70%;font-family:Inter,Tahoma,sans-serif}.InputField__i6ymS>input::placeholder{color:#fff;opacity:.7}.Input__3F74P{background-color:inherit;color:#fff;border-style:none;width:100%}.EndButton__3lzPM{display:flex;margin:2px;height:46px;width:46px}.EndButton__3lzPM>button{border:1px solid #8ae2d6;border-radius:4px;display:flex;justify-content:center;align-items:center;height:100%;width:100%;cursor:pointer}.EndButton__3lzPM :hover{background-color:#0b5a5e;border-color:#0b5a5e}.InheritBackground__SvmiJ{background-color:#8ae2d6}.Carousel__1X7lY{width:100%;height:28px;display:flex;align-items:center;overflow:hidden;opacity:1;transition:opacity .5s;justify-content:center}@media only screen and (min-width:33.75em){.Carousel__1X7lY{justify-content:left}}.Carousel__1X7lY .ImageBox__glyN5{padding-right:72px;text-align:center;height:100%;position:relative}.Carousel__1X7lY .ImageBox__glyN5 .ColorfulImage__QOlea{position:relative;height:100%}.Carousel__1X7lY .ImageBox__glyN5 .ColorLessImage__2VhSG{position:absolute;height:100%;left:0}.Carousel__1X7lY .DisplayNone__13Q4S{display:none}@media only screen and (max-width:48em){.AirFrance__1fOlh{width:265px;height:28px}}@media only screen and (max-width:48em){.Carousel__1X7lY .ImageBox__glyN5{padding:0}.Carousel__1X7lY div>img{display:none}.Carousel__1X7lY div>img:first-child{display:inherit}}.button__1wKCV{border-radius:4px;padding:10px 35px;height:45px;min-width:175px;line-height:24px;font-size:1rem;font-weight:600;font-family:Poppins,Tahoma,sans-serif}.button__1wKCV.default__2SvZM.primary__-_tg2{border:none;color:#fff;background-color:#0a7a7f}.button__1wKCV.default__2SvZM.primary__-_tg2:hover{background-color:#0b5a5e}.icon__28lza{display:flex;flex-direction:column;justify-content:center;width:100%;height:100%;position:absolute;top:0;left:0}.icon__28lza hr{border-radius:4px;height:2px;background:#fff}.close__3EXp7{padding:8px}.close__3EXp7 hr:first-child{margin-bottom:-1px;transform:rotate(45deg)}.close__3EXp7 hr:last-child{margin-top:-1px;transform:rotate(-45deg)}.open__3yK--{padding:0 8px}.open__3yK-- hr:first-child{transform:translateY(-4px)}.open__3yK-- hr:last-child{transform:translateY(4px)}.hamburgerButton__3ZW4y{position:relative;border-radius:4px;height:43px;width:43px;border:2px solid #fff;background-color:initial}.container__2NyV7{width:90%;margin-left:auto;margin-right:auto}@media only screen and (min-width:33.75em){.container__2NyV7{width:85%}}@media only screen and (min-width:60em){.container__2NyV7{width:90%;max-width:80rem}}.nav__1M-wi{z-index:999;font-family:Poppins,Tahoma,sans-serif;position:absolute;top:0;left:50%;transform:translate(-50%);height:65px;display:flex;align-items:center;justify-content:space-between}.nav__1M-wi ul{list-style:none}.nav__1M-wi .logo__2kvDD{margin-right:16px}.nav__1M-wi .actions__3B3EU{display:flex;align-items:center;justify-content:flex-end}.nav__1M-wi .actions__3B3EU .mainList__PUtwc{display:none}@media (min-width:1170px){.nav__1M-wi .actions__3B3EU .mainList__PUtwc{display:flex}}.nav__1M-wi .actions__3B3EU .mainList__PUtwc .mainListElem__3ZhS6{position:relative;font-weight:600;font-size:1rem;line-height:1.5rem;color:#fff;white-space:nowrap}.nav__1M-wi .actions__3B3EU .mainList__PUtwc .mainListElem__3ZhS6 .angleDown__3KRyj{margin-left:4px}.nav__1M-wi .actions__3B3EU .mainList__PUtwc .mainListElem__3ZhS6 .angleDown__3KRyj path{stroke:#0a7a7f}.nav__1M-wi .actions__3B3EU .mainList__PUtwc .mainListElem__3ZhS6:hover{color:#0b5a5e}.nav__1M-wi .actions__3B3EU .mainList__PUtwc .mainListElem__3ZhS6:not(:first-child){margin-left:35px}.nav__1M-wi .actions__3B3EU .hamburger__13seU,.nav__1M-wi .actions__3B3EU .startNow__3-Hmq{margin-left:40px}.nav__1M-wi .actions__3B3EU .startNow__3-Hmq{display:none}@media (min-width:33.75em){.nav__1M-wi .actions__3B3EU .startNow__3-Hmq{display:block}}.dropdownBox__sHWRQ{display:none;position:absolute;width:400px;background:#0b5a5e;border-radius:10px;padding:10px;top:40px}.dropdownBox__sHWRQ:hover{display:block}.dropdownBox__sHWRQ:before{content:"";position:absolute;left:calc(50% - 10px);top:-9px;border:10px solid transparent;border-top:none;border-bottom:10px solid #0b5a5e}.dropdownBox__sHWRQ:after{content:"";position:absolute;display:block;top:-20px;height:30px;left:0;width:100%;background:transparent}.dropdownBox__sHWRQ.slim__3NdN5{width:300px}.dropdownBox__sHWRQ .startAdornment__2rYZu{margin-right:10px}.dropdownBox__sHWRQ .startAdornment__2rYZu>img{width:51px;height:40px}.dropdownBox__sHWRQ .content__xLUY0{display:flex;flex-direction:column;justify-content:center;line-height:.875rem;font-size:.875rem;white-space:pre-line;color:#fff}.dropdownBox__sHWRQ .content__xLUY0 small{font-family:Inter,Tahoma,sans-serif;display:block;margin-top:5px;color:#cecece;font-size:.625rem;line-height:.875rem}.dropdownBox__sHWRQ .endAdornment__2Vr1d{margin-left:auto}.dropdownBox__sHWRQ .divider__CGju3{height:1px;background-color:#fff;opacity:.2}.dropdownBox__sHWRQ .divider__CGju3:last-child{display:none}.dropdownBox__sHWRQ .dropdownListElemContainer__3JVRF{padding:5px 0}.dropdownBox__sHWRQ .dropdownListElem__dGKq_{padding:10px;display:flex;border-radius:10px}.dropdownBox__sHWRQ .dropdownListElem__dGKq_:hover{background-color:#085154}.dropdownBox__sHWRQ .rightAngle__OekWb{display:flex;height:100%;align-items:center}.dropdownBox__sHWRQ .rightAngle__OekWb svg{transform:rotate(-90deg)}.dropdownBox__sHWRQ .rightAngle__OekWb path{stroke:#fff}.dropdownBox__sHWRQ .pricingEndAdornment__1TYPS{display:flex;justify-content:space-between;align-items:center;height:100%;width:144px;padding-left:20px;color:#fff;border-left:1px solid rgba(96,189,178,.2)}.dropdownBox__sHWRQ .pricingEndAdornment__1TYPS .from__t20n6{align-self:flex-start;margin-top:12px}.dropdownBox__sHWRQ .pricingEndAdornment__1TYPS small{display:block;color:#cecece;font-size:.625rem;line-height:.625rem}.fullScreenNav__3ijZK{z-index:1000;font-family:Poppins,Tahoma,sans-serif;width:100vw;height:100vh;overflow-y:scroll;position:fixed;top:0;left:0;background-color:#60bdb2;background-image:url(/assets/seon_symbol.svg);background-repeat:no-repeat;background-position:right -20%;color:#fff;transition:transform .5s;transform:translateX(100%);-webkit-tap-highlight-color:transparent}.fullScreenNav__3ijZK ul{list-style:none;font-weight:500}.fullScreenNav__3ijZK li{cursor:pointer}.fullScreenNav__3ijZK .container__2NyV7{display:flex;flex-direction:column;height:100%}.fullScreenNav__3ijZK .actions__3B3EU{display:flex;align-items:center;margin-top:30px;margin-bottom:32px}.fullScreenNav__3ijZK .actions__3B3EU button{margin-left:10px}.fullScreenNav__3ijZK .logo__2kvDD{width:30px;overflow:hidden;margin-right:auto}@media (min-width:400px){.fullScreenNav__3ijZK .logo__2kvDD{width:unset}}.fullScreenNav__3ijZK .mainListElem__3ZhS6{font-size:1.25rem;line-height:1.25rem;margin-bottom:15px;position:relative}.fullScreenNav__3ijZK .mainListElem__3ZhS6>*{position:relative}.fullScreenNav__3ijZK .listTitle__3CrCN{z-index:1}.fullScreenNav__3ijZK .listTitle__3CrCN span{display:flex;align-items:baseline;justify-content:space-between}.fullScreenNav__3ijZK .listTitle__3CrCN path{stroke:#0a7a7f}.fullScreenNav__3ijZK .title__5uvEQ{margin-left:10px}.fullScreenNav__3ijZK .listIndex__eRbZK{font-family:Inter,Tahoma,sans-serif;display:block;font-size:.625rem;line-height:.625rem;font-weight:400}.fullScreenNav__3ijZK .subList___3EoX .subListElem__20DqI{line-height:1rem;font-weight:500;font-size:1rem;margin-bottom:20px}.fullScreenNav__3ijZK .menuDivider__-gVuk{width:100%;height:1px;background:#fff;margin-bottom:15px}.fullScreenNav__3ijZK .dropdownContainer__h8r6Z{display:block;position:relative;top:-40px;width:100vw;height:0;overflow:hidden;background:#0b5a5e;border-radius:10px;transition:height .5s,margin .5s}.fullScreenNav__3ijZK .dropdownContainer__h8r6Z .pageLink__1WM45{padding-top:50px;font-weight:500;font-size:.875rem;line-height:.875rem;text-decoration:underline;display:inline-block}.fullScreenNav__3ijZK .dropdownContainer__h8r6Z .dropdownBox__sHWRQ{display:block;position:static;padding-top:0;width:100vw}@media (min-width:33.75em){.fullScreenNav__3ijZK .dropdownContainer__h8r6Z .dropdownBox__sHWRQ{width:90%;margin:0 auto}}.fullScreenNav__3ijZK .dropdownContainer__h8r6Z .dropdownBox__sHWRQ:before{content:none}.fullScreenNav__3ijZK .footer__2VMqs{margin-bottom:20px;margin-top:auto;margin-left:-2%}.fullScreenNav__3ijZK .followUs__297Nz{font-weight:700;font-size:.875rem;line-height:.875rem}.fullScreenNav__3ijZK .followUs__297Nz span{color:#0a7a7f}.fullScreenNav__3ijZK .followUs__297Nz svg{margin-bottom:-2px}.fullScreenNav__3ijZK .socialMenu__3KKxL span{display:none;font-family:Inter,Tahoma,sans-serif;font-weight:500;font-size:.875rem;line-height:1.25rem}.fullScreenNav__3ijZK .socialMenu__3KKxL svg{margin-right:30px}@media (min-width:48em){.fullScreenNav__3ijZK .socialMenu__3KKxL{display:flex;justify-content:space-between;flex-wrap:wrap}.fullScreenNav__3ijZK .socialMenu__3KKxL span{margin-right:10px;display:inline-block}.fullScreenNav__3ijZK .socialMenu__3KKxL svg{display:none}}.fullScreenNav__3ijZK .contact__2hV93{font-family:Inter,Tahoma,sans-serif;font-weight:700;font-size:.75rem;line-height:1.25rem}@media (min-width:33.75em){.fullScreenNav__3ijZK .contact__2hV93{display:flex;flex-wrap:wrap}}@media (min-width:48em){.fullScreenNav__3ijZK .contact__2hV93{justify-content:flex-end}}.fullScreenNav__3ijZK .contact__2hV93 span{white-space:nowrap;display:inline-block}.fullScreenNav__3ijZK .contact__2hV93 span:not(:last-child){margin-right:20px}.fullScreenNav__3ijZK .copyright__XUJ_Y{font-weight:400;margin-top:20px;min-width:280px}@media (min-width:33.75em){.fullScreenNav__3ijZK .copyright__XUJ_Y{margin-top:0}}.fullScreenNav__3ijZK .copyright__XUJ_Y a{text-decoration:underline}p.typography__VFDFO{font-size:.875rem;line-height:1.25rem;font-family:Poppins,Tahoma,sans-serif;color:#969696}p.typography__VFDFO.dark__2TR_T{color:#4d4e58}.stars__18wnn{white-space:nowrap}.stars__18wnn svg:not(:last-child){margin-right:5px}.footer__3_VRr{font-family:Inter,Tahoma,sans-serif;margin-top:90px}.footer__3_VRr p{display:inline-block}.footer__3_VRr .infoBlock__2V-OF{display:flex;flex-wrap:wrap}@media (min-width:33.75em){.footer__3_VRr .infoBlock__2V-OF .certifiedIcon__3lAUa{display:none}}.footer__3_VRr .seonLogo__29cOC{transform:scale(.7)}.footer__3_VRr .fraudFightersContainer__1XXEY{display:flex;align-items:center;margin-left:-14px;margin-top:-9px}@media (min-width:60em){.footer__3_VRr .fraudFightersContainer__1XXEY{margin-right:20px}}.footer__3_VRr .fraudFighters__3v3Qr{font-family:Poppins,Tahoma,sans-serif;font-weight:700;display:flex;align-items:center;font-size:.75rem;height:.75rem;width:115px;white-space:nowrap}.footer__3_VRr .fraudFighters__3v3Qr:before{margin-right:5px;margin-left:-10px;display:inline-block;content:"";background:#cecece;height:20px;width:1px}.footer__3_VRr .fistIcon__2tpwc{margin-left:-10px;transform:scale(.3)}.footer__3_VRr .fistIcon__2tpwc path{fill:transparent;stroke:#4d4e58;stroke-width:4}.footer__3_VRr .certifiedIcon__3lAUa{margin-left:auto}.footer__3_VRr .contact__2grNB{font-family:Inter,Tahoma,sans-serif;font-weight:700;font-size:12px;line-height:20px;width:100%;margin-top:20px}.footer__3_VRr .contact__2grNB p:first-child{margin-right:30px}@media (min-width:48em){.footer__3_VRr .contact__2grNB{width:auto;margin-top:0}}.footer__3_VRr a{color:inherit}.footer__3_VRr a:hover{text-decoration:underline;color:#0a7a7f}@media (min-width:33.75em){.footer__3_VRr .reviews__38OSS{display:flex;flex-wrap:wrap;justify-content:flex-end}}.footer__3_VRr .reviews__38OSS .certifiedIcon__3lAUa{display:none}@media (min-width:33.75em){.footer__3_VRr .reviews__38OSS .certifiedIcon__3lAUa{display:inline-block;margin-left:100%}}@media (min-width:60em){.footer__3_VRr .reviews__38OSS .certifiedIcon__3lAUa{margin-left:0;margin-top:-8px}}.footer__3_VRr .reviewLogoContainer__2AQ-q{display:inline-block;white-space:nowrap;margin-bottom:10px}@media (min-width:33.75em){.footer__3_VRr .reviewLogoContainer__2AQ-q{display:flex;align-items:center}}.footer__3_VRr .reviewLogoContainer__2AQ-q .stars__1OYDi svg{margin-right:0}.footer__3_VRr .reviewLogoContainer__2AQ-q:first-child{margin-right:21px}@media (min-width:352px){.footer__3_VRr .reviewLogoContainer__2AQ-q:first-child{margin-right:0}.footer__3_VRr .reviewLogoContainer__2AQ-q:first-child:after{display:inline-block;content:"";background:#cecece;height:20px;width:1px;margin-left:10px;margin-right:10px}}@media (min-width:352px) and (min-width:33.75em){.footer__3_VRr .reviewLogoContainer__2AQ-q:first-child:after{display:none}}@media (min-width:352px) and (min-width:659px){.footer__3_VRr .reviewLogoContainer__2AQ-q:first-child:after{display:inline-block}}@media (min-width:33.75em){.footer__3_VRr .reviewLogoContainer__2AQ-q:nth-child(2){margin-left:30px}}@media (min-width:659px){.footer__3_VRr .reviewLogoContainer__2AQ-q:nth-child(2){margin-left:0}}@media (min-width:60em){.footer__3_VRr .reviewLogoContainer__2AQ-q:nth-child(2):after{display:inline-block;content:"";background:#cecece;height:20px;width:1px;margin-left:10px;margin-right:10px}}.footer__3_VRr .divider__3Y8RQ{height:1px;border-radius:1px;background:#cecece;margin:5px 0 10px}.footer__3_VRr .menu__3ODwM{display:none;padding-left:5%}@media (min-width:48em){.footer__3_VRr .menu__3ODwM{display:block}}@media (min-width:48em){.footer__3_VRr .bottomRow__3ShRM{display:flex;flex-direction:row-reverse}}.footer__3_VRr .bottomRow__3ShRM ul{align-items:center}.footer__3_VRr .bottomRow__3ShRM li{font-size:0;font-weight:500}.footer__3_VRr .bottomRow__3ShRM svg{margin:0 10px 0 30px}.footer__3_VRr .bottomRow__3ShRM li:first-child svg{margin-left:0}@media (min-width:48em){.footer__3_VRr .bottomRow__3ShRM .social__2hPZU{padding-left:22%}}@media (min-width:60em){.footer__3_VRr .bottomRow__3ShRM .social__2hPZU{display:flex;justify-content:flex-end;padding-left:0}.footer__3_VRr .bottomRow__3ShRM .social__2hPZU li{font-size:.875rem}.footer__3_VRr .bottomRow__3ShRM .social__2hPZU p{display:none}}.footer__3_VRr .navigationRow__3P4hL ul{flex-wrap:wrap;justify-content:space-between}.footer__3_VRr .navigationRow__3P4hL ul li{margin-right:15px}.footer__3_VRr .copyright__bggOp{margin-top:0;font-family:Inter,Tahoma,sans-serif;font-weight:700;color:#4d4e58;line-height:1.25rem}.footer__3_VRr .copyright__bggOp a{text-decoration:underline;white-space:nowrap}@media (min-width:33.75em){.footer__3_VRr .copyright__bggOp{white-space:nowrap}}.footer__3_VRr .bottomRow__3ShRM,.footer__3_VRr .navigationRow__3P4hL{font-family:Inter,Tahoma,sans-serif;font-size:.75rem;line-height:1.25rem}.footer__3_VRr .bottomRow__3ShRM p,.footer__3_VRr .navigationRow__3P4hL p{text-transform:capitalize;font-weight:700;margin-bottom:10px}.footer__3_VRr .bottomRow__3ShRM ul,.footer__3_VRr .navigationRow__3P4hL ul{list-style:none;display:flex}.footer__3_VRr .bottomRow__3ShRM ul li,.footer__3_VRr .navigationRow__3P4hL ul li{color:#969696}.container{width:90%;margin-left:auto;margin-right:auto}@media only screen and (min-width:33.75em){.container{width:85%}}@media only screen and (min-width:60em){.container{width:90%;max-width:80rem}}.row{position:relative;width:100%}.row [class*=col-]{float:left;margin:.5rem 2%;min-height:.125rem}.row:after{content:"";display:table;clear:both}.col-4,.col-5,.col-6,.col-7,.col-8,.col-10,.col-12{width:96%}@media only screen and (min-width:48em){.col-4{width:29.33333%}.col-5{width:37.66667%}.col-6{width:46%}.col-7{width:54.33333%}.col-8{width:62.66667%}.col-10{width:79.33333%}.col-12{width:96%}}@media only screen and (min-width:33.75em) and (max-width:48em){.col-5-md{width:37.66667%}.col-7-md{width:54.33333%}.col-12-md{width:96%}.hidden-md{display:none}}@media only screen and (min-width:48em){.hidden-lg{display:none}}@media only screen and (max-width:48em){.hidden-between{display:none}}*{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;box-sizing:border-box;margin:0;padding:0;border:0}html{font-size:16px}body{font-family:Poppins,Tahoma,sans-serif;background-color:#f9f9f9}a{text-decoration:none;cursor:pointer;color:inherit}button,input{outline:none}button{cursor:pointer}#app{padding-top:65px;overflow-x:hidden;position:relative}</style>

I thought that maybe critical css' are checked in a state where the active route is not yet set therefore the content of the page isn't there in the time critters runs. However it's weird that some of the css' are inlined correctly which belongs to the same page content. E.g. headerbox is totally fine and the InputComponent in Hero is good as well but the styles of the container element in Hero:HeroTitleContent are missing (the generated html fragment: <div class="HeroTitle__1x6Uf col-4 col-12-md">). The Input component is only present in the Hero nowhere else and the corresponding classes are there e.g.: InputField__i6ymS . (The classes in the style are hashed due to css modules but the prefix always match the class name in jsx.)

I can't get it how it is possible that critters extracts all of Input component's styles however the styles of the parent element are missing.

commented

I close it because i believe it's related to preact-cli.