PostCSS Random Pastel Colors

This plugin was created with ChatGPT. Below is the conversation that resulted in this plugin.

Generating a plugin

Q 1

Me : Can you help me create a PostCSS plugin to randomize the colors in my CSS files

A 1

Sure, I'd be happy to help you create a PostCSS plugin that can randomize the colors in your CSS files. To create a PostCSS plugin, you'll need to use JavaScript to write a function that takes a CSS file as input and returns a modified version of that file with the colors randomized.

Here's an example of what the plugin might look like:

const randomizeColors = postcss.plugin('randomize-colors', () => {
  return (css) => {
    css.walkDecls((decl) => {
      if (decl.value.includes('color')) {
        decl.value = randomColor();
      }
    });
  }
});

function randomColor() {
  // Generate a random color and return it
}

This plugin uses the postcss.plugin() method to create a new PostCSS plugin called randomize-colors. The plugin function itself takes a css object, which represents the CSS file, and uses the css.walkDecls() method to iterate over all of the declarations in the file. For each declaration that includes the word "color", the plugin sets the value of the declaration to a random color generated by the randomColor() function.

Q 2

Me : Can you elaborate on the randomColor function? Maybe it should return a random hex color value

A 2

Yes, that's a good idea. The randomColor() function could generate a random hex color value, which is a six-digit code that represents a specific color. To generate a random hex color value, you could use the following code:

function randomColor() {
 const letters = '0123456789ABCDEF';
 let color = '#';
 for (let i = 0; i < 6; i++) {
   color += letters[Math.floor(Math.random() * 16)];
 }
 return color;
}

This function generates a string of six random letters or numbers, using the letters string as a list of possible characters. It then prepends the # symbol to the string to create a valid hex color value, and returns the result.

For example, a call to randomColor() might return #B73A7D, #FBC94E, or any of the other 16 million possible hex color values.

Q 3

Me : Can you change the condition to update the value when decl.prop equals color but case insensitively.

A 3

Sure, you can use the .toLowerCase() method to make the check for the word "color" case-insensitive. Here's an example of how you could update the randomizeColors plugin to do this:

const randomizeColors = postcss.plugin('randomize-colors', () => {
 return (css) => {
   css.walkDecls((decl) => {
     if (decl.prop.toLowerCase() === 'color') {
       decl.value = randomColor();
     }
   });
 }
});

In this updated version of the plugin, the if statement checks the lowercase version of the decl.prop property to see if it equals "color". This makes the check case-insensitive, so it will match CSS declarations with the property "color" as well as "Color", "COLOR", etc.

Q 4

Me : Can you make the random colors all a bit pastel?

A 4

Yes, you can make the random colors generated by the randomColor() function all a bit pastel by modifying the function to generate only colors with relatively low saturation and lightness values. To do this, you could use the HSL color model, which represents colors as values for hue, saturation, and lightness, rather than using the RGB or hexadecimal models.

Here's an example of how you could modify the randomColor() function to generate pastel colors:

function randomColor() {
 const hue = Math.floor(Math.random() * 360);
 const saturation = Math.floor(Math.random() * 20) + 20; // 20-40%
 const lightness = Math.floor(Math.random() * 20) + 60; // 60-80%
 return `hsl(${hue}, ${saturation}%, ${lightness}%)`;
}

This updated version of the randomColor() function generates random hue, saturation, and lightness values, and then combines them into an HSL color value using string interpolation. The hue value is a number between 0 and 360, representing the color's position on the color wheel. The saturation and lightness values are both percentages between 0% and 100%, representing the intensity of the color and its lightness or darkness, respectively.

By setting the saturation and lightness values to be within a certain range (in this case, between 20% and 40% for saturation, and between 60% and 80% for lightness), you can ensure that the generated colors are all relatively pale and muted. This will make them look more pastel than if the saturation and lightness values were allowed to be higher or lower.

The final result :

const randomizeColors = postcss.plugin('randomize-colors', () => {
	return (css) => {
		css.walkDecls((decl) => {
			if (decl.prop.toLowerCase() === 'color') {
				decl.value = randomColor();
			}
		});
	}
});

function randomColor() {
	const hue = Math.floor(Math.random() * 360);
	const saturation = Math.floor(Math.random() * 20) + 20; // 20-40%
	const lightness = Math.floor(Math.random() * 20) + 60; // 60-80%
	return `hsl(${hue}, ${saturation}%, ${lightness}%)`;
}

Fixing the plugin

This is missing some bits :

• postcss is not defined
• there is no export

Fixing these results in :

const postcss = require('postcss')

const randomizeColors = postcss.plugin('randomize-colors', () => {
	return (css) => {
		css.walkDecls((decl) => {
			if (decl.prop.toLowerCase() === 'color') {
				decl.value = randomColor();
			}
		});
	}
});

randomizeColors.postcss = true
module.exports = randomizeColors;

function randomColor() {
	const hue = Math.floor(Math.random() * 360);
	const saturation = Math.floor(Math.random() * 20) + 20; // 20-40%
	const lightness = Math.floor(Math.random() * 20) + 60; // 60-80%
	return `hsl(${hue}, ${saturation}%, ${lightness}%)`;
}

Unfortunately we now have a plugin in an older style. This will not work well in the current ecosystem.

It seems that ChatGPT is mostly trained on the large volume of older PostCSS plugins.

When we migrate to PostCSS 8 it looks like this :

const creator = () => {
	return {
		postcssPlugin: 'randomize-colors',
		Once: (root) => {
			root.walkDecls((decl) => {
				if (decl.prop.toLowerCase() === 'color') {
					decl.value = randomColor();
				}
			})
		}
	};
};

creator.postcss = true;
module.exports = creator;

function randomColor() {
	const hue = Math.floor(Math.random() * 360);
	const saturation = Math.floor(Math.random() * 20) + 20; // 20-40%
	const lightness = Math.floor(Math.random() * 20) + 60; // 60-80%
	return `hsl(${hue}, ${saturation}%, ${lightness}%)`;
}

When running the plugin it does this :

{ color: blue; }

{ color: hsl(310, 22%, 78%); }

{ color: blue; }

{ color: hsl(126, 39%, 66%); }

{ color: blue; }

{ color: hsl(162, 27%, 63%); }

Conclusion

There is no conclusion here as this wan't scientific research. :D I just typed stuff and a program wrote replies.