From 70fbbf6a8c8897fdfb472f05661cb02fb7dc3efc Mon Sep 17 00:00:00 2001 From: Naiyer <19614213+naiyerasif@users.noreply.github.com> Date: Fri, 7 Jun 2024 22:46:01 +0530 Subject: [PATCH] fix: keep hanging-punctuation visible for input and textarea --- .npmignore | 2 +- dist/preset.css | 11 +++++++++-- dist/preset.min.css | 4 ++-- package.json | 4 ++-- src/preset.css | 7 +++++-- src/preset.scss | 10 +++++++--- 6 files changed, 26 insertions(+), 12 deletions(-) diff --git a/.npmignore b/.npmignore index 6d244f0..79345b7 100644 --- a/.npmignore +++ b/.npmignore @@ -1,3 +1,3 @@ .github -banner.webp +banner.svg CODE_OF_CONDUCT.md diff --git a/dist/preset.css b/dist/preset.css index 94bcc0a..23b0175 100644 --- a/dist/preset.css +++ b/dist/preset.css @@ -1,4 +1,4 @@ -/*! Preset v4.0.0 | MIT License | https://github.com/Microflash/preset */ +/*! Preset v4.0.1 | MIT License | https://github.com/Microflash/preset */ *, :before, :after { box-sizing: border-box; } @@ -16,7 +16,6 @@ -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; text-size-adjust: 100%; - hanging-punctuation: first last; block-size: 100%; } @@ -31,6 +30,14 @@ } } +:where(:not(:-webkit-any(input, textarea))) { + hanging-punctuation: first last; +} + +:where(:not(:is(input, textarea))) { + hanging-punctuation: first last; +} + :where(body) { tab-size: var(--preset-tab-size, 2); min-block-size: 100%; diff --git a/dist/preset.min.css b/dist/preset.min.css index b445986..61226c6 100644 --- a/dist/preset.min.css +++ b/dist/preset.min.css @@ -1,2 +1,2 @@ -/*! Preset v4.0.0 | MIT License | https://github.com/Microflash/preset */ -*,:before,:after{box-sizing:border-box}*{line-height:var(--preset-line-height,calc(.3rem + 2ex + .3rem));overflow-wrap:break-word}:where(:not(dialog)){margin:0}:where(html){-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%;hanging-punctuation:first last;block-size:100%}@media (prefers-reduced-motion:no-preference),(update:fast){:where(html):focus-within{scroll-behavior:smooth}:where(:has(:target)){scroll-behavior:smooth;scroll-padding-block-start:var(--preset-scroll-padding,3rem)}}:where(body){tab-size:var(--preset-tab-size,2);min-block-size:100%}:where([hidden]:not([hidden=until-found])){display:none}:root{--preset-outline-transition:outline-offset .145s cubic-bezier(.25,0,.4,1)}@supports (transition-timing-function:linear(0, 1)){:root{--preset-outline-transition:outline-offset .145s linear(0,.009,.035 2.1%,.141 4.4%,.723 12.9%,.938 16.7%,1.017,1.077,1.121,1.149 24.3%,1.159,1.163,1.161,1.154 29.9%,1.129 32.8%,1.051 39.6%,1.017 43.1%,.991,.977 51%,.974 53.8%,.975 57.1%,.997 69.8%,1.003 76.9%,1)}}@media (prefers-reduced-motion:no-preference),(update:fast){:where(:focus-visible){transition:var(--preset-outline-transition)}:where(:not(:active):focus-visible){transition-duration:.25s}}:where(:not(:-webkit-any(fieldset,progress,meter))){background-repeat:no-repeat;background-origin:border-box}:where(:not(:is(fieldset,progress,meter))){background-repeat:no-repeat;background-origin:border-box}:where(abbr[title]){cursor:help;border-block-end:none;text-decoration-line:underline;text-decoration-style:dotted}:where(h1,h2,h3,h4,h5,h6){text-wrap:balance}:where(td,p){text-wrap:pretty}:where(img,svg,canvas,audio,video,iframe,embed,object){vertical-align:middle;shape-margin:.75rem;font-style:italic}:where(img,svg,video){background-size:cover;block-size:auto;max-inline-size:100%}:where(svg){stroke-linecap:round;stroke-linejoin:round}:where(iframe){border:none}:where(summary){display:list-item}:where(dialog)::backdrop{-webkit-backdrop-filter:var(--preset-dialog-backdrop-filter,blur(25px));backdrop-filter:var(--preset-dialog-backdrop-filter,blur(25px))}:where(html:has(dialog[open])){overflow:hidden}:where(table){border-collapse:collapse;border-spacing:0;caption-side:var(--preset-table-caption-side,bottom)}:where(input,button,textarea,select,optgroup){color:inherit;font:inherit;font-size:inherit;letter-spacing:inherit;word-spacing:inherit}:where(input[type=file])::-webkit-file-upload-button{color:inherit;font:inherit;font-size:inherit;letter-spacing:inherit;word-spacing:inherit}:where(input[type=file])::file-selector-button{color:inherit;font:inherit;font-size:inherit;letter-spacing:inherit;word-spacing:inherit}:where(select,textarea){field-sizing:content}:where(textarea){resize:vertical}@supports (resize:block){:where(textarea){resize:block}}:where(textarea:not([rows])){min-block-size:10em}:where(a[href],area,button,input:not(:-webkit-any([type=text],[type=email],[type=file],[type=number],[type=password],[type=""],[type=tel],[type=url])),label[for],select,summary,[role=button],[onclick],[tabindex]:not([tabindex*=\-])){cursor:pointer}:where(a[href],area,button,input:not(:is([type=text],[type=email],[type=file],[type=number],[type=password],[type=""],[type=tel],[type=url])),label[for],select,summary,[role=button],[onclick],[tabindex]:not([tabindex*=\-])){cursor:pointer}:where(input[type=file])::-webkit-file-upload-button{cursor:pointer}:where(input[type=file])::file-selector-button{cursor:pointer}:where(a[href],area,button,input,label[for],select,summary,textarea,[role=button],[onclick],[tabindex]:not([tabindex*=\-])){touch-action:manipulation;-webkit-tap-highlight-color:transparent}:where(button,button[type],input[type=button],input[type=image] input[type=submit],input[type=reset]){-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}:where(input[type=file])::-webkit-file-upload-button{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}:where(input[type=file])::file-selector-button{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}:where(button,button[type],input[type=button],input[type=image],input[type=submit],input[type=reset])[disabled]{cursor:not-allowed}:where(input[type=file][disabled])::-webkit-file-upload-button{cursor:not-allowed}:where(input[type=file][disabled])::file-selector-button{cursor:not-allowed} \ No newline at end of file +/*! Preset v4.0.1 | MIT License | https://github.com/Microflash/preset */ +*,:before,:after{box-sizing:border-box}*{line-height:var(--preset-line-height,calc(.3rem + 2ex + .3rem));overflow-wrap:break-word}:where(:not(dialog)){margin:0}:where(html){-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%;block-size:100%}@media (prefers-reduced-motion:no-preference),(update:fast){:where(html):focus-within{scroll-behavior:smooth}:where(:has(:target)){scroll-behavior:smooth;scroll-padding-block-start:var(--preset-scroll-padding,3rem)}}:where(:not(:-webkit-any(input,textarea))){hanging-punctuation:first last}:where(:not(:is(input,textarea))){hanging-punctuation:first last}:where(body){tab-size:var(--preset-tab-size,2);min-block-size:100%}:where([hidden]:not([hidden=until-found])){display:none}:root{--preset-outline-transition:outline-offset .145s cubic-bezier(.25,0,.4,1)}@supports (transition-timing-function:linear(0, 1)){:root{--preset-outline-transition:outline-offset .145s linear(0,.009,.035 2.1%,.141 4.4%,.723 12.9%,.938 16.7%,1.017,1.077,1.121,1.149 24.3%,1.159,1.163,1.161,1.154 29.9%,1.129 32.8%,1.051 39.6%,1.017 43.1%,.991,.977 51%,.974 53.8%,.975 57.1%,.997 69.8%,1.003 76.9%,1)}}@media (prefers-reduced-motion:no-preference),(update:fast){:where(:focus-visible){transition:var(--preset-outline-transition)}:where(:not(:active):focus-visible){transition-duration:.25s}}:where(:not(:-webkit-any(fieldset,progress,meter))){background-repeat:no-repeat;background-origin:border-box}:where(:not(:is(fieldset,progress,meter))){background-repeat:no-repeat;background-origin:border-box}:where(abbr[title]){cursor:help;border-block-end:none;text-decoration-line:underline;text-decoration-style:dotted}:where(h1,h2,h3,h4,h5,h6){text-wrap:balance}:where(td,p){text-wrap:pretty}:where(img,svg,canvas,audio,video,iframe,embed,object){vertical-align:middle;shape-margin:.75rem;font-style:italic}:where(img,svg,video){background-size:cover;block-size:auto;max-inline-size:100%}:where(svg){stroke-linecap:round;stroke-linejoin:round}:where(iframe){border:none}:where(summary){display:list-item}:where(dialog)::backdrop{-webkit-backdrop-filter:var(--preset-dialog-backdrop-filter,blur(25px));backdrop-filter:var(--preset-dialog-backdrop-filter,blur(25px))}:where(html:has(dialog[open])){overflow:hidden}:where(table){border-collapse:collapse;border-spacing:0;caption-side:var(--preset-table-caption-side,bottom)}:where(input,button,textarea,select,optgroup){color:inherit;font:inherit;font-size:inherit;letter-spacing:inherit;word-spacing:inherit}:where(input[type=file])::-webkit-file-upload-button{color:inherit;font:inherit;font-size:inherit;letter-spacing:inherit;word-spacing:inherit}:where(input[type=file])::file-selector-button{color:inherit;font:inherit;font-size:inherit;letter-spacing:inherit;word-spacing:inherit}:where(select,textarea){field-sizing:content}:where(textarea){resize:vertical}@supports (resize:block){:where(textarea){resize:block}}:where(textarea:not([rows])){min-block-size:10em}:where(a[href],area,button,input:not(:-webkit-any([type=text],[type=email],[type=file],[type=number],[type=password],[type=""],[type=tel],[type=url])),label[for],select,summary,[role=button],[onclick],[tabindex]:not([tabindex*=\-])){cursor:pointer}:where(a[href],area,button,input:not(:is([type=text],[type=email],[type=file],[type=number],[type=password],[type=""],[type=tel],[type=url])),label[for],select,summary,[role=button],[onclick],[tabindex]:not([tabindex*=\-])){cursor:pointer}:where(input[type=file])::-webkit-file-upload-button{cursor:pointer}:where(input[type=file])::file-selector-button{cursor:pointer}:where(a[href],area,button,input,label[for],select,summary,textarea,[role=button],[onclick],[tabindex]:not([tabindex*=\-])){touch-action:manipulation;-webkit-tap-highlight-color:transparent}:where(button,button[type],input[type=button],input[type=image] input[type=submit],input[type=reset]){-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}:where(input[type=file])::-webkit-file-upload-button{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}:where(input[type=file])::file-selector-button{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}:where(button,button[type],input[type=button],input[type=image],input[type=submit],input[type=reset])[disabled]{cursor:not-allowed}:where(input[type=file][disabled])::-webkit-file-upload-button{cursor:not-allowed}:where(input[type=file][disabled])::file-selector-button{cursor:not-allowed} \ No newline at end of file diff --git a/package.json b/package.json index 8798652..936e478 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@microflash/preset", - "version": "4.0.0", + "version": "4.0.1", "description": "A modern CSS preset", "keywords": [ "css", @@ -29,7 +29,7 @@ "lightningcss-cli": "^1.25.1", "sass": "^1.77.4" }, - "packageManager": "pnpm@9.1.4", + "packageManager": "pnpm@9.2.0", "browserslist": [ "defaults" ] diff --git a/src/preset.css b/src/preset.css index 8ed0bcf..9973c1a 100644 --- a/src/preset.css +++ b/src/preset.css @@ -1,4 +1,4 @@ -/*! Preset v4.0.0 | MIT License | https://github.com/Microflash/preset */ +/*! Preset v4.0.1 | MIT License | https://github.com/Microflash/preset */ *, ::before, ::after { box-sizing: border-box; } @@ -15,7 +15,6 @@ :where(html) { block-size: 100%; text-size-adjust: 100%; - hanging-punctuation: first last; } @media (prefers-reduced-motion: no-preference), (update: fast) { :where(html):focus-within { @@ -29,6 +28,10 @@ scroll-padding-block-start: var(--preset-scroll-padding, 3rem); } } +:where(:not(input, textarea)) { + hanging-punctuation: first last; +} + :where(body) { min-block-size: 100%; tab-size: var(--preset-tab-size, 2); diff --git a/src/preset.scss b/src/preset.scss index 34d3433..68bc9a7 100644 --- a/src/preset.scss +++ b/src/preset.scss @@ -1,4 +1,4 @@ -/*! Preset v4.0.0 | MIT License | https://github.com/Microflash/preset */ +/*! Preset v4.0.1 | MIT License | https://github.com/Microflash/preset */ // sets the default value of `box-sizing` from `content-box` to `border-box` // so that `inline-size` is not affected by `padding` or `border` @@ -25,8 +25,6 @@ block-size: 100%; // prevents adjustments of `font-size` after orientation changes text-size-adjust: 100%; - // keeps hanging punctuations outside the line box (supported in Safari for now) - hanging-punctuation: first last; // enables smooth scrolling when reduced-motion is unspecified // opt-out the e-readers which may have low refresh rates using `update: fast` @@ -46,6 +44,12 @@ } } +// keeps hanging punctuation outside the line box (supported in Safari for now) +// except for `input` and `textarea` where they should be visible and inside the line box +:where(:not(input, textarea)) { + hanging-punctuation: first last; +} + :where(body) { // allows percentage based `block-size` for the children of body min-block-size: 100%;