Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Allow replacing sub values like transform within transition property #25

Closed
wants to merge 1 commit into from

3 participants

Ben Scholzen Pete Boere biziclop
Ben Scholzen

This patch allows to replace sub values of properties with their vendor prefixed versions, for instance:

transition: transform 1s;

will be expanded to:

-moz-transition: -moz-transform 1s;
-webkit-transition: -webkit-transform 1s;
-ms-transition: -ms-transform 1s;
-o-transition: -o-transform 1s;
transition: transform 1s;

Pete Boere
Owner

Thanks for your code. The shortcoming with transition properties is definitely worth fixing.

biziclop

Maybe there could be a general solution, something like

-*-transition: -*-transform 1s;
Ben Scholzen

Any news about this?

Pete Boere
Owner

Hi,

The main problem with this is that browsers un-prefix properties at different times, so makes it unsafe to auto-prefix.

For example, presuming we want to turn this:

transition: .2s transform;

Into this:

-webkit-transition: .2s -webkit-transform;
transition: .2s transform;

In this scenario if webkit un-prefixes the transition property before it un-prefixes the transform property it would fall through to the second declaration and fail trying to understand the un-prefixed transform property.

The problem is compounded when you add the other vendors all of which drop their prefixes at different times.

Unfortunately, I think the only safe way to do this is manually using the transtion-property for better separation, or use the all keyword.

transition: .2s all;
transition-property: transform, -moz-transform, -webkit-transform;
Pete Boere peteboere closed this
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
This page is out of date. Refresh to see the latest.
Showing with 31 additions and 5 deletions.
  1. +5 −0 Aliases.ini
  2. +26 −5 lib/Rule.php
5 Aliases.ini
View
@@ -191,6 +191,11 @@
display:box[] = -moz-box
display:box[] = -ms-box
+ ; Transform
+ transition:transform[] = -webkit-transform
+ transition:transform[] = -moz-transform
+ transition:transform[] = -ms-transform
+ transition:transform[] = -o-transform
;----------------------------------------------------------------------------
;-- Function aliases
31 lib/Rule.php
View
@@ -248,6 +248,8 @@ public function addValueAliases () {
return;
}
+ $used_value_aliases = array();
+
$new_set = array();
foreach ( $this->declarations as $declaration ) {
if ( !$declaration->skip ) {
@@ -255,12 +257,31 @@ public function addValueAliases () {
if ( $this->propertyCount( $value_prop ) < 1 ) {
continue;
}
+
foreach ( $value_aliases as $value => $aliases ) {
- if ( $declaration->value === $value ) {
- foreach ( $aliases as $alias ) {
- $copy = clone $declaration;
- $copy->value = $alias;
- $new_set[] = $copy;
+ if ( preg_match( '((?:^| )' . preg_quote($value) . '(?: |$))', $declaration->value ) ) {
+ if ( $declaration->vendor ) {
+ $value_search = '-' . $declaration->vendor . '-' . $value;
+
+ if ( in_array( $value_search, $aliases ) ) {
+ $declaration->value = preg_replace( '((^| )' . preg_quote($value) . '( |$))', '\1' . $value_search . '\2', $declaration->value );
+ $used_value_aliases[ $declaration->family ][] = $value_search;
+ }
+ } else {
+ foreach ( $aliases as $alias ) {
+ if (
+ isset( $used_value_aliases[ $declaration->family ] ) and
+ in_array( $alias, $used_value_aliases[ $declaration->family ] )
+ ) {
+ // If the value alias has already been applied in a vendor property
+ // for the same declaration property assume all is good
+ continue;
+ }
+
+ $copy = clone $declaration;
+ $copy->value = preg_replace( '((^| )' . preg_quote($value) . '( |$))', '\1' . $alias . '\2', $declaration->value );
+ $new_set[] = $copy;
+ }
}
}
}
Something went wrong with that request. Please try again.