Changes for Tailwind 1.0.0 and multiple improvements

.gitignore

@@ -1 +1 @@
-/node_modules/
+/node_modules/

.release-it.json

@@ -1,5 +1,5 @@
 {
- "src": {
+ "git": {
  "tagName": "v%s"
  }
-}
+}

CHANGELOG.md

@@ -5,6 +5,19 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project mostly adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [2.0.0-beta.1] - 2019-04-07
+
+### Added
+- Tailwind 1.0.0 compatibility
+- `transitionProperty` and `willChange` now accept a `default` key that generates a simple `transition` / `will-change` class
+
+### Changed
+- The plugin doesn’t accept a config object anymore; instead it finds what it needs in the `theme` and `variants` keys of your config (see `README` for more info)
+- Multiple utilities as well as responsive variants are now generated by default (see `README` for more info)
+- Shorter class names for transition durations (`transition-duration-500` is now `transition-500`) and timing functions (`transition-timing-ease` is now `transition-ease`)
+- Transition utilities now set `transition-property` instead of the `transition` shorthand; as a result, responsive transition utilities don’t reset the duration, timing function or delay anymore
+- For the above to work, the plugin now sets some base styles on all elements (changes `transition-property`'s default value of `all` to `none`, and sets the default duration, timing function, and delay defined in the theme)
+
 ## [1.0.4] - 2018-11-04
 
 ### Added
@@ -33,8 +46,9 @@ and this project mostly adheres to [Semantic Versioning](https://semver.org/spec
 
 Initial release
 
-[Unreleased]: https://github.com/benface/tailwindcss-transitions/compare/v1.0.4...HEAD
+[Unreleased]: https://github.com/benface/tailwindcss-transitions/compare/v2.0.0-beta.1...HEAD
+[2.0.0-beta.1]: https://github.com/benface/tailwindcss-transitions/compare/v1.0.4...v2.0.0-beta.1
 [1.0.4]: https://github.com/benface/tailwindcss-transitions/compare/v1.0.3...v1.0.4
 [1.0.3]: https://github.com/benface/tailwindcss-transitions/compare/v1.0.2...v1.0.3
 [1.0.2]: https://github.com/benface/tailwindcss-transitions/compare/v1.0.1...v1.0.2
-[1.0.1]: https://github.com/benface/tailwindcss-transitions/compare/v1.0.0...v1.0.1
+[1.0.1]: https://github.com/benface/tailwindcss-transitions/compare/v1.0.0...v1.0.1

README.md

@@ -1,4 +1,4 @@
-# Transitions Tailwind CSS Plugin
+# Transitions Plugin for Tailwind CSS
 
 ## Installation
 
@@ -11,70 +11,121 @@ npm install tailwindcss-transitions
 ```js
 // In your Tailwind CSS config
 {
+ theme: {
+ transitionProperty: { // defaults to these values
+ 'default': 'all',
+ 'none': 'none',
+ 'color': 'color',
+ 'bg': 'background-color',
+ 'border': 'border-color',
+ 'colors': ['color', 'background-color', 'border-color'],
+ 'opacity': 'opacity',
+ 'transform': 'transform',
+ },
+ transitionDuration: { // defaults to these values
+ 'default': '250ms',
+ '0': '0ms',
+ '100': '100ms',
+ '250': '250ms',
+ '500': '500ms',
+ '750': '750ms',
+ '1000': '1000ms',
+ },
+ transitionTimingFunction: { // defaults to these values
+ 'default': 'ease',
+ 'linear': 'linear',
+ 'ease': 'ease',
+ 'ease-in': 'ease-in',
+ 'ease-out': 'ease-out',
+ 'ease-in-out': 'ease-in-out',
+ },
+ transitionDelay: { // defaults to these values
+ 'default': '0ms',
+ '0': '0ms',
+ '100': '100ms',
+ '250': '250ms',
+ '500': '500ms',
+ '750': '750ms',
+ '1000': '1000ms',
+ },
+ willChange: { // defaults to these values
+ 'default': 'contents',
+ 'auto': 'auto',
+ 'scroll': 'scroll-position',
+ 'opacity': 'opacity',
+ 'transform': 'transform',
+ },
+ },
+ variants: {
+ transitionProperty: ['responsive'], // defaults to ['responsive']
+ transitionDuration: ['responsive'], // defaults to ['responsive']
+ transitionTimingFunction: ['responsive'], // defaults to ['responsive']
+ transitionDelay: ['responsive'], // defaults to ['responsive']
+ willChange: ['responsive'], // defaults to ['responsive']
+ },
  plugins: [
- require('tailwindcss-transitions')({
- variants: ['responsive'],
- properties: {
- 'opacity': 'opacity',
- 'opacity-and-color': ['opacity', 'color'],
- },
- durations: {
- 'default': '100ms',
- '200': '200ms',
- '300': '300ms',
- '400': '400ms',
- '500': '500ms',
- },
- timingFunctions: {
- 'default': 'linear',
- 'ease': 'ease',
- },
- delays: {
- 'none': '0s',
- },
- willChange: {
- 'opacity': 'opacity',
- 'transform': 'transform',
- },
- }),
+ require('tailwindcss-transitions')(),
  ],
 }
 ```
 
 This plugin generates the following utilities:
 
 ```css
+/* configurable with the "transitionProperty" theme object */
+.transition {
+ transition-property: all;
+}
 .transition-none {
- transition: none;
+ transition-property: none;
+}
+.transition-[key] {
+ transition-property: [value];
 }
 
-/* configurable with the "properties" option, taking into account the "default" key of "durations", "timingFunctions", and "delays" */
-.transition-opacity {
- transition: opacity 100ms linear;
+/* configurable with the "transitionDuration" theme object */
+.transition-0 {
+ transition-duration: 0ms;
 }
-.transition-opacity-and-color {
- transition: opacity 100ms linear, color 100ms linear;
+.transition-100 {
+ transition-duration: 100ms;
 }
-
-/* configurable with the "durations" option */
-.transition-duration-[name] {
+.transition-[key] {
  transition-duration: [value];
 }
 
-/* configurable with the "timingFunctions" option */
-.transition-timing-[name] {
+/* configurable with the "transitionTimingFunction" theme object */
+.transition-linear {
+ transition-timing-function: linear;
+}
+.transition-ease {
+ transition-timing-function: ease;
+}
+.transition-[key] {
  transition-timing-function: [value];
 }
 
-/* configurable with the "delays" option */
-.transition-delay-[name] {
+/* configurable with the "transitionDelay" theme object */
+.transition-delay-0 {
+ transition-delay: 0ms;
+}
+.transition-delay-100 {
+ transition-delay: 100ms;
+}
+.transition-delay-[key] {
  transition-delay: [value];
 }
 
-/* configurable with the "willChange" option */
-.will-change-[name] {
+/* configurable with the "willChange" theme object */
+.will-change {
+ will-change: contents;
+}
+.will-change-auto {
+ will-change: auto;
+}
+.will-change-[key] {
  will-change: [value];
 }
 ```
 
-Note: The `durations`, `timingFunctions`, and `delays` options optionally accept a `default` key but it doesn't generate any class; the default value is only used for the shorthand `transition` declarations in the `transition-[property]` utilities.
+Note: All the theme objects optionally accept a `default` key. For `transitionProperty` and `willChange`, that key generates a simple `transition` / `will-change` class (instead of `transition-default` / `will-change-default`). For `transitionDuration`, `transitionTimingFunction`, and `transitionDelay`, the `default` key doesn’t generate any class; it is used to generate base styles applied to all elements (`*`) so that you can use one of the `transition-[property]` classes without having to define a duration, timing function, or delay every time. Therefore, with no configuration, simply adding the `transition` class to an element applies a `250ms` transition to `all` its properties.