refactor: separete the selector utilities function and clean the entry point

Author: halvaradop

package.json

@@ -1,7 +1,7 @@
 {
-  "name": "tailwindcss-flow",
-  "version": "0.0.8",
-  "description": "Is a plugin designed to improve productivity in application development by providing additional utilities.",
+  "name": "@halvaradop/tailwindcss-flow",
+  "version": "0.0.1",
+  "description": "A TailwindCSS plugin that provides a set of utilities to enhance the default functionalities and offer additional customization options.",
   "main": "src/index.ts",
   "types": "src/index.d.ts",
   "scripts": {
@@ -10,7 +10,8 @@
     "build": "tsc && npm run build:css"
   },
   "publishConfig": {
-    "access": "public"
+    "access": "public",
+    "registry": "https://registry.npmjs.org/@halvaradop/tailwindcss-flow@0.0.1"
   },
   "repository": {
     "type": "git",

src/index.ts

@@ -1,50 +1,17 @@
 import plugin from "tailwindcss/plugin"
 import { PluginCreator } from "tailwindcss/types/config"
-import { verifySelectorsTheme } from "./utils";
 import { scrollUtilities } from "./scroll-utilities";
 import { fluencyUtilities } from "./fluency-utilities";
+import { selectorUtilities } from "./selector-utilities";
 
-
-const tags = [
-    "div",
-    "span",
-    "a",
-    "p",
-    "img",
-    "h1",
-    "h2",
-    "h3",
-    "h4",
-    "h5",
-    "h6",
-    "ul",
-    "ol",
-    "li",
-    "table",
-    "tr",
-    "td",
-    "form",
-    "input",
-    "button",
-    "section",
-    "main",
-    "body",
-    "article",
-    "label",
-    "img",
-    "figure",
-    "picture",
-    "caption",
-    "footer"
-]
-
-
+/**
+ * Entry point of the application. This encapsulates the utilities offered
+ * by the plugin.
+ * 
+ * @param configApi The configuration API object obtained from tailwindcss.config.ts
+ */
 export const creator: PluginCreator = (configApi) => {
-    const { addVariant, theme } = configApi
-
-    const selectors = verifySelectorsTheme(theme("selectors")).concat(tags)
-    selectors.forEach(tag => addVariant(tag, `:where(&:is(${tag}), & > ${tag})`))
-
+    selectorUtilities(configApi)
     fluencyUtilities(configApi)
     scrollUtilities(configApi)
 }

src/selector-utilities.ts

@@ -0,0 +1,57 @@
+import { PluginAPI } from "tailwindcss/types/config"
+import { verifySelectorsTheme } from "./utils"
+
+/**
+ * This array contains the default tags supported by the selector variant
+ * utilities. It provides a list of commonly used tags.
+ */
+const tags: string[] = [
+    "div",
+    "span",
+    "a",
+    "p",
+    "img",
+    "h1",
+    "h2",
+    "h3",
+    "h4",
+    "h5",
+    "h6",
+    "ul",
+    "ol",
+    "li",
+    "table",
+    "tr",
+    "td",
+    "form",
+    "input",
+    "button",
+    "section",
+    "main",
+    "body",
+    "article",
+    "label",
+    "img",
+    "figure",
+    "picture",
+    "caption",
+    "footer"
+]
+
+
+/**
+ * Defines a set of tag variant utilities that allow you to customize different
+ * HTML tags within a project. This enables more specific styling of elements.
+ * The plugin also allows users to extend the default set of supported tags.
+ * 
+ * To extend the default tags, you can add an array of new tags within the theme 
+ * property and set a `selectors` property in the Tailwind configuration file.
+ * 
+ * @param configApi The configuration API object obtained from tailwindcss.config.ts
+ */
+export const selectorUtilities = (configApi: PluginAPI) => {
+    const { addVariant, theme } = configApi
+    
+    const selectors = verifySelectorsTheme(theme("selectors")).concat(tags)
+    selectors.forEach(tag => addVariant(tag, `:where(&:is(${tag}), & > ${tag})`))
+}

src/utilities.css

@@ -11,7 +11,7 @@
     // "disableReferencedProjectLoad": true,             /* Reduce the number of projects loaded automatically by TypeScript. */
 
     /* Language and Environment */
-    "target": "es2016",                                  /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
+    "target": "ES2022",                                  /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
     // "lib": [],                                        /* Specify a set of bundled library declaration files that describe the target runtime environment. */
     // "jsx": "preserve",                                /* Specify what JSX code is generated. */
     // "experimentalDecorators": true,                   /* Enable experimental support for legacy experimental decorators. */
@@ -106,5 +106,7 @@
     /* Completeness */
     // "skipDefaultLibCheck": true,                      /* Skip type checking .d.ts files that are included with TypeScript. */
     "skipLibCheck": true                                 /* Skip type checking all .d.ts files. */,
-  }
+  },
+  "include": ["src/"],
+  "exclude": ["src/page"]
 }