Two Issues with Jetpack CSS Module

  • Resolved cpoteet

    (@cpoteet)


    11 years, 11 months ago

    I noticed two big issues when using the CSS module.

    1. When you add CSS (in this case I pasted) CSS where the properties where uppercased, on saved the plugin completely removed them.

    So this

    .class {
    COLOR: #fff;
    }

    Became

    .class {
    #fff;
    }

    2. When you add an !important it messes with it.

    So This

    .class {
    color: #fff !important;
    }

    Became

    .class {
    color: #fff!important;
    }

    https://www.ads-software.com/extend/plugins/jetpack/

Viewing 8 replies - 1 through 8 (of 8 total)
  • Plugin Author Jeremy Herve

    (@jeherve)

    Jetpack Mechanic ??

    The Custom CSS module will indeed validate and sanitize the CSS you enter in the custom CSS editor.
    color: #fff!important; will work just fine, however you’ll need to use lowercase for CSS properties.

    If you do not want your custom CSS to be sanitized, I would suggest that you add it to your theme stylesheet, under wp-content/themes/your-theme/style.css.

    Thread Starter cpoteet

    (@cpoteet)

    The sanitizing is a bit of a pain especially when you give the user absolutely no warning in the UI or after sanitizing. At the very least there should be some user feedback on why their CSS was just destroyed.

    However, the !important thing is an issue. It is changing

    color: #fff !important

    to

    color: #fff!important

    When it changes it to the latter it obviously doesn’t render correctly in the browser. That is an actual bug IMO.

    Plugin Author Jeremy Herve

    (@jeherve)

    Jetpack Mechanic ??

    The sanitizing is a bit of a pain especially when you give the user absolutely no warning in the UI or after sanitizing. At the very least there should be some user feedback on why their CSS was just destroyed.

    That’s true. We do add icons to warn you of any problems with your CSS, but it could be more visible. I took note of your feedback, thanks!

    When it changes it to the latter it obviously doesn’t render correctly in the browser.

    I tried on my own site, and it didn’t seem to create any problem, my change was properly displayed in the browser. Do you experience the issue in a specific browser?

    Thread Starter cpoteet

    (@cpoteet)

    That’s true. We do add icons to warn you of any problems with your CSS, but it could be more visible. I took note of your feedback, thanks!

    But what’s interesting is that you don’t add an indicator for properties in all caps. They just get erased on save without any warning.

    I tried on my own site, and it didn’t seem to create any problem, my change was properly displayed in the browser. Do you experience the issue in a specific browser?

    You can see my stylesheet here. One the .car-list,.car-list li selector you can see the !important squished together with the value.
    https://www.siolon.com/?custom-css=1&csblog=1&cscache=6&csrev=16

    Plugin Author Jeremy Herve

    (@jeherve)

    Jetpack Mechanic ??

    But what’s interesting is that you don’t add an indicator for properties in all caps.

    There should indeed be warning. I took note of the problem, and we’ll get this fixed.

    You can see my stylesheet here. One the .car-list,.car-list li selector you can see the !important squished together with the value.
    https://www.siolon.com/?custom-css=1&csblog=1&cscache=6&csrev=16

    Thanks for the extra details.

    I checked your site, and the margin value seems to be correctly applied to your list:
    https://i.wpne.ws/OFKU

    Thread Starter cpoteet

    (@cpoteet)

    I checked your site, and the margin value seems to be correctly applied to your list:
    https://i.wpne.ws/OFKU

    Thanks Jeremy. Perhaps I should’ve added it to something that actually needed the important. I did now, and it does seem to work.

    https://www.siolon.com/archives/

    I guess I still find it odd that only in the case of adding the !important does it smush the value and the !important together. I guess this is less a bug and more a request that the editor not display it in this manner. The spec says there should be a space between them https://www.w3.org/TR/CSS21/cascade.html#important-rules

    Plugin Author Jeremy Herve

    (@jeherve)

    Jetpack Mechanic ??

    guess I still find it odd that only in the case of adding the !important does it smush the value and the !important together. I guess this is less a bug and more a request that the editor not display it in this manner.

    It’s true that we could add a space there. We’ll consider making the change.

    In the meantime, we got that Uppercase problem fixed. The fix will be available with the next Jetpack release.

    Thread Starter cpoteet

    (@cpoteet)

    Thanks Jeremy. I appreciate your replies. I’m excited about this because it allows me to retire my Persistent Styles Plugin.

    https://www.ads-software.com/extend/plugins/persistent-styles-plugin/

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Two Issues with Jetpack CSS Module’ is closed to new replies.

Tags