JSFiddle - React, Tailwind, and code Playground

by Hugo Carneiro

JavaScript

const currentField = {
	name: 'hightlightColor',
  default: '#000'
};

const value = '#333';

const configurations = [
  {
    name: 'Quick settings',
    variables: [
    	{
      	description: 'Heading color',
        fields: [
        	{
          	name: 'hightlightColor',
          	default: '#000'
          }
        ]
      }
    ]
  },
  {
  	name: 'General',
    variables: [
    	{
      	description: 'Headings',
        fields: [
        	{
          	name: 'headingColor',
            default: '$hightlightColor'
          }
        ]
      },
      {
      	description: 'Buttons',
        fields: [
        	{
          	name: 'buttonColor',
            default: '$hightlightColor'
          }
        ]
      }
    ]
  },
  {
  	name: 'Headings',
    variables: [
    	{
      	description: 'Heading 1',
        fields: [
        	{
          	name: 'headingOneColor',
            default: '$headingColor'
          }
        ]
      },
      {
      	description: 'Heading 2',
        fields: [
        	{
          	name: 'headingTwoColor',
            default: '$headingColor'
          }
        ]
      }
    ]
  }
];

function isInheriting(value) {
  if (!value) {
    return false
  }
  // Checks if the value matches a variable name
  const matchVariable = typeof value === 'string' ? value.match(/^\$([A-z0-9]+)$/) : undefined
  // If the value matches to a variable get the name of the variable
  const variableName = matchVariable && matchVariable.length ? matchVariable[1] : undefined

  return variableName ? variableName : false
}

function findDependencies(configurations, currentField) {
	const result = [];
  const variablesFound = [];
	
  function recursiveFind(cField) { 
  	configurations.forEach((config) => {
      config.variables.forEach((variable) => {
        variable.fields.forEach((field) => {
          const inheritingVariable = isInheriting(field.default);
	
          if (!inheritingVariable || inheritingVariable != cField.name) {
           ...