Last active
March 24, 2023 01:56
-
-
Save kentliau/21b7f67c32a159a574127b2e0d07df1a to your computer and use it in GitHub Desktop.
Recursively go through an object with Javascript, made for exposing tailwind colors object to a flatten CSS/SCSS variables list
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
let deeplyNestedObject = { | |
'foo1': 'bar1', | |
'lorem1': 'ipsum1', | |
'dolor1': { | |
'foo2': 'bar2', | |
'lorem2': 'ipsum2', | |
'dolor2': { | |
'foo3': 'bar3', | |
'lorem3': 'ipsum3', | |
'dolor3': { | |
'foo4': 'bar4', | |
'lorem4': 'ipsum4', | |
'dolor4': { | |
'foo5': 'bar5', | |
'lorem5': 'ipsum5', | |
'dolor5': { | |
'foo6': 'bar6', | |
'lorem6': 'ipsum6', | |
'dolor6': { | |
'foo7': 'bar7', | |
'lorem7': 'ipsum7', | |
'dolor7': { | |
'foo8': 'bar8', | |
'lorem8': 'ipsum8', | |
'dolor8': { | |
'foo9': 'bar9', | |
'lorem9': 'ipsum9', | |
}, | |
}, | |
}, | |
}, | |
}, | |
}, | |
}, | |
}, | |
}; | |
let colors = { | |
inherit: 'inherit', | |
current: 'currentColor', | |
transparent: 'transparent', | |
black: '#000', | |
white: '#fff', | |
slate: { | |
'50': '#f8fafc', | |
'100': '#f1f5f9', | |
'200': '#e2e8f0', | |
'300': '#cbd5e1', | |
'400': '#94a3b8', | |
'500': '#64748b', | |
'600': '#475569', | |
'700': '#334155', | |
'800': '#1e293b', | |
'900': '#0f172a' | |
}, | |
gray: { | |
'50': '#f9fafb', | |
'100': '#f3f4f6', | |
'200': '#e5e7eb', | |
'300': '#d1d5db', | |
'400': '#9ca3af', | |
'500': '#6b7280', | |
'600': '#4b5563', | |
'700': '#374151', | |
'800': '#1f2937', | |
'900': '#111827' | |
}, | |
zinc: { | |
'50': '#fafafa', | |
'100': '#f4f4f5', | |
'200': '#e4e4e7', | |
'300': '#d4d4d8', | |
'400': '#a1a1aa', | |
'500': '#71717a', | |
'600': '#52525b', | |
'700': '#3f3f46', | |
'800': '#27272a', | |
'900': '#18181b' | |
}, | |
neutral: { | |
'50': '#fafafa', | |
'100': '#f5f5f5', | |
'200': '#e5e5e5', | |
'300': '#d4d4d4', | |
'400': '#a3a3a3', | |
'500': '#737373', | |
'600': '#525252', | |
'700': '#404040', | |
'800': '#262626', | |
'900': '#171717' | |
}, | |
stone: { | |
'50': '#fafaf9', | |
'100': '#f5f5f4', | |
'200': '#e7e5e4', | |
'300': '#d6d3d1', | |
'400': '#a8a29e', | |
'500': '#78716c', | |
'600': '#57534e', | |
'700': '#44403c', | |
'800': '#292524', | |
'900': '#1c1917' | |
}, | |
red: { | |
'50': '#fef2f2', | |
'100': '#fee2e2', | |
'200': '#fecaca', | |
'300': '#fca5a5', | |
'400': '#f87171', | |
'500': '#ef4444', | |
'600': '#dc2626', | |
'700': '#b91c1c', | |
'800': '#991b1b', | |
'900': '#7f1d1d' | |
}, | |
orange: { | |
'50': '#fff7ed', | |
'100': '#ffedd5', | |
'200': '#fed7aa', | |
'300': '#fdba74', | |
'400': '#fb923c', | |
'500': '#f97316', | |
'600': '#ea580c', | |
'700': '#c2410c', | |
'800': '#9a3412', | |
'900': '#7c2d12' | |
}, | |
amber: { | |
'50': '#fffbeb', | |
'100': '#fef3c7', | |
'200': '#fde68a', | |
'300': '#fcd34d', | |
'400': '#fbbf24', | |
'500': '#f59e0b', | |
'600': '#d97706', | |
'700': '#b45309', | |
'800': '#92400e', | |
'900': '#78350f' | |
}, | |
yellow: { | |
'50': '#fefce8', | |
'100': '#fef9c3', | |
'200': '#fef08a', | |
'300': '#fde047', | |
'400': '#facc15', | |
'500': '#eab308', | |
'600': '#ca8a04', | |
'700': '#a16207', | |
'800': '#854d0e', | |
'900': '#713f12' | |
}, | |
lime: { | |
'50': '#f7fee7', | |
'100': '#ecfccb', | |
'200': '#d9f99d', | |
'300': '#bef264', | |
'400': '#a3e635', | |
'500': '#84cc16', | |
'600': '#65a30d', | |
'700': '#4d7c0f', | |
'800': '#3f6212', | |
'900': '#365314' | |
}, | |
green: { | |
'50': '#f0fdf4', | |
'100': '#dcfce7', | |
'200': '#bbf7d0', | |
'300': '#86efac', | |
'400': '#4ade80', | |
'500': '#22c55e', | |
'600': '#16a34a', | |
'700': '#15803d', | |
'800': '#166534', | |
'900': '#14532d' | |
}, | |
emerald: { | |
'50': '#ecfdf5', | |
'100': '#d1fae5', | |
'200': '#a7f3d0', | |
'300': '#6ee7b7', | |
'400': '#34d399', | |
'500': '#10b981', | |
'600': '#059669', | |
'700': '#047857', | |
'800': '#065f46', | |
'900': '#064e3b' | |
}, | |
teal: { | |
'50': '#f0fdfa', | |
'100': '#ccfbf1', | |
'200': '#99f6e4', | |
'300': '#5eead4', | |
'400': '#2dd4bf', | |
'500': '#14b8a6', | |
'600': '#0d9488', | |
'700': '#0f766e', | |
'800': '#115e59', | |
'900': '#134e4a' | |
}, | |
cyan: { | |
'50': '#ecfeff', | |
'100': '#cffafe', | |
'200': '#a5f3fc', | |
'300': '#67e8f9', | |
'400': '#22d3ee', | |
'500': '#06b6d4', | |
'600': '#0891b2', | |
'700': '#0e7490', | |
'800': '#155e75', | |
'900': '#164e63' | |
}, | |
sky: { | |
'50': '#f0f9ff', | |
'100': '#e0f2fe', | |
'200': '#bae6fd', | |
'300': '#7dd3fc', | |
'400': '#38bdf8', | |
'500': '#0ea5e9', | |
'600': '#0284c7', | |
'700': '#0369a1', | |
'800': '#075985', | |
'900': '#0c4a6e' | |
}, | |
blue: { | |
'50': '#eff6ff', | |
'100': '#dbeafe', | |
'200': '#bfdbfe', | |
'300': '#93c5fd', | |
'400': '#60a5fa', | |
'500': '#3b82f6', | |
'600': '#2563eb', | |
'700': '#1d4ed8', | |
'800': '#1e40af', | |
'900': '#1e3a8a' | |
}, | |
indigo: { | |
'50': '#eef2ff', | |
'100': '#e0e7ff', | |
'200': '#c7d2fe', | |
'300': '#a5b4fc', | |
'400': '#818cf8', | |
'500': '#6366f1', | |
'600': '#4f46e5', | |
'700': '#4338ca', | |
'800': '#3730a3', | |
'900': '#312e81' | |
}, | |
violet: { | |
'50': '#f5f3ff', | |
'100': '#ede9fe', | |
'200': '#ddd6fe', | |
'300': '#c4b5fd', | |
'400': '#a78bfa', | |
'500': '#8b5cf6', | |
'600': '#7c3aed', | |
'700': '#6d28d9', | |
'800': '#5b21b6', | |
'900': '#4c1d95' | |
}, | |
purple: { | |
'50': '#faf5ff', | |
'100': '#f3e8ff', | |
'200': '#e9d5ff', | |
'300': '#d8b4fe', | |
'400': '#c084fc', | |
'500': '#a855f7', | |
'600': '#9333ea', | |
'700': '#7e22ce', | |
'800': '#6b21a8', | |
'900': '#581c87' | |
}, | |
fuchsia: { | |
'50': '#fdf4ff', | |
'100': '#fae8ff', | |
'200': '#f5d0fe', | |
'300': '#f0abfc', | |
'400': '#e879f9', | |
'500': '#d946ef', | |
'600': '#c026d3', | |
'700': '#a21caf', | |
'800': '#86198f', | |
'900': '#701a75' | |
}, | |
pink: { | |
'50': '#fdf2f8', | |
'100': '#fce7f3', | |
'200': '#fbcfe8', | |
'300': '#f9a8d4', | |
'400': '#f472b6', | |
'500': '#ec4899', | |
'600': '#db2777', | |
'700': '#be185d', | |
'800': '#9d174d', | |
'900': '#831843' | |
}, | |
rose: { | |
'50': '#fff1f2', | |
'100': '#ffe4e6', | |
'200': '#fecdd3', | |
'300': '#fda4af', | |
'400': '#fb7185', | |
'500': '#f43f5e', | |
'600': '#e11d48', | |
'700': '#be123c', | |
'800': '#9f1239', | |
'900': '#881337' | |
}, | |
// VMS Color Library | |
'vms-main-dark-blue': { | |
DEFAULT: '#323C51', | |
// light: '', | |
// dark: '', | |
}, | |
// Alphapod Color Library | |
// Primary | |
'ap-sunset-orange': { | |
DEFAULT: '#FA4B4B', | |
// light : '#FA4B4B', | |
// dark : '#FA4B4B', | |
}, | |
'ap-dodger-blue': { | |
DEFAULT: '#007AFF', | |
// light : '#007AFF', | |
// dark : '#007AFF', | |
}, | |
'ap-med-sea-green': { | |
DEFAULT: '#28C85F', | |
// light : '#28C85F', | |
// dark : '#28C85F', | |
}, | |
'ap-amber': { | |
DEFAULT: '#FFC000', | |
// light : '#FFC000', | |
// dark : '#FFC000', | |
}, | |
// Reds | |
'ap-melon': { | |
DEFAULT: '#FFB4AA', | |
// light : '#FFB4AA', | |
// dark : '#FFB4AA', | |
}, | |
'ap-salmon': { | |
DEFAULT: '#FA8273', | |
// light : '#FA8273', | |
// dark : '#FA8273', | |
}, | |
'ap-brink-pink': { | |
DEFAULT: '#F57382', | |
// light : '#F57382', | |
// dark : '#F57382', | |
}, | |
'ap-caberet': { | |
DEFAULT: '#DC4664', | |
// light : '#DC4664', | |
// dark : '#DC4664', | |
}, | |
'ap-tapestry': { | |
DEFAULT: '#B45F78', | |
// light : '#B45F78', | |
// dark : '#B45F78', | |
}, | |
'ap-red-orange': { | |
DEFAULT: '#F54B23', | |
// light : '#F54B23', | |
// dark : '#F54B23', | |
}, | |
'ap-persian-red': { | |
DEFAULT: '#DC1E1E', | |
// light : '#DC1E1E', | |
// dark : '#DC1E1E', | |
}, | |
// Greens | |
'ap-turquoise': { | |
DEFAULT: '#55E6CD', | |
// light : '#55E6CD', | |
// dark : '#55E6CD', | |
}, | |
'ap-robins-egg': { | |
DEFAULT: '#00CDC8', | |
// light : '#00CDC8', | |
// dark : '#00CDC8', | |
}, | |
'ap-caribbean-green': { | |
DEFAULT: '#00CEB0', | |
// light : '#00CEB0', | |
// dark : '#00CEB0', | |
}, | |
'ap-shamrock': { | |
DEFAULT: '#19DC8C', | |
// light : '#19DC8C', | |
// dark : '#19DC8C', | |
}, | |
'ap-jungle-green': { | |
DEFAULT: '#23AF87', | |
// light : '#23AF87', | |
// dark : '#23AF87', | |
}, | |
'ap-trop-rainforest': { | |
DEFAULT: '#0A735F', | |
// light : '#0A735F', | |
// dark : '#0A735F', | |
}, | |
// Yellows | |
'ap-picasso': { | |
DEFAULT: '#FFEB91', | |
// light : '#FFEB91', | |
// dark : '#FFEB91', | |
}, | |
'ap-lemon': { | |
DEFAULT: '#FAE61E', | |
// light : '#FAE61E', | |
// dark : '#FAE61E', | |
}, | |
'ap-orange-peel': { | |
DEFAULT: '#FF9600', | |
// light : '#FF9600', | |
// dark : '#FF9600', | |
}, | |
'ap-desert-sand': { | |
DEFAULT: '#EBCDAF', | |
// light : '#EBCDAF', | |
// dark : '#EBCDAF', | |
}, | |
'ap-sandrift': { | |
DEFAULT: '#AF9682', | |
// light : '#AF9682', | |
// dark : '#AF9682', | |
}, | |
// Blues | |
'ap-light-blue': { | |
DEFAULT: '#B9D7EA', | |
// light : '#B9D7EA', | |
// dark : '#B9D7EA', | |
}, | |
'ap-maya-blue': { | |
DEFAULT: '#78AAFF', | |
// light : '#78AAFF', | |
// dark : '#78AAFF', | |
}, | |
'ap-navy-blue': { | |
DEFAULT: '#005FFA', | |
// light : '#005FFA', | |
// dark : '#005FFA', | |
}, | |
'ap-cerulean-blue': { | |
DEFAULT: '#285AC8', | |
// light : '#285AC8', | |
// dark : '#285AC8', | |
}, | |
'ap-lochmara': { | |
DEFAULT: '#2864AA', | |
// light : '#2864AA', | |
// dark : '#2864AA', | |
}, | |
'ap-smalt': { | |
DEFAULT: '#003296', | |
// light : '#003296', | |
// dark : '#003296', | |
}, | |
'ap-blue-violet': { | |
DEFAULT: '#964BFA', | |
// light : '#964BFA', | |
// dark : '#964BFA', | |
}, | |
'ap-hamlindigo-blue': { | |
DEFAULT: '#6276A3', | |
// light : '#6276A3', | |
// dark : '#6276A3', | |
}, | |
// Neutrals | |
'ap-white': { | |
DEFAULT: '#FFFFFF', | |
// light : '#FFFFFF', | |
// dark : '#FFFFFF', | |
}, | |
'ap-snow': { | |
DEFAULT: '#FAFAFA', | |
// light : '#FAFAFA', | |
// dark : '#FAFAFA', | |
}, | |
'ap-white-smoke': { | |
DEFAULT: '#F0F0F0', | |
// light : '#F0F0F0', | |
// dark : '#F0F0F0', | |
}, | |
'ap-whisper': { | |
DEFAULT: '#E6E6E6', | |
// light : '#E6E6E6', | |
// dark : '#E6E6E6', | |
}, | |
'ap-gainsboro': { | |
DEFAULT: '#DCDCDC', | |
// light : '#DCDCDC', | |
// dark : '#DCDCDC', | |
}, | |
'ap-very-light-grey': { | |
DEFAULT: '#C8C8C8', | |
// light : '#C8C8C8', | |
// dark : '#C8C8C8', | |
}, | |
'ap-nobel': { | |
DEFAULT: '#969696', | |
// light : '#969696', | |
// dark : '#969696', | |
}, | |
'ap-dim-grey': { | |
DEFAULT: '#646464', | |
// light : '#646464', | |
// dark : '#646464', | |
}, | |
'ap-night-rider': { | |
DEFAULT: '#323232', | |
// light : '#323232', | |
// dark : '#323232', | |
}, | |
'ap-nero': { | |
DEFAULT: '#242424', | |
// light : '#242424', | |
// dark : '#242424', | |
}, | |
'ap-black': { | |
DEFAULT: '#000000', | |
// light : '#000000', | |
// dark : '#000000', | |
}, | |
} | |
// Infinite deep recursion obj flattener | |
const flattener = (obj, parentAccumulator = '', parentKey = '') => { | |
return Object.keys(obj).reduce((accumulator, currentKey) => { | |
let value = obj[currentKey]; | |
if (typeof value === 'string') { | |
// The exit for the recursion | |
if (currentKey == 'DEFAULT') { | |
// Basically we want to omit the last child DEFAULT key, which always the last children already | |
return accumulator + | |
'$--' | |
+ parentKey // Always will have value | |
+ ' : ' | |
+ obj[currentKey] | |
+ ';\n'; | |
} else { | |
return accumulator + | |
'$--' | |
+ parentKey // Will be empty for the first level | |
+ (parentKey ? '-' : '') // If there no parent, then no need this extraneous `-`, e.g. inherit, current, transparent, black, white | |
+ currentKey // Always have something | |
+ ' : ' | |
+ obj[currentKey] | |
+ ';\n'; | |
} | |
} else { | |
// The diving in for the recursion | |
let _parentKey = parentKey + currentKey; | |
return flattener(value, accumulator, _parentKey); | |
} | |
}, parentAccumulator); | |
} | |
//flattener(deeplyNestedObject); | |
console.log(flattener(colors)); | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment