@tailwindcss/forms - npm Package Compare versions

Comparing version 0.0.0-insiders.becd3b2 to 0.0.0-insiders.c056ccf

CHANGELOG.md

@@ -10,6 +10,40 @@ # Changelog
 
+- Nothing yet!
+
+## [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 +127,8 @@
 
-[unreleased]: https://github.com/tailwindlabs/tailwindcss-forms/compare/v0.4.0...HEAD
+[unreleased]: https://github.com/tailwindlabs/tailwindcss-forms/compare/v0.5.3...HEAD
+[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 +135,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.becd3b2",
+  "version": "0.0.0-insiders.c056ccf",
   "main": "src/index.js",
+  "types": "src/index.d.ts",
   "license": "MIT",
@@ -26,5 +27,7 @@ "repository": "https://github.com/tailwindlabs/tailwindcss-forms",
   "devDependencies": {
+    "autoprefixer": "^10.4.6",
     "concurrently": "^5.3.0",
-    "live-server": "^1.2.1",
-    "tailwindcss": "^3.0.2"
+    "live-server": "^1.2.2",
+    "postcss": "^8.4.13",
+    "tailwindcss": "^3.0.24"
   },
@@ -31,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
 ```
@@ -75,19 +71,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
@@ -124,1 +107,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,5 +8,5 @@ const svgToDataUri = require('mini-svg-data-uri')
 
-const forms = plugin.withOptions(function (options = { strategy: 'base' }) {
-  return function ({ addBase, theme }) {
-    const strategy = options.strategy
+const forms = plugin.withOptions(function (options = { strategy: undefined }) {
+  return function ({ addBase, addComponents, theme }) {
+    const strategy = options.strategy === undefined ? ['base', 'class'] : [options.strategy]
 
@@ -86,2 +86,33 @@ const rules = [
       {
+        // 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'],
@@ -100,3 +131,3 @@ class: ['.form-select'],
           'padding-right': spacing[10],
-          'color-adjust': `exact`,
+          'print-color-adjust': `exact`,
         },
@@ -113,3 +144,3 @@ },
           'padding-right': spacing[3],
-          'color-adjust': 'unset',
+          'print-color-adjust': 'unset',
         },
@@ -123,3 +154,3 @@ },
           padding: '0',
-          'color-adjust': 'exact',
+          'print-color-adjust': 'exact',
           display: 'inline-block',
@@ -254,4 +285,6 @@ 'vertical-align': 'middle',
         styles: {
-          outline: `1px solid ButtonText`,
-          outline: `1px auto -webkit-focus-ring-color`,
+          outline: [
+            `1px solid ButtonText`,
+            `1px auto -webkit-focus-ring-color`
+          ],
         },
@@ -261,13 +294,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'))
+    }
   }
@@ -274,0 +311,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

49284

increased by8.26%

Number of package files

12

increased by9.09%

Lines of code

313

increased by15.5%

Number of lines in readme file

125

increased by2.46%

Worsened metrics

Dev dependency count

5

increased by66.67%

No dependency changes