https://github.com/animatedjs/animated/pull/47

Author: drcmda

package.json

@@ -76,7 +76,6 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.0.0-beta.44",
-    "create-react-context": "^0.2.2",
-    "normalize-css-color": "^1.0.2"
+    "create-react-context": "^0.2.2"
   }
 }

src/animated/Interpolation.js

@@ -1,4 +1,4 @@
-import normalizeColor from 'normalize-css-color'
+import normalizeColor from '../normalize-css-color/index.js'
 
 var linear = t => t
 
@@ -118,17 +118,30 @@ function colorToRgba(input) {
 
 var stringShapeRegex = /[0-9\.-]+/g
 
+// Covers rgb, rgba, hsl, hsla
+// Taken from https://gist.github.com/olmokramer/82ccce673f86db7cda5e
+var colorRegex = /(#[\d\w]+|\w+\((?:\d+%?(?:,\s)*){3}(?:\d*\.?\d+)?\))/
+// Covers color names (transparent, blue, etc.)
+var colorNamesRegex = new RegExp(
+  `(${Object.keys(normalizeColor.colorNames).join('|')})`,
+  'g'
+)
+
 /**
  * Supports string shapes by extracting numbers so new values can be computed,
  * and recombines those values into new strings of the same shape.  Supports
  * things like:
  *
- *   rgba(123, 42, 99, 0.36) // colors
- *   -45deg                  // values with units
+ *   rgba(123, 42, 99, 0.36)           // colors
+ *   0 2px 2px 0px rgba(0, 0, 0, 0.12) // box shadows
+ *   -45deg                            // values with units
  */
 function createInterpolationFromStringOutputRange(config) {
   var outputRange = config.output
-  outputRange = outputRange.map(colorToRgba)
+  // Replace colors with rgba
+  outputRange = outputRange
+    .map(rangeValue => rangeValue.replace(colorRegex, colorToRgba))
+    .map(rangeValue => rangeValue.replace(colorNamesRegex, colorToRgba))
 
   // ->
   // [
@@ -160,17 +173,24 @@ function createInterpolationFromStringOutputRange(config) {
       return Interpolation.create({ ...config, output: outputRanges[i] })
     })
 
-  // rgba requires that the r,g,b are integers.... so we want to round them, but we *dont* want to
-  // round the opacity (4th column).
-  const shouldRound = /^rgb/.test(outputRange[0])
   return input => {
-    var i = 0 // 'rgba(0, 100, 200, 0)'
-    // ->
-    // 'rgba(${interpolations[0](input)}, ${interpolations[1](input)}, ...'
-    return outputRange[0].replace(stringShapeRegex, () => {
-      const val = interpolations[i++](input)
-      return String(shouldRound && i < 4 ? Math.round(val) : val)
-    })
+    var i = 0
+    return (
+      outputRange[0]
+        // 'rgba(0, 100, 200, 0)'
+        // ->
+        // 'rgba(${interpolations[0](input)}, ${interpolations[1](input)}, ...'
+        .replace(stringShapeRegex, () => interpolations[i++](input))
+        // rgba requires that the r,g,b are integers.... so we want to round them, but we *dont* want to
+        // round the opacity (4th column).
+        .replace(
+          /rgba\(([0-9\.-]+), ([0-9\.-]+), ([0-9\.-]+), ([0-9\.-]+)\)/gi,
+          (_, p1, p2, p3, p4) =>
+            `rgba(${Math.round(p1)}, ${Math.round(p2)}, ${Math.round(
+              p3
+            )}, ${p4})`
+        )
+    )
   }
 }
 

src/normalize-css-color/LICENSE

@@ -0,0 +1,29 @@
+BSD 3-Clause License
+
+Copyright (c) 2016, React Community
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+
+* Redistributions of source code must retain the above copyright notice, this
+  list of conditions and the following disclaimer.
+
+* Redistributions in binary form must reproduce the above copyright notice,
+  this list of conditions and the following disclaimer in the documentation
+  and/or other materials provided with the distribution.
+
+* Neither the name of the copyright holder nor the names of its
+  contributors may be used to endorse or promote products derived from
+  this software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
+FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
+DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
+SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
+CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
+OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

src/normalize-css-color/README.md

@@ -0,0 +1,3 @@
+# normalize-css-color
+
+Normalize a subset of CSS color values into integers