From fad5514434738f58f627eeb405d2604e45be4adc Mon Sep 17 00:00:00 2001 From: Timothy Johnson Date: Fri, 30 Nov 2018 11:38:42 -0800 Subject: [PATCH] js map support. Fixes #114 --- .babelrc | 5 ++++- .eslintrc | 2 +- package.json | 10 ++++++++- src/index.js | 15 ++++++++------ test/control.test.js | 2 +- test/fixture/javascript-es6.mjs | 10 +++++++++ test/fixture/javascript-es6/expected.css | 12 +++++++++++ test/fixture/javascript-es6/input.css | 7 +++++++ test/fixture/javascript.js | 10 +++++++++ test/fixture/javascript/expected.css | 12 +++++++++++ test/fixture/javascript/input.css | 7 +++++++ test/map.test.js | 26 +++++++++++++++++++++++- 12 files changed, 107 insertions(+), 11 deletions(-) create mode 100644 test/fixture/javascript-es6.mjs create mode 100644 test/fixture/javascript-es6/expected.css create mode 100644 test/fixture/javascript-es6/input.css create mode 100644 test/fixture/javascript.js create mode 100644 test/fixture/javascript/expected.css create mode 100644 test/fixture/javascript/input.css diff --git a/.babelrc b/.babelrc index 6265572..0991fa2 100644 --- a/.babelrc +++ b/.babelrc @@ -9,5 +9,8 @@ } ] ], - "plugins": ["@babel/plugin-proposal-object-rest-spread"] + "plugins": [ + "@babel/plugin-proposal-object-rest-spread", + "babel-plugin-dynamic-import-node" + ] } diff --git a/.eslintrc b/.eslintrc index 9699d10..3386737 100644 --- a/.eslintrc +++ b/.eslintrc @@ -1,4 +1,4 @@ ---- +parser: babel-eslint extends: standard root: true env: diff --git a/package.json b/package.json index 5c8262e..ee5bd0f 100644 --- a/package.json +++ b/package.json @@ -32,9 +32,14 @@ "scripts": { "build": "babel ./src -d dist", "lint": "eslint ./src ./test", - "test": "ava", + "test": "ava ./test/*.js", "cover": "nyc ava" }, + "ava": { + "require": [ + "@babel/register" + ] + }, "dependencies": { "js-yaml": "^3.12.0", "postcss": "^7.0.6", @@ -45,7 +50,10 @@ "@babel/core": "^7.1.6", "@babel/plugin-proposal-object-rest-spread": "^7.0.0", "@babel/preset-env": "^7.1.6", + "@babel/register": "^7.0.0", "ava": "^1.0.0-rc.2", + "babel-eslint": "^10.0.1", + "babel-plugin-dynamic-import-node": "^2.2.0", "coveralls": "^3.0.2", "eslint": "^5.9.0", "eslint-config-standard": "^12.0.0", diff --git a/src/index.js b/src/index.js index 49dc285..6b0fe07 100644 --- a/src/index.js +++ b/src/index.js @@ -32,12 +32,15 @@ export default postcss.plugin('postcss-map', opts => { return path.resolve(opts.basePath, map); }); - let promises = paths.map(async map => { - let name = path.basename(map, path.extname(map)); - let data = await readFile(map, 'utf-8'); - maps[name] = yaml.safeLoad(data, { - filename: map, - }); + let promises = paths.map(async filename => { + let ext = path.extname(filename); + let name = path.basename(filename, ext); + if (ext === '.js' || ext === '.mjs') { + maps[name] = (await import(filename)).default; + } else { + let data = await readFile(filename, 'utf-8'); + maps[name] = yaml.safeLoad(data, { filename }); + } }); return css => { diff --git a/test/control.test.js b/test/control.test.js index 318fd33..4897ae0 100644 --- a/test/control.test.js +++ b/test/control.test.js @@ -2,7 +2,7 @@ import test from 'ava'; import fs from 'fs'; import path from 'path'; import postcss from 'postcss'; -import plugin from '../dist'; +import plugin from '../src'; const pluginName = require('../package.json').name; let from; diff --git a/test/fixture/javascript-es6.mjs b/test/fixture/javascript-es6.mjs new file mode 100644 index 0000000..c5ca02f --- /dev/null +++ b/test/fixture/javascript-es6.mjs @@ -0,0 +1,10 @@ +export default { + foo: 'foo value', + bar: 'bar value', + baz: ['one', 'two', 'three'], + one: { + two: { + three: 'yeah!' + }, + }, +}; diff --git a/test/fixture/javascript-es6/expected.css b/test/fixture/javascript-es6/expected.css new file mode 100644 index 0000000..918b860 --- /dev/null +++ b/test/fixture/javascript-es6/expected.css @@ -0,0 +1,12 @@ +:root { + --javascript-es6-foo: foo value; + --javascript-es6-one-two-three: yeah!; +} + +.foo { + content: var(--javascript-es6-foo); +} + +.bar { + content: var(--javascript-es6-one-two-three); +} diff --git a/test/fixture/javascript-es6/input.css b/test/fixture/javascript-es6/input.css new file mode 100644 index 0000000..e5e2256 --- /dev/null +++ b/test/fixture/javascript-es6/input.css @@ -0,0 +1,7 @@ +.foo { + content: map(javascript-es6, foo); +} + +.bar { + content: map(javascript-es6, one, two, three); +} diff --git a/test/fixture/javascript.js b/test/fixture/javascript.js new file mode 100644 index 0000000..68944e5 --- /dev/null +++ b/test/fixture/javascript.js @@ -0,0 +1,10 @@ +module.exports = { + foo: 'foo value', + bar: 'bar value', + baz: ['one', 'two', 'three'], + one: { + two: { + three: 'yeah!', + }, + }, +}; diff --git a/test/fixture/javascript/expected.css b/test/fixture/javascript/expected.css new file mode 100644 index 0000000..b1c7fc0 --- /dev/null +++ b/test/fixture/javascript/expected.css @@ -0,0 +1,12 @@ +:root { + --javascript-foo: foo value; + --javascript-one-two-three: yeah!; +} + +.foo { + content: var(--javascript-foo); +} + +.bar { + content: var(--javascript-one-two-three); +} diff --git a/test/fixture/javascript/input.css b/test/fixture/javascript/input.css new file mode 100644 index 0000000..d2c670e --- /dev/null +++ b/test/fixture/javascript/input.css @@ -0,0 +1,7 @@ +.foo { + content: map(javascript, foo); +} + +.bar { + content: map(javascript, one, two, three); +} diff --git a/test/map.test.js b/test/map.test.js index 2dc7a9c..787cf58 100644 --- a/test/map.test.js +++ b/test/map.test.js @@ -2,7 +2,7 @@ import test from 'ava'; import fs from 'fs'; import path from 'path'; import postcss from 'postcss'; -import plugin from '../dist'; +import plugin from '../src'; const read = name => fs.readFileSync(path.join(__dirname, 'fixture', name), 'utf8'); @@ -16,6 +16,8 @@ let opts = { 'breakpoints.yml', 'assets.yml', 'config.yml', + 'javascript.js', + 'javascript-es6.mjs', ], }; @@ -30,6 +32,28 @@ test('value', async t => { t.is(result.css, expected); }); +test('javascript', async t => { + const input = read('javascript/input.css'); + const expected = read('javascript/expected.css'); + + const result = await postcss() + .use(plugin(opts)) + .process(input, { from }); + + t.is(result.css, expected); +}); + +test('javascript:es6', async t => { + const input = read('javascript-es6/input.css'); + const expected = read('javascript-es6/expected.css'); + + const result = await postcss() + .use(plugin(opts)) + .process(input, { from }); + + t.is(result.css, expected); +}); + test('block', async t => { const input = read('block/input.css'); const expected = read('block/expected.css');