fix: remove default [hidden] style in preflight

tw-in-js · Oct 3, 2022 · eb01603 · eb01603
1 parent ea9684e
commit eb01603
Show file tree

Hide file tree

Showing 4 changed files with 5 additions and 8 deletions.
diff --git a/.changeset/new-badgers-pump.md b/.changeset/new-badgers-pump.md
@@ -0,0 +1,5 @@
+---
+'@twind/tailwind': patch
+---
+
+remove default `[hidden]` style in preflight
diff --git a/packages/preset-tailwind-forms/src/preset-tailwind-forms.test.ts b/packages/preset-tailwind-forms/src/preset-tailwind-forms.test.ts
@@ -86,7 +86,6 @@ test('using default strategy (base) and tailwind preflight', () => {
     ':disabled{cursor:default}',
     'img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}',
     'img,video{max-width:100%;height:auto}',
-    '[hidden]{display:none}',
     "[type='text'],[type='email'],[type='url'],[type='password'],[type='number'],[type='date'],[type='datetime-local'],[type='month'],[type='search'],[type='tel'],[type='time'],[type='week'],[multiple],textarea,select{appearance:none;background-color:#fff;border-color:rgba(107,114,128,1);border-width:1px;border-radius:0px;padding-top:0.5rem;padding-right:0.75rem;padding-bottom:0.5rem;padding-left:0.75rem;font-size:1rem;line-height:1.5rem;--tw-shadow:0 0 #0000}",
     "[type='text']:focus,[type='email']:focus,[type='url']:focus,[type='password']:focus,[type='number']:focus,[type='date']:focus,[type='datetime-local']:focus,[type='month']:focus,[type='search']:focus,[type='tel']:focus,[type='time']:focus,[type='week']:focus,[multiple]:focus,textarea:focus,select:focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-inset:var(--tw-empty,/*!*/ /*!*/);--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(37,99,235,1);--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);border-color:rgba(37,99,235,1)}",
     'input::placeholder,textarea::placeholder{color:rgba(107,114,128,1);opacity:1}',

diff --git a/packages/preset-tailwind/src/preflight.test.ts b/packages/preset-tailwind/src/preflight.test.ts
@@ -53,7 +53,6 @@ test('preflight on first inject', () => {
     ':disabled{cursor:default}',
     'img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}',
     'img,video{max-width:100%;height:auto}',
-    '[hidden]{display:none}',
     '.underline{text-decoration-line:underline}',
   ])
 })
@@ -128,7 +127,6 @@ test('custom preflight', () => {
     ':disabled{cursor:default}',
     'img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}',
     'img,video{max-width:100%;height:auto}',
-    '[hidden]{display:none}',
     'html,body,#__next{font-size:14px}',
     'html,body,#__next{height:100vh;width:100vw;padding:0px;margin:0px;overflow-x:hidden;overflow-y:auto;--tw-bg-opacity:1;background-color:rgba(243,244,246,var(--tw-bg-opacity))}',
     'p{--tw-shadow:0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}',

diff --git a/packages/preset-tailwind/src/preflight.ts b/packages/preset-tailwind/src/preflight.ts
@@ -228,11 +228,6 @@ const preflight: Preflight = {
     Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
     */
   'img,video': { maxWidth: '100%', height: 'auto' },
-
-  /*
-    Ensure the default browser behavior of the `hidden` attribute.
-    */
-  '[hidden]': { display: 'none' },
 }
 
 export default preflight