JSFiddle - React, Tailwind, and code Playground

by Константин Дралюк

HTML

<textarea name="" id="pug" cols="100" rows="15"></textarea>
            
<textarea name="" id="sass" cols="100" rows="15"></textarea>

JavaScript

String.prototype.trimStart = String.prototype.trimStart ? String.prototype.trimStart : function() {
	if(String.prototype.trimLeft) {
		return this.trimLeft();
	} else if(String.prototype.trim) {
		var trimmed = this.trim();
		var indexOfWord = this.indexOf(trimmed);
		
		return this.slice(indexOfWord, this.length);
	}
};

const addSpaces = amount => {
	let spaces = ''
  for (let i = 0; i < amount; i++) {
  	spaces += ' '
  }
  return spaces
}

const getStartOffset = line => {
	if (!line) return false
  return line.length - line.trimStart().length
}

const removeOffset = text => {
	let lines = text.split('\n')
	const firstLine = lines.find(line => /\b/.test(line))

  return lines.map(line => line.slice(getStartOffset(firstLine))).join('\n')
}

const removeLinesChunks = lines => {
	return lines.filter(line => {
  	return /^\+b|\+e/.test(line.trim())
  })
}

const textToLines = text => {
	let lines = text.split('\n')

  lines = lines.map(line => {
  	return line
      .replace(': +e', `\n${addSpaces(getStartOffset(line) + 2)}+e`)
      .replace(': +b', `\n${addSpaces(getStartOffset(line) + 2)}+b`)
  }).join('\n').split('\n')

  return removeLinesChunks(lines)
}

const buildBlocks = lines => {
	const blocks = []
	const items = []

  const clearLine = line => {
  	let clearedLine = line.trim().replace(/\(.*\)/, '').replace(/( |!).*$/, '')

    return clearedLine
  }

  const buildItem = line => {
  	let lineArray = clearLine(line).split('.')
    
    const hasTag = lineArray[1].toUpperCase() === lineArray[1]
    
    if (hasTag) {
    	lineArray = [...lineArray.slice(0, 1), ...lineArray.slice(2)]
    }

   	const type = /^\+b/.test(line.trim()) ? 'block' : 'element'
    const name = lineArray[1]

    const modifiers = lineArray.filter(prop => {
    	const RE = new RegExp(`^-|${name}--`)
      return RE.test(prop)
    })

    return {type, name, line, modifiers}
  }

	const buildItems = lines.map(line => {
    const item = buildItem(line)

    const parent =...