Extra semicolons appear in CSS after clearing DevTools value #126

Open
matudelic opened this Issue Jun 22, 2016 · 2 comments

Projects

None yet

3 participants

@matudelic

Thanks for an amazing tool! Love the possibility to test styles in DevTools, and not have to duplicate the resulting css rules to the stylesheet by hand. However I noticed some unexpected behaviour while using it.

It seems that if you clear the value for an attribute which was added to an element via DevTools, it results in two extraneous semicolons in the stylesheet you have open in the editor. The extra semicolons are not removed even if you remove the whole attribute itself. This behaviour seems to be limited to attributes which were added in DevTools. Clearing values for pre-existing CSS attributes do not result in any extra characters in the stylesheet in the editor.

Steps to reproduce:

  1. Follow the steps in the demo tutorial
  2. Inspect the .sample-content__title element
  3. In DevTools, add any attribute and value pair to the .sample-content__title element. (Let's use for instance color: blue;)
  4. In DevTools, clear the value (blue) from the attribute (color:)
  5. In the editor stylesheet two semicolons appear after the attribute name, where the value used to be
  6. In DevTools, enter another value for the attribute you added and clear it
  7. Same behaviour as in step 5. Every time the value field for the is emptied, two semicolons appear in the editor. This happens even without pressing enter in between, so testing three different values in sequence results in six semicolons as long as you clear the value field after every value
  8. Remove the attribute that you added in step 3. Result: the attribute and value are gone, but the semicolons are still there in the editor stylesheet

I imagine this is not intended?

Keep up the good work! 👍

@sergeche
Member

Thanks for detailed report. The problem seems to be in LiveStyle coding style inferring: when inserting a new property, it inherits your coding style. So it looks like it mistakenly took doubled semicolon as a valid property terminator.

Will check it out when I get back to LiveStyle update

@Spievat
Spievat commented Dec 28, 2016

I would like to echo what @matudelic has said about how delightful this app is, and provide a video showing the semicolon duplication for Atom text editor:

http://www.screencast.com/t/Ta24FDXLuT7J

I hope this helps for when you find time for the LiveStyle update!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment