@tailwindcss/forms
Advanced tools
Comparing version 0.0.0-insiders.73d5b01 to 0.0.0-insiders.781de1d
@@ -10,5 +10,40 @@ # Changelog | ||
- Nothing yet! | ||
## [0.5.9] - 2024-09-05 | ||
### Fixed | ||
- 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)) | ||
@@ -129,3 +164,9 @@ ## [0.5.3] - 2022-09-02 | ||
[unreleased]: https://github.com/tailwindlabs/tailwindcss-forms/compare/v0.5.3...HEAD | ||
[unreleased]: https://github.com/tailwindlabs/tailwindcss-forms/compare/v0.5.9...HEAD | ||
[0.5.9]: https://github.com/tailwindlabs/tailwindcss-forms/compare/v0.5.8...v0.5.9 | ||
[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 | ||
@@ -132,0 +173,0 @@ [0.5.2]: https://github.com/tailwindlabs/tailwindcss-forms/compare/v0.5.1...v0.5.2 |
{ | ||
"name": "@tailwindcss/forms", | ||
"version": "0.0.0-insiders.73d5b01", | ||
"version": "0.0.0-insiders.781de1d", | ||
"main": "src/index.js", | ||
@@ -15,3 +15,6 @@ "types": "src/index.d.ts", | ||
"singleQuote": true, | ||
"trailingComma": "es5" | ||
"trailingComma": "es5", | ||
"plugins": [ | ||
"prettier-plugin-tailwindcss" | ||
] | ||
}, | ||
@@ -22,6 +25,10 @@ "scripts": { | ||
"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", | ||
"format": "prettier . --write" | ||
}, | ||
"peerDependencies": { | ||
"tailwindcss": ">=3.0.0 || >= 3.0.0-alpha.1" | ||
"tailwindcss": ">=3.0.0 || >= 3.0.0-alpha.1 || >= 4.0.0-alpha.20" | ||
}, | ||
@@ -33,2 +40,4 @@ "devDependencies": { | ||
"postcss": "^8.4.13", | ||
"prettier": "^3.3.3", | ||
"prettier-plugin-tailwindcss": "^0.6.8", | ||
"tailwindcss": "^3.0.24" | ||
@@ -35,0 +44,0 @@ }, |
@@ -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: | ||
@@ -61,3 +59,3 @@ | ||
<!-- You can actually customize padding on a select element now: --> | ||
<select class="px-4 py-3 rounded-full"> | ||
<select class="rounded-full px-4 py-3"> | ||
<!-- ... --> | ||
@@ -77,5 +75,5 @@ </select> | ||
```html | ||
<input type="email" class="form-input px-4 py-3 rounded-full"> | ||
<input type="email" class="form-input rounded-full px-4 py-3" /> | ||
<select class="form-select px-4 py-3 rounded-full"> | ||
<select class="form-select rounded-full px-4 py-3"> | ||
<!-- ... --> | ||
@@ -82,0 +80,0 @@ </select> |
@@ -1,2 +0,4 @@ | ||
declare function plugin(options?: Partial<{ strategy: 'base' | 'class' }>): { handler: () => void } | ||
declare function plugin(options?: Partial<{ strategy: 'base' | 'class' }>): { | ||
handler: () => void | ||
} | ||
@@ -3,0 +5,0 @@ declare namespace plugin { |
@@ -14,2 +14,12 @@ const svgToDataUri = require('mini-svg-data-uri') | ||
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] | ||
@@ -21,2 +31,3 @@ | ||
"[type='text']", | ||
'input:where(:not([type]))', | ||
"[type='email']", | ||
@@ -100,2 +111,24 @@ "[type='url']", | ||
{ | ||
// 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 | ||
@@ -136,5 +169,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="${resolveColor( | ||
theme('colors.gray.500', colors.gray[500]), | ||
'--tw-stroke-opacity' | ||
`<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20"><path stroke="${resolveChevronColor( | ||
'colors.gray.500', | ||
colors.gray[500] | ||
)}" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6 8l4 4 4-4"/></svg>` | ||
@@ -235,2 +268,6 @@ )}")`, | ||
)}")`, | ||
'@media (forced-colors: active) ': { | ||
appearance: 'auto', | ||
}, | ||
}, | ||
@@ -245,2 +282,6 @@ }, | ||
)}")`, | ||
'@media (forced-colors: active) ': { | ||
appearance: 'auto', | ||
}, | ||
}, | ||
@@ -278,2 +319,6 @@ }, | ||
'background-repeat': `no-repeat`, | ||
'@media (forced-colors: active) ': { | ||
appearance: 'auto', | ||
}, | ||
}, | ||
@@ -306,6 +351,3 @@ }, | ||
styles: { | ||
outline: [ | ||
`1px solid ButtonText`, | ||
`1px auto -webkit-focus-ring-color` | ||
], | ||
outline: [`1px solid ButtonText`, `1px auto -webkit-focus-ring-color`], | ||
}, | ||
@@ -315,9 +357,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) | ||
@@ -324,0 +367,0 @@ if (strategy.includes('base')) { |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis 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 riskPackage accesses environment variables, which may be a sign of credential stuffing or data theft.
Found 1 instance in 1 package
Filesystem access
Supply chain riskAccesses the file system, and could potentially read sensitive data.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
54254
16
403
7
123
4