_index.scss

/// Converts a kebab-case string to a camelCase string. For example, the string
/// `'one-two-three-four'` will be converted to `'oneTwoThreeFour'`.
///
/// This function can also handle a special case where groups of words are separated by
/// two dash characters. For example, the string `'background-color--red'` will be
/// converted to `'backgroundColor-red'`.
///
/// @param {string} $str The string to convert to camelCase. This string must be in
///                      kebab-case: all characters must be lowercase and words separated
///                      by dash '-' characters. Optionally, word groups can be separated
///                      by two dashes. See the description for more information.
/// @return {string} The string, converted to camelCase
/// @link https://en.wikipedia.org/wiki/Letter_case#Special_case_styles
@function kebab-to-camel-case($str) {
   $camelCase: '';
   $prevCharWasDash: false;

   @for $i from 1 to str-length($str) + 1 {
      $char: str-slice($str, $i, $i);

      @if $char == '-' {
         // If $prevCharWasDash is true, then we've encountered a double dash '--'
         @if $prevCharWasDash {
         // Turn double dashes into single dashes
         $camelCase: $camelCase + '-';
         $prevCharWasDash: false;
         } @else {
            // This is a single dash. Skip adding it to the string and uppercase the next
            // character.
            $prevCharWasDash: true;
         }
         // The current $char is not a dash. If the previous character
         // was a dash and we should uppercase this char.
      } @else if $prevCharWasDash {
         $camelCase: $camelCase + to-upper-case($char);
         $prevCharWasDash: false;
      } @else {
         // Add current $char as-is
         $camelCase: $camelCase + $char;
         $prevCharWasDash: false;
      }
   }

   @return $camelCase;
}