replace-css-names - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1

lib/index.js

@@ -67,4 +67,5 @@ "use strict";
         this.type = this.isString(this.config.type) ? this.config.type : "";
-        this.attributes = this.isArray(this.config.attributes) ? __spreadArray(['className', 'id'], this.config.attributes, true) : ['className', 'id'];
+        this.attributes = this.isArray(this.config.attributes) ? __spreadArray(__spreadArray([], this.config.attributes, true), ['className', 'id',], false) : ['className', 'id'];
         this.forceReplace = this.isArray(this.config.forceReplace) ? this.config.forceReplace : [];
+        this.encoding = this.isString(this.config.encoding) ? this.config.encoding : "UTF-8";
         this.charsLength = 0;
@@ -291,3 +292,3 @@ this.matchResult = [];
             if (fs.existsSync(_this.output)) {
-                var currentCode = fs.readFileSync(_this.output, 'UTF-8');
+                var currentCode = fs.readFileSync(_this.output, _this.encoding);
                 if (currentCode.length) {
@@ -305,3 +306,3 @@ _this.currentCode = currentCode;
             if (fs.existsSync(_this.output)) {
-                var currentCode = fs.readFileSync(_this.output, 'UTF-8');
+                var currentCode = fs.readFileSync(_this.output, _this.encoding);
                 if (currentCode.length) {
@@ -315,3 +316,9 @@ code = currentCode;
     ReplaceCssNames.prototype.getCurrentData = function () {
-        return this.data;
+        var _this = this;
+        return new Promise(function (resolve) {
+            if (fs.existsSync(_this.data)) {
+                _this.data = fs.readFileSync(_this.data, _this.encoding);
+            }
+            resolve(_this.data);
+        });
     };
@@ -351,10 +358,15 @@ ReplaceCssNames.prototype.hasHex = function (word) {
     };
-    ReplaceCssNames.prototype.inIgnoreList = function (word) {
+    ReplaceCssNames.prototype.inIgnoreList = function (word, type) {
         if (this.ignore.length) {
-            if (this.ignore.filter(function (string) { return string === word; }).length) {
-                return true;
-            }
             for (var x = 0; x < this.ignore.length; x++) {
-                var match = "^\\" + this.ignore[x];
-                if (new RegExp(match, 'g').test(word)) {
+                var i = this.ignore[x];
+                var f = i.substring(1, i.length);
+                var t = '';
+                if ('.' === i.charAt(0)) {
+                    t = 'class';
+                }
+                if ('#' === i.charAt(0)) {
+                    t = 'id';
+                }
+                if ('' !== t && word === f && t === type) {
                     return true;
@@ -366,6 +378,5 @@ }
     };
-    ReplaceCssNames.prototype.isValid = function (word) {
-        word = word.trim();
+    ReplaceCssNames.prototype.isValid = function (word, type) {
         if (!word.length
-            || this.inIgnoreList(word)
+            || this.inIgnoreList(word, type)
             || this.hasHex(word)
@@ -400,3 +411,3 @@ || this.hasRgbType1(word)
                     _a = current[x], type = _a.type, find = _a.find;
-                    if (['class', 'id'].includes(type) && this.isValid(find)) {
+                    if (['class', 'id'].includes(type) && this.isValid(find, type)) {
                         line += this.getSingleReplacement(find);
@@ -655,3 +666,3 @@ }
     };
-    ReplaceCssNames.prototype.processSingleAsset = function (source) {
+    ReplaceCssNames.prototype.processReact = function (source) {
         var _this = this;
@@ -718,3 +729,3 @@ this.matchResult = [];
         return new Promise(function (attributeWalkerResolve) { return __awaiter(_this, void 0, void 0, function () {
-            var currentAttribute, lines, newCode, lineWalker;
+            var currentAttribute, lines, newCode, lineWalker, x;
             var _this = this;
@@ -725,36 +736,45 @@ return __generator(this, function (_a) {
                         currentAttribute = this.attributes[at];
-                        lines = source.split(currentAttribute + ":\"");
+                        lines = source.split(currentAttribute);
                         this.charsLength = lines.length;
                         newCode = '';
                         lineWalker = function (n) {
-                            return new Promise(function (lineWalkerResolve, reject) { return __awaiter(_this, void 0, void 0, function () {
-                                var result, timeout;
-                                return __generator(this, function (_a) {
-                                    switch (_a.label) {
-                                        case 0: return [4, this.lineWalk(n, lines[n], currentAttribute)];
-                                        case 1:
-                                            result = _a.sent();
-                                            if (n === 0) {
-                                                newCode += result.line;
-                                            }
-                                            else {
-                                                newCode += currentAttribute + ":\"" + result.line;
-                                            }
-                                            n = result.next;
-                                            this.log(n);
-                                            timeout = 0;
-                                            if (!(undefined !== lines[n])) return [3, 3];
-                                            return [4, lineWalker(n)];
-                                        case 2:
-                                            _a.sent();
-                                            return [2, lineWalkerResolve(newCode)];
-                                        case 3: return [2, lineWalkerResolve(newCode)];
-                                    }
-                                });
-                            }); });
+                            return new Promise(function (lineWalkerResolve, reject) {
+                                var timeout = 0;
+                                if (0 === n % _this.restModulo) {
+                                    timeout = _this.restTime;
+                                }
+                                setTimeout(function () { return __awaiter(_this, void 0, void 0, function () {
+                                    var attrToDisplay, result;
+                                    return __generator(this, function (_a) {
+                                        switch (_a.label) {
+                                            case 0:
+                                                attrToDisplay = currentAttribute.replace(/[:\"\' ]/g, '');
+                                                return [4, this.lineWalk(n, lines[n], attrToDisplay)];
+                                            case 1:
+                                                result = _a.sent();
+                                                if (n === 0) {
+                                                    newCode += result.line;
+                                                }
+                                                else {
+                                                    newCode += "" + currentAttribute + result.line;
+                                                }
+                                                n = result.next;
+                                                this.log(n);
+                                                if (undefined === lines[n]) {
+                                                    return [2, lineWalkerResolve(newCode)];
+                                                }
+                                                return [4, lineWalker(n)];
+                                            case 2:
+                                                newCode = _a.sent();
+                                                return [2, lineWalkerResolve(newCode)];
+                                        }
+                                    });
+                                }); }, timeout);
+                            });
                         };
                         return [4, lineWalker(0)];
                     case 1:
-                        newCode = _a.sent();
+                        x = _a.sent();
                         if (this.displayResult && this.matchResult.length) {
+                            console.log();
                             console.table(this.matchResult);
@@ -764,7 +784,6 @@ this.matchResult = [];
                         console.log();
-                        console.log();
                         at++;
                         attributeWalkerResolve({
                             next: at,
-                            code: newCode
+                            code: x
                         });
@@ -882,9 +901,17 @@ return [2];
         var allClassNames = classNames.split(" ");
+        var type = '';
+        if (currentAttribute === 'className') {
+            type = 'class';
+        }
+        if (currentAttribute === 'id') {
+            type = 'id';
+        }
+        var newCls = [];
         var _loop_1 = function (x) {
             var find = allClassNames[x];
             if (find.length) {
-                if (this_1.ignore.length && this_1.ignore.filter(function (string) { return string === find; }).length) {
+                if (this_1.inIgnoreList(find, type)) {
                     this_1.matchResult.push({
                         find: find,
-                        type: 'class',
+                        type: type,
                         message: 'Whitelist'
@@ -894,11 +921,13 @@ });
                 else {
-                    if (0 !== this_1.matches.filter(function (m) { return m.find === allClassNames[x] && 'class' === m.type; }).length) {
-                        allClassNames[x] = this_1.getReplacementReact(allClassNames[x]);
-                        this_1.matchResult.push({ find: find, replace: allClassNames[x], type: 'class', attribute: currentAttribute });
+                    var match = this_1.matches.filter(function (m) { return m.find === find && m.type === type; });
+                    if (match.length) {
+                        find = match[0].replace;
+                        this_1.matchResult.push({ find: find, replace: match[0].replace, type: type, attribute: currentAttribute });
                     }
                     else {
-                        this_1.matchResult.push({ find: find, type: 'class', attribute: currentAttribute });
+                        this_1.matchResult.push({ find: find, type: type, attribute: currentAttribute });
                     }
                 }
             }
+            newCls.push(find);
         };
@@ -909,11 +938,13 @@ var this_1 = this;
         }
-        return allClassNames.join(" ");
+        return newCls.join(" ");
     };
-    ReplaceCssNames.prototype.getReplacementReact = function (match) {
-        for (var x = 0; x < this.matches.length; x++) {
-            if (this.matches[x].find === match && 'class' === this.matches[x].type) {
-                match = this.matches[x].replace;
-            }
-        }
-        return match;
+    ReplaceCssNames.prototype.getAttributes = function () {
+        var n = [];
+        this.attributes.map(function (a) {
+            n.push(a + ":\"");
+            n.push(a + ": \"");
+            n.push(a + ":'");
+            n.push(a + ": '");
+        });
+        return n;
     };
@@ -928,3 +959,3 @@ ReplaceCssNames.prototype.replace = function () {
                         if (!this.isString(this.output)) {
-                            throw new Error("Expected type string for path, got: " + typeof this.output + ".");
+                            throw new Error("Expected type string for output, got: " + typeof this.output + ".");
                         }
@@ -939,29 +970,34 @@ if (![this.TYPE_CSS, this.TYPE_REACT].includes(this.type)) {
                         this.matches = m;
-                        if (!(this.TYPE_CSS === this.type)) return [3, 4];
+                        if (!(this.TYPE_CSS === this.type)) return [3, 5];
                         return [4, this.setCurrentCodeFromTmpFile()];
                     case 1:
                         _a.sent();
-                        sourceCode = this.getCurrentData();
+                        return [4, this.getCurrentData()];
+                    case 2:
+                        sourceCode = _a.sent();
                         return [4, this.replaceByMatches(sourceCode)];
-                    case 2:
+                    case 3:
                         data = _a.sent();
                         return [4, this.writeNewCode(data)];
-                    case 3:
+                    case 4:
                         _a.sent();
                         console.log();
                         resolve(data);
-                        _a.label = 4;
-                    case 4:
-                        if (!(this.TYPE_REACT === this.type)) return [3, 7];
-                        sourceCode = this.getCurrentData();
-                        return [4, this.processSingleAsset(sourceCode)];
+                        _a.label = 5;
                     case 5:
+                        if (!(this.TYPE_REACT === this.type)) return [3, 9];
+                        return [4, this.getCurrentData()];
+                    case 6:
+                        sourceCode = _a.sent();
+                        this.attributes = this.getAttributes();
+                        return [4, this.processReact(sourceCode)];
+                    case 7:
                         data = _a.sent();
                         return [4, this.writeNewCode(data)];
-                    case 6:
+                    case 8:
                         _a.sent();
                         console.log();
                         resolve(data);
-                        _a.label = 7;
-                    case 7: return [2];
+                        _a.label = 9;
+                    case 9: return [2];
                 }
@@ -968,0 +1004,0 @@ });

package.json

 {
   "name": "replace-css-names",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "",
@@ -5,0 +5,0 @@ "main": "index.js",

Readme.md

@@ -198,2 +198,5 @@ # Replace Css Names
 
+    const ReplaceCssNames = require('replace-css-names');
+    const fs = require("fs");
+
     gulp.task('replace:react', async (done) => 
@@ -293,2 +296,73 @@ {
 
+## Example how to use it with node js (for js file)
+
+    const ReplaceCssNames = require('replace-css-names');
+    const fs = require("fs");
+
+    /**
+    * Read matches from file
+    */
+    const output = `public/_App.js`;
+    /**
+    * Remove old replace file!
+    */
+    if(fs.existsSync(output))
+    {
+        fs.unlinkSync(output);
+    }
+
+    /**
+    * Get matches
+    */
+    const matchesFile = `public/css/extracted-names-for-js`;
+
+    if(!fs.existsSync(matchesFile))
+    {
+        throw new Error(`The required file cannot be found: ${matchesFile}`);
+    }
+
+    let matches = [];
+    try{
+        matches = fs.readFileSync(matchesFile, 'UTF-8');
+        matches = JSON.parse(matches);
+    }
+    catch(e)
+    {
+        throw new Error(e);
+    }
+
+    const replace = async () =>
+    {
+        await new ReplaceCssNames(
+            {
+                path: 'build/_App.js',
+                data: 'build/_App.js',
+                output,
+                logger: {
+                    logging: true,
+                    prefix: 'Replace',
+                    displayFilename: true,
+                    displayPercentage: true,
+                    type: 'arc',
+                    barBg: 'bgCyan'
+                },
+                type: 'react',
+                matches,
+                restModulo: 10000,
+                restTime: 200,
+                displayResult: false,
+                ignore: [],
+                attributes: [],
+                forceReplace: [
+                    {
+                        find: 'bg-schema-2-1',
+                        type: 'class'
+                    }
+                ]
+            }
+        );
+    }
+
+    replace();
+
 # Example of file before replacement (css file)
@@ -319,12 +393,13 @@
 | `path`          | string  | Path of the current file
-| `output`        | string  | Path to store/write current replaced CSS file content
-| `data`          | string  | Css files content
+| `output`        | string  | Path to store/write current replaced file content
+| `data`          | string  | Path to file or data as string. If is file (fs.existsSync), the file content are readed.
+| `encoding`      | string  | Read/Write file with this encoding standard. Default 'UTF-8'.
 | `type`          | string  | Type of files content. Available types: 'css', 'react'
 | `matches`       | array   | Array of objects: [ { find: string; replace: string; type: string;}, ... ]
 | `attributes`    | array   | Array of strings/atrribute names to replace. Default [ 'className', 'id' ]. Only available if type is 'react'
-| `forceReplace`  | array   | Array of strings. If sensitive match, does not replace a class or id, you can force it ( the forced name has to be availbale in the matches array)
+| `forceReplace`  | array   | Array of objects - only available if type='react'. If sensitive matcher/replacer, does not replace a class or id, you can force it ( the forced name has to be availbale in the matches array). Example: [ { find: 'bg-schema-2-1', type: 'class' } ]
 | `restModulo`    | number  | Each number of lines should be made a break
 | `restTime`      | number  | Duration of the break in ms
 | `displayResult` | boolean | Display the replace result in the terminal
-| `ignore`        | array   | Ignore names to replace
+| `ignore`        | array   | Ignore names to replace (with provided type: '.' for class and '#' for id on char 0), [ '.classNameToIgnore', '#idToIgnore' ].
 | `logger`        | object  | Logger options
@@ -343,4 +418,32 @@
 
+# forceReplace worker
+
+If an class name or id not replaced, the reason could be an dynamic added class, for example: 
+
+    # React snipped
+    #
+    # The variable 'color' (with the value 'bg-schema-2-1') 
+    # passed to a function and added at the end of an 
+    # className of JSX element. The variable color not 
+    # available inside the className attribute as readable string, 
+    # so we have to find the plain value inside the source code
+
+    var text = data.text, link = data.link, color = data.color;
+        return (react_1.default.createElement("span", { className: "color-white-block " + color },
+
+    # The variable color passed as argument (object) to a function as plain value
+    _ColorBox_1.default({
+        text: Translations_1.default('pdf.product.protein') + " " + this.itemFromDb.calculation.protein + "g",
+        color: 'bg-schema-2-1'
+    }),
+
+So its not possible to replace a variable content. We have to replace he plain string inside the generated bundle file. Its the way, how the 'forceReplace' work.
+
+# Ignore match worker
+
+The ignore list, includes all names that should be ignored to replace (Whitelist).
+If the provided string has on char position 0 of the string an '.' then its detected as class, if an '#' then its detected as an id.
+
 # Maintainer
 
 [David Janitzek](https://github.com/janitzed/)

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

61736

increased by8.25%

Lines of code

995

increased by3.75%

Number of lines in readme file

445

increased by30.12%

No dependency changes