WordPress.org

Ready to get started?Download WordPress

Forums

Jetpack by WordPress.com
[resolved] Re: Behavior of new CSS module (9 posts)

  1. squashai
    Member
    Posted 1 year ago #

    I'm really impressed and super happy with the new CSS module. It's made adding custom CSS a lot more convenient and a lot less stressful. I especially like the color coding, and the ability to select and replace text in multiple locations at once. It's a dream, for someone like me.

    However, I've also been extremely frustrated by two things, which I consider to be bugs:

    (1) I tried commenting out a section of code that I thought I would use later. When I clicked "Save Stylesheet", the comment disappeared, and my work was lost.

    (2) I tried using -webkit-filter, which worked fine in the theme's stylesheet. When I saved, however, it was deleted. I don't know why Jetpack would delete perfectly valid code.

    I do appreciate how it cleans up and auto-indents the code, and I have to say, I fully intend to use it in the future, and maybe even for themes that have custom CSS options. However, it seems to be a little over-zealous in its current implementation, and I'd appreciate being able to save my comments and "new" code.

    Thanks.

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

  2. Christopher Finke
    Design Engineer at Automattic
    Plugin Author

    Posted 1 year ago #

    (1) I tried commenting out a section of code that I thought I would use later. When I clicked "Save Stylesheet", the comment disappeared, and my work was lost.

    Comments getting stripped out is a known issue; it's on our list of things to fix.

    (2) I tried using -webkit-filter, which worked fine in the theme's stylesheet. When I saved, however, it was deleted. I don't know why Jetpack would delete perfectly valid code.

    You're right; it shouldn't have been stripped out. We'll have it fixed in the next release.

  3. squashai
    Member
    Posted 1 year ago #

    Awesome! Thanks for the quick response.

    Also, I like the text finding feature, but it might be more useful if it has "Next" and "Previous" buttons.

    And it doesn't remember the previous query if you move the cursor, which is kinda inconvenient.

    Anyway, thanks again for the awesome plugin!

  4. squashai
    Member
    Posted 1 year ago #

    Hmm...and while we're on the subject of the CSS editor, I can't get it to accept any combination of the following

    -webkit-transition:all .5s ease-in!important;
    -webkit-transition:margin .5s ease-in!important;
    -webkit-transition:max-height 1s ease-in!important;

    It just keeps one -- usually the first one -- and deletes the rest.

    I guess I'll be using the manual editor until this is worked out. :/

  5. Christopher Finke
    Design Engineer at Automattic
    Plugin Author

    Posted 1 year ago #

    I've fixed the problem with -webkit-transition for the next release as well.

  6. squashai
    Member
    Posted 1 year ago #

    I've found that combining the tags and separating with commas works, as well.

    e.g., -webkit-transition:margin .5s ease-in, max-height 1s ease-in;

  7. Christopher Finke
    Design Engineer at Automattic
    Plugin Author

    Posted 1 year ago #

    That makes sense, as the bug was in some code that condenses CSS by eliminating multiple definitions of CSS properties so that code like this:

    body {
      width: 100px;
      color: green;
    }
    
    body {
      font-weight: bold;
      color: red;
    }
    
    body {
      text-decoration: underline;
      color: orange;
    }

    turns into this:

    body {
      width: 100px;
      font-weight: bold;
      text-decoration: underline;
      color: orange;
    }

    There are a few properties that are allowed to be defined multiple times, but transition (and -webkit-transition) were erroneously left out of that list.

  8. maiki
    Member
    Posted 1 year ago #

    cfinke, while you are at it, I am having an issue with @font-face as well. It is removing the src line, which kinda defeats the whole selector.

    @font-face {
    font-family: BlackoutMidnight;
    src: url(‘/files/blackout-midnight.ttf’);
    }

    becomes

    @font-face {
    font-family: BlackoutMidnight;
    }

    Is there a ticket that is collecting these issues? I can't find one on Trac.

  9. Christopher Finke
    Design Engineer at Automattic
    Plugin Author

    Posted 1 year ago #

    There's no Trac ticket, but I do know what's causing the src: line to get stripped. Some of the security filters for WordPress.com got left in Custom CSS when it was ported to Jetpack; I'll strip those out for the next release.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic