added feature to add prefix in classes from setting tab

ads.txt

@@ -0,0 +1 @@
+google.com, pub-5619570488602254, DIRECT, f08c47fec0942fa0

gatsby-config.js

@@ -14,6 +14,18 @@ module.exports = {
             },
         },
         `gatsby-transformer-sharp`,
+        {
+            resolve: `gatsby-plugin-google-gtag`,
+            options: {
+              trackingIds: [
+                "G-H96HXS3WCV", // Replace with your Google Analytics tracking ID
+              ],
+              pluginConfig: {
+                head: true,
+                sendPageView: true // set send_page_view to true
+              },
+            },
+        },
         `gatsby-plugin-sharp`,
         {
             resolve: `gatsby-plugin-manifest`,

package.json

@@ -11,6 +11,7 @@
     "csslint": "^1.0.5",
     "gatsby": "^2.20.12",
     "gatsby-image": "^2.3.1",
+    "gatsby-plugin-google-gtag": "^5.7.0",
     "gatsby-plugin-manifest": "^2.3.3",
     "gatsby-plugin-offline": "^3.1.2",
     "gatsby-plugin-postcss": "^2.2.2",
@@ -36,7 +37,7 @@
   ],
   "license": "MIT",
   "scripts": {
-    "build": "gatsby build",
+    "build": "export NODE_OPTIONS=--openssl-legacy-provider; gatsby build",
     "develop": "gatsby develop",
     "format": "prettier --write \"**/*.{js,jsx,json,md}\"",
     "start": "npm run develop",

public/page-data/dev-404-page/page-data.json

@@ -1 +1 @@
-{"componentChunkName":"component---cache-dev-404-page-js","path":"/dev-404-page/","result":{"data":{"allSitePage":{"nodes":[{"path":"/404/"},{"path":"/"},{"path":"/page-2/"},{"path":"/404.html"}]}},"pageContext":{}}}
+{"componentChunkName":"component---cache-dev-404-page-js","path":"/dev-404-page/","result":{"data":{"allSitePage":{"nodes":[{"path":"/404/"},{"path":"/"},{"path":"/page-2/"},{"path":"/404.html"},{"path":"/privacy-policy/"}]}},"pageContext":{}}}

src/components/editor.js

@@ -134,6 +134,10 @@ const Editor = ({ setCssTree, setEditorErrors }) => {
                             setEditorErrors,
                             editor.state.lint.marked.length > 0
                         );
+                        typeof window !== "undefined" && window.gtag("event", "conversion_tracking", {
+                            event_category: "data_update",
+                            event_label: "editor_update",
+                        })
                         // setCssTree(parse(value));
                         // setEditorErrors(editor.state.lint.marked.length > 0);
                         // console.log(editor, data, parse(value));

src/components/image.js

@@ -16,7 +16,7 @@ import Img from "gatsby-image"
 const Image = () => {
   const data = useStaticQuery(graphql`
     query {
-      placeholderImage: file(relativePath: { eq: "gatsby-astronaut.png" }) {
+      placeholderImage: file(relativePath: { eq: "" }) {
         childImageSharp {
           fluid(maxWidth: 300) {
             ...GatsbyImageSharpFluid

src/components/output.js

@@ -5,14 +5,19 @@ import TailwindBlock from './tailwind-block';
 
 const Output = ({ settings, cssTree, editorErrors }) => {
     const parseStyleTree = (styleTree, selector) => {
-        const tailWindStyles = [];
+        let tailWindStyles = [];
         const errors = [];
         const isHover = selector.indexOf(':hover') !== -1;
         for (let i = 0; i < styleTree.length; i++) {
             const property = styleTree[i];
             const value = styleTree[property];
             convertCss(property, value, tailWindStyles, errors, settings);
         }
+        if(settings.classPrefix != ''){
+            tailWindStyles = tailWindStyles.map(element => {
+                return settings.classPrefix+'-'+element
+            })
+        }
         return [tailWindStyles, errors];
     };
     console.log(cssTree);

src/components/settings.js

@@ -62,6 +62,22 @@ const Settings = ({ settings, setSettings }) => {
                                 max="300"
                             ></input>
                         </div>
+                        <div className="w-full flex justify-between text-sm my-2 items-center">
+                            <label>Prefix</label>
+                            <input
+                                value={settings.classPrefix}
+                                onChange={(event) =>
+                                    handleChange(
+                                        'classPrefix',
+                                        event.target.value
+                                    )
+                                }
+                                className="rounded border border-teal-800 border-solid"
+                                type="text"
+                                id="remConversion"
+                                name="remConversion"
+                            ></input>
+                        </div>
                         <div className="w-full flex justify-between text-sm my-2 items-center">
                             <label>Auto Convert Margin/Padding</label>
                             <input

src/pages/index.js

@@ -12,6 +12,7 @@ const IndexPage = () => {
         remConversion: 16,
         autoConvertSpacing: true,
         autoConvertColor: true,
+        classPrefix:''
     });
     return (
         <div

src/scripts/parser/parser.js

@@ -30,7 +30,34 @@ export const convertCss = (
             `${TailWindMap[processedProperty][processedValue].substring(1)}`
         );
     } else {
-        errors.push(`${property}: ${value};`);
+        if(TailWindMap[processedProperty] && processedValue.split(' ').length === 1 && (TailWindMap[processedProperty][0] !== undefined)){
+            tailWindStyles.push(
+                `${(TailWindMap[processedProperty][0].split('-')[0]+'-['+processedValue+']').substring(1)}`
+            );
+        }else if(TailWindMap[processedProperty] && processedValue.split(' ').length === 2 && (TailWindMap[processedProperty][0] !== undefined)){
+            tailWindStyles.push(
+                `${(TailWindMap[processedProperty][0].split('-')[0]+'y-['+processedValue.split(' ')[0]+']').substring(1)}`
+            );
+            tailWindStyles.push(
+                `${(TailWindMap[processedProperty][0].split('-')[0]+'x-['+processedValue.split(' ')[1]+']').substring(1)}`
+            );
+        }else if(TailWindMap[processedProperty] && processedValue.split(' ').length === 4 && (TailWindMap[processedProperty][0] !== undefined)){
+            tailWindStyles.push(
+                `${(TailWindMap[processedProperty][0].split('-')[0]+'t-['+processedValue.split(' ')[0]+']').substring(1)}`
+            );
+            tailWindStyles.push(
+                `${(TailWindMap[processedProperty][0].split('-')[0]+'r-['+processedValue.split(' ')[1]+']').substring(1)}`
+            );
+            tailWindStyles.push(
+                `${(TailWindMap[processedProperty][0].split('-')[0]+'b-['+processedValue.split(' ')[2]+']').substring(1)}`
+            );
+            tailWindStyles.push(
+                `${(TailWindMap[processedProperty][0].split('-')[0]+'l-['+processedValue.split(' ')[3]+']').substring(1)}`
+            );
+        }
+        else{
+            errors.push(`${property}: ${value};`);
+        }
     }
 };
 

static/ads.txt

@@ -0,0 +1 @@
+google.com, pub-5619570488602254, DIRECT, f08c47fec0942fa0