From 7e33f710ee978caf06b0929311bce15936c7d0f2 Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Mon, 20 Mar 2023 12:55:45 +0200 Subject: [PATCH] fix: Update templates * reindent to 2-space * lowercase charset * use double quotes consistently * remove unneeded end tags * remove unneeded type="text/css" * switch to `::before` --- .../__tests__/__snapshots__/css.ts.snap | 52 ++++---- .../__tests__/__snapshots__/html.ts.snap | 114 ++++++++--------- .../__tests__/__snapshots__/sass.ts.snap | 62 +++++---- .../__tests__/__snapshots__/scss.ts.snap | 56 ++++----- src/generators/asset-types/__tests__/css.ts | 8 +- src/generators/asset-types/__tests__/sass.ts | 8 +- src/generators/asset-types/__tests__/scss.ts | 8 +- templates/css.hbs | 30 ++--- templates/html.hbs | 118 +++++++++--------- templates/sass.hbs | 33 +++-- templates/scss.hbs | 32 ++--- 11 files changed, 259 insertions(+), 262 deletions(-) diff --git a/src/generators/asset-types/__tests__/__snapshots__/css.ts.snap b/src/generators/asset-types/__tests__/__snapshots__/css.ts.snap index 8220719f..02af5c4b 100644 --- a/src/generators/asset-types/__tests__/__snapshots__/css.ts.snap +++ b/src/generators/asset-types/__tests__/__snapshots__/css.ts.snap @@ -2,46 +2,46 @@ exports[`\`CSS\` asset generator renders CSS correctly with \`selector\` option 1`] = ` "@font-face { - font-family: "test-font"; - src: "::src-attr::"; + 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-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..98ebda16 100644 --- a/src/generators/asset-types/__tests__/__snapshots__/html.ts.snap +++ b/src/generators/asset-types/__tests__/__snapshots__/html.ts.snap @@ -4,70 +4,70 @@ exports[`\`HTML\` asset generator renders HTML correctly with prefix and tag nam " - - test-font + + test-font - + + + + +

test-font

+
+ + + +
+ 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..d2ef50ab 100644 --- a/src/generators/asset-types/__tests__/__snapshots__/sass.ts.snap +++ b/src/generators/asset-types/__tests__/__snapshots__/sass.ts.snap @@ -4,26 +4,25 @@ 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-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 +30,24 @@ 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-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..66c86d6c 100644 --- a/src/generators/asset-types/__tests__/__snapshots__/scss.ts.snap +++ b/src/generators/asset-types/__tests__/__snapshots__/scss.ts.snap @@ -4,27 +4,27 @@ exports[`\`SCSS\` asset generator renders SCSS correctly with \`selector\` optio "$test-font: "test"; @font-face { - font-family: $test-font; - src: "::src-attr::"; + 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 +33,27 @@ 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-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..03858f85 100644 --- a/src/generators/asset-types/__tests__/css.ts +++ b/src/generators/asset-types/__tests__/css.ts @@ -52,8 +52,8 @@ 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 +62,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..aac18c88 100644 --- a/src/generators/asset-types/__tests__/scss.ts +++ b/src/generators/asset-types/__tests__/scss.ts @@ -52,8 +52,8 @@ 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 +69,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..2ec3ff0a 100644 --- a/templates/css.hbs +++ b/templates/css.hbs @@ -1,29 +1,29 @@ @font-face { - font-family: "{{ name }}"; - src: {{{ fontSrc }}}; + 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..d018a1b7 100644 --- a/templates/html.hbs +++ b/templates/html.hbs @@ -1,71 +1,71 @@ - - {{ name }} + + {{ name }} - + - {{/ each }} + + + +

{{ name }}

+ {{# each assets }} +
+ + <{{ ../tag }} class="{{ ../prefix }} {{ ../prefix }}-{{ @key }}"> + +
+ {{ @key }} +
+ {{/ each }} diff --git a/templates/sass.hbs b/templates/sass.hbs index c768209e..c506a631 100644 --- a/templates/sass.hbs +++ b/templates/sass.hbs @@ -1,35 +1,34 @@ ${{ name }}-font: "{{ name }}" @font-face - font-family: ${{ name }}-font - src: {{{ fontSrc }}} + 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..86caea83 100644 --- a/templates/scss.hbs +++ b/templates/scss.hbs @@ -1,37 +1,37 @@ ${{ name }}-font: "{{ name }}"; @font-face { - font-family: ${{ name }}-font; - src: {{{ fontSrc }}}; + 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 }}