postcss-font-family-system-ui
Advanced tools
Comparing version 2.1.4 to 3.0.0
@@ -0,1 +1,22 @@ | ||
# Changes to postcss-font-family-system-ui | ||
## 3.0.0 (2018-01-20) | ||
##### Breaking Changes | ||
* **main:** removes `Fira Sans` as Firefox OS is dead | ||
- if you relies on the 2.x behavior, you can use the newly introduced `family` option | ||
```js | ||
postcssSystemUiFont({ | ||
family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI','Roboto','Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue' | ||
}) | ||
``` | ||
##### Refactors | ||
* **package:** es6 + rollup + babel - postcss-value-parser | ||
##### New Features | ||
* **main:** adds `family` option to specify polyfill font-family stack | ||
#### 2.1.4 (2018-01-17) | ||
@@ -68,3 +89,3 @@ | ||
* **package:** | ||
* update nyc to lastest version (32b6c515) | ||
* update nyc to latest version (32b6c515) | ||
* upgrade dependencies (5a6924da) | ||
@@ -126,2 +147,1 @@ * update standard to version 10.0.0 (f9e3996d) | ||
* **main:** initial release (1c75288b) | ||
121
package.json
{ | ||
"name": "postcss-font-family-system-ui", | ||
"version": "2.1.4", | ||
"description": "PostCSS plugin to transform W3C CSS font-family: system-ui to a practical font-family list", | ||
"keywords": [ | ||
"css", | ||
"postcss", | ||
"postcss-plugin", | ||
"font-family", | ||
"system-ui" | ||
"version": "3.0.0", | ||
"description": "Use the system-ui font family in CSS", | ||
"author": "Junliang Huang <i@jhuang.me>", | ||
"contributors": [ | ||
"Junliang Huang <i@jhuang.me>", | ||
"Jonathan Neal <jonathantneal@hotmail.com>" | ||
], | ||
"main": "src/index.js", | ||
"module": "src/main.mjs", | ||
"jsnext:main": "src/main.mjs", | ||
"repository": "https://github.com/JLHwung/postcss-font-family-system-ui.git", | ||
"author": "Junliang Huang <i@jhuang.me>", | ||
"license": "MIT", | ||
"license": "CC0-1.0", | ||
"repository": "JLHwung/postcss-font-family-system-ui", | ||
"homepage": "https://github.com/JLHwung/postcss-font-family-system-ui#readme", | ||
"bugs": "https://github.com/JLHwung/postcss-font-family-system-ui/issues", | ||
"main": "index.bundle.js", | ||
"module": "index.js", | ||
"files": [ | ||
"index.js", | ||
"index.bundle.js" | ||
], | ||
"scripts": { | ||
"lint": "standard", | ||
"test": "cross-env NODE_ENV=test jest && npm run spellcheck", | ||
"coverage": "nyc report", | ||
"spellcheck": "yaspeller-ci .", | ||
"prepublishOnly": "npm run lint && npm run test" | ||
"prepublishOnly": "npm test", | ||
"pretest": "rollup -c .rollup.js --silent", | ||
"test": "echo 'Running tests...'; npm run test:ec && npm run test:spelling && npm run test:js && npm run test:tape", | ||
"test:ec": "echint --ignore index.bundle.js test", | ||
"test:js": "eslint *.js --cache --ignore-path .gitignore --quiet", | ||
"test:spelling": "yaspeller-ci -c package.json --lang en --ignore-uppercase --ignore-roman-numerals --ignore-urls *.md", | ||
"test:tape": "postcss-tape" | ||
}, | ||
"engines": { | ||
"node": ">=4.0.0" | ||
}, | ||
"dependencies": { | ||
"@std/esm": "^0.19.5", | ||
"postcss": "^6.0.1", | ||
"postcss-value-parser": "^3.3.0" | ||
"postcss": "^6.0" | ||
}, | ||
"devDependencies": { | ||
"babel-preset-env": "^1.5.1", | ||
"cross-env": "^5.0.0", | ||
"jest": "^22.0.4", | ||
"pre-commit": "^1.2.2", | ||
"standard": "^10.0.0", | ||
"babel-core": "^6.26", | ||
"babel-eslint": "^8.2", | ||
"babel-preset-env": "^1.6", | ||
"echint": "^4.0", | ||
"eslint": "^4.15", | ||
"eslint-config-dev": "2.0", | ||
"postcss-tape": "2.2", | ||
"pre-commit": "^1.2", | ||
"rollup": "^0.54", | ||
"rollup-plugin-babel": "^3.0", | ||
"yaspeller-ci": "^1.0.0" | ||
}, | ||
"pre-commit": "lint", | ||
"@std/esm": { | ||
"esm": "all", | ||
"cjs": true | ||
"eslintConfig": { | ||
"extends": "dev", | ||
"parser": "babel-eslint" | ||
}, | ||
"jest": { | ||
"collectCoverage": true, | ||
"testEnvironment": "node" | ||
} | ||
"keywords": [ | ||
"postcss", | ||
"css", | ||
"postcss-plugin", | ||
"ua", | ||
"user", | ||
"agent", | ||
"platform", | ||
"system", | ||
"ui", | ||
"default", | ||
"font", | ||
"font-family", | ||
"family", | ||
"face", | ||
"type", | ||
"typeface" | ||
], | ||
"dictionary": [ | ||
"Affirmer", | ||
"babili", | ||
"babelrc", | ||
"devDependencies", | ||
"env", | ||
"es6", | ||
"esm", | ||
"Gulpfile", | ||
"greenkeeper", | ||
"Gruntfile", | ||
"istanbul", | ||
"js", | ||
"lockfile", | ||
"npm", | ||
"nyc", | ||
"postcss", | ||
"PostCSS", | ||
"polyfill", | ||
"Refactors", | ||
"rollup", | ||
"std", | ||
"sublicensable", | ||
"travis", | ||
"ui", | ||
"yaspeller", | ||
"^[A-f0-9]{8}$" | ||
] | ||
} |
163
README.md
@@ -1,61 +0,146 @@ | ||
# postcss-font-family-system-ui | ||
# postcss-font-family-system-ui [<img src="https://postcss.github.io/postcss/logo.svg" alt="PostCSS Logo" width="90" height="90" align="right">][postcss] | ||
[![CSS Standard Status](https://jonathantneal.github.io/css-db/badge/css-fonts-system-ui-def.svg)](https://jonathantneal.github.io/css-db/#css-fonts-system-ui-def) | ||
[![npm version](https://img.shields.io/npm/v/postcss-font-family-system-ui.svg?style=flat-square)](https://www.npmjs.com/package/postcss-font-family-system-ui) | ||
[![Build Status](https://img.shields.io/travis/JLHwung/postcss-font-family-system-ui/master.svg?style=flat-square)](https://travis-ci.org/JLHwung/postcss-font-family-system-ui) | ||
[![Coverage Status](https://img.shields.io/coveralls/JLHwung/postcss-font-family-system-ui.svg?style=flat-square)](https://coveralls.io/github/JLHwung/postcss-font-family-system-ui) | ||
[![Greenkeeper badge](https://badges.greenkeeper.io/JLHwung/postcss-font-family-system-ui.svg)](https://greenkeeper.io/) | ||
[![CSS Standard][css-img]][css-url] | ||
[![NPM Version][npm-img]][npm-url] | ||
[![Linux Build Status][cli-img]][cli-url] | ||
[![Windows Build Status][win-img]][win-url] | ||
[![Greenkeeper][gkp-img]][gkp-url] | ||
[![Gitter Chat][git-img]][git-url] | ||
> [PostCSS](https://github.com/postcss/postcss) plugin to transform W3C CSS generic font-family [system-ui](https://www.w3.org/TR/css-fonts-4/#system-ui-def) to a practical font-family list | ||
[postcss-font-family-system-ui] lets you use `system-ui` in CSS, following the | ||
[CSS Fonts Module Level 4] specification. | ||
## Installation | ||
```css | ||
body { | ||
font: 100%/1.5 system-ui; | ||
} | ||
/* becomes */ | ||
body { | ||
font: 100%/1.5 system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue; | ||
} | ||
``` | ||
## Usage | ||
Add [postcss-font-family-system-ui] to your build tool: | ||
```bash | ||
yarn add postcss-font-family-system-ui --dev | ||
npm install postcss-font-family-system-ui --save-dev | ||
``` | ||
## Version | ||
#### Node | ||
| postcss | postcss-font-family-system-ui | | ||
| ------- | ----------------------------- | | ||
| 5.x | 1.x | | ||
| 6.x | 2.x | | ||
Use [postcss-font-family-system-ui] to process your CSS: | ||
## Usage | ||
```js | ||
// dependencies | ||
import postcss from 'postcss' | ||
import fontFamilySystemUI from 'postcss-font-family-system-ui' | ||
import postcssSystemUiFont from 'postcss-font-family-system-ui'; | ||
// css to be processed | ||
const css = fs.readFileSync('input.css', 'utf8') | ||
postcssSystemUiFont.process(YOUR_CSS); | ||
``` | ||
// process css using postcss-font-family-system-ui | ||
const out = postcss() | ||
.use(fontFamilySystemUI()) | ||
.process(css) | ||
.css | ||
#### PostCSS | ||
Add [PostCSS] to your build tool: | ||
```bash | ||
npm install postcss --save-dev | ||
``` | ||
Using this `input.css`: | ||
Use [postcss-font-family-system-ui] as a plugin: | ||
```css | ||
body { | ||
font-family: system-ui; | ||
} | ||
```js | ||
import postcss from 'gulp-postcss'; | ||
import postcssSystemUiFont from 'postcss-font-family-system-ui'; | ||
postcss([ | ||
postcssSystemUiFont(/* options */) | ||
]).process(YOUR_CSS); | ||
``` | ||
you will get: | ||
#### Gulp | ||
```css | ||
body { | ||
font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue; | ||
} | ||
Add [Gulp PostCSS] to your build tool: | ||
```bash | ||
npm install gulp-postcss --save-dev | ||
``` | ||
Checkout [tests](test) for examples. | ||
Use [postcss-font-family-system-ui] in your Gulpfile: | ||
## FAQ | ||
```js | ||
import postcss from 'gulp-postcss'; | ||
import postcssSystemUiFont from 'postcss-font-family-system-ui'; | ||
### Can I use `require('postcss-font-family-system-ui')`? | ||
Yes | ||
gulp.task('css', () => gulp.src('./src/*.css').pipe( | ||
postcss([ | ||
postcssSystemUiFont(/* options */) | ||
]) | ||
).pipe( | ||
gulp.dest('.') | ||
)); | ||
``` | ||
#### Grunt | ||
Add [Grunt PostCSS] to your build tool: | ||
```bash | ||
npm install grunt-postcss --save-dev | ||
``` | ||
Use [postcss-font-family-system-ui] in your Gruntfile: | ||
```js | ||
import postcssSystemUiFont from 'postcss-font-family-system-ui'; | ||
grunt.loadNpmTasks('grunt-postcss'); | ||
grunt.initConfig({ | ||
postcss: { | ||
options: { | ||
use: [ | ||
postcssSystemUiFont(/* options */) | ||
] | ||
}, | ||
dist: { | ||
src: '*.css' | ||
} | ||
} | ||
}); | ||
``` | ||
## Options | ||
### family | ||
The `family` option defines the fallback families used to polyfill `system-ui`. | ||
It accepts an array or a comma-separated string. | ||
```js | ||
import postcssSystemUiFont from 'postcss-font-family-system-ui'; | ||
postcssSystemUiFont({ | ||
family: 'system-ui, Segoe UI, Roboto, Helvetica Neue' // use less fallbacks | ||
}); | ||
``` | ||
[css-url]: https://jonathantneal.github.io/css-db/#css-fonts-system-ui-def | ||
[css-img]: https://jonathantneal.github.io/css-db/badge/css-fonts-system-ui-def.svg | ||
[npm-url]: https://www.npmjs.com/package/postcss-font-family-system-ui | ||
[npm-img]: https://img.shields.io/npm/v/postcss-font-family-system-ui.svg | ||
[cli-url]: https://travis-ci.org/JLHwung/postcss-font-family-system-ui | ||
[cli-img]: https://img.shields.io/travis/JLHwung/postcss-font-family-system-ui.svg | ||
[win-url]: https://ci.appveyor.com/project/JLHwung/postcss-font-family-system-ui | ||
[win-img]: https://img.shields.io/appveyor/ci/JLHwung/postcss-font-family-system-ui.svg | ||
[gkp-url]: https://greenkeeper.io/ | ||
[gkp-img]: https://badges.greenkeeper.io/JLHwung/postcss-font-family-system-ui.svg | ||
[git-url]: https://gitter.im/postcss/postcss | ||
[git-img]: https://img.shields.io/badge/chat-gitter-blue.svg | ||
[CSS Fonts Module Level 4]: https://drafts.csswg.org/css-fonts-4/#system-ui-def | ||
[Gulp PostCSS]: https://github.com/postcss/gulp-postcss | ||
[Grunt PostCSS]: https://github.com/nDmitry/grunt-postcss | ||
[postcss-font-family-system-ui]: https://github.com/JLHwung/postcss-font-family-system-ui | ||
[PostCSS]: https://github.com/postcss/postcss |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
No repository
Supply chain riskPackage does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
No bug tracker
MaintenancePackage does not have a linked bug tracker in package.json.
Found 1 instance in 1 package
No repository
Supply chain riskPackage does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.
Found 1 instance in 1 package
No website
QualityPackage does not have a website.
Found 1 instance in 1 package
18632
1
56
0
147
11
6
1
- Removed@std/esm@^0.19.5
- Removedpostcss-value-parser@^3.3.0
- Removed@std/esm@0.19.7(transitive)
- Removedpostcss-value-parser@3.3.1(transitive)
Updatedpostcss@^6.0