JSFiddle - React, Tailwind, and code Playground

by SSRRDD

CSS

body
{
  background-color: #1f2227
}

JavaScript

const style =
    { //console.log('Script: style: function(outerThis)');
      styleElement: false,
      textShadowWidth: '1px',
      cssRules: // common styles for the whole object
      {
        added: false,
        styles:
        [ `@mixin textColourAndShadow($textColour: #000000, $shadowColour: #000000, $shadowWidth: 1px)
          {
            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;
          }`,
        ]
      },
      scssMixinsIncludesCompiler:
      {
        mixins: [],
        includes: [],
        escapeRegExp: function(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 escapeRegExp: function(string)
        do: function(e)
        {
          ['@mixin', '@include'].forEach(function(e1)
          { //console.log('HERE1', e, e1, this.escapeRegExp(e1));
            let arr1 = e.match(new RegExp('(?<=' + e1 + ').*' + (e1 == '@mixin' ? '': '?(?=;)'))); // array of all mixins/includes
            if (!arr1)
            {
              return;
            };
            arr1.forEach(function(e2) // every mixin or include declaration
            {
            ...