Assign random pastel colors to color properties
This plugin was created with ChatGPT. Below is the conversation that resulted in this plugin.
Me : Can you help me create a PostCSS plugin to randomize the colors in my CSS files
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 calledrandomize-colors
. The plugin function itself takes acss
object, which represents the CSS file, and uses thecss.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 therandomColor()
function.
Me : Can you elaborate on the
randomColor
function? Maybe it should return a random hex color value
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.
Me : Can you change the condition to update the value when
decl.prop
equalscolor
but case insensitively.
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 therandomizeColors
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 thedecl.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.
Me : Can you make the random colors all a bit pastel?
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}%)`;
}
This is missing some bits :
postcss
is not definedFixing 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%); }
There is no conclusion here as this wasn't scientific research. :D I just typed stuff and a program wrote replies.