first
This commit is contained in:
32
node_modules/postcss-px-to-viewport/CHANGELOG.md
generated
vendored
Normal file
32
node_modules/postcss-px-to-viewport/CHANGELOG.md
generated
vendored
Normal file
@ -0,0 +1,32 @@
|
||||
# Changelog
|
||||
All notable changes to this project will be documented in this file.
|
||||
|
||||
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
|
||||
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
|
||||
|
||||
## [1.1.1] - 2019-07-08
|
||||
|
||||
### Fixed
|
||||
|
||||
- Fixed `rule.source === undefined` from `postcss-modules-values`.
|
||||
|
||||
## [1.1.0] - 2019-02-05
|
||||
|
||||
### Added
|
||||
- `landscape` (Boolean) Adds `@media (orientation: landscape)` with values converted via `landscapeWidth`.
|
||||
- `landscapeUnit` (String) Expected unit for `landscape` option
|
||||
- `landscapeWidth` (Number) Viewport width for landscape orientation.
|
||||
|
||||
### Fixed
|
||||
- `mediaQuery` option if `true` does not mutate its value now, but the rule inside it instead.
|
||||
|
||||
## [1.0.0] - 2019-01-28
|
||||
|
||||
### Added
|
||||
- `replace` option - (Boolean) replaces rules containing `vw` instead of adding fallbacks.
|
||||
- `propList` option - (Array) The properties that can change from `px` to `vw`.
|
||||
- `exclude` option - (Array or Regexp) Ignore some files like `node_modules`.
|
||||
|
||||
### Changed
|
||||
- zero values now remain unitless.
|
||||
- replace regexp is now case sensitive, so if you want to change `px`, then `pX` values won't be changed.
|
74
node_modules/postcss-px-to-viewport/CODE-OF-CONDUCT.md
generated
vendored
Normal file
74
node_modules/postcss-px-to-viewport/CODE-OF-CONDUCT.md
generated
vendored
Normal file
@ -0,0 +1,74 @@
|
||||
## Code of Conduct
|
||||
|
||||
### Our Pledge
|
||||
|
||||
In the interest of fostering an open and welcoming environment, we as
|
||||
contributors and maintainers pledge to making participation in our project and
|
||||
our community a harassment-free experience for everyone, regardless of age, body
|
||||
size, disability, ethnicity, gender identity and expression, level of experience,
|
||||
nationality, personal appearance, race, religion, or sexual identity and
|
||||
orientation.
|
||||
|
||||
### Our Standards
|
||||
|
||||
Examples of behavior that contributes to creating a positive environment
|
||||
include:
|
||||
|
||||
* Using welcoming and inclusive language
|
||||
* Being respectful of differing viewpoints and experiences
|
||||
* Gracefully accepting constructive criticism
|
||||
* Focusing on what is best for the community
|
||||
* Showing empathy towards other community members
|
||||
|
||||
Examples of unacceptable behavior by participants include:
|
||||
|
||||
* The use of sexualized language or imagery and unwelcome sexual attention or
|
||||
advances
|
||||
* Trolling, insulting/derogatory comments, and personal or political attacks
|
||||
* Public or private harassment
|
||||
* Publishing others' private information, such as a physical or electronic
|
||||
address, without explicit permission
|
||||
* Other conduct which could reasonably be considered inappropriate in a
|
||||
professional setting
|
||||
|
||||
### Our Responsibilities
|
||||
|
||||
Project maintainers are responsible for clarifying the standards of acceptable
|
||||
behavior and are expected to take appropriate and fair corrective action in
|
||||
response to any instances of unacceptable behavior.
|
||||
|
||||
Project maintainers have the right and responsibility to remove, edit, or
|
||||
reject comments, commits, code, wiki edits, issues, and other contributions
|
||||
that are not aligned to this Code of Conduct, or to ban temporarily or
|
||||
permanently any contributor for other behaviors that they deem inappropriate,
|
||||
threatening, offensive, or harmful.
|
||||
|
||||
### Scope
|
||||
|
||||
This Code of Conduct applies both within project spaces and in public spaces
|
||||
when an individual is representing the project or its community. Examples of
|
||||
representing a project or community include using an official project e-mail
|
||||
address, posting via an official social media account, or acting as an appointed
|
||||
representative at an online or offline event. Representation of a project may be
|
||||
further defined and clarified by project maintainers.
|
||||
|
||||
### Enforcement
|
||||
|
||||
Instances of abusive, harassing, or otherwise unacceptable behavior may be
|
||||
reported by contacting the project team at codeofconduct@evrone.com. All
|
||||
complaints will be reviewed and investigated and will result in a response that
|
||||
is deemed necessary and appropriate to the circumstances. The project team is
|
||||
obligated to maintain confidentiality with regard to the reporter of an incident.
|
||||
Further details of specific enforcement policies may be posted separately.
|
||||
|
||||
Project maintainers who do not follow or enforce the Code of Conduct in good
|
||||
faith may face temporary or permanent repercussions as determined by other
|
||||
members of the project's leadership.
|
||||
|
||||
### Attribution
|
||||
|
||||
This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
|
||||
available at [http://contributor-covenant.org/version/1/4][version]
|
||||
|
||||
[homepage]: http://contributor-covenant.org
|
||||
[version]: http://contributor-covenant.org/version/1/4/
|
25
node_modules/postcss-px-to-viewport/CONTRIBUTING.md
generated
vendored
Normal file
25
node_modules/postcss-px-to-viewport/CONTRIBUTING.md
generated
vendored
Normal file
@ -0,0 +1,25 @@
|
||||
# Contributing Guidelines
|
||||
|
||||
Thanks for taking the time to contribute!
|
||||
|
||||
The following is a set of guidelines for contributing to this project. These are just guidelines, not rules, so use your best judgement and feel free to propose changes to this document in a pull request.
|
||||
|
||||
## Reporting issues
|
||||
|
||||
Ensure the bug was not already reported by searching on GitHub under issues. If you're unable to find an open issue addressing the bug, open a new issue.
|
||||
|
||||
Please pay attention to the following points while opening an issue:
|
||||
* How to reproduce the issue, step-by-step.
|
||||
* The expected behavior (or what is wrong).
|
||||
* Screenshots for GUI issues.
|
||||
* The application version.
|
||||
* The operating system.
|
||||
|
||||
## Pull Requests
|
||||
|
||||
Pull Requests are always welcome.
|
||||
|
||||
1. When you edit the code, please check the formatting of your code before you `git commit`.
|
||||
2. Ensure the PR description clearly describes the problem and solution. It should include:
|
||||
* The operating system on which you tested.
|
||||
* The relevant issue number, if applicable.
|
21
node_modules/postcss-px-to-viewport/LICENSE
generated
vendored
Normal file
21
node_modules/postcss-px-to-viewport/LICENSE
generated
vendored
Normal file
@ -0,0 +1,21 @@
|
||||
MIT License
|
||||
|
||||
Copyright (c) 2016-2019 Dmitry Karpunin <koderfunk@gmail.com>
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
202
node_modules/postcss-px-to-viewport/README.md
generated
vendored
Normal file
202
node_modules/postcss-px-to-viewport/README.md
generated
vendored
Normal file
@ -0,0 +1,202 @@
|
||||
# postcss-px-to-viewport
|
||||
[](http://badge.fury.io/js/postcss-px-to-viewport)
|
||||
|
||||
English | [中文](README_CN.md)
|
||||
|
||||
A plugin for [PostCSS](https://github.com/postcss/postcss) that generates viewport units (vw, vh, vmin, vmax) from pixel units.
|
||||
|
||||
<a href="https://evrone.com/?utm_source=postcss-px-to-viewport">
|
||||
<img src="https://user-images.githubusercontent.com/417688/34437029-dbfe4ee6-ecab-11e7-9d80-2b274b4149b3.png"
|
||||
alt="Sponsored by Evrone" width="231">
|
||||
</a>
|
||||
|
||||
## Demo
|
||||
|
||||
If your project involves a fixed width, this script will help to convert pixels into viewport units.
|
||||
|
||||
### Input
|
||||
|
||||
```css
|
||||
.class {
|
||||
margin: -10px .5vh;
|
||||
padding: 5vmin 9.5px 1px;
|
||||
border: 3px solid black;
|
||||
border-bottom-width: 1px;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.class2 {
|
||||
border: 1px solid black;
|
||||
margin-bottom: 1px;
|
||||
font-size: 20px;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
@media (min-width: 750px) {
|
||||
.class3 {
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Output
|
||||
```css
|
||||
.class {
|
||||
margin: -3.125vw .5vh;
|
||||
padding: 5vmin 2.96875vw 1px;
|
||||
border: 0.9375vw solid black;
|
||||
border-bottom-width: 1px;
|
||||
font-size: 4.375vw;
|
||||
line-height: 6.25vw;
|
||||
}
|
||||
|
||||
.class2 {
|
||||
border: 1px solid black;
|
||||
margin-bottom: 1px;
|
||||
font-size: 6.25vw;
|
||||
line-height: 9.375vw;
|
||||
}
|
||||
|
||||
@media (min-width: 750px) {
|
||||
.class3 {
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Getting Started
|
||||
|
||||
### Installation
|
||||
Add via npm
|
||||
```
|
||||
$ npm install postcss-px-to-viewport --save-dev
|
||||
```
|
||||
or yarn
|
||||
```
|
||||
$ yarn add -D postcss-px-to-viewport
|
||||
```
|
||||
|
||||
### Usage
|
||||
|
||||
Default Options:
|
||||
```js
|
||||
{
|
||||
unitToConvert: 'px',
|
||||
viewportWidth: 320,
|
||||
unitPrecision: 5,
|
||||
propList: ['*'],
|
||||
viewportUnit: 'vw',
|
||||
fontViewportUnit: 'vw',
|
||||
selectorBlackList: [],
|
||||
minPixelValue: 1,
|
||||
mediaQuery: false,
|
||||
replace: true,
|
||||
exclude: [],
|
||||
landscape: false,
|
||||
landscapeUnit: 'vw',
|
||||
landscapeWidth: 568
|
||||
}
|
||||
```
|
||||
- `unitToConvert` (String) unit to convert, by default, it is px.
|
||||
- `viewportWidth` (Number) The width of the viewport.
|
||||
- `unitPrecision` (Number) The decimal numbers to allow the vw units to grow to.
|
||||
- `propList` (Array) The properties that can change from px to vw.
|
||||
- Values need to be exact matches.
|
||||
- Use wildcard * to enable all properties. Example: ['*']
|
||||
- Use * at the start or end of a word. (['*position*'] will match background-position-y)
|
||||
- Use ! to not match a property. Example: ['*', '!letter-spacing']
|
||||
- Combine the "not" prefix with the other prefixes. Example: ['*', '!font*']
|
||||
- `viewportUnit` (String) Expected units.
|
||||
- `fontViewportUnit` (String) Expected units for font.
|
||||
- `selectorBlackList` (Array) The selectors to ignore and leave as px.
|
||||
- If value is string, it checks to see if selector contains the string.
|
||||
- `['body']` will match `.body-class`
|
||||
- If value is regexp, it checks to see if the selector matches the regexp.
|
||||
- `[/^body$/]` will match `body` but not `.body`
|
||||
- `minPixelValue` (Number) Set the minimum pixel value to replace.
|
||||
- `mediaQuery` (Boolean) Allow px to be converted in media queries.
|
||||
- `replace` (Boolean) replaces rules containing vw instead of adding fallbacks.
|
||||
- `exclude` (Array or Regexp) Ignore some files like 'node_modules'
|
||||
- If value is regexp, will ignore the matches files.
|
||||
- If value is array, the elements of the array are regexp.
|
||||
- `landscape` (Boolean) Adds `@media (orientation: landscape)` with values converted via `landscapeWidth`.
|
||||
- `landscapeUnit` (String) Expected unit for `landscape` option
|
||||
- `landscapeWidth` (Number) Viewport width for landscape orientation.
|
||||
|
||||
#### Use with gulp-postcss
|
||||
|
||||
add to your `gulpfile.js`:
|
||||
```js
|
||||
var gulp = require('gulp');
|
||||
var postcss = require('gulp-postcss');
|
||||
var pxtoviewport = require('postcss-px-to-viewport');
|
||||
|
||||
gulp.task('css', function () {
|
||||
|
||||
var processors = [
|
||||
pxtoviewport({
|
||||
viewportWidth: 320,
|
||||
viewportUnit: 'vmin'
|
||||
})
|
||||
];
|
||||
|
||||
return gulp.src(['build/css/**/*.css'])
|
||||
.pipe(postcss(processors))
|
||||
.pipe(gulp.dest('build/css'));
|
||||
});
|
||||
```
|
||||
|
||||
#### Use with PostCss configuration file
|
||||
|
||||
add to your `postcss.config.js`
|
||||
```js
|
||||
module.exports = {
|
||||
plugins: {
|
||||
...
|
||||
'postcss-px-to-viewport': {
|
||||
// options
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Running the tests
|
||||
|
||||
In order to run tests, you need to install `jasmine-node` globally:
|
||||
```
|
||||
$ npm install jasmine-node -g
|
||||
```
|
||||
Then run the tests via npm script:
|
||||
```
|
||||
$ npm run test
|
||||
```
|
||||
|
||||
## Contributing
|
||||
|
||||
Please read [Code of Conduct](CODE-OF-CONDUCT.md) and [Contributing Guidelines](CONTRIBUTING.md) for submitting pull requests to us.
|
||||
|
||||
## Versioning
|
||||
|
||||
We use [SemVer](http://semver.org/) for versioning. For the versions available, see the [tags on this repository](https://github.com/evrone/postcss-px-to-viewport/tags).
|
||||
|
||||
## Changelog
|
||||
|
||||
The changelog is [here](CHANGELOG.md).
|
||||
|
||||
## Authors
|
||||
|
||||
* [Dmitry Karpunin](https://github.com/KODerFunk) - *Initial work*
|
||||
* [Ivan Bunin](https://github.com/chernobelenkiy)
|
||||
|
||||
See also the list of [contributors](https://github.com/evrone/postcss-px-to-viewport/contributors) who participated in this project.
|
||||
|
||||
## License
|
||||
|
||||
This project is licensed under the [MIT License](LICENSE).
|
||||
|
||||
## Acknowledgments
|
||||
|
||||
* Hat tip to https://github.com/cuth/postcss-pxtorem/ for inspiring us for this project.
|
202
node_modules/postcss-px-to-viewport/README_CN.md
generated
vendored
Normal file
202
node_modules/postcss-px-to-viewport/README_CN.md
generated
vendored
Normal file
@ -0,0 +1,202 @@
|
||||
# postcss-px-to-viewport
|
||||
[](http://badge.fury.io/js/postcss-px-to-viewport)
|
||||
|
||||
[English](README.md) | 中文
|
||||
|
||||
将px单位转换为视口单位的 (vw, vh, vmin, vmax) 的 [PostCSS](https://github.com/postcss/postcss) 插件.
|
||||
|
||||
<a href="https://evrone.com/?utm_source=postcss-px-to-viewport">
|
||||
<img src="https://user-images.githubusercontent.com/417688/34437029-dbfe4ee6-ecab-11e7-9d80-2b274b4149b3.png"
|
||||
alt="Sponsored by Evrone" width="231">
|
||||
</a>
|
||||
|
||||
## 简介
|
||||
|
||||
如果你的样式需要做根据视口大小来调整宽度,这个脚本可以将你CSS中的px单位转化为vw,1vw等于1/100视口宽度。
|
||||
|
||||
### 输入
|
||||
|
||||
```css
|
||||
.class {
|
||||
margin: -10px .5vh;
|
||||
padding: 5vmin 9.5px 1px;
|
||||
border: 3px solid black;
|
||||
border-bottom-width: 1px;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.class2 {
|
||||
border: 1px solid black;
|
||||
margin-bottom: 1px;
|
||||
font-size: 20px;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
@media (min-width: 750px) {
|
||||
.class3 {
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 输出
|
||||
```css
|
||||
.class {
|
||||
margin: -3.125vw .5vh;
|
||||
padding: 5vmin 2.96875vw 1px;
|
||||
border: 0.9375vw solid black;
|
||||
border-bottom-width: 1px;
|
||||
font-size: 4.375vw;
|
||||
line-height: 6.25vw;
|
||||
}
|
||||
|
||||
.class2 {
|
||||
border: 1px solid black;
|
||||
margin-bottom: 1px;
|
||||
font-size: 6.25vw;
|
||||
line-height: 9.375vw;
|
||||
}
|
||||
|
||||
@media (min-width: 750px) {
|
||||
.class3 {
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 上手
|
||||
|
||||
### 安装
|
||||
使用npm安装
|
||||
```
|
||||
$ npm install postcss-px-to-viewport --save-dev
|
||||
```
|
||||
或者使用yarn进行安装
|
||||
```
|
||||
$ yarn add -D postcss-px-to-viewport
|
||||
```
|
||||
|
||||
### 配置参数
|
||||
|
||||
默认参数:
|
||||
```js
|
||||
{
|
||||
unitToConvert: 'px',
|
||||
viewportWidth: 320,
|
||||
unitPrecision: 5,
|
||||
propList: ['*'],
|
||||
viewportUnit: 'vw',
|
||||
fontViewportUnit: 'vw',
|
||||
selectorBlackList: [],
|
||||
minPixelValue: 1,
|
||||
mediaQuery: false,
|
||||
replace: true,
|
||||
exclude: [],
|
||||
landscape: false,
|
||||
landscapeUnit: 'vw',
|
||||
landscapeWidth: 568
|
||||
}
|
||||
```
|
||||
- `unitToConvert` (String) 需要转换的单位,默认为"px"
|
||||
- `viewportWidth` (Number) 设计稿的视口宽度
|
||||
- `unitPrecision` (Number) 单位转换后保留的精度
|
||||
- `propList` (Array) 能转化为vw的属性列表
|
||||
- 传入特定的CSS属性;
|
||||
- 可以传入通配符"*"去匹配所有属性,例如:['*'];
|
||||
- 在属性的前或后添加"*",可以匹配特定的属性. (例如['*position*'] 会匹配 background-position-y)
|
||||
- 在特定属性前加 "!",将不转换该属性的单位 . 例如: ['*', '!letter-spacing'],将不转换letter-spacing
|
||||
- "!" 和 "*"可以组合使用, 例如: ['*', '!font*'],将不转换font-size以及font-weight等属性
|
||||
- `viewportUnit` (String) 希望使用的视口单位
|
||||
- `fontViewportUnit` (String) 字体使用的视口单位
|
||||
- `selectorBlackList` (Array) 需要忽略的CSS选择器,不会转为视口单位,使用原有的px等单位。
|
||||
- 如果传入的值为字符串的话,只要选择器中含有传入值就会被匹配
|
||||
- 例如 `selectorBlackList` 为 `['body']` 的话, 那么 `.body-class` 就会被忽略
|
||||
- 如果传入的值为正则表达式的话,那么就会依据CSS选择器是否匹配该正则
|
||||
- 例如 `selectorBlackList` 为 `[/^body$/]` , 那么 `body` 会被忽略,而 `.body` 不会
|
||||
- `minPixelValue` (Number) 设置最小的转换数值,如果为1的话,只有大于1的值会被转换
|
||||
- `mediaQuery` (Boolean) 媒体查询里的单位是否需要转换单位
|
||||
- `replace` (Boolean) 是否直接更换属性值,而不添加备用属性
|
||||
- `exclude` (Array or Regexp) 忽略某些文件夹下的文件或特定文件,例如 'node_modules' 下的文件
|
||||
- 如果值是一个正则表达式,那么匹配这个正则的文件会被忽略
|
||||
- 如果传入的值是一个数组,那么数组里的值必须为正则
|
||||
- `landscape` (Boolean) 是否添加根据 `landscapeWidth` 生成的媒体查询条件 `@media (orientation: landscape)`
|
||||
- `landscapeUnit` (String) 横屏时使用的单位
|
||||
- `landscapeWidth` (Number) 横屏时使用的视口宽度
|
||||
|
||||
#### 直接在gulp中使用,添加gulp-postcss
|
||||
|
||||
在 `gulpfile.js` 添加如下配置:
|
||||
```js
|
||||
var gulp = require('gulp');
|
||||
var postcss = require('gulp-postcss');
|
||||
var pxtoviewport = require('postcss-px-to-viewport');
|
||||
|
||||
gulp.task('css', function () {
|
||||
|
||||
var processors = [
|
||||
pxtoviewport({
|
||||
viewportWidth: 320,
|
||||
viewportUnit: 'vmin'
|
||||
})
|
||||
];
|
||||
|
||||
return gulp.src(['build/css/**/*.css'])
|
||||
.pipe(postcss(processors))
|
||||
.pipe(gulp.dest('build/css'));
|
||||
});
|
||||
```
|
||||
|
||||
#### 使用PostCss配置文件时
|
||||
|
||||
在`postcss.config.js`添加如下配置
|
||||
```js
|
||||
module.exports = {
|
||||
plugins: {
|
||||
...
|
||||
'postcss-px-to-viewport': {
|
||||
// options
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 测试
|
||||
|
||||
为了跑测试案例, 你需要全局安装 `jasmine-node` :
|
||||
```
|
||||
$ npm install jasmine-node -g
|
||||
```
|
||||
然后输入下面的命令:
|
||||
```
|
||||
$ npm run test
|
||||
```
|
||||
|
||||
## 参与贡献
|
||||
|
||||
在提PR之前,请先阅读 [代码指南](CODE-OF-CONDUCT.md) 和 [贡献指南](CONTRIBUTING.md)
|
||||
|
||||
## 版本跟踪
|
||||
|
||||
使用 [SemVer](http://semver.org/) 做版本跟踪, 可用版本可在[这](https://github.com/evrone/postcss-px-to-viewport/tags)看到
|
||||
|
||||
## Changelog
|
||||
|
||||
变更日志在 [这](CHANGELOG.md).
|
||||
|
||||
## 作者
|
||||
|
||||
* [Dmitry Karpunin](https://github.com/KODerFunk) - *Initial work*
|
||||
* [Ivan Bunin](https://github.com/chernobelenkiy)
|
||||
|
||||
在 [contributors](https://github.com/evrone/postcss-px-to-viewport/contributors) 里可以看到谁参与了本项目.
|
||||
|
||||
## 许可
|
||||
|
||||
本项目使用 [MIT License](LICENSE).
|
||||
|
||||
## 借鉴自
|
||||
|
||||
* 受 https://github.com/cuth/postcss-pxtorem/ 启发有了这个项目
|
15
node_modules/postcss-px-to-viewport/example/index.js
generated
vendored
Normal file
15
node_modules/postcss-px-to-viewport/example/index.js
generated
vendored
Normal file
@ -0,0 +1,15 @@
|
||||
'use strict';
|
||||
|
||||
var fs = require('fs');
|
||||
var postcss = require('postcss');
|
||||
var pxToViewport = require('..');
|
||||
var css = fs.readFileSync('main.css', 'utf8');
|
||||
|
||||
var processedCss = postcss(pxToViewport()).process(css).css;
|
||||
|
||||
fs.writeFile('main-viewport.css', processedCss, function (err) {
|
||||
if (err) {
|
||||
throw err;
|
||||
}
|
||||
console.log('File with viewport units written.');
|
||||
});
|
26
node_modules/postcss-px-to-viewport/example/main-viewport.css
generated
vendored
Normal file
26
node_modules/postcss-px-to-viewport/example/main-viewport.css
generated
vendored
Normal file
@ -0,0 +1,26 @@
|
||||
.class {
|
||||
margin: -3.125vw .5vh;
|
||||
padding: 5vmin 2.96875vw 1px;
|
||||
border: 0.9375vw solid black;
|
||||
border-bottom-width: 1px;
|
||||
font-size: 4.375vw;
|
||||
line-height: 6.25vw;
|
||||
}
|
||||
.class2 {
|
||||
border: 1px solid black;
|
||||
margin-bottom: 1px;
|
||||
font-size: 6.25vw;
|
||||
line-height: 9.375vw;
|
||||
}
|
||||
@media (min-width: 750px) {
|
||||
.class3 {
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
.class {
|
||||
font-size: 16px;
|
||||
}
|
||||
*/
|
26
node_modules/postcss-px-to-viewport/example/main.css
generated
vendored
Normal file
26
node_modules/postcss-px-to-viewport/example/main.css
generated
vendored
Normal file
@ -0,0 +1,26 @@
|
||||
.class {
|
||||
margin: -10px .5vh;
|
||||
padding: 5vmin 9.5px 1px;
|
||||
border: 3px solid black;
|
||||
border-bottom-width: 1px;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
}
|
||||
.class2 {
|
||||
border: 1px solid black;
|
||||
margin-bottom: 1px;
|
||||
font-size: 20px;
|
||||
line-height: 30px;
|
||||
}
|
||||
@media (min-width: 750px) {
|
||||
.class3 {
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
.class {
|
||||
font-size: 16px;
|
||||
}
|
||||
*/
|
153
node_modules/postcss-px-to-viewport/index.js
generated
vendored
Normal file
153
node_modules/postcss-px-to-viewport/index.js
generated
vendored
Normal file
@ -0,0 +1,153 @@
|
||||
'use strict';
|
||||
|
||||
var postcss = require('postcss');
|
||||
var objectAssign = require('object-assign');
|
||||
var { createPropListMatcher } = require('./src/prop-list-matcher');
|
||||
var { getUnitRegexp } = require('./src/pixel-unit-regexp');
|
||||
|
||||
var defaults = {
|
||||
unitToConvert: 'px',
|
||||
viewportWidth: 320,
|
||||
viewportHeight: 568, // not now used; TODO: need for different units and math for different properties
|
||||
unitPrecision: 5,
|
||||
viewportUnit: 'vw',
|
||||
fontViewportUnit: 'vw', // vmin is more suitable.
|
||||
selectorBlackList: [],
|
||||
propList: ['*'],
|
||||
minPixelValue: 1,
|
||||
mediaQuery: false,
|
||||
replace: true,
|
||||
landscape: false,
|
||||
landscapeUnit: 'vw',
|
||||
landscapeWidth: 568
|
||||
};
|
||||
|
||||
module.exports = postcss.plugin('postcss-px-to-viewport', function (options) {
|
||||
|
||||
var opts = objectAssign({}, defaults, options);
|
||||
|
||||
var pxRegex = getUnitRegexp(opts.unitToConvert);
|
||||
var satisfyPropList = createPropListMatcher(opts.propList);
|
||||
var landscapeRules = [];
|
||||
|
||||
return function (css) {
|
||||
css.walkRules(function (rule) {
|
||||
// Add exclude option to ignore some files like 'node_modules'
|
||||
var file = rule.source && rule.source.input.file;
|
||||
|
||||
if (opts.exclude && file) {
|
||||
if (Object.prototype.toString.call(opts.exclude) === '[object RegExp]') {
|
||||
if (isExclude(opts.exclude, file)) return;
|
||||
} else if (Object.prototype.toString.call(opts.exclude) === '[object Array]') {
|
||||
for (let i = 0; i < opts.exclude.length; i++) {
|
||||
if (isExclude(opts.exclude[i], file)) return;
|
||||
}
|
||||
} else {
|
||||
throw new Error('options.exclude should be RegExp or Array.');
|
||||
}
|
||||
}
|
||||
|
||||
if (blacklistedSelector(opts.selectorBlackList, rule.selector)) return;
|
||||
|
||||
if (opts.landscape && !rule.parent.params) {
|
||||
var landscapeRule = rule.clone().removeAll();
|
||||
|
||||
rule.walkDecls(function(decl) {
|
||||
if (decl.value.indexOf(opts.unitToConvert) === -1) return;
|
||||
if (!satisfyPropList(decl.prop)) return;
|
||||
|
||||
landscapeRule.append(decl.clone({
|
||||
value: decl.value.replace(pxRegex, createPxReplace(opts, opts.landscapeUnit, opts.landscapeWidth))
|
||||
}));
|
||||
});
|
||||
|
||||
if (landscapeRule.nodes.length > 0) {
|
||||
landscapeRules.push(landscapeRule);
|
||||
}
|
||||
}
|
||||
|
||||
if (!validateParams(rule.parent.params, opts.mediaQuery)) return;
|
||||
|
||||
rule.walkDecls(function(decl, i) {
|
||||
if (decl.value.indexOf(opts.unitToConvert) === -1) return;
|
||||
if (!satisfyPropList(decl.prop)) return;
|
||||
|
||||
var unit;
|
||||
var size;
|
||||
var params = rule.parent.params;
|
||||
|
||||
if (opts.landscape && params && params.indexOf('landscape') !== -1) {
|
||||
unit = opts.landscapeUnit;
|
||||
size = opts.landscapeWidth;
|
||||
} else {
|
||||
unit = getUnit(decl.prop, opts);
|
||||
size = opts.viewportWidth;
|
||||
}
|
||||
|
||||
var value = decl.value.replace(pxRegex, createPxReplace(opts, unit, size));
|
||||
|
||||
if (declarationExists(decl.parent, decl.prop, value)) return;
|
||||
|
||||
if (opts.replace) {
|
||||
decl.value = value;
|
||||
} else {
|
||||
decl.parent.insertAfter(i, decl.clone({ value: value }));
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
if (landscapeRules.length > 0) {
|
||||
var landscapeRoot = new postcss.atRule({ params: '(orientation: landscape)', name: 'media' });
|
||||
|
||||
landscapeRules.forEach(function(rule) {
|
||||
landscapeRoot.append(rule);
|
||||
});
|
||||
css.append(landscapeRoot);
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
function getUnit(prop, opts) {
|
||||
return prop.indexOf('font') === -1 ? opts.viewportUnit : opts.fontViewportUnit;
|
||||
}
|
||||
|
||||
function createPxReplace(opts, viewportUnit, viewportSize) {
|
||||
return function (m, $1) {
|
||||
if (!$1) return m;
|
||||
var pixels = parseFloat($1);
|
||||
if (pixels <= opts.minPixelValue) return m;
|
||||
var parsedVal = toFixed((pixels / viewportSize * 100), opts.unitPrecision);
|
||||
return parsedVal === 0 ? '0' : parsedVal + viewportUnit;
|
||||
};
|
||||
}
|
||||
|
||||
function toFixed(number, precision) {
|
||||
var multiplier = Math.pow(10, precision + 1),
|
||||
wholeNumber = Math.floor(number * multiplier);
|
||||
return Math.round(wholeNumber / 10) * 10 / multiplier;
|
||||
}
|
||||
|
||||
function blacklistedSelector(blacklist, selector) {
|
||||
if (typeof selector !== 'string') return;
|
||||
return blacklist.some(function (regex) {
|
||||
if (typeof regex === 'string') return selector.indexOf(regex) !== -1;
|
||||
return selector.match(regex);
|
||||
});
|
||||
}
|
||||
|
||||
function isExclude(reg, file) {
|
||||
if (Object.prototype.toString.call(reg) !== '[object RegExp]') {
|
||||
throw new Error('options.exclude should be RegExp.');
|
||||
}
|
||||
return file.match(reg) !== null;
|
||||
}
|
||||
|
||||
function declarationExists(decls, prop, value) {
|
||||
return decls.some(function (decl) {
|
||||
return (decl.prop === prop && decl.value === value);
|
||||
});
|
||||
}
|
||||
|
||||
function validateParams(params, mediaQuery) {
|
||||
return !params || (params && mediaQuery);
|
||||
}
|
67
node_modules/postcss-px-to-viewport/package.json
generated
vendored
Normal file
67
node_modules/postcss-px-to-viewport/package.json
generated
vendored
Normal file
@ -0,0 +1,67 @@
|
||||
{
|
||||
"_from": "postcss-px-to-viewport@1.1.1",
|
||||
"_id": "postcss-px-to-viewport@1.1.1",
|
||||
"_inBundle": false,
|
||||
"_integrity": "sha512-2x9oGnBms+e0cYtBJOZdlwrFg/mLR4P1g2IFu7jYKvnqnH/HLhoKyareW2Q/x4sg0BgklHlP1qeWo2oCyPm8FQ==",
|
||||
"_location": "/postcss-px-to-viewport",
|
||||
"_phantomChildren": {},
|
||||
"_requested": {
|
||||
"type": "version",
|
||||
"registry": true,
|
||||
"raw": "postcss-px-to-viewport@1.1.1",
|
||||
"name": "postcss-px-to-viewport",
|
||||
"escapedName": "postcss-px-to-viewport",
|
||||
"rawSpec": "1.1.1",
|
||||
"saveSpec": null,
|
||||
"fetchSpec": "1.1.1"
|
||||
},
|
||||
"_requiredBy": [
|
||||
"#DEV:/"
|
||||
],
|
||||
"_resolved": "https://registry.npmjs.org/postcss-px-to-viewport/-/postcss-px-to-viewport-1.1.1.tgz",
|
||||
"_shasum": "a25ca410b553c9892cc8b525cc710da47bf1aa55",
|
||||
"_spec": "postcss-px-to-viewport@1.1.1",
|
||||
"_where": "C:\\Users\\zhouxueli\\Desktop\\scheduling-app",
|
||||
"author": {
|
||||
"name": "Dmitry Karpunin",
|
||||
"email": "koderfunk@gmail.com"
|
||||
},
|
||||
"bugs": {
|
||||
"url": "https://github.com/evrone/postcss-px-to-viewport/issues"
|
||||
},
|
||||
"bundleDependencies": false,
|
||||
"dependencies": {
|
||||
"object-assign": ">=4.0.1",
|
||||
"postcss": ">=5.0.2"
|
||||
},
|
||||
"deprecated": false,
|
||||
"description": "A CSS post-processor that converts px to viewport units (vw, vh, vmin, vmax).",
|
||||
"devDependencies": {
|
||||
"jasmine-node": "~1.11.0"
|
||||
},
|
||||
"homepage": "https://github.com/evrone/postcss-px-to-viewport",
|
||||
"keywords": [
|
||||
"css",
|
||||
"units",
|
||||
"pixel",
|
||||
"px",
|
||||
"viewport",
|
||||
"vw",
|
||||
"vh",
|
||||
"vmin",
|
||||
"vmax",
|
||||
"postcss",
|
||||
"postcss-plugin"
|
||||
],
|
||||
"license": "MIT",
|
||||
"main": "index.js",
|
||||
"name": "postcss-px-to-viewport",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+ssh://git@github.com/evrone/postcss-px-to-viewport.git"
|
||||
},
|
||||
"scripts": {
|
||||
"test": "jasmine-node spec"
|
||||
},
|
||||
"version": "1.1.1"
|
||||
}
|
14
node_modules/postcss-px-to-viewport/src/pixel-unit-regexp.js
generated
vendored
Normal file
14
node_modules/postcss-px-to-viewport/src/pixel-unit-regexp.js
generated
vendored
Normal file
@ -0,0 +1,14 @@
|
||||
// excluding regex trick: http://www.rexegg.com/regex-best-trick.html
|
||||
|
||||
// Not anything inside double quotes
|
||||
// Not anything inside single quotes
|
||||
// Not anything inside url()
|
||||
// Any digit followed by px
|
||||
// !singlequotes|!doublequotes|!url()|pixelunit
|
||||
function getUnitRegexp(unit) {
|
||||
return new RegExp('"[^"]+"|\'[^\']+\'|url\\([^\\)]+\\)|(\\d*\\.?\\d+)' + unit, 'g');
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
getUnitRegexp
|
||||
};
|
106
node_modules/postcss-px-to-viewport/src/prop-list-matcher.js
generated
vendored
Normal file
106
node_modules/postcss-px-to-viewport/src/prop-list-matcher.js
generated
vendored
Normal file
@ -0,0 +1,106 @@
|
||||
var filterPropList = {
|
||||
exact: function (list) {
|
||||
return list.filter(function (m) {
|
||||
return m.match(/^[^\*\!]+$/);
|
||||
});
|
||||
},
|
||||
contain: function (list) {
|
||||
return list.filter(function (m) {
|
||||
return m.match(/^\*.+\*$/);
|
||||
}).map(function (m) {
|
||||
return m.substr(1, m.length - 2);
|
||||
});
|
||||
},
|
||||
endWith: function (list) {
|
||||
return list.filter(function (m) {
|
||||
return m.match(/^\*[^\*]+$/);
|
||||
}).map(function (m) {
|
||||
return m.substr(1);
|
||||
});
|
||||
},
|
||||
startWith: function (list) {
|
||||
return list.filter(function (m) {
|
||||
return m.match(/^[^\*\!]+\*$/);
|
||||
}).map(function (m) {
|
||||
return m.substr(0, m.length - 1);
|
||||
});
|
||||
},
|
||||
notExact: function (list) {
|
||||
return list.filter(function (m) {
|
||||
return m.match(/^\![^\*].*$/);
|
||||
}).map(function (m) {
|
||||
return m.substr(1);
|
||||
});
|
||||
},
|
||||
notContain: function (list) {
|
||||
return list.filter(function (m) {
|
||||
return m.match(/^\!\*.+\*$/);
|
||||
}).map(function (m) {
|
||||
return m.substr(2, m.length - 3);
|
||||
});
|
||||
},
|
||||
notEndWith: function (list) {
|
||||
return list.filter(function (m) {
|
||||
return m.match(/^\!\*[^\*]+$/);
|
||||
}).map(function (m) {
|
||||
return m.substr(2);
|
||||
});
|
||||
},
|
||||
notStartWith: function (list) {
|
||||
return list.filter(function (m) {
|
||||
return m.match(/^\![^\*]+\*$/);
|
||||
}).map(function (m) {
|
||||
return m.substr(1, m.length - 2);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
function createPropListMatcher(propList) {
|
||||
var hasWild = propList.indexOf('*') > -1;
|
||||
var matchAll = (hasWild && propList.length === 1);
|
||||
var lists = {
|
||||
exact: filterPropList.exact(propList),
|
||||
contain: filterPropList.contain(propList),
|
||||
startWith: filterPropList.startWith(propList),
|
||||
endWith: filterPropList.endWith(propList),
|
||||
notExact: filterPropList.notExact(propList),
|
||||
notContain: filterPropList.notContain(propList),
|
||||
notStartWith: filterPropList.notStartWith(propList),
|
||||
notEndWith: filterPropList.notEndWith(propList)
|
||||
};
|
||||
return function (prop) {
|
||||
if (matchAll) return true;
|
||||
return (
|
||||
(
|
||||
hasWild ||
|
||||
lists.exact.indexOf(prop) > -1 ||
|
||||
lists.contain.some(function (m) {
|
||||
return prop.indexOf(m) > -1;
|
||||
}) ||
|
||||
lists.startWith.some(function (m) {
|
||||
return prop.indexOf(m) === 0;
|
||||
}) ||
|
||||
lists.endWith.some(function (m) {
|
||||
return prop.indexOf(m) === prop.length - m.length;
|
||||
})
|
||||
) &&
|
||||
!(
|
||||
lists.notExact.indexOf(prop) > -1 ||
|
||||
lists.notContain.some(function (m) {
|
||||
return prop.indexOf(m) > -1;
|
||||
}) ||
|
||||
lists.notStartWith.some(function (m) {
|
||||
return prop.indexOf(m) === 0;
|
||||
}) ||
|
||||
lists.notEndWith.some(function (m) {
|
||||
return prop.indexOf(m) === prop.length - m.length;
|
||||
})
|
||||
)
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
filterPropList,
|
||||
createPropListMatcher
|
||||
};
|
Reference in New Issue
Block a user