Small script to convert jsx styles into sass.

ConvertJsxToSass.php

<?php

define ('DEBUG', false);
define ('DEST_PATH', 'sass/react-components/');
define ('SRC', 'src');

function getStylesheetsDirectories($dir)
{
  $avoidFilenames = [
    '..' => 1,
    '.'  => 1,
    'node_modules' => 1,
  ];
  if (DEBUG) {
    print "Searching in directory: " . $dir . "\n";
  }
  $files = scandir($dir);
  if (empty($files)) {
    return null;
  }
  foreach ($files as $file) {
    if (!empty($avoidFilenames[$file])) {
      continue;
    }
    $stylesheetDir = $dir . '/' . $file;
    if (!is_dir($stylesheetDir)) {
      continue;
    }
    if (strcasecmp($file,'styles')===0) {
      $stylesheets = scandir($stylesheetDir);
      foreach ($stylesheets as $stylesheet) {
        if (!is_dir($stylesheet)) {
          $filePath = $stylesheetDir . '/' . $stylesheet;
          $filename = preg_replace('/\//', '__',
            preg_replace('/\-/', '_',
              preg_replace('/'. SRC .'\/?/', '', $filePath)
            )
          );
          $content = file_get_contents($filePath);
          $sassContent = "#{$filename} {\n\n"
            . convertToSass($content)
            . "\n\n}";

          file_put_contents( DEST_PATH . $filename . '.scss', $sassContent);
        }
      }
    }
    else {
      getStylesheetsDirectories($stylesheetDir);
    }
  }
}

function convertToSass($jsx)
{
  $sassSelectors = [];
  $selectors = extractSelectors($jsx);
  foreach ($selectors as $selector) {
    $sassSelectors[] = convertSelectorToSass($selector);
  }
  return implode("\n", $sassSelectors);
}

function extractSelectors($jsx)
{
  $styleName  = '[a-zA-Z0-9]+[\s]+=[\s]+\{\n?';
  $properties = '([\s]+[a-zA-Z]+[\s]*:[\s]*\'?[\-a-zA-Z0-9\.#]*\'?,?\n?)*';

  $pattern = '/export const ('
    . $styleName
    . $properties
    . ')/';
  if (!preg_match_all($pattern, $jsx, $matches)) {
    return [];
  }
  return $matches[1];
}

function convertSelectorToSass($line)
{
  $styleNamePattern  = '/([a-zA-Z0-9]+)[\s]+=[\s]+\{\n?/';
  if (!preg_match_all($styleNamePattern, $line, $styleName)) {
    return null;
  }
  $propsPattern = '/([a-zA-Z]+)[\s]*:[\s]*\'?([\-a-zA-Z0-9\.#]*)\'?/';
  if (!preg_match_all($propsPattern, $line, $properties)) {
    return null;
  }
  $sassProperties = [];
  foreach ($properties[1] as $idx => $property) {
    $sassProperties[] = convertPropertyToSass(trim($property))
      . ' : '
      . trim($properties[2][$idx]);
  }
  $sassProperties = implode(";\n  ", $sassProperties);
  return ".{$styleName[1][0]} {\n  {$sassProperties}\n}";
}

function convertPropertyToSass($property)
{
  return preg_replace_callback(
    '/([A-Z])/',
    function($matches) {
      return '-' . strtolower($matches[0]);
    },
    $property
  );
}

getStylesheetsDirectories(SRC);