jaywcjlove / stylus-px2rem Goto Github PK

View Code? Open in Web Editor NEW

43.0 3.0 4.0 101 KB

Stylus convert px to rem in css files with optional fallback to px.

Home Page: https://jaywcjlove.github.io/stylus-px2rem

CSS 10.39% JavaScript 34.84% Stylus 54.77%

stylus stylus-px2rem css-files rems

stylus-px2rem's Introduction

stylus-px2rem

stylus convert px to rem in css files with optional fallback to px.

Getting Started

If you haven't used Stylus before, be sure to check out the Getting Started guide. Once you're familiar with Stylus, you may install this plugin with this command:

npm install stylus-px2rem --save-dev

Once the plugin has been installed, it may be you can make your "Stylus" run xx.styl it output CSS:

Note

1px will be ignored for experience, you can override it with define your number named px2rem_ignore_limit.
If you want to preserve px value in some case(html element for example), use quote like font-size '16px'.

Input/Output

Input

@import "stylus-px2rem"
div 
    margin 24px 24px
    font-size 14px
    padding-bottom 12px
    width 100px
    height 100%

Output

div{
    margin:1.5rem 1.5rem;
    font-size:.875rem;
    padding-bottom:.75rem;
    width:6.25rem;
    height:6.25rem
}

Example Usage

Full convert, html-font-size default 10px, You Can set it up. This setting will not be converted font-size 10px!important.

@import "stylus-px2rem"
div 
    margin 24px 24px
    font-size 14px
    padding-bottom 12px
    width 100px
    height 100%

Partial convert

@import 'stylus-px2rem/mixins'
@import 'stylus-px2rem/font-size'
@import 'stylus-px2rem/border'
@import 'stylus-px2rem/top'
@import 'stylus-px2rem/left'
@import 'stylus-px2rem/right'
@import 'stylus-px2rem/bottom'
@import 'stylus-px2rem/margin'
@import 'stylus-px2rem/padding'
@import 'stylus-px2rem/width'
@import 'stylus-px2rem/height'
@import 'stylus-px2rem/min-height'
@import 'stylus-px2rem/max-height'
@import 'stylus-px2rem/min-width'
@import 'stylus-px2rem/max-width'
@import 'stylus-px2rem/line-height'
html-font-size = 10px;

div 
    margin 24px 24px
    font-size 14px
    padding-bottom 12px
    width 100px
    height 100%

You can include stylus-px2rem as a normal stylus plugin. Basic example below:

var stylus = require('stylus');
var px2rem = require('stylus-px2rem');

stylus(css)
  .use(px2rem())
  .render(function(err, output){
    console.log(output);
  });

With Gulp Use

With Gulp Use stylus-px2rem, Add px2rem() in use.

var gulp = require('gulp');
var gutil = require('gulp-util');
var stylus = require('gulp-stylus');
var px2rem = require('stylus-px2rem');
var autoprefixer = require('gulp-autoprefixer');
var browserslist = ['Android 2.3', 'Android >= 4', 'Chrome >= 20', 'Firefox >= 24', 'Explorer >= 8', 'iOS >= 6', 'Opera >= 12', 'Safari >= 6'];


gulp.task('default', function() {
    gulp.src('./public/styl/*.styl')
        .pipe(stylus({
            use:[px2rem()],
            compress:true
        }))
        .pipe(autoprefixer({
            browsers: browserslist,
            cascade: false
        }).on('error',gutil.log))
        .pipe(gulp.dest('./public/css'));
});

index.styl

@import 'stylus-px2rem'
.banner{
    height 140px
    font-size 24px
}

With Plugin Use

stylus -u stylus-px2rem index.styl

index.styl

@import "stylus-px2rem"
/* or Partial convert */
@import 'stylus-px2rem/mixins'
@import 'stylus-px2rem/font-size'
@import 'stylus-px2rem/border'
@import 'stylus-px2rem/margin'

@import 'node_modules/stylus-px2rem/lib/stylus-px2rem/mixins'
@import 'node_modules/stylus-px2rem/lib/stylus-px2rem/font-size'
@import 'node_modules/stylus-px2rem/lib/stylus-px2rem/border'
@import 'node_modules/stylus-px2rem/lib/stylus-px2rem/margin'
@import 'node_modules/stylus-px2rem/lib/stylus-px2rem/padding'
@import 'node_modules/stylus-px2rem/lib/stylus-px2rem/width'
@import 'node_modules/stylus-px2rem/lib/stylus-px2rem/height'
@import 'node_modules/stylus-px2rem/lib/stylus-px2rem/line-height'

Contributors

As always, thanks to our amazing contributors!

Made with contributors.

License

MIT © Kenny Wong

stylus-px2rem's People

Contributors

Stargazers

Watchers

Forkers

phoenix-yassin roxyhuang oldfu kristinita

stylus-px2rem's Issues

在vue-cli3初始化的项目中报错，无法使用。报错信息如下

error in ./src/components/HelloWorld.vue?vue&type=style&index=0&id=469af010&scoped=true&lang=stylus&

Module build failed (from ./node_modules/stylus-loader/index.js):
ParseError: E:-\project\h5\node_modules_stylus-px2rem@1.0.14@stylus-px2rem\lib\px2rem.js:5:1
1| var plugin = module.exports = function plugin () {
2| 'use strict';
3|
4| return function (style) {
5| style.include(__dirname);
------^
6| };
7| };
8|

expected ":", got "."

at Parser.error (E:\-\project\h5\y\node_modules\stylus\lib\parser.js:259:11)
at Parser.expect (E:\-\project\h5\y\node_modules\stylus\lib\parser.js:287:12)
at Parser.object (E:\-\project\h5\y\node_modules\stylus\lib\parser.js:2106:12)

设置html-font-size无效

最近在学stylus,安装stylus-px2rem使用正常，但是不能设置改变html-font-size
代码如下
//引用stylus-px2rem
@import "~stylus-px2rem/index"
html-font-size = 75px;
能转换成rem,但是好像都是基于16，也并不是10px
望解答，谢谢

看你实例也一样，是16不是默认的10px，请问这样算不算BUG。。。

verbose stack Error

0 info it worked if it ends with ok
1 verbose cli [ 'D:\\software\\nodejs\\node.exe',
1 verbose cli   'D:\\software\\nodejs\\node_modules\\npm\\bin\\npm-cli.js',
1 verbose cli   'run',
1 verbose cli   'compile' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'precompile', 'compile', 'postcompile' ]
5 info precompile [email protected]
6 info compile [email protected]
7 verbose unsafe-perm in lifecycle true
8 info [email protected] Failed to exec compile script
9 verbose stack Error: [email protected] compile: `stylus -u stylus-px2rem -o ./css/main.css compiled/main.styl`
9 verbose stack Exit status 1
9 verbose stack     at EventEmitter.<anonymous> (D:\software\nodejs\node_modules\npm\lib\utils\lifecycle.js:217:16)
9 verbose stack     at emitTwo (events.js:87:13)
9 verbose stack     at EventEmitter.emit (events.js:172:7)
9 verbose stack     at ChildProcess.<anonymous> (D:\software\nodejs\node_modules\npm\lib\utils\spawn.js:24:14)
9 verbose stack     at emitTwo (events.js:87:13)
9 verbose stack     at ChildProcess.emit (events.js:172:7)
9 verbose stack     at maybeClose (internal/child_process.js:827:16)
9 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:211:5)
10 verbose pkgid [email protected]
11 verbose cwd D:\Code\stylus
12 error Windows_NT 6.1.7601
13 error argv "D:\\software\\nodejs\\node.exe" "D:\\software\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "compile"
14 error node v4.4.7
15 error npm  v2.15.8
16 error code ELIFECYCLE
17 error [email protected] compile: `stylus -u stylus-px2rem -o ./css/main.css compiled/main.styl`
17 error Exit status 1
18 error Failed at the [email protected] compile script 'stylus -u stylus-px2rem -o ./css/main.css compiled/main.styl'.
18 error This is most likely a problem with the stylus package,
18 error not with npm itself.
18 error Tell the author that this fails on your system:
18 error     stylus -u stylus-px2rem -o ./css/main.css compiled/main.styl
18 error You can get information on how to open an issue for this project with:
18 error     npm bugs stylus
18 error Or if that isn't available, you can get their info via:
18 error
18 error     npm owner ls stylus
18 error There is likely additional logging output above.
19 verbose exit [ 1, true ]

Problem with mixins

$circlePaddings = 7 19 0

_setCirclePaddings()
	for item, index in $circlePaddings
		&:nth-of-type({index+1})
			.circle-container
				padding-bottom unit(item,px)

[18:31:58] Plumber found unhandled error:
Error in plugin 'gulp-stylus'
Message:
25| value-rem = unit(value ,'rem');
26| }
27| push(values-rem,value-rem)
28| } else {
29| push(values-rem,match('px$',''+value) ? unquote(value) : value)
------------------------------------------------------------------------^
30| }
31| }
32| {prop} : values-rem;

TypeError: expected string, ident or literal, but got unit:0px

Plugin parse variable as number and get error.

Additional research: parser broke when we use the variable in the loop.

jaywcjlove / stylus-px2rem Goto Github PK

stylus-px2rem's Introduction

stylus-px2rem

Getting Started

Note

Input/Output

Example Usage

With Gulp Use

With Plugin Use

Contributors

License

stylus-px2rem's People

Contributors

Stargazers

Watchers

Forkers

stylus-px2rem's Issues

Recommend Projects

Recommend Topics

Recommend Org