Add support for radial gradients

Author: larsenwork

README.md

@@ -93,6 +93,39 @@ Visual examples and online editor on [larsenwork.com/easing-gradients](https://l
     hsl(0, 100%, 50%)
   );
 }
+
+.radial {
+  background: radial-gradient(
+    circle at top right,
+    red,
+    ease-in-out,
+    blue
+  );
+  /* => */
+  background: radial-gradient(
+    circle at top right,
+    hsl(0, 100%, 50%),
+    hsl(353.5, 100%, 49.71%) 7.7%,
+    hsl(347.13, 100%, 48.89%) 14.8%,
+    hsl(341.1, 100%, 47.69%) 21%,
+    hsl(335.24, 100%, 46.22%) 26.5%,
+    hsl(329.48, 100%, 44.57%) 31.4%,
+    hsl(323.63, 100%, 42.76%) 35.9%,
+    hsl(317.56, 100%, 40.82%) 40.1%,
+    hsl(310.92, 100%, 38.7%) 44.2%,
+    hsl(303.81, 100%, 36.49%) 48.1%,
+    hsl(296, 100%, 36.55%) 52%,
+    hsl(288.73, 100%, 38.81%) 56%,
+    hsl(282.14, 100%, 40.92%) 60.1%,
+    hsl(276.09, 100%, 42.84%) 64.3%,
+    hsl(270.27, 100%, 44.64%) 68.8%,
+    hsl(264.54, 100%, 46.28%) 73.7%,
+    hsl(258.7, 100%, 47.74%) 79.2%,
+    hsl(252.68, 100%, 48.92%) 85.4%,
+    hsl(246.32, 100%, 49.72%) 92.5%,
+    hsl(240, 100%, 50%)
+  );
+}
 ```
 
 <br>

demo/css/styles.css

@@ -8,7 +8,7 @@ body {
 }
 
 .gradient {
-  background-image: linear-gradient(to right, red, blue);
+  background-image: radial-gradient(circle, red, blue);
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
@@ -17,7 +17,7 @@ body {
 }
 
 .gradient--easing {
-  background: linear-gradient(to right, hsl(0, 100%, 50%), hsl(359.3, 100%, 49.42%) 7.7%, hsl(357.24, 100%, 47.8%) 14.8%, hsl(354.05, 100%, 45.49%) 21%, hsl(349.78, 100%, 42.72%) 26.5%, hsl(344.48, 100%, 39.72%) 31.4%, hsl(337.96, 100%, 36.57%) 35.9%, hsl(329.98, 100%, 33.33%) 40.1%, hsl(319.86, 100%, 29.96%) 44.2%, hsl(307.37, 100%, 26.64%) 48.1%, hsl(292.27, 100%, 26.72%) 52%, hsl(279.58, 100%, 30.13%) 56%, hsl(269.59, 100%, 33.49%) 60.1%, hsl(261.71, 100%, 36.71%) 64.3%, hsl(255.27, 100%, 39.86%) 68.8%, hsl(250.04, 100%, 42.84%) 73.7%, hsl(245.83, 100%, 45.57%) 79.2%, hsl(242.68, 100%, 47.86%) 85.4%, hsl(240.67, 100%, 49.45%) 92.5%, hsl(240, 100%, 50%));
+  background: radial-gradient(circle at top right, hsl(0, 100%, 50%), hsl(353.5, 100%, 49.71%) 7.7%, hsl(347.13, 100%, 48.89%) 14.8%, hsl(341.1, 100%, 47.69%) 21%, hsl(335.24, 100%, 46.22%) 26.5%, hsl(329.48, 100%, 44.57%) 31.4%, hsl(323.63, 100%, 42.76%) 35.9%, hsl(317.56, 100%, 40.82%) 40.1%, hsl(310.92, 100%, 38.7%) 44.2%, hsl(303.81, 100%, 36.49%) 48.1%, hsl(296, 100%, 36.55%) 52%, hsl(288.73, 100%, 38.81%) 56%, hsl(282.14, 100%, 40.92%) 60.1%, hsl(276.09, 100%, 42.84%) 64.3%, hsl(270.27, 100%, 44.64%) 68.8%, hsl(264.54, 100%, 46.28%) 73.7%, hsl(258.7, 100%, 47.74%) 79.2%, hsl(252.68, 100%, 48.92%) 85.4%, hsl(246.32, 100%, 49.72%) 92.5%, hsl(240, 100%, 50%));
   width: 100vw;
   opacity: 1;
 }

demo/css/styles.pcss

@@ -8,7 +8,7 @@ body {
 }
 
 .gradient {
-  background-image: linear-gradient(to right, red, blue);
+  background-image: radial-gradient(circle, red, blue);
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
@@ -17,7 +17,7 @@ body {
 }
 
 .gradient--easing {
-  background: linear-gradient(to right, red, ease-in-out, blue);
+  background: radial-gradient(circle at top right, red, ease-in-out, blue);
   width: 100vw;
   opacity: 1;
 }

index.js

@@ -11,13 +11,13 @@ module.exports = postcss.plugin('easing-gradient', (options = {}) => {
   return function (css) {
     css.walkRules((rule) => {
       rule.walkDecls((decl) => {
-        // If declaration value contains a linear-gradient.
-        if (decl.value.includes('linear-gradient')) {
+        // If declaration value contains a -gradient.
+        if (decl.value.includes('-gradient')) {
           // Parse the declaration and walk through the nodes - https://github.com/TrySound/postcss-value-parser.
           const parsedValue = valueParser(decl.value)
           parsedValue.walk((node) => {
             // Only modify gradient as the value can contain more e.g. 'linear-gradient(black, pink) center'.
-            if (node.value === 'linear-gradient') {
+            if (node.value === 'linear-gradient' || node.value === 'radial-gradient') {
               // Get a sensible array of gradient parameters where e.g. a function is split into multiple array items
               const gradientParams = valueParser
                 .stringify(helpers.divToSemiColon(node.nodes))
@@ -34,9 +34,9 @@ module.exports = postcss.plugin('easing-gradient', (options = {}) => {
                     node.type = 'word'
                     // Assume if it has 4 params it's because the first one is the direction
                     if (gradientParams.length === 4) {
-                      node.value = `linear-gradient(${gradientParams[0]}, ${colorStops.join(', ')})`
+                      node.value = `${node.value}(${gradientParams[0]}, ${colorStops.join(', ')})`
                     } else {
-                      node.value = `linear-gradient(${colorStops.join(', ')})`
+                      node.value = `${node.value}(${colorStops.join(', ')})`
                     }
                     // Update our declaration value
                     decl.value = parsedValue.toString()

index.test.js

@@ -33,6 +33,13 @@ it('create an ease gradient with direction', () => {
     { }
   )
 })
+it('create an ease radial-gradient', () => {
+  return run(
+    'a{ background: radial-gradient(circle at top right, red, ease-in-out, blue); }',
+    'a{ background: radial-gradient(circle at top right, hsl(0, 100%, 50%), hsl(353.5, 100%, 49.71%) 7.7%, hsl(347.13, 100%, 48.89%) 14.8%, hsl(341.1, 100%, 47.69%) 21%, hsl(335.24, 100%, 46.22%) 26.5%, hsl(329.48, 100%, 44.57%) 31.4%, hsl(323.63, 100%, 42.76%) 35.9%, hsl(317.56, 100%, 40.82%) 40.1%, hsl(310.92, 100%, 38.7%) 44.2%, hsl(303.81, 100%, 36.49%) 48.1%, hsl(296, 100%, 36.55%) 52%, hsl(288.73, 100%, 38.81%) 56%, hsl(282.14, 100%, 40.92%) 60.1%, hsl(276.09, 100%, 42.84%) 64.3%, hsl(270.27, 100%, 44.64%) 68.8%, hsl(264.54, 100%, 46.28%) 73.7%, hsl(258.7, 100%, 47.74%) 79.2%, hsl(252.68, 100%, 48.92%) 85.4%, hsl(246.32, 100%, 49.72%) 92.5%, hsl(240, 100%, 50%)); }', // eslint-disable-line max-len
+    { }
+  )
+})
 
 /**
  * Output with custom settings