Add TailwindCSS plugin for Prettier (#458)

srcery-colors · Aug 12, 2023 · 24a0451 · 24a0451
1 parent 810aea8
commit 24a0451
Show file tree

Hide file tree

Showing 15 changed files with 154 additions and 75 deletions.
diff --git a/.prettierrc.js b/.prettierrc.js
diff --git a/.eslintrc.js → eslint.config.js b/.eslintrc.js → eslint.config.js
@@ -1,4 +1,6 @@
-module.exports = {
+// ESLint Config
+
+const config = {
   env: {
     browser: true,
     node: true,
@@ -14,3 +16,5 @@ module.exports = {
     "no-unused-vars": "warn",
   },
 };
+
+export default config;
diff --git a/package.json b/package.json
@@ -10,6 +10,7 @@
   },
   "license": "MIT",
   "author": "Srcery Team",
+  "type": "module",
   "scripts": {
     "build": "vite build --emptyOutDir",
     "clean": "rm -f src/github.json",
@@ -34,6 +35,7 @@
     "postcss": "^8.4.27",
     "prettier": "^3.0.1",
     "prettier-plugin-packagejson": "^2.4.5",
+    "prettier-plugin-tailwindcss": "^0.5.2",
     "tailwindcss": "^3.3.3",
     "vite": "^4.3.4",
     "vite-plugin-handlebars": "^1.6.0"

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/postcss.config.js b/postcss.config.js
@@ -1,7 +1,11 @@
 // PostCSS Config
-module.exports = {
+
+/** @type {import('postcss-load-config').Config} */
+const config = {
   plugins: {
     tailwindcss: {},
     autoprefixer: {},
   },
 };
+
+export default config;
diff --git a/prettier.config.js b/prettier.config.js
@@ -0,0 +1,8 @@
+// Prettier Config
+
+/** @type {import("prettier").Config} */
+const config = {
+  plugins: ["prettier-plugin-packagejson", "prettier-plugin-tailwindcss"],
+};
+
+export default config;
diff --git a/src/community/index.html b/src/community/index.html
@@ -11,21 +11,21 @@
     <title>Srcery Theme - Community activities and communications</title>
   </head>
   <body
-    class="font-iosevka bg-black text-bright_white flex justify-center p-4 w-100"
+    class="w-100 flex justify-center bg-black p-4 font-iosevka text-bright_white"
   >
     {{> octocat }}
     <main
       x-data="state"
-      class="flex items-center flex-col grow sm:grow-0 width-[448px] sm:w-[780px] min-w-0"
+      class="width-[448px] flex min-w-0 grow flex-col items-center sm:w-[780px] sm:grow-0"
     >
       {{> header community=true }}
       <section class="w-full">
         <div class="mb-8">
-          <h2 class="text-xl mb-3 text-center sm:text-left uppercase">
+          <h2 class="mb-3 text-center text-xl uppercase sm:text-left">
             <!-- <div class="svg w-8 mr-2" x-html="icon"></div> -->
             Discord
           </h2>
-          <p class="text-justify mb-3">
+          <p class="mb-3 text-justify">
             We run a Discord server for those interested. You're welcome to join
             us there if you have any burning questions or just wanna say hi.
           </p>
@@ -41,10 +41,10 @@ <h2 class="text-xl mb-3 text-center sm:text-left uppercase">
         </div>
 
         <div class="mb-8">
-          <h2 class="text-xl mb-3 text-center sm:text-left uppercase">
+          <h2 class="mb-3 text-center text-xl uppercase sm:text-left">
             Merchandise
           </h2>
-          <p class="text-justify mb-3">
+          <p class="mb-3 text-justify">
             Get our brand new merchandise featuring the Srcery color scheme!
             We're not making any profit from the sales, so you are instead
             showing your support by wearing and using the merch. Thank you for
@@ -57,7 +57,7 @@ <h2 class="text-xl mb-3 text-center sm:text-left uppercase">
           </div>
         </div>
         <div class="mb-8">
-          <h2 class="text-xl mb-3 text-center sm:text-left uppercase">
+          <h2 class="mb-3 text-center text-xl uppercase sm:text-left">
             Community
           </h2>
           <p class="text-justify">
@@ -67,45 +67,45 @@ <h2 class="text-xl mb-3 text-center sm:text-left uppercase">
           </p>
         </div>
         <div class="mb-8">
-          <h2 class="text-xl mb-4 text-center sm:text-left uppercase">
+          <h2 class="mb-4 text-center text-xl uppercase sm:text-left">
             Core team
           </h2>
           <div
-            class="grid grid-cols-2 justify-items-center sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-5"
+            class="grid grid-cols-2 justify-items-center gap-5 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5"
           >
             <template x-for="user in github.members">
               <a
                 :href="user.html_url"
                 target="_blank"
-                class="flex flex-col items-center border-2 border-bright_black hover:border-bright_white hover:cursor-pointer p-4"
+                class="flex flex-col items-center border-2 border-bright_black p-4 hover:cursor-pointer hover:border-bright_white"
               >
                 <img
                   :src="user.avatar_url"
                   alt="github user avatar"
-                  class="p-1 border-4 border-bright_black w-1/2 rounded-full mb-2"
+                  class="mb-2 w-1/2 rounded-full border-4 border-bright_black p-1"
                 />
                 <div x-text="user.login"></div>
               </a>
             </template>
           </div>
         </div>
         <div class="mb-8">
-          <h2 class="text-xl mb-4 text-center sm:text-left uppercase">
+          <h2 class="mb-4 text-center text-xl uppercase sm:text-left">
             Contributors
           </h2>
           <div
-            class="grid grid-cols-2 justify-items-center sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-5"
+            class="grid grid-cols-2 justify-items-center gap-5 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5"
           >
             <template x-for="user in github.contributors">
               <a
                 :href="user.html_url"
                 target="_blank"
-                class="flex break-all flex-col items-center border-2 border-bright_black hover:border-bright_white hover:cursor-pointer p-4"
+                class="flex flex-col items-center break-all border-2 border-bright_black p-4 hover:cursor-pointer hover:border-bright_white"
               >
                 <img
                   :src="user.avatar_url"
                   alt="github user avatar"
-                  class="p-1 w-1/2 border-4 border-bright_black rounded-full mb-2"
+                  class="mb-2 w-1/2 rounded-full border-4 border-bright_black p-1"
                 />
                 <div class="break-word" x-text="user.login"></div>
               </a>

diff --git a/src/index.html b/src/index.html
@@ -12,16 +12,16 @@
     </title>
   </head>
   <body
-    class="font-iosevka bg-black text-bright_white flex justify-center p-4 w-100"
+    class="w-100 flex justify-center bg-black p-4 font-iosevka text-bright_white"
   >
     {{> octocat }}
     <main
       x-data="state"
-      class="flex items-center flex-col grow sm:grow-0 width-[448px] sm:w-[780px] min-w-0"
+      class="width-[448px] flex min-w-0 grow flex-col items-center sm:w-[780px] sm:grow-0"
     >
       {{> header }}
       <section class="w-full">
-        <div class="text-justify mb-8">
+        <div class="mb-8 text-justify">
           <p class="mb-4">
             Srcery is dark syntax highlighting color scheme with clearly defined
             contrasting colors and a slightly earthy tone.
@@ -35,7 +35,7 @@
           </p>
         </div>
         <div class="w-full">
-          <h2 class="uppercase mb-4">Preview</h2>
+          <h2 class="mb-4 uppercase">Preview</h2>
           <p class="mb-8">
             Here's a few
             <a class="link" href="https://rosettacode.org/wiki/Rosetta_Code"
@@ -48,7 +48,7 @@ <h2 class="uppercase mb-4">Preview</h2>
             for details about a specific editor/IDE.
           </p>
           <ul
-            class="flex overflow-x-auto overflow-y-hidden text-center border-bright_black"
+            class="flex overflow-x-auto overflow-y-hidden border-bright_black text-center"
           >
             <template x-for="(value, key) in languages">
               <li class="flex flex-1">
@@ -70,7 +70,7 @@ <h2 class="uppercase mb-4">Preview</h2>
             </template>
           </ul>
           <div
-            class="border-b-2 border-x-2 border-bright_black overflow-x-auto"
+            class="overflow-x-auto border-x-2 border-b-2 border-bright_black"
           >
             <pre id="preview" class="flex p-4">
                 <code class="font-iosevka" x-html="languages[activeTab].html">

diff --git a/src/partials/header.html b/src/partials/header.html
@@ -1,42 +1,42 @@
-<header class="min-w-auto sm:min-w-[640px] sm:max-w-[640px] mb-8">
+<header class="min-w-auto mb-8 sm:min-w-[640px] sm:max-w-[640px]">
   <a
     href="/"
-    class="min-h-auto pt-2 sm:pt-0 sm:min-h-[546px] flex flex-col items-center mb-2"
+    class="min-h-auto mb-2 flex flex-col items-center pt-2 sm:min-h-[546px] sm:pt-0"
   >
     <div
-      class="flex sm:hidden p-5 rounded-full border-2 border-bright_black justify-center items-center"
+      class="flex items-center justify-center rounded-full border-2 border-bright_black p-5 sm:hidden"
     >
       <img
         alt="Srcery glyph"
         src="/svg/glyph.svg"
-        class="glyph w-logo h-logo"
+        class="glyph h-logo w-logo"
       />
     </div>
     <div
-      class="bg-triangle bg-no-repeat min-h-[546px] pt-[30%] hidden sm:flex min-w-full bg-center align-center justify-center"
+      class="align-center hidden min-h-[546px] min-w-full justify-center bg-triangle bg-center bg-no-repeat pt-[30%] sm:flex"
     >
       <img
         alt="Srcery glyph"
         src="/svg/glyph.svg"
-        class="glyph w-logo h-logo"
+        class="glyph h-logo w-logo"
       />
     </div>
-    <div class="mt-4 sm:mt-[-18%] flex items-center">
-      <div class="flex mr-2">
+    <div class="mt-4 flex items-center sm:mt-[-18%]">
+      <div class="mr-2 flex">
         <div class="dot bg-xgray2"></div>
         <div class="dot bg-xgray7"></div>
         <div class="dot bg-xgray10"></div>
       </div>
-      <h1 class="uppercase text-6xl">Srcery</h1>
-      <div class="flex ml-2">
+      <h1 class="text-6xl uppercase">Srcery</h1>
+      <div class="ml-2 flex">
         <div class="dot bg-xgray10"></div>
         <div class="dot bg-xgray7"></div>
         <div class="dot bg-xgray2"></div>
       </div>
     </div>
   </a>
   <nav
-    class="flex justify-center max-w-[384px] sm:max-w-full flex grow justify-between"
+    class="flex flex max-w-[384px] grow justify-center justify-between sm:max-w-full"
   >
     <span class="w-full text-left">
       <a href="/themes/" class="link uppercase {{#if themes}}sel{{/if}}"

diff --git a/src/partials/octocat.html b/src/partials/octocat.html
@@ -5,7 +5,7 @@
     aria-label="View source on Github"
   >
     <svg
-      class="text-bright_white fill-hard_black"
+      class="fill-hard_black text-bright_white"
       viewBox="0 0 250 250"
       aria-hidden="true"
     >