search

josdejong / svelte-jsoneditor

A web-based tool to view, edit, format, repair, query, transform, and validate JSON
https://jsoneditoronline.org
Other
814 stars 108 forks source link

Use flex-start instead of start for align-items #395

Closed clement-fischer closed 5 months ago

clement-fischer commented 5 months ago

Fixes the PostCSS warnings about using start value when building svelte-jsoneditor.

Example warning message:

[vite:css] start value has mixed support, consider using flex-start instead
1  |  .jse-table-mode.s-H_x2fFtzKLbk.s-H_x2fFtzKLbk{flex:1;display:flex;flex-direction:column;position:relative;background:var(--jse-background-color, #fff);min-width:0;min-height:0;font-family:var(--jse-font-family-mono, consolas, menlo, monaco, "Ubuntu Mono", "source-code-pro", monospace);font-size:var(--jse-font-size-mono, 14px);color:var(--jse-text-color, #4d4d4d);line-height:var(--jse-line-height, calc(1em + 4px))}.jse-table-mode.no-main-menu.s-H_x2fFtzKLbk.s-H_x2fFtzKLbk{border-top:var(--jse-main-border, 1px solid #d7d7d7)}.jse-table-mode.s-H_x2fFtzKLbk .jse-hidden-input-label.s-H_x2fFtzKLbk{position:fixed;right:0;top:0;width:0;height:0}.jse-table-mode.s-H_x2fFtzKLbk .jse-hidden-input-label .jse-hidden-input.s-H_x2fFtzKLbk{width:0;height:0;padding:0;border:0;outline:none}.jse-table-mode.s-H_x2fFtzKLbk .jse-contents.s-H_x2fFtzKLbk{flex:1;align-items:start;flex-direction:column;display:flex;overflow:auto;overflow-anchor:none;border-left:var(--jse-main-border, 1px solid #d7d7d7);border-right:var(--jse-main-border, 1px solid #d7d7d7)}.jse-table-mode.s-H_x2fFtzKLbk .jse-contents.s-H_x2fFtzKLbk:last-child{border-bottom:var(--jse-main-border, 1px solid #d7d7d7)}.jse-table-mode.s-H_x2fFtzKLbk .jse-contents table.jse-table-main.s-H_x2fFtzKLbk{border-collapse:collapse;border-spacing:0}.jse-table-mode.s-H_x2fFtzKLbk .jse-contents table.jse-table-main .jse-table-invisible-start-section td.s-H_x2fFtzKLbk,.jse-table-mode.s-H_x2fFtzKLbk .jse-contents table.jse-table-main .jse-table-invisible-end-section td.s-H_x2fFtzKLbk{margin:0;padding:0}.jse-table-mode.s-H_x2fFtzKLbk .jse-contents table.jse-table-main .jse-table-invisible-end-section td.s-H_x2fFtzKLbk{padding-bottom:var(--jse-padding, 10px)}.jse-table-mode.s-H_x2fFtzKLbk .jse-contents table.jse-table-main .jse-table-row.s-H_x2fFtzKLbk:hover{background-color:var(--jse-table-row-odd-background, rgba(0, 0, 0, 0.05))}.jse-table-mode.s-H_x2fFtzKLbk .jse-contents table.jse-table-main .jse-table-row .jse-table-cell.s-H_x2fFtzKLbk{padding:0 var(--jse-padding, 10px) 0 0;vertical-align:top;white-space:nowrap;height:var(--jse-line-height, calc(1em + 4px))}.jse-table-mode.s-H_x2fFtzKLbk .jse-contents table.jse-table-main .jse-table-row .jse-table-cell.jse-table-cell-header.s-H_x2fFtzKLbk,.jse-table-mode.s-H_x2fFtzKLbk .jse-contents table.jse-table-main .jse-table-row .jse-table-cell.jse-table-cell-gutter.s-H_x2fFtzKLbk{font-weight:normal;text-align:left;color:var(--jse-text-readonly, #8d8d8d);background:var(--jse-table-header-background, #f5f5f5)}.jse-table-mode.s-H_x2fFtzKLbk .jse-contents table.jse-table-main .jse-table-row .jse-table-cell.jse-table-cell-header.s-H_x2fFtzKLbk{padding:0;position:sticky;top:0}.jse-table-mode.s-H_x2fFtzKLbk .jse-contents table.jse-table-main .jse-table-row .jse-table-cell.jse-table-cell-header .jse-table-root-error.s-H_x2fFtzKLbk{padding:calc(0.5 * var(--jse-padding, 10px)) var(--jse-padding, 10px) calc(0.5 * var(--jse-padding, 10px)) calc(0.5 * var(--jse-padding, 10px))}.jse-table-mode.s-H_x2fFtzKLbk .jse-contents table.jse-table-main .jse-table-row .jse-table-cell.jse-table-cell-gutter.s-H_x2fFtzKLbk{padding:0 var(--jse-padding, 10px) 0 calc(0.5 * var(--jse-padding, 10px))}.jse-table-mode.s-H_x2fFtzKLbk .jse-contents table.jse-table-main .jse-table-row .jse-table-cell.jse-selected-value.s-H_x2fFtzKLbk>.jse-value{background:var(--jse-selection-background-color, #d3d3d3)}.jse-table-mode.s-H_x2fFtzKLbk .jse-contents table.jse-table-main .jse-table-row .jse-table-cell.s-H_x2fFtzKLbk div{display:inline-flex}.jse-table-mode.s-H_x2fFtzKLbk .jse-contents table.jse-table-main .jse-table-row .jse-table-cell.s-H_x2fFtzKLbk div.jse-value{overflow-wrap:normal;white-space:nowrap;vertical-align:top;display:inline-block}.jse-table-mode.s-H_x2fFtzKLbk .jse-contents table.jse-table-main .jse-table-row .jse-table-cell .jse-context-menu-anchor.s-H_x2fFtzKLbk{position:relative;vertical-align:top}.jse-table-mode.s-H_x2fFtzKLbk .jse-contents.jse-contents-loading.s-H_x2fFtzKLbk{align-items:unset}.jse-table-mode.s-H_x2fFtzKLbk .jse-contents.jse-contents-loading .jse-loading-space.s-H_x2fFtzKLbk{flex:1}.jse-table-mode.s-H_x2fFtzKLbk .jse-contents.jse-contents-loading .jse-loading.s-H_x2fFtzKLbk{flex:2;text-align:center;color:var(--jse-panel-color-readonly, #b2b2b2);box-sizing:border-box;font-family:var(--jse-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif);font-size:var(--jse-font-size, 16px)}.s-H_x2fFtzKLbk.s-H_x2fFtzKLbk{}

Related issues: https://github.com/josdejong/svelte-jsoneditor/pull/43 https://github.com/mozilla/addons/issues/3110

josdejong commented 5 months ago

Thanks for this fix Clément!

josdejong commented 4 months ago

The fix is published now in v0.21.5