diff --git a/package.json b/package.json index 62d12bc..da91d16 100644 --- a/package.json +++ b/package.json @@ -25,7 +25,7 @@ }, "homepage": "https://github.com/michalkvasnicak/babel-plugin-css-modules-transform#readme", "dependencies": { - "css-modules-require-hook": "^2.0.2" + "css-modules-require-hook": "^3.0.0" }, "devDependencies": { "babel-cli": "^6.1.18", @@ -42,6 +42,8 @@ "chai": "^3.4.1", "eslint": "^1.9.0", "eslint-config-airbnb-lite": "^1.0.0", + "gulp-babel": "^6.1.2", + "gulp-util": "^3.0.7", "mocha": "^2.3.4", "postcss": "^5.x", "postcss-modules-extract-imports": "^1.x", diff --git a/src/index.js b/src/index.js index 2ee5f83..2752846 100644 --- a/src/index.js +++ b/src/index.js @@ -1,4 +1,4 @@ -import { resolve, dirname } from 'path'; +import { resolve, dirname, isAbsolute } from 'path'; const simpleRequires = [ 'createImportedName', @@ -17,6 +17,13 @@ const defaultOptions = { }; export default function transformCssModules({ types: t }) { + function resolveModulePath(filename) { + const dir = dirname(filename); + if (isAbsolute(dir)) return dir; + if (process.env.PWD) return resolve(process.env.PWD, dir); + return resolve(dir); + } + return { visitor: { CallExpression(path, { file, opts }) { @@ -114,9 +121,8 @@ export default function transformCssModules({ types: t }) { ); } - const tokens = require( - resolve(process.cwd(), dirname(file.opts.filenameRelative), cssPath) - ); + const from = resolveModulePath(file.opts.filename); + const tokens = require(resolve(from, cssPath)); /* eslint-disable new-cap */ path.replaceWith(t.ObjectExpression( diff --git a/test/index.spec.js b/test/index.spec.js index fd8d470..364bd92 100644 --- a/test/index.spec.js +++ b/test/index.spec.js @@ -1,7 +1,9 @@ const babel = require('babel-core'); import { expect } from 'chai'; -import { resolve } from 'path'; +import { resolve, join } from 'path'; import { readFileSync } from 'fs'; +import gulpUtil from 'gulp-util'; +import gulpBabel from 'gulp-babel'; describe('babel-plugin-css-modules-transform', () => { function transform(path, configuration = {}) { @@ -102,4 +104,33 @@ describe('babel-plugin-css-modules-transform', () => { expect(transform('fixtures/import.js').code).to.be.equal(readExpected('fixtures/import.expected.js')); }); + it('should replace require call with hash of class name => css class name via gulp', (cb) => { + const stream = gulpBabel({ + plugins: [ + 'transform-strict-mode', + 'transform-es2015-parameters', + 'transform-es2015-destructuring', + 'transform-es2015-modules-commonjs', + 'transform-object-rest-spread', + 'transform-es2015-spread', + 'transform-export-extensions', + ['../src/index.js', {}] + ] + }); + + stream.on('data', (file) => { + expect(file.contents.toString()).to.be.equal(readExpected('fixtures/import.expected.js')); + }); + + stream.on('end', cb); + + stream.write(new gulpUtil.File({ + cwd: __dirname, + base: join(__dirname, 'fixtures'), + path: join(__dirname, 'fixtures/require.js'), + contents: readFileSync(join(__dirname, 'fixtures/import.js')) + })); + + stream.end(); + }); });