Invalid CSS in new front end stylesheets – styles not applied

  • Resolved tnightingale

    (@tnightingale)


    6 months, 2 weeks ago

    The new design options have broken CSS in the front-end stylesheets so the styles don’t get applied. Looking at the inspector, I see the /css/frontend/variation_1.css file has non-valid CSS that is causing the issues. There are many nested styles as if it were Sass not CSS.

    For example, right at the beginning we have this: 

    .pmpro {
    	color: var(--pmpro--color--contrast);

    	/**
    	* Sections
    	*/
    	.pmpro_section {
    		margin: calc( var(--pmpro--base--spacing--large) * 2 ) 0;
    	}

    Which the browser sees as missing the } on the third line and everything else after that is ignored.

    For now I’ve made my own corrected copy (there are multiple instances of this nesting that breaks the display) and all looks normal. Hoping you will fix this in the next update. In the meantime I will have to turn off auto updates.

    I didn’t include a link to the site in question because my temporary fix has resolved it.

    Thanks in advance.

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Support Jarryd Long

    (@jarryd-long)

    Hi there, thank you for reaching out to the Paid Memberships Pro team.

    Please confirm which version of Paid Memberships Pro was running on your site at the time of testing?

    Native Nesting (as used in your caption above) is supported natively by browsers – more information about this can be found at https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_nesting/Using_CSS_nesting

    Kind Regards,
    Jarryd
    Support Manager at Paid Memberships Pro

    Thread Starter tnightingale

    (@tnightingale)

    Using latest version of PMPro…

    I looked at the article on CSS Nesting. Also another article about browser support. IMO it’s too new to be used on many sites: “Since?December 2023, this feature works across the latest devices and major browser versions”. Many of the members of the sites I manage that use PMPro have older browsers and operating systems (myself included, for now) and it’s just not good practice to use the latest cutting edge methods with no fallbacks. This is the first time I’ve come across this issue. I would strongly suggest you include a non-nested stylesheet option that can be chosen in the Design settings. That way people who know their audience is 100% going to have newer browsers and operating systems can choose the nested version, and the rest of us can have something that works for everyone.

    As a workaround for now I’ll use the “minimalist” option and copy all the styling over to my theme.

    Plugin Support Jarryd Long

    (@jarryd-long)

    We appreciate your feedback on this, I’ll be sharing this with our development team for further review and consideration as well.

    If you have any other questions feel free to reach out and we’d be happy to assist.

    Kind Regards,
    Jarryd
    Support Manager at Paid Memberships Pro

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Invalid CSS in new front end stylesheets – styles not applied’ is closed to new replies.

Tags