Merge branch 'master' of https://github.com/pmndrs/react-spring

pmndrs · Apr 25, 2021 · 0206409 · 0206409
2 parents c9288bf + fbfb0f7
commit 0206409
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 2 deletions.
diff --git a/packages/shared/src/createInterpolator.test.ts b/packages/shared/src/createInterpolator.test.ts
@@ -149,4 +149,13 @@ describe('Interpolation', () => {
 
     expect(interpolation(0.5)).toBe('rgba(2, 2, 2, 0.5)')
   })
+
+  it('should not match partial color names', () => {
+    const interpolation = createInterpolator({
+      range: [0, 1],
+      output: ['grayscale(0%)', 'grayscale(100%)'],
+    })
+
+    expect(interpolation(0.5)).toBe('grayscale(50%)')
+  })
 })
diff --git a/packages/shared/src/stringInterpolation.ts b/packages/shared/src/stringInterpolation.ts
@@ -36,8 +36,10 @@ export const createStringInterpolator = (
 ) => {
   if (!namedColorRegex)
     namedColorRegex = G.colors
-      ? new RegExp(`(${Object.keys(G.colors).join('|')})`, 'g')
-      : /^\b$/ // never match
+      ? // match color names, ignore partial matches
+        new RegExp(`(${Object.keys(G.colors).join('|')})(?!\\w)`, 'g')
+      : // never match
+        /^\b$/
 
   // Convert colors to rgba(...)
   const output = config.output.map(value =>