Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

compress breaks generated CSS #78

Open
stefanvanherwijnen opened this issue Jan 9, 2025 · 0 comments
Open

compress breaks generated CSS #78

stefanvanherwijnen opened this issue Jan 9, 2025 · 0 comments

Comments

@stefanvanherwijnen
Copy link

When compress is true (default), the generated inline CSS is broken:

With compress 
*,
*:before,
*:after {
  box-sizing:inherit;
  -webkit-tap-highlight-color:transparent;
  -moz-tap-highlight-color:transparent;
}
html,
body,
#q-app {
  width:100%;
  direction:ltr;
}
body.platform-ios.within-iframe,
body.platform-ios.within-iframe #q-app {
  width:100px;
  min-width:100%;
}
html,
body {
  margin:0;
  box-sizing:border-box;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
  display:block;
}
abbr[title] {
  border-bottom:none;
  text-decoration:underline;
  -webkit-text-decoration:underline dotted;
  text-decoration:underline dotted;
}
img {
  border-style:none;
}
code,
kbd,
pre,
samp {
  font-family:monospace, monospace;
  font-size:1em;
}
hr {
  box-sizing:content-box;
  height:0;
  overflow:visible;
}
button,
input,
optgroup,
select,
textarea {
  font:inherit;
  font-family:inherit;
  margin:0;
}
optgroup {
  font-weight:bold;
}
button,
input,
select {
  overflow:visible;
  text-transform:none;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
  border:0;
  padding:0;
}
button:-moz-focusring,
input:-moz-focusring {
  outline:1px dotted ButtonText;
}
fieldset {
  padding:0.35em 0.75em 0.625em;
}
legend {
  box-sizing:border-box;
  color:inherit;
  display:table;
  max-width:100%;
  padding:0;
  white-space:normal;
}
progress {
  vertical-align:baseline;
}
textarea {
  overflow:auto;
}
input[type='search']::-webkit-search-cancel-button,
input[type='search']::-webkit-search-decoration {
  -webkit-appearance:none;
}
*,
::before,
::after {
  --un-rotate:0;
  --un-rotate-x:0;
  --un-rotate-y:0;
  --un-rotate-z:0;
  --un-scale-x:1;
  --un-scale-y:1;
  --un-scale-z:1;
  --un-skew-x:0;
  --un-skew-y:0;
  --un-translate-x:0;
  --un-translate-y:0;
  --un-translate-z:0;
  --un-pan-x: ;
  --un-pan-y: ;
  --un-pinch-zoom: ;
  --un-scroll-snap-strictness:proximity;
  --un-ordinal: ;
  --un-slashed-zero: ;
  --un-numeric-figure: ;
  --un-numeric-spacing: ;
  --un-numeric-fraction: ;
  --un-border-spacing-x:0;
  --un-border-spacing-y:0;
  --un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);
  --un-ring-shadow:0 0 rgb(0 0 0 / 0);
  --un-shadow-inset: ;
  --un-shadow:0 0 rgb(0 0 0 / 0);
  --un-ring-inset: ;
  --un-ring-offset-width:0px;
  --un-ring-offset-color:#fff;
  --un-ring-width:0px;
  --un-ring-color:rgb(147 197 253 / 0.5);
  --un-blur: ;
  --un-brightness: ;
  --un-contrast: ;
  --un-drop-shadow: ;
  --un-grayscale: ;
  --un-hue-rotate: ;
  --un-invert: ;
  --un-saturate: ;
  --un-sepia: ;
  --un-backdrop-blur: ;
  --un-backdrop-brightness: ;
  --un-backdrop-contrast: ;
  --un-backdrop-grayscale: ;
  --un-backdrop-hue-rotate: ;
  --un-backdrop-invert: ;
  --un-backdrop-opacity: ;
  --un-backdrop-saturate: --un-backdrop-sepia: ;
}
.q-avatar img:not(.q-icon):not(.q-img__image) {
  border-radius:inherit;
  height:inheritwidth:inherit;
}
.q-avatar__content {
  border-radius:inherit;
  height:inherit;
  width:inherit;
  font-size:0.5emline-height:0.5em;
}
.q-btn {
  color:inherit;
  position:relative;
  width:auto;
  height:auto;
  min-height:2.572em;
  cursor:default;
  align-items:stretch;
  border-width:0px;
  background-color:transparent /* transparent */;
  padding-left:16px;
  padding-right:16px;
  padding-top:4px;
  padding-bottom:4px;
  text-align:center;
  vertical-align:middle;
  font-size:14px;
  font-weight:500;
  line-height:1.715em;
  text-transform:uppercase;
  text-decoration:noneoutline-width:0px;
}
.q-btn:before {
  border-radius:inherit;
  box-shadow:0 1px 5px rgba(0, 0, 0, 0.2), 0 2px 2px rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12);
  position:absolute;
  left:0;
  right:0;
  top:0;
  bottom:0;
  display:blockcontent:"";
}
.q-btn__content {
  transition:opacity 0.3sz-index:0;
}
.q-btn--flat:beforebox-shadow:none;
}
.q-card {
  box-shadow:0 1px 5px rgba(0, 0, 0, 0.2), 0 2px 2px rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12);
  position:relative;
  border-radius:4px;
  --un-bg-opacity:1;
  background-color:rgb(255 255 255 / var(--un-bg-opacity)) /* #fff */vertical-align:top;
}
.q-card > div:not(.q--avoid-card-border) {
  border-left:0;
  border-right:0;
  box-shadow:none;
  border-top-left-radius:0;
  border-top-right-radius:0;
  border-bottom-left-radius:0border-bottom-right-radius:0;
}
.q-card > div:nth-child(1 of :not(.q--avoid-card-border)) {
  border-top:0;
  border-top-left-radius:inheritborder-top-right-radius:inherit;
}
.q-card > div:nth-last-child(1 of :not(.q--avoid-card-border)) {
  border-bottom:0;
  border-bottom-left-radius:inheritborder-bottom-right-radius:inherit;
}
.q-icon {
  cursor:inherit!important;
  position:relative;
  box-sizing:content-box;
  width:1em;
  height:1em;
  display:inline-flex;
  flex-shrink:0;
  -webkit-user-select:none;
  user-select:none;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
  overflow-wrap:normal;
  word-break:normal;
  fill:currentColor /* currentColor */;
  text-align:center;
  vertical-align:middle;
  color:inherit;
  line-height:0.25rem;
  letter-spacing:0emtext-transform:none;
}
.q-layout__shadow:after {
  box-shadow:0 0 10px 2px rgba(0, 0, 0, 0.2), 0 0px 10px rgba(0, 0, 0, 0.24);
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0content:"";
}
.no-pointer-eventspointer-events:none !important;
}
.absolute-full {
  position:absolute;
  top:0;
  right:0;
  bottom:0left:0;
}
.fixed-left {
  position:fixed;
  top:0;
  bottom:0left:0;
}
.fixed-top {
  position:fixed;
  top:0;
  left:0right:0;
}
.fullscreen {
  position:fixed;
  top:0;
  right:0;
  bottom:0;
  left:0;
  max-width:100vw;
  max-height:100vhborder-radius:0 !important;
}
.q-avatar {
  position:relative;
  display:inline-block;
  height:1em;
  width:1em;
  border-radius:50%;
  vertical-align:middlefont-size:48px;
}
.q-card__section,
.q-pageposition:relative;
}
.q-drawer {
  position:absolute;
  top:0;
  bottom:0;
  --un-bg-opacity:1background-color:rgb(255 255 255 / var(--un-bg-opacity)) /* #fff */;
}
.q-layout {
  position:relative;
  width:100%outline-width:0px;
}
.q-toolbar {
  position:relative;
  min-height:50px;
  padding-left:12px;
  padding-right:12px;
  padding-top:0padding-bottom:0;
}
.q-drawer--left {
  left:0;
  --un-translate-x:-100%transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));
}
.q-header .q-layout__shadowbottom:-10px;
}
.q-header .q-layout__shadow:afterbottom:10px;
}
.q-drawer__backdropz-index:2999 !important;
}
.q-drawer__opener {
  z-index:2001;
  height:100%;
  width:15px;
  -webkit-user-select:noneuser-select:none;
}
.q-drawer--on-topz-index:3000;
}
.q-headerz-index:2000;
}
.fit {
  width:100% !importantheight:100% !important;
}
.q-btn--dense {
  min-height:2empadding:0.285em;
}
.q-btn--dense.q-btn--round {
  min-height:2.4em;
  min-width:2.4empadding:0;
}
.q-btn--round {
  min-width:3em;
  min-height:3em;
  border-radius:50%padding:0;
}
.q-icon:after,
.q-icon:before {
  width:100%;
  height:100%;
  display:flex !important;
  align-items:centerjustify-content:center;
}
.q-icon>svg {
  height:100%width:100%;
}
.q-layout__shadowwidth:100%;
}
.q-toolbar__title {
  min-width:1px;
  max-width:100%;
  flex:1 1 0%;
  padding-left:12px;
  padding-right:12px;
  padding-top:0;
  padding-bottom:0;
  font-size:21px;
  font-weight:400letter-spacing:0.01em;
}
.row {
  display:flex;
  flex-direction:rowflex-wrap:wrap;
}
.no-wrapflex-wrap:nowrap;
}
.q-btn--actionablecursor:pointer;
}
.non-selectable {
  -webkit-user-select:none !importantuser-select:none !important;
}
.ellipsis {
  overflow:hidden;
  text-overflow:ellipsiswhite-space:nowrap;
}
.scrolloverflow:auto;
}
.q-avatar--squareborder-radius:0;
}
.q-layout__section--marginal {
  --un-bg-opacity:1;
  background-color:rgb(25 118 210 / var(--un-bg-opacity)) /* #1976d2 */;
  --un-text-opacity:1color:rgb(255 255 255 / var(--un-text-opacity)) /* #fff */;
}
.q-card__section--vertpadding:16px;
}
.q-toolbar__title:first-childpadding-left:0;
}
.q-toolbar__title:last-childpadding-right:0;
}
.text-centertext-align:center;
}
.q-btn .q-iconfont-size:1.715em;
}
.no-outline,
.q-focus-helper,
.q-focusable,
.q-hoverableoutline-width:0px;
}
.fixedposition:fixed;
}
.hiddendisplay:none;
}
.items-centeralign-items:center;
}
.justify-centerjustify-content:center;
}
.justify-evenlyjustify-content:space-evenly;
}
.overflow-hiddenoverflow:hidden;
}
Without compress it works fine:
Without compress 
*,
*:before,
*:after {
  box-sizing: inherit;
  -webkit-tap-highlight-color: transparent;
  -moz-tap-highlight-color: transparent;
}
html,
body,
#q-app {
  width: 100%;
  direction: ltr;
}
body.platform-ios.within-iframe,
body.platform-ios.within-iframe #q-app {
  width: 100px;
  min-width: 100%;
}
html,
body {
  margin: 0;
  box-sizing: border-box;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
  display: block;
}
abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted;
}
img {
  border-style: none;
}
code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}
hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}
button,
input,
optgroup,
select,
textarea {
  font: inherit;
  font-family: inherit;
  margin: 0;
}
optgroup {
  font-weight: bold;
}
button,
input,
select {
  overflow: visible;
  text-transform: none;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}
button:-moz-focusring,
input:-moz-focusring {
  outline: 1px dotted ButtonText;
}
fieldset {
  padding: 0.35em 0.75em 0.625em;
}
legend {
  box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal;
}
progress {
  vertical-align: baseline;
}
textarea {
  overflow: auto;
}
input[type='search']::-webkit-search-cancel-button,
input[type='search']::-webkit-search-decoration {
  -webkit-appearance: none;
}
*,
::before,
::after {
  --un-rotate:0;
  --un-rotate-x:0;
  --un-rotate-y:0;
  --un-rotate-z:0;
  --un-scale-x:1;
  --un-scale-y:1;
  --un-scale-z:1;
  --un-skew-x:0;
  --un-skew-y:0;
  --un-translate-x:0;
  --un-translate-y:0;
  --un-translate-z:0;
  --un-pan-x: ;
  --un-pan-y: ;
  --un-pinch-zoom: ;
  --un-scroll-snap-strictness:proximity;
  --un-ordinal: ;
  --un-slashed-zero: ;
  --un-numeric-figure: ;
  --un-numeric-spacing: ;
  --un-numeric-fraction: ;
  --un-border-spacing-x:0;
  --un-border-spacing-y:0;
  --un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);
  --un-ring-shadow:0 0 rgb(0 0 0 / 0);
  --un-shadow-inset: ;
  --un-shadow:0 0 rgb(0 0 0 / 0);
  --un-ring-inset: ;
  --un-ring-offset-width:0px;
  --un-ring-offset-color:#fff;
  --un-ring-width:0px;
  --un-ring-color:rgb(147 197 253 / 0.5);
  --un-blur: ;
  --un-brightness: ;
  --un-contrast: ;
  --un-drop-shadow: ;
  --un-grayscale: ;
  --un-hue-rotate: ;
  --un-invert: ;
  --un-saturate: ;
  --un-sepia: ;
  --un-backdrop-blur: ;
  --un-backdrop-brightness: ;
  --un-backdrop-contrast: ;
  --un-backdrop-grayscale: ;
  --un-backdrop-hue-rotate: ;
  --un-backdrop-invert: ;
  --un-backdrop-opacity: ;
  --un-backdrop-saturate: ;
  --un-backdrop-sepia: ;
}
.q-avatar img:not(.q-icon):not(.q-img__image) {
  border-radius:inherit;
  height:inherit;
  width:inherit;
}
.q-avatar__content {
  border-radius:inherit;
  height:inherit;
  width:inherit;
  font-size:0.5em;
  line-height:0.5em;
}
.q-btn {
  color:inherit;
  position:relative;
  width:auto;
  height:auto;
  min-height:2.572em;
  cursor:default;
  align-items:stretch;
  border-width:0px;
  background-color:transparent /* transparent */;
  padding-left:16px;
  padding-right:16px;
  padding-top:4px;
  padding-bottom:4px;
  text-align:center;
  vertical-align:middle;
  font-size:14px;
  font-weight:500;
  line-height:1.715em;
  text-transform:uppercase;
  text-decoration:none;
  outline-width:0px;
}
.q-btn:before {
  border-radius:inherit;
  box-shadow:0 1px 5px rgba(0, 0, 0, 0.2), 0 2px 2px rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12);
  position:absolute;
  left:0;
  right:0;
  top:0;
  bottom:0;
  display:block;
  content:"";
}
.q-btn__content {
  transition:opacity 0.3s;
  z-index:0;
}
.q-btn--flat:before {
  box-shadow:none;
}
.q-card {
  box-shadow:0 1px 5px rgba(0, 0, 0, 0.2), 0 2px 2px rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12);
  position:relative;
  border-radius:4px;
  --un-bg-opacity:1;
  background-color:rgb(255 255 255 / var(--un-bg-opacity)) /* #fff */;
  vertical-align:top;
}
.q-card > div:not(.q--avoid-card-border) {
  border-left:0;
  border-right:0;
  box-shadow:none;
  border-top-left-radius:0;
  border-top-right-radius:0;
  border-bottom-left-radius:0;
  border-bottom-right-radius:0;
}
.q-card > div:nth-child(1 of :not(.q--avoid-card-border)) {
  border-top:0;
  border-top-left-radius:inherit;
  border-top-right-radius:inherit;
}
.q-card > div:nth-last-child(1 of :not(.q--avoid-card-border)) {
  border-bottom:0;
  border-bottom-left-radius:inherit;
  border-bottom-right-radius:inherit;
}
.q-icon {
  cursor:inherit!important;
  position:relative;
  box-sizing:content-box;
  width:1em;
  height:1em;
  display:inline-flex;
  flex-shrink:0;
  -webkit-user-select:none;
  user-select:none;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
  overflow-wrap:normal;
  word-break:normal;
  fill:currentColor /* currentColor */;
  text-align:center;
  vertical-align:middle;
  color:inherit;
  line-height:0.25rem;
  letter-spacing:0em;
  text-transform:none;
}
.q-layout__shadow:after {
  box-shadow:0 0 10px 2px rgba(0, 0, 0, 0.2), 0 0px 10px rgba(0, 0, 0, 0.24);
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  content:"";
}
.no-pointer-events {
  pointer-events:none !important;
}
.absolute-full {
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
}
.fixed-left {
  position:fixed;
  top:0;
  bottom:0;
  left:0;
}
.fixed-top {
  position:fixed;
  top:0;
  left:0;
  right:0;
}
.fullscreen {
  position:fixed;
  top:0;
  right:0;
  bottom:0;
  left:0;
  max-width:100vw;
  max-height:100vh;
  border-radius:0 !important;
}
.q-avatar {
  position:relative;
  display:inline-block;
  height:1em;
  width:1em;
  border-radius:50%;
  vertical-align:middle;
  font-size:48px;
}
.q-card__section,
.q-page {
  position:relative;
}
.q-drawer {
  position:absolute;
  top:0;
  bottom:0;
  --un-bg-opacity:1;
  background-color:rgb(255 255 255 / var(--un-bg-opacity)) /* #fff */;
}
.q-layout {
  position:relative;
  width:100%;
  outline-width:0px;
}
.q-toolbar {
  position:relative;
  min-height:50px;
  padding-left:12px;
  padding-right:12px;
  padding-top:0;
  padding-bottom:0;
}
.q-drawer--left {
  left:0;
  --un-translate-x:-100%;
  transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));
}
.q-header .q-layout__shadow {
  bottom:-10px;
}
.q-header .q-layout__shadow:after {
  bottom:10px;
}
.q-drawer__backdrop {
  z-index:2999 !important;
}
.q-drawer__opener {
  z-index:2001;
  height:100%;
  width:15px;
  -webkit-user-select:none;
  user-select:none;
}
.q-drawer--on-top {
  z-index:3000;
}
.q-header {
  z-index:2000;
}
.fit {
  width:100% !important;
  height:100% !important;
}
.q-btn--dense {
  min-height:2em;
  padding:0.285em;
}
.q-btn--dense.q-btn--round {
  min-height:2.4em;
  min-width:2.4em;
  padding:0;
}
.q-btn--round {
  min-width:3em;
  min-height:3em;
  border-radius:50%;
  padding:0;
}
.q-icon:after,
.q-icon:before {
  width:100%;
  height:100%;
  display:flex !important;
  align-items:center;
  justify-content:center;
}
.q-icon>svg {
  height:100%;
  width:100%;
}
.q-layout__shadow {
  width:100%;
}
.q-toolbar__title {
  min-width:1px;
  max-width:100%;
  flex:1 1 0%;
  padding-left:12px;
  padding-right:12px;
  padding-top:0;
  padding-bottom:0;
  font-size:21px;
  font-weight:400;
  letter-spacing:0.01em;
}
.row {
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
}
.no-wrap {
  flex-wrap:nowrap;
}
.q-btn--actionable {
  cursor:pointer;
}
.non-selectable {
  -webkit-user-select:none !important;
  user-select:none !important;
}
.ellipsis {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.scroll {
  overflow:auto;
}
.q-avatar--square {
  border-radius:0;
}
.q-layout__section--marginal {
  --un-bg-opacity:1;
  background-color:rgb(25 118 210 / var(--un-bg-opacity)) /* #1976d2 */;
  --un-text-opacity:1;
  color:rgb(255 255 255 / var(--un-text-opacity)) /* #fff */;
}
.q-card__section--vert {
  padding:16px;
}
.q-toolbar__title:first-child {
  padding-left:0;
}
.q-toolbar__title:last-child {
  padding-right:0;
}
.text-center {
  text-align:center;
}
.q-btn .q-icon {
  font-size:1.715em;
}
.no-outline,
.q-focus-helper,
.q-focusable,
.q-hoverable {
  outline-width:0px;
}
.fixed {
  position:fixed;
}
.hidden {
  display:none;
}
.items-center {
  align-items:center;
}
.justify-center {
  justify-content:center;
}
.justify-evenly {
  justify-content:space-evenly;
}
.overflow-hidden {
  overflow:hidden;
}

The 'compression' process seems to just break it instead of actually compressing it.
[email protected]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@stefanvanherwijnen