Track informations about font in use

browserslist

> 1%
last 2 versions

SassMeister-input-HTML.html

<div class="wrapper">
  
<form class="side-by-side">
  <div class="form-group">
      <label>Label</label>
      <input type="text" value="text"/>
  </div>
  <div class="form-group">
    <label>Label</label>
    <input class="error" type="text" value="text"/>
  </div>
  <div class="form-group">
      <label>Label</label>
      <input type="text" value="text"/>
  </div>
  <div class="form-group">
      <label>Label</label>
      <input type="text" value="text"/>
  </div>
  <div class="form-group">
      <label>Label</label>
      <input type="text" value="text"/>
  </div>
</form>
  
</div>

SassMeister-input.scss

// ----
// libsass (v3.5.0.beta.2)
// ----

/* @mixin debug-map()

@usage  - @include debug-map($properties);
@see  - https://www.sitepoint.com/debugging-sass-maps/

Styleguide addons.debug.debug-map
*/
@mixin debug-map($map) {
    @if(type-of($map) == 'map'){
		@at-root {
			@debug-map {
				__toString__: inspect($map);
				__length__: length($map);
				__depth__: depth($map);
				__keys__: map-keys($map);
				__properties__ {
					@each $key, $value in $map {
						#{'(' + type-of($value) + ') ' + $key}: inspect($value);
					}
				}
			}
		}
	}
	@else {
	  @at-root {
		@debug-map {
			__TYPE__: type-of($map);
			__VALUE__: $map;
		}
	  }
	}
}

@function extend($object, $objects.../*, $deep */) {
  $last: nth($objects, -1);
  $deep: $last == true; 
  $max: if($deep, length($objects) - 1, length($objects));
  
  // Loop through all maps in $objects...
  @for $i from 1 through $max {
    // Store current map
    $current: nth($objects, $i);
    
    // If not in deep mode, simply merge current map with object
    @if not $deep {
      $object: map-merge($object, $current);
    }
    
    // If in deep mode
    @else {
      // Loop through all tuples in current map
      @each $key, $value in $current {
        // If value is a nested map and same key from object is a nested map as well
        @if type-of($value) == "map" and type-of(map-get($object, $key)) == "map" {
          // Recursive extend
          $value: extend(map-get($object, $key), $value, true);
        }
        // Merge current tuple with object
        $object: map-merge($object, ($key: $value));
      }
    }
  }

  @return $object;
}
/// Deep set function to set a value in nested maps
/// @author Hugo Giraudel
/// @access public
/// @param {Map} $map - Map
/// @param {List} $keys -  Key chaine
/// @param {*} $value - Value to assign
/// @return {Map}
@function map-deep-set($map, $keys, $value) {
  $maps: ($map,);
  $result: null;
  
  // If the last key is a map already
  // Warn the user we will be overriding it with $value
  @if type-of(nth($keys, -1)) == "map" {
    @warn "The last key you specified is a map; it will be overrided with `#{$value}`.";
  }
  
  // If $keys is a single key
  // Just merge and return
  @if length($keys) == 1 {
    @return map-merge($map, ($keys: $value));
  }
  
  // Loop from the first to the second to last key from $keys
  // Store the associated map to this key in the $maps list
  // If the key doesn't exist, throw an error
  @for $i from 1 through length($keys) - 1 {
    $current-key: nth($keys, $i);
    $current-map: nth($maps, -1);
    $current-get: map-get($current-map, $current-key);
    @if $current-get == null {
      @error "Key `#{$key}` doesn't exist at current level in map.";
    }
    $maps: append($maps, $current-get);
  }
  
  // Loop from the last map to the first one
  // Merge it with the previous one
  @for $i from length($maps) through 1 {
    $current-map: nth($maps, $i);
    $current-key: nth($keys, $i);
    $current-val: if($i == length($maps), $value, $result);
    $result: map-merge($current-map, ($current-key: $current-val));
  }
  
  // Return result
  @return $result;
}

$style: italic;
$weight: 900;
$style: if($style == italic, #{$weight + i}, non );

$map1:(
  'family': 'Roboto',
  'weight': 400,
  'style': italic
);
$map2:(
  'family': 'Roboto',
  'weight': 800,
  'style': normal
);
$map3:(
  'family': 'Open Sans',
  'weight': 400,
  'style': italic
);
$map4:(
  'family': 'Open Sans',
  'weight': 200,
  'style': normal
);

$fonts: ();

@mixin track($map,$type: local){
  
  $family: map-get($map,'family');
  $weight: map-get($map, 'weight');
  $style: if(map-get($map, 'style') == 'italic', 'i', '');
  $weight-style: #{$weight}#{$style} ;
  
  @if(map-has-key($fonts,$type) == false){
    $fonts: map-merge($fonts, ($type:())) !global;
  }

  // recupere les variantes de la police
  $variantes: map-get(map-get($fonts,$type),$family);

  @if index($variantes, $weight-style) == null {
    $variantes: append($variantes, $weight-style);
  }

  $fonts: map-deep-set($fonts, #{$type} #{$family}, $variantes ) !global;
  
}


.test {
  @include track($map1);
  @include track($map2);
  @include track($map3);
  @include track($map4);
  
  //@include track($map3);
  
  @include debug-map($fonts);
  
}

SassMeister-output.css

/* @mixin debug-map()

@usage  - @include debug-map($properties);
@see  - https://www.sitepoint.com/debugging-sass-maps/

Styleguide addons.debug.debug-map
*/
@debug-map {
  __toString__: (local: (Roboto: null 400i 800, Open Sans: null 400i 200));
  __length__: 1;
  __depth__: depth((local: (Roboto: 400i 800, Open Sans: 400i 200)));
  __keys__: local;
  __properties__ {
    (map) local: (Roboto: null 400i 800, Open Sans: null 400i 200);
  }
}

SassMeister-rendered.html

<div class="wrapper">
  
<form class="side-by-side">
  <div class="form-group">
      <label>Label</label>
      <input type="text" value="text"/>
  </div>
  <div class="form-group">
    <label>Label</label>
    <input class="error" type="text" value="text"/>
  </div>
  <div class="form-group">
      <label>Label</label>
      <input type="text" value="text"/>
  </div>
  <div class="form-group">
      <label>Label</label>
      <input type="text" value="text"/>
  </div>
  <div class="form-group">
      <label>Label</label>
      <input type="text" value="text"/>
  </div>
</form>
  
</div>