From c6d19fb6ecf1af3ec408f26873754551d12a7708 Mon Sep 17 00:00:00 2001 From: Chase Giunta Date: Fri, 29 Jan 2021 12:45:03 -0600 Subject: [PATCH 1/7] =?UTF-8?q?Add=20=E2=80=98useFormClasses=E2=80=99=20pl?= =?UTF-8?q?ugin=20option?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/index.js | 370 +++++++++++++++++++++++++-------------------------- 1 file changed, 183 insertions(+), 187 deletions(-) diff --git a/src/index.js b/src/index.js index dc22410..5fe9d81 100644 --- a/src/index.js +++ b/src/index.js @@ -4,200 +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.join(',')]: { + 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( + `` + )}")`, + '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( - `` - )}")`, - '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)`, - 'border-color': theme('colors.gray.500', colors.gray[500]), - }, - - [` - [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( - `` - )}")`, - }, - - [`[type='radio']:checked`]: { - 'background-image': `url("${svgToDataUri( - `` - )}")`, - }, - - [` - [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( - `` - )}")`, - '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( + `` + )}")`, + }, + + [swap(`[type='radio']:checked`, `.form-radio:checked`)]: { + 'background-image': `url("${svgToDataUri( + `` + )}")`, + }, + + [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( + `` + )}")`, + '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 From e84f83f144c2d1f5f6d522632016b97b0a0e5740 Mon Sep 17 00:00:00 2001 From: Chase Giunta Date: Fri, 29 Jan 2021 13:19:17 -0600 Subject: [PATCH 2/7] Fix leftover --- src/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/index.js b/src/index.js index 5fe9d81..b92c425 100644 --- a/src/index.js +++ b/src/index.js @@ -16,7 +16,7 @@ const forms = plugin.withOptions(function (options) { : "[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.join(',')]: { + [baseSelectors]: { appearance: 'none', 'background-color': '#fff', 'border-color': theme('colors.gray.500', colors.gray[500]), From b221e81eaec8889a9c0f352fd89cd0c2a46cfcfe Mon Sep 17 00:00:00 2001 From: Chase Giunta Date: Thu, 25 Mar 2021 09:09:36 -0500 Subject: [PATCH 3/7] Rename option to `strategy` with `base` & `class` options --- src/index.js | 17 ++++++++++------- 1 file changed, 10 insertions(+), 7 deletions(-) diff --git a/src/index.js b/src/index.js index 641101c..0a6ef7e 100644 --- a/src/index.js +++ b/src/index.js @@ -6,17 +6,20 @@ const { colors, spacing, borderWidth, borderRadius, outline } = defaultTheme const forms = plugin.withOptions(function (options) { return function ({ addBase, theme }) { - const swap = function (initial, classes) { - return options && options.useFormClasses === true ? classes : initial + const strategy = options && options.strategy === 'class' ? 'class' : 'base' + + const swap = function (baseSelectors, classSelectors) { + return strategy === 'class' ? classSelectors : baseSelectors } - 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" + const baseSelectors = { + class: '.form-input, .form-textarea, .form-select', + base: + "[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]: { + [baseSelectors[strategy]]: { appearance: 'none', 'background-color': '#fff', 'border-color': theme('colors.gray.500', colors.gray[500]), From 5ec6608c6dc7a6326d6cd5e7e2a1cb4ae3965cb8 Mon Sep 17 00:00:00 2001 From: Chase Giunta Date: Thu, 25 Mar 2021 14:56:16 -0500 Subject: [PATCH 4/7] Use .form-multiselect & .form-file classes where applicable --- src/index.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/index.js b/src/index.js index 0a6ef7e..2e4f65d 100644 --- a/src/index.js +++ b/src/index.js @@ -13,7 +13,7 @@ const forms = plugin.withOptions(function (options) { } const baseSelectors = { - class: '.form-input, .form-textarea, .form-select', + class: '.form-input, .form-textarea, .form-select, .form-multiselect', base: "[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", } @@ -81,7 +81,7 @@ const forms = plugin.withOptions(function (options) { 'color-adjust': `exact`, }, - [swap(`[multiple]`, `.form-select[multiple], .form-input[multiple]`)]: { + [swap(`[multiple]`, `.form-multiselect, .form-input[multiple]`)]: { 'background-image': 'initial', 'background-position': 'initial', 'background-repeat': 'unset', @@ -180,7 +180,7 @@ const forms = plugin.withOptions(function (options) { 'background-color': 'currentColor', }, - [swap(`[type='file']`, `.form-input[type='file']`)]: { + [swap(`[type='file']`, `.form-file`)]: { background: 'unset', 'border-color': 'inherit', 'border-width': '0', @@ -190,7 +190,7 @@ const forms = plugin.withOptions(function (options) { 'line-height': 'inherit', }, - [swap(`[type='file']:focus`, `.form-input[type='file']:focus`)]: { + [swap(`[type='file']:focus`, `.form-file:focus`)]: { outline: `1px solid ButtonText`, outline: `1px auto -webkit-focus-ring-color`, }, From fbfe0eee2016519ff61fd131cd0b6bba4e6ff6a1 Mon Sep 17 00:00:00 2001 From: Chase Giunta Date: Thu, 25 Mar 2021 18:14:17 -0500 Subject: [PATCH 5/7] Refactor for more a maintainable approach with selector strategy --- src/index.js | 395 +++++++++++++++++++++++++++++---------------------- 1 file changed, 227 insertions(+), 168 deletions(-) diff --git a/src/index.js b/src/index.js index 2e4f65d..6b694b2 100644 --- a/src/index.js +++ b/src/index.js @@ -8,193 +8,252 @@ const forms = plugin.withOptions(function (options) { return function ({ addBase, theme }) { const strategy = options && options.strategy === 'class' ? 'class' : 'base' - const swap = function (baseSelectors, classSelectors) { - return strategy === 'class' ? classSelectors : baseSelectors - } - - const baseSelectors = { - class: '.form-input, .form-textarea, .form-select, .form-multiselect', - base: - "[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[strategy]]: { - 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]), + const rules = [ + { + base: [ + "[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', + ], + class: ['.form-input', '.form-textarea', '.form-select', '.form-multiselect'], + styles: { + 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', + { + base: ['input::placeholder', 'textarea::placeholder'], + class: ['.form-input::placeholder', '.form-textarea::placeholder'], + styles: { + 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', + { + base: ['::-webkit-datetime-edit-fields-wrapper'], + class: ['.form-input::-webkit-datetime-edit-fields-wrapper'], + styles: { + 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', + { + // 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 + base: ['::-webkit-date-and-time-value'], + class: ['.form-input::-webkit-date-and-time-value'], + styles: { + 'min-height': '1.5em', + }, }, - - [swap(`select`, `.form-select`)]: { - 'background-image': `url("${svgToDataUri( - `` - )}")`, - 'background-position': `right ${spacing[2]} center`, - 'background-repeat': `no-repeat`, - 'background-size': `1.5em 1.5em`, - 'padding-right': spacing[10], - 'color-adjust': `exact`, + { + base: ['select'], + class: ['.form-select'], + styles: { + 'background-image': `url("${svgToDataUri( + `` + )}")`, + '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-multiselect, .form-input[multiple]`)]: { - 'background-image': 'initial', - 'background-position': 'initial', - 'background-repeat': 'unset', - 'background-size': 'initial', - 'padding-right': spacing[3], - 'color-adjust': 'unset', + { + base: ['[multiple]'], + class: ['.form-multiselect'], + styles: { + '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'], + { + base: [`[type='checkbox']`, `[type='radio']`], + class: ['.form-checkbox', '.form-radio'], + styles: { + 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'], + { + base: [`[type='checkbox']`], + class: ['.form-checkbox'], + styles: { + 'border-radius': borderRadius['none'], + }, }, - - [swap(`[type='radio']`, `.form-radio`)]: { - 'border-radius': '100%', + { + base: [`[type='radio']`], + class: ['.form-radio'], + styles: { + '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': '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)`, + { + base: [`[type='checkbox']:focus`, `[type='radio']:focus`], + class: ['.form-checkbox:focus', '.form-radio:focus'], + styles: { + 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)`, + }, }, - - [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`, + { + base: [`[type='checkbox']:checked`, `[type='radio']:checked`], + class: ['.form-checkbox:checked', '.form-radio:checked'], + styles: { + '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( - `` - )}")`, + { + base: [`[type='checkbox']:checked`], + class: ['.form-checkbox:checked'], + styles: { + 'background-image': `url("${svgToDataUri( + `` + )}")`, + }, }, - - [swap(`[type='radio']:checked`, `.form-radio:checked`)]: { - 'background-image': `url("${svgToDataUri( - `` - )}")`, + { + base: [`[type='radio']:checked`], + class: ['.form-radio:checked'], + styles: { + 'background-image': `url("${svgToDataUri( + `` + )}")`, + }, }, - - [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', + { + base: [ + `[type='checkbox']:checked:hover`, + `[type='checkbox']:checked:focus`, + `[type='radio']:checked:hover`, + `[type='radio']:checked:focus`, + ], + class: [ + '.form-checkbox:checked:hover', + '.form-checkbox:checked:focus', + '.form-radio:checked:hover', + '.form-radio:check:focus', + ], + styles: { + 'border-color': 'transparent', + 'background-color': 'currentColor', + }, }, - - [swap(`[type='checkbox']:indeterminate`, `.form-checkbox:indeterminate`)]: { - 'background-image': `url("${svgToDataUri( - `` - )}")`, - 'border-color': `transparent`, - 'background-color': `currentColor`, - 'background-size': `100% 100%`, - 'background-position': `center`, - 'background-repeat': `no-repeat`, + { + base: [`[type='checkbox']:indeterminate`], + class: ['.form-checkbox:indeterminate'], + styles: { + 'background-image': `url("${svgToDataUri( + `` + )}")`, + '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', + { + base: [`[type='checkbox']:indeterminate:hover`, `[type='checkbox']:indeterminate:focus`], + class: ['.form-checkbox:indeterminate:hover', '.form-checkbox:indeterminate:focus'], + styles: { + 'border-color': 'transparent', + 'background-color': 'currentColor', + }, }, - - [swap(`[type='file']`, `.form-file`)]: { - background: 'unset', - 'border-color': 'inherit', - 'border-width': '0', - 'border-radius': '0', - padding: '0', - 'font-size': 'unset', - 'line-height': 'inherit', + { + base: [`[type='file']`], + class: ['.form-file'], + styles: { + background: 'unset', + 'border-color': 'inherit', + 'border-width': '0', + 'border-radius': '0', + padding: '0', + 'font-size': 'unset', + 'line-height': 'inherit', + }, }, - - [swap(`[type='file']:focus`, `.form-file:focus`)]: { - outline: `1px solid ButtonText`, - outline: `1px auto -webkit-focus-ring-color`, + { + base: [`[type='file']:focus`], + class: ['.form-file:focus'], + styles: { + outline: `1px solid ButtonText`, + outline: `1px auto -webkit-focus-ring-color`, + }, }, - }) + ] + + for (const rule of rules) { + addBase({ + [rule[strategy]]: rule.styles, + }) + } } }) From 5f1806959cbd039b19d7f82bc30986b22ce338fd Mon Sep 17 00:00:00 2001 From: Chase Giunta Date: Thu, 25 Mar 2021 18:45:08 -0500 Subject: [PATCH 6/7] Update README.md --- README.md | 56 ++++++++++++++++++++++++++++++++++--------------------- 1 file changed, 35 insertions(+), 21 deletions(-) diff --git a/README.md b/README.md index 74d3ec2..9d63ebd 100644 --- a/README.md +++ b/README.md @@ -37,27 +37,41 @@ module.exports = { All of the basic form elements you use will now have some simple default styles that are easy to override with utilities. -Currently we add basic utility-friendly form styles for the following form element types: - -- `input[type='text']` -- `input[type='password']` -- `input[type='email']` -- `input[type='number']` -- `input[type='url']` -- `input[type='date']` -- `input[type='datetime-local']` -- `input[type='month']` -- `input[type='week']` -- `input[type='time']` -- `input[type='search']` -- `input[type='tel']` -- `input[type='checkbox']` -- `input[type='radio']` -- `select` -- `select[multiple]` -- `textarea` - -**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. +There's currently two options you can choose in how we we add basic utility-friendly form styles: + +- `base` - The default selector strategy +- `class` - Requires a `form-` class to be applied to the form element in order for styles to be applied + +``` +plugins: [ + require("@tailwindcss/forms")({ + strategy: 'class', + }), +], +``` + +| Base | Class | +| ------------------------- | ------------------ | +| `[type='text']` | `form-input` | +| `[type='email']` | `form-input` | +| `[type='url']` | `form-input` | +| `[type='password']` | `form-input` | +| `[type='number']` | `form-input` | +| `[type='date']` | `form-input` | +| `[type='datetime-local']` | `form-input` | +| `[type='month']` | `form-input` | +| `[type='search']` | `form-input` | +| `[type='tel']` | `form-input` | +| `[type='time']` | `form-input` | +| `[type='week']` | `form-input` | +| `[multiple]` | `form-multiselect` | +| `textarea` | `form-textarea` | +| `select` | `form-select` | +| `[type='checkbox']` | `form-checkbox` | +| `[type='radio']` | `form-radio` | +| `[type='file']` | `form-file` | + +**Note that for text inputs, when using the default `base` strategy, 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 `` that normally need to be reset with `appearance: none` and customized using custom CSS: From 456cfd115f5d84f747db1a44845630a51bcafc81 Mon Sep 17 00:00:00 2001 From: Chase Giunta Date: Thu, 25 Mar 2021 20:38:13 -0500 Subject: [PATCH 7/7] Update README.md --- README.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 9d63ebd..01b4465 100644 --- a/README.md +++ b/README.md @@ -42,7 +42,8 @@ There's currently two options you can choose in how we we add basic utility-frie - `base` - The default selector strategy - `class` - Requires a `form-` class to be applied to the form element in order for styles to be applied -``` +```js +// tailwind.config.js plugins: [ require("@tailwindcss/forms")({ strategy: 'class',