Skip to content

Commit

Permalink
fix: Set element source property
Browse files Browse the repository at this point in the history 
fix #27
  • Loading branch information
@unlight
unlight committed Feb 13, 2021
1 parent f595ecf commit 8405f32
Show file tree
Hide file tree
Showing 5 changed files with 114 additions and 62 deletions.
3 changes: 3 additions & 0 deletions .eslintrc.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,9 @@ module.exports = {
mocha: true,
es6: true,
},
parserOptions: {
ecmaVersion: 2020,
},
extends: ['eslint:recommended'],
plugins: [],
rules: {
Expand Down
3 changes: 2 additions & 1 deletion .prettierrc.js
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
module.exports = {
printWidth: 100,
printWidth: 88,
trailingComma: 'all',
tabWidth: 4,
semi: true,
singleQuote: true,
arrowParens: 'avoid',
overrides: [
{
files: '*.{json,yml}',
Expand Down
106 changes: 59 additions & 47 deletions index.js
View file
Original file line number Diff line number Diff line change
@@ -1,62 +1,69 @@
var postcss = require('postcss');
var hh = require('http-https');
var isUrl = require('is-url');
var trim = require('lodash.trim');
var resolveRelative = require('resolve-relative-url');
var assign = require('lodash.assign');
var defaults = {
const postcss = require('postcss');
const hh = require('http-https');
const isUrl = require('is-url');
const trim = require('lodash.trim');
const resolveRelative = require('resolve-relative-url');
const assign = require('lodash.assign');
const url = require('url');

const defaults = {
recursive: true,
resolveUrls: false,
modernBrowser: false,
userAgent: null,
};
var space = postcss.list.space;
var url = require('url');
var urlRegexp = /url\(["']?.+?['"]?\)/g;
const space = postcss.list.space;
const urlRegexp = /url\(["']?.+?['"]?\)/g;

function postcssImportUrl(options) {
options = assign({}, defaults, options || {});

function importUrl(tree, dummy, parentRemoteFile) {
async function importUrl(tree, _, parentRemoteFile) {
parentRemoteFile = parentRemoteFile || tree.source.input.file;
var imports = [];
const imports = [];
tree.walkAtRules('import', function checkAtRule(atRule) {
var params = space(atRule.params);
var remoteFile = cleanupRemoteFile(params[0]);
const params = space(atRule.params);
let remoteFile = cleanupRemoteFile(params[0]);
if (parentRemoteFile) {
remoteFile = resolveRelative(remoteFile, parentRemoteFile);
}
if (!isUrl(remoteFile)) return;
imports[imports.length] = createPromise(remoteFile, options).then(function (r) {
var newNode = postcss.parse(r.body);
var mediaQueries = params.slice(1).join(' ');
if (mediaQueries) {
var mediaNode = postcss.atRule({
name: 'media',
params: mediaQueries,
});
mediaNode.append(newNode);
newNode = mediaNode;
}
if (!isUrl(remoteFile)) {
return;
}
imports[imports.length] = createPromise(remoteFile, options).then(
async r => {
let newNode = postcss.parse(r.body);
const mediaQueries = params.slice(1).join(' ');
if (mediaQueries) {
const mediaNode = postcss.atRule({
name: 'media',
params: mediaQueries,
source: atRule.source,
});
mediaNode.append(newNode);
newNode = mediaNode;
} else {
newNode.source = atRule.source;
}

if (options.resolveUrls) {
// Convert relative paths to absolute paths
newNode = newNode.replaceValues(urlRegexp, { fast: 'url(' }, function (url) {
return resolveUrls(url, remoteFile);
});
}
if (options.resolveUrls) {
// Convert relative paths to absolute paths
newNode = newNode.replaceValues(
urlRegexp,
{ fast: 'url(' },
url => resolveUrls(url, remoteFile),
);
}

var p = options.recursive
? importUrl(newNode, null, r.parent)
: Promise.resolve(newNode);
return p.then(function (tree) {
const tree = await (options.recursive
? importUrl(newNode, null, r.parent)
: Promise.resolve(newNode));
atRule.replaceWith(tree);
});
});
});
return Promise.all(imports).then(function () {
return tree;
},
);
});
await Promise.all(imports);
return tree;
}

return {
Expand All @@ -81,23 +88,23 @@ function resolveUrls(to, from) {
}

function createPromise(remoteFile, options) {
var reqOptions = url.parse(remoteFile);
const reqOptions = urlParse(remoteFile);
reqOptions.headers = {};
reqOptions.headers['connection'] = 'keep-alive';
if (options.modernBrowser) {
reqOptions.headers['user-agent'] =
'Mozilla/5.0 AppleWebKit/538.0 Chrome/80.0.0.0 Safari/538';
'Mozilla/5.0 AppleWebKit/538.0 Chrome/88.0.0.0 Safari/538';
}
if (options.userAgent) {
reqOptions.headers['user-agent'] = String(options.userAgent);
}
function executor(resolve, reject) {
var request = hh.get(reqOptions, function (response) {
var body = '';
response.on('data', function (chunk) {
const request = hh.get(reqOptions, response => {
let body = '';
response.on('data', chunk => {
body += chunk.toString();
});
response.on('end', function () {
response.on('end', () => {
resolve({
body: body,
parent: remoteFile,
Expand All @@ -109,3 +116,8 @@ function createPromise(remoteFile, options) {
}
return new Promise(executor);
}

function urlParse(remoteFile) {
const reqOptions = url.parse(remoteFile);
return reqOptions;
}
7 changes: 4 additions & 3 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,11 +38,12 @@
"gulp-connect": "^5.7.0",
"gulp-eslint": "^6.0.0",
"gulp-mocha": "^7.0.2",
"husky": "^4.3.5",
"postcss": "^8.2.0",
"husky": "^4.3.8",
"ololog": "^1.1.164",
"postcss": "^8.2.4",
"precise-commits": "^1.0.2",
"prettier": "^2.2.1",
"semantic-release": "^17.3.0",
"semantic-release": "^17.3.7",
"tcp-ping": "^0.1.1"
},
"directories": {
Expand Down
57 changes: 46 additions & 11 deletions test/test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,19 +3,22 @@ const expect = require('expect');
const fs = require('fs');
const plugin = require('../');
const tcpp = require('tcp-ping');
const log = require('ololog');

const fixture1Css = fs.readFileSync(__dirname + '/fixture-1/style.css', { encoding: 'utf8' });
const fixture1Css = fs.readFileSync(__dirname + '/fixture-1/style.css', {
encoding: 'utf8',
});

const testEqual = function (input, output, pluginOptions, postcssOptions, done) {
getResult(input, pluginOptions, postcssOptions).then((result) => {
getResult(input, pluginOptions, postcssOptions).then(result => {
expect(result.css.trim()).toEqual(output.trim());
expect(result.warnings()).toHaveLength(0);
done();
}, done);
};

const testContains = function (input, value, pluginOptions, postcssOptions, done) {
getResult(input, pluginOptions, postcssOptions).then((result) => {
getResult(input, pluginOptions, postcssOptions).then(result => {
expect(result.css).toContain(value);
expect(result.warnings()).toHaveLength(0);
done();
Expand Down Expand Up @@ -50,7 +53,8 @@ describe('import with media queries', function () {
});

it('rule print', function (done) {
const input = "@import url('http://fonts.googleapis.com/css?family=Tangerine') print";
const input =
"@import url('http://fonts.googleapis.com/css?family=Tangerine') print";
testContains(input, '@media print', {}, {}, done);
});

Expand Down Expand Up @@ -106,7 +110,8 @@ describe('import url tangerine', function () {
}

it('empty', async () => {
const input = "@import 'http://fonts.googleapis.com/css?family=Tangerine' ;";
const input =
"@import 'http://fonts.googleapis.com/css?family=Tangerine' ;";
const result = await getResult(input);
assertOutputTangerine(result);
});
Expand All @@ -124,13 +129,15 @@ describe('import url tangerine', function () {
});

it('url single quotes', async () => {
const input = "@import url('http://fonts.googleapis.com/css?family=Tangerine');";
const input =
"@import url('http://fonts.googleapis.com/css?family=Tangerine');";
const result = await getResult(input);
assertOutputTangerine(result);
});

it('url double quotes', async () => {
const input = '@import url("http://fonts.googleapis.com/css?family=Tangerine");';
const input =
'@import url("http://fonts.googleapis.com/css?family=Tangerine");';
const result = await getResult(input);
assertOutputTangerine(result);
});
Expand All @@ -143,7 +150,7 @@ describe('import url tangerine', function () {
});

describe('recursive import', function () {
it('ping server', (done) => {
it('ping server', done => {
tcpp.probe('localhost', 1234, function (err) {
done(err);
});
Expand Down Expand Up @@ -218,7 +225,13 @@ describe('recursive import', function () {

it('does not resolve relative URLs when option.resolveURLs is false', function (done) {
const input = '@import url(http://localhost:1234/fixture-3/style.css)';
testContains(input, "src: url('./font.woff');", { resolveUrls: false }, {}, done);
testContains(
input,
"src: url('./font.woff');",
{ resolveUrls: false },
{},
done,
);
});

var _opts = { resolveUrls: true };
Expand Down Expand Up @@ -341,14 +354,36 @@ describe('recursive import', function () {
describe('google font woff', function () {
it('option modernBrowser should import woff', function (done) {
const input = '@import url(http://fonts.googleapis.com/css?family=Tangerine);';
testContains(input, "woff2) format('woff2')", { modernBrowser: true }, {}, done);
testContains(
input,
"woff2) format('woff2')",
{ modernBrowser: true },
{},
done,
);
});

it('option agent should import woff', function (done) {
const input = '@import url(http://fonts.googleapis.com/css?family=Tangerine);';
var opts = {
userAgent: 'Mozilla/5.0 AppleWebKit/537.36 Chrome/80.0.2840.99 Safari/537.36',
userAgent:
'Mozilla/5.0 AppleWebKit/537.36 Chrome/80.0.2840.99 Safari/537.36',
};
testContains(input, "woff2) format('woff2')", opts, {}, done);
});
});

describe('source property', () => {
it('regular import', async () => {
const input = '@import url(http://fonts.googleapis.com/css?family=Tangerine)';
const result = await getResult(input);
expect(result.root.source.input.css).toEqual(input);
});

it('media import', async () => {
const input =
'@import url(http://fonts.googleapis.com/css?family=Tangerine) print';
const result = await getResult(input);
expect(result.root.source.input.css).toEqual(input);
});
});

0 comments on commit 8405f32

Please sign in to comment.