@tailwindcss/forms - npm Package Compare versions

Comparing version 0.4.0 to 0.5.4

CHANGELOG.md

@@ -12,2 +12,45 @@ # Changelog
 
+## [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
@@ -91,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
@@ -94,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.4.0",
+  "version": "0.5.4",
   "main": "src/index.js",
+  "types": "src/index.d.ts",
   "license": "MIT",
@@ -26,9 +27,7 @@ "repository": "https://github.com/tailwindlabs/tailwindcss-forms",
   "devDependencies": {
-    "autoprefixer": "^10.0.2",
-    "chokidar-cli": "^2.1.0",
-    "clean-css": "^4.2.1",
+    "autoprefixer": "^10.4.6",
     "concurrently": "^5.3.0",
-    "live-server": "^1.2.1",
-    "postcss": "^8.1.7",
-    "tailwindcss": "next"
+    "live-server": "^1.2.2",
+    "postcss": "^8.4.13",
+    "tailwindcss": "^3.0.24"
   },
@@ -35,0 +34,0 @@ "dependencies": {

README.md

@@ -7,12 +7,6 @@ # @tailwindcss/forms
 
-> Note that @tailwindcss/forms is designed for Tailwind CSS v2.0.
-
 Install the plugin from npm:
 
 ```sh
-# Using npm
-npm install @tailwindcss/forms
-
-# Using Yarn
-yarn add @tailwindcss/forms
+npm install -D @tailwindcss/forms
 ```
@@ -61,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:
@@ -78,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
@@ -127,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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Filesystem access

Supply chain risk

Accesses the file system, and could potentially read sensitive data.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

76391

increased by1.46%

Dev dependency count

5

decreased by-28.57%

Lines of code

1276

increased by6.16%

Number of low supply chain risk alerts

1

decreased by-50%

Worsened metrics

Number of package files

13

decreased by-13.33%

Number of lines in readme file

123

decreased by-0.81%