WordPress.org

Ready to get started?Download WordPress

Forums

Jetpack by WordPress.com
[resolved] Two Issues with Jetpack CSS Module (9 posts)

  1. cpoteet
    Member
    Posted 1 year 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;
    }

    http://wordpress.org/extend/plugins/jetpack/

  2. Jeremy Herve
    Happiness Engineer
    Plugin Author

    Posted 1 year ago #

    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.

  3. cpoteet
    Member
    Posted 1 year ago #

    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.

  4. Jeremy Herve
    Happiness Engineer
    Plugin Author

    Posted 1 year ago #

    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?

  5. cpoteet
    Member
    Posted 1 year ago #

    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.
    http://www.siolon.com/?custom-css=1&csblog=1&cscache=6&csrev=16

  6. Jeremy Herve
    Happiness Engineer
    Plugin Author

    Posted 1 year ago #

    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.
    http://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:
    http://i.wpne.ws/OFKU

  7. cpoteet
    Member
    Posted 1 year ago #

    I checked your site, and the margin value seems to be correctly applied to your list:
    http://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.

    http://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 http://www.w3.org/TR/CSS21/cascade.html#important-rules

  8. Jeremy Herve
    Happiness Engineer
    Plugin Author

    Posted 1 year ago #

    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.

  9. cpoteet
    Member
    Posted 1 year ago #

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

    http://wordpress.org/extend/plugins/persistent-styles-plugin/

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic

Tags