Skip to content

Upgrade easy import #79

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Apr 18, 2017
Merged

Upgrade easy import #79

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
72f1265
Upgrade postcss-easy-import to 2.0.0
simonsmith Apr 17, 2017
e106291
Use isPromise module
simonsmith Apr 17, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
### HEAD

* Refactor to support Node 4 upwards
* Update `postcss-easy-import` to `2.0.0`
* Update `fs-extra` to `2.1.2`
* Update `autoprefixer` to `6.7.7`
* Update `postcss-apply` to `0.6.1`
Expand Down
22 changes: 13 additions & 9 deletions lib/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,10 @@ const bemLinter = require('postcss-bem-linter');
const cssnano = require('cssnano');
const difference = require('lodash.difference');
const encapsulationPlugins = require('./encapsulation');
const fs = require('fs');
const isEmpty = require('lodash.isempty');
const isPromise = require('is-promise');
const pify = require('pify');
const postcssEasyImport = require('postcss-easy-import');
const reporter = require('postcss-reporter');
const stylelint = require('stylelint');
Expand Down Expand Up @@ -37,7 +40,7 @@ const defaults = {
ios > 6, android > 4.3, samsung > 3, chromeandroid > 50`
},
'postcss-easy-import': {
transform: identity,
load: getFileContent,
onImport: noop
},
'postcss-reporter': {
Expand Down Expand Up @@ -111,16 +114,17 @@ function mergeOptions(options) {
options = options || {};
const mergedOpts = assign({}, defaults, options);
const easyImportOpts = mergedOpts['postcss-easy-import'];
const origTransform = easyImportOpts.transform;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

should we add a warning here so that we can avoid a major release?

if (easyImportOpts.transform && !easyImportOpts.load) {
  console.warn('Suitcss uses `postcss-easy-import` v2 which renames `transform` to `load`')
}

Copy link
Member Author

@simonsmith simonsmith Apr 18, 2017 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why avoid a major? I think the removal of transform would require one anyway. And potentially the upgrade of the stylelint config too

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ah ok major sounds good

const origLoad = easyImportOpts.load;
const origOnImport = easyImportOpts.onImport;

if (mergedOpts.root) {
easyImportOpts.root = mergedOpts.root;
}

easyImportOpts.transform = (css, filename) => {
const transformedCss = origTransform(css);
return lintFile(transformedCss, mergedOpts, filename).then(result => result.css);
easyImportOpts.load = filename => {
const transformedCss = origLoad(filename);
return lintFile(transformedCss, mergedOpts, filename)
.then(result => result.css);
};

easyImportOpts.onImport = importedFiles => {
Expand Down Expand Up @@ -175,12 +179,12 @@ function lintFile(css, options, filename) {
return processor.process(css, options.postcss);
}

function isPromise(obj) {
return typeof obj.then === 'function';
}

function noop() {}

function getFileContent(filename) {
return pify(fs.readFile)(filename, 'utf8');
}

function identity(x) {
return x;
}
Expand Down
4 changes: 3 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,10 +17,12 @@
"commander": "~2.9.0",
"cssnano": "^3.3.2",
"fs-extra": "^2.1.2",
"is-promise": "^2.1.0",
"lodash.difference": "^4.0.2",
"lodash.isempty": "^4.1.1",
"object-assign-deep": "0.0.4",
"pad-component": "0.0.1",
"pify": "^2.3.0",
"postcss": "^5.2.17",
"postcss-apply": "^0.6.1",
"postcss-autoreset": "^1.2.0",
Expand All @@ -29,7 +31,7 @@
"postcss-color-function": "^3.0.0",
"postcss-custom-media": "^5.0.0",
"postcss-custom-properties": "^5.0.0",
"postcss-easy-import": "^1.0.1",
"postcss-easy-import": "^2.0.0",
"postcss-reporter": "^3.0.0",
"read-file-stdin": "^0.2.1",
"stylelint": "^7.10.1",
Expand Down
18 changes: 9 additions & 9 deletions test/options.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -137,8 +137,8 @@ describe('using the `onImport` option in postcss-import', () => {
});
});

describe('using the `transform` option in postcss-import', () => {
it('should use a default transform function that just returns the css', done => {
describe('using the `load` option in postcss-import', () => {
it('should use a default load function that just returns the css', done => {
suitcss('@import "./util.css";', {
root: 'test/fixtures',
lint: false
Expand All @@ -149,30 +149,30 @@ describe('using the `transform` option in postcss-import', () => {
.catch(done);
});

it('should call a custom transform function with the imported component', done => {
const transformStub = sinon.stub().returns('body { color: blue; }');
it('should call a custom load function with the imported component', done => {
const loadStub = sinon.stub().returns('body { color: blue; }');

suitcss('@import "./util.css";', {
root: 'test/fixtures',
lint: false,
'postcss-easy-import': {
transform: transformStub
load: loadStub
}
}).then(result => {
expect(transformStub.calledOnce).to.be.true;
expect(transformStub.getCall(0).args[0]).to.equal('.u-img {\n border-radius: 50%;\n}\n');
expect(loadStub.calledOnce).to.be.true;
expect(loadStub.getCall(0).args[0]).to.contain('util.css');
expect(result.css).to.equal('body { color: blue; }');
done();
})
.catch(done);
});

it('should also work with a promise returned from the custom transform function', done => {
it('should also work with a promise returned from the custom load function', done => {
suitcss('@import "./util.css";', {
root: 'test/fixtures',
lint: false,
'postcss-easy-import': {
transform() {
load() {
return Promise.resolve('body { font: red; }');
}
}
Expand Down
Loading