From 1706db9d8dc83266f00cc4b1e8c6a1005734c173 Mon Sep 17 00:00:00 2001 From: Ben Date: Thu, 13 May 2021 11:36:51 +0100 Subject: [PATCH 01/11] feat(option): allow both strategies --- src/index.js | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/src/index.js b/src/index.js index 4d65324..e92adca 100644 --- a/src/index.js +++ b/src/index.js @@ -252,11 +252,14 @@ const forms = plugin.withOptions(function (options = { strategy: 'base' }) { addBase( rules .map((rule) => { - if (rule[strategy] === null) { - return null - } + if (strategy !== 'both' && rule[strategy] === null) return null + + const base = rule['base'] + const classes = rule['class'] + const both = base && classes ? [...base, ...classes] : base ?? classes + const selectors = strategy === 'both' ? both : rule[strategy] - return { [rule[strategy]]: rule.styles } + return { [selectors]: rule.styles } }) .filter(Boolean) ) From c773b65c329b61e5851a8ce897634cf8c5368c5f Mon Sep 17 00:00:00 2001 From: Ben Date: Wed, 2 Mar 2022 17:03:21 +0000 Subject: [PATCH 02/11] feat: base and class by default --- src/index.js | 15 ++++++--------- 1 file changed, 6 insertions(+), 9 deletions(-) diff --git a/src/index.js b/src/index.js index 9315017..2b4cebb 100644 --- a/src/index.js +++ b/src/index.js @@ -5,7 +5,7 @@ const colors = require('tailwindcss/colors') const [baseFontSize, { lineHeight: baseLineHeight }] = defaultTheme.fontSize.base const { spacing, borderWidth, borderRadius } = defaultTheme -const forms = plugin.withOptions(function (options = { strategy: 'base' }) { +const forms = plugin.withOptions(function (options = { strategy: '' }) { return function ({ addBase, addComponents, theme }) { const strategy = options.strategy @@ -283,20 +283,17 @@ const forms = plugin.withOptions(function (options = { strategy: 'base' }) { }, ] - const strategyRules = rules + const getStrategyRules = (strategy) => rules .map((rule) => { - if (rule[strategy] === null) { - return null - } + if (rule[strategy] === null) return null return { [rule[strategy]]: rule.styles } }) .filter(Boolean) + + if (strategy !== 'class') addBase(getStrategyRules('base')) + if (strategy !== 'base') addComponents(getStrategyRules('class')) - ;({ - 'base': addBase, - 'class': addComponents - })[strategy](strategyRules) } }) From 63c1fd6237767d96f2af8c7126aea825318f024a Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Wed, 2 Mar 2022 12:55:42 -0500 Subject: [PATCH 03/11] Refactor --- src/index.js | 24 ++++++++++++++---------- 1 file changed, 14 insertions(+), 10 deletions(-) diff --git a/src/index.js b/src/index.js index 2b4cebb..ee60f72 100644 --- a/src/index.js +++ b/src/index.js @@ -5,9 +5,9 @@ const colors = require('tailwindcss/colors') const [baseFontSize, { lineHeight: baseLineHeight }] = defaultTheme.fontSize.base const { spacing, borderWidth, borderRadius } = defaultTheme -const forms = plugin.withOptions(function (options = { strategy: '' }) { +const forms = plugin.withOptions(function (options = { strategy: undefined }) { return function ({ addBase, addComponents, theme }) { - const strategy = options.strategy + const strategy = options.strategy === undefined ? ['base', 'class'] : [options.strategy] const rules = [ { @@ -284,16 +284,20 @@ const forms = plugin.withOptions(function (options = { strategy: '' }) { ] const getStrategyRules = (strategy) => rules - .map((rule) => { - if (rule[strategy] === null) return null + .map((rule) => { + if (rule[strategy] === null) return null - return { [rule[strategy]]: rule.styles } - }) - .filter(Boolean) - - if (strategy !== 'class') addBase(getStrategyRules('base')) - if (strategy !== 'base') addComponents(getStrategyRules('class')) + return { [rule[strategy]]: rule.styles } + }) + .filter(Boolean) + if (strategy.includes('base')) { + addBase(getStrategyRules('base')) + } + + if (strategy.includes('class')) { + addComponents(getStrategyRules('class')) + } } }) From da52c2d952319cd692ddaf2413bcc0bdd5d411f3 Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Wed, 2 Mar 2022 13:24:26 -0500 Subject: [PATCH 04/11] Update changelog --- CHANGELOG.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 21bdcad..59ab533 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,7 +7,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## [Unreleased] -Nothing yet! +### Changed + +- Generate both base styles and component styles by default ([#71](https://github.com/tailwindlabs/tailwindcss-forms/pull/71)) ## [0.4.1] - 2022-03-02 From 2506be5a3353db39b8bae3e46265a927f11c5b36 Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Wed, 2 Mar 2022 13:24:39 -0500 Subject: [PATCH 05/11] Rework readme --- README.md | 36 +++++++++++++++++++++--------------- 1 file changed, 21 insertions(+), 15 deletions(-) diff --git a/README.md b/README.md index 3b88276..234bae6 100644 --- a/README.md +++ b/README.md @@ -67,22 +67,9 @@ Every element has been normalized/reset to a simple visually consistent style th More customization examples and best practices coming soon. -### Using classes instead of element selectors +### Using classes to style -Although we recommend thinking of this plugin as a "form reset" rather than a collection of form component styles, in some cases our default approach may be too heavy-handed, especially when integrating this plugin into existing projects. - -For situations where the default strategy doesn't work well with your project, you can use the `class` strategy to make all form styling _opt-in_ instead of applied globally: - -```js -// tailwind.config.js -plugins: [ - require("@tailwindcss/forms")({ - strategy: 'class', - }), -], -``` - -When using the `class` strategy, form elements do not receive any reset styles by default, and reset styles are added per element using a new set of `form-*` classes generated by the plugin: +In addition to the base styles to automatically style each form element we also generate classes that you can use explicitly. This allows you to style form elements by default and have the ability to style non-form things to more closely match those form elements. ```html @@ -115,3 +102,22 @@ Here is a complete table of the provided `form-*` classes for reference: | `select[multiple]` | `form-multiselect` | | `[type='checkbox']` | `form-checkbox` | | `[type='radio']` | `form-radio` | + +### Using only base styles or only classes + +Although we recommend thinking of this plugin as a "form reset" rather than a collection of form component styles, in some cases our default approach may be too heavy-handed, especially when integrating this plugin into existing projects. + +For situations where the default strategy of generating both the base styles *and* classes doesn't work well with your project, you can use `strategy` option to control whether or not form styling is _opt-in_ or applied globally: + +```js +// tailwind.config.js +plugins: [ + require("@tailwindcss/forms")({ + strategy: 'base', // or strategy: 'class', + }), +], +``` + +When using the `base` strategy, form elements are styled globally by default. + +When using the `class` strategy, form elements do not receive any reset styles by default, and reset styles are added per element using a new set of `form-*` classes generated by the plugin: From d39e54991f353aab61615d8f446c79248004b23e Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Wed, 2 Mar 2022 13:58:12 -0500 Subject: [PATCH 06/11] Update README Co-authored-by: Jonathan Reinink --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 234bae6..1baa84d 100644 --- a/README.md +++ b/README.md @@ -69,7 +69,7 @@ More customization examples and best practices coming soon. ### Using classes to style -In addition to the base styles to automatically style each form element we also generate classes that you can use explicitly. This allows you to style form elements by default and have the ability to style non-form things to more closely match those form elements. +In addition to the global styles, we also generate a set of corresponding classes which can be used to explicitly apply the form styles to an element. This can be useful in situations where you need to make a non-form element, such as a `
`, look like a form element. ```html From 726fb97d9cac9123776f089f96c7daca7c4386f3 Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Wed, 2 Mar 2022 14:15:57 -0500 Subject: [PATCH 07/11] Update README Co-authored-by: Jonathan Reinink --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 1baa84d..c271442 100644 --- a/README.md +++ b/README.md @@ -103,7 +103,7 @@ Here is a complete table of the provided `form-*` classes for reference: | `[type='checkbox']` | `form-checkbox` | | `[type='radio']` | `form-radio` | -### Using only base styles or only classes +### Using only global styles or only classes Although we recommend thinking of this plugin as a "form reset" rather than a collection of form component styles, in some cases our default approach may be too heavy-handed, especially when integrating this plugin into existing projects. From c17956d0121c81a0bf6ecc635254b69b00365c1d Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Wed, 2 Mar 2022 14:16:52 -0500 Subject: [PATCH 08/11] Update README.md Co-authored-by: Jonathan Reinink --- README.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index c271442..c1ca25e 100644 --- a/README.md +++ b/README.md @@ -113,7 +113,8 @@ For situations where the default strategy of generating both the base styles *an // tailwind.config.js plugins: [ require("@tailwindcss/forms")({ - strategy: 'base', // or strategy: 'class', + strategy: 'base', // only generate global styles + strategy: 'class', // only generate classes }), ], ``` From 743aab2b1729ba9be4b6d67aca69eaa04bbad220 Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Wed, 2 Mar 2022 14:17:00 -0500 Subject: [PATCH 09/11] Update README.md Co-authored-by: Jonathan Reinink --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index c1ca25e..f7a52ff 100644 --- a/README.md +++ b/README.md @@ -107,7 +107,7 @@ Here is a complete table of the provided `form-*` classes for reference: Although we recommend thinking of this plugin as a "form reset" rather than a collection of form component styles, in some cases our default approach may be too heavy-handed, especially when integrating this plugin into existing projects. -For situations where the default strategy of generating both the base styles *and* classes doesn't work well with your project, you can use `strategy` option to control whether or not form styling is _opt-in_ or applied globally: +If generating both the global (base) styles and classes doesn't work well with your project, you can use the `strategy` option to limit the plugin to just one of these approaches. ```js // tailwind.config.js From 6015566684fc3e68d1b12739636392b461156a1d Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Wed, 2 Mar 2022 14:17:36 -0500 Subject: [PATCH 10/11] Update README.md Co-authored-by: Jonathan Reinink --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index f7a52ff..adf5f6a 100644 --- a/README.md +++ b/README.md @@ -119,6 +119,6 @@ plugins: [ ], ``` -When using the `base` strategy, form elements are styled globally by default. +When using the `base` strategy, form elements are styled globally, and no `form-{name}` classes are generated. -When using the `class` strategy, form elements do not receive any reset styles by default, and reset styles are added per element using a new set of `form-*` classes generated by the plugin: +When using the `class` strategy, form elements are not styled globally, and instead must be styled using the generated `form-{name}` classes. From 811536cc5de5334b4b25abfd593250f1c00fd88e Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Wed, 2 Mar 2022 14:21:03 -0500 Subject: [PATCH 11/11] Update changelog This is closer to the wording we use in the readme --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 59ab533..2e02609 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,7 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Changed -- Generate both base styles and component styles by default ([#71](https://github.com/tailwindlabs/tailwindcss-forms/pull/71)) +- Generate both global styles and classes by default ([#71](https://github.com/tailwindlabs/tailwindcss-forms/pull/71)) ## [0.4.1] - 2022-03-02