From 5a33c2415c7e25b62eaa8b9d9fef2ee1b148690c Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Mon, 13 Sep 2021 12:26:39 +0200
Subject: [PATCH] improve rendering of classes

When we have a class like `.inset-1\/4` we want it to look like
`inset-1/4`. We used to remove the first character, but that is not
correct. Some classes are structured like `*, ::before, ::after {}`.

Instead we now drop leading `.` characters instead.
---
 src/components/ClassTable.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ClassTable.js b/src/components/ClassTable.js
index a84172e0a..ad3bdd7c0 100644
--- a/src/components/ClassTable.js
+++ b/src/components/ClassTable.js
@@ -116,7 +116,7 @@ export const ClassTable = memo(
     filterProperties,
     preview,
     sort = (x) => x,
-    transformSelector = (x) => (x.length === 1 ? x : x.slice(1).replace(/\\/g, '')),
+    transformSelector = (x) => x.replace(/^\./g, '').replace(/\\/g, ''),
     transformProperties = ({ properties }) => properties,
     transformValue,
     custom,