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 }}">{{ ../tag }}>
-
-
- {{ @key }}
-
-
- {{/ each }}
-
+ {{# each assets }}
+
+
+ <{{ ../tag }} class="{{ ../prefix }} {{ ../prefix }}-{{ @key }}">{{ ../tag }}>
+
+
+ {{ @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 }}