JSFiddle - React, Tailwind, and code Playground

by SSRRDD

HTML

<h1 class="colourNumberOfLikes">WHAT CARRER SHOULD YOU HAVE ?</h1>
<h1 class="stroke2">WHAT CARRER SHOULD YOU HAVE ?</h1>
<h1 class="colourNumberOfLikes">WHAT CARRER SHOULD YOU HAVE?!</h1>

CSS

body {
    background: grey;
    color: white;
    font-size: 1.5em;
}

.stroke1
{
 -webkit-text-stroke: 1px black;
}

.stroke2
{
  text-shadow:
    -1px -1px 0 #000,
     0   -1px 0 #000,
     1px -1px 0 #000,
     1px  0   0 #000,
     1px  1px 0 #000,
     0    1px 0 #000,
    -1px  1px 0 #000,
    -1px  0   0 #000;    
}


@mixin textColourAndShadow($textColour)
{
	color: $textColour !important;
}

.colourNumberOfLikes
{
  @include bcColor(red); 
	/*@include textColourAndShadow(red);*/
}
.colourNumberOfLikes1
{
	@include textColourAndShadow(var(--view-count-text-colour), var(--view-count-shadow-colour), var(--view-count-shadow-width));
}

JavaScript

function escapeRegExp(string)
{ // #important: the replace pattern should be only placed in single inverted commas like here; otherwise the result can be wrong:
  return string.replace(/[-[\]{}()*+!<=:?.\/\\^$|#\s,]/g, '\\$&'); // $& means the whole matched string
} // end of function escapeRegExp(string)

var scssRulesToProcessClassName = '@mixin textColourAndShadow($textColour: #000000, $shadowColour: #000000, $shadowWidth: 1px)',
		scssRulesToProcess = `	color: $textColour !important;
      text-shadow:
      calc(-1 * #{$shadowWidth}) calc(-1 * #{$shadowWidth}) 0 $shadowColour,
      0                          calc(-1 * #{$shadowWidth}) 0 $shadowColour,
      #{$shadowWidth}            calc(-1 * #{$shadowWidth}) 0 $shadowColour,
      #{$shadowWidth}            0                          0 $shadowColour,
      #{$shadowWidth}            #{$shadowWidth}            0 $shadowColour,
      0                          #{$shadowWidth}            0 $shadowColour,
      calc(-1 * #{$shadowWidth}) #{$shadowWidth}            0 $shadowColour,
      calc(-1 * #{$shadowWidth}) 0                          0 $shadowColour;`,
      scssIncludesToCompile =
`.colourNumberOfLikes
{
	@include textColourAndShadow(var(--view-count-text-colour), var(--view-count-shadow-colour), var(--view-count-shadow-width));
}`,
      t = {},
      cssRulesToAdd = '';

t.mixins = [];
t.mixins.push(
{
	name: String(scssRulesToProcessClassName.split(' ')[1].split('(')[0]).trim(), // textColourAndShadow
	arguments: []
}); // double \\ are necessary in RegExp:
scssRulesToProcessClassName.match(new RegExp('(?<=\\().*?(?=\\))'))[0].split(',').forEach(function(e)
{
	e = e.split(':');
  t.mixins[t.mixins.length - 1].arguments.push(
  {
    name: e[0].trim(),
    defaultValue: (e.length > 0 ? e[1].trim(): '')
	});
});

t.includes = [];
scssIncludesToCompile.match(new RegExp('(?<=\\@include).*?(?=\\;)')).forEach(function(e)
{
  t.includes.push(
  {
    name: e.split('(')[0].trim(),
    arguments: []
  }); ...