@salla.sa/twilight-tailwind-theme 1.0.0 → 1.0.1

package/index.js

@@ -1,8 +1,6 @@
-const plugin = require('tailwindcss/plugin');
-const fs = require('fs');
-const path = require('path');
+import * as componentsClasses from './utilities.json';
 
-module.exports = plugin.withOptions(() => {
+let tailwind=require('tailwindcss/plugin').withOptions(() => {
   return function({addUtilities}) {
     addUtilities({
       // TODO :: find if there are used and defined them here if its.
@@ -10,11 +8,6 @@ module.exports = plugin.withOptions(() => {
       '.text-md': {},
       '.items-top': {},
       '.error': {},
-
-      // wrapper class
-      // todo :: rename it with the statnder
-      '.results__item': {},
-
       '.search-box': {},
       '.spinner-loader-wrap': {}
     });
@@ -30,6 +23,9 @@ module.exports = plugin.withOptions(() => {
       }
     });
 
-    addUtilities(JSON.parse(fs.readFileSync(path.resolve(__dirname, 'utilities.json'), 'UTF-8')));
+    addUtilities(componentsClasses);
   };
 });
+export {
+  tailwind
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salla.sa/twilight-tailwind-theme",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "license": "MIT",
   "keywords": [
     "Salla twilight",
@@ -13,7 +13,7 @@
   "homepage": "https://salla.dev",
   "scripts": {
     "generate": "node scripts/generator.js",
-    "publish": "npm publish --access public"
+    "publish": "npm version patch && generate && npm publish --access private"
   },
   "files": [
     "index.js",

package/readme.md

@@ -0,0 +1,47 @@
+## Usage 
+
+1. add the plugin to tailwaind plugins in `tailwind.config.js` file
+```js
+    plugins: [
+      ...
+      require('@salla.sa/twilight-tailwind-theme'),
+      ....
+    ]
+```
+2. (Optional) in case you are enabling the `purge` you should add the safe list css class to purge settings  in `tailwind.config.js` file
+
+### JIT Enabled 
+
+because of https://tailwindcss.com/docs/just-in-time-mode#limitations
+
+```js
+    purge   : {
+      enabled: true,
+      content: ["views/**/*.twig", "node_modules/@salla.sa/twilight-tailwind-theme/safe-list-css.txt"]
+    }
+```
+
+### JIT Disabled
+
+You can easly add `/^s-.*/` to safelist
+```js
+    purge   : {
+        enabled: true,
+        content: ["views/**/*.twig"],
+        options: {
+            safelist: [/^s-.*/]
+        }
+    },
+```
+
+ ## Add A new compnoent 
+ 
+ 1. create a new folder with the name of compnenet
+ 2. create a `utilities.json` file with list of class as json
+
+
+## Publish 
+
+```
+npm run publish
+```

package/safe-list-css.txt

@@ -11,12 +11,9 @@ s-search-modal-spinner
 s-search-modal-spinner-loader
 s-search-modal-search-results
 s-search-modal-no-results
-s-search-modal-results-item
 s-search-modal-product
 s-search-modal-product-image-container
 s-search-modal-product-image
 s-search-modal-product-details
 s-search-modal-product-title
-s-search-modal-product-title-h3
-s-search-modal-product-price
-s-search-modal-product-price-h4
+s-search-modal-product-price

package/utilities.json

@@ -1 +1 @@
-{".s-search-modal-search-button-icon":{"@apply bg-gray-bg2 hover:bg-gray-150 dark:hover:bg-opacity-10 transition duration-300 mx-3 text-sm rounded-full w-9 h-9":{}},".s-search-modal-container":{"@apply fixed inset-0 z-50 flex items-top justify-center overflow-auto items-top":{}},".s-search-modal-wrapper":{"@apply bg-transparent w-full":{}},".s-search-modal-inner":{"@apply mx-auto w-11/12 lg:w-6/12":{}},".s-search-modal-search-box-container":{"@apply mt-36 search-box anime-item":{}},".s-search-modal-search-box-inner":{"@apply relative bg-white rounded-tiny border border-border-color":{}},".s-search-modal-search-box-inner-open":{"@apply relative bg-white rounded-tiny border border-border-color rounded-b-none":{}},".s-search-modal-input":{"@apply anime-item bg-transparent border-0 form-input w-full ps-10 pt-6 pb-7 rounded-tiny text-gray-600":{}},".s-search-modal-search-icon":{"@apply anime-item flex justify-end items-center absolute top-4 start-4 text-md text-gray-text":{}},".s-search-modal-spinner":{"@apply spinner-loader-wrap absolute top-1/2 transform -translate-y-1/2 start-4 w-4 h-4":{}},".s-search-modal-spinner-loader":{"@apply  block spinner-loader w-4 h-4 animate-spin border-2 border-gray-300 rounded-full":{}},".s-search-modal-search-results":{"@apply m-auto max-h-96  overflow-y-auto bg-white rounded-b-tiny":{}},".s-search-modal-no-results":{"@apply error p-4 text-sm text-gray-text":{}},".s-search-modal-results-item":{"@apply transition-colors duration-300 hover:bg-gray-bg2 results__item px-4 xs:px-5 py-5 border-t-0":{}},".s-search-modal-product":{"@apply h-full transition duration-500 bg-transparent justify-around overflow-hidden flex":{}},".s-search-modal-product-image-container":{"@apply relative overflow-hidden w-20 h-20 sm:w-28 sm:h-28 rounded-md":{}},".s-search-modal-product-image":{"@apply h-full w-full object-cover":{}},".s-search-modal-product-details":{"@apply flex-1 ps-4 xs:ps-5 pt-1":{}},".s-search-modal-product-title":{"@apply flex flex-col justify-start items-baseline":{}},".s-search-modal-product-title-h3":{"@apply text-sm font-bold text-title-color leading-6 mb-2.5":{}},".s-search-modal-product-price":{"@apply w-full flex justify-between items-center mb-5":{}},".s-search-modal-product-price-h4":{"@apply text-primary font-bold text-sm":{}}}
+{".s-search-modal-search-button-icon":{"@apply bg-gray-bg2 hover:bg-gray-150 dark:hover:bg-opacity-10 transition duration-300 mx-3 text-sm rounded-full w-9 h-9":{}},".s-search-modal-container":{"@apply fixed inset-0 z-50 flex items-top justify-center overflow-auto items-top":{}},".s-search-modal-wrapper":{"@apply bg-transparent w-full":{}},".s-search-modal-inner":{"@apply mx-auto w-11/12 lg:w-6/12":{}},".s-search-modal-search-box-container":{"@apply mt-36 search-box anime-item":{}},".s-search-modal-search-box-inner":{"@apply relative bg-white rounded-tiny border border-border-color":{}},".s-search-modal-search-box-inner-open":{"@apply relative bg-white rounded-tiny border border-border-color rounded-b-none":{}},".s-search-modal-input":{"@apply anime-item bg-transparent border-0 form-input w-full ps-10 pt-6 pb-7 rounded-tiny text-gray-600":{}},".s-search-modal-search-icon":{"@apply anime-item flex justify-end items-center absolute top-4 start-4 text-md text-gray-text":{}},".s-search-modal-spinner":{"@apply spinner-loader-wrap absolute top-1/2 transform -translate-y-1/2 start-4 w-4 h-4":{}},".s-search-modal-spinner-loader":{"@apply  block spinner-loader w-4 h-4 animate-spin border-2 border-gray-300 rounded-full":{}},".s-search-modal-search-results":{"@apply m-auto max-h-96  overflow-y-auto bg-white rounded-b-tiny":{}},".s-search-modal-no-results":{"@apply error p-4 text-sm text-gray-text":{}},".s-search-modal-product":{"@apply h-full transition duration-500 bg-transparent justify-around overflow-hidden flex transition-colors duration-300 hover:bg-gray-bg2 px-4 xs:px-5 py-5 border-t-0":{}},".s-search-modal-product-image-container":{"@apply relative overflow-hidden w-20 h-20 sm:w-28 sm:h-28 rounded-md":{}},".s-search-modal-product-image":{"@apply h-full w-full object-cover":{}},".s-search-modal-product-details":{"@apply flex-1 ps-4 xs:ps-5 pt-1":{}},".s-search-modal-product-title":{"@apply flex flex-col justify-start items-baseline text-sm font-bold text-title-color leading-6 mb-2.5":{}},".s-search-modal-product-price":{"@apply w-full flex justify-between items-center mb-5 text-primary font-bold text-sm":{}}}