diff --git a/src/generators/asset-types/__tests__/__snapshots__/css.ts.snap b/src/generators/asset-types/__tests__/__snapshots__/css.ts.snap index 8220719f..49aaf2ef 100644 --- a/src/generators/asset-types/__tests__/__snapshots__/css.ts.snap +++ b/src/generators/asset-types/__tests__/__snapshots__/css.ts.snap @@ -2,46 +2,48 @@ exports[`\`CSS\` asset generator renders CSS correctly with \`selector\` option 1`] = ` "@font-face { - font-family: "test-font"; - src: "::src-attr::"; + font-display: block; + font-family: "test-font"; + src: "::src-attr::"; } -.my-selector:before { - font-family: test-font !important; - font-style: normal; - font-weight: normal !important; - font-variant: normal; - text-transform: none; - line-height: 1; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; +.my-selector::before { + font-family: test-font !important; + font-style: normal; + font-weight: normal !important; + font-variant: normal; + text-transform: none; + line-height: 1; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; } -.my-selector.tf-my-icon:before { - content: "\\f101"; +.my-selector.tf-my-icon::before { + content: "\\f101"; } " `; exports[`\`CSS\` asset generator renders CSS correctly with prefix and tag name options 1`] = ` "@font-face { - font-family: "test-font"; - src: "::src-attr::"; + font-display: block; + font-family: "test-font"; + src: "::src-attr::"; } -b[class^="tf-"]:before, b[class*=" tf-"]:before { - font-family: test-font !important; - font-style: normal; - font-weight: normal !important; - font-variant: normal; - text-transform: none; - line-height: 1; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; +b[class^="tf-"]::before, b[class*=" tf-"]::before { + font-family: test-font !important; + font-style: normal; + font-weight: normal !important; + font-variant: normal; + text-transform: none; + line-height: 1; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; } -.tf-my-icon:before { - content: "\\f101"; +.tf-my-icon::before { + content: "\\f101"; } " `; diff --git a/src/generators/asset-types/__tests__/__snapshots__/html.ts.snap b/src/generators/asset-types/__tests__/__snapshots__/html.ts.snap index a3e256a9..515dd531 100644 --- a/src/generators/asset-types/__tests__/__snapshots__/html.ts.snap +++ b/src/generators/asset-types/__tests__/__snapshots__/html.ts.snap @@ -1,73 +1,69 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`\`HTML\` asset generator renders HTML correctly with prefix and tag name options 1`] = ` -" +" - - test-font + + test-font - + - + +

test-font

-

test-font

- - -
- - - -
- my-icon -
- - +
+ + + +
+ my-icon +
" diff --git a/src/generators/asset-types/__tests__/__snapshots__/sass.ts.snap b/src/generators/asset-types/__tests__/__snapshots__/sass.ts.snap index cf2f5653..c4610edc 100644 --- a/src/generators/asset-types/__tests__/__snapshots__/sass.ts.snap +++ b/src/generators/asset-types/__tests__/__snapshots__/sass.ts.snap @@ -4,26 +4,26 @@ exports[`\`SASS\` asset generator renders SASS correctly with \`selector\` optio "$test-font: "test" @font-face - font-family: $test-font - src: "::src-attr::" - -.my-selector:before - font-family: test !important - font-style: normal - font-weight: normal !important - font-variant: normal - text-transform: none - line-height: 1 - -webkit-font-smoothing: antialiased - -moz-osx-font-smoothing: grayscale - + font-display: block + font-family: $test-font + src: "::src-attr::" + +.my-selector::before + font-family: test !important + font-style: normal + font-weight: normal !important + font-variant: normal + text-transform: none + line-height: 1 + -webkit-font-smoothing: antialiased + -moz-osx-font-smoothing: grayscale $test-map: ( - "my-icon": "\\f101", + "my-icon": "\\f101", ) -.my-selector.tf-my-icon:before - content: map-get($test-map, "my-icon") +.my-selector.tf-my-icon::before + content: map-get($test-map, "my-icon") " `; @@ -31,25 +31,25 @@ exports[`\`SASS\` asset generator renders SASS correctly with prefix and tag nam "$test-font: "test" @font-face - font-family: $test-font - src: "::src-attr::" - -b[class^="tf-"]:before, b[class*=" tf-"]:before - font-family: test !important - font-style: normal - font-weight: normal !important - font-variant: normal - text-transform: none - line-height: 1 - -webkit-font-smoothing: antialiased - -moz-osx-font-smoothing: grayscale - + font-display: block + font-family: $test-font + src: "::src-attr::" + +b[class^="tf-"]::before, b[class*=" tf-"]::before + font-family: test !important + font-style: normal + font-weight: normal !important + font-variant: normal + text-transform: none + line-height: 1 + -webkit-font-smoothing: antialiased + -moz-osx-font-smoothing: grayscale $test-map: ( - "my-icon": "\\f101", + "my-icon": "\\f101", ) -.tf-my-icon:before - content: map-get($test-map, "my-icon") +.tf-my-icon::before + content: map-get($test-map, "my-icon") " `; diff --git a/src/generators/asset-types/__tests__/__snapshots__/scss.ts.snap b/src/generators/asset-types/__tests__/__snapshots__/scss.ts.snap index b54400ab..da6db3af 100644 --- a/src/generators/asset-types/__tests__/__snapshots__/scss.ts.snap +++ b/src/generators/asset-types/__tests__/__snapshots__/scss.ts.snap @@ -4,27 +4,28 @@ exports[`\`SCSS\` asset generator renders SCSS correctly with \`selector\` optio "$test-font: "test"; @font-face { - font-family: $test-font; - src: "::src-attr::"; + font-display: block; + font-family: $test-font; + src: "::src-attr::"; } -.my-selector:before { - font-family: test !important; - font-style: normal; - font-weight: normal !important; - font-variant: normal; - text-transform: none; - line-height: 1; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; +.my-selector::before { + font-family: test !important; + font-style: normal; + font-weight: normal !important; + font-variant: normal; + text-transform: none; + line-height: 1; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; } $test-map: ( - "my-icon": "\\f101", + "my-icon": "\\f101", ); -.my-selector.tf-my-icon:before { - content: map-get($test-map, "my-icon"); +.my-selector.tf-my-icon::before { + content: map-get($test-map, "my-icon"); } " `; @@ -33,27 +34,28 @@ exports[`\`SCSS\` asset generator renders SCSS correctly with prefix and tag nam "$test-font: "test"; @font-face { - font-family: $test-font; - src: "::src-attr::"; + font-display: block; + font-family: $test-font; + src: "::src-attr::"; } -b[class^="tf-"]:before, b[class*=" tf-"]:before { - font-family: test !important; - font-style: normal; - font-weight: normal !important; - font-variant: normal; - text-transform: none; - line-height: 1; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; +b[class^="tf-"]::before, b[class*=" tf-"]::before { + font-family: test !important; + font-style: normal; + font-weight: normal !important; + font-variant: normal; + text-transform: none; + line-height: 1; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; } $test-map: ( - "my-icon": "\\f101", + "my-icon": "\\f101", ); -.tf-my-icon:before { - content: map-get($test-map, "my-icon"); +.tf-my-icon::before { + content: map-get($test-map, "my-icon"); } " `; diff --git a/src/generators/asset-types/__tests__/css.ts b/src/generators/asset-types/__tests__/css.ts index 02c56c08..b83d587f 100644 --- a/src/generators/asset-types/__tests__/css.ts +++ b/src/generators/asset-types/__tests__/css.ts @@ -52,8 +52,10 @@ describe('`CSS` asset generator', () => { test('renders expected selector blocks', async () => { const css = await cssGen.generate(mockOptions, Buffer.from('')); - expect(css).toContain('b[class^="tf-"]:before, b[class*=" tf-"]:before {'); - expect(css).toContain('.tf-my-icon:before {'); + expect(css).toContain( + 'b[class^="tf-"]::before, b[class*=" tf-"]::before {' + ); + expect(css).toContain('.tf-my-icon::before {'); }); test('renders expected selector blocks with `selector` option', async () => { @@ -62,7 +64,7 @@ describe('`CSS` asset generator', () => { Buffer.from('') ); - expect(css).toContain('.my-selector:before {'); - expect(css).toContain('.my-selector.tf-my-icon:before {'); + expect(css).toContain('.my-selector::before {'); + expect(css).toContain('.my-selector.tf-my-icon::before {'); }); }); diff --git a/src/generators/asset-types/__tests__/sass.ts b/src/generators/asset-types/__tests__/sass.ts index c97c59fa..9c96038a 100644 --- a/src/generators/asset-types/__tests__/sass.ts +++ b/src/generators/asset-types/__tests__/sass.ts @@ -52,8 +52,8 @@ describe('`SASS` asset generator', () => { test('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('b[class^="tf-"]::before, b[class*=" tf-"]::before'); + expect(sass).toContain('.tf-my-icon::before'); }); test('renders expected variables', async () => { @@ -69,7 +69,7 @@ describe('`SASS` asset generator', () => { Buffer.from('') ); - expect(sass).toContain('.my-selector:before'); - expect(sass).toContain('.my-selector.tf-my-icon:before'); + expect(sass).toContain('.my-selector::before'); + expect(sass).toContain('.my-selector.tf-my-icon::before'); }); }); diff --git a/src/generators/asset-types/__tests__/scss.ts b/src/generators/asset-types/__tests__/scss.ts index efd8dc4e..248e616a 100644 --- a/src/generators/asset-types/__tests__/scss.ts +++ b/src/generators/asset-types/__tests__/scss.ts @@ -52,8 +52,10 @@ describe('`SCSS` asset generator', () => { test('renders expected selector blocks', async () => { 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( + 'b[class^="tf-"]::before, b[class*=" tf-"]::before {' + ); + expect(scss).toContain('.tf-my-icon::before {'); }); test('renders expected variables', async () => { @@ -69,7 +71,7 @@ describe('`SCSS` asset generator', () => { Buffer.from('') ); - expect(scss).toContain('.my-selector:before {'); - expect(scss).toContain('.my-selector.tf-my-icon:before {'); + expect(scss).toContain('.my-selector::before {'); + expect(scss).toContain('.my-selector.tf-my-icon::before {'); }); }); diff --git a/templates/css.hbs b/templates/css.hbs index 6cbcea44..b0817887 100644 --- a/templates/css.hbs +++ b/templates/css.hbs @@ -1,29 +1,30 @@ @font-face { - font-family: "{{ name }}"; - src: {{{ fontSrc }}}; + font-display: block; + font-family: "{{ name }}"; + src: {{{ fontSrc }}}; } {{# if selector }} -{{ selector }}:before { +{{ selector }}::before { {{ else }} -{{ tag }}[class^="{{prefix}}-"]:before, {{ tag }}[class*=" {{prefix}}-"]:before { +{{ tag }}[class^="{{prefix}}-"]::before, {{ tag }}[class*=" {{prefix}}-"]::before { {{/ if }} - font-family: {{ name }} !important; - font-style: normal; - font-weight: normal !important; - font-variant: normal; - text-transform: none; - line-height: 1; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; + font-family: {{ name }} !important; + font-style: normal; + font-weight: normal !important; + font-variant: normal; + text-transform: none; + line-height: 1; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; } {{# each codepoints }} {{# if ../selector }} -{{ ../selector }}.{{ ../prefix }}-{{ @key }}:before { +{{ ../selector }}.{{ ../prefix }}-{{ @key }}::before { {{ else }} -{{ tag }}.{{ ../prefix }}-{{ @key }}:before { +{{ tag }}.{{ ../prefix }}-{{ @key }}::before { {{/ if }} - content: "\\{{ codepoint this }}"; + content: "\\{{ codepoint this }}"; } {{/ each }} diff --git a/templates/html.hbs b/templates/html.hbs index debe9367..0eef807b 100644 --- a/templates/html.hbs +++ b/templates/html.hbs @@ -1,71 +1,67 @@ - + - - {{ name }} + + {{ name }} - + - + +

{{ name }}

-

{{ name }}

- - {{# each assets }} - -
- - <{{ ../tag }} class="{{ ../prefix }} {{ ../prefix }}-{{ @key }}"> - -
- {{ @key }} -
- - {{/ each }} - + {{# each assets }} +
+ + <{{ ../tag }} class="{{ ../prefix }} {{ ../prefix }}-{{ @key }}"> + +
+ {{ @key }} +
+ {{/ each }} diff --git a/templates/sass.hbs b/templates/sass.hbs index c768209e..c850d285 100644 --- a/templates/sass.hbs +++ b/templates/sass.hbs @@ -1,35 +1,35 @@ ${{ name }}-font: "{{ name }}" @font-face - font-family: ${{ name }}-font - src: {{{ fontSrc }}} + font-display: block + font-family: ${{ name }}-font + src: {{{ fontSrc }}} {{# if selector }} -{{ selector }}:before +{{ selector }}::before {{ else }} -{{ tag }}[class^="{{prefix}}-"]:before, {{ tag }}[class*=" {{prefix}}-"]:before +{{ tag }}[class^="{{prefix}}-"]::before, {{ tag }}[class*=" {{prefix}}-"]::before {{/ if }} - font-family: {{ name }} !important - font-style: normal - font-weight: normal !important - font-variant: normal - text-transform: none - line-height: 1 - -webkit-font-smoothing: antialiased - -moz-osx-font-smoothing: grayscale - + font-family: {{ name }} !important + font-style: normal + font-weight: normal !important + font-variant: normal + text-transform: none + line-height: 1 + -webkit-font-smoothing: antialiased + -moz-osx-font-smoothing: grayscale ${{ name }}-map: ( {{# each codepoints }} - "{{ @key }}": "\\{{ codepoint this }}", + "{{ @key }}": "\\{{ codepoint this }}", {{/ each }} ) {{# each codepoints }} {{# if ../selector }} -{{ ../selector }}.{{ ../prefix }}-{{ @key }}:before +{{ ../selector }}.{{ ../prefix }}-{{ @key }}::before {{ else }} -{{ tag }}.{{ ../prefix }}-{{ @key }}:before +{{ tag }}.{{ ../prefix }}-{{ @key }}::before {{/ if }} - content: map-get(${{ ../name }}-map, "{{ @key }}") + content: map-get(${{ ../name }}-map, "{{ @key }}") {{/ each }} diff --git a/templates/scss.hbs b/templates/scss.hbs index 006675dd..3dfe78a6 100644 --- a/templates/scss.hbs +++ b/templates/scss.hbs @@ -1,37 +1,38 @@ ${{ name }}-font: "{{ name }}"; @font-face { - font-family: ${{ name }}-font; - src: {{{ fontSrc }}}; + font-display: block; + font-family: ${{ name }}-font; + src: {{{ fontSrc }}}; } {{# if selector }} -{{ selector }}:before { +{{ selector }}::before { {{ else }} -{{ tag }}[class^="{{prefix}}-"]:before, {{ tag }}[class*=" {{prefix}}-"]:before { +{{ tag }}[class^="{{prefix}}-"]::before, {{ tag }}[class*=" {{prefix}}-"]::before { {{/ if }} - font-family: {{ name }} !important; - font-style: normal; - font-weight: normal !important; - font-variant: normal; - text-transform: none; - line-height: 1; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; + font-family: {{ name }} !important; + font-style: normal; + font-weight: normal !important; + font-variant: normal; + text-transform: none; + line-height: 1; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; } ${{ name }}-map: ( {{# each codepoints }} - "{{ @key }}": "\\{{ codepoint this }}", + "{{ @key }}": "\\{{ codepoint this }}", {{/ each }} ); {{# each codepoints }} {{# if ../selector }} -{{ ../selector }}.{{ ../prefix }}-{{ @key }}:before { +{{ ../selector }}.{{ ../prefix }}-{{ @key }}::before { {{ else }} -{{ tag }}.{{ ../prefix }}-{{ @key }}:before { +{{ tag }}.{{ ../prefix }}-{{ @key }}::before { {{/ if }} - content: map-get(${{ ../name }}-map, "{{ @key }}"); + content: map-get(${{ ../name }}-map, "{{ @key }}"); } {{/ each }}