From 1f5529fe6e7260f14373c55889d4ea4a3c092814 Mon Sep 17 00:00:00 2001
From: Joshua Pease <joshua.pease@viget.com>
Date: Tue, 14 May 2024 17:14:31 -0700
Subject: [PATCH] [#2] Add `postcss-pxtorem`

---
 package-lock.json    | 10 ++++++++++
 package.json         |  1 +
 postcss.config.js    | 30 ++++++++++++++++++++++++++++++
 templates/index.twig |  2 +-
 4 files changed, 42 insertions(+), 1 deletion(-)

diff --git a/package-lock.json b/package-lock.json
index cb7ada5..501c05b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,7 @@
       "devDependencies": {
         "autoprefixer": "^10.4.19",
         "postcss": "^8.4.38",
+        "postcss-pxtorem": "^6.1.0",
         "tailwindcss": "^3.4.3",
         "vite": "^5.2.0"
       }
@@ -1651,6 +1652,15 @@
         "postcss": "^8.2.14"
       }
     },
+    "node_modules/postcss-pxtorem": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-pxtorem/-/postcss-pxtorem-6.1.0.tgz",
+      "integrity": "sha512-ROODSNci9ADal3zUcPHOF/K83TiCgNSPXQFSbwyPHNV8ioHIE4SaC+FPOufd8jsr5jV2uIz29v1Uqy1c4ov42g==",
+      "dev": true,
+      "peerDependencies": {
+        "postcss": "^8.0.0"
+      }
+    },
     "node_modules/postcss-selector-parser": {
       "version": "6.0.16",
       "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.16.tgz",
diff --git a/package.json b/package.json
index cb73c21..fcce078 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
   "devDependencies": {
     "autoprefixer": "^10.4.19",
     "postcss": "^8.4.38",
+    "postcss-pxtorem": "^6.1.0",
     "tailwindcss": "^3.4.3",
     "vite": "^5.2.0"
   }
diff --git a/postcss.config.js b/postcss.config.js
index ea52a08..a03b6e1 100644
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -2,5 +2,35 @@ export default {
     plugins: {
         tailwindcss: {},
         autoprefixer: {},
+        'postcss-pxtorem': {
+            rootValue: 16,
+            unitPrecision: 5,
+            propList: [
+                'font',
+                'font-size',
+                'line-height',
+                'letter-spacing',
+                'border*',
+                'background*',
+                'grid*',
+                'top',
+                'left',
+                'bottom',
+                'right',
+                'inset',
+                'width',
+                'height',
+                'margin*',
+                'padding*',
+                'max-*',
+                'min-*',
+                'gap*',
+            ],
+            selectorBlackList: [],
+            replace: true,
+            mediaQuery: true,
+            minPixelValue: 0,
+            exclude: /node_modules/i,
+        }
     }
 }
\ No newline at end of file
diff --git a/templates/index.twig b/templates/index.twig
index e610aa3..b7a908a 100644
--- a/templates/index.twig
+++ b/templates/index.twig
@@ -1,5 +1,5 @@
 {% extends '_layouts/base' %}
 
 {% block content %}
-    <h1 class="text-xl text-red-300 m-10">Hello Viget Craft CMS Starter</h1>
+    <h1 class="text-xl text-red-300 m-[20px]">Hello Viget Craft CMS Starter</h1>
 {% endblock %}
\ No newline at end of file