andywer / postcss-debug

Debug your postcss workflow with ease! Creates snapshots of your CSS files before/after each postcss plugin is run.
MIT License
95 stars 7 forks source link

Fix resizing of the snapshot view #16

Closed alienlebarge closed 7 years ago

alienlebarge commented 7 years ago

Corrects resizing the snapshots_view if CSS lines are longer than the width of the container.

In my CSS, I have big lines of CSS (due to base64 images).

.c-form-control-x input:checked ~ .c-form-control__indicator {
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iOHB4IiBoZWlnaHQ9IjhweCIgdmlld0JveD0iMCAwIDggOCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgOCA4IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0xLjQsMEwwLDEuNGwwLjcsMC43bDEuOCwxLjhMMC43LDUuN0wwLDYuNGwxLjQsMS40bDAuNy0wLjdsMS44LTEuOGwxLjgsMS44bDAuNywwLjdsMS40LTEuNEw3LjEsNS43DQoJTDUuMywzLjlsMS44LTEuOGwwLjctMC43TDYuNCwwTDUuNywwLjdMMy45LDIuNUwyLjEsMC43QzIuMSwwLjcsMS40LDAsMS40LDB6Ii8+DQo8L3N2Zz4NCg==)
}

Here's what the change do:

2016-09-13 08_40_41

andywer commented 7 years ago

Thanks a lot, @alienlebarge! :)

I was just on my way to merge the PR... 😅 Anymore refinements in sight? 😉

alienlebarge commented 7 years ago

Using

.snapshot__view {
    ...
    max-width: calc(95% - 350px - 26px - 20px);
    ...
}

seems a better idea than

.snapshot__view {
    ...
    overflow: scroll
    ...
}

napkin 3 13 09 16 10 08 00 am

alienlebarge commented 7 years ago

@andywer, I think now it's ok :wink:

You can merge.

andywer commented 7 years ago

Awesome. Say... What tool did you use to create the picture in the last command? Looks neat 👍😄

alienlebarge commented 7 years ago

@andywer I'used Napkin http://aged-and-distilled.com/

andywer commented 7 years ago

Ahhh, cool. But quite expensive 😅

andywer commented 7 years ago

Published as version 0.4.1 😉