chushihua
This commit is contained in:
li
+36
@@ -0,0 +1,36 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
|
||||
# Runtime data
|
||||
pids
|
||||
*.pid
|
||||
*.seed
|
||||
|
||||
# Directory for instrumented libs generated by jscoverage/JSCover
|
||||
lib-cov
|
||||
|
||||
# Coverage directory used by tools like istanbul
|
||||
coverage
|
||||
|
||||
# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
|
||||
.grunt
|
||||
|
||||
# node-waf configuration
|
||||
.lock-wscript
|
||||
|
||||
# Compiled binary addons (http://nodejs.org/api/addons.html)
|
||||
build/Release
|
||||
|
||||
# Dependency directory
|
||||
node_modules
|
||||
|
||||
# Optional npm cache directory
|
||||
.npm
|
||||
|
||||
# Optional REPL history
|
||||
.node_repl_history
|
||||
|
||||
# Others
|
||||
.DS_Store
|
||||
+8
@@ -0,0 +1,8 @@
|
||||
node_js:
|
||||
- "4.0"
|
||||
- "0.12"
|
||||
- "0.11"
|
||||
- "0.10"
|
||||
language: node_js
|
||||
script: "npm test && npm run cover"
|
||||
after_script: "npm install coveralls@2 && cat ./coverage/lcov.info | coveralls"
|
||||
+174
@@ -0,0 +1,174 @@
|
||||
# px2rem
|
||||
|
||||
According to one stylesheet, generate rem version and @1x, @2x and @3x stylesheet.
|
||||
|
||||
[![NPM version][npm-image]][npm-url]
|
||||
[![Build status][travis-image]][travis-url]
|
||||
[![Test coverage][coveralls-image]][coveralls-url]
|
||||
[![Downloads][downloads-image]][downloads-url]
|
||||
|
||||
[npm-image]: https://img.shields.io/npm/v/px2rem.svg?style=flat-square
|
||||
[npm-url]: https://npmjs.org/package/px2rem
|
||||
[travis-image]: https://img.shields.io/travis/songsiqi/px2rem.svg?style=flat-square
|
||||
[travis-url]: https://travis-ci.org/songsiqi/px2rem
|
||||
[coveralls-image]: https://img.shields.io/coveralls/songsiqi/px2rem.svg?style=flat-square
|
||||
[coveralls-url]: https://coveralls.io/r/songsiqi/px2rem
|
||||
[downloads-image]: http://img.shields.io/npm/dm/px2rem.svg?style=flat-square
|
||||
[downloads-url]: https://npmjs.org/package/px2rem
|
||||
|
||||
This set of tools contains:
|
||||
|
||||
* a CLI tool
|
||||
* [gulp plugin](https://www.npmjs.com/package/gulp-px3rem)
|
||||
* [webpack loader](https://www.npmjs.com/package/px2rem-loader)
|
||||
* [postcss plugin](https://www.npmjs.com/package/postcss-px2rem)
|
||||
|
||||
## Usage
|
||||
|
||||
The raw stylesheet only contains @2x style, and if you
|
||||
|
||||
* don't intend to transform the original value, eg: 1px border, add `/*no*/` after the declaration
|
||||
* intend to use px by force，eg: font-size, add `/*px*/` after the declaration
|
||||
|
||||
**Attention: Dealing with SASS or LESS, only `/*...*/` comment can be used, in order to have the comments persisted**
|
||||
|
||||
### CLI tool
|
||||
|
||||
```
|
||||
$ npm install -g px2rem
|
||||
```
|
||||
```
|
||||
$ px2rem -o build src/*.css
|
||||
```
|
||||
|
||||
```
|
||||
Usage: px2rem [options] <file...>
|
||||
|
||||
Options:
|
||||
|
||||
-h, --help output usage information
|
||||
-V, --version output the version number
|
||||
-u, --remUnit [value] set `rem` unit value (default: 75)
|
||||
-x, --threeVersion [value] whether to generate @1x, @2x and @3x version stylesheet (default: false)
|
||||
-r, --remVersion [value] whether to generate rem version stylesheet (default: true)
|
||||
-b, --baseDpr [value] set base device pixel ratio (default: 2)
|
||||
-p, --remPrecision [value] set rem value precision (default: 6)
|
||||
-o, --output [path] the output file dirname
|
||||
```
|
||||
|
||||
### API
|
||||
|
||||
```
|
||||
var Px2rem = require('px2rem');
|
||||
var px2remIns = new Px2rem([config]);
|
||||
var originCssText = '...';
|
||||
var dpr = 2;
|
||||
var newCssText = px2remIns.generateRem(originCssText); // generate rem version stylesheet
|
||||
var newCssText = px2remIns.generateThree(originCssText, dpr); // generate @1x, @2x and @3x version stylesheet
|
||||
```
|
||||
|
||||
### Example
|
||||
|
||||
#### Pre processing:
|
||||
|
||||
One raw stylesheet: `test.css`
|
||||
|
||||
```
|
||||
.selector {
|
||||
width: 150px;
|
||||
height: 64px; /*px*/
|
||||
font-size: 28px; /*px*/
|
||||
border: 1px solid #ddd; /*no*/
|
||||
}
|
||||
```
|
||||
|
||||
#### After processing:
|
||||
|
||||
Rem version: `test.debug.css`
|
||||
|
||||
```
|
||||
.selector {
|
||||
width: 2rem;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
[data-dpr="1"] .selector {
|
||||
height: 32px;
|
||||
font-size: 14px;
|
||||
}
|
||||
[data-dpr="2"] .selector {
|
||||
height: 64px;
|
||||
font-size: 28px;
|
||||
}
|
||||
[data-dpr="3"] .selector {
|
||||
height: 96px;
|
||||
font-size: 42px;
|
||||
}
|
||||
```
|
||||
|
||||
@1x version: `test1x.debug.css`
|
||||
|
||||
```
|
||||
.selector {
|
||||
width: 75px;
|
||||
height: 32px;
|
||||
font-size: 14px;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
```
|
||||
|
||||
@2x version: `test2x.debug.css`
|
||||
|
||||
```
|
||||
.selector {
|
||||
width: 150px;
|
||||
height: 64px;
|
||||
font-size: 28px;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
```
|
||||
|
||||
@3x version: `test3x.debug.css`
|
||||
|
||||
```
|
||||
.selector {
|
||||
width: 225px;
|
||||
height: 96px;
|
||||
font-size: 42px;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
```
|
||||
|
||||
## Technical proposal
|
||||
|
||||
comment hook + css parser
|
||||
|
||||
## Change Log
|
||||
|
||||
### 0.5.0
|
||||
|
||||
* Support Animation keyframes (no `/*px*/` comment).
|
||||
|
||||
### 0.4.2
|
||||
|
||||
* The generated [data-dpr] rules follow the origin rule, no longer placed at the end of the whole style sheet.
|
||||
* Optimize 0px, do not generate 3 [data-dpr] rules.
|
||||
|
||||
### 0.3.1
|
||||
|
||||
* Change default remUnit to 75.
|
||||
* Delete comment config.
|
||||
* Don't generate @1x, @2x and @3x version stylesheet by default.
|
||||
|
||||
### 0.2.2
|
||||
|
||||
* Support media query.
|
||||
|
||||
### 0.1.8
|
||||
|
||||
* Fix cli option duplication bug.
|
||||
* Fix regular expression bug.
|
||||
* Fix common comments bug which affects rem transformation.
|
||||
|
||||
## License
|
||||
|
||||
MIT
|
||||
+86
@@ -0,0 +1,86 @@
|
||||
#!/usr/bin/env node
|
||||
|
||||
var program = require('commander');
|
||||
var pkg = require('../package.json');
|
||||
var Px2rem = require('../index');
|
||||
var chalk = require('chalk');
|
||||
var path = require('path');
|
||||
var fs = require('fs-extra');
|
||||
|
||||
|
||||
// string to variables of proper type（thanks to zepto）
|
||||
function deserializeValue(value) {
|
||||
var num;
|
||||
try {
|
||||
return value ?
|
||||
value == "true" || value == true ||
|
||||
(value == "false" || value == false ? false :
|
||||
value == "null" ? null :
|
||||
!/^0/.test(value) && !isNaN(num = Number(value)) ? num :
|
||||
/^[\[\{]/.test(value) ? JSON.parse(value) :
|
||||
value)
|
||||
: value;
|
||||
} catch (e) {
|
||||
return value;
|
||||
}
|
||||
}
|
||||
|
||||
function saveFile(filePath, content) {
|
||||
fs.createFileSync(filePath);
|
||||
fs.writeFileSync(filePath, content, {encoding: 'utf8'});
|
||||
console.log(chalk.green.bold('[Success]: ') + filePath);
|
||||
}
|
||||
|
||||
|
||||
program.version(pkg.version)
|
||||
.option('-u, --remUnit [value]', 'set `rem` unit value (default: 75)', 75)
|
||||
.option('-x, --threeVersion [value]', 'whether to generate @1x, @2x and @3x version stylesheet (default: false)', false)
|
||||
.option('-r, --remVersion [value]', 'whether to generate rem version stylesheet (default: true)', true)
|
||||
.option('-b, --baseDpr [value]', 'set base device pixel ratio (default: 2)', 2)
|
||||
.option('-p, --remPrecision [value]', 'set rem value precision (default: 6)', 6)
|
||||
.option('-o, --output [path]', 'the output file dirname')
|
||||
.parse(process.argv);
|
||||
|
||||
if (!program.args.length) {
|
||||
console.log(chalk.yellow.bold('[Info]: ') + 'No files to process!');
|
||||
return false;
|
||||
}
|
||||
|
||||
var config = {
|
||||
remUnit: deserializeValue(program.remUnit),
|
||||
threeVersion: deserializeValue(program.threeVersion),
|
||||
remVersion: deserializeValue(program.remVersion),
|
||||
baseDpr: deserializeValue(program.baseDpr),
|
||||
remPrecision: deserializeValue(program.remPrecision)
|
||||
};
|
||||
|
||||
var px2remIns = new Px2rem(config);
|
||||
|
||||
program.args.forEach(function (filePath) {
|
||||
|
||||
if (path.extname(filePath) !== '.css') {
|
||||
return;
|
||||
}
|
||||
|
||||
var cssText = fs.readFileSync(filePath, {encoding: 'utf8'});
|
||||
var outputPath = program.output || path.dirname(filePath);
|
||||
var fileName = path.basename(filePath);
|
||||
|
||||
// generate @1x, @2x and @3x version stylesheet
|
||||
if (config.threeVersion) {
|
||||
for (var dpr = 1; dpr <= 3; dpr++) {
|
||||
var newCssText = px2remIns.generateThree(cssText, dpr);
|
||||
var newFileName = fileName.replace(/(.debug)?.css/, dpr + 'x.debug.css');
|
||||
var newFilepath = path.join(outputPath, newFileName);
|
||||
saveFile(newFilepath, newCssText);
|
||||
}
|
||||
}
|
||||
|
||||
// generate rem version stylesheet
|
||||
if (config.remVersion) {
|
||||
var newCssText = px2remIns.generateRem(cssText);
|
||||
var newFileName = fileName.replace(/(.debug)?.css/, '.debug.css');
|
||||
var newFilepath = path.join(outputPath, newFileName);
|
||||
saveFile(newFilepath, newCssText);
|
||||
}
|
||||
});
|
||||
+1
@@ -0,0 +1 @@
|
||||
module.exports = require('./lib/px2rem');
|
||||
+174
@@ -0,0 +1,174 @@
|
||||
'use strict';
|
||||
|
||||
var css = require('css');
|
||||
var extend = require('extend');
|
||||
|
||||
var defaultConfig = {
|
||||
baseDpr: 2, // base device pixel ratio (default: 2)
|
||||
remUnit: 75, // rem unit value (default: 75)
|
||||
remPrecision: 6, // rem value precision (default: 6)
|
||||
forcePxComment: 'px', // force px comment (default: `px`)
|
||||
keepComment: 'no' // no transform value comment (default: `no`)
|
||||
};
|
||||
|
||||
var pxRegExp = /\b(\d+(\.\d+)?)px\b/;
|
||||
|
||||
function Px2rem(options) {
|
||||
this.config = {};
|
||||
extend(this.config, defaultConfig, options);
|
||||
}
|
||||
|
||||
// generate @1x, @2x and @3x version stylesheet
|
||||
Px2rem.prototype.generateThree = function (cssText, dpr) {
|
||||
dpr = dpr || 2;
|
||||
var self = this;
|
||||
var config = self.config;
|
||||
var astObj = css.parse(cssText);
|
||||
|
||||
function processRules(rules) {
|
||||
for (var i = 0; i < rules.length; i++) {
|
||||
var rule = rules[i];
|
||||
if (rule.type === 'media') {
|
||||
processRules(rule.rules); // recursive invocation while dealing with media queries
|
||||
continue;
|
||||
} else if (rule.type === 'keyframes') {
|
||||
processRules(rule.keyframes); // recursive invocation while dealing with keyframes
|
||||
continue;
|
||||
} else if (rule.type !== 'rule' && rule.type !== 'keyframe') {
|
||||
continue;
|
||||
}
|
||||
|
||||
var declarations = rule.declarations;
|
||||
for (var j = 0; j < declarations.length; j++) {
|
||||
var declaration = declarations[j];
|
||||
// need transform: declaration && has 'px'
|
||||
if (declaration.type === 'declaration' && pxRegExp.test(declaration.value)) {
|
||||
var nextDeclaration = rule.declarations[j + 1];
|
||||
if (nextDeclaration && nextDeclaration.type === 'comment') { // next next declaration is comment
|
||||
if (nextDeclaration.comment.trim() === config.keepComment) { // no transform
|
||||
declarations.splice(j + 1, 1); // delete corresponding comment
|
||||
continue;
|
||||
} else if (nextDeclaration.comment.trim() === config.forcePxComment) { // force px
|
||||
declarations.splice(j + 1, 1); // delete corresponding comment
|
||||
}
|
||||
}
|
||||
declaration.value = self._getCalcValue('px', declaration.value, dpr); // common transform
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
processRules(astObj.stylesheet.rules);
|
||||
|
||||
return css.stringify(astObj);
|
||||
};
|
||||
|
||||
// generate rem version stylesheet
|
||||
Px2rem.prototype.generateRem = function (cssText) {
|
||||
var self = this;
|
||||
var config = self.config;
|
||||
var astObj = css.parse(cssText);
|
||||
|
||||
function processRules(rules, noDealPx) { // FIXME: keyframes do not support `force px` comment
|
||||
for (var i = 0; i < rules.length; i++) {
|
||||
var rule = rules[i];
|
||||
if (rule.type === 'media') {
|
||||
processRules(rule.rules); // recursive invocation while dealing with media queries
|
||||
continue;
|
||||
} else if (rule.type === 'keyframes') {
|
||||
processRules(rule.keyframes, true); // recursive invocation while dealing with keyframes
|
||||
continue;
|
||||
} else if (rule.type !== 'rule' && rule.type !== 'keyframe') {
|
||||
continue;
|
||||
}
|
||||
|
||||
if (!noDealPx) {
|
||||
// generate 3 new rules which has [data-dpr]
|
||||
var newRules = [];
|
||||
for (var dpr = 1; dpr <= 3; dpr++) {
|
||||
var newRule = {};
|
||||
newRule.type = rule.type;
|
||||
newRule.selectors = rule.selectors.map(function (sel) {
|
||||
return '[data-dpr="' + dpr + '"] ' + sel;
|
||||
});
|
||||
newRule.declarations = [];
|
||||
newRules.push(newRule);
|
||||
}
|
||||
}
|
||||
|
||||
var declarations = rule.declarations;
|
||||
for (var j = 0; j < declarations.length; j++) {
|
||||
var declaration = declarations[j];
|
||||
// need transform: declaration && has 'px'
|
||||
if (declaration.type === 'declaration' && pxRegExp.test(declaration.value)) {
|
||||
var nextDeclaration = rule.declarations[j + 1];
|
||||
if (nextDeclaration && nextDeclaration.type === 'comment') { // next next declaration is comment
|
||||
if (nextDeclaration.comment.trim() === config.forcePxComment) { // force px
|
||||
// do not transform `0px`
|
||||
if (declaration.value === '0px') {
|
||||
declaration.value = '0';
|
||||
declarations.splice(j + 1, 1); // delete corresponding comment
|
||||
continue;
|
||||
}
|
||||
if (!noDealPx) {
|
||||
// generate 3 new declarations and put them in the new rules which has [data-dpr]
|
||||
for (var dpr = 1; dpr <= 3; dpr++) {
|
||||
var newDeclaration = {};
|
||||
extend(true, newDeclaration, declaration);
|
||||
newDeclaration.value = self._getCalcValue('px', newDeclaration.value, dpr);
|
||||
newRules[dpr - 1].declarations.push(newDeclaration);
|
||||
}
|
||||
declarations.splice(j, 2); // delete this rule and corresponding comment
|
||||
j--;
|
||||
} else { // FIXME: keyframes do not support `force px` comment
|
||||
declaration.value = self._getCalcValue('rem', declaration.value); // common transform
|
||||
declarations.splice(j + 1, 1); // delete corresponding comment
|
||||
}
|
||||
} else if (nextDeclaration.comment.trim() === config.keepComment) { // no transform
|
||||
declarations.splice(j + 1, 1); // delete corresponding comment
|
||||
} else {
|
||||
declaration.value = self._getCalcValue('rem', declaration.value); // common transform
|
||||
}
|
||||
} else {
|
||||
declaration.value = self._getCalcValue('rem', declaration.value); // common transform
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// if the origin rule has no declarations, delete it
|
||||
if (!rules[i].declarations.length) {
|
||||
rules.splice(i, 1);
|
||||
i--;
|
||||
}
|
||||
|
||||
if (!noDealPx) {
|
||||
// add the new rules which contain declarations that are forced to use px
|
||||
if (newRules[0].declarations.length) {
|
||||
rules.splice(i + 1, 0, newRules[0], newRules[1], newRules[2]);
|
||||
i += 3; // skip the added new rules
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
processRules(astObj.stylesheet.rules);
|
||||
|
||||
return css.stringify(astObj);
|
||||
};
|
||||
|
||||
// get calculated value of px or rem
|
||||
Px2rem.prototype._getCalcValue = function (type, value, dpr) {
|
||||
var config = this.config;
|
||||
var pxGlobalRegExp = new RegExp(pxRegExp.source, 'g');
|
||||
|
||||
function getValue(val) {
|
||||
val = parseFloat(val.toFixed(config.remPrecision)); // control decimal precision of the calculated value
|
||||
return val == 0 ? val : val + type;
|
||||
}
|
||||
|
||||
return value.replace(pxGlobalRegExp, function ($0, $1) {
|
||||
return type === 'px' ? getValue($1 * dpr / config.baseDpr) : getValue($1 / config.remUnit);
|
||||
});
|
||||
};
|
||||
|
||||
module.exports = Px2rem;
|
||||
+1
@@ -0,0 +1 @@
|
||||
../has-ansi/cli.js
|
||||
+1
@@ -0,0 +1 @@
|
||||
../strip-ansi/cli.js
|
||||
+1
@@ -0,0 +1 @@
|
||||
../supports-color/cli.js
|
||||
+4
@@ -0,0 +1,4 @@
|
||||
'use strict';
|
||||
module.exports = function () {
|
||||
return /\u001b\[(?:[0-9]{1,3}(?:;[0-9]{1,3})*)?[m|K]/g;
|
||||
};
|
||||
+51
@@ -0,0 +1,51 @@
|
||||
{
|
||||
"name": "ansi-regex",
|
||||
"version": "0.2.1",
|
||||
"description": "Regular expression for matching ANSI escape codes",
|
||||
"license": "MIT",
|
||||
"repository": "sindresorhus/ansi-regex",
|
||||
"author": {
|
||||
"name": "Sindre Sorhus",
|
||||
"email": "sindresorhus@gmail.com",
|
||||
"url": "http://sindresorhus.com"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
},
|
||||
"scripts": {
|
||||
"test": "mocha"
|
||||
},
|
||||
"files": [
|
||||
"index.js"
|
||||
],
|
||||
"keywords": [
|
||||
"ansi",
|
||||
"styles",
|
||||
"color",
|
||||
"colour",
|
||||
"colors",
|
||||
"terminal",
|
||||
"console",
|
||||
"cli",
|
||||
"string",
|
||||
"tty",
|
||||
"escape",
|
||||
"formatting",
|
||||
"rgb",
|
||||
"256",
|
||||
"shell",
|
||||
"xterm",
|
||||
"command-line",
|
||||
"text",
|
||||
"regex",
|
||||
"regexp",
|
||||
"re",
|
||||
"match",
|
||||
"test",
|
||||
"find",
|
||||
"pattern"
|
||||
],
|
||||
"devDependencies": {
|
||||
"mocha": "*"
|
||||
}
|
||||
}
|
||||
+33
@@ -0,0 +1,33 @@
|
||||
# ansi-regex [](https://travis-ci.org/sindresorhus/ansi-regex)
|
||||
|
||||
> Regular expression for matching [ANSI escape codes](http://en.wikipedia.org/wiki/ANSI_escape_code)
|
||||
|
||||
|
||||
## Install
|
||||
|
||||
```sh
|
||||
$ npm install --save ansi-regex
|
||||
```
|
||||
|
||||
|
||||
## Usage
|
||||
|
||||
```js
|
||||
var ansiRegex = require('ansi-regex');
|
||||
|
||||
ansiRegex().test('\u001b[4mcake\u001b[0m');
|
||||
//=> true
|
||||
|
||||
ansiRegex().test('cake');
|
||||
//=> false
|
||||
|
||||
'\u001b[4mcake\u001b[0m'.match(ansiRegex());
|
||||
//=> ['\u001b[4m', '\u001b[0m']
|
||||
```
|
||||
|
||||
*It's a function so you can create multiple instances. Regexes with the global flag will have the `.lastIndex` property changed for each call to methods on the instance. Therefore reusing the instance with multiple calls will not work as expected for `.test()`.*
|
||||
|
||||
|
||||
## License
|
||||
|
||||
MIT © [Sindre Sorhus](http://sindresorhus.com)
|
||||
+40
@@ -0,0 +1,40 @@
|
||||
'use strict';
|
||||
var styles = module.exports;
|
||||
|
||||
var codes = {
|
||||
reset: [0, 0],
|
||||
|
||||
bold: [1, 22], // 21 isn't widely supported and 22 does the same thing
|
||||
dim: [2, 22],
|
||||
italic: [3, 23],
|
||||
underline: [4, 24],
|
||||
inverse: [7, 27],
|
||||
hidden: [8, 28],
|
||||
strikethrough: [9, 29],
|
||||
|
||||
black: [30, 39],
|
||||
red: [31, 39],
|
||||
green: [32, 39],
|
||||
yellow: [33, 39],
|
||||
blue: [34, 39],
|
||||
magenta: [35, 39],
|
||||
cyan: [36, 39],
|
||||
white: [37, 39],
|
||||
gray: [90, 39],
|
||||
|
||||
bgBlack: [40, 49],
|
||||
bgRed: [41, 49],
|
||||
bgGreen: [42, 49],
|
||||
bgYellow: [43, 49],
|
||||
bgBlue: [44, 49],
|
||||
bgMagenta: [45, 49],
|
||||
bgCyan: [46, 49],
|
||||
bgWhite: [47, 49]
|
||||
};
|
||||
|
||||
Object.keys(codes).forEach(function (key) {
|
||||
var val = codes[key];
|
||||
var style = styles[key] = {};
|
||||
style.open = '\u001b[' + val[0] + 'm';
|
||||
style.close = '\u001b[' + val[1] + 'm';
|
||||
});
|
||||
+46
@@ -0,0 +1,46 @@
|
||||
{
|
||||
"name": "ansi-styles",
|
||||
"version": "1.1.0",
|
||||
"description": "ANSI escape codes for styling strings in the terminal",
|
||||
"license": "MIT",
|
||||
"repository": "sindresorhus/ansi-styles",
|
||||
"author": {
|
||||
"name": "Sindre Sorhus",
|
||||
"email": "sindresorhus@gmail.com",
|
||||
"url": "http://sindresorhus.com"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
},
|
||||
"scripts": {
|
||||
"test": "mocha"
|
||||
},
|
||||
"files": [
|
||||
"index.js"
|
||||
],
|
||||
"keywords": [
|
||||
"ansi",
|
||||
"styles",
|
||||
"color",
|
||||
"colour",
|
||||
"colors",
|
||||
"terminal",
|
||||
"console",
|
||||
"cli",
|
||||
"string",
|
||||
"tty",
|
||||
"escape",
|
||||
"formatting",
|
||||
"rgb",
|
||||
"256",
|
||||
"shell",
|
||||
"xterm",
|
||||
"log",
|
||||
"logging",
|
||||
"command-line",
|
||||
"text"
|
||||
],
|
||||
"devDependencies": {
|
||||
"mocha": "*"
|
||||
}
|
||||
}
|
||||
+70
@@ -0,0 +1,70 @@
|
||||
# ansi-styles [](https://travis-ci.org/sindresorhus/ansi-styles)
|
||||
|
||||
> [ANSI escape codes](http://en.wikipedia.org/wiki/ANSI_escape_code#Colors_and_Styles) for styling strings in the terminal
|
||||
|
||||
You probably want the higher-level [chalk](https://github.com/sindresorhus/chalk) module for styling your strings.
|
||||
|
||||
|
||||
|
||||
|
||||
## Install
|
||||
|
||||
```sh
|
||||
$ npm install --save ansi-styles
|
||||
```
|
||||
|
||||
|
||||
## Usage
|
||||
|
||||
```js
|
||||
var ansi = require('ansi-styles');
|
||||
|
||||
console.log(ansi.green.open + 'Hello world!' + ansi.green.close);
|
||||
```
|
||||
|
||||
|
||||
## API
|
||||
|
||||
Each style has an `open` and `close` property.
|
||||
|
||||
|
||||
## Styles
|
||||
|
||||
### General
|
||||
|
||||
- `reset`
|
||||
- `bold`
|
||||
- `dim`
|
||||
- `italic` *(not widely supported)*
|
||||
- `underline`
|
||||
- `inverse`
|
||||
- `hidden`
|
||||
- `strikethrough` *(not widely supported)*
|
||||
|
||||
### Text colors
|
||||
|
||||
- `black`
|
||||
- `red`
|
||||
- `green`
|
||||
- `yellow`
|
||||
- `blue`
|
||||
- `magenta`
|
||||
- `cyan`
|
||||
- `white`
|
||||
- `gray`
|
||||
|
||||
### Background colors
|
||||
|
||||
- `bgBlack`
|
||||
- `bgRed`
|
||||
- `bgGreen`
|
||||
- `bgYellow`
|
||||
- `bgBlue`
|
||||
- `bgMagenta`
|
||||
- `bgCyan`
|
||||
- `bgWhite`
|
||||
|
||||
|
||||
## License
|
||||
|
||||
MIT © [Sindre Sorhus](http://sindresorhus.com)
|
||||
+95
@@ -0,0 +1,95 @@
|
||||
'use strict';
|
||||
var escapeStringRegexp = require('escape-string-regexp');
|
||||
var ansiStyles = require('ansi-styles');
|
||||
var stripAnsi = require('strip-ansi');
|
||||
var hasAnsi = require('has-ansi');
|
||||
var supportsColor = require('supports-color');
|
||||
var defineProps = Object.defineProperties;
|
||||
var chalk = module.exports;
|
||||
|
||||
function build(_styles) {
|
||||
var builder = function builder() {
|
||||
return applyStyle.apply(builder, arguments);
|
||||
};
|
||||
builder._styles = _styles;
|
||||
// __proto__ is used because we must return a function, but there is
|
||||
// no way to create a function with a different prototype.
|
||||
builder.__proto__ = proto;
|
||||
return builder;
|
||||
}
|
||||
|
||||
var styles = (function () {
|
||||
var ret = {};
|
||||
|
||||
ansiStyles.grey = ansiStyles.gray;
|
||||
|
||||
Object.keys(ansiStyles).forEach(function (key) {
|
||||
ansiStyles[key].closeRe = new RegExp(escapeStringRegexp(ansiStyles[key].close), 'g');
|
||||
|
||||
ret[key] = {
|
||||
get: function () {
|
||||
return build(this._styles.concat(key));
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
return ret;
|
||||
})();
|
||||
|
||||
var proto = defineProps(function chalk() {}, styles);
|
||||
|
||||
function applyStyle() {
|
||||
// support varags, but simply cast to string in case there's only one arg
|
||||
var args = arguments;
|
||||
var argsLen = args.length;
|
||||
var str = argsLen !== 0 && String(arguments[0]);
|
||||
if (argsLen > 1) {
|
||||
// don't slice `arguments`, it prevents v8 optimizations
|
||||
for (var a = 1; a < argsLen; a++) {
|
||||
str += ' ' + args[a];
|
||||
}
|
||||
}
|
||||
|
||||
if (!chalk.enabled || !str) {
|
||||
return str;
|
||||
}
|
||||
|
||||
/*jshint validthis: true*/
|
||||
var nestedStyles = this._styles;
|
||||
|
||||
for (var i = 0; i < nestedStyles.length; i++) {
|
||||
var code = ansiStyles[nestedStyles[i]];
|
||||
// Replace any instances already present with a re-opening code
|
||||
// otherwise only the part of the string until said closing code
|
||||
// will be colored, and the rest will simply be 'plain'.
|
||||
str = code.open + str.replace(code.closeRe, code.open) + code.close;
|
||||
}
|
||||
|
||||
return str;
|
||||
}
|
||||
|
||||
function init() {
|
||||
var ret = {};
|
||||
|
||||
Object.keys(styles).forEach(function (name) {
|
||||
ret[name] = {
|
||||
get: function () {
|
||||
return build([name]);
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
return ret;
|
||||
}
|
||||
|
||||
defineProps(chalk, init());
|
||||
|
||||
chalk.styles = ansiStyles;
|
||||
chalk.hasColor = hasAnsi;
|
||||
chalk.stripColor = stripAnsi;
|
||||
chalk.supportsColor = supportsColor;
|
||||
|
||||
// detect mode if not set manually
|
||||
if (chalk.enabled === undefined) {
|
||||
chalk.enabled = chalk.supportsColor;
|
||||
}
|
||||
+53
@@ -0,0 +1,53 @@
|
||||
{
|
||||
"name": "chalk",
|
||||
"version": "0.5.1",
|
||||
"description": "Terminal string styling done right. Created because the `colors` module does some really horrible things.",
|
||||
"license": "MIT",
|
||||
"repository": "sindresorhus/chalk",
|
||||
"maintainers": [
|
||||
"Sindre Sorhus <sindresorhus@gmail.com> (http://sindresorhus.com)",
|
||||
"Joshua Appelman <joshua@jbna.nl>"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
},
|
||||
"scripts": {
|
||||
"test": "mocha",
|
||||
"bench": "matcha benchmark.js"
|
||||
},
|
||||
"files": [
|
||||
"index.js"
|
||||
],
|
||||
"keywords": [
|
||||
"color",
|
||||
"colour",
|
||||
"colors",
|
||||
"terminal",
|
||||
"console",
|
||||
"cli",
|
||||
"string",
|
||||
"ansi",
|
||||
"styles",
|
||||
"tty",
|
||||
"formatting",
|
||||
"rgb",
|
||||
"256",
|
||||
"shell",
|
||||
"xterm",
|
||||
"log",
|
||||
"logging",
|
||||
"command-line",
|
||||
"text"
|
||||
],
|
||||
"dependencies": {
|
||||
"ansi-styles": "^1.1.0",
|
||||
"escape-string-regexp": "^1.0.0",
|
||||
"has-ansi": "^0.1.0",
|
||||
"strip-ansi": "^0.3.0",
|
||||
"supports-color": "^0.2.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"matcha": "^0.5.0",
|
||||
"mocha": "*"
|
||||
}
|
||||
}
|
||||
+175
@@ -0,0 +1,175 @@
|
||||
# <img width="300" src="https://cdn.rawgit.com/sindresorhus/chalk/77ae94f63ab1ac61389b190e5a59866569d1a376/logo.svg" alt="chalk">
|
||||
|
||||
> Terminal string styling done right
|
||||
|
||||
[](https://travis-ci.org/sindresorhus/chalk)
|
||||
|
||||
|
||||
[colors.js](https://github.com/Marak/colors.js) is currently the most popular string styling module, but it has serious deficiencies like extending String.prototype which causes all kinds of [problems](https://github.com/yeoman/yo/issues/68). Although there are other ones, they either do too much or not enough.
|
||||
|
||||
**Chalk is a clean and focused alternative.**
|
||||
|
||||
|
||||
|
||||
|
||||
## Why
|
||||
|
||||
- Highly performant
|
||||
- Doesn't extend String.prototype
|
||||
- Expressive API
|
||||
- Ability to nest styles
|
||||
- Clean and focused
|
||||
- Auto-detects color support
|
||||
- Actively maintained
|
||||
- [Used by 1000+ modules](https://npmjs.org/browse/depended/chalk)
|
||||
|
||||
|
||||
## Install
|
||||
|
||||
```sh
|
||||
$ npm install --save chalk
|
||||
```
|
||||
|
||||
|
||||
## Usage
|
||||
|
||||
Chalk comes with an easy to use composable API where you just chain and nest the styles you want.
|
||||
|
||||
```js
|
||||
var chalk = require('chalk');
|
||||
|
||||
// style a string
|
||||
console.log( chalk.blue('Hello world!') );
|
||||
|
||||
// combine styled and normal strings
|
||||
console.log( chalk.blue('Hello'), 'World' + chalk.red('!') );
|
||||
|
||||
// compose multiple styles using the chainable API
|
||||
console.log( chalk.blue.bgRed.bold('Hello world!') );
|
||||
|
||||
// pass in multiple arguments
|
||||
console.log( chalk.blue('Hello', 'World!', 'Foo', 'bar', 'biz', 'baz') );
|
||||
|
||||
// nest styles
|
||||
console.log( chalk.red('Hello', chalk.underline.bgBlue('world') + '!') );
|
||||
|
||||
// nest styles of the same type even (color, underline, background)
|
||||
console.log( chalk.green('I am a green line ' + chalk.blue('with a blue substring') + ' that becomes green again!') );
|
||||
```
|
||||
|
||||
Easily define your own themes.
|
||||
|
||||
```js
|
||||
var chalk = require('chalk');
|
||||
var error = chalk.bold.red;
|
||||
console.log(error('Error!'));
|
||||
```
|
||||
|
||||
Take advantage of console.log [string substitution](http://nodejs.org/docs/latest/api/console.html#console_console_log_data).
|
||||
|
||||
```js
|
||||
var name = 'Sindre';
|
||||
console.log(chalk.green('Hello %s'), name);
|
||||
//=> Hello Sindre
|
||||
```
|
||||
|
||||
|
||||
## API
|
||||
|
||||
### chalk.`<style>[.<style>...](string, [string...])`
|
||||
|
||||
Example: `chalk.red.bold.underline('Hello', 'world');`
|
||||
|
||||
Chain [styles](#styles) and call the last one as a method with a string argument. Order doesn't matter.
|
||||
|
||||
Multiple arguments will be separated by space.
|
||||
|
||||
### chalk.enabled
|
||||
|
||||
Color support is automatically detected, but you can override it.
|
||||
|
||||
### chalk.supportsColor
|
||||
|
||||
Detect whether the terminal [supports color](https://github.com/sindresorhus/supports-color).
|
||||
|
||||
Can be overridden by the user with the flags `--color` and `--no-color`.
|
||||
|
||||
Used internally and handled for you, but exposed for convenience.
|
||||
|
||||
### chalk.styles
|
||||
|
||||
Exposes the styles as [ANSI escape codes](https://github.com/sindresorhus/ansi-styles).
|
||||
|
||||
Generally not useful, but you might need just the `.open` or `.close` escape code if you're mixing externally styled strings with yours.
|
||||
|
||||
```js
|
||||
var chalk = require('chalk');
|
||||
|
||||
console.log(chalk.styles.red);
|
||||
//=> {open: '\u001b[31m', close: '\u001b[39m'}
|
||||
|
||||
console.log(chalk.styles.red.open + 'Hello' + chalk.styles.red.close);
|
||||
```
|
||||
|
||||
### chalk.hasColor(string)
|
||||
|
||||
Check whether a string [has color](https://github.com/sindresorhus/has-ansi).
|
||||
|
||||
### chalk.stripColor(string)
|
||||
|
||||
[Strip color](https://github.com/sindresorhus/strip-ansi) from a string.
|
||||
|
||||
Can be useful in combination with `.supportsColor` to strip color on externally styled text when it's not supported.
|
||||
|
||||
Example:
|
||||
|
||||
```js
|
||||
var chalk = require('chalk');
|
||||
var styledString = getText();
|
||||
|
||||
if (!chalk.supportsColor) {
|
||||
styledString = chalk.stripColor(styledString);
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
## Styles
|
||||
|
||||
### General
|
||||
|
||||
- `reset`
|
||||
- `bold`
|
||||
- `dim`
|
||||
- `italic` *(not widely supported)*
|
||||
- `underline`
|
||||
- `inverse`
|
||||
- `hidden`
|
||||
- `strikethrough` *(not widely supported)*
|
||||
|
||||
### Text colors
|
||||
|
||||
- `black`
|
||||
- `red`
|
||||
- `green`
|
||||
- `yellow`
|
||||
- `blue`
|
||||
- `magenta`
|
||||
- `cyan`
|
||||
- `white`
|
||||
- `gray`
|
||||
|
||||
### Background colors
|
||||
|
||||
- `bgBlack`
|
||||
- `bgRed`
|
||||
- `bgGreen`
|
||||
- `bgYellow`
|
||||
- `bgBlue`
|
||||
- `bgMagenta`
|
||||
- `bgCyan`
|
||||
- `bgWhite`
|
||||
|
||||
|
||||
## License
|
||||
|
||||
MIT © [Sindre Sorhus](http://sindresorhus.com)
|
||||
+53
@@ -0,0 +1,53 @@
|
||||
#!/usr/bin/env node
|
||||
'use strict';
|
||||
var pkg = require('./package.json');
|
||||
var hasAnsi = require('./');
|
||||
var input = process.argv[2];
|
||||
|
||||
function stdin(cb) {
|
||||
var ret = '';
|
||||
process.stdin.setEncoding('utf8');
|
||||
process.stdin.on('data', function (data) {
|
||||
ret += data;
|
||||
});
|
||||
process.stdin.on('end', function () {
|
||||
cb(ret);
|
||||
});
|
||||
}
|
||||
|
||||
function help() {
|
||||
console.log([
|
||||
pkg.description,
|
||||
'',
|
||||
'Usage',
|
||||
' $ has-ansi <string>',
|
||||
' $ echo <string> | has-ansi',
|
||||
'',
|
||||
'Exits with code 0 if input has ANSI escape codes and 1 if not'
|
||||
].join('\n'));
|
||||
}
|
||||
|
||||
function init(data) {
|
||||
process.exit(hasAnsi(data) ? 0 : 1);
|
||||
}
|
||||
|
||||
if (process.argv.indexOf('--help') !== -1) {
|
||||
help();
|
||||
return;
|
||||
}
|
||||
|
||||
if (process.argv.indexOf('--version') !== -1) {
|
||||
console.log(pkg.version);
|
||||
return;
|
||||
}
|
||||
|
||||
if (process.stdin.isTTY) {
|
||||
if (!input) {
|
||||
help();
|
||||
return;
|
||||
}
|
||||
|
||||
init(input);
|
||||
} else {
|
||||
stdin(init);
|
||||
}
|
||||
+4
@@ -0,0 +1,4 @@
|
||||
'use strict';
|
||||
var ansiRegex = require('ansi-regex');
|
||||
var re = new RegExp(ansiRegex().source); // remove the `g` flag
|
||||
module.exports = re.test.bind(re);
|
||||
+57
@@ -0,0 +1,57 @@
|
||||
{
|
||||
"name": "has-ansi",
|
||||
"version": "0.1.0",
|
||||
"description": "Check if a string has ANSI escape codes",
|
||||
"license": "MIT",
|
||||
"repository": "sindresorhus/has-ansi",
|
||||
"bin": {
|
||||
"has-ansi": "cli.js"
|
||||
},
|
||||
"author": {
|
||||
"name": "Sindre Sorhus",
|
||||
"email": "sindresorhus@gmail.com",
|
||||
"url": "http://sindresorhus.com"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
},
|
||||
"scripts": {
|
||||
"test": "mocha"
|
||||
},
|
||||
"files": [
|
||||
"index.js",
|
||||
"cli.js"
|
||||
],
|
||||
"keywords": [
|
||||
"cli",
|
||||
"bin",
|
||||
"ansi",
|
||||
"styles",
|
||||
"color",
|
||||
"colour",
|
||||
"colors",
|
||||
"terminal",
|
||||
"console",
|
||||
"string",
|
||||
"tty",
|
||||
"escape",
|
||||
"shell",
|
||||
"xterm",
|
||||
"command-line",
|
||||
"text",
|
||||
"regex",
|
||||
"regexp",
|
||||
"re",
|
||||
"match",
|
||||
"test",
|
||||
"find",
|
||||
"pattern",
|
||||
"has"
|
||||
],
|
||||
"dependencies": {
|
||||
"ansi-regex": "^0.2.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"mocha": "*"
|
||||
}
|
||||
}
|
||||
+45
@@ -0,0 +1,45 @@
|
||||
# has-ansi [](https://travis-ci.org/sindresorhus/has-ansi)
|
||||
|
||||
> Check if a string has [ANSI escape codes](http://en.wikipedia.org/wiki/ANSI_escape_code)
|
||||
|
||||
|
||||
## Install
|
||||
|
||||
```sh
|
||||
$ npm install --save has-ansi
|
||||
```
|
||||
|
||||
|
||||
## Usage
|
||||
|
||||
```js
|
||||
var hasAnsi = require('has-ansi');
|
||||
|
||||
hasAnsi('\u001b[4mcake\u001b[0m');
|
||||
//=> true
|
||||
|
||||
hasAnsi('cake');
|
||||
//=> false
|
||||
```
|
||||
|
||||
|
||||
## CLI
|
||||
|
||||
```sh
|
||||
$ npm install --global has-ansi
|
||||
```
|
||||
|
||||
```
|
||||
$ has-ansi --help
|
||||
|
||||
Usage
|
||||
$ has-ansi <string>
|
||||
$ echo <string> | has-ansi
|
||||
|
||||
Exits with code 0 if input has ANSI escape codes and 1 if not
|
||||
```
|
||||
|
||||
|
||||
## License
|
||||
|
||||
MIT © [Sindre Sorhus](http://sindresorhus.com)
|
||||
+39
@@ -0,0 +1,39 @@
|
||||
#!/usr/bin/env node
|
||||
'use strict';
|
||||
var fs = require('fs');
|
||||
var pkg = require('./package.json');
|
||||
var strip = require('./');
|
||||
var input = process.argv[2];
|
||||
|
||||
function help() {
|
||||
console.log([
|
||||
pkg.description,
|
||||
'',
|
||||
'Usage',
|
||||
' $ strip-ansi <input-file> > <output-file>',
|
||||
' $ cat <input-file> | strip-ansi > <output-file>',
|
||||
'',
|
||||
'Example',
|
||||
' $ strip-ansi unicorn.txt > unicorn-stripped.txt'
|
||||
].join('\n'));
|
||||
}
|
||||
|
||||
if (process.argv.indexOf('--help') !== -1) {
|
||||
help();
|
||||
return;
|
||||
}
|
||||
|
||||
if (process.argv.indexOf('--version') !== -1) {
|
||||
console.log(pkg.version);
|
||||
return;
|
||||
}
|
||||
|
||||
if (input) {
|
||||
process.stdout.write(strip(fs.readFileSync(input, 'utf8')));
|
||||
return;
|
||||
}
|
||||
|
||||
process.stdin.setEncoding('utf8');
|
||||
process.stdin.on('data', function (data) {
|
||||
process.stdout.write(strip(data));
|
||||
});
|
||||
+6
@@ -0,0 +1,6 @@
|
||||
'use strict';
|
||||
var ansiRegex = require('ansi-regex')();
|
||||
|
||||
module.exports = function (str) {
|
||||
return typeof str === 'string' ? str.replace(ansiRegex, '') : str;
|
||||
};
|
||||
+56
@@ -0,0 +1,56 @@
|
||||
{
|
||||
"name": "strip-ansi",
|
||||
"version": "0.3.0",
|
||||
"description": "Strip ANSI escape codes",
|
||||
"license": "MIT",
|
||||
"bin": {
|
||||
"strip-ansi": "cli.js"
|
||||
},
|
||||
"repository": "sindresorhus/strip-ansi",
|
||||
"author": {
|
||||
"name": "Sindre Sorhus",
|
||||
"email": "sindresorhus@gmail.com",
|
||||
"url": "http://sindresorhus.com"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
},
|
||||
"scripts": {
|
||||
"test": "mocha"
|
||||
},
|
||||
"files": [
|
||||
"index.js",
|
||||
"cli.js"
|
||||
],
|
||||
"keywords": [
|
||||
"strip",
|
||||
"trim",
|
||||
"remove",
|
||||
"ansi",
|
||||
"styles",
|
||||
"color",
|
||||
"colour",
|
||||
"colors",
|
||||
"terminal",
|
||||
"console",
|
||||
"cli",
|
||||
"string",
|
||||
"tty",
|
||||
"escape",
|
||||
"formatting",
|
||||
"rgb",
|
||||
"256",
|
||||
"shell",
|
||||
"xterm",
|
||||
"log",
|
||||
"logging",
|
||||
"command-line",
|
||||
"text"
|
||||
],
|
||||
"dependencies": {
|
||||
"ansi-regex": "^0.2.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"mocha": "*"
|
||||
}
|
||||
}
|
||||
+43
@@ -0,0 +1,43 @@
|
||||
# strip-ansi [](https://travis-ci.org/sindresorhus/strip-ansi)
|
||||
|
||||
> Strip [ANSI escape codes](http://en.wikipedia.org/wiki/ANSI_escape_code)
|
||||
|
||||
|
||||
## Install
|
||||
|
||||
```sh
|
||||
$ npm install --save strip-ansi
|
||||
```
|
||||
|
||||
|
||||
## Usage
|
||||
|
||||
```js
|
||||
var stripAnsi = require('strip-ansi');
|
||||
|
||||
stripAnsi('\x1b[4mcake\x1b[0m');
|
||||
//=> 'cake'
|
||||
```
|
||||
|
||||
|
||||
## CLI
|
||||
|
||||
```sh
|
||||
$ npm install --global strip-ansi
|
||||
```
|
||||
|
||||
```sh
|
||||
$ strip-ansi --help
|
||||
|
||||
Usage
|
||||
$ strip-ansi <input-file> > <output-file>
|
||||
$ cat <input-file> | strip-ansi > <output-file>
|
||||
|
||||
Example
|
||||
$ strip-ansi unicorn.txt > unicorn-stripped.txt
|
||||
```
|
||||
|
||||
|
||||
## License
|
||||
|
||||
MIT © [Sindre Sorhus](http://sindresorhus.com)
|
||||
+28
@@ -0,0 +1,28 @@
|
||||
#!/usr/bin/env node
|
||||
'use strict';
|
||||
var pkg = require('./package.json');
|
||||
var supportsColor = require('./');
|
||||
var input = process.argv[2];
|
||||
|
||||
function help() {
|
||||
console.log([
|
||||
pkg.description,
|
||||
'',
|
||||
'Usage',
|
||||
' $ supports-color',
|
||||
'',
|
||||
'Exits with code 0 if color is supported and 1 if not'
|
||||
].join('\n'));
|
||||
}
|
||||
|
||||
if (!input || process.argv.indexOf('--help') !== -1) {
|
||||
help();
|
||||
return;
|
||||
}
|
||||
|
||||
if (process.argv.indexOf('--version') !== -1) {
|
||||
console.log(pkg.version);
|
||||
return;
|
||||
}
|
||||
|
||||
process.exit(supportsColor ? 0 : 1);
|
||||
+32
@@ -0,0 +1,32 @@
|
||||
'use strict';
|
||||
module.exports = (function () {
|
||||
if (process.argv.indexOf('--no-color') !== -1) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (process.argv.indexOf('--color') !== -1) {
|
||||
return true;
|
||||
}
|
||||
|
||||
if (process.stdout && !process.stdout.isTTY) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (process.platform === 'win32') {
|
||||
return true;
|
||||
}
|
||||
|
||||
if ('COLORTERM' in process.env) {
|
||||
return true;
|
||||
}
|
||||
|
||||
if (process.env.TERM === 'dumb') {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (/^screen|^xterm|^vt100|color|ansi|cygwin|linux/i.test(process.env.TERM)) {
|
||||
return true;
|
||||
}
|
||||
|
||||
return false;
|
||||
})();
|
||||
+50
@@ -0,0 +1,50 @@
|
||||
{
|
||||
"name": "supports-color",
|
||||
"version": "0.2.0",
|
||||
"description": "Detect whether a terminal supports color",
|
||||
"license": "MIT",
|
||||
"repository": "sindresorhus/supports-color",
|
||||
"bin": {
|
||||
"supports-color": "cli.js"
|
||||
},
|
||||
"author": {
|
||||
"name": "Sindre Sorhus",
|
||||
"email": "sindresorhus@gmail.com",
|
||||
"url": "http://sindresorhus.com"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
},
|
||||
"scripts": {
|
||||
"test": "mocha"
|
||||
},
|
||||
"files": [
|
||||
"index.js",
|
||||
"cli.js"
|
||||
],
|
||||
"keywords": [
|
||||
"cli",
|
||||
"bin",
|
||||
"color",
|
||||
"colour",
|
||||
"colors",
|
||||
"terminal",
|
||||
"console",
|
||||
"cli",
|
||||
"ansi",
|
||||
"styles",
|
||||
"tty",
|
||||
"rgb",
|
||||
"256",
|
||||
"shell",
|
||||
"xterm",
|
||||
"command-line",
|
||||
"support",
|
||||
"supports",
|
||||
"capability",
|
||||
"detect"
|
||||
],
|
||||
"devDependencies": {
|
||||
"mocha": "*"
|
||||
}
|
||||
}
|
||||
+44
@@ -0,0 +1,44 @@
|
||||
# supports-color [](https://travis-ci.org/sindresorhus/supports-color)
|
||||
|
||||
> Detect whether a terminal supports color
|
||||
|
||||
|
||||
## Install
|
||||
|
||||
```sh
|
||||
$ npm install --save supports-color
|
||||
```
|
||||
|
||||
|
||||
## Usage
|
||||
|
||||
```js
|
||||
var supportsColor = require('supports-color');
|
||||
|
||||
if (supportsColor) {
|
||||
console.log('Terminal supports color');
|
||||
}
|
||||
```
|
||||
|
||||
It obeys the `--color` and `--no-color` CLI flags.
|
||||
|
||||
|
||||
## CLI
|
||||
|
||||
```sh
|
||||
$ npm install --global supports-color
|
||||
```
|
||||
|
||||
```sh
|
||||
$ supports-color --help
|
||||
|
||||
Usage
|
||||
$ supports-color
|
||||
|
||||
# Exits with code 0 if color is supported and 1 if not
|
||||
```
|
||||
|
||||
|
||||
## License
|
||||
|
||||
MIT © [Sindre Sorhus](http://sindresorhus.com)
|
||||
+37
@@ -0,0 +1,37 @@
|
||||
{
|
||||
"name": "px2rem",
|
||||
"description": "According to one stylesheet, generate rem version and @1x, @2x and @3x stylesheet",
|
||||
"version": "0.5.0",
|
||||
"homepage": "https://github.com/songsiqi/px2rem",
|
||||
"author": "songsiqi <songsiqi2006@126.com>",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git@github.com:songsiqi/px2rem.git"
|
||||
},
|
||||
"dependencies": {
|
||||
"css": "~2.2.0",
|
||||
"extend": "~3.0.0",
|
||||
"commander": "~2.6.0",
|
||||
"chalk": "~0.5.1",
|
||||
"fs-extra": "~0.16.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"istanbul": "^0.3.6",
|
||||
"coveralls": "^2.10.0",
|
||||
"mocha": "^2.1.0"
|
||||
},
|
||||
"bin": {
|
||||
"px2rem": "./bin/px2rem.js"
|
||||
},
|
||||
"scripts": {
|
||||
"test": "mocha",
|
||||
"cover": "node node_modules/.bin/istanbul cover ./node_modules/.bin/_mocha -- --reporter dot"
|
||||
},
|
||||
"main": "index.js",
|
||||
"keywords": [
|
||||
"3x",
|
||||
"rem",
|
||||
"px2rem"
|
||||
],
|
||||
"license": "MIT"
|
||||
}
|
||||
+119
@@ -0,0 +1,119 @@
|
||||
/* normal */
|
||||
body {
|
||||
background: #eee;
|
||||
color: #888; /* color is gray */
|
||||
border: 1px solid; /*no*/
|
||||
height: 20px; /* px */
|
||||
padding: 6px; /*px*/
|
||||
-webkit-animation: anim1 linear infinite;
|
||||
}
|
||||
.header, .footer span {
|
||||
width: 100%;
|
||||
height: 20px;
|
||||
margin: 10px;
|
||||
font-size: 28px; /*px*/
|
||||
animation: anim2 linear infinite;
|
||||
}
|
||||
.main {
|
||||
height: 400px;
|
||||
}
|
||||
.sidebar {
|
||||
margin: 0;
|
||||
height: 0px;
|
||||
line-height: 0px; /*px*/
|
||||
width: 40px;
|
||||
-webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.12);
|
||||
/* decimal */
|
||||
padding: 24.5px 24px 0;
|
||||
/* Data URI contains `px` */
|
||||
background: 24px 12px url(data:image/png;base64,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);
|
||||
}
|
||||
|
||||
@-webkit-keyframes anim1 {
|
||||
0%, 100% {
|
||||
-webkit-transform: none;
|
||||
}
|
||||
20%, 60% {
|
||||
-webkit-transform: rotate(-45deg);
|
||||
}
|
||||
40%, 80% {
|
||||
-webkit-transform: rotate(45deg);
|
||||
}
|
||||
}
|
||||
@keyframes anim2 {
|
||||
0% {
|
||||
height: 75px; /*px*/
|
||||
width: 75px;
|
||||
border: 1px solid #ddd; /*no*/
|
||||
}
|
||||
100% {
|
||||
height: 150px;
|
||||
width: 150px;
|
||||
border: 2px solid #ddd; /*no*/
|
||||
}
|
||||
}
|
||||
|
||||
/* media query */
|
||||
@media only screen and (min-device-width: 241px) and (max-device-width: 360px) {
|
||||
/* normal */
|
||||
body {
|
||||
background: #eee;
|
||||
color: #888; /* color is gray */
|
||||
border: 1px solid; /*no*/
|
||||
height: 20px; /* px */
|
||||
padding: 6px; /*px*/
|
||||
-webkit-animation: anim3 linear infinite;
|
||||
}
|
||||
.header, .footer span {
|
||||
width: 100%;
|
||||
height: 20px;
|
||||
margin: 10px;
|
||||
font-size: 28px; /*px*/
|
||||
animation: anim4 linear infinite;
|
||||
}
|
||||
.main {
|
||||
height: 400px;
|
||||
}
|
||||
.sidebar {
|
||||
margin: 0;
|
||||
height: 0px;
|
||||
line-height: 0px; /*px*/
|
||||
width: 40px;
|
||||
-webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.12);
|
||||
/* decimal */
|
||||
padding: 24.5px 24px 0;
|
||||
/* Data URI contains `px` */
|
||||
background: 24px 12px url(data:image/png;base64,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);
|
||||
}
|
||||
.footer {
|
||||
height: 100px; /*px*/
|
||||
}
|
||||
|
||||
@-webkit-keyframes anim3 {
|
||||
0%, 100% {
|
||||
-webkit-transform: none;
|
||||
}
|
||||
20%, 60% {
|
||||
-webkit-transform: rotate(-45deg);
|
||||
}
|
||||
40%, 80% {
|
||||
-webkit-transform: rotate(45deg);
|
||||
}
|
||||
}
|
||||
@keyframes anim4 {
|
||||
0% {
|
||||
height: 75px;
|
||||
width: 75px;
|
||||
border: 1px solid #ddd; /*no*/
|
||||
}
|
||||
100% {
|
||||
height: 150px;
|
||||
width: 150px;
|
||||
border: 2px solid #ddd; /*no*/
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
height: 100px; /*px*/
|
||||
}
|
||||
+119
@@ -0,0 +1,119 @@
|
||||
/* normal */
|
||||
body {
|
||||
background: #eee;
|
||||
color: #888; /* color is gray */
|
||||
border: 1px solid; /*no*/
|
||||
height: 30px; /* px */
|
||||
padding: 9px; /*px*/
|
||||
-webkit-animation: anim1 linear infinite;
|
||||
}
|
||||
.header, .footer span {
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
margin: 15px;
|
||||
font-size: 42px; /*px*/
|
||||
animation: anim2 linear infinite;
|
||||
}
|
||||
.main {
|
||||
height: 600px;
|
||||
}
|
||||
.sidebar {
|
||||
margin: 0;
|
||||
height: 0px;
|
||||
line-height: 0px; /*px*/
|
||||
width: 60px;
|
||||
-webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.12);
|
||||
/* decimal */
|
||||
padding: 36.75px 36px 0;
|
||||
/* Data URI contains `px` */
|
||||
background: 36px 18px url(data:image/png;base64,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);
|
||||
}
|
||||
|
||||
@-webkit-keyframes anim1 {
|
||||
0%, 100% {
|
||||
-webkit-transform: none;
|
||||
}
|
||||
20%, 60% {
|
||||
-webkit-transform: rotate(-45deg);
|
||||
}
|
||||
40%, 80% {
|
||||
-webkit-transform: rotate(45deg);
|
||||
}
|
||||
}
|
||||
@keyframes anim2 {
|
||||
0% {
|
||||
height: 112.5px; /*px*/
|
||||
width: 112.5px;
|
||||
border: 1px solid #ddd; /*no*/
|
||||
}
|
||||
100% {
|
||||
height: 225px;
|
||||
width: 225px;
|
||||
border: 2px solid #ddd; /*no*/
|
||||
}
|
||||
}
|
||||
|
||||
/* media query */
|
||||
@media only screen and (min-device-width: 241px) and (max-device-width: 360px) {
|
||||
/* normal */
|
||||
body {
|
||||
background: #eee;
|
||||
color: #888; /* color is gray */
|
||||
border: 1px solid; /*no*/
|
||||
height: 30px; /* px */
|
||||
padding: 9px; /*px*/
|
||||
-webkit-animation: anim3 linear infinite;
|
||||
}
|
||||
.header, .footer span {
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
margin: 15px;
|
||||
font-size: 42px; /*px*/
|
||||
animation: anim4 linear infinite;
|
||||
}
|
||||
.main {
|
||||
height: 600px;
|
||||
}
|
||||
.sidebar {
|
||||
margin: 0;
|
||||
height: 0px;
|
||||
line-height: 0px; /*px*/
|
||||
width: 60px;
|
||||
-webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.12);
|
||||
/* decimal */
|
||||
padding: 36.75px 36px 0;
|
||||
/* Data URI contains `px` */
|
||||
background: 36px 18px url(data:image/png;base64,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);
|
||||
}
|
||||
.footer {
|
||||
height: 150px; /*px*/
|
||||
}
|
||||
|
||||
@-webkit-keyframes anim3 {
|
||||
0%, 100% {
|
||||
-webkit-transform: none;
|
||||
}
|
||||
20%, 60% {
|
||||
-webkit-transform: rotate(-45deg);
|
||||
}
|
||||
40%, 80% {
|
||||
-webkit-transform: rotate(45deg);
|
||||
}
|
||||
}
|
||||
@keyframes anim4 {
|
||||
0% {
|
||||
height: 112.5px; /*px*/
|
||||
width: 112.5px;
|
||||
border: 1px solid #ddd; /*no*/
|
||||
}
|
||||
100% {
|
||||
height: 225px;
|
||||
width: 225px;
|
||||
border: 2px solid #ddd; /*no*/
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
height: 150px; /*px*/
|
||||
}
|
||||
+141
@@ -0,0 +1,141 @@
|
||||
/* normal */
|
||||
|
||||
body {
|
||||
background: #eee;
|
||||
color: #888;
|
||||
/* color is gray */
|
||||
border: 1px solid;
|
||||
height: 10px;
|
||||
padding: 3px;
|
||||
-webkit-animation: anim1 linear infinite;
|
||||
}
|
||||
|
||||
.header,
|
||||
.footer span {
|
||||
width: 100%;
|
||||
height: 10px;
|
||||
margin: 5px;
|
||||
font-size: 14px;
|
||||
animation: anim2 linear infinite;
|
||||
}
|
||||
|
||||
.main {
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
margin: 0;
|
||||
height: 0;
|
||||
line-height: 0;
|
||||
width: 20px;
|
||||
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12);
|
||||
/* decimal */
|
||||
padding: 12.25px 12px 0;
|
||||
/* Data URI contains `px` */
|
||||
background: 12px 6px url(data:image/png;base64,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);
|
||||
}
|
||||
|
||||
@-webkit-keyframes anim1 {
|
||||
0%, 100% {
|
||||
-webkit-transform: none;
|
||||
}
|
||||
|
||||
20%, 60% {
|
||||
-webkit-transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
40%, 80% {
|
||||
-webkit-transform: rotate(45deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes anim2 {
|
||||
0% {
|
||||
height: 37.5px;
|
||||
width: 37.5px;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
|
||||
100% {
|
||||
height: 75px;
|
||||
width: 75px;
|
||||
border: 2px solid #ddd;
|
||||
}
|
||||
}
|
||||
|
||||
/* media query */
|
||||
|
||||
@media only screen and (min-device-width: 241px) and (max-device-width: 360px) {
|
||||
/* normal */
|
||||
|
||||
body {
|
||||
background: #eee;
|
||||
color: #888;
|
||||
/* color is gray */
|
||||
border: 1px solid;
|
||||
height: 10px;
|
||||
padding: 3px;
|
||||
-webkit-animation: anim3 linear infinite;
|
||||
}
|
||||
|
||||
.header,
|
||||
.footer span {
|
||||
width: 100%;
|
||||
height: 10px;
|
||||
margin: 5px;
|
||||
font-size: 14px;
|
||||
animation: anim4 linear infinite;
|
||||
}
|
||||
|
||||
.main {
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
margin: 0;
|
||||
height: 0;
|
||||
line-height: 0;
|
||||
width: 20px;
|
||||
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12);
|
||||
/* decimal */
|
||||
padding: 12.25px 12px 0;
|
||||
/* Data URI contains `px` */
|
||||
background: 12px 6px url(data:image/png;base64,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);
|
||||
}
|
||||
|
||||
.footer {
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
@-webkit-keyframes anim3 {
|
||||
0%, 100% {
|
||||
-webkit-transform: none;
|
||||
}
|
||||
|
||||
20%, 60% {
|
||||
-webkit-transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
40%, 80% {
|
||||
-webkit-transform: rotate(45deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes anim4 {
|
||||
0% {
|
||||
height: 37.5px;
|
||||
width: 37.5px;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
|
||||
100% {
|
||||
height: 75px;
|
||||
width: 75px;
|
||||
border: 2px solid #ddd;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
height: 50px;
|
||||
}
|
||||
+141
@@ -0,0 +1,141 @@
|
||||
/* normal */
|
||||
|
||||
body {
|
||||
background: #eee;
|
||||
color: #888;
|
||||
/* color is gray */
|
||||
border: 1px solid;
|
||||
height: 20px;
|
||||
padding: 6px;
|
||||
-webkit-animation: anim1 linear infinite;
|
||||
}
|
||||
|
||||
.header,
|
||||
.footer span {
|
||||
width: 100%;
|
||||
height: 20px;
|
||||
margin: 10px;
|
||||
font-size: 28px;
|
||||
animation: anim2 linear infinite;
|
||||
}
|
||||
|
||||
.main {
|
||||
height: 400px;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
margin: 0;
|
||||
height: 0;
|
||||
line-height: 0;
|
||||
width: 40px;
|
||||
-webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.12);
|
||||
/* decimal */
|
||||
padding: 24.5px 24px 0;
|
||||
/* Data URI contains `px` */
|
||||
background: 24px 12px url(data:image/png;base64,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);
|
||||
}
|
||||
|
||||
@-webkit-keyframes anim1 {
|
||||
0%, 100% {
|
||||
-webkit-transform: none;
|
||||
}
|
||||
|
||||
20%, 60% {
|
||||
-webkit-transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
40%, 80% {
|
||||
-webkit-transform: rotate(45deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes anim2 {
|
||||
0% {
|
||||
height: 75px;
|
||||
width: 75px;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
|
||||
100% {
|
||||
height: 150px;
|
||||
width: 150px;
|
||||
border: 2px solid #ddd;
|
||||
}
|
||||
}
|
||||
|
||||
/* media query */
|
||||
|
||||
@media only screen and (min-device-width: 241px) and (max-device-width: 360px) {
|
||||
/* normal */
|
||||
|
||||
body {
|
||||
background: #eee;
|
||||
color: #888;
|
||||
/* color is gray */
|
||||
border: 1px solid;
|
||||
height: 20px;
|
||||
padding: 6px;
|
||||
-webkit-animation: anim3 linear infinite;
|
||||
}
|
||||
|
||||
.header,
|
||||
.footer span {
|
||||
width: 100%;
|
||||
height: 20px;
|
||||
margin: 10px;
|
||||
font-size: 28px;
|
||||
animation: anim4 linear infinite;
|
||||
}
|
||||
|
||||
.main {
|
||||
height: 400px;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
margin: 0;
|
||||
height: 0;
|
||||
line-height: 0;
|
||||
width: 40px;
|
||||
-webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.12);
|
||||
/* decimal */
|
||||
padding: 24.5px 24px 0;
|
||||
/* Data URI contains `px` */
|
||||
background: 24px 12px url(data:image/png;base64,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);
|
||||
}
|
||||
|
||||
.footer {
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
@-webkit-keyframes anim3 {
|
||||
0%, 100% {
|
||||
-webkit-transform: none;
|
||||
}
|
||||
|
||||
20%, 60% {
|
||||
-webkit-transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
40%, 80% {
|
||||
-webkit-transform: rotate(45deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes anim4 {
|
||||
0% {
|
||||
height: 75px;
|
||||
width: 75px;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
|
||||
100% {
|
||||
height: 150px;
|
||||
width: 150px;
|
||||
border: 2px solid #ddd;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
height: 100px;
|
||||
}
|
||||
+141
@@ -0,0 +1,141 @@
|
||||
/* normal */
|
||||
|
||||
body {
|
||||
background: #eee;
|
||||
color: #888;
|
||||
/* color is gray */
|
||||
border: 1px solid;
|
||||
height: 30px;
|
||||
padding: 9px;
|
||||
-webkit-animation: anim1 linear infinite;
|
||||
}
|
||||
|
||||
.header,
|
||||
.footer span {
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
margin: 15px;
|
||||
font-size: 42px;
|
||||
animation: anim2 linear infinite;
|
||||
}
|
||||
|
||||
.main {
|
||||
height: 600px;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
margin: 0;
|
||||
height: 0;
|
||||
line-height: 0;
|
||||
width: 60px;
|
||||
-webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.12);
|
||||
/* decimal */
|
||||
padding: 36.75px 36px 0;
|
||||
/* Data URI contains `px` */
|
||||
background: 36px 18px url(data:image/png;base64,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);
|
||||
}
|
||||
|
||||
@-webkit-keyframes anim1 {
|
||||
0%, 100% {
|
||||
-webkit-transform: none;
|
||||
}
|
||||
|
||||
20%, 60% {
|
||||
-webkit-transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
40%, 80% {
|
||||
-webkit-transform: rotate(45deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes anim2 {
|
||||
0% {
|
||||
height: 112.5px;
|
||||
width: 112.5px;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
|
||||
100% {
|
||||
height: 225px;
|
||||
width: 225px;
|
||||
border: 2px solid #ddd;
|
||||
}
|
||||
}
|
||||
|
||||
/* media query */
|
||||
|
||||
@media only screen and (min-device-width: 241px) and (max-device-width: 360px) {
|
||||
/* normal */
|
||||
|
||||
body {
|
||||
background: #eee;
|
||||
color: #888;
|
||||
/* color is gray */
|
||||
border: 1px solid;
|
||||
height: 30px;
|
||||
padding: 9px;
|
||||
-webkit-animation: anim3 linear infinite;
|
||||
}
|
||||
|
||||
.header,
|
||||
.footer span {
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
margin: 15px;
|
||||
font-size: 42px;
|
||||
animation: anim4 linear infinite;
|
||||
}
|
||||
|
||||
.main {
|
||||
height: 600px;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
margin: 0;
|
||||
height: 0;
|
||||
line-height: 0;
|
||||
width: 60px;
|
||||
-webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.12);
|
||||
/* decimal */
|
||||
padding: 36.75px 36px 0;
|
||||
/* Data URI contains `px` */
|
||||
background: 36px 18px url(data:image/png;base64,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);
|
||||
}
|
||||
|
||||
.footer {
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
@-webkit-keyframes anim3 {
|
||||
0%, 100% {
|
||||
-webkit-transform: none;
|
||||
}
|
||||
|
||||
20%, 60% {
|
||||
-webkit-transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
40%, 80% {
|
||||
-webkit-transform: rotate(45deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes anim4 {
|
||||
0% {
|
||||
height: 112.5px;
|
||||
width: 112.5px;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
|
||||
100% {
|
||||
height: 225px;
|
||||
width: 225px;
|
||||
border: 2px solid #ddd;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
height: 150px;
|
||||
}
|
||||
+211
@@ -0,0 +1,211 @@
|
||||
/* normal */
|
||||
|
||||
body {
|
||||
background: #eee;
|
||||
color: #888;
|
||||
/* color is gray */
|
||||
border: 1px solid;
|
||||
-webkit-animation: anim1 linear infinite;
|
||||
}
|
||||
|
||||
[data-dpr="1"] body {
|
||||
height: 10px;
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
[data-dpr="2"] body {
|
||||
height: 20px;
|
||||
padding: 6px;
|
||||
}
|
||||
|
||||
[data-dpr="3"] body {
|
||||
height: 30px;
|
||||
padding: 9px;
|
||||
}
|
||||
|
||||
.header,
|
||||
.footer span {
|
||||
width: 100%;
|
||||
height: 0.266667rem;
|
||||
margin: 0.133333rem;
|
||||
animation: anim2 linear infinite;
|
||||
}
|
||||
|
||||
[data-dpr="1"] .header,
|
||||
[data-dpr="1"] .footer span {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
[data-dpr="2"] .header,
|
||||
[data-dpr="2"] .footer span {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
[data-dpr="3"] .header,
|
||||
[data-dpr="3"] .footer span {
|
||||
font-size: 42px;
|
||||
}
|
||||
|
||||
.main {
|
||||
height: 5.333333rem;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
margin: 0;
|
||||
height: 0;
|
||||
line-height: 0;
|
||||
width: 0.533333rem;
|
||||
-webkit-box-shadow: 0 0.026667rem 0.026667rem rgba(0, 0, 0, 0.12);
|
||||
/* decimal */
|
||||
padding: 0.326667rem 0.32rem 0;
|
||||
/* Data URI contains `px` */
|
||||
background: 0.32rem 0.16rem url(data:image/png;base64,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);
|
||||
}
|
||||
|
||||
@-webkit-keyframes anim1 {
|
||||
0%, 100% {
|
||||
-webkit-transform: none;
|
||||
}
|
||||
|
||||
20%, 60% {
|
||||
-webkit-transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
40%, 80% {
|
||||
-webkit-transform: rotate(45deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes anim2 {
|
||||
0% {
|
||||
height: 1rem;
|
||||
width: 1rem;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
|
||||
100% {
|
||||
height: 2rem;
|
||||
width: 2rem;
|
||||
border: 2px solid #ddd;
|
||||
}
|
||||
}
|
||||
|
||||
/* media query */
|
||||
|
||||
@media only screen and (min-device-width: 241px) and (max-device-width: 360px) {
|
||||
/* normal */
|
||||
|
||||
body {
|
||||
background: #eee;
|
||||
color: #888;
|
||||
/* color is gray */
|
||||
border: 1px solid;
|
||||
-webkit-animation: anim3 linear infinite;
|
||||
}
|
||||
|
||||
[data-dpr="1"] body {
|
||||
height: 10px;
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
[data-dpr="2"] body {
|
||||
height: 20px;
|
||||
padding: 6px;
|
||||
}
|
||||
|
||||
[data-dpr="3"] body {
|
||||
height: 30px;
|
||||
padding: 9px;
|
||||
}
|
||||
|
||||
.header,
|
||||
.footer span {
|
||||
width: 100%;
|
||||
height: 0.266667rem;
|
||||
margin: 0.133333rem;
|
||||
animation: anim4 linear infinite;
|
||||
}
|
||||
|
||||
[data-dpr="1"] .header,
|
||||
[data-dpr="1"] .footer span {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
[data-dpr="2"] .header,
|
||||
[data-dpr="2"] .footer span {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
[data-dpr="3"] .header,
|
||||
[data-dpr="3"] .footer span {
|
||||
font-size: 42px;
|
||||
}
|
||||
|
||||
.main {
|
||||
height: 5.333333rem;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
margin: 0;
|
||||
height: 0;
|
||||
line-height: 0;
|
||||
width: 0.533333rem;
|
||||
-webkit-box-shadow: 0 0.026667rem 0.026667rem rgba(0, 0, 0, 0.12);
|
||||
/* decimal */
|
||||
padding: 0.326667rem 0.32rem 0;
|
||||
/* Data URI contains `px` */
|
||||
background: 0.32rem 0.16rem url(data:image/png;base64,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);
|
||||
}
|
||||
|
||||
[data-dpr="1"] .footer {
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
[data-dpr="2"] .footer {
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
[data-dpr="3"] .footer {
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
@-webkit-keyframes anim3 {
|
||||
0%, 100% {
|
||||
-webkit-transform: none;
|
||||
}
|
||||
|
||||
20%, 60% {
|
||||
-webkit-transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
40%, 80% {
|
||||
-webkit-transform: rotate(45deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes anim4 {
|
||||
0% {
|
||||
height: 1rem;
|
||||
width: 1rem;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
|
||||
100% {
|
||||
height: 2rem;
|
||||
width: 2rem;
|
||||
border: 2px solid #ddd;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[data-dpr="1"] .footer {
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
[data-dpr="2"] .footer {
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
[data-dpr="3"] .footer {
|
||||
height: 150px;
|
||||
}
|
||||
+64
@@ -0,0 +1,64 @@
|
||||
var assert = require('assert');
|
||||
var Px2rem = require('../lib/px2rem');
|
||||
var path = require('path');
|
||||
var fs = require('fs');
|
||||
|
||||
describe('should work with @2x origin css file', function () {
|
||||
var px2remIns = new Px2rem(/*{remUnit: 75, baseDpr: 2}*/);
|
||||
var srcPath = path.join(__dirname, 'assets/test.2x.css');
|
||||
var srcText = fs.readFileSync(srcPath, {encoding: 'utf8'});
|
||||
|
||||
it('[default] should output right rem file', function () {
|
||||
var expectedPath = path.join(__dirname, 'output/default.rem.css');
|
||||
var outputText = px2remIns.generateRem(srcText);
|
||||
assert.equal(outputText, fs.readFileSync(expectedPath, {encoding: 'utf8'}));
|
||||
});
|
||||
|
||||
it('should output right @1x file', function () {
|
||||
var expectedPath = path.join(__dirname, 'output/default.1x.css');
|
||||
var outputText = px2remIns.generateThree(srcText, 1);
|
||||
assert.equal(outputText, fs.readFileSync(expectedPath, {encoding: 'utf8'}));
|
||||
});
|
||||
|
||||
it('should output right @2x file', function () {
|
||||
var expectedPath = path.join(__dirname, 'output/default.2x.css');
|
||||
var outputText = px2remIns.generateThree(srcText, 2);
|
||||
assert.equal(outputText, fs.readFileSync(expectedPath, {encoding: 'utf8'}));
|
||||
});
|
||||
|
||||
it('should output right @3x file', function () {
|
||||
var expectedPath = path.join(__dirname, 'output/default.3x.css');
|
||||
var outputText = px2remIns.generateThree(srcText, 3);
|
||||
assert.equal(outputText, fs.readFileSync(expectedPath, {encoding: 'utf8'}));
|
||||
});
|
||||
});
|
||||
|
||||
describe('should work with @3x origin css file', function () {
|
||||
var px2remIns = new Px2rem({remUnit: 112.5, baseDpr: 3});
|
||||
var srcPath = path.join(__dirname, 'assets/test.3x.css');
|
||||
var srcText = fs.readFileSync(srcPath, {encoding: 'utf8'});
|
||||
|
||||
it('[default] should output right rem file', function () {
|
||||
var expectedPath = path.join(__dirname, 'output/default.rem.css');
|
||||
var outputText = px2remIns.generateRem(srcText);
|
||||
assert.equal(outputText, fs.readFileSync(expectedPath, {encoding: 'utf8'}));
|
||||
});
|
||||
|
||||
it('should output right @1x file', function () {
|
||||
var expectedPath = path.join(__dirname, 'output/default.1x.css');
|
||||
var outputText = px2remIns.generateThree(srcText, 1);
|
||||
assert.equal(outputText, fs.readFileSync(expectedPath, {encoding: 'utf8'}));
|
||||
});
|
||||
|
||||
it('should output right @2x file', function () {
|
||||
var expectedPath = path.join(__dirname, 'output/default.2x.css');
|
||||
var outputText = px2remIns.generateThree(srcText, 2);
|
||||
assert.equal(outputText, fs.readFileSync(expectedPath, {encoding: 'utf8'}));
|
||||
});
|
||||
|
||||
it('should output right @3x file', function () {
|
||||
var expectedPath = path.join(__dirname, 'output/default.3x.css');
|
||||
var outputText = px2remIns.generateThree(srcText, 3);
|
||||
assert.equal(outputText, fs.readFileSync(expectedPath, {encoding: 'utf8'}));
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user