@tailwindcss/forms - npm Package Compare versions

Comparing version 0.0.0-insiders.2bd8f7e to 0.0.0-insiders.3103e33

CHANGELOG.md

@@ -12,2 +12,26 @@ # Changelog
 
+## [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
+
+### Changed
+
+- Update color palette references for v3 ([#83](https://github.com/tailwindlabs/tailwindcss-forms/pull/83))
+- Don't read outline.none value from config ([#89](https://github.com/tailwindlabs/tailwindcss-forms/pull/89))
+
 ## [0.3.4] - 2021-09-28
@@ -84,3 +108,6 @@
 
-[unreleased]: https://github.com/tailwindlabs/tailwindcss-forms/compare/v0.3.4...HEAD
+[unreleased]: https://github.com/tailwindlabs/tailwindcss-forms/compare/v0.5.0...HEAD
+[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
 [0.3.4]: https://github.com/tailwindlabs/tailwindcss-forms/compare/v0.3.3...v0.3.4
@@ -87,0 +114,0 @@ [0.3.3]: https://github.com/tailwindlabs/tailwindcss-forms/compare/v0.3.2...v0.3.3

package.json

 {
   "name": "@tailwindcss/forms",
-  "version": "0.0.0-insiders.2bd8f7e",
+  "version": "0.0.0-insiders.3103e33",
   "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
 ```
@@ -77,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
@@ -126,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'],
@@ -257,13 +288,17 @@ class: ['.form-select'],
 
-    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'))
+    }
   }
@@ -270,0 +305,0 @@ })

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

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

48240

increased by4.57%

Dev dependency count

5

decreased by-28.57%

Number of lines in readme file

125

increased by0.81%

Number of low supply chain risk alerts

1

decreased by-50%

Worsened metrics

Number of package files

11

decreased by-8.33%

No dependency changes