` can be what the core is generating for your initial class `something`. So the example above could have been generated from this source: +``` + + + +``` +In that case, the initial code is semantically wrong since the `querySelector` should return `undefined`. The minified CSS selector code will thus return a different result in that case. + +If you had followed the advice above and excluded (or reserved) all potential HTML tag name (see below), then `something` won't be mapped to `b`, but, for example, `t` and the initial code behavior will be preserved. + +Similarly, if your initial code was: +```js +... +var a = 'b'; +... +``` +then the core will generate a warning telling you that `b` is already used in the renaming map and that you should fix the ambiguity. + +If you are in such cases (you are using `getElementById` et al) then the easiest solution is to exclude all potential HTML tag name with a config file containing: +```json +{ + "exclude": [ +"html", "head", "title", "base", "link", "meta", "style", "body", "article", "section", "nav", "aside", +"h1", "h2", "h3", "h4", "h5", "h6", "hgroup", "address", "p", "hr", "pre", "blockquote", "ol", "ul", +"menu", "li", "dl", "dt", "dd", "figure", "figcaption", "main", "div", "a", "em", "strong", "small", +"s", "cite", "q", "dfn", "abbr", "ruby", "rt", "rp", "data", "time", "code", "var", "samp", "kbd", +"sub", "sup", "i", "b", "u", "mark", "bdi", "bdo", "span", "br", "wbr", "ins", "del", "picture", +"source", "img", "iframe", "embed", "object", "param", "video", "audio", "track", "map", "area", +"table", "caption", "colgroup", "col", "tbody", "thead", "tfoot", "tr", "td", "th", "form", "label", +"input", "button", "select", "datalist", "optgroup", "option", "textarea", "output", "progress", "meter", +"fieldset", "legend", "details", "summary", "dialog", "script", "noscript", "template", "slot", "canvas"] +} +``` +The incovenient being that such selectors won't be minified (think about `header` for example, it's quite common for a class name) + +## Caveat for step 3 + +Replacement is relatively safe for CSS and HTML (again, because such format are explicit enough to avoiding ambiguity). + +Replacements inside Javascript code is much harder because a string for a selector can be generated from many small parts (like in `var a = '.' + objClass;`), can be used in functions that have different semantics (like `getElementById` and `querySelector`), etc... + +So, here's the way the core is trying to resolve ambiguities (but as seen above, not all ambiguities can be solved): + +1. Ecmascript template, like in ``var a = `some text ${jsVar}`;`` is parsed like HTML, looking for `class="X"` or `id='Y'` or `for="Z"`. + If you use template code to make your CSS selector from each part, it'll fail: + Don't write ``var myClass = 'something'; var sel = `.${myClass}`;``, but instead `var myClass = '.something'`. + +2. Each string literal is extracted from your javascript code and: + 1. If it contains some CSS specific selectors chars (like `#` or `.` or ` ` etc...), then it's parsed as a CSS selector. **This is safer and usually gives the expected result.** + 2. If it does not contain some CSS specific selectors (like a single word), then it's tried as an ID selector first and if not found as a class selector (or not replaced if not found in either one). + **This can lead to the ambiguity shown above.** + +So, to avoid such ambiguity, try to store your class or id with their respective prefix (`.` or `#`) in your code, and rely on `querySelector` et al. + +For example, here are some replacement selected by the library, with these CSS selector: + +```css +.something {} // Mapped to .a +#test {} // Mapped to #a +.test {} // Mapped to .b +``` + + + +| Initial code | Replaced code | Reason | +|---|---|---| +|`var a = 'something';`|`var a = 'b';`| The core could not deduce the string literal is a selector, so fallback to searching for any rule with `something`, class had one| +|`var a = 'test';`|`var a = 'a';`| The core could not deduce the string literal is a selector and in fallback to search for any rule, it selected #test=>#a since it was searched first| +|`var a = '.something';`|`var a = '.a';`| The core deduced a class selector was required and replaced it| +|`var a = '.test';`|`var a = '.b';`| The core deduced a class selector was required and replaced it| +|`var a = ' something';`|`var a = ' something';`| The core deduced the string literal is a CSS selector, but could not find any match| +|`var a = 'div[class=something]';`|`var a = 'div[class=a]';`| The core deduced the attribute selector was related to a class selector and replaced it| +|`var a = 'input[name=something]';`|`var a = 'input[name=something]';`| The core deduced the attribute selector wasn't related to a class, id or for attribute, no replacement was done| +|`var a = 'b #test, .something';`|`var a = 'b #a, .a';`| The core parsed all selectors and produced correct replacement for each of them| + + +### Another remark: + +Some are writing CSS selector this way: +```css +div[class = something] +{ +color: red; +} +``` +This is perfectly safe from javascript code (if you have `var a = 'div[class=something]';`), then this will be replaced correctly by the core (*to* `var a = 'div[class=b]';`). + +This however requires much more work from the developper so this is not a solution we recommend. + + From 1764ccc4f74c13574ee6a75e4e2a38a857754440 Mon Sep 17 00:00:00 2001 From: JPeer264 Date: Sun, 24 Nov 2019 10:14:59 +0100 Subject: [PATCH 6/7] Chore: update rcs-core to latest alpha 3 --- lib/config/config.js | 4 ++-- lib/mapping/generateMapping.js | 4 ++-- lib/mapping/generateMappingSync.js | 4 ++-- lib/mapping/loadMapping.js | 4 ++-- lib/process/process.js | 4 ++-- lib/process/processSync.js | 4 ++-- lib/process/replaceData.js | 10 +++++----- package.json | 2 +- yarn.lock | 8 ++++---- 9 files changed, 22 insertions(+), 22 deletions(-) diff --git a/lib/config/config.js b/lib/config/config.js index c268c65..42d2e47 100644 --- a/lib/config/config.js +++ b/lib/config/config.js @@ -19,11 +19,11 @@ class Config { } if (configObject.exclude) { - rcs.selectorsLibrary.setExclude(configObject.exclude); + rcs.default.selectorsLibrary.setExclude(configObject.exclude); } if (configObject.reserve) { - rcs.selectorsLibrary.setReserved(configObject.reserve); + rcs.default.selectorsLibrary.setReserved(configObject.reserve); } if (configObject.ignore) { diff --git a/lib/mapping/generateMapping.js b/lib/mapping/generateMapping.js index 315a9c0..2fda88b 100644 --- a/lib/mapping/generateMapping.js +++ b/lib/mapping/generateMapping.js @@ -47,12 +47,12 @@ const generateMapping = (pathString, opts, cb) => { fileName = options.cssMapping; } - const cssClassMappingArray = rcs.selectorsLibrary.getClassSelector().getAll({ + const cssClassMappingArray = rcs.default.selectorsLibrary.getClassSelector().getAll({ extend: options.extended, getRenamedValues: !options.origValues, addSelectorType: options.isSelectors, }); - const cssIdMappingArray = rcs.selectorsLibrary.getIdSelector().getAll({ + const cssIdMappingArray = rcs.default.selectorsLibrary.getIdSelector().getAll({ extend: options.extended, getRenamedValues: !options.origValues, addSelectorType: options.isSelectors, diff --git a/lib/mapping/generateMappingSync.js b/lib/mapping/generateMappingSync.js index fd6c95a..0c8f4a4 100644 --- a/lib/mapping/generateMappingSync.js +++ b/lib/mapping/generateMappingSync.js @@ -39,12 +39,12 @@ const generateMappingSync = (pathString, options) => { fileName = options.cssMapping; } - const cssClassMappingArray = rcs.selectorsLibrary.getClassSelector().getAll({ + const cssClassMappingArray = rcs.default.selectorsLibrary.getClassSelector().getAll({ extend: options.extended, getRenamedValues: !options.origValues, addSelectorType: options.isSelectors, }); - const cssIdMappingArray = rcs.selectorsLibrary.getIdSelector().getAll({ + const cssIdMappingArray = rcs.default.selectorsLibrary.getIdSelector().getAll({ extend: options.extended, getRenamedValues: !options.origValues, addSelectorType: options.isSelectors, diff --git a/lib/mapping/loadMapping.js b/lib/mapping/loadMapping.js index b9256da..0145f3d 100644 --- a/lib/mapping/loadMapping.js +++ b/lib/mapping/loadMapping.js @@ -33,8 +33,8 @@ const loadMapping = (pathString, options = {}) => { return; } - rcs.selectorsLibrary.getClassSelector().setMultiple(classes); - rcs.selectorsLibrary.getIdSelector().setMultiple(ids); + rcs.default.selectorsLibrary.getClassSelector().setMultiple(classes); + rcs.default.selectorsLibrary.getIdSelector().setMultiple(ids); }; // /loadMapping module.exports = loadMapping; diff --git a/lib/process/process.js b/lib/process/process.js index d0b14f1..59fd7fc 100644 --- a/lib/process/process.js +++ b/lib/process/process.js @@ -77,7 +77,7 @@ const rcsProcess = (pathString, opts, cb) => { const isHtml = fileExt.html.includes(path.extname(filePath)); - rcs.fillLibraries( + rcs.default.fillLibraries( bufferData.toString(), { prefix: options.prefix, @@ -131,7 +131,7 @@ const rcsProcess = (pathString, opts, cb) => { }); }); }, (errProcess) => { - rcs.warnings.warn(); + rcs.default.warnings.warn(); if (errProcess) { return callback(errProcess); diff --git a/lib/process/processSync.js b/lib/process/processSync.js index 528f443..2278d0d 100644 --- a/lib/process/processSync.js +++ b/lib/process/processSync.js @@ -40,7 +40,7 @@ const processSync = (pathString, opts) => { const fileData = fs.readFileSync(path.join(options.cwd, filePath), 'utf8'); const isHtml = fileExt.html.includes(path.extname(filePath)); - rcs.fillLibraries( + rcs.default.fillLibraries( fileData.toString(), { prefix: options.prefix, @@ -69,7 +69,7 @@ const processSync = (pathString, opts) => { saveSync(joinedPath, data, { overwrite: shouldOverwrite }); }); - rcs.warnings.warn(); + rcs.default.warnings.warn(); }; // /processSync module.exports = processSync; diff --git a/lib/process/replaceData.js b/lib/process/replaceData.js index 26f7a21..819dc40 100644 --- a/lib/process/replaceData.js +++ b/lib/process/replaceData.js @@ -15,7 +15,7 @@ const replaceData = (filePath, fileData, options) => { ) ) { const jsxType = { ecmaFeatures: { jsx: path.extname(filePath).match(/jsx/i) !== null } }; - data = rcs.replace.js(fileData, merge(jsxType, options.parserOptions, sourceFile)); + data = rcs.default.replace.js(fileData, merge(jsxType, options.parserOptions, sourceFile)); } else if ( options.type === 'css' || ( @@ -23,7 +23,7 @@ const replaceData = (filePath, fileData, options) => { fileExt.css.includes(path.extname(filePath)) ) ) { - data = rcs.replace.css(fileData, sourceFile); + data = rcs.default.replace.css(fileData, sourceFile); } else if ( options.type === 'html' || ( @@ -31,7 +31,7 @@ const replaceData = (filePath, fileData, options) => { fileExt.html.includes(path.extname(filePath)) ) ) { - data = rcs.replace.html(fileData, sourceFile); + data = rcs.default.replace.html(fileData, sourceFile); } else if ( options.type === 'pug' || ( @@ -39,9 +39,9 @@ const replaceData = (filePath, fileData, options) => { fileExt.pug.includes(path.extname(filePath)) ) ) { - data = rcs.replace.pug(fileData, sourceFile); + data = rcs.default.replace.pug(fileData, sourceFile); } else { - data = rcs.replace.any(fileData, sourceFile); + data = rcs.default.replace.any(fileData, sourceFile); } return data; diff --git a/package.json b/package.json index 6d7911c..1755992 100644 --- a/package.json +++ b/package.json @@ -60,7 +60,7 @@ "json-extra": "^0.5.0", "lodash.merge": "^4.6.1", "minimatch": "^3.0.4", - "rcs-core": "^3.0.0-alpha.1", + "rcs-core": "^3.0.0-alpha.3", "universalify": "^0.1.2" }, "devDependencies": { diff --git a/yarn.lock b/yarn.lock index 3a193fd..6a5e706 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4673,10 +4673,10 @@ rc@^1.0.1, rc@^1.1.6, rc@^1.2.7: minimist "^1.2.0" strip-json-comments "~2.0.1" -rcs-core@^3.0.0-alpha.1: - version "3.0.0-alpha.1" - resolved "https://registry.yarnpkg.com/rcs-core/-/rcs-core-3.0.0-alpha.1.tgz#681d9d78100e2e6da008c1288b6cb7da6d90b46b" - integrity sha512-kDdUsDevOfUPbrpYDfjyrfrFQ3n2fY3YLYZgYDF4lwEu7igLSPzMlZO9aok+deGHegpyPN5uklkb3RKJVrj6XA== +rcs-core@^3.0.0-alpha.3: + version "3.0.0-alpha.3" + resolved "https://registry.yarnpkg.com/rcs-core/-/rcs-core-3.0.0-alpha.3.tgz#c1e0134606bb054f811670b2daeb7f9c0b10bd83" + integrity sha512-VQp2aDy5ttdD8bBIC9oEdPkkw/x6wME/3E6TxBW+M2YmWTyNJJXj4/kQCF5zebrahChiS+k3aWR4tIcADURpig== dependencies: array-includes "^3.0.2" ast-traverse "^0.1.1" From 9875bcee7361396c17eb49cdbc48f0bb270da54e Mon Sep 17 00:00:00 2001 From: JPeer264 Date: Sun, 24 Nov 2019 10:15:57 +0100 Subject: [PATCH 7/7] 3.2.6 --- CHANGELOG.md | 9 +++++++++ package.json | 2 +- 2 files changed, 10 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index c70097c..4d8294a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,12 @@ +3.2.6 - November, 24 2019 + +* 1764ccc Chore: update rcs-core to latest alpha 3 (JPeer264) +* 4cf2420 Improve documentation with usual caveats (#45) (X-Ryl669) +* 33a3722 Add support for warning the user about bad library usage (#46) (X-Ryl669) +* c230f13 Update rcs core (#44) (X-Ryl669) +* a10956d Chore: drop support for node v6, add support v12 (JPeer264) +* 8e35da9 Chore: add husky/lint-staged | travis lint check (JPeer264) + 3.2.5 - August, 01 2019 * 5f6bf01 Test: add testcase for #43 (JPeer264) diff --git a/package.json b/package.json index 1755992..760a83c 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "rename-css-selectors", - "version": "3.2.5", + "version": "3.2.6", "description": "Rename css classes and id's in files", "main": "./index.js", "scripts": {