feat: Streamline templates

* reindent to 2-space * lowercase charset * use double quotes consistently * remove unneeded end tags * remove unneeded type="text/css" * switch to `::before`
twbs · Mar 20, 2023 · 33180ff · 33180ff
1 parent ac359a8
commit 33180ff
Show file tree

Hide file tree

Showing 11 changed files with 263 additions and 262 deletions.
diff --git 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
@@ -4,70 +4,70 @@ exports[`\`HTML\` asset generator renders HTML correctly with prefix and tag nam
 "<!DOCTYPE html>
 <html lang="en">
 <head>
-    <meta charset="UTF-8">
-    <title>test-font</title>
+  <meta charset="utf-8">
+  <title>test-font</title>
 
-    <style>
-        body {
-            font-family: sans-serif;
-            margin: 0;
-            padding: 10px 20px;
-            text-align: center;
-        }
-        .preview {
-            width: 100px;
-            display: inline-block;
-            margin: 10px;
-        }
-        .preview .inner {
-            display: inline-block;
-            width: 100%;
-            text-align: center;
-            background: #f5f5f5;
-            -webkit-border-radius: 3px 3px 0 0;
-            -moz-border-radius: 3px 3px 0 0;
-            border-radius: 3px 3px 0 0;
-        }
-        .preview .inner  {
-            line-height: 85px;
-            font-size: 40px;
-            color: #333;
-        }
-        .label {
-            display: inline-block;
-            width: 100%;
-            box-sizing: border-box;
-            padding: 5px;
-            font-size: 10px;
-            font-family: Monaco, monospace;
-            color: #666;
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            background: #ddd;
-            -webkit-border-radius: 0 0 3px 3px;
-            -moz-border-radius: 0 0 3px 3px;
-            border-radius: 0 0 3px 3px;
-            color: #666;
-        }
-    </style>
+  <style>
+    body {
+      font-family: sans-serif;
+      margin: 0;
+      padding: 10px 20px;
+      text-align: center;
+    }
 
-    <link rel="stylesheet" type="text/css" href="test-font.css" />
-</head>
-<body>
+    .preview {
+      width: 100px;
+      display: inline-block;
+      margin: 10px;
+    }
 
-    <h1>test-font</h1>
+    .preview .inner {
+      display: inline-block;
+      width: 100%;
+      text-align: center;
+      background: #f5f5f5;
+      -webkit-border-radius: 3px 3px 0 0;
+      -moz-border-radius: 3px 3px 0 0;
+      border-radius: 3px 3px 0 0;
+    }
 
+    .preview .inner  {
+      line-height: 85px;
+      font-size: 40px;
+      color: #333;
+    }
 
-        <div class="preview">
-            <span class="inner">
-                <b class="tf tf-my-icon"></b>
-            </span>
-            <br>
-            <span class='label'>my-icon</span>
-        </div>
+    .label {
+      display: inline-block;
+      width: 100%;
+      box-sizing: border-box;
+      padding: 5px;
+      font-size: 10px;
+      font-family: Monaco, monospace;
+      color: #666;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      background: #ddd;
+      -webkit-border-radius: 0 0 3px 3px;
+      -moz-border-radius: 0 0 3px 3px;
+      border-radius: 0 0 3px 3px;
+      color: #666;
+    }
+  </style>
 
+  <link rel="stylesheet" href="test-font.css">
+</head>
+<body>
+  <h1>test-font</h1>
 
+  <div class="preview">
+    <span class="inner">
+      <b class="tf tf-my-icon"></b>
+    </span>
+    <br>
+    <span class="label">my-icon</span>
+  </div>
 </body>
 </html>
 "

diff --git a/src/generators/asset-types/__tests__/__snapshots__/sass.ts.snap b/src/generators/asset-types/__tests__/__snapshots__/sass.ts.snap
@@ -4,52 +4,50 @@ 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")
 "
 `;
 
 exports[`\`SASS\` asset generator renders SASS correctly with prefix and tag name options 1`] = `
 "$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
@@ -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
@@ -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 {');
   });
 });