@tailwindcss/forms - npm Package Compare versions

Comparing version 0.0.0-insiders.ac7f9a7 to 0.0.0-insiders.ad3f056

CHANGELOG.md

@@ -10,4 +10,27 @@ # Changelog
 
+- Nothing yet!
+
+## [0.5.6] - 2023-08-28
+
 ### Fixed
 
+- Fix date time bottom spacing on MacOS Safari ([#146](https://github.com/tailwindlabs/tailwindcss-forms/pull/146))
+
+## [0.5.5] - 2023-08-22
+
+### Fixed
+
+- Fix text alignment on date and time inputs on iOS ([#144](https://github.com/tailwindlabs/tailwindcss-forms/pull/144))
+
+## [0.5.4] - 2023-07-13
+
+### Fixed
+
+- Remove chevron for selects with a non-default size ([#137](https://github.com/tailwindlabs/tailwindcss-forms/pull/137))
+- Allow for <input> without `type` ([#141](https://github.com/tailwindlabs/tailwindcss-forms/pull/141))
+
+## [0.5.3] - 2022-09-02
+
+### Fixed
+
 - Update TypeScript types ([#126](https://github.com/tailwindlabs/tailwindcss-forms/pull/126))
@@ -123,3 +146,7 @@
 
-[unreleased]: https://github.com/tailwindlabs/tailwindcss-forms/compare/v0.5.2...HEAD
+[unreleased]: https://github.com/tailwindlabs/tailwindcss-forms/compare/v0.5.6...HEAD
+[0.5.6]: https://github.com/tailwindlabs/tailwindcss-forms/compare/v0.5.5...v0.5.6
+[0.5.5]: https://github.com/tailwindlabs/tailwindcss-forms/compare/v0.5.4...v0.5.5
+[0.5.4]: https://github.com/tailwindlabs/tailwindcss-forms/compare/v0.5.3...v0.5.4
+[0.5.3]: https://github.com/tailwindlabs/tailwindcss-forms/compare/v0.5.2...v0.5.3
 [0.5.2]: https://github.com/tailwindlabs/tailwindcss-forms/compare/v0.5.1...v0.5.2
@@ -126,0 +153,0 @@ [0.5.1]: https://github.com/tailwindlabs/tailwindcss-forms/compare/v0.5.0...v0.5.1

package.json

 {
   "name": "@tailwindcss/forms",
-  "version": "0.0.0-insiders.ac7f9a7",
+  "version": "0.0.0-insiders.ad3f056",
   "main": "src/index.js",
@@ -5,0 +5,0 @@ "types": "src/index.d.ts",

README.md

@@ -54,4 +54,2 @@ # @tailwindcss/forms
 
-**Note that for text inputs, you must add the `type="text"` attribute for these styles to take effect.** This is a necessary trade-off to avoid relying on the overly greedy `input` selector and unintentionally styling elements we don't have solutions for yet, like `input[type="range"]` for example.
-
 Every element has been normalized/reset to a simple visually consistent style that is easy to customize with utilities, even elements like `<select>` or `<input type="checkbox">` that normally need to be reset with `appearance: none` and customized using custom CSS:
@@ -58,0 +56,0 @@

src/index.js

@@ -8,2 +8,6 @@ const svgToDataUri = require('mini-svg-data-uri')
 
+function resolveColor(color, opacityVariableName) {
+  return color.replace('<alpha-value>', `var(${opacityVariableName}, 1)`)
+}
+
 const forms = plugin.withOptions(function (options = { strategy: undefined }) {
@@ -17,2 +21,3 @@ return function ({ addBase, addComponents, theme }) {
           "[type='text']",
+          'input:where(:not([type]))',
           "[type='email']",
@@ -37,3 +42,6 @@ "[type='url']",
           'background-color': '#fff',
-          'border-color': theme('colors.gray.500', colors.gray[500]),
+          'border-color': resolveColor(
+            theme('colors.gray.500', colors.gray[500]),
+            '--tw-border-opacity'
+          ),
           'border-width': borderWidth['DEFAULT'],
@@ -54,7 +62,13 @@ 'border-radius': borderRadius.none,
             '--tw-ring-offset-color': '#fff',
-            '--tw-ring-color': theme('colors.blue.600', colors.blue[600]),
+            '--tw-ring-color': resolveColor(
+              theme('colors.blue.600', colors.blue[600]),
+              '--tw-ring-opacity'
+            ),
             '--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': theme('colors.blue.600', colors.blue[600]),
+            'border-color': resolveColor(
+              theme('colors.blue.600', colors.blue[600]),
+              '--tw-border-opacity'
+            ),
           },
@@ -67,3 +81,3 @@ },
         styles: {
-          color: theme('colors.gray.500', colors.gray[500]),
+          color: resolveColor(theme('colors.gray.500', colors.gray[500]), '--tw-text-opacity'),
           opacity: '1',
@@ -90,2 +104,24 @@ },
       {
+        // In Safari on iOS date and time inputs are centered instead of left-aligned and can't be
+        // changed with `text-align` utilities on the input by default. Resetting this to `inherit`
+        // makes them left-aligned by default and makes it possible to override the alignment with
+        // utility classes without using an arbitrary variant to target the pseudo-elements.
+        base: ['::-webkit-date-and-time-value'],
+        class: ['.form-input::-webkit-date-and-time-value'],
+        styles: {
+          'text-align': 'inherit',
+        },
+      },
+      {
+        // In Safari on macOS date time inputs that are set to `display: block` have unexpected
+        // extra bottom spacing. This can be corrected by setting the `::-webkit-datetime-edit`
+        // pseudo-element to `display: inline-flex`, instead of the browser default of
+        // `display: inline-block`.
+        base: ['::-webkit-datetime-edit'],
+        class: ['.form-input::-webkit-datetime-edit'],
+        styles: {
+          display: 'inline-flex',
+        },
+      },
+      {
         // In Safari on macOS date time inputs are 4px taller than normal inputs
@@ -126,5 +162,5 @@ // This is because there is extra padding on the datetime-edit and datetime-edit-{part}-field pseudo elements
           'background-image': `url("${svgToDataUri(
-            `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20"><path stroke="${theme(
-              'colors.gray.500',
-              colors.gray[500]
+            `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20"><path stroke="${resolveColor(
+              theme('colors.gray.500', colors.gray[500]),
+              '--tw-stroke-opacity'
             )}" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6 8l4 4 4-4"/></svg>`
@@ -140,4 +176,4 @@ )}")`,
       {
-        base: ['[multiple]'],
-        class: null,
+        base: ['[multiple]', '[size]:where(select:not([size="1"]))'],
+        class: ['.form-select:where([size]:not([size="1"]))'],
         styles: {
@@ -166,5 +202,8 @@ 'background-image': 'initial',
           width: spacing[4],
-          color: theme('colors.blue.600', colors.blue[600]),
+          color: resolveColor(theme('colors.blue.600', colors.blue[600]), '--tw-text-opacity'),
           'background-color': '#fff',
-          'border-color': theme('colors.gray.500', colors.gray[500]),
+          'border-color': resolveColor(
+            theme('colors.gray.500', colors.gray[500]),
+            '--tw-border-opacity'
+          ),
           'border-width': borderWidth['DEFAULT'],
@@ -197,3 +236,6 @@ '--tw-shadow': '0 0 #0000',
           '--tw-ring-offset-color': '#fff',
-          '--tw-ring-color': theme('colors.blue.600', colors.blue[600]),
+          '--tw-ring-color': resolveColor(
+            theme('colors.blue.600', colors.blue[600]),
+            '--tw-ring-opacity'
+          ),
           '--tw-ring-offset-shadow': `var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)`,
@@ -290,6 +332,3 @@ '--tw-ring-shadow': `var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color)`,
         styles: {
-          outline: [
-            `1px solid ButtonText`,
-            `1px auto -webkit-focus-ring-color`
-          ],
+          outline: [`1px solid ButtonText`, `1px auto -webkit-focus-ring-color`],
         },
@@ -299,9 +338,10 @@ },
 
-    const getStrategyRules = (strategy) => rules
-      .map((rule) => {
-        if (rule[strategy] === null) return null
+    const getStrategyRules = (strategy) =>
+      rules
+        .map((rule) => {
+          if (rule[strategy] === null) return null
 
-        return { [rule[strategy]]: rule.styles }
-      })
-      .filter(Boolean)
+          return { [rule[strategy]]: rule.styles }
+        })
+        .filter(Boolean)
 
@@ -308,0 +348,0 @@ if (strategy.includes('base')) {

No alert changes

Improved metrics

Total package byte prevSize

49663

increased by1.02%

Lines of code

352

increased by12.46%

Worsened metrics

Number of lines in readme file

123

decreased by-1.6%

No dependency changes