Skip to content

Instantly share code, notes, and snippets.

@Phixyn

Phixyn/@tailwindcss+forms+0.2.1.patch Secret

Last active March 7, 2021 16:00
Show Gist options
  • Save Phixyn/7a2779771b0304be23b9f82e144aedb1 to your computer and use it in GitHub Desktop.
Save Phixyn/7a2779771b0304be23b9f82e144aedb1 to your computer and use it in GitHub Desktop.
Download ZIP
Patch for TailwindCSS Forms plugin that applies this PR: https://github.com/tailwindlabs/tailwindcss-forms/pull/39
Raw
@tailwindcss+forms+0.2.1.patch
diff --git a/node_modules/@tailwindcss/forms/src/index.js b/node_modules/@tailwindcss/forms/src/index.js
index 5adac22..b92c425 100644
--- a/node_modules/@tailwindcss/forms/src/index.js
+++ b/node_modules/@tailwindcss/forms/src/index.js
@@ -4,199 +4,196 @@ const defaultTheme = require('tailwindcss/defaultTheme')
const [baseFontSize, { lineHeight: baseLineHeight }] = defaultTheme.fontSize.base
const { colors, spacing, borderWidth, borderRadius, outline } = defaultTheme
-const forms = plugin(function ({ addBase, theme }) {
- addBase({
- [`
- [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': theme('colors.gray.500', colors.gray[500]),
- 'border-width': borderWidth['DEFAULT'],
- 'border-radius': borderRadius.none,
- 'padding-top': spacing[2],
- 'padding-right': spacing[3],
- 'padding-bottom': spacing[2],
- 'padding-left': spacing[3],
- 'font-size': baseFontSize,
- 'line-height': baseLineHeight,
- '&:focus': {
+const forms = plugin.withOptions(function (options) {
+ return function ({ addBase, theme }) {
+ const swap = function (initial, classes) {
+ return options && options.useFormClasses === true ? classes : initial
+ }
+
+ const baseSelectors =
+ (options && options.useFormClasses) === true
+ ? '.form-input, .form-textarea, .form-select'
+ : "[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"
+
+ addBase({
+ [baseSelectors]: {
+ appearance: 'none',
+ 'background-color': '#fff',
+ 'border-color': theme('colors.gray.500', colors.gray[500]),
+ 'border-width': borderWidth['DEFAULT'],
+ 'border-radius': borderRadius.none,
+ 'padding-top': spacing[2],
+ 'padding-right': spacing[3],
+ 'padding-bottom': spacing[2],
+ 'padding-left': spacing[3],
+ 'font-size': baseFontSize,
+ 'line-height': baseLineHeight,
+ '&:focus': {
+ outline: outline.none[0],
+ 'outline-offset': outline.none[1],
+ '--tw-ring-inset': 'var(--tw-empty,/*!*/ /*!*/)',
+ '--tw-ring-offset-width': '0px',
+ '--tw-ring-offset-color': '#fff',
+ '--tw-ring-color': theme('colors.blue.600', colors.blue[600]),
+ '--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, 0 0 #0000)`,
+ 'border-color': theme('colors.blue.600', colors.blue[600]),
+ },
+ },
+
+ [swap(
+ `input::placeholder, textarea::placeholder`,
+ `.form-input::placeholder .form-textarea::placeholder`
+ )]: {
+ color: theme('colors.gray.500', colors.gray[500]),
+ opacity: '1',
+ },
+
+ [swap(
+ `::-webkit-datetime-edit-fields-wrapper`,
+ `.form-input::-webkit-datetime-edit-fields-wrapper`
+ )]: {
+ padding: '0',
+ },
+
+ // Unfortunate hack until https://bugs.webkit.org/show_bug.cgi?id=198959 is fixed.
+ // This sucks because users can't change line-height with a utility on date inputs now.
+ // Reference: https://github.com/twbs/bootstrap/pull/31993
+ [swap(`::-webkit-date-and-time-value`, `.form-input::-webkit-date-and-time-value`)]: {
+ 'min-height': '1.5em',
+ },
+
+ [swap(`select`, `.form-select`)]: {
+ '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]
+ )}" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6 8l4 4 4-4"/></svg>`
+ )}")`,
+ 'background-position': `right ${spacing[2]} center`,
+ 'background-repeat': `no-repeat`,
+ 'background-size': `1.5em 1.5em`,
+ 'padding-right': spacing[10],
+ 'color-adjust': `exact`,
+ },
+
+ [swap(`[multiple]`, `.form-select[multiple], .form-input[multiple]`)]: {
+ 'background-image': 'initial',
+ 'background-position': 'initial',
+ 'background-repeat': 'unset',
+ 'background-size': 'initial',
+ 'padding-right': spacing[3],
+ 'color-adjust': 'unset',
+ },
+
+ [swap(`[type='checkbox'], [type='radio']`, `.form-checkbox, .form-radio`)]: {
+ appearance: 'none',
+ padding: '0',
+ 'color-adjust': 'exact',
+ display: 'inline-block',
+ 'vertical-align': 'middle',
+ 'background-origin': 'border-box',
+ 'user-select': 'none',
+ 'flex-shrink': '0',
+ height: spacing[4],
+ width: spacing[4],
+ color: theme('colors.blue.600', colors.blue[600]),
+ 'background-color': '#fff',
+ 'border-color': theme('colors.gray.500', colors.gray[500]),
+ 'border-width': borderWidth['DEFAULT'],
+ },
+
+ [swap(`[type='checkbox']`, `.form-checkbox`)]: {
+ 'border-radius': borderRadius['none'],
+ },
+
+ [swap(`[type='radio']`, `.form-radio`)]: {
+ 'border-radius': '100%',
+ },
+
+ [swap(
+ `[type='checkbox']:focus, [type='radio']:focus`,
+ `.form-checkbox:focus, .form-radio:focus`
+ )]: {
outline: outline.none[0],
'outline-offset': outline.none[1],
'--tw-ring-inset': 'var(--tw-empty,/*!*/ /*!*/)',
- '--tw-ring-offset-width': '0px',
+ '--tw-ring-offset-width': '2px',
'--tw-ring-offset-color': '#fff',
'--tw-ring-color': theme('colors.blue.600', colors.blue[600]),
'--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)`,
+ '--tw-ring-shadow': `var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color)`,
'box-shadow': `var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)`,
- 'border-color': theme('colors.blue.600', colors.blue[600]),
- },
- },
-
- 'input::placeholder, textarea::placeholder': {
- color: theme('colors.gray.500', colors.gray[500]),
- opacity: '1',
- },
-
- '::-webkit-datetime-edit-fields-wrapper': {
- padding: '0',
- },
-
- // Unfortunate hack until https://bugs.webkit.org/show_bug.cgi?id=198959 is fixed.
- // This sucks because users can't change line-height with a utility on date inputs now.
- // Reference: https://github.com/twbs/bootstrap/pull/31993
- '::-webkit-date-and-time-value': {
- 'min-height': '1.5em',
- },
-
- select: {
- '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]
- )}" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6 8l4 4 4-4"/></svg>`
- )}")`,
- 'background-position': `right ${spacing[2]} center`,
- 'background-repeat': `no-repeat`,
- 'background-size': `1.5em 1.5em`,
- 'padding-right': spacing[10],
- 'color-adjust': `exact`,
- },
-
- '[multiple]': {
- 'background-image': 'initial',
- 'background-position': 'initial',
- 'background-repeat': 'unset',
- 'background-size': 'initial',
- 'padding-right': spacing[3],
- 'color-adjust': 'unset',
- },
-
- [`
- [type='checkbox'],
- [type='radio']
- `]: {
- appearance: 'none',
- padding: '0',
- 'color-adjust': 'exact',
- display: 'inline-block',
- 'vertical-align': 'middle',
- 'background-origin': 'border-box',
- 'user-select': 'none',
- 'flex-shrink': '0',
- height: spacing[4],
- width: spacing[4],
- color: theme('colors.blue.600', colors.blue[600]),
- 'background-color': '#fff',
- 'border-color': theme('colors.gray.500', colors.gray[500]),
- 'border-width': borderWidth['DEFAULT'],
- },
-
- [`[type='checkbox']`]: {
- 'border-radius': borderRadius['none'],
- },
-
- [`[type='radio']`]: {
- 'border-radius': '100%',
- },
-
- [`
- [type='checkbox']:focus,
- [type='radio']:focus
- `]: {
- outline: outline.none[0],
- 'outline-offset': outline.none[1],
- '--tw-ring-inset': 'var(--tw-empty,/*!*/ /*!*/)',
- '--tw-ring-offset-width': '2px',
- '--tw-ring-offset-color': '#fff',
- '--tw-ring-color': theme('colors.blue.600', colors.blue[600]),
- '--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(2px + var(--tw-ring-offset-width)) var(--tw-ring-color)`,
- 'box-shadow': `var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)`,
- },
-
- [`
- [type='checkbox']:checked,
- [type='radio']:checked
- `]: {
- 'border-color': `transparent`,
- 'background-color': `currentColor`,
- 'background-size': `100% 100%`,
- 'background-position': `center`,
- 'background-repeat': `no-repeat`,
- },
-
- [`[type='checkbox']:checked`]: {
- 'background-image': `url("${svgToDataUri(
- `<svg viewBox="0 0 16 16" fill="white" xmlns="http://www.w3.org/2000/svg"><path d="M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z"/></svg>`
- )}")`,
- },
-
- [`[type='radio']:checked`]: {
- 'background-image': `url("${svgToDataUri(
- `<svg viewBox="0 0 16 16" fill="white" xmlns="http://www.w3.org/2000/svg"><circle cx="8" cy="8" r="3"/></svg>`
- )}")`,
- },
-
- [`
- [type='checkbox']:checked:hover,
- [type='checkbox']:checked:focus,
- [type='radio']:checked:hover,
- [type='radio']:checked:focus
- `]: {
- 'border-color': 'transparent',
- 'background-color': 'currentColor',
- },
-
- [`[type='checkbox']:indeterminate`]: {
- 'background-image': `url("${svgToDataUri(
- `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path stroke="white" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8h8"/></svg>`
- )}")`,
- 'border-color': `transparent`,
- 'background-color': `currentColor`,
- 'background-size': `100% 100%`,
- 'background-position': `center`,
- 'background-repeat': `no-repeat`,
- },
-
- [`
- [type='checkbox']:indeterminate:hover,
- [type='checkbox']:indeterminate:focus
- `]: {
- 'border-color': 'transparent',
- 'background-color': 'currentColor',
- },
-
- [`[type='file']`]: {
- background: 'unset',
- 'border-color': 'inherit',
- 'border-width': '0',
- 'border-radius': '0',
- padding: '0',
- 'font-size': 'unset',
- 'line-height': 'inherit',
- },
-
- [`[type='file']:focus`]: {
- outline: `1px solid ButtonText`,
- outline: `1px auto -webkit-focus-ring-color`,
- },
- })
+ 'border-color': theme('colors.gray.500', colors.gray[500]),
+ },
+
+ [swap(
+ `[type='checkbox']:checked, [type='radio']:checked`,
+ `.form-checkbox:checked, .form-radio:checked`
+ )]: {
+ 'border-color': `transparent`,
+ 'background-color': `currentColor`,
+ 'background-size': `100% 100%`,
+ 'background-position': `center`,
+ 'background-repeat': `no-repeat`,
+ },
+
+ [swap(`[type='checkbox']:checked`, `.form-checkbox:checked`)]: {
+ 'background-image': `url("${svgToDataUri(
+ `<svg viewBox="0 0 16 16" fill="white" xmlns="http://www.w3.org/2000/svg"><path d="M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z"/></svg>`
+ )}")`,
+ },
+
+ [swap(`[type='radio']:checked`, `.form-radio:checked`)]: {
+ 'background-image': `url("${svgToDataUri(
+ `<svg viewBox="0 0 16 16" fill="white" xmlns="http://www.w3.org/2000/svg"><circle cx="8" cy="8" r="3"/></svg>`
+ )}")`,
+ },
+
+ [swap(
+ `[type='checkbox']:checked:hover, [type='checkbox']:checked:focus, [type='radio']:checked:hover, [type='radio']:checked:focus`,
+ `.form-checkbox:checked:hover, .form-checkbox:checked:focus, .form-radio:checked:hover, .form-radio:check:focus`
+ )]: {
+ 'border-color': 'transparent',
+ 'background-color': 'currentColor',
+ },
+
+ [swap(`[type='checkbox']:indeterminate`, `.form-checkbox:indeterminate`)]: {
+ 'background-image': `url("${svgToDataUri(
+ `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path stroke="white" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8h8"/></svg>`
+ )}")`,
+ 'border-color': `transparent`,
+ 'background-color': `currentColor`,
+ 'background-size': `100% 100%`,
+ 'background-position': `center`,
+ 'background-repeat': `no-repeat`,
+ },
+
+ [swap(
+ `[type='checkbox']:indeterminate:hover, [type='checkbox']:indeterminate:focus`,
+ `.form-checkbox:indeterminate:hover, .form-checkbox:indeterminate:focus`
+ )]: {
+ 'border-color': 'transparent',
+ 'background-color': 'currentColor',
+ },
+
+ [swap(`[type='file']`, `.form-input[type='file']`)]: {
+ background: 'unset',
+ 'border-color': 'inherit',
+ 'border-width': '0',
+ 'border-radius': '0',
+ padding: '0',
+ 'font-size': 'unset',
+ 'line-height': 'inherit',
+ },
+
+ [swap(`[type='file']:focus`, `.form-input[type='file']:focus`)]: {
+ outline: `1px solid ButtonText`,
+ outline: `1px auto -webkit-focus-ring-color`,
+ },
+ })
+ }
})
module.exports = forms
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment