From 9b96a9799698ab5ac26259cae6dc5b745180271f Mon Sep 17 00:00:00 2001 From: Alexey Litvinov Date: Wed, 4 Nov 2015 20:40:13 +0300 Subject: [PATCH 01/11] the proof of concept about the new plugins API --- extractor.js | 70 ++++++++++++ index.js | 113 ++++++++----------- package.json | 7 ++ tests/cases/compose-node-module/expected.css | 3 +- tests/cases/import-and-compose/expected.css | 1 + 5 files changed, 130 insertions(+), 64 deletions(-) create mode 100644 extractor.js diff --git a/extractor.js b/extractor.js new file mode 100644 index 0000000..0e1522a --- /dev/null +++ b/extractor.js @@ -0,0 +1,70 @@ +var postcss = require('postcss'); +var genericNames = require('generic-names'); +var path = require('path'); + +var Values = require('postcss-modules-values'); +var LocalByDefault = require('postcss-modules-local-by-default'); +var ExtractImports = require('postcss-modules-extract-imports'); +var Scope = require('postcss-modules-scope'); +var Parser = require('postcss-modules-parser'); + +/** + * @param {array} options.append + * @param {array} options.prepend + * @param {array} options.use + * @param {function} options.createImportedName + * @param {function|string} options.generateScopedName + * @param {string} options.mode + * @param {string} options.rootDir + * @param {function} fetch + * @return {object} + */ +module.exports = function extractor(options, fetch) { + options = options || {}; + var append = options.append; + var prepend = options.prepend; + var createImportedName = options.createImportedName; + var generateScopedName = options.generateScopedName; + var mode = options.mode; + var use = options.use; + var context = options.rootDir || process.cwd(); + + var scopedName; + if (generateScopedName) { + scopedName = typeof generateScopedName !== 'function' + ? genericNames(generateScopedName || '[name]__[local]___[hash:base64:5]', {context}) + : function (local, filename, css) { + // had to wrap that function cause i didn't expected, + // that generateShortName() and generateLongName() functions + // use the fake path to file (relative to rootDir) + // which result in the generated class names + return generateScopedName(local, filename, css, context); + }; + } else { + // small fallback + scopedName = function (local, filename) { + return Scope.generateScopedName(local, path.relative(context, filename)); + } + } + + var plugins; + if (use) { + plugins = use; + } else { + plugins = (prepend || []) + .concat([ + Values, + mode + ? new LocalByDefault({mode}) + : LocalByDefault, + createImportedName + ? new ExtractImports({createImportedName}) + : ExtractImports, + new Scope({generateScopedName: scopedName}), + ], append || []); + } + + plugins = plugins.concat(new Parser({fetch})); + + return postcss(plugins); +} diff --git a/index.js b/index.js index 827907d..0d4d2f6 100644 --- a/index.js +++ b/index.js @@ -4,7 +4,7 @@ if (!global.Promise) { global.Promise = require('promise-polyfill') } var fs = require('fs'); var path = require('path'); var through = require('through'); -var Core = require('css-modules-loader-core'); +var extractor = require('./extractor'); var FileSystemLoader = require('css-modules-loader-core/lib/file-system-loader'); var assign = require('object-assign'); var stringHash = require('string-hash'); @@ -14,7 +14,8 @@ var ReadableStream = require('stream').Readable; Custom `generateScopedName` function for `postcss-modules-scope`. Short names consisting of source hash and line number. */ -function generateShortName (name, filename, css) { +function generateShortName (name, filename, css, context) { + filename = path.relative(context, filename); // first occurrence of the name // TOOD: better match with regex var i = css.indexOf('.' + name); @@ -28,7 +29,8 @@ function generateShortName (name, filename, css) { Custom `generateScopedName` function for `postcss-modules-scope`. Appends a hash of the css source. */ -function generateLongName (name, filename) { +function generateLongName (name, filename, css, context) { + filename = path.relative(context, filename); var sanitisedPath = filename.replace(/\.[^\.\/\\]+$/, '') .replace(/[\W_]+/g, '_') .replace(/^_|_$/g, ''); @@ -93,59 +95,50 @@ var sourceByFile = {}; module.exports = function (browserify, options) { options = options || {}; - - // if no root directory is specified, assume the cwd - var rootDir = options.rootDir || options.d; - if (rootDir) { rootDir = path.resolve(rootDir); } - if (!rootDir) { rootDir = process.cwd(); } + options.rootDir = options.rootDir || options.d || undefined; + options.append = options.postcssAfter || options.after || []; + options.use = options.use || options.u || undefined; var cssOutFilename = options.output || options.o; var jsonOutFilename = options.json || options.jsonOutput; - // PostCSS plugins passed to FileSystemLoader - var plugins = options.use || options.u; - if (!plugins) { - plugins = getDefaultPlugins(options); - } - else { - if (typeof plugins === 'string') { - plugins = [plugins]; - } - } - - var postcssAfter = options.postcssAfter || options.after || []; - plugins = plugins.concat(postcssAfter); - - // load plugins by name (if a string is used) - plugins = plugins.map(function requirePlugin (name) { - // assume functions are already required plugins - if (typeof name === 'function') { - return name; - } - - var plugin = require(require.resolve(name)); - - // custom scoped name generation - if (name === 'postcss-modules-scope') { - options[name] = options[name] || {}; - if (!options[name].generateScopedName) { - options[name].generateScopedName = generateLongName; + // the compiled CSS stream needs to be avalible to the transform, + // but re-created on each bundle call. + var compiledCssStream; + var instance = extractor(options, fetch); + + function fetch(_to, from) { + var to = _to.replace(/^["']|["']$/g, ''); + + return new Promise((resolve, reject) => { + try { + var filename = /\w/i.test(to[0]) + ? require.resolve(to) + : path.resolve(path.dirname(from), to); + } catch (e) { + return void reject(e); } - } - if (name in options) { - plugin = plugin(options[name]); - } - else { - plugin = plugin.postcss || plugin(); - } + fs.readFile(filename, 'utf8', (err, css) => { + if (err) { + return void reject(err); + } - return plugin; - }); + instance.process(css, {from: filename}) + .then(function (result) { + var css = result.css; + var tokens = result.root.tokens; - // the compiled CSS stream needs to be avalible to the transform, - // but re-created on each bundle call. - var compiledCssStream; + assign(tokensByFile, tokens); + sourceByFile[filename] = css; + compiledCssStream.push(css); + + resolve(tokens); + }) + .catch(reject); + }); + }); + } function transform (filename) { // only handle .css files @@ -156,25 +149,19 @@ module.exports = function (browserify, options) { // collect visited filenames filenames.push(filename); - var loader = new FileSystemLoader(rootDir, plugins); return through(function noop () {}, function end () { var self = this; - loader.fetch(path.relative(rootDir, filename), '/').then(function (tokens) { - var output = 'module.exports = ' + JSON.stringify(tokens); - - assign(tokensByFile, loader.tokensByFile); - - // store this file's source to be written out to disk later - sourceByFile[filename] = loader.finalSource; + fetch(filename, filename) + .then(function (tokens) { + var output = 'module.exports = ' + JSON.stringify(tokens); - compiledCssStream.push(loader.finalSource); - - self.queue(output); - self.queue(null); - }, function (err) { - self.emit('error', err); - }); + self.queue(output); + self.queue(null); + }) + .catch(function (err) { + self.emit('error', err); + }); }); } diff --git a/package.json b/package.json index f59de1f..4f6e718 100644 --- a/package.json +++ b/package.json @@ -5,7 +5,14 @@ "main": "index.js", "dependencies": { "css-modules-loader-core": "^1.0.0", + "generic-names": "^1.0.1", "object-assign": "^3.0.0", + "postcss": "^5.0.10", + "postcss-modules-extract-imports": "^1.0.0", + "postcss-modules-local-by-default": "^1.0.0", + "postcss-modules-parser": "^1.0.1", + "postcss-modules-scope": "^1.0.0", + "postcss-modules-values": "^1.1.1", "promise-polyfill": "^2.1.0", "string-hash": "^1.1.0", "through": "^2.3.7" diff --git a/tests/cases/compose-node-module/expected.css b/tests/cases/compose-node-module/expected.css index ddd63b1..704193a 100644 --- a/tests/cases/compose-node-module/expected.css +++ b/tests/cases/compose-node-module/expected.css @@ -1,6 +1,7 @@ -._cool_styles_styles__foo { +._node_modules_cool_styles_styles__foo { color: #F00; } + ._styles__foo { background: black; } diff --git a/tests/cases/import-and-compose/expected.css b/tests/cases/import-and-compose/expected.css index 22ec71a..3792a8d 100644 --- a/tests/cases/import-and-compose/expected.css +++ b/tests/cases/import-and-compose/expected.css @@ -1,6 +1,7 @@ ._styles_2__bar { background: #BAA; } + ._styles_1__foo { color: #F00; } From 16a8b530fd3356d557e801c3e869a71173188e94 Mon Sep 17 00:00:00 2001 From: Alexey Litvinov Date: Wed, 4 Nov 2015 20:58:34 +0300 Subject: [PATCH 02/11] arrow functions removed --- index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/index.js b/index.js index 0d4d2f6..7ad43ff 100644 --- a/index.js +++ b/index.js @@ -110,7 +110,7 @@ module.exports = function (browserify, options) { function fetch(_to, from) { var to = _to.replace(/^["']|["']$/g, ''); - return new Promise((resolve, reject) => { + return new Promise(function (resolve, reject) { try { var filename = /\w/i.test(to[0]) ? require.resolve(to) @@ -119,7 +119,7 @@ module.exports = function (browserify, options) { return void reject(e); } - fs.readFile(filename, 'utf8', (err, css) => { + fs.readFile(filename, 'utf8', function (err, css) { if (err) { return void reject(err); } From 6f10cfd31713f28328f7a34a34efea3e31bd0fdc Mon Sep 17 00:00:00 2001 From: Alexey Litvinov Date: Wed, 4 Nov 2015 21:00:45 +0300 Subject: [PATCH 03/11] removing destructuring assignment --- extractor.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/extractor.js b/extractor.js index 0e1522a..3693af7 100644 --- a/extractor.js +++ b/extractor.js @@ -32,7 +32,7 @@ module.exports = function extractor(options, fetch) { var scopedName; if (generateScopedName) { scopedName = typeof generateScopedName !== 'function' - ? genericNames(generateScopedName || '[name]__[local]___[hash:base64:5]', {context}) + ? genericNames(generateScopedName || '[name]__[local]___[hash:base64:5]', {context: context}) : function (local, filename, css) { // had to wrap that function cause i didn't expected, // that generateShortName() and generateLongName() functions @@ -55,16 +55,16 @@ module.exports = function extractor(options, fetch) { .concat([ Values, mode - ? new LocalByDefault({mode}) + ? new LocalByDefault({mode: mode}) : LocalByDefault, createImportedName - ? new ExtractImports({createImportedName}) + ? new ExtractImports({createImportedName: createImportedName}) : ExtractImports, new Scope({generateScopedName: scopedName}), ], append || []); } - plugins = plugins.concat(new Parser({fetch})); + plugins = plugins.concat(new Parser({fetch: fetch})); return postcss(plugins); } From 69815917e2ab01d41fa94f5813dd00e16a8846f7 Mon Sep 17 00:00:00 2001 From: Alexey Litvinov Date: Wed, 4 Nov 2015 22:36:31 +0300 Subject: [PATCH 04/11] caching fixed --- index.js | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/index.js b/index.js index 7ad43ff..4da6d3e 100644 --- a/index.js +++ b/index.js @@ -6,7 +6,6 @@ var path = require('path'); var through = require('through'); var extractor = require('./extractor'); var FileSystemLoader = require('css-modules-loader-core/lib/file-system-loader'); -var assign = require('object-assign'); var stringHash = require('string-hash'); var ReadableStream = require('stream').Readable; @@ -124,12 +123,18 @@ module.exports = function (browserify, options) { return void reject(err); } + var tokens = tokensByFile[filename]; + if (tokens) { + compiledCssStream.push(sourceByFile[filename]); + return void resolve(tokens); + } + instance.process(css, {from: filename}) .then(function (result) { var css = result.css; var tokens = result.root.tokens; - assign(tokensByFile, tokens); + tokensByFile[filename] = tokens; sourceByFile[filename] = css; compiledCssStream.push(css); From 62acb5158069d0d0241a8d305f3ca64b3101992d Mon Sep 17 00:00:00 2001 From: Alexey Litvinov Date: Mon, 23 Nov 2015 09:54:32 +0300 Subject: [PATCH 05/11] Revert "caching fixed" This reverts commit 69815917e2ab01d41fa94f5813dd00e16a8846f7. --- index.js | 9 ++------- 1 file changed, 2 insertions(+), 7 deletions(-) diff --git a/index.js b/index.js index 4da6d3e..7ad43ff 100644 --- a/index.js +++ b/index.js @@ -6,6 +6,7 @@ var path = require('path'); var through = require('through'); var extractor = require('./extractor'); var FileSystemLoader = require('css-modules-loader-core/lib/file-system-loader'); +var assign = require('object-assign'); var stringHash = require('string-hash'); var ReadableStream = require('stream').Readable; @@ -123,18 +124,12 @@ module.exports = function (browserify, options) { return void reject(err); } - var tokens = tokensByFile[filename]; - if (tokens) { - compiledCssStream.push(sourceByFile[filename]); - return void resolve(tokens); - } - instance.process(css, {from: filename}) .then(function (result) { var css = result.css; var tokens = result.root.tokens; - tokensByFile[filename] = tokens; + assign(tokensByFile, tokens); sourceByFile[filename] = css; compiledCssStream.push(css); From cf6c22e76d0948197e3b78b4f80ba7c89f33b58f Mon Sep 17 00:00:00 2001 From: Alexey Litvinov Date: Mon, 23 Nov 2015 09:54:39 +0300 Subject: [PATCH 06/11] Revert "removing destructuring assignment" This reverts commit 6f10cfd31713f28328f7a34a34efea3e31bd0fdc. --- extractor.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/extractor.js b/extractor.js index 3693af7..0e1522a 100644 --- a/extractor.js +++ b/extractor.js @@ -32,7 +32,7 @@ module.exports = function extractor(options, fetch) { var scopedName; if (generateScopedName) { scopedName = typeof generateScopedName !== 'function' - ? genericNames(generateScopedName || '[name]__[local]___[hash:base64:5]', {context: context}) + ? genericNames(generateScopedName || '[name]__[local]___[hash:base64:5]', {context}) : function (local, filename, css) { // had to wrap that function cause i didn't expected, // that generateShortName() and generateLongName() functions @@ -55,16 +55,16 @@ module.exports = function extractor(options, fetch) { .concat([ Values, mode - ? new LocalByDefault({mode: mode}) + ? new LocalByDefault({mode}) : LocalByDefault, createImportedName - ? new ExtractImports({createImportedName: createImportedName}) + ? new ExtractImports({createImportedName}) : ExtractImports, new Scope({generateScopedName: scopedName}), ], append || []); } - plugins = plugins.concat(new Parser({fetch: fetch})); + plugins = plugins.concat(new Parser({fetch})); return postcss(plugins); } From 358a375028d387d87c17aceab48e7b0c3f29b068 Mon Sep 17 00:00:00 2001 From: Alexey Litvinov Date: Mon, 23 Nov 2015 09:54:45 +0300 Subject: [PATCH 07/11] Revert "arrow functions removed" This reverts commit 16a8b530fd3356d557e801c3e869a71173188e94. --- index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/index.js b/index.js index 7ad43ff..0d4d2f6 100644 --- a/index.js +++ b/index.js @@ -110,7 +110,7 @@ module.exports = function (browserify, options) { function fetch(_to, from) { var to = _to.replace(/^["']|["']$/g, ''); - return new Promise(function (resolve, reject) { + return new Promise((resolve, reject) => { try { var filename = /\w/i.test(to[0]) ? require.resolve(to) @@ -119,7 +119,7 @@ module.exports = function (browserify, options) { return void reject(e); } - fs.readFile(filename, 'utf8', function (err, css) { + fs.readFile(filename, 'utf8', (err, css) => { if (err) { return void reject(err); } From 20f1cbee92d8be24c851f3d6fdebf0533ef9c4fe Mon Sep 17 00:00:00 2001 From: Alexey Litvinov Date: Mon, 23 Nov 2015 09:54:53 +0300 Subject: [PATCH 08/11] Revert "the proof of concept about the new plugins API" This reverts commit 9b96a9799698ab5ac26259cae6dc5b745180271f. --- extractor.js | 70 ------------ index.js | 113 +++++++++++-------- package.json | 7 -- tests/cases/compose-node-module/expected.css | 3 +- tests/cases/import-and-compose/expected.css | 1 - 5 files changed, 64 insertions(+), 130 deletions(-) delete mode 100644 extractor.js diff --git a/extractor.js b/extractor.js deleted file mode 100644 index 0e1522a..0000000 --- a/extractor.js +++ /dev/null @@ -1,70 +0,0 @@ -var postcss = require('postcss'); -var genericNames = require('generic-names'); -var path = require('path'); - -var Values = require('postcss-modules-values'); -var LocalByDefault = require('postcss-modules-local-by-default'); -var ExtractImports = require('postcss-modules-extract-imports'); -var Scope = require('postcss-modules-scope'); -var Parser = require('postcss-modules-parser'); - -/** - * @param {array} options.append - * @param {array} options.prepend - * @param {array} options.use - * @param {function} options.createImportedName - * @param {function|string} options.generateScopedName - * @param {string} options.mode - * @param {string} options.rootDir - * @param {function} fetch - * @return {object} - */ -module.exports = function extractor(options, fetch) { - options = options || {}; - var append = options.append; - var prepend = options.prepend; - var createImportedName = options.createImportedName; - var generateScopedName = options.generateScopedName; - var mode = options.mode; - var use = options.use; - var context = options.rootDir || process.cwd(); - - var scopedName; - if (generateScopedName) { - scopedName = typeof generateScopedName !== 'function' - ? genericNames(generateScopedName || '[name]__[local]___[hash:base64:5]', {context}) - : function (local, filename, css) { - // had to wrap that function cause i didn't expected, - // that generateShortName() and generateLongName() functions - // use the fake path to file (relative to rootDir) - // which result in the generated class names - return generateScopedName(local, filename, css, context); - }; - } else { - // small fallback - scopedName = function (local, filename) { - return Scope.generateScopedName(local, path.relative(context, filename)); - } - } - - var plugins; - if (use) { - plugins = use; - } else { - plugins = (prepend || []) - .concat([ - Values, - mode - ? new LocalByDefault({mode}) - : LocalByDefault, - createImportedName - ? new ExtractImports({createImportedName}) - : ExtractImports, - new Scope({generateScopedName: scopedName}), - ], append || []); - } - - plugins = plugins.concat(new Parser({fetch})); - - return postcss(plugins); -} diff --git a/index.js b/index.js index 0d4d2f6..827907d 100644 --- a/index.js +++ b/index.js @@ -4,7 +4,7 @@ if (!global.Promise) { global.Promise = require('promise-polyfill') } var fs = require('fs'); var path = require('path'); var through = require('through'); -var extractor = require('./extractor'); +var Core = require('css-modules-loader-core'); var FileSystemLoader = require('css-modules-loader-core/lib/file-system-loader'); var assign = require('object-assign'); var stringHash = require('string-hash'); @@ -14,8 +14,7 @@ var ReadableStream = require('stream').Readable; Custom `generateScopedName` function for `postcss-modules-scope`. Short names consisting of source hash and line number. */ -function generateShortName (name, filename, css, context) { - filename = path.relative(context, filename); +function generateShortName (name, filename, css) { // first occurrence of the name // TOOD: better match with regex var i = css.indexOf('.' + name); @@ -29,8 +28,7 @@ function generateShortName (name, filename, css, context) { Custom `generateScopedName` function for `postcss-modules-scope`. Appends a hash of the css source. */ -function generateLongName (name, filename, css, context) { - filename = path.relative(context, filename); +function generateLongName (name, filename) { var sanitisedPath = filename.replace(/\.[^\.\/\\]+$/, '') .replace(/[\W_]+/g, '_') .replace(/^_|_$/g, ''); @@ -95,50 +93,59 @@ var sourceByFile = {}; module.exports = function (browserify, options) { options = options || {}; - options.rootDir = options.rootDir || options.d || undefined; - options.append = options.postcssAfter || options.after || []; - options.use = options.use || options.u || undefined; + + // if no root directory is specified, assume the cwd + var rootDir = options.rootDir || options.d; + if (rootDir) { rootDir = path.resolve(rootDir); } + if (!rootDir) { rootDir = process.cwd(); } var cssOutFilename = options.output || options.o; var jsonOutFilename = options.json || options.jsonOutput; - // the compiled CSS stream needs to be avalible to the transform, - // but re-created on each bundle call. - var compiledCssStream; - var instance = extractor(options, fetch); - - function fetch(_to, from) { - var to = _to.replace(/^["']|["']$/g, ''); - - return new Promise((resolve, reject) => { - try { - var filename = /\w/i.test(to[0]) - ? require.resolve(to) - : path.resolve(path.dirname(from), to); - } catch (e) { - return void reject(e); - } + // PostCSS plugins passed to FileSystemLoader + var plugins = options.use || options.u; + if (!plugins) { + plugins = getDefaultPlugins(options); + } + else { + if (typeof plugins === 'string') { + plugins = [plugins]; + } + } - fs.readFile(filename, 'utf8', (err, css) => { - if (err) { - return void reject(err); - } + var postcssAfter = options.postcssAfter || options.after || []; + plugins = plugins.concat(postcssAfter); - instance.process(css, {from: filename}) - .then(function (result) { - var css = result.css; - var tokens = result.root.tokens; + // load plugins by name (if a string is used) + plugins = plugins.map(function requirePlugin (name) { + // assume functions are already required plugins + if (typeof name === 'function') { + return name; + } - assign(tokensByFile, tokens); - sourceByFile[filename] = css; - compiledCssStream.push(css); + var plugin = require(require.resolve(name)); - resolve(tokens); - }) - .catch(reject); - }); - }); - } + // custom scoped name generation + if (name === 'postcss-modules-scope') { + options[name] = options[name] || {}; + if (!options[name].generateScopedName) { + options[name].generateScopedName = generateLongName; + } + } + + if (name in options) { + plugin = plugin(options[name]); + } + else { + plugin = plugin.postcss || plugin(); + } + + return plugin; + }); + + // the compiled CSS stream needs to be avalible to the transform, + // but re-created on each bundle call. + var compiledCssStream; function transform (filename) { // only handle .css files @@ -149,19 +156,25 @@ module.exports = function (browserify, options) { // collect visited filenames filenames.push(filename); + var loader = new FileSystemLoader(rootDir, plugins); return through(function noop () {}, function end () { var self = this; - fetch(filename, filename) - .then(function (tokens) { - var output = 'module.exports = ' + JSON.stringify(tokens); + loader.fetch(path.relative(rootDir, filename), '/').then(function (tokens) { + var output = 'module.exports = ' + JSON.stringify(tokens); - self.queue(output); - self.queue(null); - }) - .catch(function (err) { - self.emit('error', err); - }); + assign(tokensByFile, loader.tokensByFile); + + // store this file's source to be written out to disk later + sourceByFile[filename] = loader.finalSource; + + compiledCssStream.push(loader.finalSource); + + self.queue(output); + self.queue(null); + }, function (err) { + self.emit('error', err); + }); }); } diff --git a/package.json b/package.json index 4f6e718..f59de1f 100644 --- a/package.json +++ b/package.json @@ -5,14 +5,7 @@ "main": "index.js", "dependencies": { "css-modules-loader-core": "^1.0.0", - "generic-names": "^1.0.1", "object-assign": "^3.0.0", - "postcss": "^5.0.10", - "postcss-modules-extract-imports": "^1.0.0", - "postcss-modules-local-by-default": "^1.0.0", - "postcss-modules-parser": "^1.0.1", - "postcss-modules-scope": "^1.0.0", - "postcss-modules-values": "^1.1.1", "promise-polyfill": "^2.1.0", "string-hash": "^1.1.0", "through": "^2.3.7" diff --git a/tests/cases/compose-node-module/expected.css b/tests/cases/compose-node-module/expected.css index 704193a..ddd63b1 100644 --- a/tests/cases/compose-node-module/expected.css +++ b/tests/cases/compose-node-module/expected.css @@ -1,7 +1,6 @@ -._node_modules_cool_styles_styles__foo { +._cool_styles_styles__foo { color: #F00; } - ._styles__foo { background: black; } diff --git a/tests/cases/import-and-compose/expected.css b/tests/cases/import-and-compose/expected.css index 3792a8d..22ec71a 100644 --- a/tests/cases/import-and-compose/expected.css +++ b/tests/cases/import-and-compose/expected.css @@ -1,7 +1,6 @@ ._styles_2__bar { background: #BAA; } - ._styles_1__foo { color: #F00; } From dba5e2c1372a736831c7f7a3d5492a8fe0847ea1 Mon Sep 17 00:00:00 2001 From: Alexey Litvinov Date: Mon, 23 Nov 2015 10:03:43 +0300 Subject: [PATCH 09/11] the new version --- index.js | 49 ++------------------ package.json | 5 +- tests/cases/compose-node-module/expected.css | 2 +- tests/cases/import-and-compose/expected.css | 6 +-- 4 files changed, 11 insertions(+), 51 deletions(-) diff --git a/index.js b/index.js index 827907d..6d7c3ca 100644 --- a/index.js +++ b/index.js @@ -28,8 +28,8 @@ function generateShortName (name, filename, css) { Custom `generateScopedName` function for `postcss-modules-scope`. Appends a hash of the css source. */ -function generateLongName (name, filename) { - var sanitisedPath = filename.replace(/\.[^\.\/\\]+$/, '') +function generateLongName (name, filename, css, context) { + var sanitisedPath = path.relative(context, filename).replace(/\.[^\.\/\\]+$/, '') .replace(/[\W_]+/g, '_') .replace(/^_|_$/g, ''); @@ -102,47 +102,6 @@ module.exports = function (browserify, options) { var cssOutFilename = options.output || options.o; var jsonOutFilename = options.json || options.jsonOutput; - // PostCSS plugins passed to FileSystemLoader - var plugins = options.use || options.u; - if (!plugins) { - plugins = getDefaultPlugins(options); - } - else { - if (typeof plugins === 'string') { - plugins = [plugins]; - } - } - - var postcssAfter = options.postcssAfter || options.after || []; - plugins = plugins.concat(postcssAfter); - - // load plugins by name (if a string is used) - plugins = plugins.map(function requirePlugin (name) { - // assume functions are already required plugins - if (typeof name === 'function') { - return name; - } - - var plugin = require(require.resolve(name)); - - // custom scoped name generation - if (name === 'postcss-modules-scope') { - options[name] = options[name] || {}; - if (!options[name].generateScopedName) { - options[name].generateScopedName = generateLongName; - } - } - - if (name in options) { - plugin = plugin(options[name]); - } - else { - plugin = plugin.postcss || plugin(); - } - - return plugin; - }); - // the compiled CSS stream needs to be avalible to the transform, // but re-created on each bundle call. var compiledCssStream; @@ -156,11 +115,11 @@ module.exports = function (browserify, options) { // collect visited filenames filenames.push(filename); - var loader = new FileSystemLoader(rootDir, plugins); + var loader = new FileSystemLoader(options); return through(function noop () {}, function end () { var self = this; - loader.fetch(path.relative(rootDir, filename), '/').then(function (tokens) { + loader.fetch(filename, filename, null).then(function (tokens) { var output = 'module.exports = ' + JSON.stringify(tokens); assign(tokensByFile, loader.tokensByFile); diff --git a/package.json b/package.json index f59de1f..574e5ef 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,6 @@ "description": "A browserify transform to load CSS Modules", "main": "index.js", "dependencies": { - "css-modules-loader-core": "^1.0.0", "object-assign": "^3.0.0", "promise-polyfill": "^2.1.0", "string-hash": "^1.1.0", @@ -19,7 +18,9 @@ }, "scripts": { "test": "tape tests/*.js", - "lint": "eslint index.js tests/" + "lint": "eslint index.js tests/", + "preinstall": "rm -rf node_modules/css-modules-loader-core", + "postinstall": "git clone https://github.com/sullenor/css-modules-loader-core.git node_modules/css-modules-loader-core && cd node_modules/css-modules-loader-core && npm i && npm run build" }, "author": "joshwnj", "license": "MIT", diff --git a/tests/cases/compose-node-module/expected.css b/tests/cases/compose-node-module/expected.css index ddd63b1..492da06 100644 --- a/tests/cases/compose-node-module/expected.css +++ b/tests/cases/compose-node-module/expected.css @@ -1,4 +1,4 @@ -._cool_styles_styles__foo { +._node_modules_cool_styles_styles__foo { color: #F00; } ._styles__foo { diff --git a/tests/cases/import-and-compose/expected.css b/tests/cases/import-and-compose/expected.css index 22ec71a..5269964 100644 --- a/tests/cases/import-and-compose/expected.css +++ b/tests/cases/import-and-compose/expected.css @@ -1,6 +1,6 @@ -._styles_2__bar { - background: #BAA; -} ._styles_1__foo { color: #F00; } +._styles_2__bar { + background: #BAA; +} From 156df0c85bcc9e179d2dcaa3f1be516f3f04f8a0 Mon Sep 17 00:00:00 2001 From: Alexey Litvinov Date: Mon, 23 Nov 2015 10:18:40 +0300 Subject: [PATCH 10/11] added processor options --- index.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/index.js b/index.js index 6d7c3ca..37b7021 100644 --- a/index.js +++ b/index.js @@ -102,6 +102,8 @@ module.exports = function (browserify, options) { var cssOutFilename = options.output || options.o; var jsonOutFilename = options.json || options.jsonOutput; + var processorOptions = {to: options.to}; + // the compiled CSS stream needs to be avalible to the transform, // but re-created on each bundle call. var compiledCssStream; @@ -115,7 +117,7 @@ module.exports = function (browserify, options) { // collect visited filenames filenames.push(filename); - var loader = new FileSystemLoader(options); + var loader = new FileSystemLoader(options, processorOptions); return through(function noop () {}, function end () { var self = this; From ba498cf45543ad15e7b7aca07552c5c4799efc33 Mon Sep 17 00:00:00 2001 From: Alexey Litvinov Date: Wed, 25 Nov 2015 02:03:28 +0300 Subject: [PATCH 11/11] test fix --- tests/cases/import-and-compose/expected.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/tests/cases/import-and-compose/expected.css b/tests/cases/import-and-compose/expected.css index 5269964..22ec71a 100644 --- a/tests/cases/import-and-compose/expected.css +++ b/tests/cases/import-and-compose/expected.css @@ -1,6 +1,6 @@ -._styles_1__foo { - color: #F00; -} ._styles_2__bar { background: #BAA; } +._styles_1__foo { + color: #F00; +}