fix: make all keyframe names safe in CSS #102
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Use `-mui-string-safe` to remove any special character from keyframes names.
This was referenced Apr 6, 2018
Closed
ncoden
added a commit
to ncoden/motion-ui
that referenced
this pull request
May 21, 2018
# Motion UI v2.0.0 We're happy to release Motion UI 2.0 with a better support of macOS Safari, API improvements, some bug fixes and various maintanance stuff. ## 🚀 Bidirectionals transitions/effects defaults We changed the default direction of all transition and effect mixins so it depends on the `in` or `out` state. Calling the same mixin with `in` and `out` states now results in the same animation playing forward and backward. 💥 **BREAKING CHANGE**. We changed the effects and transitions API the following way: * All direction-related options now have opposite values as defauls according to the `in` or `out` state. * The `slide` effect defaults are now `left` and `right` (according to `$state`) for consistency with the `slide` transition. * The `zoom` transition and effect defaults are now `0` and `1` (according to `$state`) for consistency with others transitions defaults. ### How to migrate For the `hinge`, `slide`, `spin`, `zoom` effect functions and `mui-fade`, `mui-hinge`, `mui-slide`, `mui-spin`, `mui-zoom` transition mixins: if `$state: out` is used and no direction parameters are given, manually pass the "forward" parameters to keep them playing forward. ```scss // Before @include mui-fade($state: out /*, $from: 0, $to: 1*/); // After @include mui-fade($state: out, $from: 0, $to: 1); ``` For the `slide` effect function: if no `$direction` is given, manually pass `$direction: up` to keep the effect sliding to top instead of the new default `left`/`right`. ```scss // Before $effect: slide(/* $direction: up */); // After $effect: slide($direction: up); ``` For the `mui-zoom` transition mixin: if no `$from` or `$to` are given, manually pass `$from: 1.5` and `$to: 1` to keep the previous behavior. ```scss // Before @include mui-zoom(/* $from: 1.5, $to: 1 */); // After @include mui-zoom($from: 1.5, $to: 1); ``` ## 🚀 New pausing behavior for `mui-queue` for Safari support With the previous `mui-series` behavior, the serie was paused until the `.is-animating` class was added. Unfortately, the implementation behind this did not work on all macOS Safari versions and was even breaking the whole animation. In order to fully support macOS Safari, we changed the `mui-series` paused behavior and introduced `.is-paused`. 💥 **BREAKING CHANGE**: When `.is-animating` is removed from `.mui-series`, the queue is now reset instead of paused. Setting `.is-animating` back will start the queue from its begining. From now you can: * **Start** the queue by adding `.is-animating` * **Pause** the queue by adding `.is-paused` * **Continue** the queue by removing `.is-paused` * **Reset** the queue by removing `.is-animating` ### How to migrate If you need an animation to pause midway, add `.is-paused` instead of removing `.is-animating`. For example in jQuery: ```js // Before function play($elem) { $elem.addClass('is-animating'); } function pause($elem) { $elem.removeClass('is-animating'); } // After function play($elem) { $elem.addClass('is-animating').removeClass('is-paused'); } function pause($elem) { $elem.addClass('is-paused'); } function reset($elem) { $elem.removeClass('is-animating is-paused'); } ``` As a side-effect of this, standard animations names are not supported anymore as `mui-series` queues names. Make sure you use unique names for your `mui-series` queues. ```scss // Before @include mui-series { .shake { @include mui-queue(3s, 0s, shake); } .spin { @include mui-queue(3s, 0s, spin); } } // After @include mui-series { .my-serie-shake { @include mui-queue(3s, 0s, shake); } .my-serie-spin { @include mui-queue(3s, 0s, spin); } } ``` ## 🐛 Safer animation keyframes names for CSS Fixes a bug when using decimals values for the `zoom` effect and transition arguments would generate an invalid CSS Keyframes name and break the animation. We changed the way we validate arguments and generate keyframe in such a way that they will always have a valid CSS name for all effects, transitions and arguments passed in. ## 📄 All changes * 💥 foundation#103 - Make transitions/effects directions depending on in/out state (@ncoden, closes foundation#83) * 💥 foundation#108 - Change mui-series paused behavior for better Safari support (@ncoden, closes foundation#97) * 🐛 foundation#100 - Fix deprecation warning for Sass 4.0 (@rediris, closes foundation#99) * 🐛 foundation#102 - Make animation keyframes names safe for CSS (@ncoden, closes foundation#96) * 🐛 foundation#109 - Ensure `-mui-keyframe-pct` returns a strintg instead of a list (@ncoden, closes foundation#109) * 💻 foundation#110 - Update development dependencies to latest versions (@ncoden) * 💻 foundation#112 - Ensure support of iOS Safari 7 and drop support for Android browser 2.3 (@ncoden) * 💻 foundation#111 - Add Travis to run tests on `node-sass` 3/4/latest (@ncoden) * 📖 foundation#94 - Fix parameter name for zoom animation (@cmarchena) ## 👩💻 Contributors Thank you to the amazing people who contributed to this release: * Carlos Marchena (@cmarchena) * Kevin Ball (@kball) * Nicolas Coden (@ncoden) * Roman Edirisinghe (@rediris)
ncoden
added a commit
to ncoden/motion-ui
that referenced
this pull request
May 21, 2018
We're happy to release Motion UI 2.0 with a better support of macOS Safari, API improvements, some bug fixes and various maintanance stuff. We changed the default direction of all transition and effect mixins so it depends on the `in` or `out` state. Calling the same mixin with `in` and `out` states now results in the same animation playing forward and backward. 💥 **BREAKING CHANGE**. We changed the effects and transitions API the following way: * All direction-related options now have opposite values as defauls according to the `in` or `out` state. * The `slide` effect defaults are now `left` and `right` (according to `$state`) for consistency with the `slide` transition. * The `zoom` transition and effect defaults are now `0` and `1` (according to `$state`) for consistency with others transitions defaults. For the `hinge`, `slide`, `spin`, `zoom` effect functions and `mui-fade`, `mui-hinge`, `mui-slide`, `mui-spin`, `mui-zoom` transition mixins: if `$state: out` is used and no direction parameters are given, manually pass the "forward" parameters to keep them playing forward. ```scss // Before @include mui-fade($state: out /*, $from: 0, $to: 1*/); // After @include mui-fade($state: out, $from: 0, $to: 1); ``` For the `slide` effect function: if no `$direction` is given, manually pass `$direction: up` to keep the effect sliding to top instead of the new default `left`/`right`. ```scss // Before $effect: slide(/* $direction: up */); // After $effect: slide($direction: up); ``` For the `mui-zoom` transition mixin: if no `$from` or `$to` are given, manually pass `$from: 1.5` and `$to: 1` to keep the previous behavior. ```scss // Before @include mui-zoom(/* $from: 1.5, $to: 1 */); // After @include mui-zoom($from: 1.5, $to: 1); ``` With the previous `mui-series` behavior, the serie was paused until the `.is-animating` class was added. Unfortately, the implementation behind this did not work on all macOS Safari versions and was even breaking the whole animation. In order to fully support macOS Safari, we changed the `mui-series` paused behavior and introduced `.is-paused`. 💥 **BREAKING CHANGE**: When `.is-animating` is removed from `.mui-series`, the queue is now reset instead of paused. Setting `.is-animating` back will start the queue from its begining. From now you can: * **Start** the queue by adding `.is-animating` * **Pause** the queue by adding `.is-paused` * **Continue** the queue by removing `.is-paused` * **Reset** the queue by removing `.is-animating` If you need an animation to pause midway, add `.is-paused` instead of removing `.is-animating`. For example in jQuery: ```js // Before function play($elem) { $elem.addClass('is-animating'); } function pause($elem) { $elem.removeClass('is-animating'); } // After function play($elem) { $elem.addClass('is-animating').removeClass('is-paused'); } function pause($elem) { $elem.addClass('is-paused'); } function reset($elem) { $elem.removeClass('is-animating is-paused'); } ``` As a side-effect of this, standard animations names are not supported anymore as `mui-series` queues names. Make sure you use unique names for your `mui-series` queues. ```scss // Before @include mui-series { .shake { @include mui-queue(3s, 0s, shake); } .spin { @include mui-queue(3s, 0s, spin); } } // After @include mui-series { .my-serie-shake { @include mui-queue(3s, 0s, shake); } .my-serie-spin { @include mui-queue(3s, 0s, spin); } } ``` Fixes a bug when using decimals values for the `zoom` effect and transition arguments would generate an invalid CSS Keyframes name and break the animation. We changed the way we validate arguments and generate keyframe in such a way that they will always have a valid CSS name for all effects, transitions and arguments passed in. * 💥 foundation#103 - Make transitions/effects directions depending on in/out state (@ncoden, closes foundation#83) * 💥 foundation#108 - Change mui-series paused behavior for better Safari support (@ncoden, closes foundation#97) * 🐛 foundation#100 - Fix deprecation warning for Sass 4.0 (@rediris, closes foundation#99) * 🐛 foundation#102 - Make animation keyframes names safe for CSS (@ncoden, closes foundation#96) * 🐛 foundation#109 - Ensure `-mui-keyframe-pct` returns a strintg instead of a list (@ncoden, closes foundation#109) * 💻 foundation#110 - Update development dependencies to latest versions (@ncoden) * 💻 foundation#112 - Ensure support of iOS Safari 7 and drop support for Android browser 2.3 (@ncoden) * 💻 foundation#111 - Add Travis to run tests on `node-sass` 3/4/latest (@ncoden) * 📖 foundation#94 - Fix parameter name for zoom animation (@cmarchena) Thank you to the amazing people who contributed to this release: * Carlos Marchena (@cmarchena) * Kevin Ball (@kball) * Nicolas Coden (@ncoden) * Roman Edirisinghe (@rediris)
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Changes:
-mui-string-safeto make strings safes in CSS-mui-string-safein all effects for keyframe names, instead of case-per-case protections.Replaces #98
Closes #96