@tailwindcss/forms - npm Package Compare versions

Comparing version 0.0.0-insiders.e17d25f to 0.0.0-insiders.e60d81a

CHANGELOG.md

@@ -10,6 +10,47 @@ # Changelog
 
+- Nothing yet!
+
+## [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))
+
+## [0.5.3] - 2022-09-02
+
+### Fixed
+
+- Update TypeScript types ([#126](https://github.com/tailwindlabs/tailwindcss-forms/pull/126))
+
+## [0.5.2] - 2022-05-18
+
 ### Added
 
+- Add TypeScript type declarations ([#118](https://github.com/tailwindlabs/tailwindcss-forms/pull/118))
+
+## [0.5.1] - 2022-05-03
+
+### Fixed
+
+- Remove duplicate `outline` property ([#116](https://github.com/tailwindlabs/tailwindcss-forms/pull/116))
+- Fix autoprefixer warning about `color-adjust` ([#115](https://github.com/tailwindlabs/tailwindcss-forms/pull/115))
+
+## [0.5.0] - 2022-03-02
+
+### Changed
+
+- Generate both global styles and classes by default ([#71](https://github.com/tailwindlabs/tailwindcss-forms/pull/71))
+
+## [0.4.1] - 2022-03-02
+
+### Added
+
 - Remove `dist` folder and related dependencies ([#96](https://github.com/tailwindlabs/tailwindcss-forms/pull/96))
 
+### Fixed
+
+- Use `addComponents` for class strategy ([#91](https://github.com/tailwindlabs/tailwindcss-forms/pull/91))
+- Fix extra height on Safari date/time inputs ([#109](https://github.com/tailwindlabs/tailwindcss-forms/pull/109))
+
 ## [0.4.0] - 2021-12-09
@@ -93,3 +134,9 @@
 
-[unreleased]: https://github.com/tailwindlabs/tailwindcss-forms/compare/v0.4.0...HEAD
+[unreleased]: https://github.com/tailwindlabs/tailwindcss-forms/compare/v0.5.4...HEAD
+[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
+[0.5.2]: https://github.com/tailwindlabs/tailwindcss-forms/compare/v0.5.1...v0.5.2
+[0.5.1]: https://github.com/tailwindlabs/tailwindcss-forms/compare/v0.5.0...v0.5.1
+[0.5.0]: https://github.com/tailwindlabs/tailwindcss-forms/compare/v0.4.1...v0.5.0
+[0.4.1]: https://github.com/tailwindlabs/tailwindcss-forms/compare/v0.4.0...v0.4.1
 [0.4.0]: https://github.com/tailwindlabs/tailwindcss-forms/compare/v0.3.3...v0.4.0
@@ -96,0 +143,0 @@ [0.3.4]: https://github.com/tailwindlabs/tailwindcss-forms/compare/v0.3.3...v0.3.4

package.json

 {
   "name": "@tailwindcss/forms",
-  "version": "0.0.0-insiders.e17d25f",
+  "version": "0.0.0-insiders.e60d81a",
   "main": "src/index.js",
+  "types": "src/index.d.ts",
   "license": "MIT",
@@ -26,7 +27,7 @@ "repository": "https://github.com/tailwindlabs/tailwindcss-forms",
   "devDependencies": {
-    "autoprefixer": "^10.4.2",
+    "autoprefixer": "^10.4.6",
     "concurrently": "^5.3.0",
-    "live-server": "^1.2.1",
-    "postcss": "^8.4.5",
-    "tailwindcss": "^3.0.2"
+    "live-server": "^1.2.2",
+    "postcss": "^8.4.13",
+    "tailwindcss": "^3.0.24"
   },
@@ -33,0 +34,0 @@ "dependencies": {

README.md

@@ -10,7 +10,3 @@ # @tailwindcss/forms
 ```sh
-# Using npm
-npm install @tailwindcss/forms
-
-# Using Yarn
-yarn add @tailwindcss/forms
+npm install -D @tailwindcss/forms
 ```
@@ -59,4 +55,2 @@
 
-**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:
@@ -76,19 +70,6 @@
 
-### 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.
+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 `<div>`, look like a form element.
 
-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:
-
 ```html
@@ -125,1 +106,21 @@ <input type="email" class="form-input px-4 py-3 rounded-full">
 | `[type='radio']`          | `form-radio`       |
+
+### 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.
+
+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
+plugins: [
+  require("@tailwindcss/forms")({
+    strategy: 'base', // only generate global styles
+    strategy: 'class', // only generate classes
+  }),
+],
+```
+
+When using the `base` strategy, form elements are styled globally, and no `form-{name}` classes are generated.
+
+When using the `class` strategy, form elements are not styled globally, and instead must be styled using the generated `form-{name}` classes.

src/index.js

@@ -8,6 +8,10 @@ const svgToDataUri = require('mini-svg-data-uri')
 
-const forms = plugin.withOptions(function (options = { strategy: 'base' }) {
-  return function ({ addBase, theme }) {
-    const strategy = options.strategy
+function resolveColor(color, opacityVariableName) {
+  return color.replace('<alpha-value>', `var(${opacityVariableName}, 1)`)
+}
 
+const forms = plugin.withOptions(function (options = { strategy: undefined }) {
+  return function ({ addBase, addComponents, theme }) {
+    const strategy = options.strategy === undefined ? ['base', 'class'] : [options.strategy]
+
     const rules = [
@@ -17,2 +21,3 @@ {
           "[type='text']",
+          "input:where(:not([type]))",
           "[type='email']",
@@ -37,3 +42,6 @@ "[type='url']",
           'background-color': '#fff',
-          'border-color': theme('colors.gray.500', colors.gray[500]),
+          'border-color': resolveColor(
+            theme('colors.gray.500', colors.gray[500]),
+            '--tw-border-opacity'
+          ),
           'border-width': borderWidth['DEFAULT'],
@@ -54,7 +62,13 @@ 'border-radius': borderRadius.none,
             '--tw-ring-offset-color': '#fff',
-            '--tw-ring-color': theme('colors.blue.600', colors.blue[600]),
+            '--tw-ring-color': resolveColor(
+              theme('colors.blue.600', colors.blue[600]),
+              '--tw-ring-opacity'
+            ),
             '--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)`,
-            'border-color': theme('colors.blue.600', colors.blue[600]),
+            'border-color': resolveColor(
+              theme('colors.blue.600', colors.blue[600]),
+              '--tw-border-opacity'
+            ),
           },
@@ -67,3 +81,3 @@ },
         styles: {
-          color: theme('colors.gray.500', colors.gray[500]),
+          color: resolveColor(theme('colors.gray.500', colors.gray[500]), '--tw-text-opacity'),
           opacity: '1',
@@ -90,2 +104,33 @@ },
       {
+        // In Safari on macOS date time inputs are 4px taller than normal inputs
+        // This is because there is extra padding on the datetime-edit and datetime-edit-{part}-field pseudo elements
+        // See https://github.com/tailwindlabs/tailwindcss-forms/issues/95
+        base: [
+          '::-webkit-datetime-edit',
+          '::-webkit-datetime-edit-year-field',
+          '::-webkit-datetime-edit-month-field',
+          '::-webkit-datetime-edit-day-field',
+          '::-webkit-datetime-edit-hour-field',
+          '::-webkit-datetime-edit-minute-field',
+          '::-webkit-datetime-edit-second-field',
+          '::-webkit-datetime-edit-millisecond-field',
+          '::-webkit-datetime-edit-meridiem-field',
+        ],
+        class: [
+          '.form-input::-webkit-datetime-edit',
+          '.form-input::-webkit-datetime-edit-year-field',
+          '.form-input::-webkit-datetime-edit-month-field',
+          '.form-input::-webkit-datetime-edit-day-field',
+          '.form-input::-webkit-datetime-edit-hour-field',
+          '.form-input::-webkit-datetime-edit-minute-field',
+          '.form-input::-webkit-datetime-edit-second-field',
+          '.form-input::-webkit-datetime-edit-millisecond-field',
+          '.form-input::-webkit-datetime-edit-meridiem-field',
+        ],
+        styles: {
+          'padding-top': 0,
+          'padding-bottom': 0,
+        },
+      },
+      {
         base: ['select'],
@@ -95,5 +140,5 @@ class: ['.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]
+            `<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'
             )}" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6 8l4 4 4-4"/></svg>`
@@ -105,8 +150,8 @@ )}")`,
           'padding-right': spacing[10],
-          'color-adjust': `exact`,
+          'print-color-adjust': `exact`,
         },
       },
       {
-        base: ['[multiple]'],
-        class: null,
+        base: ['[multiple]', '[size]:where(select:not([size="1"]))'],
+        class: ['.form-select:where([size]:not([size="1"]))'],
         styles: {
@@ -118,3 +163,3 @@ 'background-image': 'initial',
           'padding-right': spacing[3],
-          'color-adjust': 'unset',
+          'print-color-adjust': 'unset',
         },
@@ -128,3 +173,3 @@ },
           padding: '0',
-          'color-adjust': 'exact',
+          'print-color-adjust': 'exact',
           display: 'inline-block',
@@ -137,5 +182,8 @@ 'vertical-align': 'middle',
           width: spacing[4],
-          color: theme('colors.blue.600', colors.blue[600]),
+          color: resolveColor(theme('colors.blue.600', colors.blue[600]), '--tw-text-opacity'),
           'background-color': '#fff',
-          'border-color': theme('colors.gray.500', colors.gray[500]),
+          'border-color': resolveColor(
+            theme('colors.gray.500', colors.gray[500]),
+            '--tw-border-opacity'
+          ),
           'border-width': borderWidth['DEFAULT'],
@@ -168,3 +216,6 @@ '--tw-shadow': '0 0 #0000',
           '--tw-ring-offset-color': '#fff',
-          '--tw-ring-color': theme('colors.blue.600', colors.blue[600]),
+          '--tw-ring-color': resolveColor(
+            theme('colors.blue.600', colors.blue[600]),
+            '--tw-ring-opacity'
+          ),
           '--tw-ring-offset-shadow': `var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)`,
@@ -261,4 +312,6 @@ '--tw-ring-shadow': `var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color)`,
         styles: {
-          outline: `1px solid ButtonText`,
-          outline: `1px auto -webkit-focus-ring-color`,
+          outline: [
+            `1px solid ButtonText`,
+            `1px auto -webkit-focus-ring-color`
+          ],
         },
@@ -268,13 +321,17 @@ },
 
-    addBase(
-      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)
+
+    if (strategy.includes('base')) {
+      addBase(getStrategyRules('base'))
+    }
+
+    if (strategy.includes('class')) {
+      addComponents(getStrategyRules('class'))
+    }
   }
@@ -281,0 +338,0 @@ })

tailwind.config.js

 module.exports = {
   content: ['./index.html', './kitchen-sink.html'],
   theme: {
-    extend: {},
+    extend: {
+      //
+    },
   },
   plugins: [require('./src')],
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

50945

increased by11.78%

Number of package files

12

increased by9.09%

Lines of code

332

increased by22.51%

Number of lines in readme file

123

increased by0.82%

No dependency changes