pxtorem-css 1.0.0

package/Readme.md

@@ -0,0 +1,84 @@
+# pxtorem-css
+
+### A nodejs cli that convert px to rem in any css file
+
+
+## Description
+Convert px to rem in css with advanced functionality. pxtorem helps you reduce time when you write css code. This tool build with pure nodejs.
+
+Features:
+
+* You can convert px to rem in css anywhere within a second.
+* You can choose css directory and also output directory.
+* You can include and exclude css file when convert
+* Even you can ignore css attribute not to convert
+* You can customize options with pxtorem.config.json in your project
+
+
+## Installation
+
+Locally:
+```bash
+npm i pxtorem
+```
+
+Globally:
+```bash
+npm i -g pxtorem
+```
+
+## Usage
+```bash
+$ pxtorem [options]
+
+Options:
+  -init,--init [type]       Init pxtorem options json (preset: "pxtorem.config.json")
+  -s, --size [type]         Select html size (default: "16", preset: "16")
+  -d, --dir [type...]       Select css directory (default: ["/"], preset: "/")
+  -t, --type [type]         Select css ext type example: .scss (default: ".css", preset: ".css")
+  -i, --ignore [type...]    Ignore css attribute (default: [], preset: [])
+  -r, --replace [type]      For replace file name (default: false, preset: false)
+  -o, --output [type]       Output directory (default: "", preset: "")
+  -in, --include [type...]  For include css file path (default: [], preset: [])
+  -ex, --exclude [type...]  For exclue css file path (default: [], preset: [])
+  -c, --config [type]       For json config file (default: "", preset: "")
+  -h, --help                display help for command
+
+```
+
+### Example
+`$ pxtorem` : change all directories css file. <br>
+
+`$ pxtorem -d public/css` : change all css file inside public/css dir.<br>
+
+`$ pxtorem -d public/css -t .scss` : change all .scss extname file inside public/css dir.<br>
+
+`$ pxtorem -d public/css -t .scss -o public/remcss` : change all .scss extname file inside public/css dir and write file to public/remcss dir.<br>
+
+`$ pxtorem -d public/css -i box-shadow margin-left padding-left` : change all css file inside public/css dir except box-shadow margin-left padding-left attribute px.<br>
+
+`$ pxtorem -d public/css -r my/name/rem/.ext` : change all css filename example: style.css to mystylerem.css<br>
+
+`$ pxtorem -c pxtorem.json` : Customize your options with json file in your project folder<br>
+
+`$ pxtorem -init` : generate pxtorem.config.json (or you can give custom name) into your project folder<br>
+
+### pxtorem.json Example
+```bash
+{
+    "size": "16",
+    "dir": ["public/css"],
+    "type": ".css",
+    "ignore": ["margin", "padding", "box-shadow"],
+    "replace": "{your custom word}/name/{your custom word}/.ext",
+    "output": "",
+    "include": [],
+    "exclude": []
+}
+```
+
+## Contribution
+If you want to contribute or report any bug, you welcome
+
+<br>
+Don't forget to give a star 😍

package/app.js

@@ -0,0 +1,155 @@
+const chalk = require("chalk");
+const fs = require("fs");
+const path = require("path");
+
+function getListOfFile(dir, type, fileList) {
+    let files = fs.readdirSync(dir);
+    fileList = fileList || [];
+    files.forEach((f) => {
+        if (!f.startsWith(".")) {
+            let filePath = path.join(dir, f);
+
+            if (fs.statSync(filePath).isDirectory()) {
+                fileList = getListOfFile(filePath, type, fileList);
+            } else {
+                if (f.endsWith(type)) {
+                    fileList.push(filePath);
+                }
+            }
+        }
+    });
+    return fileList;
+}
+
+function pxtorem(
+    { size, dir, type, ignore, replace, output, include, exclude },
+    spinner
+) {
+    let finalArr = [];
+    dir.forEach((v) => {
+        finalArr = finalArr.concat(getListOfFile(v, type));
+    });
+    let finalPathArr = finalArr.map((v) => path.resolve(v)) || [];
+
+    if (include.length > 0) {
+        include.forEach((v) => {
+            if (finalPathArr.indexOf(v) === -1) {
+                finalPathArr.push(v);
+            }
+        });
+    }
+
+    if (exclude.length > 0) {
+        exclude.forEach((v) => {
+            if (finalPathArr.indexOf(v) !== -1) {
+                finalPathArr.splice(finalPathArr.indexOf(v), 1);
+            }
+        });
+    }
+    if (finalPathArr.length === 0) {
+        spinner.fail(chalk.red("At the end no css file found"));
+        process.exit(1);
+    }
+    finalPathArr.forEach((v) => {
+        try {
+            let fileName = path.basename(v);
+            if (replace) {
+                fileName = fileName.replace(
+                    new RegExp(path.extname(v), "g"),
+                    ""
+                );
+                fileName = replace.replace(new RegExp("/name/", "g"), fileName);
+
+                fileName = fileName.replace(
+                    new RegExp("/.ext", "g"),
+                    path.extname(v)
+                );
+                console.log(fileName);
+            }
+            const readFileData = fs.readFileSync(v, "utf-8");
+            if (!readFileData) {
+                throw new Error("Css file empty");
+            }
+            if (!size) {
+                throw new Error("Html size not valid");
+            }
+            const changeData = changePxToRem(readFileData, size, ignore);
+            if (output) {
+                const destination = path.join(output, fileName);
+
+                fs.writeFileSync(destination, changeData, {
+                    encoding: "utf-8",
+                    flag: "w",
+                });
+            } else {
+                fs.writeFileSync(v, changeData, {
+                    encoding: "utf-8",
+                    flag: "w",
+                });
+            }
+        } catch (error) {
+            spinner.fail(chalk.red("Something went wrong", error.message));
+        }
+    });
+}
+
+function changePxToRem(data, size, ignore) {
+    const myRegex = /[-]?([a-z]*[-])?[a-z]*?\:.*?.*?px(;)?.*/g;
+    const finalRegex =
+        /[-]?([a-z]*[-])?[a-z]*?\:.*?([0-9]*[.])?[0-9]*?px+(\s+([0-9]*[.])?[0-9]*?px)*/g;
+    const attributeValueRegex =
+        /[-]?([a-z]*[-])?[a-z]*?\:.*?([0-9]*[.])?[0-9]*?px/g;
+    const valueRegex = /([0-9]*[.])?[0-9]*?px/g;
+
+    let result = data.match(finalRegex);
+
+    if (!result) {
+        console.log(chalk.red("Match result not found"));
+        process.exit(1);
+    }
+    let filterResult = [];
+    if (Array.isArray(ignore) && ignore.length > 0) {
+        filterResult = result.filter((res) => {
+            for (let i = 0; i < ignore.length; i++) {
+                const element = ignore[i];
+                if (res.includes(element + ":")) {
+                    return res;
+                }
+            }
+        });
+    }
+    let finalResult = result.filter((v) => !filterResult.includes(v)) || [];
+
+    let valueResult = finalResult.map((v) => {
+        return v.match(valueRegex);
+    });
+
+    // result.forEach((v) => {
+    //     const pxValue = v.slice(0, -2);
+    //     const valueRegex = new RegExp(`${pxValue}px`, "g");
+    //     finalData = finalData.replace(
+    //         valueRegex,
+    //         `${pxValue / parseFloat(size)}rem`
+    //     );
+    // });
+    let finalData = data;
+    for (let i = 0; i < finalResult.length; i++) {
+        const element = finalResult[i];
+        const valueArr = valueResult[i];
+        let replaceElement = element;
+        for (let j = 0; j < valueArr.length; j++) {
+            const value = valueArr[j];
+            const pxValue = value.slice(0, -2);
+            replaceElement = replaceElement.replace(
+                value,
+                `${parseFloat(pxValue) / parseFloat(size)}rem`
+            );
+        }
+
+        // console.log(replaceElement);
+        finalData = finalData.replace(element, replaceElement);
+    }
+    return finalData;
+}
+
+module.exports = pxtorem;

package/bin/pxtorem

@@ -0,0 +1,198 @@
+#!/usr/bin/env node
+
+const fs = require("fs");
+const { program, Option } = require("commander");
+const path = require("path");
+const chalk = require("chalk");
+const pxtorem = require("../app");
+const ora = require("ora");
+
+const spinner = ora({
+    text: chalk.yellow("Converting css px to rem..."),
+    color: "yellow",
+});
+
+const processDir = process.cwd();
+
+program
+    .addOption(
+        new Option("-init,--init [type]", "Init pxtorem options json").preset(
+            "pxtorem.config.json"
+        )
+    )
+    .addOption(
+        new Option("-s, --size [type]", "Select html size")
+            .preset("16")
+            .default("16")
+    )
+    .addOption(
+        new Option("-d, --dir [type...]", "Select css directory")
+            .preset("/")
+            .default(["/"])
+    )
+    .addOption(
+        new Option("-t, --type [type]", "Select css ext type example: .scss")
+            .preset(".css")
+            .default(".css")
+    )
+    .addOption(
+        new Option("-i, --ignore [type...]", "Ignore css attribute")
+            .preset([])
+            .default([])
+    )
+    .addOption(
+        new Option("-r, --replace [type]", "For replace file name")
+            .preset(false)
+            .default(false)
+    )
+    .addOption(
+        new Option("-o, --output [type]", "Output directory")
+            .preset("")
+            .default("")
+    )
+    .addOption(
+        new Option("-in, --include [type...]", "For include css file path")
+            .preset([])
+            .default([])
+    )
+    .addOption(
+        new Option("-ex, --exclude [type...]", "For exclue css file path")
+            .preset([])
+            .default([])
+    )
+    .addOption(
+        new Option("-c, --config [type]", "For json config file")
+            .preset("")
+            .default("")
+    )
+    .parse();
+
+let options = program.opts();
+
+if (options.init) {
+    initFunction(options.init);
+}
+spinner.start();
+
+let configObj;
+const currentDir = fs.readdirSync(processDir);
+
+if (options.config && options.config.endsWith(".json")) {
+    if (currentDir.indexOf(options.config) !== -1) {
+        configObj = readConfigFile(options.config);
+    }
+} else {
+    if (currentDir.indexOf("pxtorem.json") !== -1) {
+        configObj = readConfigFile("pxtorem.json");
+    }
+    if (currentDir.indexOf("pxtorem.config.json") !== -1) {
+        configObj = readConfigFile("pxtorem.config.json");
+    }
+}
+
+function readConfigFile(fileName) {
+    try {
+        const configFilePath = path.join(processDir, fileName);
+        const configfile = fs.readFileSync(configFilePath, "utf-8");
+        const toObj = JSON.parse(`${configfile}`);
+        if (typeof toObj === "object") {
+            return toObj;
+        } else {
+            return false;
+        }
+    } catch (error) {
+        return false;
+    }
+}
+
+for (let key in options) {
+    if (configObj && configObj.hasOwnProperty(key)) {
+        const element = options[key];
+        if (Array.isArray(element)) {
+            let concatArr = element.concat(configObj[key]);
+            let finalArr = [];
+            concatArr.forEach((v) => {
+                if (finalArr.length === 0) {
+                    finalArr.push(v);
+                } else if (finalArr.indexOf(v) === -1) {
+                    finalArr.push(v);
+                }
+            });
+            options[key] = finalArr;
+        } else {
+            options[key] = configObj[key];
+        }
+    }
+}
+
+if (options.replace) {
+    const isMatch = options.replace.match(/.*\/name\/.*\/.ext/g);
+
+    if (!isMatch) {
+        spinner.fail(chalk.red("Replace name incorrect please fix this"));
+        process.exit(1);
+    }
+}
+
+options.dir.forEach((v) => {
+    const dirPath = path.join(processDir, v);
+    if (!fs.existsSync(dirPath)) {
+        spinner.fail(chalk.red("Css directories not exist!"));
+        process.exit(1);
+    }
+});
+
+if (options.include.length > 0) {
+    options.include.forEach((v) => checkFileExist(v, "Include"));
+    options.include = options.include.map((v) => path.resolve(v));
+}
+if (options.exclude.length > 0) {
+    options.exclude.forEach((v) => checkFileExist(v, "Exclude"));
+    options.exclude = options.exclude.map((v) => path.resolve(v));
+}
+
+function checkFileExist(filePath, type) {
+    filePath = path.join(processDir, filePath);
+    if (!fs.existsSync(filePath)) {
+        console.log(chalk.red(`${type} css file not exist`));
+        process.exit(1);
+    }
+}
+
+function checkOutputDir(dir) {
+    if (!fs.existsSync(path.join(processDir, dir))) {
+        console.log(chalk.red(`Output directory not exist`));
+        process.exit(1);
+    }
+}
+
+if (options.output) {
+    checkOutputDir(options.output);
+    options.output = path.resolve(options.output);
+}
+
+if (options.size && isNaN(options.size)) {
+    console.log(chalk.red(`Html size not valid`));
+    process.exit(1);
+}
+
+function initFunction(name) {
+    const initData = `{
+        "size": "16",
+        "dir": ["public/css"],
+        "type": ".css",
+        "ignore": ["margin", "padding", "box-shadow"],
+        "replace": "{your custom word}/name/{your custom word}/.ext",
+        "output": "",
+        "include": [],
+        "exclude": []
+    }`;
+    const filePath = path.join(processDir, name);
+    fs.writeFileSync(filePath, initData, { encoding: "utf-8", flag: "w" });
+    spinner.succeed(chalk.green(`${name} created!`));
+    process.exit(1);
+}
+
+pxtorem(options, spinner);
+
+spinner.succeed(chalk.green("Convert completed. Enjoy (:"));

package/package.json

@@ -0,0 +1,25 @@
+{
+    "name": "pxtorem-css",
+    "version": "1.0.0",
+    "description": "A nodejs cli that convert css unit px to rem",
+    "main": "app.js",
+    "scripts": {},
+    "author": "Rashed Iqbal",
+    "license": "ISC",
+    "bin": {
+        "pxtorem": "./bin/pxtorem"
+    },
+    "keywords": [
+        "pxtorem",
+        "css",
+        "unit",
+        "converter",
+        "px",
+        "rem"
+    ],
+    "dependencies": {
+        "chalk": "^4.1.2",
+        "commander": "^9.3.0",
+        "ora": "^5.4.1"
+    }
+}