Skip to content

Instantly share code, notes, and snippets.

@Andy-set-studio
Created May 1, 2024 11:28
Show Gist options
  • Save Andy-set-studio/9359eebe0a760e678af91f633768e033 to your computer and use it in GitHub Desktop.
Save Andy-set-studio/9359eebe0a760e678af91f633768e033 to your computer and use it in GitHub Desktop.
A GPT-generated PostCSS plugin
const postcss = require('postcss');
const colorData = {
"Dark": "#030303",
"Dark Glare": "#171717",
"Mid": "#444444",
"Mid Glare": "#cccccc",
"Light": "#ffffff",
"Light Shade": "#f7f7f7",
"Primary": "#FF006A",
"Primary Glare": "#ffeff6",
"Secondary": "#00FFD4",
"Tertiary": "#350DF2",
"Quaternary": "#FFD501",
"Quinary": "#00D5FF",
"Quinary Shade": "#0AC"
};
function toP3(hexColor) {
// Ensure the hexColor is valid and add your p3 conversion here
return hexColor; // Simplified for demonstration
}
module.exports = postcss.plugin('generate-p3-colors', function () {
return function (root) {
root.walkComments(comment => {
if (comment.text === 'generate-p3-colors') {
const rule = postcss.rule({ selector: ':root' });
Object.entries(colorData).forEach(([name, value]) => {
const propName = `--color-${name.toLowerCase().replace(/\s+/g, '-')}`;
const convertedColor = toP3(value);
rule.append({ prop: propName, value: convertedColor });
});
comment.replaceWith(rule);
}
});
};
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment