Javascript based string infinite CSS selector inheritance problem

Question

I have a function named inheritance, whose code is given below :

function uniqueArray(a) {
  var seen = {}, out = [], len = a.length, j = 0, i
  for(i = 0; i < len; i++) {
  var item = a[i];
  if(seen[item] !== 1) {
    seen[item] = 1;
    out[j++] = item
  }}
  return out
}

function inheritance(lang, parent, child) {
 if(lang instanceof Array && parent instanceof Array && child instanceof Array) {
  var finArray=[], a, b, c
  for(a = 0; a < lang.length; ++a) {
  for(b = 0; b < parent.length; ++b) {
    for(c = 0; c < child.length; ++c) { 
      finArray.push(lang[a] + "-" + parent[b] + " > " + lang[a] + "-" + child[c])
 }}}
 return uniqueArray(finArray).join(", ");
}}

So, let me clear it now. The inheritance function is something ( I will call it a fast and easy way ) to define css parent-child selectors with name of the language in front of it. Let, me give an example, to make it more clear :

If I do :

console.log(
  inheritance(
    ["lang1", "lang2"],
    ["parent1", "parent2", "parent3"],
    ["child1", "child2", "child3", "child4"]
  )
)

I get this as output :

lang1-parent1 > lang1-child1, lang1-parent1 > lang1-child2, lang1-parent1 > lang1-child3, lang1-parent1 > lang1-child4, lang1-parent2 > lang1-child1, lang1-parent2 > lang1-child2, lang1-parent2 > lang1-child3, lang1-parent2 > lang1-child4, lang1-parent3 > lang1-child1, lang1-parent3 > lang1-child2, lang1-parent3 > lang1-child3, lang1-parent3 > lang1-child4, lang2-parent1 > lang2-child1, lang2-parent1 > lang2-child2, lang2-parent1 > lang2-child3, lang2-parent1 > lang2-child4, lang2-parent2 > lang2-child1, lang2-parent2 > lang2-child2, lang2-parent2 > lang2-child3, lang2-parent2 > lang2-child4, lang2-parent3 > lang2-child1, lang2-parent3 > lang2-child2, lang2-parent3 > lang2-child3, lang2-parent3 > lang2-child4

Another but more natural example :

console.log(
 inheritance(
   ["javascript", "python"],
   ["comment", "string"],
   ["number", "text"]
 )
)

And this gives :

javascript-comment > javascript-number, javascript-comment > javascript-text, javascript-string > javascript-number, javascript-string > javascript-text, python-comment > python-number, python-comment > python-text, python-string > python-number, python-string > python-text

So, now the main question. My inheritance function is limited to a single child. But I want to attach multiple childs ( I am talking about childs of childs ). For example if I do :

console.log(
 inheritance(
   ["js"],
   ["comment", "string"],
   ["text"],
   ["semiText"],
   ["evenSemiText"]
 )
)

I would get :

js-comment > js-text > js-semiText > js-evenSemiText, js-string > js-text > js-semiText > js-evenSemiText

The thing, I am speaking about, is infinite inheritance. I was able to gain parent-child-child and parent-child-child-child ( the inheritance function example is parent-child type ) type inheritance but I never hit infinite. I think think can be done using arguments, but not sure ( I am not too familiar with it ). So, can this be done ? Thanks in advance.

Joshua Joshua · Accepted Answer · 2020-06-19T15:43:26

Not sure why you'd want to do that, but i think this is what you're looking for. Not sure if this is efficient enough.

function inheritance(...args) {
    const found = new Set();

  for (let i = 0; i < args.length; ++i) {
    const arg = args[i]

    for (let j = 0; j < arg.length; ++j) {
      const lang = arg[j]

      for (let k = i + 1; k < args.length; k++) {
          const parent = args[k]

          for (let m = k + 1; m < args.length; m++) {
            const child = args[m]

            parent.forEach(p => {
                child.forEach(c => {
                    found.add(`${lang}-${p} > ${lang}-${c}`)
                })
            })
        }
      }

    }
  }

  return Array.from(found.values()).join(', ')
}

Javascript based string infinite CSS selector inheritance problem

1 Answers