feat(sass): Merge pull request #610 from tancredi/feature/601-sass-map-get-is-deprecated

Feature/601 sass map get is deprecated

Author: tancredi

src/generators/asset-types/__tests__/__snapshots__/sass.ts.snap

@@ -17,13 +17,13 @@ exports[`\`SASS\` asset generator > renders SASS correctly with \`selector\` opt
     -webkit-font-smoothing: antialiased
     -moz-osx-font-smoothing: grayscale
 
-
 $test-map: (
     "my-icon": "\\f101",
 )
 
-.my-selector.tf-my-icon:before
-    content: map-get($test-map, "my-icon")
+@each $name, $value in ($test-map)
+    .my-selector.tf-#{$name}:before
+        content: $value
 "
 `;
 
@@ -44,12 +44,12 @@ b[class^="tf-"]:before, b[class*=" tf-"]:before
     -webkit-font-smoothing: antialiased
     -moz-osx-font-smoothing: grayscale
 
-
 $test-map: (
     "my-icon": "\\f101",
 )
 
-.tf-my-icon:before
-    content: map-get($test-map, "my-icon")
+@each $name, $value in ($test-map)
+    .tf-#{$name}:before
+        content: $value
 "
 `;

src/generators/asset-types/__tests__/__snapshots__/scss.ts.snap

@@ -23,8 +23,10 @@ $test-map: (
     "my-icon": "\\f101",
 );
 
-.my-selector.tf-my-icon:before {
-    content: map-get($test-map, "my-icon");
+@each $name, $value in ($test-map) {
+    .my-selector.tf-#{$name}:before {
+        content: $value;
+    }
 }
 "
 `;
@@ -52,8 +54,10 @@ $test-map: (
     "my-icon": "\\f101",
 );
 
-.tf-my-icon:before {
-    content: map-get($test-map, "my-icon");
+@each $name, $value in ($test-map) {
+    .tf-#{$name}:before {
+        content: $value;
+    }
 }
 "
 `;

src/generators/asset-types/__tests__/sass.ts

@@ -46,15 +46,17 @@ describe('`SASS` asset generator', () => {
     const result = await sassGen.generate(mockOptions, fontBuffer);
 
     expect(renderSrcMock).toHaveBeenCalledTimes(1);
-    expect(renderSrcMock).toHaveBeenCalledWith(mockOptions, fontBuffer);
+    expect(renderSrcMock).toHaveBeenCalledWith(mockOptions, fontBuffer, {
+      inline: true
+    });
     expect(result).toContain('::src-attr::');
   });
 
   it('renders expected selector blocks', async () => {
     const sass = await sassGen.generate(mockOptions, Buffer.from(''));
 
     expect(sass).toContain('b[class^="tf-"]:before, b[class*=" tf-"]:before');
-    expect(sass).toContain('.tf-my-icon:before');
+    expect(sass).toContain('.tf-#{$name}:before');
   });
 
   it('renders expected variables', async () => {
@@ -71,6 +73,6 @@ describe('`SASS` asset generator', () => {
     );
 
     expect(sass).toContain('.my-selector:before');
-    expect(sass).toContain('.my-selector.tf-my-icon:before');
+    expect(sass).toContain('.my-selector.tf-#{$name}:before');
   });
 });

src/generators/asset-types/__tests__/scss.ts

@@ -54,7 +54,7 @@ describe('`SCSS` asset generator', () => {
     const scss = await scssGen.generate(mockOptions, Buffer.from(''));
 
     expect(scss).toContain('b[class^="tf-"]:before, b[class*=" tf-"]:before {');
-    expect(scss).toContain('.tf-my-icon:before {');
+    expect(scss).toContain('.tf-#{$name}:before {');
   });
 
   it('renders expected variables', async () => {
@@ -71,6 +71,6 @@ describe('`SCSS` asset generator', () => {
     );
 
     expect(scss).toContain('.my-selector:before {');
-    expect(scss).toContain('.my-selector.tf-my-icon:before {');
+    expect(scss).toContain('.my-selector.tf-#{$name}:before {');
   });
 });

src/generators/asset-types/sass.ts

@@ -9,7 +9,7 @@ const generator: FontGenerator<Buffer> = {
   generate: (options, svg: Buffer) =>
     renderTemplate(options.templates.sass, {
       ...options,
-      fontSrc: renderSrcAttribute(options, svg)
+      fontSrc: renderSrcAttribute(options, svg, { inline: true })
     })
 };
 

src/utils/css.ts

@@ -20,7 +20,8 @@ const renderSrcOptions: { [key in FontAssetType]: RenderSrcOptions } = {
 
 export const renderSrcAttribute = (
   { name, fontTypes, fontsUrl }: FontGeneratorOptions,
-  font: string | Buffer
+  font: string | Buffer,
+  { inline = false }: { inline?: boolean } = {}
 ) =>
   fontTypes
     .map(fontType => {
@@ -31,4 +32,4 @@ export const renderSrcAttribute = (
         fontsUrl || '.'
       }/${name}.${fontType}?${hash}${suffix}") format("${formatValue}")`;
     })
-    .join(',\n');
+    .join(inline ? ', ' : ',\n');

templates/css.hbs

@@ -22,7 +22,7 @@
 {{# if ../selector }}
 {{ ../selector }}.{{ ../prefix }}-{{ @key }}:before {
 {{ else }}
-{{ tag }}.{{ ../prefix }}-{{ @key }}:before {
+.{{ ../prefix }}-{{ @key }}:before {
 {{/ if }}
     content: "\\{{ codepoint this }}";
 }

templates/sass.hbs

@@ -18,18 +18,16 @@ ${{ name }}-font: "{{ name }}"
     -webkit-font-smoothing: antialiased
     -moz-osx-font-smoothing: grayscale
 
-
 ${{ name }}-map: (
 {{# each codepoints }}
     "{{ @key }}": "\\{{ codepoint this }}",
 {{/ each }}
 )
 
-{{# each codepoints }}
-{{# if ../selector }}
-{{ ../selector }}.{{ ../prefix }}-{{ @key }}:before
-{{ else }}
-{{ tag }}.{{ ../prefix }}-{{ @key }}:before
-{{/ if }}
-    content: map-get(${{ ../name }}-map, "{{ @key }}")
-{{/ each }}
+@each $name, $value in (${{ name }}-map)
+    {{# if selector }}
+    {{ selector }}.{{ prefix }}-#{$name}:before
+    {{ else }}
+    .{{ prefix }}-#{$name}:before
+    {{/ if }}
+        content: $value

templates/scss.hbs

@@ -26,12 +26,12 @@ ${{ name }}-map: (
 {{/ each }}
 );
 
-{{# each codepoints }}
-{{# if ../selector }}
-{{ ../selector }}.{{ ../prefix }}-{{ @key }}:before {
-{{ else }}
-{{ tag }}.{{ ../prefix }}-{{ @key }}:before {
-{{/ if }}
-    content: map-get(${{ ../name }}-map, "{{ @key }}");
+@each $name, $value in (${{ name }}-map) {
+    {{# if selector }}
+    {{ selector }}.{{ prefix }}-#{$name}:before {
+    {{ else }}
+    .{{ prefix }}-#{$name}:before {
+    {{/ if }}
+        content: $value;
+    }
 }
-{{/ each }}