@tailwindcss/forms - npm Package Compare versions

Comparing version 0.0.0-insiders.203d454 to 0.0.0-insiders.255476c

CHANGELOG.md

@@ -12,2 +12,51 @@ # Changelog
 
+- Fallback to static chevron color if theme is using variables ([#167](https://github.com/tailwindlabs/tailwindcss-forms/pull/167))
+
+## [0.5.8] - 2024-08-28
+
+### Fixed
+
+- Support installing with alpha versions of Tailwind CSS v4 ([#163](https://github.com/tailwindlabs/tailwindcss-forms/pull/163))
+
+## [0.5.7] - 2023-11-10
+
+### Fixed
+
+- Use normal `checkbox` and `radio` appearance in `forced-colors` mode ([#152](https://github.com/tailwindlabs/tailwindcss-forms/pull/152))
+
+## [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))
+
+## [0.5.2] - 2022-05-18
+
+### Added
+
+- Add TypeScript type declarations ([#118](https://github.com/tailwindlabs/tailwindcss-forms/pull/118))
+
+## [0.5.1] - 2022-05-03
+
+### Fixed
+
 - Remove duplicate `outline` property ([#116](https://github.com/tailwindlabs/tailwindcss-forms/pull/116))
@@ -111,3 +160,11 @@ - Fix autoprefixer warning about `color-adjust` ([#115](https://github.com/tailwindlabs/tailwindcss-forms/pull/115))
 
-[unreleased]: https://github.com/tailwindlabs/tailwindcss-forms/compare/v0.5.0...HEAD
+[unreleased]: https://github.com/tailwindlabs/tailwindcss-forms/compare/v0.5.8...HEAD
+[0.5.8]: https://github.com/tailwindlabs/tailwindcss-forms/compare/v0.5.7...v0.5.8
+[0.5.7]: https://github.com/tailwindlabs/tailwindcss-forms/compare/v0.5.6...v0.5.7
+[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
+[0.5.1]: https://github.com/tailwindlabs/tailwindcss-forms/compare/v0.5.0...v0.5.1
 [0.5.0]: https://github.com/tailwindlabs/tailwindcss-forms/compare/v0.4.1...v0.5.0
@@ -114,0 +171,0 @@ [0.4.1]: https://github.com/tailwindlabs/tailwindcss-forms/compare/v0.4.0...v0.4.1

package.json

 {
   "name": "@tailwindcss/forms",
-  "version": "0.0.0-insiders.203d454",
+  "version": "0.0.0-insiders.255476c",
   "main": "src/index.js",
+  "types": "src/index.d.ts",
   "license": "MIT",
@@ -20,6 +21,9 @@ "repository": "https://github.com/tailwindlabs/tailwindcss-forms",
     "watch": "npm run build -- -w",
-    "build": "tailwindcss -o dist/tailwind.css"
+    "build": "tailwindcss -o dist/tailwind.css",
+    "test": "exit 0",
+    "release-channel": "node ./scripts/release-channel.js",
+    "release-notes": "node ./scripts/release-notes.js"
   },
   "peerDependencies": {
-    "tailwindcss": ">=3.0.0 || >= 3.0.0-alpha.1"
+    "tailwindcss": ">=3.0.0 || >= 3.0.0-alpha.1 || >= 4.0.0-alpha.20"
   },
@@ -26,0 +30,0 @@ "devDependencies": {

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,4 +8,18 @@ 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 }) {
   return function ({ addBase, addComponents, theme }) {
+    function resolveChevronColor(color, fallback) {
+      let resolved = theme(color)
+
+      if (!resolved || resolved.includes('var(')) {
+        return fallback
+      }
+
+      return resolved.replace('<alpha-value>', '1')
+    }
+
     const strategy = options.strategy === undefined ? ['base', 'class'] : [options.strategy]
@@ -17,2 +31,3 @@
           "[type='text']",
+          'input:where(:not([type]))',
           "[type='email']",
@@ -37,3 +52,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 +72,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 +91,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 +114,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,3 +172,3 @@ // 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(
+            `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20"><path stroke="${resolveChevronColor(
               'colors.gray.500',
@@ -140,4 +186,4 @@ colors.gray[500]
       {
-        base: ['[multiple]'],
-        class: null,
+        base: ['[multiple]', '[size]:where(select:not([size="1"]))'],
+        class: ['.form-select:where([size]:not([size="1"]))'],
         styles: {
@@ -166,5 +212,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 +246,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)`,
@@ -222,2 +274,6 @@ '--tw-ring-shadow': `var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color)`,
           )}")`,
+
+          '@media (forced-colors: active) ': {
+            appearance: 'auto',
+          },
         },
@@ -232,2 +288,6 @@ },
           )}")`,
+
+          '@media (forced-colors: active) ': {
+            appearance: 'auto',
+          },
         },
@@ -265,2 +325,6 @@ },
           'background-repeat': `no-repeat`,
+
+          '@media (forced-colors: active) ': {
+            appearance: 'auto',
+          },
         },
@@ -293,6 +357,3 @@ },
         styles: {
-          outline: [
-            `1px solid ButtonText`,
-            `1px auto -webkit-focus-ring-color`
-          ],
+          outline: [`1px solid ButtonText`, `1px auto -webkit-focus-ring-color`],
         },
@@ -302,9 +363,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)
 
@@ -311,0 +373,0 @@ if (strategy.includes('base')) {

tailwind.config.js

 module.exports = {
   content: ['./index.html', './kitchen-sink.html'],
   theme: {
-    extend: {},
+    extend: {
+      //
+    },
   },
   plugins: [require('./src')],
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Filesystem access

Supply chain risk

Accesses the file system, and could potentially read sensitive data.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

53953

increased by11.25%

Number of package files

16

increased by45.45%

Lines of code

401

increased by31.05%

Worsened metrics

Number of lines in readme file

123

decreased by-1.6%

Number of low supply chain risk alerts

4

increased by300%

No dependency changes