Skip to content

Instantly share code, notes, and snippets.

@kentliau
Last active March 24, 2023 01:56
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save kentliau/21b7f67c32a159a574127b2e0d07df1a to your computer and use it in GitHub Desktop.
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
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