@tailwindcss/forms - npm Package Compare versions

Comparing version 0.4.0 to 0.4.1

CHANGELOG.md

@@ -10,4 +10,15 @@ # Changelog
 
-- Nothing yet!
+Nothing yet!
 
+## [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 +102,4 @@
 
-[unreleased]: https://github.com/tailwindlabs/tailwindcss-forms/compare/v0.4.0...HEAD
+[unreleased]: https://github.com/tailwindlabs/tailwindcss-forms/compare/v0.4.1...HEAD
+[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 +106,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.4.1",
   "main": "src/index.js",
@@ -26,9 +26,7 @@ "license": "MIT",
   "devDependencies": {
-    "autoprefixer": "^10.0.2",
-    "chokidar-cli": "^2.1.0",
-    "clean-css": "^4.2.1",
+    "autoprefixer": "^10.4.2",
     "concurrently": "^5.3.0",
     "live-server": "^1.2.1",
-    "postcss": "^8.1.7",
-    "tailwindcss": "next"
+    "postcss": "^8.4.5",
+    "tailwindcss": "^3.0.2"
   },
@@ -35,0 +33,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
 ```
@@ -19,0 +13,0 @@

src/index.js

@@ -9,3 +9,3 @@ const svgToDataUri = require('mini-svg-data-uri')
 const forms = plugin.withOptions(function (options = { strategy: 'base' }) {
-  return function ({ addBase, theme }) {
+  return function ({ addBase, addComponents, theme }) {
     const strategy = options.strategy
@@ -86,2 +86,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'],
@@ -257,13 +288,16 @@ class: ['.form-select'],
 
-    addBase(
-      rules
-        .map((rule) => {
-          if (rule[strategy] === null) {
-            return null
-          }
+    const strategyRules = rules
+      .map((rule) => {
+        if (rule[strategy] === null) {
+          return null
+        }
 
-          return { [rule[strategy]]: rule.styles }
-        })
-        .filter(Boolean)
-    )
+        return { [rule[strategy]]: rule.styles }
+      })
+      .filter(Boolean)
+
+    ;({
+      'base': addBase,
+      'class': addComponents
+    })[strategy](strategyRules)
   }
@@ -270,0 +304,0 @@ })

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

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

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

Dev dependency count

5

decreased by-28.57%

Number of low supply chain risk alerts

1

decreased by-50%

Worsened metrics

Total package byte prevSize

47397

decreased by-37.05%

Number of package files

11

decreased by-26.67%

Lines of code

304

decreased by-74.71%

Number of lines in readme file

118

decreased by-4.84%

Number of medium supply chain risk alerts

2

increased by100%

No dependency changes