Skip to content

Commit c6d19fb

Browse files
chasegiuntachasegiunta
committed
Add ‘useFormClasses’ plugin option
1 parent 98f7619 commit c6d19fb

File tree

1 file changed

+183
-187
lines changed

1 file changed

+183
-187
lines changed

‎src/index.js‎

Lines changed: 183 additions & 187 deletions
Original file line numberDiff line numberDiff line change
@@ -4,200 +4,196 @@ const defaultTheme = require('tailwindcss/defaultTheme')
44
const [baseFontSize, { lineHeight: baseLineHeight }] = defaultTheme.fontSize.base
55
const { colors, spacing, borderWidth, borderRadius, outline } = defaultTheme
66

7-
const forms = plugin(function ({ addBase, theme }) {
8-
addBase({
9-
[`
10-
[type='text'],
11-
[type='email'],
12-
[type='url'],
13-
[type='password'],
14-
[type='number'],
15-
[type='date'],
16-
[type='datetime-local'],
17-
[type='month'],
18-
[type='search'],
19-
[type='tel'],
20-
[type='time'],
21-
[type='week'],
22-
[multiple],
23-
textarea,
24-
select
25-
`]: {
26-
appearance: 'none',
27-
'background-color': '#fff',
28-
'border-color': theme('colors.gray.500', colors.gray[500]),
29-
'border-width': borderWidth['DEFAULT'],
30-
'border-radius': borderRadius.none,
31-
'padding-top': spacing[2],
32-
'padding-right': spacing[3],
33-
'padding-bottom': spacing[2],
34-
'padding-left': spacing[3],
35-
'font-size': baseFontSize,
36-
'line-height': baseLineHeight,
37-
'&:focus': {
7+
const forms = plugin.withOptions(function (options) {
8+
return function ({ addBase, theme }) {
9+
const swap = function (initial, classes) {
10+
return options && options.useFormClasses === true ? classes : initial
11+
}
12+
13+
const baseSelectors =
14+
(options && options.useFormClasses) === true
15+
? '.form-input, .form-textarea, .form-select'
16+
: "[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"
17+
18+
addBase({
19+
[baseSelectors.join(',')]: {
20+
appearance: 'none',
21+
'background-color': '#fff',
22+
'border-color': theme('colors.gray.500', colors.gray[500]),
23+
'border-width': borderWidth['DEFAULT'],
24+
'border-radius': borderRadius.none,
25+
'padding-top': spacing[2],
26+
'padding-right': spacing[3],
27+
'padding-bottom': spacing[2],
28+
'padding-left': spacing[3],
29+
'font-size': baseFontSize,
30+
'line-height': baseLineHeight,
31+
'&:focus': {
32+
outline: outline.none[0],
33+
'outline-offset': outline.none[1],
34+
'--tw-ring-inset': 'var(--tw-empty,/*!*/ /*!*/)',
35+
'--tw-ring-offset-width': '0px',
36+
'--tw-ring-offset-color': '#fff',
37+
'--tw-ring-color': theme('colors.blue.600', colors.blue[600]),
38+
'--tw-ring-offset-shadow': `var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)`,
39+
'--tw-ring-shadow': `var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color)`,
40+
'box-shadow': `var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)`,
41+
'border-color': theme('colors.blue.600', colors.blue[600]),
42+
},
43+
},
44+
45+
[swap(
46+
`input::placeholder, textarea::placeholder`,
47+
`.form-input::placeholder .form-textarea::placeholder`
48+
)]: {
49+
color: theme('colors.gray.500', colors.gray[500]),
50+
opacity: '1',
51+
},
52+
53+
[swap(
54+
`::-webkit-datetime-edit-fields-wrapper`,
55+
`.form-input::-webkit-datetime-edit-fields-wrapper`
56+
)]: {
57+
padding: '0',
58+
},
59+
60+
// Unfortunate hack until https://bugs.webkit.org/show_bug.cgi?id=198959 is fixed.
61+
// This sucks because users can't change line-height with a utility on date inputs now.
62+
// Reference: https://github.com/twbs/bootstrap/pull/31993
63+
[swap(`::-webkit-date-and-time-value`, `.form-input::-webkit-date-and-time-value`)]: {
64+
'min-height': '1.5em',
65+
},
66+
67+
[swap(`select`, `.form-select`)]: {
68+
'background-image': `url("${svgToDataUri(
69+
`<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20"><path stroke="${theme(
70+
'colors.gray.500',
71+
colors.gray[500]
72+
)}" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6 8l4 4 4-4"/></svg>`
73+
)}")`,
74+
'background-position': `right ${spacing[2]} center`,
75+
'background-repeat': `no-repeat`,
76+
'background-size': `1.5em 1.5em`,
77+
'padding-right': spacing[10],
78+
'color-adjust': `exact`,
79+
},
80+
81+
[swap(`[multiple]`, `.form-select[multiple], .form-input[multiple]`)]: {
82+
'background-image': 'initial',
83+
'background-position': 'initial',
84+
'background-repeat': 'unset',
85+
'background-size': 'initial',
86+
'padding-right': spacing[3],
87+
'color-adjust': 'unset',
88+
},
89+
90+
[swap(`[type='checkbox'], [type='radio']`, `.form-checkbox, .form-radio`)]: {
91+
appearance: 'none',
92+
padding: '0',
93+
'color-adjust': 'exact',
94+
display: 'inline-block',
95+
'vertical-align': 'middle',
96+
'background-origin': 'border-box',
97+
'user-select': 'none',
98+
'flex-shrink': '0',
99+
height: spacing[4],
100+
width: spacing[4],
101+
color: theme('colors.blue.600', colors.blue[600]),
102+
'background-color': '#fff',
103+
'border-color': theme('colors.gray.500', colors.gray[500]),
104+
'border-width': borderWidth['DEFAULT'],
105+
},
106+
107+
[swap(`[type='checkbox']`, `.form-checkbox`)]: {
108+
'border-radius': borderRadius['none'],
109+
},
110+
111+
[swap(`[type='radio']`, `.form-radio`)]: {
112+
'border-radius': '100%',
113+
},
114+
115+
[swap(
116+
`[type='checkbox']:focus, [type='radio']:focus`,
117+
`.form-checkbox:focus, .form-radio:focus`
118+
)]: {
38119
outline: outline.none[0],
39120
'outline-offset': outline.none[1],
40121
'--tw-ring-inset': 'var(--tw-empty,/*!*/ /*!*/)',
41-
'--tw-ring-offset-width': '0px',
122+
'--tw-ring-offset-width': '2px',
42123
'--tw-ring-offset-color': '#fff',
43124
'--tw-ring-color': theme('colors.blue.600', colors.blue[600]),
44125
'--tw-ring-offset-shadow': `var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)`,
45-
'--tw-ring-shadow': `var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color)`,
126+
'--tw-ring-shadow': `var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color)`,
46127
'box-shadow': `var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)`,
47-
'border-color': theme('colors.blue.600', colors.blue[600]),
48-
},
49-
},
50-
51-
'input::placeholder, textarea::placeholder': {
52-
color: theme('colors.gray.500', colors.gray[500]),
53-
opacity: '1',
54-
},
55-
56-
'::-webkit-datetime-edit-fields-wrapper': {
57-
padding: '0',
58-
},
59-
60-
// Unfortunate hack until https://bugs.webkit.org/show_bug.cgi?id=198959 is fixed.
61-
// This sucks because users can't change line-height with a utility on date inputs now.
62-
// Reference: https://github.com/twbs/bootstrap/pull/31993
63-
'::-webkit-date-and-time-value': {
64-
'min-height': '1.5em',
65-
},
66-
67-
select: {
68-
'background-image': `url("${svgToDataUri(
69-
`<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20"><path stroke="${theme(
70-
'colors.gray.500',
71-
colors.gray[500]
72-
)}" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6 8l4 4 4-4"/></svg>`
73-
)}")`,
74-
'background-position': `right ${spacing[2]} center`,
75-
'background-repeat': `no-repeat`,
76-
'background-size': `1.5em 1.5em`,
77-
'padding-right': spacing[10],
78-
'color-adjust': `exact`,
79-
},
80-
81-
'[multiple]': {
82-
'background-image': 'initial',
83-
'background-position': 'initial',
84-
'background-repeat': 'unset',
85-
'background-size': 'initial',
86-
'padding-right': spacing[3],
87-
'color-adjust': 'unset',
88-
},
89-
90-
[`
91-
[type='checkbox'],
92-
[type='radio']
93-
`]: {
94-
appearance: 'none',
95-
padding: '0',
96-
'color-adjust': 'exact',
97-
display: 'inline-block',
98-
'vertical-align': 'middle',
99-
'background-origin': 'border-box',
100-
'user-select': 'none',
101-
'flex-shrink': '0',
102-
height: spacing[4],
103-
width: spacing[4],
104-
color: theme('colors.blue.600', colors.blue[600]),
105-
'background-color': '#fff',
106-
'border-color': theme('colors.gray.500', colors.gray[500]),
107-
'border-width': borderWidth['DEFAULT'],
108-
},
109-
110-
[`[type='checkbox']`]: {
111-
'border-radius': borderRadius['none'],
112-
},
113-
114-
[`[type='radio']`]: {
115-
'border-radius': '100%',
116-
},
117-
118-
[`
119-
[type='checkbox']:focus,
120-
[type='radio']:focus
121-
`]: {
122-
outline: outline.none[0],
123-
'outline-offset': outline.none[1],
124-
'--tw-ring-inset': 'var(--tw-empty,/*!*/ /*!*/)',
125-
'--tw-ring-offset-width': '2px',
126-
'--tw-ring-offset-color': '#fff',
127-
'--tw-ring-color': theme('colors.blue.600', colors.blue[600]),
128-
'--tw-ring-offset-shadow': `var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)`,
129-
'--tw-ring-shadow': `var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color)`,
130-
'box-shadow': `var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)`,
131-
'border-color': theme('colors.gray.500', colors.gray[500]),
132-
},
133-
134-
[`
135-
[type='checkbox']:checked,
136-
[type='radio']:checked
137-
`]: {
138-
'border-color': `transparent`,
139-
'background-color': `currentColor`,
140-
'background-size': `100% 100%`,
141-
'background-position': `center`,
142-
'background-repeat': `no-repeat`,
143-
},
144-
145-
[`[type='checkbox']:checked`]: {
146-
'background-image': `url("${svgToDataUri(
147-
`<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>`
148-
)}")`,
149-
},
150-
151-
[`[type='radio']:checked`]: {
152-
'background-image': `url("${svgToDataUri(
153-
`<svg viewBox="0 0 16 16" fill="white" xmlns="http://www.w3.org/2000/svg"><circle cx="8" cy="8" r="3"/></svg>`
154-
)}")`,
155-
},
156-
157-
[`
158-
[type='checkbox']:checked:hover,
159-
[type='checkbox']:checked:focus,
160-
[type='radio']:checked:hover,
161-
[type='radio']:checked:focus
162-
`]: {
163-
'border-color': 'transparent',
164-
'background-color': 'currentColor',
165-
},
166-
167-
[`[type='checkbox']:indeterminate`]: {
168-
'background-image': `url("${svgToDataUri(
169-
`<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>`
170-
)}")`,
171-
'border-color': `transparent`,
172-
'background-color': `currentColor`,
173-
'background-size': `100% 100%`,
174-
'background-position': `center`,
175-
'background-repeat': `no-repeat`,
176-
},
177-
178-
[`
179-
[type='checkbox']:indeterminate:hover,
180-
[type='checkbox']:indeterminate:focus
181-
`]: {
182-
'border-color': 'transparent',
183-
'background-color': 'currentColor',
184-
},
185-
186-
[`[type='file']`]: {
187-
background: 'unset',
188-
'border-color': 'inherit',
189-
'border-width': '0',
190-
'border-radius': '0',
191-
padding: '0',
192-
'font-size': 'unset',
193-
'line-height': 'inherit',
194-
},
195-
196-
[`[type='file']:focus`]: {
197-
outline: `1px solid ButtonText`,
198-
outline: `1px auto -webkit-focus-ring-color`,
199-
},
200-
})
128+
'border-color': theme('colors.gray.500', colors.gray[500]),
129+
},
130+
131+
[swap(
132+
`[type='checkbox']:checked, [type='radio']:checked`,
133+
`.form-checkbox:checked, .form-radio:checked`
134+
)]: {
135+
'border-color': `transparent`,
136+
'background-color': `currentColor`,
137+
'background-size': `100% 100%`,
138+
'background-position': `center`,
139+
'background-repeat': `no-repeat`,
140+
},
141+
142+
[swap(`[type='checkbox']:checked`, `.form-checkbox:checked`)]: {
143+
'background-image': `url("${svgToDataUri(
144+
`<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>`
145+
)}")`,
146+
},
147+
148+
[swap(`[type='radio']:checked`, `.form-radio:checked`)]: {
149+
'background-image': `url("${svgToDataUri(
150+
`<svg viewBox="0 0 16 16" fill="white" xmlns="http://www.w3.org/2000/svg"><circle cx="8" cy="8" r="3"/></svg>`
151+
)}")`,
152+
},
153+
154+
[swap(
155+
`[type='checkbox']:checked:hover, [type='checkbox']:checked:focus, [type='radio']:checked:hover, [type='radio']:checked:focus`,
156+
`.form-checkbox:checked:hover, .form-checkbox:checked:focus, .form-radio:checked:hover, .form-radio:check:focus`
157+
)]: {
158+
'border-color': 'transparent',
159+
'background-color': 'currentColor',
160+
},
161+
162+
[swap(`[type='checkbox']:indeterminate`, `.form-checkbox:indeterminate`)]: {
163+
'background-image': `url("${svgToDataUri(
164+
`<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>`
165+
)}")`,
166+
'border-color': `transparent`,
167+
'background-color': `currentColor`,
168+
'background-size': `100% 100%`,
169+
'background-position': `center`,
170+
'background-repeat': `no-repeat`,
171+
},
172+
173+
[swap(
174+
`[type='checkbox']:indeterminate:hover, [type='checkbox']:indeterminate:focus`,
175+
`.form-checkbox:indeterminate:hover, .form-checkbox:indeterminate:focus`
176+
)]: {
177+
'border-color': 'transparent',
178+
'background-color': 'currentColor',
179+
},
180+
181+
[swap(`[type='file']`, `.form-input[type='file']`)]: {
182+
background: 'unset',
183+
'border-color': 'inherit',
184+
'border-width': '0',
185+
'border-radius': '0',
186+
padding: '0',
187+
'font-size': 'unset',
188+
'line-height': 'inherit',
189+
},
190+
191+
[swap(`[type='file']:focus`, `.form-input[type='file']:focus`)]: {
192+
outline: `1px solid ButtonText`,
193+
outline: `1px auto -webkit-focus-ring-color`,
194+
},
195+
})
196+
}
201197
})
202198

203199
module.exports = forms

0 commit comments

Comments
 (0)