From ee8b547705dd3cda5f83896a050e237d50567599 Mon Sep 17 00:00:00 2001 From: Simranjyot Singh Date: Tue, 20 Oct 2020 14:00:49 -0700 Subject: [PATCH 1/4] adds functionality to convert class names to selectors --- package.json | 2 +- src/index.js | 4 ++++ 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index 8dff914..d1d5ffc 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "css-modules-require-hook", "version": "4.2.3", "description": "A require hook to compile CSS Modules on the fly", - "main": "lib/index.js", + "main": "src/index.js", "engines": { "node": ">= 4" }, diff --git a/src/index.js b/src/index.js index 8d4afae..ab9c3dc 100644 --- a/src/index.js +++ b/src/index.js @@ -21,6 +21,7 @@ const debugFetch = require('debug')('css-modules:fetch'); const debugSetup = require('debug')('css-modules:setup'); module.exports = function setupHook({ + transformClassesToSelectors, camelCase, devMode, extensions = '.css', @@ -124,6 +125,9 @@ module.exports = function setupHook({ const hook = filename => { const tokens = fetch(filename, filename); + if(typeof tokens === 'object' && transformClassesToSelectors){ + Object.keys(tokens).forEach(key=>tokens[key]= '.' + tokens[key]); + } return camelCase ? transformTokens(tokens, camelCase) : tokens; }; From c0bd3768b06faa162496b2e74ece44c997062812 Mon Sep 17 00:00:00 2001 From: Simranjyot Singh Date: Tue, 20 Oct 2020 16:17:15 -0700 Subject: [PATCH 2/4] refactor code to perform transformation of tokens in transformTokens class --- src/index.js | 8 ++------ src/transformTokens.js | 11 +++++++++-- src/validate.js | 2 +- 3 files changed, 12 insertions(+), 9 deletions(-) diff --git a/src/index.js b/src/index.js index ab9c3dc..3c15b87 100644 --- a/src/index.js +++ b/src/index.js @@ -21,8 +21,7 @@ const debugFetch = require('debug')('css-modules:fetch'); const debugSetup = require('debug')('css-modules:setup'); module.exports = function setupHook({ - transformClassesToSelectors, - camelCase, + transformOpts, devMode, extensions = '.css', ignore, @@ -125,10 +124,7 @@ module.exports = function setupHook({ const hook = filename => { const tokens = fetch(filename, filename); - if(typeof tokens === 'object' && transformClassesToSelectors){ - Object.keys(tokens).forEach(key=>tokens[key]= '.' + tokens[key]); - } - return camelCase ? transformTokens(tokens, camelCase) : tokens; + return transformOpts ? transformTokens(tokens, transformOpts) : tokens; }; // @todo add possibility to specify particular config for each extension diff --git a/src/transformTokens.js b/src/transformTokens.js index aadbd1b..3447895 100644 --- a/src/transformTokens.js +++ b/src/transformTokens.js @@ -41,10 +41,15 @@ function camelizeDashes(str) { /** * @param {object} tokens - * @param {boolean|string} camelCase 'dashes|dashesOnly|only' + * @param {object} transformOps + * @param {boolean|string} transformOps.camelCase 'dashes|dashesOnly|only' + * @param {boolean} transformOps.transformClassesToSelectors * @return {object} */ -function transformTokens(tokens, camelCase) { +function transformTokens(tokens, {camelCase, transformClassesToSelectors}) { + if (typeof tokens === 'object' && transformClassesToSelectors) + Object.keys(tokens).forEach(key => tokens[key] = `.${tokens[key]}`); + switch (camelCase) { case true: return reduce(tokens, camelizeKeys, assign({}, tokens)); @@ -57,6 +62,8 @@ function transformTokens(tokens, camelCase) { case 'only': return reduce(tokens, camelizeOnlyKeys, {}); + default: + // do nothing } return tokens; diff --git a/src/validate.js b/src/validate.js index ba34ca7..460f541 100644 --- a/src/validate.js +++ b/src/validate.js @@ -14,7 +14,7 @@ const { const rules = { // hook - camelCase: 'boolean|string', + transformOpts: 'object', devMode: 'boolean', extensions: 'array|string', ignore: 'function|regex|string', From a882641bd4a3756f654a8e5c14c4f81714fb948c Mon Sep 17 00:00:00 2001 From: Simranjyot Singh Date: Tue, 20 Oct 2020 16:19:59 -0700 Subject: [PATCH 3/4] updates the name of the package - adds ts-blink as prefix to the name of the package --- package.json | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/package.json b/package.json index d1d5ffc..5764434 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "name": "css-modules-require-hook", + "name": "ts-blink-css-modules-require-hook", "version": "4.2.3", "description": "A require hook to compile CSS Modules on the fly", "main": "src/index.js", @@ -66,9 +66,7 @@ }, "scripts": { "lint": "eslint src/**/*.js", - "prepublish": "npm run transpile", "pretest": "npm run transpile", "test": "NODE_PATH=$(pwd)/test/tokens/node_modules mocha --require test/setup.js --ui tdd test/*/*.js --compilers js:babel-register", - "transpile": "gulp --cwd . --gulpfile scripts/gulpfile.js transpile" } } From 3feaae6f06004cc10ab88ee4ecdebc6e2286f383 Mon Sep 17 00:00:00 2001 From: Simranjyot Singh Date: Tue, 20 Oct 2020 16:23:24 -0700 Subject: [PATCH 4/4] fixes syntax error in package.json --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 5764434..bc2d0fb 100644 --- a/package.json +++ b/package.json @@ -67,6 +67,6 @@ "scripts": { "lint": "eslint src/**/*.js", "pretest": "npm run transpile", - "test": "NODE_PATH=$(pwd)/test/tokens/node_modules mocha --require test/setup.js --ui tdd test/*/*.js --compilers js:babel-register", + "test": "NODE_PATH=$(pwd)/test/tokens/node_modules mocha --require test/setup.js --ui tdd test/*/*.js --compilers js:babel-register" } }