search

m2-boilerplate / Module-Critical-CSS

Magento 2 module to automatically generate critical css with the addyosmani/critical npm package
MIT License
34 stars 16 forks source link

Running under docroot of /pub, css files generated are empty #11

Closed enyceedanny closed 3 years ago

enyceedanny commented 3 years ago

When running under document root of /pub instead of root, it seems that when generating the critical CSS files, it creates just empty files.

thampe commented 3 years ago

Hi,

could you provide the output of the command: 

bin/magento m2bp:critical-css:generate -vvv

Please also update to the latest version (1.0.2).

Thanks!

enyceedanny commented 3 years ago

Updated to latest version. With use_css_critical_path enabled, it generates just empty files. But when use_css_critical_path is disabled, it creates files with output. So I tried generating it with it disabled, then once generated, enabled it - but it doesn't take effect. It's really odd.

Don't think it makes sense providing the entire output as they're all similar. Example output of one. It's normal except the ? bytes, and checking the files it's empty. [default:default|3columns] Finished: 01f7fa6d1a3ddca7145d9af34cc4b583.css (? bytes)

thampe commented 3 years ago

Hi,

if you run the command with the -vvv you should see the actual critical command that is executed, for example: 

[category|24] - 'critical' 'http://m24.dev.localhost/**********' '--dimensions' '375x812' '--dimensions' '576x1152' '--dimensions' '768x1024' '--dimensions' '1024x768' '--dimensions' '1280x720'

Could you run the command (with use_css_critical_path enabled) in your terminal to see if there is actual output from the critical binary?

Thanks!

enyceedanny commented 3 years ago

Here it is. This time it did generate a few that wasn't empty, but most of them are still empty.

[default:category|is_anchor:1,page_layout:,custom_design:] - https://www.example.com/food-beverage
[default:product|configurable] - https://www.example.com/solgar-b-complex-100-vegetable-capsules-250
[default:product|simple] - https://www.example.com/solgar-gentle-iron-vegetable-180-capsules
[default:catalogsearch|catalogsearch_advanced_index] - https://www.example.com/catalogsearch/advanced/
[default:catalogsearch|search_term_popular] - https://www.example.com/search/term/popular/
[default:catalogsearch|catalogsearch_result_index] - https://www.example.com/catalogsearch/result/?q=Milk
[default:contact|contact_index_index] - https://www.example.com/contact/
[default:customer|customer_account_login] - https://www.example.com/customer/account/login/
[default:customer|customer_account_create] - https://www.example.com/customer/account/create/
[default:customer|customer_account_forgotpassword] - https://www.example.com/customer/account/forgotpassword/
[default:cms_page|cms_index_index] - https://www.example.com/
[default:cms_page|1] - https://www.example.com/no-route
[default:cms_page|3] - https://www.example.com/enable-cookies
[default:cms_page|5] - https://www.example.com/no-route-404
[default:cms_page|6] - https://www.example.com/home-onecolumn
[default:cms_page|11] - https://www.example.com/about-us
[default:cms_page|12] - https://www.example.com/shipping-information
[default:cms_page|13] - https://www.example.com/privacy
[default:cms_page|14] - https://www.example.com/terms
[default:default|empty] - https://www.example.com/m2bp/criticalCss/default/page_layout/empty/
[default:default|1column] - https://www.example.com/m2bp/criticalCss/default/page_layout/1column/
[default:default|2columns-left] - https://www.example.com/m2bp/criticalCss/default/page_layout/2columns-left/
[default:default|2columns-right] - https://www.example.com/m2bp/criticalCss/default/page_layout/2columns-right/
[default:default|3columns] - https://www.example.com/m2bp/criticalCss/default/page_layout/3columns/
Generating Critical CSS for 24 URLs...
[category|is_anchor:1,page_layout:,custom_design:] > 'critical' 'https://www.example.com/food-beverage' '--dimensions' '375x812' '--dimensions' '576x1152' '--dimensions' '768x1024' '--dimensions' '1024x768' '--dimensions' '1280x720'
[product|configurable] > 'critical' 'https://www.example.com/solgar-b-complex-100-vegetable-capsules-250' '--dimensions' '375x812' '--dimensions' '576x1152' '--dimensions' '768x1024' '--dimensions' '1024x768' '--dimensions' '1280x720'
[product|simple] > 'critical' 'https://www.example.com/solgar-gentle-iron-vegetable-180-capsules' '--dimensions' '375x812' '--dimensions' '576x1152' '--dimensions' '768x1024' '--dimensions' '1024x768' '--dimensions' '1280x720'
[catalogsearch|catalogsearch_advanced_index] > 'critical' 'https://www.example.com/catalogsearch/advanced/' '--dimensions' '375x812' '--dimensions' '576x1152' '--dimensions' '768x1024' '--dimensions' '1024x768' '--dimensions' '1280x720'
[default:catalogsearch|catalogsearch_advanced_index] Finished: b1f03290425b70394a07784fab144a14.css (? bytes)
[catalogsearch|catalogsearch_advanced_index] - 'critical' 'https://www.example.com/catalogsearch/advanced/' '--dimensions' '375x812' '--dimensions' '576x1152' '--dimensions' '768x1024' '--dimensions' '1024x768' '--dimensions' '1280x720'
[default:product|configurable] Finished: 310f54413cb377a92f4e8207fa354e4a.css (? bytes)
[product|configurable] - 'critical' 'https://www.example.com/solgar-b-complex-100-vegetable-capsules-250' '--dimensions' '375x812' '--dimensions' '576x1152' '--dimensions' '768x1024' '--dimensions' '1024x768' '--dimensions' '1280x720'
[default:product|simple] Finished: 6e431d923554ab51f77e3e9714204ba0.css (? bytes)
[product|simple] - 'critical' 'https://www.example.com/solgar-gentle-iron-vegetable-180-capsules' '--dimensions' '375x812' '--dimensions' '576x1152' '--dimensions' '768x1024' '--dimensions' '1024x768' '--dimensions' '1280x720'
[default:catalogsearch|search_term_popular] Finished: e8be48620c7b656970324c079329dd0f.css (? bytes)
[catalogsearch|search_term_popular] - 'critical' 'https://www.example.com/search/term/popular/' '--dimensions' '375x812' '--dimensions' '576x1152' '--dimensions' '768x1024' '--dimensions' '1024x768' '--dimensions' '1280x720'
[default:contact|contact_index_index] Finished: b53c83747e7b92ea51d93b30ef5dc6a9.css (? bytes)
[contact|contact_index_index] - 'critical' 'https://www.example.com/contact/' '--dimensions' '375x812' '--dimensions' '576x1152' '--dimensions' '768x1024' '--dimensions' '1024x768' '--dimensions' '1280x720'
[default:category|is_anchor:1,page_layout:,custom_design:] Finished: 58a9d4e135f898decb1f170f871450a8.css (43571 bytes)
[category|is_anchor:1,page_layout:,custom_design:] - 'critical' 'https://www.example.com/food-beverage' '--dimensions' '375x812' '--dimensions' '576x1152' '--dimensions' '768x1024' '--dimensions' '1024x768' '--dimensions' '1280x720'
[default:catalogsearch|catalogsearch_result_index] Finished: cf947e42ce4588af6c668deed8d026ce.css (? bytes)
[catalogsearch|catalogsearch_result_index] - 'critical' 'https://www.example.com/catalogsearch/result/?q=Milk' '--dimensions' '375x812' '--dimensions' '576x1152' '--dimensions' '768x1024' '--dimensions' '1024x768' '--dimensions' '1280x720'
[default:customer|customer_account_login] Finished: 88ab4c121ab6145f0ac0616794954905.css (? bytes)
[customer|customer_account_login] - 'critical' 'https://www.example.com/customer/account/login/' '--dimensions' '375x812' '--dimensions' '576x1152' '--dimensions' '768x1024' '--dimensions' '1024x768' '--dimensions' '1280x720'
[default:customer|customer_account_create] Finished: 0acf7e71de6cbe699c50f2c2da12d7d9.css (? bytes)
[customer|customer_account_create] - 'critical' 'https://www.example.com/customer/account/create/' '--dimensions' '375x812' '--dimensions' '576x1152' '--dimensions' '768x1024' '--dimensions' '1024x768' '--dimensions' '1280x720'
[default:customer|customer_account_forgotpassword] Finished: 7dabd31af0363d0fcf4035ef5266cfb4.css (? bytes)
[customer|customer_account_forgotpassword] - 'critical' 'https://www.example.com/customer/account/forgotpassword/' '--dimensions' '375x812' '--dimensions' '576x1152' '--dimensions' '768x1024' '--dimensions' '1024x768' '--dimensions' '1280x720'
[default:cms_page|1] Finished: 8cb3d1ee934980b4bac422bbea5ec69f.css (? bytes)
[cms_page|1] - 'critical' 'https://www.example.com/no-route' '--dimensions' '375x812' '--dimensions' '576x1152' '--dimensions' '768x1024' '--dimensions' '1024x768' '--dimensions' '1280x720'
[default:cms_page|3] Finished: a667b4b04efd4e2a925a89209e2e7558.css (? bytes)
[cms_page|3] - 'critical' 'https://www.example.com/enable-cookies' '--dimensions' '375x812' '--dimensions' '576x1152' '--dimensions' '768x1024' '--dimensions' '1024x768' '--dimensions' '1280x720'
[default:cms_page|5] Finished: 8587c673cc7176ddb84abddd5cc12daa.css (? bytes)
[cms_page|5] - 'critical' 'https://www.example.com/no-route-404' '--dimensions' '375x812' '--dimensions' '576x1152' '--dimensions' '768x1024' '--dimensions' '1024x768' '--dimensions' '1280x720'
[default:cms_page|cms_index_index] Finished: ef50fc8e6b5df1eb63425dc9f2e880e4.css (37607 bytes)
[cms_page|cms_index_index] - 'critical' 'https://www.example.com/' '--dimensions' '375x812' '--dimensions' '576x1152' '--dimensions' '768x1024' '--dimensions' '1024x768' '--dimensions' '1280x720'
[default:cms_page|6] Finished: 95962fe5f353a148217c007e427c9389.css (? bytes)
[cms_page|6] - 'critical' 'https://www.example.com/home-onecolumn' '--dimensions' '375x812' '--dimensions' '576x1152' '--dimensions' '768x1024' '--dimensions' '1024x768' '--dimensions' '1280x720'
[default:cms_page|11] Finished: ba58aafdf91da4b61f69264453d95462.css (32272 bytes)
[cms_page|11] - 'critical' 'https://www.example.com/about-us' '--dimensions' '375x812' '--dimensions' '576x1152' '--dimensions' '768x1024' '--dimensions' '1024x768' '--dimensions' '1280x720'
[default:cms_page|14] Finished: 96e7f31c467e78f73a7ac10997a156c6.css (? bytes)
[cms_page|14] - 'critical' 'https://www.example.com/terms' '--dimensions' '375x812' '--dimensions' '576x1152' '--dimensions' '768x1024' '--dimensions' '1024x768' '--dimensions' '1280x720'
[default:cms_page|12] Finished: d631d729428c9b5e135143a22c400b37.css (31682 bytes)
[cms_page|12] - 'critical' 'https://www.example.com/shipping-information' '--dimensions' '375x812' '--dimensions' '576x1152' '--dimensions' '768x1024' '--dimensions' '1024x768' '--dimensions' '1280x720'
[default:cms_page|13] Finished: ef389c5d915eec6c1766f739d5403486.css (31321 bytes)
[cms_page|13] - 'critical' 'https://www.example.com/privacy' '--dimensions' '375x812' '--dimensions' '576x1152' '--dimensions' '768x1024' '--dimensions' '1024x768' '--dimensions' '1280x720'
[default:default|empty] Finished: 42a48efa6e6606cc62897165aeb00b30.css (? bytes)
[default|empty] - 'critical' 'https://www.example.com/m2bp/criticalCss/default/page_layout/empty/' '--dimensions' '375x812' '--dimensions' '576x1152' '--dimensions' '768x1024' '--dimensions' '1024x768' '--dimensions' '1280x720'
[default:default|2columns-left] Finished: 7802e71be5814602b80806e8064b661b.css (? bytes)
[default:default|1column] Finished: 057c06c2cafd640160a27ef43df48868.css (? bytes)
[default:default|2columns-right] Finished: c3beaffb8cbcc3502a7c7ec07de832b8.css (? bytes)
[default:default|3columns] Finished: 01f7fa6d1a3ddca7145d9af34cc4b583.css (? bytes)
thampe commented 3 years ago

Could you run one of the critical commands in your terminal, to see if there is any error?

'critical' 'https://www.example.com/privacy' '--dimensions' '375x812' '--dimensions' '576x1152' '--dimensions' '768x1024' '--dimensions' '1024x768' '--dimensions' '1280x720'
enyceedanny commented 3 years ago

When I run one of them while use_css_critical_path is disabled, it outputs, but when I enable it - it's just blank. See below:

bin/magento config:set dev/css/use_css_critical_path 0
Value was saved.
[orgbf@srvr public_html]$ 'critical' 'https://www.example.com/contact/' '--dimensions' '375x812' '--dimensions' '576x1152' '--dimensions' '768x1024' '--dimensions' '1024x768' '--dimensions' '1280x720'
@-ms-viewport{width:device-width}@font-face{font-family:icomoon;src:url(../static/version1617505656/frontend/Ignite/obf/en_US/fonts/icomoon/icomoon.woff2) format('woff2'),url(../static/version1617505656/frontend/Ignite/obf/en_US/fonts/icomoon/icomoon.woff) format('woff');font-weight:400;font-style:normal;font-display:auto}@font-face{font-family:mbicon;src:url(../static/version1617505656/frontend/Ignite/obf/en_US/fonts/mbicon/mbicon.woff2) format('woff2'),url(../static/version1617505656/frontend/Ignite/obf/en_US/fonts/mbicon/mbicon.woff) format('woff');font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:Roboto;font-style:italic;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v20/KFOkCnqEu92Fr1Mu52xP.ttf) format('truetype')}@font-face{font-family:Roboto;font-style:normal;font-weight:100;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v20/KFOkCnqEu92Fr1MmgWxP.ttf) format('truetype')}@font-face{font-family:Roboto;font-style:normal;font-weight:300;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmSU5vAw.ttf) format('truetype')}@font-face{font-family:Roboto;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Me5Q.ttf) format('truetype')}@font-face{font-family:Roboto;font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmEU9vAw.ttf) format('truetype')}@font-face{font-family:Roboto;font-style:normal;font-weight:700;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlvAw.ttf) format('truetype')}.footer-main a{color:#666}.footer-main .footer-links{list-style:none;padding:0}.footer-main .footer-links li{padding:5px 0}@media (max-width:767px){.page-title{font-size:2rem}.btn-nav-mobile-top{vertical-align:middle}.menu-logo{width:100%;margin-bottom:10px}.menu-logo .logo{vertical-align:middle}.logo-top.has-btn{text-align:center}.icon-top-mobile{display:table-cell;vertical-align:middle;text-align:right;white-space:nowrap;max-width:80px}.icon-top-mobile .minicart-action{margin:0 5px}.icon-top-mobile .user-topbar{display:inline-block;vertical-align:top}.header-content-action{float:none;position:relative;display:flex}.header-content-action>div{float:none;margin:0;text-align:center;position:static}.header-content-action .block-minicart{text-align:left}.top-link-wrap{margin:0 -15px}.user-topbar{position:relative}.user-topbar .header.links{position:absolute;top:100%;right:0;min-width:160px;padding:20px;z-index:102;background-color:#fff;text-align:right;border:1px solid #ccc;display:none}.user-topbar .header.links li{padding:5px 0}.toggle-mobile .content-toggle{display:none;padding-bottom:20px}}.page-footer a{color:#000}.page-footer .footer-links a{font-size:14px}footer,header,main,nav{display:block}button,input,textarea{margin:0;font-family:inherit;font-size:inherit;line-height:inherit}textarea{overflow:auto;resize:vertical}.col,.col-12,.col-3,.col-9,.col-auto,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-9,.col-sm-12,.col-sm-3,.col-xl-3,.col-xl-6{position:relative;width:100%;min-height:1px;padding-right:15px;padding-left:15px}textarea{border-radius:3px}input:not([type=radio]):not([type=checkbox]),textarea{-webkit-appearance:none}input:-webkit-autofill,textarea:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px #fff inset}.footer-top{border-top:1px solid rgba(204,204,204,.5)}#contact-form textarea{width:100%;padding:10px;border:1px solid #ccc;background-color:#fff;margin-bottom:10px}#contact-form .actions-toolbar{text-align:center}#contact-form .actions-toolbar .primary{display:inline-block}input,textarea{font-family:Roboto,'Segoe UI','Helvetica Neue'}.page-footer{background-color:#fff;color:#000;background-image:none}.page-footer{margin-top:auto}.footer-top{border:none}p{margin-top:0;margin-bottom:1rem}*,:after,:before{box-sizing:border-box}html{font-family:sans-serif;line-height:1.15;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;-ms-overflow-style:scrollbar}header,main,nav{display:block}body{margin:0;font-size:1rem;font-weight:400;line-height:1.375;color:#212529;background-color:#fff}h1,h2{margin-top:0;margin-bottom:.5rem}ul{margin-top:0;margin-bottom:1rem}ul ul{margin-bottom:0}strong{font-weight:bolder}a{color:#007bff;text-decoration:none;background-color:transparent;-webkit-text-decoration-skip:objects}a:not([href]):not([tabindex]){color:inherit;text-decoration:none}img{vertical-align:middle;border-style:none}label{display:inline-block;margin-bottom:.5rem}button{border-radius:0}button,input{margin:0;font-family:inherit;font-size:inherit;line-height:inherit}button,input{overflow:visible}button{text-transform:none}[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{padding:0;border-style:none}fieldset{min-width:0;padding:0;margin:0;border:0}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button}.container{width:100%;padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}@media (min-width:576px){.col-sm-3{-webkit-box-flex:0;-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.col-sm-12{-webkit-box-flex:0;-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.container{max-width:540px}}@media (min-width:768px){.container{max-width:720px}}@media (min-width:992px){.container{max-width:960px}}@media (min-width:1230px){.container{max-width:1200px}}.row{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-right:-15px;margin-left:-15px}.no-gutters{margin-right:0;margin-left:0}.no-gutters>.col,.no-gutters>[class*=col-]{padding-right:0;padding-left:0}.col,.col-12,.col-3,.col-9,.col-auto,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-9,.col-sm-3,.col-xl-3,.col-xl-6{position:relative;width:100%;min-height:1px;padding-right:15px;padding-left:15px}.col{-ms-flex-preferred-size:0;flex-basis:0;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;max-width:100%}.col-auto{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;width:auto;max-width:none}.col-3{-webkit-box-flex:0;-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.col-9{-webkit-box-flex:0;-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}.col-12{-webkit-box-flex:0;-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}@media (min-width:576px){.col-sm-3{-webkit-box-flex:0;-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.my-sm-5{margin-top:3rem!important}.my-sm-5{margin-bottom:3rem!important}}@media (min-width:768px){.col-md-3{-webkit-box-flex:0;-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.col-md-4{-webkit-box-flex:0;-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.col-md-5{-webkit-box-flex:0;-ms-flex:0 0 41.666667%;flex:0 0 41.666667%;max-width:41.666667%}.col-md-6{-webkit-box-flex:0;-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.col-md-9{-webkit-box-flex:0;-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}}@media (min-width:992px){.col-lg-3{-webkit-box-flex:0;-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.col-lg-4{-webkit-box-flex:0;-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.col-lg-5{-webkit-box-flex:0;-ms-flex:0 0 41.666667%;flex:0 0 41.666667%;max-width:41.666667%}.col-lg-6{-webkit-box-flex:0;-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.col-lg-7{-webkit-box-flex:0;-ms-flex:0 0 58.333333%;flex:0 0 58.333333%;max-width:58.333333%}}@media (min-width:1230px){.col-xl-3{-webkit-box-flex:0;-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.col-xl-6{-webkit-box-flex:0;-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}}.d-none{display:none!important}.d-table-cell{display:table-cell!important}@media (min-width:768px){.d-md-none{display:none!important}.d-md-block{display:block!important}}@media (min-width:992px){.d-lg-block{display:block!important}}.justify-content-end{-webkit-box-pack:end!important;-ms-flex-pack:end!important;justify-content:flex-end!important}.justify-content-center{-webkit-box-pack:center!important;-ms-flex-pack:center!important;justify-content:center!important}.align-items-center{-webkit-box-align:center!important;-ms-flex-align:center!important;align-items:center!important}@media (min-width:768px){.my-md-0{margin-top:0!important}.my-md-0{margin-bottom:0!important}}.text-left{text-align:left!important}.text-hide{font:0/0 a;color:transparent;text-shadow:none;background-color:transparent;border:0}.img-fluid{max-width:100%;height:auto}.action.showcart .counter-label,.action.skip:not(:focus){border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.page-title{text-transform:capitalize;font-size:2.4rem;font-weight:400;margin:10px 0}.fieldset{border:none;padding:0;margin-bottom:15px}.fieldset>.field{margin-bottom:15px}.fieldset>.field .label{font-weight:500}input.input-text{height:42px;width:100%;padding:0 10px;border-radius:3px;font-size:16px}.field{position:relative}.field .control{position:relative}.mbi{font-family:mbicon!important;speak:none;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.mbi-heart:before{content:"\e68c"}.mbi-user:before{content:"\e71e"}.mbi-bag2:before{content:"\e74c"}.mbi-telephone:before{content:"\e76a"}.mbi-cross:before{content:"\e92a"}.mbi-menu:before{content:"\e92b"}.mbi-arrow-left:before{content:"\e943"}.mbi-ios-arrow-down:before{content:"\f3d0"}a.action.primary{display:inline-block;text-decoration:none;vertical-align:top}.action.primary{overflow:hidden;white-space:nowrap;margin:0;outline:0;padding:5px 15px;min-width:120px;background-color:#8fbb00;border:1px solid #8fbb00;color:#000;font-weight:500;border-radius:3px;display:inline-block;vertical-align:top;line-height:26px;text-align:center;-moz-backface-visibility:hidden;-webkit-backface-visibility:hidden;backface-visibility:hidden}html{font-size:62.5%}body{font-size:16px}:focus{outline:0!important}a{text-decoration:none}strong{font-weight:500}input{border:1px solid #ccc;padding:0 4px;max-width:100%}input:not([type=radio]):not([type=checkbox]){-webkit-appearance:none}input:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px #fff inset}ul{padding-left:25px;margin:0}button{-webkit-appearance:button}button{border:1px solid #8fbb00;background-color:#fff;border-radius:5px;padding:5px 15px}.clearfix:after,.clearfix:before{display:table;clear:both;content:""}.page.messages{position:fixed;top:72px;right:-340px;z-index:10000;width:340px}.page.messages .close-message{position:absolute;top:0;right:0;z-index:3;width:40px;height:40px;font-size:16px;display:block;line-height:40px;text-align:center}.header-top-row{padding:10px 0;font-size:1.3rem}.welcome{overflow:hidden;white-space:nowrap;-ms-text-overflow:ellipsis;text-overflow:ellipsis}.header.links{margin:0;padding:0;list-style:none;display:inline-block;vertical-align:top}.header.links>li{display:inline-block;vertical-align:top}.header.links>li{display:block}.top-link-wrap{margin:0 -25px}.top-link-wrap>div{padding:0 25px;position:relative}.top-link-wrap>div:before{position:absolute;left:0;top:50%;margin-top:-7px;width:1px;height:14px;background-color:#ccc;content:''}.top-link-wrap>div:first-child:before{display:none}.header-maininner-row{min-height:92px;position:relative;padding:10px 0}.header-main-inner{position:relative}.header-menu-content{border-top:1px solid rgba(204,204,204,.5);border-bottom:1px solid rgba(204,204,204,.5)}.menu-logo{display:table}.menu-logo .btn-nav{display:table-cell;margin-right:15px}.logo{margin:0}.logo a{display:inline-block}.logo img{max-width:100%;height:auto}.header-content-action{float:right;display:block;position:relative}.header-content-action>div{width:auto;float:left;margin-right:30px;position:static}.header-content-action>div:last-child{margin-right:0}.header-content-action a{color:#000}.header-content-action .authorization-link a{color:#000}.user-topbar{font-size:1.4rem}.user-topbar .header.links>li{line-height:16px}.user-topbar i{font-size:3rem;display:inline-block;vertical-align:top;line-height:42px}.user-topbar .header.links{padding:4px 0}.wishlist-icon{display:inline-block;vertical-align:top;position:relative}.wishlist-icon i{font-size:3rem;display:inline-block;vertical-align:top;line-height:42px}.wishlist-icon .qty{position:absolute;right:-5px;bottom:0;background-color:#8fbb00;color:#000;width:20px;height:20px;border-radius:50%;font-size:1.2rem;text-align:center;line-height:20px;font-weight:500}.wishlist-icon .qty.empty{display:none}.col-logo{position:static}.header-main-inner .vertical-menu{position:absolute;top:100%;left:15px;z-index:100;height:50px;width:25%}.header-main-inner .vertical-menu:before{left:0;top:0;content:'';width:100%;height:2px;background-color:#8fbb00;display:block;opacity:0;visibility:hidden;position:absolute}.vertical-menu{height:50px}.vertical-menu .title{font-weight:500;font-size:1.6rem;padding:10px 0;line-height:30px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.vertical-menu .title i{display:inline-block;vertical-align:middle;padding-left:5px}.vertical-menu .title>.mbi-menu{font-size:30px;margin-right:5px;float:left}.vertical-menu .navigation{min-width:300px;width:100%;padding:15px 0;border:1px solid #d3d3d3;position:absolute;top:100%;left:0;display:none;z-index:1000;background-color:#fff;margin-top:-1px}.vertical-menu .navigation .level0.level-top{padding:0;position:static}.vertical-menu .navigation .level0.level-top>.submenu{min-height:100%;padding-top:15px}.vertical-menu .navigation .level0.level-top>.submenu:before{top:0}.vertical-menu .magebig-nav>li{float:left;width:100%;display:block;color:#000}.vertical-menu .magebig-nav>li>i{position:absolute;top:auto;padding:9px 15px;right:0}.vertical-menu .magebig-nav>li>i:before{content:'\f3d3'}.vertical-menu .magebig-nav>li a{font-weight:400;color:#000}.vertical-menu .magebig-nav li.level0{height:auto;line-height:20px;padding:0}.vertical-menu .magebig-nav>li.level0>a.level-top{text-transform:none;width:100%;padding:9px 15px}.vertical-menu .magebig-nav li div.show-sub{left:100%;top:0}.img-outside{position:absolute;max-width:100%;max-height:100%;bottom:0;right:-95px;z-index:-1;padding-bottom:30px}.static-bottom-menu{margin-top:60px;margin-bottom:15px}.static-bottom-menu .link-text{font-size:32px;font-weight:300;margin-bottom:20px;line-height:1.2}.static-bottom-menu .link-text .small-text{font-size:20px;display:block}.hotline-top{float:right}.hotline-top i{float:left;margin-right:10px;margin-top:3px}.magebig-container{-moz-backface-visibility:hidden;-webkit-backface-visibility:hidden;backface-visibility:hidden}.magebig-container{position:relative}.page-wrapper{position:relative;left:0;z-index:10;height:100%;-webkit-backface-visibility:hidden;overflow:hidden}.magebig-mobile-menu .nav-bar-wrap{overflow:auto;height:100%;position:relative;padding-right:40px}.magebig-mobile-menu .nav-bar-wrap:before{position:fixed;content:'';top:0;left:0;right:40px;height:100%;background-color:#fff;z-index:99;max-width:460px}.magebig-mobile-menu .nav-bar .nav-logo{padding:15px;text-align:center;margin-bottom:15px}.magebig-mobile-menu ul.nav-collapse li{text-align:left}.magebig-mobile-menu ul.nav-collapse li a{color:#000;font-size:14px;text-transform:capitalize;padding:10px 42px 10px 15px;line-height:17px;height:auto;border-bottom:1px solid rgba(0,0,0,.2)}.magebig-mobile-menu ul.nav-collapse>li>a{border-bottom:1px solid rgba(0,0,0,.2)}.magebig-mobile-menu ul{list-style:none}.magebig-mobile-menu{position:fixed;width:270px;height:100%;top:0;left:-270px;z-index:9999}.magebig-mobile-menu .close-nav{position:fixed;top:0;left:100%;border:none;color:#fff;z-index:100;background-color:transparent;font-size:25px;line-height:1;text-align:left;padding:10px;margin-left:-40px}.magebig-mobile-menu nav{width:100%;position:relative;z-index:101;max-width:460px;padding-bottom:60px}.overlay-contentpush{visibility:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden}.mb-toggle-switch{display:inline-block;position:relative;overflow:hidden;margin:6px 0;padding:0;width:30px;height:30px;font-size:0;text-indent:-9999px;-webkit-appearance:none;-moz-appearance:none;-webkit-box-shadow:none;box-shadow:none;-webkit-border-radius:0;border-radius:0;border:none;-webkit-backface-visibility:hidden}.mb-toggle-switch span{display:block;position:absolute;top:50%;left:50%;height:2px;background:#000;margin-top:-1px;width:30px;margin-left:-15px}.mb-toggle-switch span:before{position:absolute;display:block;left:0;width:100%;height:2px;background-color:#000;content:"";top:8px}.mb-toggle-switch span:after{position:absolute;display:block;left:0;width:100%;height:2px;background-color:#000;content:"";bottom:8px}.mb-toggle-switch__htx{background-color:transparent}.mb-toggle-switch__htx span:before{-webkit-backface-visibility:hidden}.mb-toggle-switch__htx span:after{-webkit-backface-visibility:hidden}ul.nav-collapse{line-height:.5em;list-style:none;padding:0;margin:0}ul.nav-collapse ul.level0>li>a{padding-left:20px}ul.nav-collapse ul.level1>li>a{padding-left:30px}ul.nav-collapse ul.level2>li>a{padding-left:45px}ul.nav-collapse li{background:0 0;position:relative;line-height:20px}ul.nav-collapse li a{display:block;margin:0;height:42px;padding:10px 42px 10px 0;line-height:18px;text-decoration:none;text-shadow:none;-webkit-backface-visibility:hidden}ul.nav-collapse>li>a{border-bottom:1px solid rgba(0,0,0,.2)}ul.nav-collapse ul{display:none;margin:0;padding:0;list-style:none}ul.nav-collapse ul li{clear:both;margin:0;padding:0}ul.nav-collapse ul li a{font-size:100%;outline:0;padding-left:15px}ul.nav-collapse ul ul li a{padding-left:30px}ul.nav-collapse ul ul ul li a{padding-left:40px}.main-slider-full{margin-bottom:30px}.page-bottom{background-color:#f4f5f5}.contact-index-index .page-title-wrapper{display:none}.contact-index-index .main-slider-full{margin-bottom:0}#contact-form .contact-title{margin-bottom:30px}#contact-form .control{margin-bottom:30px}#contact-form input{height:50px;border:1px solid #ccc;background-color:#fff;padding:5px 10px}@media (min-width:768px){.icon-top-mobile{display:none}.header-content-action .authorization-link a{color:#000}.header-content-action .authorization-link+li a{color:rgba(0,0,0,.6)}}@media (max-width:1199px){.smartmenu.magebig-nav li.level0{padding:0 10px}.smartmenu.magebig-nav li.level0 a{font-size:1.4rem}.smartmenu.magebig-nav li.level0>.mbi{padding-left:5px}.hotline-top{font-size:14px}.vertical-menu .title{font-size:14px}.vertical-menu .navigation{max-width:270px}.vertical-menu .navigation .level0.level-top>.submenu{max-width:500px}.page-wrapper{overflow:hidden}}@media (max-width:991px){.header-content-action>div{margin-right:15px}.top-link-wrap>div{padding:0 15px}.vertical-menu .navigation .level0.level-top>.submenu{max-width:460px}}@media (max-width:767px){.page-title{font-size:2rem}.btn-nav-mobile-top{vertical-align:middle}.menu-logo{width:100%;margin-bottom:10px}.menu-logo .logo{vertical-align:middle}.logo-top.has-btn{text-align:center}.icon-top-mobile{display:table-cell;vertical-align:middle;text-align:right;white-space:nowrap;max-width:80px}.icon-top-mobile .minicart-action{margin:0 5px}.icon-top-mobile .user-topbar{display:inline-block;vertical-align:top}.header-content-action{float:none;position:relative;display:flex}.header-content-action>div{float:none;margin:0;text-align:center;position:static}.header-content-action .block-minicart{text-align:left}.top-link-wrap{margin:0 -15px}.user-topbar{position:relative}.user-topbar .header.links{position:absolute;top:100%;right:0;min-width:160px;padding:20px;z-index:102;background-color:#fff;text-align:right;border:1px solid #ccc;display:none}.user-topbar .header.links li{padding:5px 0}}@media (max-width:575px){.top-link-wrap{-ms-flex-pack:center!important;justify-content:center!important}.top-link-wrap>div{padding:0 10px}}body{font-family:Roboto,'Segoe UI','Helvetica Neue';background-color:#fff;color:#000;background-image:none}.smartmenu,h1,h2{font-family:Roboto,'Segoe UI','Helvetica Neue'}input{font-family:Roboto,'Segoe UI','Helvetica Neue'}.std{font-family:Roboto,'Segoe UI','Helvetica Neue'}a{color:#000}.page-header{background-color:#fff;color:#000;background-image:none}.page-header .showcart,.page-header .wishlist-icon{color:#000}.page-header a{color:#000}.header-top-inner{color:#000;background-color:transparent;border-bottom:none}.header-top-inner a{color:#000}.header-menu-content{background:0 0}.horizontal-menu .magebig-nav li.level0>a{color:#95b728}.horizontal-menu .magebig-nav li.level0>a+.mbi{color:#95b728}.hotline-top,.vertical-menu .title{color:#95b728}.white-popup{background:#fff}.mfp-hide{display:none!important}button::-moz-focus-inner{padding:0;border:0}.mb-navigation{display:inline-block;vertical-align:top}.vertical-menu .magebig-nav{padding:0;width:100%}.horizontal-menu{position:relative}.magebig-nav{margin:0;padding:9px 0;width:auto;display:inline-block;vertical-align:top}.magebig-nav>li{float:left;padding:0;text-align:left}.magebig-nav .itemgrid ul.level0{margin:0 -15px}.magebig-nav ul.level0 li{outline:0;position:relative;display:inline-block;vertical-align:top}.magebig-nav li.level0{display:block;line-height:30px;padding:0 10px;position:relative}.magebig-nav li.level0 a{position:relative}.magebig-nav li.level0 ul li{height:auto}.magebig-nav li.level0 ul li a{border:0;display:block;font-size:100%;height:auto;margin:0;outline:0;text-transform:capitalize;width:100%;background-color:transparent}.magebig-nav li.level0 ul li a span.title_group{padding-left:0}.magebig-nav li.level0 ul li ul li a{border-bottom:1px solid #cfcfcf}.magebig-nav li.level0 ul li.groups a{font-size:100%;font-weight:400;line-height:20px;padding:10px 0}.magebig-nav li.level0 ul li.groups>a{font-weight:500}.magebig-nav li.level0 .groups-wrapper ul li a{border:0;height:auto;margin:0;outline:0;display:block;width:100%;background-color:transparent;padding:4px 0;line-height:18px}.magebig-nav li>a{float:left;margin:0;padding:0;display:block;outline:0;text-decoration:none;position:relative;color:#000}.magebig-nav img{max-width:100%;height:auto}.magebig-nav li div.show-sub{left:0;outline:0;width:100%;min-width:220px;z-index:999}.magebig-nav li .show-sub li div.show-sub{left:70%;top:0}.magebig-nav li ul span{white-space:normal}.magebig-nav li .simple-dropdown .parent>a{position:relative}.magebig-nav li .simple-dropdown .parent>a:before{content:'\f3d3';position:absolute;right:5px;top:12px;font-family:mbicon!important;speak:none;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;letter-spacing:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.magebig-nav div.level0{padding:15px}.magebig-nav div.submenu{position:absolute;top:100%;left:0;width:100%;opacity:0;visibility:hidden;-webkit-backface-visibility:hidden;transform:translateY(10px);padding-top:25px}.magebig-nav div.submenu:before{position:absolute;content:'';top:9px;bottom:0;left:0;right:0;background-color:#fff;z-index:-1;box-shadow:0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24)}.magebig-nav div.submenu ul{border:none;margin:0;padding:0;position:static;width:auto}.magebig-nav div.submenu.simple-dropdown{padding-top:10px}.magebig-nav .simple-dropdown ul li a{line-height:20px;padding:10px 0}.magebig-nav .simple-dropdown ul.level0 li{width:100%;padding:0 15px;float:left}.magebig-nav .simple-dropdown ul.level0 li a{border-bottom:1px solid #e5e5e5}.magebig-nav .simple-dropdown ul.level0 li:last-child>a{border-bottom:none}.magebig-nav ul li{background:0 0;margin:0}.magebig-nav ul li ul.level1 li{border:0;margin:0;width:100%;float:left}.magebig-nav ul li ul.level2 li{border:0;margin:0;width:100%;float:left}.smartmenu .mbi{display:inline-block;line-height:inherit;padding-left:15px;vertical-align:top}.itemgrid .item{padding:0 15px}div.show-sub{left:0;outline:0;width:100%;z-index:9}.itemgrid-3col .item{width:33.3333333333%}.itemgrid-4col .item{width:25%}.itemgrid-6col .item{width:16.6666666667%}.col12-12{display:inline-block;vertical-align:top;padding:0 15px;width:100%}.grid-full{display:inline-block;vertical-align:top;padding:0 15px;width:100%}.nav-bar{padding:0 20px}.nav-bar a.level-top>i{display:inline-block;vertical-align:middle;font-size:18px;padding-right:2px;margin-left:-15px}.nav-bar a.level-top>i+span{vertical-align:middle}#social-login-popup{overflow:hidden;position:relative;padding:0;width:auto;max-width:430px;margin:0 auto}#social-login-popup .login-container{margin:0;min-width:auto}#social-login-popup .block-container{width:100%;display:inline-block}#social-login-popup .social-login-title{padding:15px;background-color:#39c;border-radius:0}#social-login-popup .fieldset{margin:0;box-shadow:none;border-radius:0}#social-login-popup .actions-toolbar{margin-top:7px;text-align:center}.social-login-title h2{margin:0;padding:0 15px;background:12px center no-repeat;color:#fff;font-size:20px;font-weight:500}.form-fake-email{background-color:#fff;box-shadow:0 1px 2px 0 rgba(0,0,0,.15);border-radius:2px;padding:30px}.form-fake-email input{height:48px;border-radius:2px;font-size:14px;font-size:.875rem}.form-fake-email button.action.send{width:100%;height:53px}.actions-toolbar button{border-radius:0}.block-static{position:relative}.widgetplus-block{position:relative}.minisearch .field{position:static}.minisearch .field .control{position:static}.block-search{position:relative;width:100%;padding-right:100px;z-index:8;font-size:1.4rem}.block-search input{border:1px solid #ccc;border-right:none;border-radius:3px 0 0 3px;width:100%;height:42px;padding:0 15px;margin:0}.block-search .action.search{position:absolute;right:0;top:0;margin:0;width:100px;text-align:center;font-size:1.6rem}.block-search button{border:none;box-shadow:none;border-radius:0 3px 3px 0;outline:0;text-transform:none;height:42px;color:#000;background-color:#8fbb00;font-weight:500}.block-search .block-title,.block-search .label{display:none}.block-search .search-autocomplete{display:none;width:100%!important;color:#000;max-height:380px;overflow-y:visible;overflow-x:hidden}.minicart-action{display:inline-block}.action.showcart{white-space:nowrap;position:relative;display:block;border:none}.action.showcart>i{font-size:3rem;display:block;line-height:42px}.action.showcart .counter.qty{position:absolute;right:-5px;bottom:0;background-color:#8fbb00;color:#000;width:20px;height:20px;border-radius:50%;font-size:1.2rem;text-align:center;line-height:20px;font-weight:500}.action.showcart .counter.qty.empty{background-color:transparent}.action.showcart .counter.qty.empty .counter-number{display:none}#minicart-content-wrapper{overflow-x:auto;height:100%;max-height:100%;padding:60px 15px 160px}.field.required>.label{position:relative}.field.required>.label:after{content:"*";display:inline-block;color:red;margin:0 3px}.login-container{max-width:430px;width:100%;margin:100px auto}.login-container .fieldset{background-color:#fff;box-shadow:0 1px 2px 0 rgba(0,0,0,.15);border-radius:2px;padding:30px}.login-container .input-text{height:48px;border-radius:2px;font-size:1.4rem}.login-container button.action{width:100%;height:53px}.login-container .control{position:relative}.login-container .remind{position:absolute;right:5px;top:0;line-height:48px;z-index:3;color:#1b5b42;font-size:1.4rem}.field.password .control{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}.field.password .control .input-text{-ms-flex-order:0;-webkit-order:0;order:0;z-index:2}body{background-color:#fff}.search-autocomplete{position:absolute;z-index:3;overflow:hidden;margin-top:10px;background-color:#fff;border:1px solid #c2c2c2;width:100%!important;display:none}.icon{font-family:icomoon!important;speak:none;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-local_pharmacy:before{content:"\e550"}.icon-user-md:before{content:"\f0f0"}.icon-iconmonstr-american-football-2-sport:before{content:"\e98d"}.icon-iconmonstr-generation-1:before{content:"\eabb"}.icon-paw:before{content:"\f1b0"}.icon-iconmonstr-home-1:before{content:"\eae3"}.icon-spoon:before{content:"\f1b1"}.icon-leaf:before{content:"\f06c"}.icon-restaurant_menu:before{content:"\e561"}.icon-ionicons_svg_md-pricetags:before{content:"\eace"}.icon-iconmonstr-coin-2:before{content:"\eaaf"}::marker{content:""}@media all and (min-width:768px),print{h1{font-size:46px;margin-bottom:44px}}.main-slider-full{max-height:450px;overflow:hidden}@media (max-width:768px){.main-slider-full{max-height:300px!important;overflow:hidden}}.header-main-inner .vertical-menu:before{content:none;display:none}.magebig-nav li.level0 ul li a{font-size:1.35rem;padding:8px 0}.magebig-nav div.submenu{padding-top:12px}.magebig-nav div.submenu:before{background-color:#f9f9f9;-webkit-box-shadow:0 6px 12px rgba(0,0,0,.175);box-shadow:0 6px 12px rgba(0,0,0,.175)}.hotline-top,.vertical-menu .title{color:#fff}.header-menu-content{background:#95b728;border:none}.horizontal-menu .magebig-nav li.level0:not(.submenu)>a{color:#fff;text-transform:uppercase;font-size:14px;font-weight:600}.horizontal-menu .magebig-nav li.level0>a+.mbi{color:#fff}.horizontal-menu .magebig-nav{padding:0}.horizontal-menu .magebig-nav li.level0{padding:9px}.magebig-nav div.submenu{top:initial}.block-search button{color:#fff}.itemgrid-3col .item{width:32.9%;font-size:14px}.img-outside{position:absolute;max-width:100%;max-height:100%;bottom:-37px;right:-95px;z-index:-1;padding-bottom:30px}.logo img{width:225px}.vertical-menu .magebig-nav>li.level0>a.level-top{padding:7px 15px;font-size:1.35rem}.vertical-menu .title{padding:9px}.vertical-menu .navigation{margin-top:-2px;border:none;background-color:#f9f9f9;-webkit-box-shadow:0 6px 12px rgba(0,0,0,.175);box-shadow:0 6px 12px rgba(0,0,0,.175)}body:not(.cms-index-index) .main-wrap{margin:15px 0 0}.main-slider-full{background:url(../static/version1617505656/frontend/Ignite/obf/en_US/images/slider-bg.jpg) top center repeat-x #f7f7f7}@media (max-width:768px){.main-slider-full{background:0 0!important}}.page-bottom{background:0 0;padding:30px 0}.action.primary{color:#fff;font-size:1.4rem}.block-search button{background-color:#8fbb00!important}.action.primary{background-color:#8fbb00!important;border-color:#8fbb00!important}button{border-color:#8fbb00}.action.showcart .counter.qty{background-color:#8fbb00!important;color:#fff!important}.wishlist-icon .qty{color:#fff;overflow:hidden}a{color:#121212}#notification-wrapper{top:0;left:0;right:0;bottom:0;width:100%;height:100%;position:fixed;z-index:99999999999999999;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.notification-wrapper-tr{-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}#social-login-popup{box-shadow:0 0 50px 0 rgba(0,0,0,.18)}#social-login-popup .social-login-title{background-color:transparent;padding:30px 30px 0;text-align:center}.social-login-title h2{color:#8fbb01;padding:0 0 8px;font-size:2.6rem;font-weight:300;text-transform:uppercase}#social-login-popup .login-container .remind{position:relative;right:0;text-align:center}#social-login-popup .fieldset{padding-top:20px}#social-login-popup .actions-toolbar .action.create{font-size:1.4rem}.page.messages{margin-left:-180px!important;width:360px;box-shadow:0 0 50px 0 rgba(0,0,0,.11)}.page.messages .messages .close-message i{color:#333!important}.mb-navigation.vertical-menu i.icon{color:#8b9198;margin-right:7px;min-width:22px;font-size:20px;vertical-align:middle;text-align:center;display:inline-block}.magebig-mobile-menu ul.nav-collapse>li>a{border-bottom:1px dashed #e2e2e2;padding:12px 42px 12px 15px}.magebig-mobile-menu .nav-bar a.level-top>i{min-width:22px;text-align:center;color:#8b9198}.magebig-mobile-menu ul.nav-collapse ul.level0>li>a{padding-left:36px}.magebig-mobile-menu ul.nav-collapse ul.level1>li>a{padding-left:50px}.nav-bar ul.nav-mobile-accordion a.level-top>i+span{font-size:18px!important}.magebig-mobile-menu ul.nav-collapse li a{border-bottom:none!important}.magebig-mobile-menu .nav-bar a.level-top>i{display:none!important}.magebig-mobile-menu .nav-logo{display:none!important}.magebig-mobile-menu nav.nav-bar:before{content:"NAVIGATION";font-size:3rem;margin:35px 0 17px;display:block;color:#8fbb00!important;font-weight:300}.magebig-mobile-menu ul{margin-left:20px!important}.magebig-mobile-menu ul#mb-collapsible{margin-left:0!important}.magebig-mobile-menu a{padding-left:0!important;margin-left:0!important}.magebig-mobile-menu ul.nav-collapse ul.level0>li>a{padding-left:0!important}.magebig-mobile-menu ul.nav-collapse li a{pa

bin/magento config:set dev/css/use_css_critical_path 1
Value was saved.
[orgbf@srvr public_html]$ 'critical' 'https://www.example.com/contact/' '--dimensions' '375x812' '--dimensions' '576x1152' '--dimensions' '768x1024' '--dimensions' '1024x768' '--dimensions' '1280x720'
[orgbf@srvr public_html]$ bin/magento config:set dev/css/use_css_critical_path 0
Value was saved.
[orgbf@srvr public_html]$
thampe commented 3 years ago

hmm, that is strange... Are you using the luma theme? The luma theme has also a critical css file which covers most of the critical css in standard cases so it would make sense that there is no extracted css.

enyceedanny commented 3 years ago

No. Not using Luma.

thampe commented 3 years ago

Could you test the new version (1.0.3)? There is now a new condition for the case that the critical css is not fully generated.

enyceedanny commented 3 years ago

Still the same. =(

alexthompsontyo commented 3 years ago

I am having the same issue, it has regenerated empty critical CSS files- 0kb It was custom made theme. Generating Critical CSS for 106 URLs... [int:category|is_anchor:0,page_layout:1column,custom_design:4] Finished: fdb46ef85a53ec0f31c9fc1d638820de.css (? bytes) [int:category|4] Finished: 4f33d0ce64dd4c53e3829f8e15f4fb6f.css (? bytes) [int:category|is_anchor:1,page_layout:,custom_design:] Finished: 105c9e68c2b929fc84c8c48e92c5fb94.css (? bytes) [int:category|11] Finished: 40b630110ec34eb039253781b897278a.css (? bytes) [int:category|99] Finished: dbe8c106d760034adb272092906a0e5b.css (? bytes) [int:category|10] Finished: 651b877c32af33233477d374acdc6a07.css (? bytes) [int:category|96] Finished: 3fadbcb2c3bc8f7bc568a209d31b4323.css (? bytes) [int:category|28] Finished: 211487cd2a9176dce82ebd48b1d3445d.css (? bytes)

thampe commented 3 years ago

@enyceedanny @abdulaziz0808 could you test the latest version again (1.0.5). This should finally fix it.

We added the strict option, this prevents empty responses (? bytes) when no css was found. The issue itself is, that critical does not recognize when the css link rel contains media="print" (fixed by disabling critical path css while running the command)

Thanks @marvinhinz!

alexthompsontyo commented 3 years ago

@thampe @marvinhinz
Hi, thanks for the quick update and fix. I have tested it again, unfortunately, it did not work. In the current situation, it did not generate a critical path folder in var/critical, and when it started generating this error output below. Generating Critical CSS for 106 URLs... The command "'critical' 'http://example.com/catalog/category/view/id/5/' '--dimensions' '375x812' '--dimensions' '576x1152' '--dimensions' '768x1024' '--dimensions' '1024x768' '--dimensions' '1280x720' '--strict' '--no-request-https.rejectUnauthorized'" failed. Exit Code: 1(General error) Working directory: /var/www/html Output: ================ Error Output: ================ Error: Error: No stylesheets found in document and no css was specified in the options Usage: critical <input> [<option>] Options: -b, --base Your base directory -c, --css Your CSS Files (optional) -w, --width Viewport width -h, --height Viewport height -i, --inline Generate the HTML with inlined critical-path CSS -e, --extract Extract inlined styles from referenced stylesheets --inlineImages Inline images --dimensioms Pass dimensions e.g. 1300x900 --ignore RegExp, @type or selector to ignore --ignore-[OPTION] Pass options to postcss-discard. See https://goo.gl/HGo5YV --include RegExp, @type or selector to include --include-[OPTION] Pass options to inline-critical. See https://goo.gl/w6SHJM --assetPaths Directories/Urls where the inliner should start looking for assets. --user RFC2617 basic authorization user --pass RFC2617 basic authorization password --penthouse-[OPTION] Pass options to penthouse. See https://goo.gl/PQ5HLL --ua, --userAgent User agent to use when fetching remote src

enyceedanny commented 3 years ago

Well, since it's disabling the use_css_critical_path before generating it, it generates the files. But once generated, and flushing cache - it doesn't show the critical css when checking the source.

alexthompsontyo commented 3 years ago

@enyceedanny For my case, even I disable the "use_css_critical_path" it does not generate files. are you familiar with any other tools that can actually generate critical CSS most tools I have looked at generate critical CSS from the front-end website but not from the back end I have not still figured out the critical and penthouse tools, are they working the same way as this tool.

marvinhinz commented 3 years ago

Could you guys try again with the latest version?

Well, since it's disabling the use_css_critical_path before generating it, it generates the files. But once generated, and flushing cache - it doesn't show the critical css when checking the source.

This is fixed now, the config:set & cache:flush commands are invoked directly instead of using magento internals.

alexthompsontyo commented 3 years ago

@marvinhinz Hi, thanks for taking a look at that. Unfortunately, i am getting the same error as earlier. when it start generating critical css this error occurs for generated crtical css files and there is no output of files in var/criticalcss folder The command "'critical' 'http://sample.com/m2bp/criticalCss/default/page_layout/1column-fullwidth/' '--dimensions' '375x812' '--dimensions' '576x1152' '--dimensions' '768x1024' '--dimensions' '1024x768' '--dimensions' '1280x720' '--strict' '--no-request-https.rejectUnauthorized'" failed. Exit Code: 1(General error) Working directory: /var/www/html Output: ================ Error Output: ================ Error: Error: No stylesheets found in document and no css was specified in the options Usage: critical <input> [<option>] Options: -b, --base Your base directory -c, --css Your CSS Files (optional) -w, --width Viewport width -h, --height Viewport height -i, --inline Generate the HTML with inlined critical-path CSS -e, --extract Extract inlined styles from referenced stylesheets --inlineImages Inline images --dimensioms Pass dimensions e.g. 1300x900 --ignore RegExp, @type or selector to ignore --ignore-[OPTION] Pass options to postcss-discard. See https://goo.gl/HGo5YV --include RegExp, @type or selector to include --include-[OPTION] Pass options to inline-critical. See https://goo.gl/w6SHJM --assetPaths Directories/Urls where the inliner should start looking for assets. --user RFC2617 basic authorization user --pass RFC2617 basic authorization password --penthouse-[OPTION] Pass options to penthouse. See https://goo.gl/PQ5HLL --ua, --userAgent User agent to use when fetching remote src

marvinhinz commented 3 years ago

Can you check what is returned on your mentioned url while the generate command is running?

The CSS link tags have to be media="screen" or at least they should not be media="print".
Because when dev/css/use_css_critical_path is enabled, the criticial does not recognize the css on the page due to the lazy loading technique and throws the error "No stylesheets found in document"

To circumvent this behaviour we added a config:set and cache:flush before and after the generate command, to disable the lazy loading feature while the critical css is collected.

alexthompsontyo commented 3 years ago

@marvinhinz thanks for the reply. but the majority of files are in .less file even if I go to app/design/web/CSS there are only .less files no CSS this tool can not include value for.less files

marvinhinz commented 3 years ago

@marvinhinz thanks for the reply. but the majority of files are in .less file even if I go to app/design/web/CSS there are only .less files no CSS this tool can not include value for.less files

The critical tool works on the generated css output of magento not the source files (scss or less)! It runs a headless chrome browser and renders the whole page to extract the css used above the fold and puts it into /var/critical-css/.css

Afaik generating the critical css from the source itself is not possible as you dont have the corresponding html.

websuits commented 3 years ago

@marvinhinz Is this something related to the lastest changes ?

-bash-4.2$ bin/magento m2bp:critical-css:generate -vvv Disabling dev/css/use_css_critical_path while collecting css... Value was saved in app/etc/env.php and locked. In Process.php line 223:

[Symfony\Component\Process\Exception\ProcessFailedException] The command "'critical' '--version'" failed.

Exit Code: 127(Command not found)

Working directory: /var/www/domain.com

Output:

Error Output:

sh: line 0: exec: critical: not found

Exception trace: () at /var/www/domain.com/vendor/symfony/process/Process.php:223 Symfony\Component\Process\Process->mustRun() at /var/www/domain.com/vendor/m2-boilerplate/module-critical-css/src/Service/CriticalCss.php:59 M2Boilerplate\CriticalCss\Service\CriticalCss->getVersion() at /var/www/domain.com/vendor/m2-boilerplate/module-critical-css/src/Service/CriticalCss.php:65 M2Boilerplate\CriticalCss\Service\CriticalCss->test() at /var/www/domain.com/vendor/m2-boilerplate/module-critical-css/src/Console/Command/GenerateCommand.php:90 M2Boilerplate\CriticalCss\Console\Command\GenerateCommand->execute() at /var/www/domain.com/vendor/symfony/console/Command/Command.php:255 Symfony\Component\Console\Command\Command->run() at /var/www/domain.com/vendor/magento/framework/Interception/Interceptor.php:58 M2Boilerplate\CriticalCss\Console\Command\GenerateCommand\Interceptor->callParent() at /var/www/domain.com/vendor/magento/framework/Interception/Interceptor.php:138 M2Boilerplate\CriticalCss\Console\Command\GenerateCommand\Interceptor->Magento\Framework\Interception{closure}() at /var/www/domain.com/vendor/magento/framework/Interception/Interceptor.php:153 M2Boilerplate\CriticalCss\Console\Command\GenerateCommand\Interceptor->callPlugins() at /var/www/domain.como/generated/code/M2Boilerplate/CriticalCss/Console/Command/GenerateCommand/Interceptor.php:104 M2Boilerplate\CriticalCss\Console\Command\GenerateCommand\Interceptor->run() at /var/www/domain.com/vendor/symfony/console/Application.php:893 Symfony\Component\Console\Application->doRunCommand() at /var/www/domain.com/vendor/symfony/console/Application.php:262 Symfony\Component\Console\Application->doRun() at /var/www/domain.com/vendor/magento/framework/Console/Cli.php:115 Magento\Framework\Console\Cli->doRun() at /var/www/domain.com/vendor/symfony/console/Application.php:145 Symfony\Component\Console\Application->run() at /var/www/domain.com/bin/magento:23

marvinhinz commented 3 years ago

@websuits From the message it seems you dont have critical installed, or it is not in your path. You can configure the binary location in the backend.