JSFiddle - React, Tailwind, and code Playground

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

HTML

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

JavaScript

const $pug = document.getElementById('pug')
const $sass = document.getElementById('sass')

$pug.oninput = (el) => {
	const text = el.target.value
  
  $sass.value = pugToSass(fixOffset(text))
}

const fixOffset = (text) => {
  const textArray = text.split('\n')
  const firstLine = textArray[0]
  const startOffset = firstLine.length - firstLine.trimStart().length
  const fixedOffsetTextArray = textArray.map((line) => line.slice(startOffset))

  $pug.value = fixedOffsetTextArray.join('\n')
  
  return fixedOffsetTextArray
}

const pugToSass = (textArray) => {
	const sass = textArray.map((line) => {
    if (line.length - line.trimStart().length) {
    	line = '  ' + line.trimStart()
    }

    for (let i = 2; i < line.length - 2; i++) {
    	if ([' ', ':', '!', '('].includes(line.charAt(i))) {
        line = line.slice(0, i)
      }
    }

    line = line.split('.').map((prop, index) => {
    	if (index === 1 && prop.toUpperCase() === prop) {
      	prop = ''
      }
      return prop
    }).filter(Boolean).join('.')

    line = line.replace('+b', '')
    line = line.replace('+e.', '&__')

    return line
  }).join('\n')
  
  return sass;
}