Merge pull request #8 from Dan503:release/1.1.3-otf-support

Release 1.1.3 - OpenType (.otf) file support

generator.scss

@@ -1,4 +1,3 @@
-
 @warn "The 1.0 generator syntax is deprecated, please use the new mixin format instead";
 
 @import './mixin';

gulpfile.babel.js

@@ -1,19 +1,23 @@
-
 import gulp from 'gulp'
 import sass from 'gulp-sass'
 
-function sass_compiler(path, file){
-	return () => gulp.src([path,file].join('/'))
-		.pipe(sass())
-		.pipe(gulp.dest(path))
+function sass_compiler(path, file) {
+	return () =>
+		gulp.src([path, file].join('/')).pipe(sass()).pipe(gulp.dest(path))
 }
 
-gulp.task('GENERATOR test compiling', sass_compiler('./tests/generator', 'generator.test.scss'))
-gulp.task('MIXIN test compiling', sass_compiler('./tests/mixin','mixin.test.scss'))
-
-gulp.task('sass', gulp.parallel(
+gulp.task(
 	'GENERATOR test compiling',
-	'MIXIN test compiling'
-))
+	sass_compiler('./tests/generator', 'generator.test.scss'),
+)
+gulp.task(
+	'MIXIN test compiling',
+	sass_compiler('./tests/mixin', 'mixin.test.scss'),
+)
+
+gulp.task(
+	'sass',
+	gulp.parallel('GENERATOR test compiling', 'MIXIN test compiling'),
+)
 
 gulp.task('default', gulp.series('sass'))

mixin.scss

@@ -1,4 +1,3 @@
-
 $fonts: () !default;
 
 //Woff is a strongly supported font type by all modern browsers but also supported by old versions of IE
@@ -10,13 +9,23 @@ $fonts-path: '../fonts' !default;
 //https://css-tricks.com/snippets/sass/str-replace-function/
 @function str-replace($string, $search, $replace: '') {
 	$index: str-index($string, $search);
-	 @if $index {
-		@return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
+	@if $index {
+		@return str-slice($string, 1, $index - 1) + $replace +
+			str-replace(
+				str-slice($string, $index + str-length($search)),
+				$search,
+				$replace
+			);
 	}
 	@return $string;
 }
 
-@mixin generate-font-face($font-family, $src, $font-weight, $font-style: normal){
+@mixin generate-font-face(
+	$font-family,
+	$src,
+	$font-weight,
+	$font-style: normal
+) {
 	@font-face {
 		font-family: $font-family;
 		src: $src;
@@ -26,7 +35,12 @@ $fonts-path: '../fonts' !default;
 	}
 }
 
-@function fontSrc($fonts-path, $font-family, $font-file, $font-types: $font-file-types){
+@function fontSrc(
+	$fonts-path,
+	$font-family,
+	$font-file,
+	$font-types: $font-file-types
+) {
 	//Why the smiley face? https://www.paulirish.com/2010/font-face-gotchas/#smiley
 	$src: (local('☺'));
 	$family-folder: str-replace($font-family, ' ', '-');
@@ -36,25 +50,39 @@ $fonts-path: '../fonts' !default;
 			//Allows ttf fonts to be correctly included in CSS
 			$format-type: 'truetype';
 		}
-		$src: append($src, url('#{$fonts-path}/#{$font-family}/#{nth($font-file, 1)}.#{$type}') format('#{$format-type}'), 'comma');
+		@if $type == 'otf' {
+			//Allows otf fonts to be correctly included in CSS
+			$format-type: 'opentype';
+		}
+		$src: append(
+			$src,
+			url('#{$fonts-path}/#{$font-family}/#{nth($font-file, 1)}.#{$type}')
+				format('#{$format-type}'),
+			'comma'
+		);
 	}
 	@return $src;
 }
 
-@mixin font-face($fonts: $fonts, $types: $font-file-types, $path: $fonts-path){
+@mixin font-face($fonts: $fonts, $types: $font-file-types, $path: $fonts-path) {
 	@each $font-family, $font-set in $fonts {
 		@each $font-weight, $font-file in $font-set {
 			@if type-of($font-file) == 'string' {
 				$src: fontSrc($path, $font-family, $font-file, $types);
-				@include generate-font-face($font-family, $src, $font-weight){
+				@include generate-font-face($font-family, $src, $font-weight) {
 					@content;
-				};
+				}
 			} @else {
 				@each $font-style, $file in $font-file {
 					$src: fontSrc($path, $font-family, $file, $types);
-					@include generate-font-face($font-family, $src, $font-weight, $font-style){
+					@include generate-font-face(
+						$font-family,
+						$src,
+						$font-weight,
+						$font-style
+					) {
 						@content;
-					};
+					}
 				}
 			}
 		}