renatodeleao/font-face-with-humanized-local-names.scss

## font-face-with-humanized-local-names.scss
// ----
// libsass (v3.5.4)
// ----

///
/// String functions by Pascal Duez
/// @link https://gist.github.com/pascalduez/10011785
///

@function contain($list, $value) {
  @return not not index($list, $value);
}

@function capitalize($string) {
  @return to-upper-case(str-slice($string, 1, 1)) + str-slice($string, 2);
}

// Capitalize each word in string
// --------------------------------------------------------------------------------
// @param [string] $string
// --------------------------------------------------------------------------------
// @return [string]

@function str-capitalize-words($string) {
  $progress: $string;
  $result: "";

  $running: true;

  @while $running {
    $index: str-index($progress, " ");
    @if $index {
      $result: $result + capitalize(str-slice($progress, 1, $index));
      $progress: str-slice($progress, ($index + 1));
    }
    @else {
      $running: false;
    }
  }

  @return capitalize($result) + capitalize($progress);
}

@function camelize($string) {
  $progress: $string;
  $result: "";
  $exclude: " ", "-", "–", "—", "_", ",", ";", ":", ".";

  @while str-length($progress) > 0  {
    $char: str-slice($progress, 1, 1);

    @if contain($exclude, $char) {
      $progress: capitalize(str-slice($progress, 2, 2)) + str-slice($progress, 3);
    }
    @else {
      $result: $result + $char;
      $progress: str-slice($progress, 2);
    }
  }

  @return $result;
}

@function to-pascal-case($string) {
  @return capitalize(camelize($string));
}

@function humanized-font-weight($weight: 400){
  @if $weight == 100 {
    @return ("Thin", "Hairline");
  } @else if $weight == 200 {
    @return ("Extra Light", "Ultra Light");
  } @else if $weight == 300 {
    @return ("Light");
  } @else if $weight == 400 {
    @return ("Book", "Regular", "Normal");
  } @else if $weight == 500 {
    @return ("Medium");
  } @else if $weight == 600 {
    @return ("Semi Bold", "Demi Bold");
  } @else if $weight == 700 {
    @return ("Bold");
  } @else if $weight == 800 {
    @return ("Extra Bold", "Ultra Bold");
  } @else if $weight == 900 {
    @return ("Black", "Heavy");
  } @else {
    @error "Invalid font-weight #{$weight}";
  }
}

@mixin font-face-src($name, $humanized-names-list, $path){
  $list: ();
  @each $humanized-name in $humanized-names-list {
    $list: append($list,local("#{str-capitalize-words($name))} #{$humanized-name}"), comma);
    $list: append($list,local("#{to-pascal-case($name))}-#{to-pascal-case($humanized-name)}"), comma);
  }

  $list: append($list, url("#{$path}.woff2") format("woff2"), comma);
  $list: append($list, url("#{$path}.woff") format("woff"), comma);

  src: $list;
}

///
/// Outputs a modern css font-face declaration
///
/// @group Tools
/// @param {String} $path - Path to your font file (no extension)
/// @param {String} $name ['Custom Font'] - Your font name
///   (yes you should keep the original, to make use of local but it's not mandatory)
/// @param {Number} $font-weight [400] - (100...900)
/// @param {String} $font-style [normal] - (Italic | Oblique | inherit | unset)
/// @param {String} $font-display [swap] - how a font face is displayed based on whether and when it is downloaded and ready to use.
/// @param {*} $unicode-range [U+000-5FF] - Download only latin glyphs
///
/// @example markup - Preload your fonts (recommended, not required)
///   <head>
///     <link rel="preload" as="font" href="/fonts/your-web-font.woff2" type="font/woff2" crossorigin="anonymous">
///   </head>
/// @example scss - Including using font-face
///   @include font-face(
///     $path: "/fonts/your-web-font",
///     $name: "Custom Font Name"
///     $font-weight: 500
///     $font-style: normal
///  )
///
///   // Not that the name should be the same! only weight changes
///   @include font-face(
///     $path: "/fonts/your-web-font-semi-bold",
///     $name: "Custom Font Name"
///     $font-weight: 600
///     $font-style: normal
///  )
///
/// @link https://equinsuocha.io/blog/web-fonts-in-2018
/// @link https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display
///
@mixin font-face(
  $path,
  $name: "Custom Font",
  $font-weight: 400,
  $font-style: normal,
  $font-display: swap,
  $unicode-range: U+000-5FF
){
  @font-face {
    font-family: $name;
    font-weight: $font-weight;
    font-style: $font-style;
    font-display: $font-display;
    unicode-range: $unicode-range;
    @include font-face-src($name, humanized-font-weight(200), "asdad/ad");
  }
}


@include font-face(
  "path/to/font",
  "My Custom Font"
)

## ouutput.css
@font-face {
  font-family: "My Custom Font";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+000-5FF;
  src: local("My Custom Font Extra Light"), local("MyCustomFont-ExtraLight"), local("My Custom Font Ultra Light"), local("MyCustomFont-UltraLight"), url("asdad/ad.woff2") format("woff2"), url("asdad/ad.woff") format("woff");
}
	// ----
	// libsass (v3.5.4)
	// ----

	///
	/// String functions by Pascal Duez
	/// @link https://gist.github.com/pascalduez/10011785
	///

	@function contain($list, $value) {
	@return not not index($list, $value);
	}

	@function capitalize($string) {
	@return to-upper-case(str-slice($string, 1, 1)) + str-slice($string, 2);
	}

	// Capitalize each word in string
	// --------------------------------------------------------------------------------
	// @param [string] $string
	// --------------------------------------------------------------------------------
	// @return [string]

	@function str-capitalize-words($string) {
	$progress: $string;
	$result: "";

	$running: true;

	@while $running {
	$index: str-index($progress, " ");
	@if $index {
	$result: $result + capitalize(str-slice($progress, 1, $index));
	$progress: str-slice($progress, ($index + 1));
	}
	@else {
	$running: false;
	}
	}

	@return capitalize($result) + capitalize($progress);
	}

	@function camelize($string) {
	$progress: $string;
	$result: "";
	$exclude: " ", "-", "–", "—", "_", ",", ";", ":", ".";

	@while str-length($progress) > 0 {
	$char: str-slice($progress, 1, 1);

	@if contain($exclude, $char) {
	$progress: capitalize(str-slice($progress, 2, 2)) + str-slice($progress, 3);
	}
	@else {
	$result: $result + $char;
	$progress: str-slice($progress, 2);
	}
	}

	@return $result;
	}

	@function to-pascal-case($string) {
	@return capitalize(camelize($string));
	}

	@function humanized-font-weight($weight: 400){
	@if $weight == 100 {
	@return ("Thin", "Hairline");
	} @else if $weight == 200 {
	@return ("Extra Light", "Ultra Light");
	} @else if $weight == 300 {
	@return ("Light");
	} @else if $weight == 400 {
	@return ("Book", "Regular", "Normal");
	} @else if $weight == 500 {
	@return ("Medium");
	} @else if $weight == 600 {
	@return ("Semi Bold", "Demi Bold");
	} @else if $weight == 700 {
	@return ("Bold");
	} @else if $weight == 800 {
	@return ("Extra Bold", "Ultra Bold");
	} @else if $weight == 900 {
	@return ("Black", "Heavy");
	} @else {
	@error "Invalid font-weight #{$weight}";
	}
	}

	@mixin font-face-src($name, $humanized-names-list, $path){
	$list: ();
	@each $humanized-name in $humanized-names-list {
	$list: append($list,local("#{str-capitalize-words($name))} #{$humanized-name}"), comma);
	$list: append($list,local("#{to-pascal-case($name))}-#{to-pascal-case($humanized-name)}"), comma);
	}

	$list: append($list, url("#{$path}.woff2") format("woff2"), comma);
	$list: append($list, url("#{$path}.woff") format("woff"), comma);

	src: $list;
	}

	///
	/// Outputs a modern css font-face declaration
	///
	/// @group Tools
	/// @param {String} $path - Path to your font file (no extension)
	/// @param {String} $name ['Custom Font'] - Your font name
	/// (yes you should keep the original, to make use of local but it's not mandatory)
	/// @param {Number} $font-weight [400] - (100...900)
	/// @param {String} $font-style [normal] - (Italic \| Oblique \| inherit \| unset)
	/// @param {String} $font-display [swap] - how a font face is displayed based on whether and when it is downloaded and ready to use.
	/// @param {*} $unicode-range [U+000-5FF] - Download only latin glyphs
	///
	/// @example markup - Preload your fonts (recommended, not required)
	/// <head>
	/// <link rel="preload" as="font" href="/fonts/your-web-font.woff2" type="font/woff2" crossorigin="anonymous">
	/// </head>
	/// @example scss - Including using font-face
	/// @include font-face(
	/// $path: "/fonts/your-web-font",
	/// $name: "Custom Font Name"
	/// $font-weight: 500
	/// $font-style: normal
	/// )
	///
	/// // Not that the name should be the same! only weight changes
	/// @include font-face(
	/// $path: "/fonts/your-web-font-semi-bold",
	/// $name: "Custom Font Name"
	/// $font-weight: 600
	/// $font-style: normal
	/// )
	///
	/// @link https://equinsuocha.io/blog/web-fonts-in-2018
	/// @link https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display
	///
	@mixin font-face(
	$path,
	$name: "Custom Font",
	$font-weight: 400,
	$font-style: normal,
	$font-display: swap,
	$unicode-range: U+000-5FF
	){
	@font-face {
	font-family: $name;
	font-weight: $font-weight;
	font-style: $font-style;
	font-display: $font-display;
	unicode-range: $unicode-range;
	@include font-face-src($name, humanized-font-weight(200), "asdad/ad");
	}
	}


	@include font-face(
	"path/to/font",
	"My Custom Font"
	)
	@font-face {
	font-family: "My Custom Font";
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	unicode-range: U+000-5FF;
	src: local("My Custom Font Extra Light"), local("MyCustomFont-ExtraLight"), local("My Custom Font Ultra Light"), local("MyCustomFont-UltraLight"), url("asdad/ad.woff2") format("woff2"), url("asdad/ad.woff") format("woff");
	}