chushihua
This commit is contained in:
li
+1
@@ -0,0 +1 @@
|
||||
../browserslist/cli.js
|
||||
+234
@@ -0,0 +1,234 @@
|
||||
# Change Log
|
||||
This project adheres to [Semantic Versioning](http://semver.org/).
|
||||
|
||||
## 2.11.3
|
||||
* Fix for `path: undefined` option.
|
||||
|
||||
## 2.11.2
|
||||
* Remove Node.js specific code from webpack build.
|
||||
|
||||
## 2.11.1
|
||||
* Fix using Browserslist in browser with `path` but without `fs`.
|
||||
|
||||
## 2.11
|
||||
* Add `last 2 years` query support (by James Harris).
|
||||
|
||||
## 2.10.2
|
||||
* Fix Browserify support.
|
||||
|
||||
## 2.10.1
|
||||
* Fix using Browserslist without `process` (by Andrew Patton).
|
||||
|
||||
## 2.10
|
||||
* Add `< 1%` and `<= 1%` queries support (by August Kaiser).
|
||||
|
||||
## 2.9.1
|
||||
* Fix unknown query on trailing spaces in query.
|
||||
|
||||
## 2.9
|
||||
* Add `last Electron versions` and `last Electron major versions` queries
|
||||
(by Louis Mouhat).
|
||||
|
||||
## 2.8
|
||||
* Add `since 2016-03` and `since 2016-03-20` queries support (by Andrew Blick).
|
||||
|
||||
## 2.7
|
||||
* Add `since 2016` queries support (by Igor Deryabin).
|
||||
|
||||
## 2.6.1
|
||||
* Fix `Path must be a string` error.
|
||||
|
||||
## 2.6
|
||||
* By default load config from current directory in CLI tool.
|
||||
|
||||
## 2.5.1
|
||||
* Allow `@scope/browserlist-config` config name (by Jamie Connolly).
|
||||
|
||||
## 2.5
|
||||
* Add `extends` query (by YellowKirby).
|
||||
|
||||
## 2.4.1
|
||||
* Throw error if `package.json` contain `browserlist` instead of `browserslist`.
|
||||
|
||||
## 2.4
|
||||
* Add `last n major versions` query (by John Sanders).
|
||||
|
||||
## 2.3.3
|
||||
* Fix browsers support.
|
||||
|
||||
## 2.3.2
|
||||
* Fix `> 0` query for browsers with one version (by Nikolay Solovyov).
|
||||
|
||||
## 2.3.1
|
||||
* Reduce library size.
|
||||
|
||||
## 2.3
|
||||
* Add `unreleased versions` and `unreleased Chrome versions` queries.
|
||||
|
||||
## 2.2.2
|
||||
* Fix `Path must be a string` error (by Pieter Beulque).
|
||||
|
||||
## 2.2.1
|
||||
* Fix security issue with regions dynamic `require`.
|
||||
|
||||
## 2.2
|
||||
* Add region usage statistics support (by Clément P).
|
||||
|
||||
## 2.1.5
|
||||
* Remove Firefox 45 from Firefox ESR.
|
||||
|
||||
## 2.1.4
|
||||
* Use both ESR versions when they actual.
|
||||
|
||||
## 2.1.3
|
||||
* Add warning on first exclude query.
|
||||
|
||||
## 2.1.2
|
||||
* Fix non-Node.js environments support.
|
||||
|
||||
## 2.1.1
|
||||
* Fix CLI arguments parsing.
|
||||
|
||||
## 2.1
|
||||
* Add `>= 5%`, `>= 5% in US` and `>= 5% in my stats` queries.
|
||||
|
||||
## 2.0
|
||||
* `last n versions` returns versions for all browsers, not only main browsers.
|
||||
* Cache file system operations (by Aarni Koskela).
|
||||
* Use `caniuse-lite` 1 MB instead of `caniuse-db` 7 MB (by Ben Briggs).
|
||||
* Add `.browserslistrc` config support.
|
||||
* Add QQ Browser for Android support.
|
||||
* Add tests for CLI (by Zhulduz Zhankenova).
|
||||
|
||||
## 1.7.7
|
||||
* Update Firefox ESR.
|
||||
|
||||
## 1.7.6
|
||||
* Fix Android Chrome selection.
|
||||
|
||||
## 1.7.5
|
||||
* Fix combining `not` query with country based statistics.
|
||||
* Fix `--env` argument in CLI (by Tuure Savuoja).
|
||||
|
||||
## 1.7.4
|
||||
* Speed up browser sorting (by Aarni Koskela).
|
||||
|
||||
## 1.7.3
|
||||
* Fix config finding when directory was passed to `path` (by Aarni Koskela).
|
||||
|
||||
## 1.7.2
|
||||
* Fix config finding algorithm (by Aarni Koskela).
|
||||
|
||||
## 1.7.1
|
||||
* Fix unreleased browsers version detection.
|
||||
|
||||
## 1.7
|
||||
* Add `--config` and `--env` arguments to CLI (by Jarek Rencz).
|
||||
|
||||
## 1.6
|
||||
* Convert Electron version to Chrome (by Kilian Valkhof).
|
||||
* Fix `0` version mistake in Can I Use data.
|
||||
|
||||
## 1.5.2
|
||||
* Fix browser versions ordering (by Marco Massarotto).
|
||||
|
||||
## 1.5.1
|
||||
* Fix error on `package.json` and `browserslist` in same directory.
|
||||
|
||||
## 1.5
|
||||
* Add `package.json` support (by Stepan Kuzmin).
|
||||
* Add environments support (by Maksim Semenov and openlibser).
|
||||
* Add `browserslist-stats.json` file support (by Oleh Aloshkin).
|
||||
* Add `config` option to CLI (by Evilebot Tnawi).
|
||||
* Add JSDoc.
|
||||
* Fix tests on Windows (by Anna Stoliar).
|
||||
* Don’t set custom usage statistics globally.
|
||||
|
||||
## 1.4
|
||||
* Add `defaults` keyword.
|
||||
|
||||
## 1.3.6
|
||||
* Add `UCAndroid` alias to `and_uc` (by Evilebot Tnawi).
|
||||
|
||||
## 1.3.5
|
||||
* Fix Opera Mini support. Use `op_mini all`.
|
||||
|
||||
## 1.3.4
|
||||
* Add space-less `>1%` and `>.5%` syntax support (by Andreas Lind).
|
||||
|
||||
## 1.3.3
|
||||
* Clean `0` versions in some country-based requests.
|
||||
|
||||
## 1.3.2
|
||||
* Update Firefox ESR.
|
||||
|
||||
## 1.3.1
|
||||
* Add Safari TP support.
|
||||
|
||||
## 1.3
|
||||
* Add coverage for specific country (by Joshua Wise).
|
||||
|
||||
## 1.2
|
||||
* Add `browserslist.coverage()` method.
|
||||
* Add `--coverage` and `-c` argument to CLI.
|
||||
* Add `-v` argument support to CLI.
|
||||
* Better error handling in CLI.
|
||||
|
||||
## 1.1.3
|
||||
* Fix jspm support (by Sean Anderson).
|
||||
|
||||
## 1.1.2
|
||||
* Fix jspm support (by Sean Anderson).
|
||||
|
||||
## 1.1.1
|
||||
* Fix space-less `>10%` and `>10% in my stats` queries.
|
||||
* Normalize error messages.
|
||||
* Remove development files from npm package.
|
||||
|
||||
## 1.1
|
||||
* Added query against custom browser usage data (by Daniel Rey).
|
||||
|
||||
## 1.0.1
|
||||
* Update Firefox ESR (by Rouven Weßling).
|
||||
|
||||
## 1.0
|
||||
* Remove Opera 12.1 from default query.
|
||||
* Add `not` keyword and exclude browsers by query.
|
||||
* Add Microsoft Edge support (by Andrey Polischuk).
|
||||
* Add CLI for debug and non-JS usage (by Luke Horvat).
|
||||
* Use own class in Browserslist errors.
|
||||
|
||||
## 0.5
|
||||
* Add version ranges `IE 6-9` (by Ben Briggs).
|
||||
|
||||
## 0.4
|
||||
* Add `config` option and `BROWSERSLIST_CONFIG` environment variable support.
|
||||
* Add symlink config support.
|
||||
|
||||
## 0.3.3
|
||||
* Fix DynJS compatibility (by Nick Howes).
|
||||
|
||||
## 0.3.2
|
||||
* Fix joined versions on versions query (by Vincent De Oliveira).
|
||||
|
||||
## 0.3.1
|
||||
* Fix global variable leak (by Peter Müller).
|
||||
|
||||
## 0.3
|
||||
* Takes queries from `BROWSERSLIST` environment variable.
|
||||
|
||||
## 0.2
|
||||
* Return Can I Use joined versions as `ios_saf 7.0-7.1`.
|
||||
|
||||
## 0.1.3
|
||||
* Better work with Can I Use joined versions like `ios_saf 7.0-7.1`.
|
||||
* Browserslist now understands `ios_saf 7.0` or `ios_saf 7`.
|
||||
|
||||
## 0.1.2
|
||||
* Do not create global `browserslist` var (by Maxime Thirouin).
|
||||
|
||||
## 0.1.1
|
||||
* Sort browsers by name and version.
|
||||
|
||||
## 0.1
|
||||
* Initial release.
|
||||
+20
@@ -0,0 +1,20 @@
|
||||
The MIT License (MIT)
|
||||
|
||||
Copyright 2014 Andrey Sitnik <andrey@sitnik.ru>
|
||||
|
||||
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.
|
||||
+455
@@ -0,0 +1,455 @@
|
||||
# Browserslist
|
||||
|
||||
<img align="right" width="120" height="120"
|
||||
src="./logo.svg" alt="Browserslist logo by Anton Lovchikov">
|
||||
|
||||
Library to share target browsers between different front-end tools.
|
||||
It is used in:
|
||||
|
||||
* [Autoprefixer]
|
||||
* [babel-preset-env]
|
||||
(external config in `package.json` or `browserslist` will be supported in 7.0)
|
||||
* [postcss-preset-env]
|
||||
* [eslint-plugin-compat]
|
||||
* [stylelint-no-unsupported-browser-features]
|
||||
* [postcss-normalize]
|
||||
|
||||
All tools that rely on Browserslist will find its config automatically,
|
||||
when you add the following to `package.json`:
|
||||
|
||||
```json
|
||||
{
|
||||
"browserslist": [
|
||||
"> 1%",
|
||||
"last 2 versions"
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
Or in `.browserslistrc` config:
|
||||
|
||||
```yaml
|
||||
# Browsers that we support
|
||||
|
||||
> 1%
|
||||
Last 2 versions
|
||||
IE 10 # sorry
|
||||
```
|
||||
|
||||
Developers set browsers list in queries like `last 2 version`
|
||||
to be free from updating browser versions manually.
|
||||
Browserslist will use [Can I Use] data for this queries.
|
||||
|
||||
Browserslist will take browsers queries from tool option,
|
||||
`browserslist` config, `.browserslistrc` config,
|
||||
`browserslist` section in `package.json` or environment variables.
|
||||
|
||||
You can test Browserslist queries in [online demo].
|
||||
|
||||
<a href="https://evilmartians.com/?utm_source=browserslist">
|
||||
<img src="https://evilmartians.com/badges/sponsored-by-evil-martians.svg"
|
||||
alt="Sponsored by Evil Martians"
|
||||
width="236"
|
||||
height="54"
|
||||
\>
|
||||
</a>
|
||||
|
||||
[stylelint-no-unsupported-browser-features]: https://github.com/ismay/stylelint-no-unsupported-browser-features
|
||||
[eslint-plugin-compat]: https://github.com/amilajack/eslint-plugin-compat
|
||||
[postcss-preset-env]: https://github.com/jonathantneal/postcss-preset-env
|
||||
[babel-preset-env]: https://github.com/babel/babel/tree/master/packages/babel-preset-env
|
||||
[postcss-normalize]: https://github.com/jonathantneal/postcss-normalize
|
||||
[Autoprefixer]: https://github.com/postcss/autoprefixer
|
||||
[online demo]: http://browserl.ist/
|
||||
[Can I Use]: http://caniuse.com/
|
||||
|
||||
## Tools
|
||||
|
||||
* [`browserslist-useragent`] checks browser by user agent string
|
||||
to match Browserslist target browsers query.
|
||||
* [`caniuse-api`] returns browsers which support some specific feature.
|
||||
* Run `npx browserslist` in your project directory to see project’s
|
||||
target browsers. This CLI tool is built-in and available in any project
|
||||
with Autoprefixer.
|
||||
|
||||
[`browserslist-useragent`]: https://github.com/pastelsky/browserslist-useragent
|
||||
[`caniuse-api`]: https://github.com/Nyalab/caniuse-api
|
||||
|
||||
## Queries
|
||||
|
||||
Browserslist will use browsers query from one of this sources:
|
||||
|
||||
1. Tool options. For example `browsers` option in Autoprefixer.
|
||||
2. `BROWSERSLIST` environment variable.
|
||||
3. `browserslist` config file in current or parent directories.
|
||||
3. `.browserslistrc` config file in current or parent directories.
|
||||
4. `browserslist` key in `package.json` file in current or parent directories.
|
||||
**We recommend this way.**
|
||||
5. If the above methods did not produce a valid result
|
||||
Browserslist will use defaults: `> 1%, last 2 versions, Firefox ESR`.
|
||||
|
||||
You can specify the versions by queries (case insensitive):
|
||||
|
||||
* `last 2 versions`: the last 2 versions for each browser.
|
||||
* `last 2 Chrome versions`: the last 2 versions of Chrome browser.
|
||||
* `> 5%`: versions selected by global usage statistics.
|
||||
`>=`, `<` and `<=` work too.
|
||||
* `> 5% in US`: uses USA usage statistics. It accepts [two-letter country code].
|
||||
* `> 5% in alt-AS`: uses Asia region usage statistics. List of all region codes
|
||||
can be found at [`caniuse-lite/data/regions`].
|
||||
* `> 5% in my stats`: uses [custom usage data].
|
||||
* `extends browserslist-config-mycompany`: take queries from
|
||||
`browserslist-config-mycompany` npm package.
|
||||
* `ie 6-8`: selects an inclusive range of versions.
|
||||
* `Firefox > 20`: versions of Firefox newer than 20.
|
||||
`>=`, `<` and `<=` work too.
|
||||
* `iOS 7`: the iOS browser version 7 directly.
|
||||
* `Firefox ESR`: the latest [Firefox ESR] version.
|
||||
* `unreleased versions` or `unreleased Chrome versions`:
|
||||
alpha and beta versions.
|
||||
* `last 2 major versions` or `last 2 iOS major versions`:
|
||||
all minor/patch releases of last 2 major versions.
|
||||
* `since 2015` or `last 2 years`: all versions released since year 2015
|
||||
(also `since 2015-03` and `since 2015-03-10`).
|
||||
* `not ie <= 8`: exclude browsers selected by previous queries.
|
||||
|
||||
You can add `not ` to any query.
|
||||
|
||||
### Debug
|
||||
|
||||
Run `npx browserslist` in project directory to see what browsers was selected
|
||||
by your queries.
|
||||
|
||||
```sh
|
||||
$ npx browserslist
|
||||
and_chr 61
|
||||
and_ff 56
|
||||
and_qq 1.2
|
||||
and_uc 11.4
|
||||
android 56
|
||||
baidu 7.12
|
||||
bb 10
|
||||
chrome 62
|
||||
edge 16
|
||||
firefox 56
|
||||
ios_saf 11
|
||||
opera 48
|
||||
safari 11
|
||||
samsung 5
|
||||
```
|
||||
|
||||
### Notes
|
||||
|
||||
Browserslist works with separated versions of browsers.
|
||||
You should avoid queries like `Firefox > 0`.
|
||||
|
||||
Multiple criteria are combined as a boolean `OR`. A browser version must match
|
||||
at least one of the criteria to be selected.
|
||||
|
||||
All queries are based on the [Can I Use] support table,
|
||||
e.g. `last 3 iOS versions` might select `8.4, 9.2, 9.3` (mixed major and minor),
|
||||
whereas `last 3 Chrome versions` might select `50, 49, 48` (major only).
|
||||
|
||||
[`caniuse-lite/data/regions`]: https://github.com/ben-eb/caniuse-lite/tree/master/data/regions
|
||||
[two-letter country code]: http://en.wikipedia.org/wiki/ISO_3166-1_alpha-2#Officially_assigned_code_elements
|
||||
[custom usage data]: #custom-usage-data
|
||||
[Can I Use]: http://caniuse.com/
|
||||
|
||||
### Browsers
|
||||
|
||||
Names are case insensitive:
|
||||
|
||||
* `Android` for Android WebView.
|
||||
* `Baidu` for Baidu Browser.
|
||||
* `BlackBerry` or `bb` for Blackberry browser.
|
||||
* `Chrome` for Google Chrome.
|
||||
* `ChromeAndroid` or `and_chr` for Chrome for Android
|
||||
* `Edge` for Microsoft Edge.
|
||||
* `Electron` for Electron framework. It will be converted to Chrome version.
|
||||
* `Explorer` or `ie` for Internet Explorer.
|
||||
* `ExplorerMobile` or `ie_mob` for Internet Explorer Mobile.
|
||||
* `Firefox` or `ff` for Mozilla Firefox.
|
||||
* `FirefoxAndroid` or `and_ff` for Firefox for Android.
|
||||
* `iOS` or `ios_saf` for iOS Safari.
|
||||
* `Opera` for Opera.
|
||||
* `OperaMini` or `op_mini` for Opera Mini.
|
||||
* `OperaMobile` or `op_mob` for Opera Mobile.
|
||||
* `QQAndroid` or `and_qq` for QQ Browser for Android.
|
||||
* `Safari` for desktop Safari.
|
||||
* `Samsung` for Samsung Internet.
|
||||
* `UCAndroid` or `and_uc` for UC Browser for Android.
|
||||
|
||||
## `package.json`
|
||||
|
||||
If you want to reduce config files in project root, you can specify
|
||||
browsers in `package.json` with `browserslist` key:
|
||||
|
||||
```json
|
||||
{
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"autoprefixer": "^6.5.4"
|
||||
},
|
||||
"browserslist": [
|
||||
"> 1%",
|
||||
"last 2 versions"
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
## Config File
|
||||
|
||||
Browserslist config should be named `.browserslistrc` or `browserslist`
|
||||
and have browsers queries split by a new line. Comments starts with `#` symbol:
|
||||
|
||||
```yaml
|
||||
# Browsers that we support
|
||||
|
||||
> 1%
|
||||
Last 2 versions
|
||||
IE 8 # sorry
|
||||
```
|
||||
|
||||
Browserslist will check config in every directory in `path`.
|
||||
So, if tool process `app/styles/main.css`, you can put config to root,
|
||||
`app/` or `app/styles`.
|
||||
|
||||
You can specify direct path in `BROWSERSLIST_CONFIG` environment variables.
|
||||
|
||||
## Shareable Configs
|
||||
|
||||
You can use the following query to reference an exported Browserslist config
|
||||
from another package:
|
||||
|
||||
```json
|
||||
"browserslist": [
|
||||
"extends browserslist-config-mycompany"
|
||||
]
|
||||
```
|
||||
|
||||
For security reasons, external configuration only supports packages that have
|
||||
the `browserslist-config-` prefix. npm scoped packages are also supported, by
|
||||
naming or prefixing the module with `@scope/browserslist-config`, such as
|
||||
`@scope/browserslist-config` or `@scope/browserslist-config-mycompany`.
|
||||
|
||||
If you don’t accept Browserslist queries from users, you can disable the
|
||||
validation by using the `dangerousExtend` option:
|
||||
|
||||
```js
|
||||
browserslist(queries, { path, dangerousExtend: true })
|
||||
```
|
||||
|
||||
Because this uses `npm`'s resolution, you can also reference specific files
|
||||
in a package:
|
||||
|
||||
```json
|
||||
"browserslist": [
|
||||
"extends browserslist-config-mycompany/desktop",
|
||||
"extends browserslist-config-mycompany/mobile"
|
||||
]
|
||||
```
|
||||
|
||||
When writing a shared Browserslist package, just export an array.
|
||||
`browserslist-config-mycompany/index.js`:
|
||||
|
||||
```js
|
||||
module.exports = [
|
||||
'last 2 versions',
|
||||
'ie 9'
|
||||
]
|
||||
```
|
||||
|
||||
## Environment Variables
|
||||
|
||||
If some tool use Browserslist inside, you can change browsers settings
|
||||
by [environment variables]:
|
||||
|
||||
* `BROWSERSLIST` with browsers queries.
|
||||
|
||||
```sh
|
||||
BROWSERSLIST="> 5%" gulp css
|
||||
```
|
||||
|
||||
* `BROWSERSLIST_CONFIG` with path to config file.
|
||||
|
||||
```sh
|
||||
BROWSERSLIST_CONFIG=./config/browserslist gulp css
|
||||
```
|
||||
|
||||
* `BROWSERSLIST_ENV` with environments string.
|
||||
|
||||
```sh
|
||||
BROWSERSLIST_ENV="development" gulp css
|
||||
```
|
||||
|
||||
* `BROWSERSLIST_STATS` with path to the custom usage data
|
||||
for `> 1% in my stats` query.
|
||||
|
||||
```sh
|
||||
BROWSERSLIST_STATS=./config/usage_data.json gulp css
|
||||
```
|
||||
|
||||
* `BROWSERSLIST_DISABLE_CACHE` if you want to disable config reading cache.
|
||||
|
||||
```sh
|
||||
BROWSERSLIST_DISABLE_CACHE=1 gulp css
|
||||
```
|
||||
|
||||
[environment variables]: https://en.wikipedia.org/wiki/Environment_variable
|
||||
|
||||
## Environments
|
||||
|
||||
You can also specify different browser queries for various environments.
|
||||
Browserslist will choose query according to `BROWSERSLIST_ENV` or `NODE_ENV`
|
||||
variables. If none of them is declared, Browserslist will firstly look
|
||||
for `development` queries and then use defaults.
|
||||
|
||||
In `package.json`:
|
||||
|
||||
```js
|
||||
"browserslist": {
|
||||
"production": [
|
||||
"last 2 version",
|
||||
"ie 9"
|
||||
],
|
||||
"development": [
|
||||
"last 1 version"
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
In `.browserslistrc` config:
|
||||
|
||||
```ini
|
||||
[production]
|
||||
last 2 version
|
||||
ie 9
|
||||
|
||||
[development]
|
||||
last 1 version
|
||||
```
|
||||
|
||||
## Custom Usage Data
|
||||
|
||||
If you have a website, you can query against the usage statistics of your site:
|
||||
|
||||
1. Import your Google Analytics data into [Can I Use].
|
||||
Press `Import…` button in Settings page.
|
||||
2. Open browser DevTools on [Can I Use] and paste this snippet
|
||||
into the browser console:
|
||||
|
||||
```js
|
||||
var e=document.createElement('a');e.setAttribute('href', 'data:text/plain;charset=utf-8,'+encodeURIComponent(JSON.stringify(JSON.parse(localStorage['usage-data-by-id'])[localStorage['config-primary_usage']])));e.setAttribute('download','stats.json');document.body.appendChild(e);e.click();document.body.removeChild(e);
|
||||
```
|
||||
3. Save the data to a `browserslist-stats.json` file in your project.
|
||||
|
||||
Of course, you can generate usage statistics file by any other method.
|
||||
File format should be like:
|
||||
|
||||
```js
|
||||
{
|
||||
"ie": {
|
||||
"6": 0.01,
|
||||
"7": 0.4,
|
||||
"8": 1.5
|
||||
},
|
||||
"chrome": {
|
||||
…
|
||||
},
|
||||
…
|
||||
}
|
||||
```
|
||||
|
||||
Note that you can query against your custom usage data
|
||||
while also querying against global or regional data.
|
||||
For example, the query `> 1% in my stats, > 5% in US, 10%` is permitted.
|
||||
|
||||
[Can I Use]: http://caniuse.com/
|
||||
|
||||
## Webpack
|
||||
|
||||
If you plan to use Browserslist on client-side (e. g., tools like CodePen)
|
||||
Browserslist could take big part of your bundle (150 KB).
|
||||
|
||||
But the biggest part of this size will be region usage statistics, which could
|
||||
be useless for you. `IgnorePlugin` could cut it:
|
||||
|
||||
```js
|
||||
const webpackConfig = {
|
||||
…
|
||||
plugins: [
|
||||
new webpack.IgnorePlugin(/caniuse-lite\/data\/regions/)
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
This plugin will reduce Browserslist size from 150 KB to 6 KB. But you loose
|
||||
`> 1% in US` queries support.
|
||||
|
||||
## JS API
|
||||
|
||||
```js
|
||||
var browserslist = require('browserslist');
|
||||
|
||||
// Your CSS/JS build tool code
|
||||
var process = function (source, opts) {
|
||||
var browsers = browserslist(opts.browsers, {
|
||||
stats: opts.stats,
|
||||
path: opts.file,
|
||||
env: opts.env
|
||||
});
|
||||
// Your code to add features for selected browsers
|
||||
}
|
||||
```
|
||||
|
||||
Queries can be a string `"> 5%, last 1 version"`
|
||||
or an array `['> 5%', 'last 1 version']`.
|
||||
|
||||
If a query is missing, Browserslist will look for a config file.
|
||||
You can provide a `path` option (that can be a file) to find the config file
|
||||
relatively to it.
|
||||
|
||||
For non-JS environment and debug purpose you can use CLI tool:
|
||||
|
||||
```sh
|
||||
browserslist "> 1%, last 2 versions"
|
||||
```
|
||||
|
||||
## Coverage
|
||||
|
||||
You can get total users coverage for selected browsers by JS API:
|
||||
|
||||
```js
|
||||
browserslist.coverage(browserslist('> 1%')) //=> 81.4
|
||||
```
|
||||
|
||||
```js
|
||||
browserslist.coverage(browserslist('> 1% in US'), 'US') //=> 83.1
|
||||
```
|
||||
|
||||
Or by CLI:
|
||||
|
||||
```sh
|
||||
$ browserslist --coverage "> 1%"
|
||||
These browsers account for 81.4% of all users globally
|
||||
```
|
||||
|
||||
```sh
|
||||
$ browserslist --coverage=US "> 1% in US"
|
||||
These browsers account for 83.1% of all users in the US
|
||||
```
|
||||
|
||||
## Cache
|
||||
|
||||
Browserslist caches the configuration it reads from `package.json` and
|
||||
`browserslist` files, as well as knowledge about the existence of files,
|
||||
for the duration of the hosting process.
|
||||
|
||||
To clear these caches, use:
|
||||
|
||||
```js
|
||||
browserslist.clearCaches();
|
||||
```
|
||||
|
||||
To disable the caching altogether, set the `BROWSERSLIST_DISABLE_CACHE`
|
||||
environment variable.
|
||||
+29
@@ -0,0 +1,29 @@
|
||||
var BrowserslistError = require('./error')
|
||||
|
||||
function noop () { }
|
||||
|
||||
module.exports = {
|
||||
loadQueries: function loadQueries () {
|
||||
throw new BrowserslistError(
|
||||
'Sharable configs are not supported in client-side build of Browserslist')
|
||||
},
|
||||
|
||||
getStat: function getStat (opts) {
|
||||
return opts.stats
|
||||
},
|
||||
|
||||
loadConfig: function loadConfig (opts) {
|
||||
if (opts.config) {
|
||||
throw new BrowserslistError(
|
||||
'Browserslist config are not supported in client-side build')
|
||||
}
|
||||
},
|
||||
|
||||
parseConfig: noop,
|
||||
|
||||
readConfig: noop,
|
||||
|
||||
findConfig: noop,
|
||||
|
||||
clearCaches: noop
|
||||
}
|
||||
+103
@@ -0,0 +1,103 @@
|
||||
#!/usr/bin/env node
|
||||
|
||||
var browserslist = require('./')
|
||||
var pkg = require('./package.json')
|
||||
var args = process.argv.slice(2)
|
||||
|
||||
var USAGE = 'Usage:\n' +
|
||||
' ' + pkg.name + '\n' +
|
||||
' ' + pkg.name + ' "QUERIES"\n' +
|
||||
' ' + pkg.name + ' --config="path/to/browserlist/file"\n' +
|
||||
' ' + pkg.name + ' --coverage "QUERIES"\n' +
|
||||
' ' + pkg.name + ' --coverage=US "QUERIES"\n' +
|
||||
' ' + pkg.name + ' --env="environment name defined in config"\n' +
|
||||
' ' + pkg.name + ' --stats="path/to/browserlist/stats/file"'
|
||||
|
||||
function isArg (arg) {
|
||||
return args.some(function (str) {
|
||||
return str === arg || str.indexOf(arg + '=') === 0
|
||||
})
|
||||
}
|
||||
|
||||
function error (msg) {
|
||||
process.stderr.write(pkg.name + ': ' + msg + '\n')
|
||||
process.exit(1)
|
||||
}
|
||||
|
||||
if (isArg('--help') || isArg('-h')) {
|
||||
process.stdout.write(pkg.description + '.\n\n' + USAGE + '\n')
|
||||
} else if (isArg('--version') || isArg('-v')) {
|
||||
process.stdout.write(pkg.name + ' ' + pkg.version + '\n')
|
||||
} else {
|
||||
var mode = 'browsers'
|
||||
var opts = { }
|
||||
var queries
|
||||
var country
|
||||
|
||||
for (var i = 0; i < args.length; i++) {
|
||||
if (args[i][0] !== '-') {
|
||||
queries = args[i].replace(/^['"]|['"]$/g, '')
|
||||
continue
|
||||
}
|
||||
|
||||
var arg = args[i].split('=')
|
||||
var name = arg[0]
|
||||
var value = arg[1]
|
||||
|
||||
if (value) value = value.replace(/^['"]|['"]$/g, '')
|
||||
|
||||
if (name === '--config' || name === '-b') {
|
||||
opts.config = value
|
||||
} else if (name === '--env' || name === '-e') {
|
||||
opts.env = value
|
||||
} else if (name === '--stats' || name === '-s') {
|
||||
opts.stats = value
|
||||
} else if (name === '--coverage' || name === '-c') {
|
||||
mode = 'coverage'
|
||||
if (value) country = value
|
||||
} else {
|
||||
error('Unknown arguments ' + args[i] + '.\n\n' + USAGE)
|
||||
}
|
||||
}
|
||||
|
||||
if (!queries && !opts.config) {
|
||||
if (browserslist.findConfig(process.cwd())) {
|
||||
opts.path = process.cwd()
|
||||
} else {
|
||||
error(
|
||||
'Browserslist config did not found. ' +
|
||||
'Define queries or config path.' +
|
||||
'\n\n' + USAGE
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
var browsers
|
||||
try {
|
||||
browsers = browserslist(queries, opts)
|
||||
} catch (e) {
|
||||
if (e.name === 'BrowserslistError') {
|
||||
error(e.message)
|
||||
} else {
|
||||
throw e
|
||||
}
|
||||
}
|
||||
|
||||
if (mode === 'browsers') {
|
||||
browsers.forEach(function (browser) {
|
||||
process.stdout.write(browser + '\n')
|
||||
})
|
||||
} else {
|
||||
var result = browserslist.coverage(browsers, country)
|
||||
var round = Math.round(result * 100) / 100.0
|
||||
|
||||
var end = 'globally'
|
||||
if (country && country !== 'global') {
|
||||
end = 'in the ' + country.toUpperCase()
|
||||
}
|
||||
|
||||
process.stdout.write(
|
||||
'These browsers account for ' + round + '% of all users ' +
|
||||
end + '\n')
|
||||
}
|
||||
}
|
||||
+12
@@ -0,0 +1,12 @@
|
||||
function BrowserslistError (message) {
|
||||
this.name = 'BrowserslistError'
|
||||
this.message = message || ''
|
||||
this.browserslist = true
|
||||
if (Error.captureStackTrace) {
|
||||
Error.captureStackTrace(this, BrowserslistError)
|
||||
}
|
||||
}
|
||||
|
||||
BrowserslistError.prototype = Error.prototype
|
||||
|
||||
module.exports = BrowserslistError
|
||||
+671
@@ -0,0 +1,671 @@
|
||||
var path = require('path')
|
||||
var e2c = require('electron-to-chromium/versions')
|
||||
|
||||
var agents = require('caniuse-lite/dist/unpacker/agents').agents
|
||||
var region = require('caniuse-lite/dist/unpacker/region').default
|
||||
|
||||
var BrowserslistError = require('./error')
|
||||
var env = require('./node') // Will load browser.js in webpack
|
||||
|
||||
var FLOAT_RANGE = /^\d+(\.\d+)?(-\d+(\.\d+)?)*$/
|
||||
|
||||
function normalize (versions) {
|
||||
return versions.filter(function (version) {
|
||||
return typeof version === 'string'
|
||||
})
|
||||
}
|
||||
|
||||
function nameMapper (name) {
|
||||
return function mapName (version) {
|
||||
return name + ' ' + version
|
||||
}
|
||||
}
|
||||
|
||||
function getMajor (version) {
|
||||
return parseInt(version.split('.')[0])
|
||||
}
|
||||
|
||||
function getMajorVersions (released, number) {
|
||||
if (released.length === 0) return []
|
||||
var minimum = getMajor(released[released.length - 1]) - parseInt(number) + 1
|
||||
var selected = []
|
||||
for (var i = released.length - 1; i >= 0; i--) {
|
||||
if (minimum > getMajor(released[i])) break
|
||||
selected.unshift(released[i])
|
||||
}
|
||||
return selected
|
||||
}
|
||||
|
||||
function uniq (array) {
|
||||
var filtered = []
|
||||
for (var i = 0; i < array.length; i++) {
|
||||
if (filtered.indexOf(array[i]) === -1) filtered.push(array[i])
|
||||
}
|
||||
return filtered
|
||||
}
|
||||
|
||||
// Helpers
|
||||
|
||||
function fillUsage (result, name, data) {
|
||||
for (var i in data) {
|
||||
result[name + ' ' + i] = data[i]
|
||||
}
|
||||
}
|
||||
|
||||
function generateFilter (sign, version) {
|
||||
version = parseFloat(version)
|
||||
if (sign === '>') {
|
||||
return function (v) {
|
||||
return parseFloat(v) > version
|
||||
}
|
||||
} else if (sign === '>=') {
|
||||
return function (v) {
|
||||
return parseFloat(v) >= version
|
||||
}
|
||||
} else if (sign === '<') {
|
||||
return function (v) {
|
||||
return parseFloat(v) < version
|
||||
}
|
||||
} else {
|
||||
return function (v) {
|
||||
return parseFloat(v) <= version
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function compareStrings (a, b) {
|
||||
if (a < b) return -1
|
||||
if (a > b) return +1
|
||||
return 0
|
||||
}
|
||||
|
||||
function normalizeVersion (data, version) {
|
||||
if (data.versions.indexOf(version) !== -1) {
|
||||
return version
|
||||
} else if (browserslist.versionAliases[data.name][version]) {
|
||||
return browserslist.versionAliases[data.name][version]
|
||||
} else if (data.versions.length === 1) {
|
||||
return data.versions[0]
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
function loadCountryStatistics (country) {
|
||||
country = country.replace(/[^\w-]/g, '')
|
||||
if (!browserslist.usage[country]) {
|
||||
var usage = { }
|
||||
// eslint-disable-next-line security/detect-non-literal-require
|
||||
var compressed = require('caniuse-lite/data/regions/' + country + '.js')
|
||||
var data = region(compressed)
|
||||
for (var i in data) {
|
||||
fillUsage(usage, i, data[i])
|
||||
}
|
||||
browserslist.usage[country] = usage
|
||||
}
|
||||
}
|
||||
|
||||
function filterByYear (since) {
|
||||
return Object.keys(agents).reduce(function (selected, name) {
|
||||
var data = byName(name)
|
||||
if (!data) return selected
|
||||
var versions = Object.keys(data.releaseDate).filter(function (v) {
|
||||
return data.releaseDate[v] >= since
|
||||
})
|
||||
return selected.concat(versions.map(nameMapper(data.name)))
|
||||
}, [])
|
||||
}
|
||||
|
||||
function byName (name) {
|
||||
name = name.toLowerCase()
|
||||
name = browserslist.aliases[name] || name
|
||||
return browserslist.data[name]
|
||||
}
|
||||
|
||||
function checkName (name) {
|
||||
var data = byName(name)
|
||||
if (!data) throw new BrowserslistError('Unknown browser ' + name)
|
||||
return data
|
||||
}
|
||||
|
||||
function resolve (queries, context) {
|
||||
return queries.reduce(function (result, selection, index) {
|
||||
selection = selection.trim()
|
||||
if (selection === '') return result
|
||||
|
||||
var isExclude = selection.indexOf('not ') === 0
|
||||
if (isExclude) {
|
||||
if (index === 0) {
|
||||
throw new BrowserslistError(
|
||||
'Write any browsers query (for instance, `defaults`) ' +
|
||||
'before `' + selection + '`')
|
||||
}
|
||||
selection = selection.slice(4)
|
||||
}
|
||||
|
||||
for (var i = 0; i < QUERIES.length; i++) {
|
||||
var type = QUERIES[i]
|
||||
var match = selection.match(type.regexp)
|
||||
if (match) {
|
||||
var args = [context].concat(match.slice(1))
|
||||
var array = type.select.apply(browserslist, args)
|
||||
if (isExclude) {
|
||||
array = array.concat(array.map(function (j) {
|
||||
return j.replace(/\s\d+/, ' 0')
|
||||
}))
|
||||
return result.filter(function (j) {
|
||||
return array.indexOf(j) === -1
|
||||
})
|
||||
}
|
||||
return result.concat(array)
|
||||
}
|
||||
}
|
||||
|
||||
throw new BrowserslistError('Unknown browser query `' + selection + '`')
|
||||
}, [])
|
||||
}
|
||||
|
||||
/**
|
||||
* Return array of browsers by selection queries.
|
||||
*
|
||||
* @param {(string|string[])} [queries=browserslist.defaults] Browser queries.
|
||||
* @param {object} opts Options.
|
||||
* @param {string} [opts.path="."] Path to processed file.
|
||||
* It will be used to find config files.
|
||||
* @param {string} [opts.env="development"] Processing environment.
|
||||
* It will be used to take right
|
||||
* queries from config file.
|
||||
* @param {string} [opts.config] Path to config file with queries.
|
||||
* @param {object} [opts.stats] Custom browser usage statistics
|
||||
* for "> 1% in my stats" query.
|
||||
* @return {string[]} Array with browser names in Can I Use.
|
||||
*
|
||||
* @example
|
||||
* browserslist('IE >= 10, IE 8') //=> ['ie 11', 'ie 10', 'ie 8']
|
||||
*/
|
||||
function browserslist (queries, opts) {
|
||||
if (typeof opts === 'undefined') opts = { }
|
||||
|
||||
if (!opts.hasOwnProperty('path')) {
|
||||
opts.path = path.resolve ? path.resolve('.') : '.'
|
||||
}
|
||||
|
||||
if (typeof queries === 'undefined' || queries === null) {
|
||||
var config = env.loadConfig(opts)
|
||||
if (config) {
|
||||
queries = config
|
||||
} else {
|
||||
queries = browserslist.defaults
|
||||
}
|
||||
}
|
||||
|
||||
if (typeof queries === 'string') {
|
||||
queries = queries.split(/,\s*/)
|
||||
}
|
||||
|
||||
if (!Array.isArray(queries)) {
|
||||
throw new BrowserslistError(
|
||||
'Browser queries must be an array. Got ' + typeof queries + '.')
|
||||
}
|
||||
|
||||
var context = { dangerousExtend: opts.dangerousExtend }
|
||||
|
||||
var stats = env.getStat(opts)
|
||||
if (stats) {
|
||||
if ('dataByBrowser' in stats) {
|
||||
stats = stats.dataByBrowser
|
||||
}
|
||||
context.customUsage = { }
|
||||
for (var browser in stats) {
|
||||
fillUsage(context.customUsage, browser, stats[browser])
|
||||
}
|
||||
}
|
||||
|
||||
var result = resolve(queries, context).map(function (i) {
|
||||
var parts = i.split(' ')
|
||||
var name = parts[0]
|
||||
var version = parts[1]
|
||||
if (version === '0') {
|
||||
return name + ' ' + byName(name).versions[0]
|
||||
} else {
|
||||
return i
|
||||
}
|
||||
}).sort(function (name1, name2) {
|
||||
name1 = name1.split(' ')
|
||||
name2 = name2.split(' ')
|
||||
if (name1[0] === name2[0]) {
|
||||
if (FLOAT_RANGE.test(name1[1]) && FLOAT_RANGE.test(name2[1])) {
|
||||
return parseFloat(name2[1]) - parseFloat(name1[1])
|
||||
} else {
|
||||
return compareStrings(name2[1], name1[1])
|
||||
}
|
||||
} else {
|
||||
return compareStrings(name1[0], name2[0])
|
||||
}
|
||||
})
|
||||
|
||||
return uniq(result)
|
||||
}
|
||||
|
||||
// Will be filled by Can I Use data below
|
||||
browserslist.data = { }
|
||||
browserslist.usage = {
|
||||
global: { },
|
||||
custom: null
|
||||
}
|
||||
|
||||
// Default browsers query
|
||||
browserslist.defaults = [
|
||||
'> 1%',
|
||||
'last 2 versions',
|
||||
'Firefox ESR'
|
||||
]
|
||||
|
||||
// Browser names aliases
|
||||
browserslist.aliases = {
|
||||
fx: 'firefox',
|
||||
ff: 'firefox',
|
||||
ios: 'ios_saf',
|
||||
explorer: 'ie',
|
||||
blackberry: 'bb',
|
||||
explorermobile: 'ie_mob',
|
||||
operamini: 'op_mini',
|
||||
operamobile: 'op_mob',
|
||||
chromeandroid: 'and_chr',
|
||||
firefoxandroid: 'and_ff',
|
||||
ucandroid: 'and_uc',
|
||||
qqandroid: 'and_qq'
|
||||
}
|
||||
|
||||
// Aliases to work with joined versions like `ios_saf 7.0-7.1`
|
||||
browserslist.versionAliases = { }
|
||||
|
||||
browserslist.clearCaches = env.clearCaches
|
||||
browserslist.parseConfig = env.parseConfig
|
||||
browserslist.readConfig = env.readConfig
|
||||
browserslist.findConfig = env.findConfig
|
||||
|
||||
/**
|
||||
* Return browsers market coverage.
|
||||
*
|
||||
* @param {string[]} browsers Browsers names in Can I Use.
|
||||
* @param {string} [country="global"] Which country statistics should be used.
|
||||
*
|
||||
* @return {number} Total market coverage for all selected browsers.
|
||||
*
|
||||
* @example
|
||||
* browserslist.coverage(browserslist('> 1% in US'), 'US') //=> 83.1
|
||||
*/
|
||||
browserslist.coverage = function (browsers, country) {
|
||||
if (country && country !== 'global') {
|
||||
if (country.length > 2) {
|
||||
country = country.toLowerCase()
|
||||
} else {
|
||||
country = country.toUpperCase()
|
||||
}
|
||||
loadCountryStatistics(country)
|
||||
} else {
|
||||
country = 'global'
|
||||
}
|
||||
|
||||
return browsers.reduce(function (all, i) {
|
||||
var usage = browserslist.usage[country][i]
|
||||
if (usage === undefined) {
|
||||
usage = browserslist.usage[country][i.replace(/ [\d.]+$/, ' 0')]
|
||||
}
|
||||
return all + (usage || 0)
|
||||
}, 0)
|
||||
}
|
||||
|
||||
var QUERIES = [
|
||||
{
|
||||
regexp: /^last\s+(\d+)\s+major versions?$/i,
|
||||
select: function (context, versions) {
|
||||
return Object.keys(agents).reduce(function (selected, name) {
|
||||
var data = byName(name)
|
||||
if (!data) return selected
|
||||
var array = getMajorVersions(data.released, versions)
|
||||
|
||||
array = array.map(nameMapper(data.name))
|
||||
return selected.concat(array)
|
||||
}, [])
|
||||
}
|
||||
},
|
||||
{
|
||||
regexp: /^last\s+(\d+)\s+versions?$/i,
|
||||
select: function (context, versions) {
|
||||
return Object.keys(agents).reduce(function (selected, name) {
|
||||
var data = byName(name)
|
||||
if (!data) return selected
|
||||
var array = data.released.slice(-versions)
|
||||
|
||||
array = array.map(nameMapper(data.name))
|
||||
return selected.concat(array)
|
||||
}, [])
|
||||
}
|
||||
},
|
||||
{
|
||||
regexp: /^last\s+(\d+)\s+electron\s+major versions?$/i,
|
||||
select: function (context, versions) {
|
||||
var validVersions = getMajorVersions(Object.keys(e2c).reverse(), versions)
|
||||
return validVersions.map(function (i) {
|
||||
return 'chrome ' + e2c[i]
|
||||
})
|
||||
}
|
||||
},
|
||||
{
|
||||
regexp: /^last\s+(\d+)\s+(\w+)\s+major versions?$/i,
|
||||
select: function (context, versions, name) {
|
||||
var data = checkName(name)
|
||||
var validVersions = getMajorVersions(data.released, versions)
|
||||
return validVersions.map(nameMapper(data.name))
|
||||
}
|
||||
},
|
||||
{
|
||||
regexp: /^last\s+(\d+)\s+electron\s+versions?$/i,
|
||||
select: function (context, versions) {
|
||||
return Object.keys(e2c).reverse().slice(-versions).map(function (i) {
|
||||
return 'chrome ' + e2c[i]
|
||||
})
|
||||
}
|
||||
},
|
||||
{
|
||||
regexp: /^last\s+(\d+)\s+(\w+)\s+versions?$/i,
|
||||
select: function (context, versions, name) {
|
||||
var data = checkName(name)
|
||||
return data.released.slice(-versions).map(nameMapper(data.name))
|
||||
}
|
||||
},
|
||||
{
|
||||
regexp: /^unreleased\s+versions$/i,
|
||||
select: function () {
|
||||
return Object.keys(agents).reduce(function (selected, name) {
|
||||
var data = byName(name)
|
||||
if (!data) return selected
|
||||
var array = data.versions.filter(function (v) {
|
||||
return data.released.indexOf(v) === -1
|
||||
})
|
||||
|
||||
array = array.map(nameMapper(data.name))
|
||||
return selected.concat(array)
|
||||
}, [])
|
||||
}
|
||||
},
|
||||
{
|
||||
regexp: /^unreleased\s+electron\s+versions?$/i,
|
||||
select: function () {
|
||||
return []
|
||||
}
|
||||
},
|
||||
{
|
||||
regexp: /^unreleased\s+(\w+)\s+versions?$/i,
|
||||
select: function (context, name) {
|
||||
var data = checkName(name)
|
||||
return data.versions.filter(function (v) {
|
||||
return data.released.indexOf(v) === -1
|
||||
}).map(nameMapper(data.name))
|
||||
}
|
||||
},
|
||||
{
|
||||
regexp: /^last\s+(\d+)\s+years?$/i,
|
||||
select: function (context, years) {
|
||||
var date = new Date()
|
||||
var since = date.setFullYear(date.getFullYear() - years) / 1000
|
||||
|
||||
return filterByYear(since)
|
||||
}
|
||||
},
|
||||
{
|
||||
regexp: /^since (\d+)(?:-(\d+))?(?:-(\d+))?$/i,
|
||||
select: function (context, year, month, date) {
|
||||
year = parseInt(year)
|
||||
month = parseInt(month || '01') - 1
|
||||
date = parseInt(date || '01')
|
||||
var since = Date.UTC(year, month, date, 0, 0, 0) / 1000
|
||||
|
||||
return filterByYear(since)
|
||||
}
|
||||
},
|
||||
{
|
||||
regexp: /^(>=?|<=?)\s*(\d*\.?\d+)%$/,
|
||||
select: function (context, sign, popularity) {
|
||||
popularity = parseFloat(popularity)
|
||||
var usage = browserslist.usage.global
|
||||
|
||||
return Object.keys(usage).reduce(function (result, version) {
|
||||
if (sign === '>') {
|
||||
if (usage[version] > popularity) {
|
||||
result.push(version)
|
||||
}
|
||||
} else if (sign === '<') {
|
||||
if (usage[version] < popularity) {
|
||||
result.push(version)
|
||||
}
|
||||
} else if (sign === '<=') {
|
||||
if (usage[version] <= popularity) {
|
||||
result.push(version)
|
||||
}
|
||||
} else if (usage[version] >= popularity) {
|
||||
result.push(version)
|
||||
}
|
||||
return result
|
||||
}, [])
|
||||
}
|
||||
},
|
||||
{
|
||||
regexp: /^(>=?|<=?)\s*(\d*\.?\d+)%\s+in\s+my\s+stats$/,
|
||||
select: function (context, sign, popularity) {
|
||||
popularity = parseFloat(popularity)
|
||||
|
||||
if (!context.customUsage) {
|
||||
throw new BrowserslistError('Custom usage statistics was not provided')
|
||||
}
|
||||
|
||||
var usage = context.customUsage
|
||||
|
||||
return Object.keys(usage).reduce(function (result, version) {
|
||||
if (sign === '>') {
|
||||
if (usage[version] > popularity) {
|
||||
result.push(version)
|
||||
}
|
||||
} else if (sign === '<') {
|
||||
if (usage[version] < popularity) {
|
||||
result.push(version)
|
||||
}
|
||||
} else if (sign === '<=') {
|
||||
if (usage[version] <= popularity) {
|
||||
result.push(version)
|
||||
}
|
||||
} else if (usage[version] >= popularity) {
|
||||
result.push(version)
|
||||
}
|
||||
return result
|
||||
}, [])
|
||||
}
|
||||
},
|
||||
{
|
||||
regexp: /^(>=?|<=?)\s*(\d*\.?\d+)%\s+in\s+((alt-)?\w\w)$/,
|
||||
select: function (context, sign, popularity, place) {
|
||||
popularity = parseFloat(popularity)
|
||||
|
||||
if (place.length === 2) {
|
||||
place = place.toUpperCase()
|
||||
} else {
|
||||
place = place.toLowerCase()
|
||||
}
|
||||
|
||||
loadCountryStatistics(place)
|
||||
var usage = browserslist.usage[place]
|
||||
|
||||
return Object.keys(usage).reduce(function (result, version) {
|
||||
if (sign === '>') {
|
||||
if (usage[version] > popularity) {
|
||||
result.push(version)
|
||||
}
|
||||
} else if (sign === '<') {
|
||||
if (usage[version] < popularity) {
|
||||
result.push(version)
|
||||
}
|
||||
} else if (sign === '<=') {
|
||||
if (usage[version] <= popularity) {
|
||||
result.push(version)
|
||||
}
|
||||
} else if (usage[version] >= popularity) {
|
||||
result.push(version)
|
||||
}
|
||||
return result
|
||||
}, [])
|
||||
}
|
||||
},
|
||||
{
|
||||
regexp: /^electron\s+([\d.]+)\s*-\s*([\d.]+)$/i,
|
||||
select: function (context, from, to) {
|
||||
if (!e2c[from]) {
|
||||
throw new BrowserslistError('Unknown version ' + from + ' of electron')
|
||||
}
|
||||
if (!e2c[to]) {
|
||||
throw new BrowserslistError('Unknown version ' + to + ' of electron')
|
||||
}
|
||||
|
||||
from = parseFloat(from)
|
||||
to = parseFloat(to)
|
||||
|
||||
return Object.keys(e2c).filter(function (i) {
|
||||
var parsed = parseFloat(i)
|
||||
return parsed >= from && parsed <= to
|
||||
}).map(function (i) {
|
||||
return 'chrome ' + e2c[i]
|
||||
})
|
||||
}
|
||||
},
|
||||
{
|
||||
regexp: /^(\w+)\s+([\d.]+)\s*-\s*([\d.]+)$/i,
|
||||
select: function (context, name, from, to) {
|
||||
var data = checkName(name)
|
||||
from = parseFloat(normalizeVersion(data, from) || from)
|
||||
to = parseFloat(normalizeVersion(data, to) || to)
|
||||
|
||||
function filter (v) {
|
||||
var parsed = parseFloat(v)
|
||||
return parsed >= from && parsed <= to
|
||||
}
|
||||
|
||||
return data.released.filter(filter).map(nameMapper(data.name))
|
||||
}
|
||||
},
|
||||
{
|
||||
regexp: /^electron\s*(>=?|<=?)\s*([\d.]+)$/i,
|
||||
select: function (context, sign, version) {
|
||||
return Object.keys(e2c)
|
||||
.filter(generateFilter(sign, version))
|
||||
.map(function (i) {
|
||||
return 'chrome ' + e2c[i]
|
||||
})
|
||||
}
|
||||
},
|
||||
{
|
||||
regexp: /^(\w+)\s*(>=?|<=?)\s*([\d.]+)$/,
|
||||
select: function (context, name, sign, version) {
|
||||
var data = checkName(name)
|
||||
var alias = browserslist.versionAliases[data.name][version]
|
||||
if (alias) {
|
||||
version = alias
|
||||
}
|
||||
return data.released
|
||||
.filter(generateFilter(sign, version))
|
||||
.map(function (v) {
|
||||
return data.name + ' ' + v
|
||||
})
|
||||
}
|
||||
},
|
||||
{
|
||||
regexp: /^(firefox|ff|fx)\s+esr$/i,
|
||||
select: function () {
|
||||
return ['firefox 52']
|
||||
}
|
||||
},
|
||||
{
|
||||
regexp: /(operamini|op_mini)\s+all/i,
|
||||
select: function () {
|
||||
return ['op_mini all']
|
||||
}
|
||||
},
|
||||
{
|
||||
regexp: /^electron\s+([\d.]+)$/i,
|
||||
select: function (context, version) {
|
||||
var chrome = e2c[version]
|
||||
if (!chrome) {
|
||||
throw new BrowserslistError(
|
||||
'Unknown version ' + version + ' of electron')
|
||||
}
|
||||
return ['chrome ' + chrome]
|
||||
}
|
||||
},
|
||||
{
|
||||
regexp: /^(\w+)\s+(tp|[\d.]+)$/i,
|
||||
select: function (context, name, version) {
|
||||
if (/^tp$/i.test(version)) version = 'TP'
|
||||
var data = checkName(name)
|
||||
var alias = normalizeVersion(data, version)
|
||||
if (alias) {
|
||||
version = alias
|
||||
} else {
|
||||
if (version.indexOf('.') === -1) {
|
||||
alias = version + '.0'
|
||||
} else if (/\.0$/.test(version)) {
|
||||
alias = version.replace(/\.0$/, '')
|
||||
}
|
||||
alias = normalizeVersion(data, alias)
|
||||
if (alias) {
|
||||
version = alias
|
||||
} else {
|
||||
throw new BrowserslistError(
|
||||
'Unknown version ' + version + ' of ' + name)
|
||||
}
|
||||
}
|
||||
return [data.name + ' ' + version]
|
||||
}
|
||||
},
|
||||
{
|
||||
regexp: /^extends (.+)$/i,
|
||||
select: function (context, name) {
|
||||
return resolve(env.loadQueries(context, name), context)
|
||||
}
|
||||
},
|
||||
{
|
||||
regexp: /^defaults$/i,
|
||||
select: function () {
|
||||
return browserslist(browserslist.defaults)
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
// Get and convert Can I Use data
|
||||
|
||||
(function () {
|
||||
for (var name in agents) {
|
||||
var browser = agents[name]
|
||||
browserslist.data[name] = {
|
||||
name: name,
|
||||
versions: normalize(agents[name].versions),
|
||||
released: normalize(agents[name].versions.slice(0, -3)),
|
||||
releaseDate: agents[name].release_date
|
||||
}
|
||||
fillUsage(browserslist.usage.global, name, browser.usage_global)
|
||||
|
||||
browserslist.versionAliases[name] = { }
|
||||
for (var i = 0; i < browser.versions.length; i++) {
|
||||
var full = browser.versions[i]
|
||||
if (!full) continue
|
||||
|
||||
if (full.indexOf('-') !== -1) {
|
||||
var interval = full.split('-')
|
||||
for (var j = 0; j < interval.length; j++) {
|
||||
browserslist.versionAliases[name][interval[j]] = full
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}())
|
||||
|
||||
module.exports = browserslist
|
||||
+215
@@ -0,0 +1,215 @@
|
||||
var path = require('path')
|
||||
var fs = require('fs')
|
||||
|
||||
var BrowserslistError = require('./error')
|
||||
|
||||
var IS_SECTION = /^\s*\[(.+)\]\s*$/
|
||||
var CONFIG_PATTERN = /^browserslist-config-/
|
||||
var SCOPED_CONFIG__PATTERN = /@[^./]+\/browserslist-config(-|$)/
|
||||
|
||||
var filenessCache = { }
|
||||
var configCache = { }
|
||||
|
||||
function checkExtend (name) {
|
||||
var use = ' Use `dangerousExtend` option to disable.'
|
||||
if (!CONFIG_PATTERN.test(name) && !SCOPED_CONFIG__PATTERN.test(name)) {
|
||||
throw new BrowserslistError(
|
||||
'Browserslist config needs `browserslist-config-` prefix. ' + use)
|
||||
}
|
||||
if (name.indexOf('.') !== -1) {
|
||||
throw new BrowserslistError(
|
||||
'`.` not allowed in Browserslist config name. ' + use)
|
||||
}
|
||||
if (name.indexOf('node_modules') !== -1) {
|
||||
throw new BrowserslistError(
|
||||
'`node_modules` not allowed in Browserslist config.' + use)
|
||||
}
|
||||
}
|
||||
|
||||
function isFile (file) {
|
||||
if (file in filenessCache) {
|
||||
return filenessCache[file]
|
||||
}
|
||||
var result = fs.existsSync(file) && fs.statSync(file).isFile()
|
||||
if (!process.env.BROWSERSLIST_DISABLE_CACHE) {
|
||||
filenessCache[file] = result
|
||||
}
|
||||
return result
|
||||
}
|
||||
|
||||
function eachParent (file, callback) {
|
||||
var loc = path.resolve(file)
|
||||
do {
|
||||
var result = callback(loc)
|
||||
if (typeof result !== 'undefined') return result
|
||||
} while (loc !== (loc = path.dirname(loc)))
|
||||
return undefined
|
||||
}
|
||||
|
||||
function pickEnv (config, opts) {
|
||||
if (typeof config !== 'object') return config
|
||||
|
||||
var name
|
||||
if (typeof opts.env === 'string') {
|
||||
name = opts.env
|
||||
} else if (process.env.BROWSERSLIST_ENV) {
|
||||
name = process.env.BROWSERSLIST_ENV
|
||||
} else if (process.env.NODE_ENV) {
|
||||
name = process.env.NODE_ENV
|
||||
} else {
|
||||
name = 'development'
|
||||
}
|
||||
|
||||
return config[name] || config.defaults
|
||||
}
|
||||
|
||||
function parsePackage (file) {
|
||||
var config = JSON.parse(fs.readFileSync(file))
|
||||
if (config.browserlist && !config.browserslist) {
|
||||
throw new BrowserslistError(
|
||||
'`browserlist` key instead of `browserslist` in ' + file)
|
||||
}
|
||||
var list = config.browserslist
|
||||
if (typeof list === 'object' && list.length) {
|
||||
list = { defaults: list }
|
||||
}
|
||||
return list
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
loadQueries: function loadQueries (context, name) {
|
||||
if (!context.dangerousExtend) checkExtend(name)
|
||||
// eslint-disable-next-line security/detect-non-literal-require
|
||||
var queries = require(name)
|
||||
if (!Array.isArray(queries)) {
|
||||
throw new BrowserslistError(
|
||||
'`' + name + '` config exports not an array of queries')
|
||||
}
|
||||
return queries
|
||||
},
|
||||
|
||||
getStat: function getStat (opts) {
|
||||
var stats
|
||||
if (opts.stats) {
|
||||
stats = opts.stats
|
||||
} else if (process.env.BROWSERSLIST_STATS) {
|
||||
stats = process.env.BROWSERSLIST_STATS
|
||||
} else if (opts.path && path.resolve && fs.existsSync) {
|
||||
stats = eachParent(opts.path, function (dir) {
|
||||
var file = path.join(dir, 'browserslist-stats.json')
|
||||
return isFile(file) ? file : undefined
|
||||
})
|
||||
}
|
||||
|
||||
if (typeof stats === 'string') {
|
||||
try {
|
||||
stats = JSON.parse(fs.readFileSync(stats))
|
||||
} catch (e) {
|
||||
throw new BrowserslistError('Can\'t read ' + stats)
|
||||
}
|
||||
}
|
||||
|
||||
return stats
|
||||
},
|
||||
|
||||
loadConfig: function loadConfig (opts) {
|
||||
if (process.env.BROWSERSLIST) {
|
||||
return process.env.BROWSERSLIST
|
||||
} else if (opts.config || process.env.BROWSERSLIST_CONFIG) {
|
||||
var file = opts.config || process.env.BROWSERSLIST_CONFIG
|
||||
if (path.basename(file) === 'package.json') {
|
||||
return pickEnv(parsePackage(file), opts)
|
||||
} else {
|
||||
return pickEnv(module.exports.readConfig(file), opts)
|
||||
}
|
||||
} else if (opts.path) {
|
||||
return pickEnv(module.exports.findConfig(opts.path), opts)
|
||||
} else {
|
||||
return undefined
|
||||
}
|
||||
},
|
||||
|
||||
parseConfig: function parseConfig (string) {
|
||||
var result = { defaults: [] }
|
||||
var section = 'defaults'
|
||||
|
||||
string.toString()
|
||||
.replace(/#[^\n]*/g, '')
|
||||
.split(/\n/)
|
||||
.map(function (line) {
|
||||
return line.trim()
|
||||
})
|
||||
.filter(function (line) {
|
||||
return line !== ''
|
||||
})
|
||||
.forEach(function (line) {
|
||||
if (IS_SECTION.test(line)) {
|
||||
section = line.match(IS_SECTION)[1].trim()
|
||||
result[section] = result[section] || []
|
||||
} else {
|
||||
result[section].push(line)
|
||||
}
|
||||
})
|
||||
|
||||
return result
|
||||
},
|
||||
|
||||
readConfig: function readConfig (file) {
|
||||
if (!isFile(file)) {
|
||||
throw new BrowserslistError('Can\'t read ' + file + ' config')
|
||||
}
|
||||
return module.exports.parseConfig(fs.readFileSync(file))
|
||||
},
|
||||
|
||||
findConfig: function findConfig (from) {
|
||||
from = path.resolve(from)
|
||||
|
||||
var cacheKey = isFile(from) ? path.dirname(from) : from
|
||||
if (cacheKey in configCache) {
|
||||
return configCache[cacheKey]
|
||||
}
|
||||
|
||||
var resolved = eachParent(from, function (dir) {
|
||||
var config = path.join(dir, 'browserslist')
|
||||
var pkg = path.join(dir, 'package.json')
|
||||
var rc = path.join(dir, '.browserslistrc')
|
||||
|
||||
var pkgBrowserslist
|
||||
if (isFile(pkg)) {
|
||||
try {
|
||||
pkgBrowserslist = parsePackage(pkg)
|
||||
} catch (e) {
|
||||
if (e.name === 'BrowserslistError') throw e
|
||||
console.warn(
|
||||
'[Browserslist] Could not parse ' + pkg + '. Ignoring it.')
|
||||
}
|
||||
}
|
||||
|
||||
if (isFile(config) && pkgBrowserslist) {
|
||||
throw new BrowserslistError(
|
||||
dir + ' contains both browserslist and package.json with browsers')
|
||||
} else if (isFile(rc) && pkgBrowserslist) {
|
||||
throw new BrowserslistError(
|
||||
dir + ' contains both .browserslistrc and package.json with browsers')
|
||||
} else if (isFile(config) && isFile(rc)) {
|
||||
throw new BrowserslistError(
|
||||
dir + ' contains both .browserslistrc and browserslist')
|
||||
} else if (isFile(config)) {
|
||||
return module.exports.readConfig(config)
|
||||
} else if (isFile(rc)) {
|
||||
return module.exports.readConfig(rc)
|
||||
} else {
|
||||
return pkgBrowserslist
|
||||
}
|
||||
})
|
||||
if (!process.env.BROWSERSLIST_DISABLE_CACHE) {
|
||||
configCache[cacheKey] = resolved
|
||||
}
|
||||
return resolved
|
||||
},
|
||||
|
||||
clearCaches: function clearCaches () {
|
||||
filenessCache = { }
|
||||
configCache = { }
|
||||
}
|
||||
}
|
||||
+86
@@ -0,0 +1,86 @@
|
||||
{
|
||||
"name": "browserslist",
|
||||
"version": "2.11.3",
|
||||
"description": "Share target browsers between different front-end tools, like Autoprefixer, Stylelint and babel-env-preset",
|
||||
"keywords": [
|
||||
"caniuse",
|
||||
"browsers",
|
||||
"target"
|
||||
],
|
||||
"author": "Andrey Sitnik <andrey@sitnik.ru>",
|
||||
"license": "MIT",
|
||||
"repository": "ai/browserslist",
|
||||
"dependencies": {
|
||||
"caniuse-lite": "^1.0.30000792",
|
||||
"electron-to-chromium": "^1.3.30"
|
||||
},
|
||||
"bin": "./cli.js",
|
||||
"devDependencies": {
|
||||
"cross-spawn": "^5.1.0",
|
||||
"eslint": "^4.15.0",
|
||||
"eslint-ci": "^0.1.1",
|
||||
"eslint-config-logux": "^17.0.0",
|
||||
"eslint-config-standard": "^10.2.1",
|
||||
"eslint-plugin-es5": "^1.2.0",
|
||||
"eslint-plugin-import": "^2.8.0",
|
||||
"eslint-plugin-jest": "^21.6.2",
|
||||
"eslint-plugin-node": "^5.2.1",
|
||||
"eslint-plugin-promise": "^3.6.0",
|
||||
"eslint-plugin-security": "^1.4.0",
|
||||
"eslint-plugin-standard": "^3.0.1",
|
||||
"jest": "^22.0.6",
|
||||
"lint-staged": "^6.0.0",
|
||||
"pre-commit": "^1.1.3",
|
||||
"size-limit": "^0.14.0",
|
||||
"yaspeller-ci": "^1.0.0"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"extends": "eslint-config-logux/browser",
|
||||
"rules": {
|
||||
"security/detect-unsafe-regex": "off",
|
||||
"global-require": "off"
|
||||
},
|
||||
"overrides": {
|
||||
"files": [
|
||||
"*.test.js"
|
||||
],
|
||||
"rules": {
|
||||
"es5/no-arrow-functions": "off"
|
||||
}
|
||||
}
|
||||
},
|
||||
"jest": {
|
||||
"testEnvironment": "node",
|
||||
"coverageThreshold": {
|
||||
"global": {
|
||||
"statements": 100
|
||||
}
|
||||
},
|
||||
"modulePathIgnorePatterns": [
|
||||
"<rootDir>/test/fixtures"
|
||||
]
|
||||
},
|
||||
"size-limit": [
|
||||
{
|
||||
"path": "index.js",
|
||||
"limit": "160 KB"
|
||||
}
|
||||
],
|
||||
"scripts": {
|
||||
"lint-staged": "lint-staged",
|
||||
"spellcheck": "yaspeller-ci README.md CHANGELOG.md",
|
||||
"lint": "eslint-ci *.js test/*.js __mocks__/*.js",
|
||||
"test": "jest --coverage && yarn lint && yarn spellcheck && size-limit"
|
||||
},
|
||||
"lint-staged": {
|
||||
"*.md": "yaspeller-ci",
|
||||
"*.js": "eslint"
|
||||
},
|
||||
"browser": {
|
||||
"./node.js": "./browser.js",
|
||||
"path": false
|
||||
},
|
||||
"pre-commit": [
|
||||
"lint-staged"
|
||||
]
|
||||
}
|
||||
+552
@@ -0,0 +1,552 @@
|
||||
# Change Log
|
||||
This project adheres to [Semantic Versioning](http://semver.org/).
|
||||
|
||||
## 6.0.23
|
||||
* Fix parsing nested at-rules without semicolon, params, and spaces.
|
||||
|
||||
## 6.0.22
|
||||
* Fix `Node#prev` and `Node#next` on missed parent.
|
||||
|
||||
## 6.0.21
|
||||
* Rename Chinese docs to fix `yarnpkg.com` issue.
|
||||
|
||||
## 6.0.20
|
||||
* Better error message on `null` as input CSS.
|
||||
|
||||
## 6.0.19
|
||||
* Fix TypeScript definitions for source maps (by Oleh Kuchuk).
|
||||
* Fix `source` field in TypeScript definitions (by Sylvain Pollet-Villard).
|
||||
|
||||
## 6.0.18
|
||||
* Use primitive object in TypeScript definitions (by Sylvain Pollet-Villard).
|
||||
|
||||
## 6.0.17
|
||||
* Fix parsing comment in selector between word tokens (by Oleh Kuchuk).
|
||||
|
||||
## 6.0.16
|
||||
* Fix warning text (by Michael Keller).
|
||||
|
||||
## 6.0.15
|
||||
* Add warning about missed `from` option on `process().then()` call.
|
||||
* Add IE 10 support.
|
||||
|
||||
## 6.0.14
|
||||
* Fix TypeScript definitions (by Jed Mao).
|
||||
|
||||
## 6.0.13
|
||||
* Fix TypeScript definitions for case of multiple PostCSS versions
|
||||
in `node_modules` (by Chris Eppstein).
|
||||
* Use `source-map` 0.6.
|
||||
|
||||
## 6.0.12
|
||||
* Don’t copy `*` hack to declaration indent.
|
||||
|
||||
## 6.0.11
|
||||
* Add upper case `!IMPORTANT` support.
|
||||
|
||||
## 6.0.10
|
||||
* Reduce PostCSS size in webpack bundle.
|
||||
|
||||
## 6.0.9
|
||||
* Improve error message for plugin with old PostCSS (by Igor Adamenko).
|
||||
|
||||
## 6.0.8
|
||||
* Fix Node.js 4.2.2 support.
|
||||
|
||||
## 6.0.7
|
||||
* Fix base64 decoding for old Node.js and browser.
|
||||
|
||||
## 6.0.6
|
||||
* Fix `end` position in at-rule without semicolon (by Oleh Kuchuk).
|
||||
|
||||
## 6.0.5
|
||||
* Move Babel config from `package.json` for `node_modules` compiling cases.
|
||||
|
||||
## 6.0.4
|
||||
* Fix parsing `;;` after rules.
|
||||
* Use Chalk 2.0.
|
||||
|
||||
## 6.0.3
|
||||
* Fix escape sequences parsing (by Oleh Kuchuk).
|
||||
* Added ability to force disable colors with an environment variable.
|
||||
* Improved color detection of some terminal apps.
|
||||
|
||||
## 6.0.2
|
||||
* Keep `raws.before` on moving `Root` children to new `Root`.
|
||||
|
||||
## 6.0.1
|
||||
* Fix parser extensibility to use it in Safe Parser.
|
||||
|
||||
## 6.0 “Marquis Orias”
|
||||
* Remove node.js 0.12 support.
|
||||
* Remove deprecated method from PostCSS 4.
|
||||
* Insert methods remove child from previous parent, instead of closing.
|
||||
* Insert methods and cloning doesn’t clean `raws` anymore.
|
||||
* Methods `moveTo`, `moveAfter`, `moveBefore` were deprecated.
|
||||
* Options was changed in `Plugin#process(css, processOptions, pluginOptions)`.
|
||||
* Add stream parser to reduce memory usage (by Oleh Kuchuk).
|
||||
* Add `before()`/`after()` shortcuts for `node.parent.insertBefore(node, x)`.
|
||||
* Add `Rule#raws.ownSemicolon` for semicolon after templates for `@apply`.
|
||||
* Use `babel-preset-env` to compile npm package.
|
||||
* Remove `js-base64` from dependencies (by Roman Dvornov).
|
||||
* Fix error message on single `:` in CSS.
|
||||
* Move tests to Jest.
|
||||
* Clean up test (by Gabriel Kalani).
|
||||
|
||||
## 5.2.18
|
||||
* Fix TypeScript definitions for case of multiple PostCSS versions
|
||||
in `node_modules` (by Chris Eppstein).
|
||||
|
||||
## 5.2.17
|
||||
* Add `postcss-sass` suggestion to syntax error on `.sass` input.
|
||||
|
||||
## 5.2.16
|
||||
* Better error on wrong argument in node constructor.
|
||||
|
||||
## 5.2.15
|
||||
* Fix TypeScript definitions (by bumbleblym).
|
||||
|
||||
## 5.2.14
|
||||
* Fix browser bundle building in webpack (by janschoenherr).
|
||||
|
||||
## 5.2.13
|
||||
* Do not add comment to important raws.
|
||||
* Fix JSDoc (by Dmitry Semigradsky).
|
||||
|
||||
## 5.2.12
|
||||
* Fix typo in deprecation message (by Garet McKinley).
|
||||
|
||||
## 5.2.11
|
||||
* Fix TypeScript definitions (by Jed Mao).
|
||||
|
||||
## 5.2.10
|
||||
* Fix TypeScript definitions (by Jed Mao).
|
||||
|
||||
## 5.2.9
|
||||
* Update TypeScript definitions (by Jed Mao).
|
||||
|
||||
## 5.2.8
|
||||
* Fix error message (by Ben Briggs).
|
||||
|
||||
## 5.2.7
|
||||
* Better error message on syntax object in plugins list.
|
||||
|
||||
## 5.2.6
|
||||
* Fix `postcss.vendor` for values with spaces (by 刘祺).
|
||||
|
||||
## 5.2.5
|
||||
* Better error message on unclosed string (by Ben Briggs).
|
||||
|
||||
## 5.2.4
|
||||
* Improve terminal CSS syntax highlight (by Simon Lydell).
|
||||
|
||||
## 5.2.3
|
||||
* Better color highlight in syntax error code frame.
|
||||
* Fix color highlight support in old systems.
|
||||
|
||||
## 5.2.2
|
||||
* Update `Processor#version`.
|
||||
|
||||
## 5.2.1
|
||||
* Fix source map path for CSS without `from` option (by Michele Locati).
|
||||
|
||||
## 5.2 “Duke Vapula”
|
||||
* Add syntax highlight to code frame in syntax error (by Andrey Popp).
|
||||
* Use Babel code frame style and size in syntax error.
|
||||
* Add `[` and `]` tokens to parse `[attr=;] {}` correctly.
|
||||
* Add `ignoreErrors` options to tokenizer (by Andrey Popp).
|
||||
* Fix error position on tab indent (by Simon Lydell).
|
||||
|
||||
## 5.1.2
|
||||
* Suggests SCSS/Less parsers on parse errors depends on file extension.
|
||||
|
||||
## 5.1.1
|
||||
* Fix TypeScript definitions (by Efremov Alexey).
|
||||
|
||||
## 5.1 “King and President Zagan”
|
||||
* Add URI in source map support (by Mark Finger).
|
||||
* Add `map.from` option (by Mark Finger).
|
||||
* Add `<no source>` mappings for nodes without source (by Bogdan Chadkin).
|
||||
* Add function value support to `map.prev` option (by Chris Montoro).
|
||||
* Add declaration value type check in shortcut creating (by 刘祺).
|
||||
* `Result#warn` now returns new created warning.
|
||||
* Don’t call plugin creator in `postcss.plugin` call.
|
||||
* Add source maps to PostCSS ES5 build.
|
||||
* Add JSDoc to PostCSS classes.
|
||||
* Clean npm package from unnecessary docs.
|
||||
|
||||
## 5.0.21
|
||||
* Fix support with input source mao with `utf8` encoding name.
|
||||
|
||||
## 5.0.20
|
||||
* Fix between raw value parsing (by David Clark).
|
||||
* Update TypeScript definitions (by Jed Mao).
|
||||
* Clean fake node.source after `append(string)`.
|
||||
|
||||
## 5.0.19
|
||||
* Fix indent-based syntaxes support.
|
||||
|
||||
## 5.0.18
|
||||
* Parse new lines according W3C CSS syntax specification.
|
||||
|
||||
## 5.0.17
|
||||
* Fix options argument in `Node#warn` (by Ben Briggs).
|
||||
* Fix TypeScript definitions (by Jed Mao).
|
||||
|
||||
## 5.0.16
|
||||
* Fix CSS syntax error position on unclosed quotes.
|
||||
|
||||
## 5.0.15
|
||||
* Fix `Node#clone()` on `null` value somewhere in node.
|
||||
|
||||
## 5.0.14
|
||||
* Allow to use PostCSS in webpack bundle without JSON loader.
|
||||
|
||||
## 5.0.13
|
||||
* Fix `index` and `word` options in `Warning#toString` (by Bogdan Chadkin).
|
||||
* Fix input source content loading in errors.
|
||||
* Fix map options on using `LazyResult` as input CSS.
|
||||
* 100% test coverage.
|
||||
* Use Babel 6.
|
||||
|
||||
## 5.0.12
|
||||
* Allow passing a previous map with no mappings (by Andreas Lind).
|
||||
|
||||
## 5.0.11
|
||||
* Increase plugins performance by 1.5 times.
|
||||
|
||||
## 5.0.10
|
||||
* Fix warning from nodes without source.
|
||||
|
||||
## 5.0.9
|
||||
* Fix source map type detection (by @asan).
|
||||
|
||||
## 5.0.8
|
||||
* Fixed a missed step in `5.0.7` that caused the module to be published as
|
||||
ES6 code.
|
||||
|
||||
## 5.0.7
|
||||
* PostCSS now requires that node 0.12 is installed via the engines property
|
||||
in package.json (by Howard Zuo).
|
||||
|
||||
## 5.0.6
|
||||
* Fix parsing nested at-rule without semicolon (by Matt Drake).
|
||||
* Trim `Declaration#value` (by Bogdan Chadkin).
|
||||
|
||||
## 5.0.5
|
||||
* Fix multi-tokens property parsing (by Matt Drake).
|
||||
|
||||
## 5.0.4
|
||||
* Fix start position in `Root#source`.
|
||||
* Fix source map annotation, when CSS uses `\r\n` (by Mohammad Younes).
|
||||
|
||||
## 5.0.3
|
||||
* Fix `url()` parsing.
|
||||
* Fix using `selectors` in `Rule` constructor.
|
||||
* Add start source to `Root` node.
|
||||
|
||||
## 5.0.2
|
||||
* Fix `remove(index)` to be compatible with 4.x plugin.
|
||||
|
||||
## 5.0.1
|
||||
* Fix PostCSS 4.x plugins compatibility.
|
||||
* Fix type definition loading (by Jed Mao).
|
||||
|
||||
## 5.0 “President Valac”
|
||||
* Remove `safe` option. Move Safe Parser to separate project.
|
||||
* `Node#toString` does not include `before` for root nodes.
|
||||
* Remove plugin returning `Root` API.
|
||||
* Remove Promise polyfill for node.js 0.10.
|
||||
* Deprecate `eachInside`, `eachDecl`, `eachRule`, `eachAtRule` and `eachComment`
|
||||
in favor of `walk`, `walkDecls`, `walkRules`, `walkAtRules` and `walkComments`
|
||||
(by Jed Mao).
|
||||
* Deprecate `Container#remove` and `Node#removeSelf`
|
||||
in favor of `Container#removeChild` and `Node#remove` (by Ben Briggs).
|
||||
* Deprecate `Node#replace` in favor of `replaceWith` (by Ben Briggs).
|
||||
* Deprecate raw properties in favor of `Node#raws` object.
|
||||
* Deprecate `Node#style` in favor of `raw`.
|
||||
* Deprecate `CssSyntaxError#generated` in favor of `input`.
|
||||
* Deprecate `Node#cleanStyles` in favor of `cleanRaws`.
|
||||
* Deprecate `Root#prevMap` in favor of `Root.source.input.map`.
|
||||
* Add `syntax`, `parser` and `stringifier` options for Custom Syntaxes.
|
||||
* Add stringifier option to `Node#toString`.
|
||||
* Add `Result#content` alias for non-CSS syntaxes.
|
||||
* Add `plugin.process(css)` shortcut to every plugin function (by Ben Briggs).
|
||||
* Add multiple nodes support to insert methods (by Jonathan Neal).
|
||||
* Add `Node#warn` shortcut (by Ben Briggs).
|
||||
* Add `word` and `index` options to errors and warnings (by David Clark).
|
||||
* Add `line`, `column` properties to `Warning`.
|
||||
* Use `supports-color` library to detect color support in error output.
|
||||
* Add type definitions for TypeScript plugin developers (by Jed Mao).
|
||||
* `Rule#selectors` setter detects separators.
|
||||
* Add `postcss.stringify` method.
|
||||
* Throw descriptive errors for incorrectly formatted plugins.
|
||||
* Add docs to npm release.
|
||||
* Fix `url()` parsing.
|
||||
* Fix Windows support (by Jed Mao).
|
||||
|
||||
## 4.1.16
|
||||
* Fix errors without stack trace.
|
||||
|
||||
## 4.1.15
|
||||
* Allow asynchronous plugins to change processor plugins list (by Ben Briggs).
|
||||
|
||||
## 4.1.14
|
||||
* Fix for plugins packs defined by `postcss.plugin`.
|
||||
|
||||
## 4.1.13
|
||||
* Fix input inlined source maps with UTF-8 encoding.
|
||||
|
||||
## 4.1.12
|
||||
* Update Promise polyfill.
|
||||
|
||||
## 4.1.11
|
||||
* Fix error message on wrong plugin format.
|
||||
|
||||
## 4.1.10
|
||||
* Fix Promise behavior on sync plugin errors.
|
||||
* Automatically fill `plugin` field in `CssSyntaxError`.
|
||||
* Fix warning message (by Ben Briggs).
|
||||
|
||||
## 4.1.9
|
||||
* Speed up `node.clone()`.
|
||||
|
||||
## 4.1.8
|
||||
* Accepts `Processor` instance in `postcss()` constructor too.
|
||||
|
||||
## 4.1.7
|
||||
* Speed up `postcss.list` (by Bogdan Chadkin).
|
||||
|
||||
## 4.1.6
|
||||
* Fix Promise behavior on parsing error.
|
||||
|
||||
## 4.1.5
|
||||
* Parse at-words in declaration values.
|
||||
|
||||
## 4.1.4
|
||||
* Fix Promise polyfill dependency (by Anton Yakushev and Matija Marohnić).
|
||||
|
||||
## 4.1.3
|
||||
* Add Promise polyfill for node.js 0.10 and IE.
|
||||
|
||||
## 4.1.2
|
||||
* List helpers can be accessed independently `var space = postcss.list.space`.
|
||||
|
||||
## 4.1.1
|
||||
* Show deprecated message only once.
|
||||
|
||||
## 4.1 “Marquis Andras”
|
||||
* Asynchronous plugin support.
|
||||
* Add warnings from plugins and `Result#messages`.
|
||||
* Add `postcss.plugin()` to create plugins with a standard API.
|
||||
* Insert nodes by CSS string.
|
||||
* Show version warning message on error from an outdated plugin.
|
||||
* Send `Result` instance to plugins as the second argument.
|
||||
* Add `CssSyntaxError#plugin`.
|
||||
* Add `CssSyntaxError#showSourceCode()`.
|
||||
* Add `postcss.list` and `postcss.vendor` aliases.
|
||||
* Add `Processor#version`.
|
||||
* Parse wrong closing bracket.
|
||||
* Parse `!important` statement with spaces and comments inside (by Ben Briggs).
|
||||
* Throw an error on declaration without `prop` or `value` (by Philip Peterson).
|
||||
* Fix source map mappings position.
|
||||
* Add indexed source map support.
|
||||
* Always set `error.generated`.
|
||||
* Clean all source map annotation comments.
|
||||
|
||||
## 4.0.6
|
||||
* Remove `babel` from released package dependencies (by Andres Suarez).
|
||||
|
||||
## 4.0.5
|
||||
* Fix error message on double colon in declaration.
|
||||
|
||||
## 4.0.4
|
||||
* Fix indent detection in some rare cases.
|
||||
|
||||
## 4.0.3
|
||||
* Faster API with 6to5 Loose mode.
|
||||
* Fix indexed source maps support.
|
||||
|
||||
## 4.0.2
|
||||
* Do not copy IE hacks to code style.
|
||||
|
||||
## 4.0.1
|
||||
* Add `source.input` to `Root` too.
|
||||
|
||||
## 4.0 “Duke Flauros”
|
||||
* Rename `Container#childs` to `nodes`.
|
||||
* Rename `PostCSS#processors` to `plugins`.
|
||||
* Add `Node#replaceValues()` method.
|
||||
* Add `Node#moveTo()`, `moveBefore()` and `moveAfter()` methods.
|
||||
* Add `Node#cloneBefore()` and `cloneAfter()` shortcuts.
|
||||
* Add `Node#next()`, `prev()` and `root()` shortcuts.
|
||||
* Add `Node#replaceWith()` method.
|
||||
* Add `Node#error()` method.
|
||||
* Add `Container#removeAll()` method.
|
||||
* Add filter argument to `eachDecl()` and `eachAtRule()`.
|
||||
* Add `Node#source.input` and move `source.file` or `source.id` to `input`.
|
||||
* Change code indent, when node was moved.
|
||||
* Better fix code style on `Rule`, `AtRule` and `Comment` nodes changes.
|
||||
* Allow to create rules and at-rules by hash shortcut in append methods.
|
||||
* Add class name to CSS syntax error output.
|
||||
|
||||
## 3.0.7
|
||||
* Fix IE filter parsing with multiple commands.
|
||||
* Safer way to consume PostCSS object as plugin (by Maxime Thirouin).
|
||||
|
||||
## 3.0.6
|
||||
* Fix missing semicolon when comment comes after last declaration.
|
||||
* Fix Safe Mode declaration parsing on unclosed blocks.
|
||||
|
||||
## 3.0.5
|
||||
* Fix parser to support difficult cases with backslash escape and brackets.
|
||||
* Add `CssSyntaxError#stack` (by Maxime Thirouin).
|
||||
|
||||
## 3.0.4
|
||||
* Fix Safe Mode on unknown word before declaration.
|
||||
|
||||
## 3.0.3
|
||||
* Increase tokenizer speed (by Roman Dvornov).
|
||||
|
||||
## 3.0.2
|
||||
* Fix empty comment parsing.
|
||||
* Fix `Root#normalize` in some inserts.
|
||||
|
||||
## 3.0.1
|
||||
* Fix Rhino JS runtime support.
|
||||
* Typo in deprecated warning (by Maxime Thirouin).
|
||||
|
||||
## 3.0 “Marquis Andrealphus”
|
||||
* New parser, which become the fastest ever CSS parser written in JavaScript.
|
||||
* Parser can now parse declarations and rules in one parent (like in `@page`)
|
||||
and nested declarations for plugins like `postcss-nested`.
|
||||
* Child nodes array is now in `childs` property, instead of `decls` and `rules`.
|
||||
* `map.inline` and `map.sourcesContent` options are now `true` by default.
|
||||
* Fix iterators (`each`, `insertAfter`) on children array changes.
|
||||
* Use previous source map to show origin source of CSS syntax error.
|
||||
* Use 6to5 ES6 compiler, instead of ES6 Transpiler.
|
||||
* Use code style for manually added rules from existing rules.
|
||||
* Use `from` option from previous source map `file` field.
|
||||
* Set `to` value to `from` if `to` option is missing.
|
||||
* Use better node source name when missing `from` option.
|
||||
* Show a syntax error when `;` is missed between declarations.
|
||||
* Allow to pass `PostCSS` instance or list of plugins to `use()` method.
|
||||
* Allow to pass `Result` instance to `process()` method.
|
||||
* Trim Unicode BOM on source maps parsing.
|
||||
* Parse at-rules without spaces like `@import"file"`.
|
||||
* Better previous `sourceMappingURL` annotation comment cleaning.
|
||||
* Do not remove previous `sourceMappingURL` comment on `map.annotation: false`.
|
||||
* Parse nameless at-rules in Safe Mode.
|
||||
* Fix source map generation for nodes without source.
|
||||
* Fix next child `before` if `Root` first child got removed.
|
||||
|
||||
## 2.2.6
|
||||
* Fix map generation for nodes without source (by Josiah Savary).
|
||||
|
||||
## 2.2.5
|
||||
* Fix source map with BOM marker support (by Mohammad Younes).
|
||||
* Fix source map paths (by Mohammad Younes).
|
||||
|
||||
## 2.2.4
|
||||
* Fix `prepend()` on empty `Root`.
|
||||
|
||||
## 2.2.3
|
||||
* Allow to use object shortcut in `use()` with functions like `autoprefixer`.
|
||||
|
||||
## 2.2.2
|
||||
* Add shortcut to set processors in `use()` via object with `.postcss` property.
|
||||
|
||||
## 2.2.1
|
||||
* Send `opts` from `Processor#process(css, opts)` to processors.
|
||||
|
||||
## 2.2 “Marquis Cimeies”
|
||||
* Use GNU style syntax error messages.
|
||||
* Add `Node#replace` method.
|
||||
* Add `CssSyntaxError#reason` property.
|
||||
|
||||
## 2.1.2
|
||||
* Fix UTF-8 support in inline source map.
|
||||
* Fix source map `sourcesContent` if there is no `from` and `to` options.
|
||||
|
||||
## 2.1.1
|
||||
* Allow to miss `to` and `from` options for inline source maps.
|
||||
* Add `Node#source.id` if file name is unknown.
|
||||
* Better detect splitter between rules in CSS concatenation tools.
|
||||
* Automatically clone node in insert methods.
|
||||
|
||||
## 2.1 “King Amdusias”
|
||||
* Change Traceur ES6 compiler to ES6 Transpiler.
|
||||
* Show broken CSS line in syntax error.
|
||||
|
||||
## 2.0 “King Belial”
|
||||
* Project was rewritten from CoffeeScript to ES6.
|
||||
* Add Safe Mode to works with live input or with hacks from legacy code.
|
||||
* More safer parser to pass all hacks from Browserhacks.com.
|
||||
* Use real properties instead of magic getter/setter for raw properties.
|
||||
|
||||
## 1.0 “Marquis Decarabia”
|
||||
* Save previous source map for each node to support CSS concatenation
|
||||
with multiple previous maps.
|
||||
* Add `map.sourcesContent` option to add origin content to `sourcesContent`
|
||||
inside map.
|
||||
* Allow to set different place of output map in annotation comment.
|
||||
* Allow to use arrays and `Root` in `Container#append` and same methods.
|
||||
* Add `Root#prevMap` with information about previous map.
|
||||
* Allow to use latest PostCSS from GitHub by npm.
|
||||
* `Result` now is lazy and it will generate output CSS only if you use `css`
|
||||
or `map` property.
|
||||
* Use separated `map.prev` option to set previous map.
|
||||
* Rename `inlineMap` option to `map.inline`.
|
||||
* Rename `mapAnnotation` option to `map.annotation`.
|
||||
* `Result#map` now return `SourceMapGenerator` object, instead of string.
|
||||
* Run previous map autodetect only if input CSS contains annotation comment.
|
||||
* Add `map: 'inline'` shortcut for `map: { inline: true }` option.
|
||||
* `Node#source.file` now will contains absolute path.
|
||||
* Clean `Declaration#between` style on node clone.
|
||||
|
||||
## 0.3.5
|
||||
* Allow to use `Root` or `Result` as first argument in `process()`.
|
||||
* Save parsed AST to `Result#root`.
|
||||
|
||||
## 0.3.4
|
||||
* Better space symbol detect to read UTF-8 BOM correctly.
|
||||
|
||||
## 0.3.3
|
||||
* Remove source map hacks by using new Mozilla’s `source-map` (by Simon Lydell).
|
||||
|
||||
## 0.3.2
|
||||
* Add URI encoding support for inline source maps.
|
||||
|
||||
## 0.3.1
|
||||
* Fix relative paths from previous source map.
|
||||
* Safer space split in `Rule#selectors` (by Simon Lydell).
|
||||
|
||||
## 0.3 “Prince Seere”
|
||||
* Add `Comment` node for comments between declarations or rules.
|
||||
* Add source map annotation comment to output CSS.
|
||||
* Allow to inline source map to annotation comment by data:uri.
|
||||
* Fix source maps on Windows.
|
||||
* Fix source maps for subdirectory (by Dmitry Nikitenko and Simon Lydell).
|
||||
* Autodetect previous source map.
|
||||
* Add `first` and `last` shortcuts to container nodes.
|
||||
* Parse `!important` to separated property in `Declaration`.
|
||||
* Allow to break iteration by returning `false`.
|
||||
* Copy code style to new nodes.
|
||||
* Add `eachInside` method to recursively iterate all nodes.
|
||||
* Add `selectors` shortcut to get selectors array.
|
||||
* Add `toResult` method to `Rule` to simplify work with several input files.
|
||||
* Clean declaration’s `value`, rule’s `selector` and at-rule’s `params`
|
||||
by storing spaces in `between` property.
|
||||
|
||||
## 0.2 “Duke Dantalion”
|
||||
* Add source map support.
|
||||
* Add shortcuts to create nodes.
|
||||
* Method `process()` now returns object with `css` and `map` keys.
|
||||
* Origin CSS file option was renamed from `file` to `from`.
|
||||
* Rename `Node#remove()` method to `removeSelf()` to fix name conflict.
|
||||
* Node source was moved to `source` property with origin file
|
||||
and node end position.
|
||||
* You can set own CSS generate function.
|
||||
|
||||
## 0.1 “Count Andromalius”
|
||||
* Initial release.
|
||||
+78
@@ -0,0 +1,78 @@
|
||||
# Contributing Guide to PostCSS
|
||||
|
||||
If you want contribute to PostCSS, there are few things that you should
|
||||
be familiar with.
|
||||
|
||||
|
||||
## In Case You Have Question About Using PostCSS
|
||||
|
||||
* **Ask for help in [the chat]**
|
||||
|
||||
If you stuck on something there is a big chance
|
||||
that someone had similar problem before.
|
||||
|
||||
[the chat]: https://gitter.im/postcss/postcss
|
||||
|
||||
|
||||
## Adding Your Plugin to the List
|
||||
|
||||
If you created or found a plugin and want to add it to PostCSS plugins list
|
||||
follow this simple steps.
|
||||
|
||||
PR should not change plugins defined in README it contains only favorite plugins
|
||||
and moderated by PostCSS author.
|
||||
|
||||
Plugins submitted by community located in [`docs/plugins`].
|
||||
|
||||
* **Keep plugins order**
|
||||
|
||||
Be sure that plugin not presented yet and find suitable position
|
||||
in alphabetic order for it.
|
||||
But plugins with `postcss-` prefix should come first.
|
||||
|
||||
* **Check spelling**
|
||||
|
||||
Before submitting PR be sure that spelling check pass.
|
||||
For that run command `npm test`.
|
||||
If it fails with unknown word error, add it as word
|
||||
to `.yaspellerrc` dictionary.
|
||||
|
||||
* **Check PostCSS plugin guideline**
|
||||
|
||||
Provided plugin should match plugin [guidelines].
|
||||
|
||||
- **Provide link to suggested plugin**
|
||||
|
||||
Make sure your pull request description contains link to plugin
|
||||
you are willing to add.
|
||||
|
||||
[`docs/plugins`]: https://github.com/postcss/postcss/blob/master/docs/plugins.md
|
||||
[guidelines]: https://github.com/postcss/postcss/blob/master/docs/guidelines/plugin.md
|
||||
|
||||
|
||||
## TypeScript Declaration Improvements
|
||||
|
||||
If you found a bug or want to add certain improvements to types declaration file
|
||||
|
||||
* **Check current TypeScript styling**
|
||||
|
||||
Be sure that your changes match TypeScript styling rules defined in typings file.
|
||||
* We use classes for existing JS classes like `Stringifier`.
|
||||
* Namespaces used for separating functions related to same subject.
|
||||
* Interfaces used for defining custom types.
|
||||
|
||||
Make sure you read through declaration file writing [best practices]
|
||||
by TypeScript team.
|
||||
|
||||
[best practices]: https://www.typescriptlang.org/docs/handbook/declaration-files/do-s-and-don-ts.html
|
||||
|
||||
|
||||
## Core Development
|
||||
|
||||
If you want to add new feature or fix existed issue
|
||||
|
||||
- **Become familiar with PostCSS architecture**
|
||||
|
||||
For gentle intro to PostCSS architecture look through our [guide].
|
||||
|
||||
[guide]: https://github.com/postcss/postcss/blob/master/docs/architecture.md
|
||||
+20
@@ -0,0 +1,20 @@
|
||||
The MIT License (MIT)
|
||||
|
||||
Copyright 2013 Andrey Sitnik <andrey@sitnik.ru>
|
||||
|
||||
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.
|
||||
+349
@@ -0,0 +1,349 @@
|
||||
# PostCSS [![Gitter][chat-img]][chat]
|
||||
|
||||
<img align="right" width="95" height="95"
|
||||
alt="哲学家的石头 - PostCSS 的 logo"
|
||||
src="http://postcss.github.io/postcss/logo.svg">
|
||||
|
||||
[chat-img]: https://img.shields.io/badge/Gitter-Join_the_PostCSS_chat-brightgreen.svg
|
||||
[chat]: https://gitter.im/postcss/postcss
|
||||
|
||||
PostCSS 是一个允许使用 JS 插件转换样式的工具。
|
||||
这些插件可以检查（lint）你的 CSS，支持 CSS Variables 和 Mixins，
|
||||
编译尚未被浏览器广泛支持的先进的 CSS 语法，内联图片，以及其它很多优秀的功能。
|
||||
|
||||
PostCSS 在工业界被广泛地应用，其中不乏很多有名的行业领导者，如：维基百科，Twitter，阿里巴巴，
|
||||
JetBrains。PostCSS 的 [Autoprefixer] 插件是最流行的 CSS 处理工具之一。
|
||||
|
||||
PostCSS 接收一个 CSS 文件并提供了一个 API 来分析、修改它的规则（通过把 CSS 规则转换成一个[抽象语法树]的方式）。在这之后，这个 API 便可被许多[插件]利用来做有用的事情，比如寻错或自动添加 CSS vendor 前缀。
|
||||
|
||||
**Twitter 账号:** [@postcss](https://twitter.com/postcss)<br>
|
||||
**支持 / 讨论:** [Gitter](https://gitter.im/postcss/postcss)<br>
|
||||
|
||||
如果需要 PostCSS 商业支持（如咨询，提升公司的前端文化，
|
||||
PostCSS 插件），请联系 [Evil Martians](https://evilmartians.com/?utm_source=postcss)
|
||||
邮箱 <surrender@evilmartians.com>。
|
||||
|
||||
[抽象语法树]: https://zh.wikipedia.org/wiki/%E6%8A%BD%E8%B1%A1%E8%AA%9E%E6%B3%95%E6%A8%B9
|
||||
[Autoprefixer]: https://github.com/postcss/autoprefixer
|
||||
[插件]: https://github.com/postcss/postcss/blob/master/README-cn.md#%E6%8F%92%E4%BB%B6
|
||||
|
||||
<a href="https://evilmartians.com/?utm_source=postcss">
|
||||
<img src="https://evilmartians.com/badges/sponsored-by-evil-martians.svg"
|
||||
alt="由 Evil Martians 赞助" width="236" height="54">
|
||||
</a>
|
||||
|
||||
## 插件
|
||||
|
||||
截止到目前，PostCSS 有 200 多个插件。你可以在 [插件列表] 或 [搜索目录] 找到它们。
|
||||
下方的列表是我们最喜欢的插件 - 它们很好地演示了我们可以用 PostCSS 做些什么。
|
||||
|
||||
如果你有任何新的想法，[开发 PostCSS 插件] 非常简单易上手。
|
||||
|
||||
[搜索目录]: http://postcss.parts
|
||||
[插件列表]: https://github.com/postcss/postcss/blob/master/docs/plugins.md
|
||||
|
||||
### 解决全局 CSS 的问题
|
||||
|
||||
* [`postcss-use`] 允许你在 CSS 里明确地设置 PostCSS 插件，并且只在当前文件执行它们。
|
||||
* [`postcss-modules`] 和 [`react-css-modules`] 可以自动以组件为单位隔绝 CSS 选择器。
|
||||
* [`postcss-autoreset`] 是全局样式重置的又一个选择，它更适用于分离的组件。
|
||||
* [`postcss-initial`] 添加了 `all: initial` 的支持，重置了所有继承的样式。
|
||||
* [`cq-prolyfill`] 添加了容器查询的支持，允许添加响应于父元素宽度的样式.
|
||||
|
||||
### 提前使用先进的 CSS 特性
|
||||
|
||||
* [`autoprefixer`] 添加了 vendor 浏览器前缀，它使用 Can I Use 上面的数据。
|
||||
* [`postcss-preset-env`] 允许你使用未来的 CSS 特性。
|
||||
|
||||
### 更佳的 CSS 可读性
|
||||
|
||||
* [`precss`] 囊括了许多插件来支持类似 Sass 的特性，比如 CSS 变量，套嵌，mixins 等。
|
||||
* [`postcss-sorting`] 给规则的内容以及@规则排序。
|
||||
* [`postcss-utilities`] 囊括了最常用的简写方式和书写帮助。
|
||||
* [`short`] 添加并拓展了大量的缩写属性。
|
||||
|
||||
### 图片和字体
|
||||
|
||||
* [`postcss-assets`] 可以插入图片尺寸和内联文件。
|
||||
* [`postcss-sprites`] 能生成雪碧图。
|
||||
* [`font-magician`] 生成所有在 CSS 里需要的 `@font-face` 规则。
|
||||
* [`postcss-inline-svg`] 允许你内联 SVG 并定制它的样式。
|
||||
* [`postcss-write-svg`] 允许你在 CSS 里写简单的 SVG。
|
||||
|
||||
### 提示器（Linters）
|
||||
|
||||
* [`stylelint`] 是一个模块化的样式提示器。
|
||||
* [`stylefmt`] 是一个能根据 `stylelint` 规则自动优化 CSS 格式的工具。
|
||||
* [`doiuse`] 提示 CSS 的浏览器支持性，使用的数据来自于 Can I Use。
|
||||
* [`colorguard`] 帮助你保持一个始终如一的调色板。
|
||||
|
||||
### 其它
|
||||
|
||||
* [`postcss-rtl`] 在单个 CSS 文件里组合了两个方向（左到右，右到左）的样式。
|
||||
* [`cssnano`] 是一个模块化的 CSS 压缩器。
|
||||
* [`lost`] 是一个功能强大的 `calc()` 栅格系统。
|
||||
* [`rtlcss`] 镜像翻转 CSS 样式，适用于 right-to-left 的应用场景。
|
||||
|
||||
[`postcss-inline-svg`]: https://github.com/TrySound/postcss-inline-svg
|
||||
[`postcss-preset-env`]: https://github.com/jonathantneal/postcss-preset-env
|
||||
[`react-css-modules`]: https://github.com/gajus/react-css-modules
|
||||
[`postcss-autoreset`]: https://github.com/maximkoretskiy/postcss-autoreset
|
||||
[`postcss-write-svg`]: https://github.com/jonathantneal/postcss-write-svg
|
||||
[`postcss-utilities`]: https://github.com/ismamz/postcss-utilities
|
||||
[`postcss-initial`]: https://github.com/maximkoretskiy/postcss-initial
|
||||
[`postcss-sprites`]: https://github.com/2createStudio/postcss-sprites
|
||||
[`postcss-modules`]: https://github.com/outpunk/postcss-modules
|
||||
[`postcss-sorting`]: https://github.com/hudochenkov/postcss-sorting
|
||||
[`postcss-assets`]: https://github.com/assetsjs/postcss-assets
|
||||
[开发 PostCSS 插件]: https://github.com/postcss/postcss/blob/master/docs/writing-a-plugin.md
|
||||
[`font-magician`]: https://github.com/jonathantneal/postcss-font-magician
|
||||
[`autoprefixer`]: https://github.com/postcss/autoprefixer
|
||||
[`cq-prolyfill`]: https://github.com/ausi/cq-prolyfill
|
||||
[`postcss-rtl`]: https://github.com/vkalinichev/postcss-rtl
|
||||
[`postcss-use`]: https://github.com/postcss/postcss-use
|
||||
[`css-modules`]: https://github.com/css-modules/css-modules
|
||||
[`colorguard`]: https://github.com/SlexAxton/css-colorguard
|
||||
[`stylelint`]: https://github.com/stylelint/stylelint
|
||||
[`stylefmt`]: https://github.com/morishitter/stylefmt
|
||||
[`cssnano`]: http://cssnano.co
|
||||
[`precss`]: https://github.com/jonathantneal/precss
|
||||
[`doiuse`]: https://github.com/anandthakker/doiuse
|
||||
[`rtlcss`]: https://github.com/MohammadYounes/rtlcss
|
||||
[`short`]: https://github.com/jonathantneal/postcss-short
|
||||
[`lost`]: https://github.com/peterramsing/lost
|
||||
|
||||
## 语法
|
||||
|
||||
PostCSS 可以转化样式到任意语法，不仅仅是 CSS。
|
||||
如果还没有支持你最喜欢的语法，你可以编写一个解释器以及（或者）一个 stringifier 来拓展 PostCSS。
|
||||
|
||||
* [`sugarss`] 是一个以缩进为基础的语法，类似于 Sass 和 Stylus。
|
||||
* [`postcss-syntax`] 通过文件扩展名自动切换语法。
|
||||
* [`postcss-html`] 解析类 HTML 文件里`<style>`标签中的样式。
|
||||
* [`postcss-markdown`] 解析 Markdown 文件里代码块中的样式。
|
||||
* [`postcss-jsx`] 解析源文件里模板或对象字面量中的CSS。
|
||||
* [`postcss-styled`] 解析源文件里模板字面量中的CSS。
|
||||
* [`postcss-scss`] 允许你使用 SCSS *(但并没有将 SCSS 编译到 CSS)*。
|
||||
* [`postcss-sass`] 允许你使用 Sass *(但并没有将 Sass 编译到 CSS)*。
|
||||
* [`postcss-less`] 允许你使用 Less *(但并没有将 LESS 编译到 CSS)*。
|
||||
* [`postcss-less-engine`] 允许你使用 Less *(并且使用真正的 Less.js 把 LESS 编译到 CSS)*。
|
||||
* [`postcss-js`] 允许你在 JS 里编写样式，或者转换成 React 的内联样式／Radium／JSS。
|
||||
* [`postcss-safe-parser`] 查找并修复 CSS 语法错误。
|
||||
* [`midas`] 将 CSS 字符串转化成高亮的 HTML。
|
||||
|
||||
[`postcss-less-engine`]: https://github.com/Crunch/postcss-less
|
||||
[`postcss-safe-parser`]: https://github.com/postcss/postcss-safe-parser
|
||||
[`postcss-syntax`]: https://github.com/gucong3000/postcss-syntax
|
||||
[`postcss-html`]: https://github.com/gucong3000/postcss-html
|
||||
[`postcss-markdown`]: https://github.com/gucong3000/postcss-markdown
|
||||
[`postcss-jsx`]: https://github.com/gucong3000/postcss-jsx
|
||||
[`postcss-styled`]: https://github.com/gucong3000/postcss-styled
|
||||
[`postcss-scss`]: https://github.com/postcss/postcss-scss
|
||||
[`postcss-sass`]: https://github.com/AleshaOleg/postcss-sass
|
||||
[`postcss-less`]: https://github.com/webschik/postcss-less
|
||||
[`postcss-js`]: https://github.com/postcss/postcss-js
|
||||
[`sugarss`]: https://github.com/postcss/sugarss
|
||||
[`midas`]: https://github.com/ben-eb/midas
|
||||
|
||||
## 文章
|
||||
|
||||
* [一些你对 PostCSS 可能产生的误解](http://julian.io/some-things-you-may-think-about-postcss-and-you-might-be-wrong)
|
||||
* [PostCSS 究竟是什么，是做什么的](http://davidtheclark.com/its-time-for-everyone-to-learn-about-postcss)
|
||||
* [PostCSS 指南](http://webdesign.tutsplus.com/series/postcss-deep-dive--cms-889)
|
||||
|
||||
你可以在 [awesome-postcss](https://github.com/jjaderg/awesome-postcss) 列表里找到更多优秀的文章和视频。
|
||||
|
||||
## 书籍
|
||||
|
||||
* Alex Libby, Packt 的 [网页设计之精通 PostCSS](https://www.packtpub.com/web-development/mastering-postcss-web-design) (2016年6月)
|
||||
|
||||
## 使用方法
|
||||
|
||||
你可以通过简单的两步便开始使用 PostCSS：
|
||||
|
||||
1. 在你的构建工具中查找并添加 PostCSS 拓展。
|
||||
2. [选择插件]并将它们添加到你的 PostCSS 处理队列中。
|
||||
|
||||
[选择插件]: http://postcss.parts
|
||||
|
||||
### Webpack
|
||||
|
||||
在 `webpack.config.js` 里使用 [`postcss-loader`] :
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.css$/,
|
||||
exclude: /node_modules/,
|
||||
use: [
|
||||
{
|
||||
loader: 'style-loader',
|
||||
},
|
||||
{
|
||||
loader: 'css-loader',
|
||||
options: {
|
||||
importLoaders: 1,
|
||||
}
|
||||
},
|
||||
{
|
||||
loader: 'postcss-loader'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
然后创建 `postcss.config.js`:
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
plugins: [
|
||||
require('precss'),
|
||||
require('autoprefixer')
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
[`postcss-loader`]: https://github.com/postcss/postcss-loader
|
||||
|
||||
### Gulp
|
||||
|
||||
使用 [`gulp-postcss`] 和 [`gulp-sourcemaps`].
|
||||
|
||||
```js
|
||||
gulp.task('css', function () {
|
||||
var postcss = require('gulp-postcss');
|
||||
var sourcemaps = require('gulp-sourcemaps');
|
||||
|
||||
return gulp.src('src/**/*.css')
|
||||
.pipe( sourcemaps.init() )
|
||||
.pipe( postcss([ require('precss'), require('autoprefixer') ]) )
|
||||
.pipe( sourcemaps.write('.') )
|
||||
.pipe( gulp.dest('build/') );
|
||||
});
|
||||
```
|
||||
|
||||
[`gulp-sourcemaps`]: https://github.com/floridoo/gulp-sourcemaps
|
||||
[`gulp-postcss`]: https://github.com/postcss/gulp-postcss
|
||||
|
||||
### npm run / CLI
|
||||
|
||||
如果需要在你的命令行界面或 npm 脚本里使用 PostCSS，你可以使用 [`postcss-cli`]。
|
||||
|
||||
```sh
|
||||
postcss --use autoprefixer -c options.json -o main.css css/*.css
|
||||
```
|
||||
|
||||
[`postcss-cli`]: https://github.com/postcss/postcss-cli
|
||||
|
||||
### 浏览器
|
||||
|
||||
如果你想编译浏览器里的 CSS 字符串（例如像 CodePen 一样的在线编辑器），
|
||||
只需使用 [Browserify] 或 [webpack]。它们会把 PostCSS 和插件文件打包进一个独立文件。
|
||||
|
||||
如果想要在 React 内联样式／JSS／Radium／其它 [CSS-in-JS] 里使用 PostCSS，
|
||||
你可以用 [`postcss-js`] 然后转换样式对象。
|
||||
|
||||
```js
|
||||
var postcss = require('postcss-js');
|
||||
var prefixer = postcss.sync([ require('autoprefixer') ]);
|
||||
|
||||
prefixer({ display: 'flex' }); //=> { display: ['-webkit-box', '-webkit-flex', '-ms-flexbox', 'flex'] }
|
||||
```
|
||||
|
||||
[`postcss-js`]: https://github.com/postcss/postcss-js
|
||||
[Browserify]: http://browserify.org/
|
||||
[CSS-in-JS]: https://github.com/MicheleBertoli/css-in-js
|
||||
[webpack]: https://webpack.github.io/
|
||||
|
||||
### 运行器
|
||||
|
||||
* **Grunt**: [`grunt-postcss`](https://github.com/nDmitry/grunt-postcss)
|
||||
* **HTML**: [`posthtml-postcss`](https://github.com/posthtml/posthtml-postcss)
|
||||
* **Stylus**: [`poststylus`](https://github.com/seaneking/poststylus)
|
||||
* **Rollup**: [`rollup-plugin-postcss`](https://github.com/egoist/rollup-plugin-postcss)
|
||||
* **Brunch**: [`postcss-brunch`](https://github.com/brunch/postcss-brunch)
|
||||
* **Broccoli**: [`broccoli-postcss`](https://github.com/jeffjewiss/broccoli-postcss)
|
||||
* **Meteor**: [`postcss`](https://atmospherejs.com/juliancwirko/postcss)
|
||||
* **ENB**: [`enb-postcss`](https://github.com/awinogradov/enb-postcss)
|
||||
* **Taskr**: [`taskr-postcss`](https://github.com/lukeed/taskr/tree/master/packages/postcss)
|
||||
* **Start**: [`start-postcss`](https://github.com/start-runner/postcss)
|
||||
* **Connect/Express**: [`postcss-middleware`](https://github.com/jedmao/postcss-middleware)
|
||||
|
||||
### JS API
|
||||
|
||||
对于其它的应用环境，你可以使用 JS API：
|
||||
|
||||
```js
|
||||
const fs = require('fs');
|
||||
const postcss = require('postcss');
|
||||
const precss = require('precss');
|
||||
const autoprefixer = require('autoprefixer');
|
||||
|
||||
fs.readFile('src/app.css', (err, css) => {
|
||||
postcss([precss, autoprefixer])
|
||||
.process(css, { from: 'src/app.css', to: 'dest/app.css' })
|
||||
.then(result => {
|
||||
fs.writeFile('dest/app.css', result.css);
|
||||
if ( result.map ) fs.writeFile('dest/app.css.map', result.map);
|
||||
});
|
||||
});
|
||||
```
|
||||
|
||||
阅读 [PostCSS API 文档] 获取更多有关 JS API 的信息.
|
||||
|
||||
所有的 PostCSS 运行器应当通过 [PostCSS 运行器指南]。
|
||||
|
||||
[PostCSS 运行器指南]: https://github.com/postcss/postcss/blob/master/docs/guidelines/runner.md
|
||||
[PostCSS API 文档]: http://api.postcss.org/postcss.html
|
||||
|
||||
### 配置选项
|
||||
|
||||
绝大多数 PostCSS 运行器接受两个参数：
|
||||
|
||||
* 一个包含所需插件的数组
|
||||
* 一个配置选项的对象
|
||||
|
||||
常见的选项：
|
||||
|
||||
* `syntax`: 一个提供了语法解释器和 stringifier 的对象。
|
||||
* `parser`: 一个特殊的语法解释器（例如 [SCSS]）。
|
||||
* `stringifier`: 一个特殊的语法 output 生成器（例如 [Midas]）。
|
||||
* `map`: [source map 选项].
|
||||
* `from`: input 文件名称（大多数运行器自动设置了这个）。
|
||||
* `to`: output 文件名称（大多数运行器自动设置了这个）。
|
||||
|
||||
[source map 选项]: https://github.com/postcss/postcss/blob/master/docs/source-maps.md
|
||||
[Midas]: https://github.com/ben-eb/midas
|
||||
[SCSS]: https://github.com/postcss/postcss-scss
|
||||
|
||||
### Atom
|
||||
|
||||
* [`language-postcss`] 添加了 PostCSS 和 [SugarSS] 代码高亮。
|
||||
* [`source-preview-postcss`] 在一个独立窗口里实时预览生成的 CSS。
|
||||
|
||||
[SugarSS]: https://github.com/postcss/sugarss
|
||||
|
||||
### Sublime Text
|
||||
|
||||
* [`Syntax-highlighting-for-PostCSS`] 添加了 PostCSS 代码高亮。
|
||||
|
||||
[`Syntax-highlighting-for-PostCSS`]: https://github.com/hudochenkov/Syntax-highlighting-for-PostCSS
|
||||
[`source-preview-postcss`]: https://atom.io/packages/source-preview-postcss
|
||||
[`language-postcss`]: https://atom.io/packages/language-postcss
|
||||
|
||||
### Vim
|
||||
|
||||
* [`postcss.vim`] 添加了 PostCSS 代码高亮。
|
||||
|
||||
[`postcss.vim`]: https://github.com/stephenway/postcss.vim
|
||||
|
||||
### WebStorm
|
||||
|
||||
自 WebStorm 2016.3 开始，[提供了] 内建的 PostCSS 支持。
|
||||
|
||||
[提供了]: https://blog.jetbrains.com/webstorm/2016/08/webstorm-2016-3-early-access-preview/
|
||||
+376
@@ -0,0 +1,376 @@
|
||||
# PostCSS [![Gitter][chat-img]][chat]
|
||||
|
||||
<img align="right" width="95" height="95"
|
||||
alt="Philosopher’s stone, logo of PostCSS"
|
||||
src="http://postcss.github.io/postcss/logo.svg">
|
||||
|
||||
[chat-img]: https://img.shields.io/badge/Gitter-Join_the_PostCSS_chat-brightgreen.svg
|
||||
[chat]: https://gitter.im/postcss/postcss
|
||||
|
||||
PostCSS is a tool for transforming styles with JS plugins.
|
||||
These plugins can lint your CSS, support variables and mixins,
|
||||
transpile future CSS syntax, inline images, and more.
|
||||
|
||||
PostCSS is used by industry leaders including Wikipedia, Twitter, Alibaba,
|
||||
and JetBrains. The [Autoprefixer] PostCSS plugin is one of the most popular
|
||||
CSS processors.
|
||||
|
||||
PostCSS takes a CSS file and provides an API to analyze and modify its rules
|
||||
(by transforming them into an [Abstract Syntax Tree]).
|
||||
This API can then be used by [plugins] to do a lot of useful things,
|
||||
e.g. to find errors automatically insert vendor prefixes.
|
||||
|
||||
**Support / Discussion:** [Gitter](https://gitter.im/postcss/postcss)<br>
|
||||
**Twitter account:** [@postcss](https://twitter.com/postcss)<br>
|
||||
**VK.com page:** [postcss](https://vk.com/postcss)<br>
|
||||
**中文翻译**: [`README-cn.md`](./README-cn.md)
|
||||
|
||||
For PostCSS commercial support (consulting, improving the front-end culture
|
||||
of your company, PostCSS plugins), contact [Evil Martians](https://evilmartians.com/?utm_source=postcss)
|
||||
at <surrender@evilmartians.com>.
|
||||
|
||||
[Abstract Syntax Tree]: https://en.wikipedia.org/wiki/Abstract_syntax_tree
|
||||
[Autoprefixer]: https://github.com/postcss/autoprefixer
|
||||
[plugins]: https://github.com/postcss/postcss#plugins
|
||||
|
||||
<a href="https://evilmartians.com/?utm_source=postcss">
|
||||
<img src="https://evilmartians.com/badges/sponsored-by-evil-martians.svg"
|
||||
alt="Sponsored by Evil Martians" width="236" height="54">
|
||||
</a>
|
||||
|
||||
## Plugins
|
||||
|
||||
Currently, PostCSS has more than 200 plugins. You can find all of the plugins
|
||||
in the [plugins list] or in the [searchable catalog]. Below is a list
|
||||
of our favorite plugins — the best demonstrations of what can be built
|
||||
on top of PostCSS.
|
||||
|
||||
If you have any new ideas, [PostCSS plugin development] is really easy.
|
||||
|
||||
[searchable catalog]: http://postcss.parts
|
||||
[plugins list]: https://github.com/postcss/postcss/blob/master/docs/plugins.md
|
||||
|
||||
### Solve Global CSS Problem
|
||||
|
||||
* [`postcss-use`] allows you to explicitly set PostCSS plugins within CSS
|
||||
and execute them only for the current file.
|
||||
* [`postcss-modules`] and [`react-css-modules`] automatically isolate
|
||||
selectors within components.
|
||||
* [`postcss-autoreset`] is an alternative to using a global reset
|
||||
that is better for isolatable components.
|
||||
* [`postcss-initial`] adds `all: initial` support, which resets
|
||||
all inherited styles.
|
||||
* [`cq-prolyfill`] adds container query support, allowing styles that respond
|
||||
to the width of the parent.
|
||||
|
||||
### Use Future CSS, Today
|
||||
|
||||
* [`autoprefixer`] adds vendor prefixes, using data from Can I Use.
|
||||
* [`postcss-preset-env`] allows you to use future CSS features today.
|
||||
|
||||
### Better CSS Readability
|
||||
|
||||
* [`precss`] contains plugins for Sass-like features, like variables, nesting,
|
||||
and mixins.
|
||||
* [`postcss-sorting`] sorts the content of rules and at-rules.
|
||||
* [`postcss-utilities`] includes the most commonly used shortcuts and helpers.
|
||||
* [`short`] adds and extends numerous shorthand properties.
|
||||
|
||||
### Images and Fonts
|
||||
|
||||
* [`postcss-assets`] inserts image dimensions and inlines files.
|
||||
* [`postcss-sprites`] generates image sprites.
|
||||
* [`font-magician`] generates all the `@font-face` rules needed in CSS.
|
||||
* [`postcss-inline-svg`] allows you to inline SVG and customize its styles.
|
||||
* [`postcss-write-svg`] allows you to write simple SVG directly in your CSS.
|
||||
|
||||
### Linters
|
||||
|
||||
* [`stylelint`] is a modular stylesheet linter.
|
||||
* [`stylefmt`] is a tool that automatically formats CSS
|
||||
according `stylelint` rules.
|
||||
* [`doiuse`] lints CSS for browser support, using data from Can I Use.
|
||||
* [`colorguard`] helps you maintain a consistent color palette.
|
||||
|
||||
### Other
|
||||
|
||||
* [`postcss-rtl`] combines both-directional (left-to-right and right-to-left) styles in one CSS file.
|
||||
* [`cssnano`] is a modular CSS minifier.
|
||||
* [`lost`] is a feature-rich `calc()` grid system.
|
||||
* [`rtlcss`] mirrors styles for right-to-left locales.
|
||||
|
||||
[PostCSS plugin development]: https://github.com/postcss/postcss/blob/master/docs/writing-a-plugin.md
|
||||
[`postcss-inline-svg`]: https://github.com/TrySound/postcss-inline-svg
|
||||
[`postcss-preset-env`]: https://github.com/jonathantneal/postcss-preset-env
|
||||
[`react-css-modules`]: https://github.com/gajus/react-css-modules
|
||||
[`postcss-autoreset`]: https://github.com/maximkoretskiy/postcss-autoreset
|
||||
[`postcss-write-svg`]: https://github.com/jonathantneal/postcss-write-svg
|
||||
[`postcss-utilities`]: https://github.com/ismamz/postcss-utilities
|
||||
[`postcss-initial`]: https://github.com/maximkoretskiy/postcss-initial
|
||||
[`postcss-sprites`]: https://github.com/2createStudio/postcss-sprites
|
||||
[`postcss-modules`]: https://github.com/outpunk/postcss-modules
|
||||
[`postcss-sorting`]: https://github.com/hudochenkov/postcss-sorting
|
||||
[`postcss-assets`]: https://github.com/assetsjs/postcss-assets
|
||||
[`font-magician`]: https://github.com/jonathantneal/postcss-font-magician
|
||||
[`autoprefixer`]: https://github.com/postcss/autoprefixer
|
||||
[`cq-prolyfill`]: https://github.com/ausi/cq-prolyfill
|
||||
[`postcss-rtl`]: https://github.com/vkalinichev/postcss-rtl
|
||||
[`postcss-use`]: https://github.com/postcss/postcss-use
|
||||
[`css-modules`]: https://github.com/css-modules/css-modules
|
||||
[`colorguard`]: https://github.com/SlexAxton/css-colorguard
|
||||
[`stylelint`]: https://github.com/stylelint/stylelint
|
||||
[`stylefmt`]: https://github.com/morishitter/stylefmt
|
||||
[`cssnano`]: http://cssnano.co
|
||||
[`precss`]: https://github.com/jonathantneal/precss
|
||||
[`doiuse`]: https://github.com/anandthakker/doiuse
|
||||
[`rtlcss`]: https://github.com/MohammadYounes/rtlcss
|
||||
[`short`]: https://github.com/jonathantneal/postcss-short
|
||||
[`lost`]: https://github.com/peterramsing/lost
|
||||
|
||||
## Syntaxes
|
||||
|
||||
PostCSS can transform styles in any syntax, not just CSS.
|
||||
If there is not yet support for your favorite syntax,
|
||||
you can write a parser and/or stringifier to extend PostCSS.
|
||||
|
||||
* [`sugarss`] is a indent-based syntax like Sass or Stylus.
|
||||
* [`postcss-syntax`] switch syntax automatically by file extensions.
|
||||
* [`postcss-html`] parsing styles in `<style>` tags of HTML-like files.
|
||||
* [`postcss-markdown`] parsing styles in code blocks of Markdown files.
|
||||
* [`postcss-jsx`] parsing CSS in template / object literals of source files.
|
||||
* [`postcss-styled`] parsing CSS in template literals of source files.
|
||||
* [`postcss-scss`] allows you to work with SCSS
|
||||
*(but does not compile SCSS to CSS)*.
|
||||
* [`postcss-sass`] allows you to work with Sass
|
||||
*(but does not compile Sass to CSS)*.
|
||||
* [`postcss-less`] allows you to work with Less
|
||||
*(but does not compile LESS to CSS)*.
|
||||
* [`postcss-less-engine`] allows you to work with Less
|
||||
*(and DOES compile LESS to CSS using true Less.js evaluation)*.
|
||||
* [`postcss-js`] allows you to write styles in JS or transform
|
||||
React Inline Styles, Radium or JSS.
|
||||
* [`postcss-safe-parser`] finds and fixes CSS syntax errors.
|
||||
* [`midas`] converts a CSS string to highlighted HTML.
|
||||
|
||||
[`postcss-less-engine`]: https://github.com/Crunch/postcss-less
|
||||
[`postcss-safe-parser`]: https://github.com/postcss/postcss-safe-parser
|
||||
[`postcss-syntax`]: https://github.com/gucong3000/postcss-syntax
|
||||
[`postcss-html`]: https://github.com/gucong3000/postcss-html
|
||||
[`postcss-markdown`]: https://github.com/gucong3000/postcss-markdown
|
||||
[`postcss-jsx`]: https://github.com/gucong3000/postcss-jsx
|
||||
[`postcss-styled`]: https://github.com/gucong3000/postcss-styled
|
||||
[`postcss-scss`]: https://github.com/postcss/postcss-scss
|
||||
[`postcss-sass`]: https://github.com/AleshaOleg/postcss-sass
|
||||
[`postcss-less`]: https://github.com/webschik/postcss-less
|
||||
[`postcss-js`]: https://github.com/postcss/postcss-js
|
||||
[`sugarss`]: https://github.com/postcss/sugarss
|
||||
[`midas`]: https://github.com/ben-eb/midas
|
||||
|
||||
## Articles
|
||||
|
||||
* [Some things you may think about PostCSS… and you might be wrong](http://julian.io/some-things-you-may-think-about-postcss-and-you-might-be-wrong)
|
||||
* [What PostCSS Really Is; What It Really Does](http://davidtheclark.com/its-time-for-everyone-to-learn-about-postcss)
|
||||
* [PostCSS Guides](http://webdesign.tutsplus.com/series/postcss-deep-dive--cms-889)
|
||||
|
||||
More articles and videos you can find on [awesome-postcss](https://github.com/jjaderg/awesome-postcss) list.
|
||||
|
||||
## Books
|
||||
|
||||
* [Mastering PostCSS for Web Design](https://www.packtpub.com/web-development/mastering-postcss-web-design) by Alex Libby, Packt. (June 2016)
|
||||
|
||||
## Usage
|
||||
|
||||
You can start using PostCSS in just two steps:
|
||||
|
||||
1. Find and add PostCSS extensions for your build tool.
|
||||
2. [Select plugins] and add them to your PostCSS process.
|
||||
|
||||
[Select plugins]: http://postcss.parts
|
||||
|
||||
### Webpack
|
||||
|
||||
Use [`postcss-loader`] in `webpack.config.js`:
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.css$/,
|
||||
exclude: /node_modules/,
|
||||
use: [
|
||||
{
|
||||
loader: 'style-loader',
|
||||
},
|
||||
{
|
||||
loader: 'css-loader',
|
||||
options: {
|
||||
importLoaders: 1,
|
||||
}
|
||||
},
|
||||
{
|
||||
loader: 'postcss-loader'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Then create `postcss.config.js`:
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
plugins: [
|
||||
require('precss'),
|
||||
require('autoprefixer')
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
[`postcss-loader`]: https://github.com/postcss/postcss-loader
|
||||
|
||||
### Gulp
|
||||
|
||||
Use [`gulp-postcss`] and [`gulp-sourcemaps`].
|
||||
|
||||
```js
|
||||
gulp.task('css', function () {
|
||||
var postcss = require('gulp-postcss');
|
||||
var sourcemaps = require('gulp-sourcemaps');
|
||||
|
||||
return gulp.src('src/**/*.css')
|
||||
.pipe( sourcemaps.init() )
|
||||
.pipe( postcss([ require('precss'), require('autoprefixer') ]) )
|
||||
.pipe( sourcemaps.write('.') )
|
||||
.pipe( gulp.dest('build/') );
|
||||
});
|
||||
```
|
||||
|
||||
[`gulp-sourcemaps`]: https://github.com/floridoo/gulp-sourcemaps
|
||||
[`gulp-postcss`]: https://github.com/postcss/gulp-postcss
|
||||
|
||||
### npm run / CLI
|
||||
|
||||
To use PostCSS from your command-line interface or with npm scripts
|
||||
there is [`postcss-cli`].
|
||||
|
||||
```sh
|
||||
postcss --use autoprefixer -c options.json -o main.css css/*.css
|
||||
```
|
||||
|
||||
[`postcss-cli`]: https://github.com/postcss/postcss-cli
|
||||
|
||||
### Browser
|
||||
|
||||
If you want to compile CSS string in browser (for instance, in live edit
|
||||
tools like CodePen), just use [Browserify] or [webpack]. They will pack
|
||||
PostCSS and plugins files into a single file.
|
||||
|
||||
To apply PostCSS plugins to React Inline Styles, JSS, Radium
|
||||
and other [CSS-in-JS], you can use [`postcss-js`] and transforms style objects.
|
||||
|
||||
```js
|
||||
var postcss = require('postcss-js');
|
||||
var prefixer = postcss.sync([ require('autoprefixer') ]);
|
||||
|
||||
prefixer({ display: 'flex' }); //=> { display: ['-webkit-box', '-webkit-flex', '-ms-flexbox', 'flex'] }
|
||||
```
|
||||
|
||||
[`postcss-js`]: https://github.com/postcss/postcss-js
|
||||
[Browserify]: http://browserify.org/
|
||||
[CSS-in-JS]: https://github.com/MicheleBertoli/css-in-js
|
||||
[webpack]: https://webpack.github.io/
|
||||
|
||||
### Runners
|
||||
|
||||
* **Grunt**: [`grunt-postcss`](https://github.com/nDmitry/grunt-postcss)
|
||||
* **HTML**: [`posthtml-postcss`](https://github.com/posthtml/posthtml-postcss)
|
||||
* **Stylus**: [`poststylus`](https://github.com/seaneking/poststylus)
|
||||
* **Rollup**: [`rollup-plugin-postcss`](https://github.com/egoist/rollup-plugin-postcss)
|
||||
* **Brunch**: [`postcss-brunch`](https://github.com/brunch/postcss-brunch)
|
||||
* **Broccoli**: [`broccoli-postcss`](https://github.com/jeffjewiss/broccoli-postcss)
|
||||
* **Meteor**: [`postcss`](https://atmospherejs.com/juliancwirko/postcss)
|
||||
* **ENB**: [`enb-postcss`](https://github.com/awinogradov/enb-postcss)
|
||||
* **Taskr**: [`taskr-postcss`](https://github.com/lukeed/taskr/tree/master/packages/postcss)
|
||||
* **Start**: [`start-postcss`](https://github.com/start-runner/postcss)
|
||||
* **Connect/Express**: [`postcss-middleware`](https://github.com/jedmao/postcss-middleware)
|
||||
|
||||
### JS API
|
||||
|
||||
For other environments, you can use the JS API:
|
||||
|
||||
```js
|
||||
const fs = require('fs');
|
||||
const postcss = require('postcss');
|
||||
const precss = require('precss');
|
||||
const autoprefixer = require('autoprefixer');
|
||||
|
||||
fs.readFile('src/app.css', (err, css) => {
|
||||
postcss([precss, autoprefixer])
|
||||
.process(css, { from: 'src/app.css', to: 'dest/app.css' })
|
||||
.then(result => {
|
||||
fs.writeFile('dest/app.css', result.css, () => true);
|
||||
if ( result.map ) {
|
||||
fs.writeFile('dest/app.css.map', result.map, () => true);
|
||||
}
|
||||
});
|
||||
});
|
||||
```
|
||||
|
||||
Read the [PostCSS API documentation] for more details about the JS API.
|
||||
|
||||
All PostCSS runners should pass [PostCSS Runner Guidelines].
|
||||
|
||||
[PostCSS Runner Guidelines]: https://github.com/postcss/postcss/blob/master/docs/guidelines/runner.md
|
||||
[PostCSS API documentation]: http://api.postcss.org/postcss.html
|
||||
|
||||
### Options
|
||||
|
||||
Most PostCSS runners accept two parameters:
|
||||
|
||||
* An array of plugins.
|
||||
* An object of options.
|
||||
|
||||
Common options:
|
||||
|
||||
* `syntax`: an object providing a syntax parser and a stringifier.
|
||||
* `parser`: a special syntax parser (for example, [SCSS]).
|
||||
* `stringifier`: a special syntax output generator (for example, [Midas]).
|
||||
* `map`: [source map options].
|
||||
* `from`: the input file name (most runners set it automatically).
|
||||
* `to`: the output file name (most runners set it automatically).
|
||||
|
||||
[source map options]: https://github.com/postcss/postcss/blob/master/docs/source-maps.md
|
||||
[Midas]: https://github.com/ben-eb/midas
|
||||
[SCSS]: https://github.com/postcss/postcss-scss
|
||||
|
||||
## Editors & IDE Integration
|
||||
|
||||
### Atom
|
||||
|
||||
* [`language-postcss`] adds PostCSS and [SugarSS] highlight.
|
||||
* [`source-preview-postcss`] previews your output CSS in a separate, live pane.
|
||||
|
||||
[SugarSS]: https://github.com/postcss/sugarss
|
||||
|
||||
### Sublime Text
|
||||
|
||||
* [`Syntax-highlighting-for-PostCSS`] adds PostCSS highlight.
|
||||
|
||||
[`Syntax-highlighting-for-PostCSS`]: https://github.com/hudochenkov/Syntax-highlighting-for-PostCSS
|
||||
[`source-preview-postcss`]: https://atom.io/packages/source-preview-postcss
|
||||
[`language-postcss`]: https://atom.io/packages/language-postcss
|
||||
|
||||
### Vim
|
||||
|
||||
* [`postcss.vim`] adds PostCSS highlight.
|
||||
|
||||
[`postcss.vim`]: https://github.com/stephenway/postcss.vim
|
||||
|
||||
### WebStorm
|
||||
|
||||
WebStorm 2016.3 [has] built-in PostCSS support.
|
||||
|
||||
[has]: https://blog.jetbrains.com/webstorm/2016/08/webstorm-2016-3-early-access-preview/
|
||||
+156
@@ -0,0 +1,156 @@
|
||||
## PostCSS Architecture
|
||||
|
||||
General overview of PostCSS architecture.
|
||||
It can be useful for everyone who wish to contribute to core or develop better understanding of the tool.
|
||||
|
||||
**Table of Contents**
|
||||
|
||||
- [Overview](#overview)
|
||||
- [Workflow](#workflow)
|
||||
- [Core Structures](#core-structures)
|
||||
* [Tokenizer](#tokenizer--libtokenizees6-)
|
||||
* [Parser](#parser--libparsees6-libparseres6-)
|
||||
* [Processor](#processor--libprocessores6-)
|
||||
* [Stringifier](#stringifier--libstringifyes6-libstringifieres6-)
|
||||
- [API](#api-reference)
|
||||
|
||||
### Overview
|
||||
|
||||
> This section describes ideas lying behind PostCSS
|
||||
|
||||
Before diving deeper into development of PostCSS let's briefly describe what is PostCSS and what is not.
|
||||
|
||||
**PostCSS**
|
||||
|
||||
- *is **NOT** a style preprocessor like `Sass` or `Less`.*
|
||||
|
||||
It does not define custom syntax and semantic, it's not actually a language.
|
||||
PostCSS works with CSS and can be easily integrated with tools described above. That being said any valid CSS can be processed by PostCSS.
|
||||
|
||||
- *is a tool for CSS syntax transformations*
|
||||
|
||||
It allows you to define custom CSS like syntax that could be understandable and transformed by plugins. That being said PostCSS is not strictly about CSS spec but about syntax definition manner of CSS. In such way you can define custom syntax constructs like at-rule, that could be very helpful for tools build around PostCSS. PostCSS plays a role of framework for building outstanding tools for CSS manipulations.
|
||||
|
||||
- *is a big player in CSS ecosystem*
|
||||
|
||||
Large amount of lovely tools like `Autoprefixer`, `Stylelint`, `CSSnano` were built on PostCSS ecosystem. There is big chance that you already use it implicitly, just check your `node_modules` :smiley:
|
||||
|
||||
### Workflow
|
||||
|
||||
This is high level overview of whole PostCSS workflow
|
||||
|
||||
<img width="300" src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/aa/PostCSS_scheme.svg/512px-PostCSS_scheme.svg.png" alt="workflow">
|
||||
|
||||
As you can see from diagram above, PostCSS architecture is pretty straightforward but some parts of it could be misunderstood.
|
||||
|
||||
From diagram above you can see part called *Parser*, this construct will be described in details later on, just for now think about it as a structure that can understand your CSS like syntax and create object representation of it.
|
||||
|
||||
That being said, there are few ways to write parser
|
||||
|
||||
- *Write a single file with string to AST transformation*
|
||||
|
||||
This method is quite popular, for example, the [Rework analyzer](https://github.com/reworkcss/css/blob/master/lib/parse/index.js) was written in this style. But with a large code base, the code becomes hard to read and pretty slow.
|
||||
|
||||
- *Split it into lexical analysis/parsing steps (source string → tokens → AST)*
|
||||
|
||||
This is the way of how we do it in PostCSS and also the most popular one.
|
||||
A lot of parsers like [`Babylon` (parser behind Babel)](https://github.com/babel/babel/tree/master/packages/babylon), [`CSSTree`](https://github.com/csstree/csstree) were written in such way.
|
||||
The main reasons to separate tokenization from parsing steps are performance and abstracting complexity.
|
||||
|
||||
Let think about why second way is better for our needs.
|
||||
|
||||
First of all because string to tokens step takes more time than parsing step. We operate on large source string and process it char by char, this is why it is very inefficient operation in terms of performance and we should perform it only once.
|
||||
|
||||
But from other side tokens to AST transformation is logically more complex so with such separation we could write very fast tokenizer (but from this comes sometimes hard to read code) and easy to read (but slow) parser.
|
||||
|
||||
Summing it up splitting in two steps improve performance and code readability.
|
||||
|
||||
So now lets look more closely on structures that play main role in PostCSS workflow.
|
||||
|
||||
### Core Structures
|
||||
|
||||
- #### Tokenizer ( [lib/tokenize.es6](https://github.com/postcss/postcss/blob/master/lib/tokenize.es6) )
|
||||
|
||||
Tokenizer (aka Lexer) plays important role in syntax analysis.
|
||||
|
||||
It accepts CSS string and returns list of tokens.
|
||||
|
||||
Token is a simple structure that describes some part of syntax like `at-rule`, `comment` or `word`. It can also contain positional information for more descriptive errors.
|
||||
|
||||
For example if we consider following css
|
||||
|
||||
```css
|
||||
.className { color: #FFF; }
|
||||
```
|
||||
|
||||
corresponding tokens representation from PostCSS will be
|
||||
```js
|
||||
[
|
||||
["word", ".className", 1, 1, 1, 10]
|
||||
["space", " "]
|
||||
["{", "{", 1, 12]
|
||||
["space", " "]
|
||||
["word", "color", 1, 14, 1, 18]
|
||||
[":", ":", 1, 19]
|
||||
["space", " "]
|
||||
["word", "#FFF" , 1, 21, 1, 23]
|
||||
[";", ";", 1, 24]
|
||||
["space", " "]
|
||||
["}", "}", 1, 26]
|
||||
]
|
||||
```
|
||||
|
||||
As you can see from the example above single token represented as a list and also `space` token doesn't have positional information.
|
||||
|
||||
Lets look more closely on single token like `word`. As it was said each token represented as a list and follow such pattern.
|
||||
|
||||
```js
|
||||
const token = [
|
||||
// represents token type
|
||||
'word',
|
||||
|
||||
// represents matched word
|
||||
'.className',
|
||||
|
||||
// This two numbers represent start position of token.
|
||||
// It's optional value as we saw in example above,
|
||||
// tokens like `space` don't have such information.
|
||||
|
||||
// Here the first number is line number and the second one is corresponding column.
|
||||
1, 1,
|
||||
|
||||
// Next two numbers also optional and represent end position for multichar tokens like this one. Numbers follow same rule as was described above
|
||||
1, 10
|
||||
];
|
||||
```
|
||||
There are many patterns how tokenization could be done, PostCSS motto is performance and simplicity. Tokenization is complex computing operation and take large amount of syntax analysis time ( ~90% ), that why PostCSS' Tokenizer looks dirty but it was optimized for speed. Any high-level constructs like classes could dramatically slow down tokenizer.
|
||||
|
||||
PostCSS' Tokenizer use some sort of streaming/chaining API where you exposes [`nextToken()`](https://github.com/postcss/postcss/blob/master/lib/tokenize.es6#L48-L308) method to Parser. In this manner we provide clean interface for Parser and reduce memory usage by storing only few tokens and not whole list of tokens.
|
||||
|
||||
- #### Parser ( [lib/parse.es6](https://github.com/postcss/postcss/blob/master/lib/parse.es6), [lib/parser.es6](https://github.com/postcss/postcss/blob/master/lib/parser.es6) )
|
||||
|
||||
Parser is main structure that responsible for [syntax analysis](https://en.wikipedia.org/wiki/Parsing) of incoming CSS. Parser produces structure called [Abstract Syntax Tree (AST)](https://en.wikipedia.org/wiki/Abstract_syntax_tree) that could then be transformed by plugins later on.
|
||||
|
||||
Parser works in common with Tokenizer and operates over tokens not source string, as it would be very inefficient operation.
|
||||
|
||||
It use mostly `nextToken` and `back` methods provided by Tokenizer for obtaining single or multiple tokens and than construct part of AST called `Node`
|
||||
|
||||
There are multiple Node types that PostCSS could produce but all of them inherit from base Node [class](https://github.com/postcss/postcss/blob/master/lib/node.es6#L34).
|
||||
|
||||
- #### Processor ( [lib/processor.es6](https://github.com/postcss/postcss/blob/master/lib/processor.es6) )
|
||||
|
||||
Processor is a very plain structure that initializes plugins and run syntax transformations. Plugin is just a function registered with [postcss.plugin](https://github.com/postcss/postcss/blob/master/lib/postcss.es6#L109) call.
|
||||
|
||||
It exposes quite few public API methods. Description of them could be found on [api.postcss.org/Processor](http://api.postcss.org/Processor.html)
|
||||
|
||||
- #### Stringifier ( [lib/stringify.es6](https://github.com/postcss/postcss/blob/master/lib/stringify.es6), [lib/stringifier.es6](https://github.com/postcss/postcss/blob/master/lib/stringifier.es6) )
|
||||
|
||||
Stringifier is a base class that translates modified AST to pure CSS string. Stringifier traverse AST starting from provided Node and generate raw string representation of it calling corresponding methods.
|
||||
|
||||
The most essential method is [`Stringifier.stringify`](https://github.com/postcss/postcss/blob/master/lib/stringifier.es6#L25-L27)
|
||||
that accepts initial Node and semicolon indicator.
|
||||
You can learn more by checking [stringifier.es6](https://github.com/postcss/postcss/blob/master/lib/stringifier.es6)
|
||||
|
||||
### API Reference
|
||||
|
||||
More descriptive API documentation could be found [here](http://api.postcss.org/)
|
||||
+195
@@ -0,0 +1,195 @@
|
||||
# PostCSS Plugin Guidelines
|
||||
|
||||
A PostCSS plugin is a function that receives and, usually,
|
||||
transforms a CSS AST from the PostCSS parser.
|
||||
|
||||
The rules below are *mandatory* for all PostCSS plugins.
|
||||
|
||||
See also [ClojureWerkz’s recommendations] for open source projects.
|
||||
|
||||
[ClojureWerkz’s recommendations]: http://blog.clojurewerkz.org/blog/2013/04/20/how-to-make-your-open-source-project-really-awesome/
|
||||
|
||||
## 1. API
|
||||
|
||||
### 1.1 Clear name with `postcss-` prefix
|
||||
|
||||
The plugin’s purpose should be clear just by reading its name.
|
||||
If you wrote a transpiler for CSS 4 Custom Media, `postcss-custom-media`
|
||||
would be a good name. If you wrote a plugin to support mixins,
|
||||
`postcss-mixins` would be a good name.
|
||||
|
||||
The prefix `postcss-` shows that the plugin is part of the PostCSS ecosystem.
|
||||
|
||||
This rule is not mandatory for plugins that can run as independent tools,
|
||||
without the user necessarily knowing that it is powered by
|
||||
PostCSS — for example, [cssnext] and [Autoprefixer].
|
||||
|
||||
[Autoprefixer]: https://github.com/postcss/autoprefixer
|
||||
[cssnext]: http://cssnext.io/
|
||||
|
||||
### 1.2. Do one thing, and do it well
|
||||
|
||||
Do not create multitool plugins. Several small, one-purpose plugins bundled into
|
||||
a plugin pack is usually a better solution.
|
||||
|
||||
For example, [cssnext] contains many small plugins,
|
||||
one for each W3C specification. And [cssnano] contains a separate plugin
|
||||
for each of its optimization.
|
||||
|
||||
[cssnext]: http://cssnext.io/
|
||||
[cssnano]: https://github.com/ben-eb/cssnano
|
||||
|
||||
### 1.3. Do not use mixins
|
||||
|
||||
Preprocessors libraries like Compass provide an API with mixins.
|
||||
|
||||
PostCSS plugins are different.
|
||||
A plugin cannot be just a set of mixins for [postcss-mixins].
|
||||
|
||||
To achieve your goal, consider transforming valid CSS
|
||||
or using custom at-rules and custom properties.
|
||||
|
||||
[postcss-mixins]: https://github.com/postcss/postcss-mixins
|
||||
|
||||
### 1.4. Create plugin by `postcss.plugin`
|
||||
|
||||
By wrapping your function in this method,
|
||||
you are hooking into a common plugin API:
|
||||
|
||||
```js
|
||||
module.exports = postcss.plugin('plugin-name', function (opts) {
|
||||
return function (root, result) {
|
||||
// Plugin code
|
||||
};
|
||||
});
|
||||
```
|
||||
|
||||
## 2. Processing
|
||||
|
||||
### 2.1. Plugin must be tested
|
||||
|
||||
A CI service like [Travis] is also recommended for testing code in
|
||||
different environments. You should test in (at least) Node.js [active LTS](https://github.com/nodejs/LTS) and current stable version.
|
||||
|
||||
[Travis]: https://travis-ci.org/
|
||||
|
||||
### 2.2. Use asynchronous methods whenever possible
|
||||
|
||||
For example, use `fs.writeFile` instead of `fs.writeFileSync`:
|
||||
|
||||
```js
|
||||
postcss.plugin('plugin-sprite', function (opts) {
|
||||
return function (root, result) {
|
||||
|
||||
return new Promise(function (resolve, reject) {
|
||||
var sprite = makeSprite();
|
||||
fs.writeFile(opts.file, function (err) {
|
||||
if ( err ) return reject(err);
|
||||
resolve();
|
||||
})
|
||||
});
|
||||
|
||||
};
|
||||
});
|
||||
```
|
||||
|
||||
### 2.3. Set `node.source` for new nodes
|
||||
|
||||
Every node must have a relevant `source` so PostCSS can generate
|
||||
an accurate source map.
|
||||
|
||||
So if you add new declaration based on some existing declaration, you should
|
||||
clone the existing declaration in order to save that original `source`.
|
||||
|
||||
```js
|
||||
if ( needPrefix(decl.prop) ) {
|
||||
decl.cloneBefore({ prop: '-webkit-' + decl.prop });
|
||||
}
|
||||
```
|
||||
|
||||
You can also set `source` directly, copying from some existing node:
|
||||
|
||||
```js
|
||||
if ( decl.prop === 'animation' ) {
|
||||
var keyframe = createAnimationByName(decl.value);
|
||||
keyframes.source = decl.source;
|
||||
decl.root().append(keyframes);
|
||||
}
|
||||
```
|
||||
|
||||
### 2.4. Use only the public PostCSS API
|
||||
|
||||
PostCSS plugins must not rely on undocumented properties or methods,
|
||||
which may be subject to change in any minor release. The public API
|
||||
is described in [API docs].
|
||||
|
||||
[API docs]: http://api.postcss.org/
|
||||
|
||||
## 3. Errors
|
||||
|
||||
### 3.1. Use `node.error` on CSS relevant errors
|
||||
|
||||
If you have an error because of input CSS (like an unknown name
|
||||
in a mixin plugin) you should use `node.error` to create an error
|
||||
that includes source position:
|
||||
|
||||
```js
|
||||
if ( typeof mixins[name] === 'undefined' ) {
|
||||
throw decl.error('Unknown mixin ' + name, { plugin: 'postcss-mixins' });
|
||||
}
|
||||
```
|
||||
|
||||
### 3.2. Use `result.warn` for warnings
|
||||
|
||||
Do not print warnings with `console.log` or `console.warn`,
|
||||
because some PostCSS runner may not allow console output.
|
||||
|
||||
```js
|
||||
if ( outdated(decl.prop) ) {
|
||||
result.warn(decl.prop + ' is outdated', { node: decl });
|
||||
}
|
||||
```
|
||||
|
||||
If CSS input is a source of the warning, the plugin must set the `node` option.
|
||||
|
||||
## 4. Documentation
|
||||
|
||||
### 4.1. Document your plugin in English
|
||||
|
||||
PostCSS plugins must have their `README.md` written in English. Do not be afraid
|
||||
of your English skills, as the open source community will fix your errors.
|
||||
|
||||
Of course, you are welcome to write documentation in other languages;
|
||||
just name them appropriately (e.g. `README.ja.md`).
|
||||
|
||||
### 4.2. Include input and output examples
|
||||
|
||||
The plugin's `README.md` must contain example input and output CSS.
|
||||
A clear example is the best way to describe how your plugin works.
|
||||
|
||||
The first section of the `README.md` is a good place to put examples.
|
||||
See [postcss-opacity](https://github.com/iamvdo/postcss-opacity) for an example.
|
||||
|
||||
Of course, this guideline does not apply if your plugin does not
|
||||
transform the CSS.
|
||||
|
||||
### 4.3. Maintain a changelog
|
||||
|
||||
PostCSS plugins must describe the changes of all their releases
|
||||
in a separate file, such as `CHANGELOG.md`, `History.md`, or [GitHub Releases].
|
||||
Visit [Keep A Changelog] for more information about how to write one of these.
|
||||
|
||||
Of course, you should be using [SemVer].
|
||||
|
||||
[Keep A Changelog]: http://keepachangelog.com/
|
||||
[GitHub Releases]: https://help.github.com/articles/creating-releases/
|
||||
[SemVer]: http://semver.org/
|
||||
|
||||
### 4.4. Include `postcss-plugin` keyword in `package.json`
|
||||
|
||||
PostCSS plugins written for npm must have the `postcss-plugin` keyword
|
||||
in their `package.json`. This special keyword will be useful for feedback about
|
||||
the PostCSS ecosystem.
|
||||
|
||||
For packages not published to npm, this is not mandatory, but is recommended
|
||||
if the package format can contain keywords.
|
||||
+143
@@ -0,0 +1,143 @@
|
||||
# PostCSS Runner Guidelines
|
||||
|
||||
A PostCSS runner is a tool that processes CSS through a user-defined list
|
||||
of plugins; for example, [`postcss-cli`] or [`gulp‑postcss`].
|
||||
These rules are mandatory for any such runners.
|
||||
|
||||
For single-plugin tools, like [`gulp-autoprefixer`],
|
||||
these rules are not mandatory but are highly recommended.
|
||||
|
||||
See also [ClojureWerkz’s recommendations] for open source projects.
|
||||
|
||||
[ClojureWerkz’s recommendations]: http://blog.clojurewerkz.org/blog/2013/04/20/how-to-make-your-open-source-project-really-awesome/
|
||||
[`gulp-autoprefixer`]: https://github.com/sindresorhus/gulp-autoprefixer
|
||||
[`gulp‑postcss`]: https://github.com/w0rm/gulp-postcss
|
||||
[`postcss-cli`]: https://github.com/postcss/postcss-cli
|
||||
|
||||
## 1. API
|
||||
|
||||
### 1.1. Accept functions in plugin parameters
|
||||
|
||||
If your runner uses a config file, it must be written in JavaScript, so that
|
||||
it can support plugins which accept a function, such as [`postcss-assets`]:
|
||||
|
||||
```js
|
||||
module.exports = [
|
||||
require('postcss-assets')({
|
||||
cachebuster: function (file) {
|
||||
return fs.statSync(file).mtime.getTime().toString(16);
|
||||
}
|
||||
})
|
||||
];
|
||||
```
|
||||
|
||||
[`postcss-assets`]: https://github.com/borodean/postcss-assets
|
||||
|
||||
## 2. Processing
|
||||
|
||||
### 2.1. Set `from` and `to` processing options
|
||||
|
||||
To ensure that PostCSS generates source maps and displays better syntax errors,
|
||||
runners must specify the `from` and `to` options. If your runner does not handle
|
||||
writing to disk (for example, a gulp transform), you should set both options
|
||||
to point to the same file:
|
||||
|
||||
```js
|
||||
processor.process({ from: file.path, to: file.path });
|
||||
```
|
||||
|
||||
### 2.2. Use only the asynchronous API
|
||||
|
||||
PostCSS runners must use only the asynchronous API.
|
||||
The synchronous API is provided only for debugging, is slower,
|
||||
and can’t work with asynchronous plugins.
|
||||
|
||||
```js
|
||||
processor.process(opts).then(function (result) {
|
||||
// processing is finished
|
||||
});
|
||||
```
|
||||
|
||||
### 2.3. Use only the public PostCSS API
|
||||
|
||||
PostCSS runners must not rely on undocumented properties or methods,
|
||||
which may be subject to change in any minor release. The public API
|
||||
is described in [API docs].
|
||||
|
||||
[API docs]: http://api.postcss.org/
|
||||
|
||||
## 3. Output
|
||||
|
||||
### 3.1. Don’t show JS stack for `CssSyntaxError`
|
||||
|
||||
PostCSS runners must not show a stack trace for CSS syntax errors,
|
||||
as the runner can be used by developers who are not familiar with JavaScript.
|
||||
Instead, handle such errors gracefully:
|
||||
|
||||
```js
|
||||
processor.process(opts).catch(function (error) {
|
||||
if ( error.name === 'CssSyntaxError' ) {
|
||||
process.stderr.write(error.message + error.showSourceCode());
|
||||
} else {
|
||||
throw error;
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
### 3.2. Display `result.warnings()`
|
||||
|
||||
PostCSS runners must output warnings from `result.warnings()`:
|
||||
|
||||
```js
|
||||
result.warnings().forEach(function (warn) {
|
||||
process.stderr.write(warn.toString());
|
||||
});
|
||||
```
|
||||
|
||||
See also [postcss-log-warnings] and [postcss-messages] plugins.
|
||||
|
||||
[postcss-log-warnings]: https://github.com/davidtheclark/postcss-log-warnings
|
||||
[postcss-messages]: https://github.com/postcss/postcss-messages
|
||||
|
||||
### 3.3. Allow the user to write source maps to different files
|
||||
|
||||
PostCSS by default will inline source maps in the generated file; however,
|
||||
PostCSS runners must provide an option to save the source map in a different
|
||||
file:
|
||||
|
||||
```js
|
||||
if ( result.map ) {
|
||||
fs.writeFile(opts.to + '.map', result.map.toString());
|
||||
}
|
||||
```
|
||||
|
||||
## 4. Documentation
|
||||
|
||||
### 4.1. Document your runner in English
|
||||
|
||||
PostCSS runners must have their `README.md` written in English. Do not be afraid
|
||||
of your English skills, as the open source community will fix your errors.
|
||||
|
||||
Of course, you are welcome to write documentation in other languages;
|
||||
just name them appropriately (e.g. `README.ja.md`).
|
||||
|
||||
### 4.2. Maintain a changelog
|
||||
|
||||
PostCSS runners must describe changes of all releases in a separate file,
|
||||
such as `ChangeLog.md`, `History.md`, or with [GitHub Releases].
|
||||
Visit [Keep A Changelog] for more information on how to write one of these.
|
||||
|
||||
Of course you should use [SemVer].
|
||||
|
||||
[Keep A Changelog]: http://keepachangelog.com/
|
||||
[GitHub Releases]: https://help.github.com/articles/creating-releases/
|
||||
[SemVer]: http://semver.org/
|
||||
|
||||
### 4.3. `postcss-runner` keyword in `package.json`
|
||||
|
||||
PostCSS runners written for npm must have the `postcss-runner` keyword
|
||||
in their `package.json`. This special keyword will be useful for feedback about
|
||||
the PostCSS ecosystem.
|
||||
|
||||
For packages not published to npm, this is not mandatory, but recommended
|
||||
if the package format is allowed to contain keywords.
|
||||
+74
@@ -0,0 +1,74 @@
|
||||
# PostCSS and Source Maps
|
||||
|
||||
PostCSS has great [source maps] support. It can read and interpret maps
|
||||
from previous transformation steps, autodetect the format that you expect,
|
||||
and output both external and inline maps.
|
||||
|
||||
To ensure that you generate an accurate source map, you must indicate the input
|
||||
and output CSS file paths — using the options `from` and `to`, respectively.
|
||||
|
||||
To generate a new source map with the default options, simply set `map: true`.
|
||||
This will generate an inline source map that contains the source content.
|
||||
If you don’t want the map inlined, you can set `map.inline: false`.
|
||||
|
||||
```js
|
||||
processor
|
||||
.process(css, {
|
||||
from: 'app.sass.css',
|
||||
to: 'app.css',
|
||||
map: { inline: false },
|
||||
})
|
||||
.then(function (result) {
|
||||
result.map //=> '{ "version":3,
|
||||
// "file":"app.css",
|
||||
// "sources":["app.sass"],
|
||||
// "mappings":"AAAA,KAAI" }'
|
||||
});
|
||||
```
|
||||
|
||||
If PostCSS finds source maps from a previous transformation,
|
||||
it will automatically update that source map with the same options.
|
||||
|
||||
## Options
|
||||
|
||||
If you want more control over source map generation, you can define the `map`
|
||||
option as an object with the following parameters:
|
||||
|
||||
* `inline` boolean: indicates that the source map should be embedded
|
||||
in the output CSS as a Base64-encoded comment. By default, it is `true`.
|
||||
But if all previous maps are external, not inline, PostCSS will not embed
|
||||
the map even if you do not set this option.
|
||||
|
||||
If you have an inline source map, the `result.map` property will be empty,
|
||||
as the source map will be contained within the text of `result.css`.
|
||||
|
||||
* `prev` string, object, boolean or function: source map content from
|
||||
a previous processing step (for example, Sass compilation).
|
||||
PostCSS will try to read the previous source map automatically
|
||||
(based on comments within the source CSS), but you can use this option
|
||||
to identify it manually. If desired, you can omit the previous map
|
||||
with `prev: false`.
|
||||
|
||||
* `sourcesContent` boolean: indicates that PostCSS should set the origin
|
||||
content (for example, Sass source) of the source map. By default,
|
||||
it is `true`. But if all previous maps do not contain sources content,
|
||||
PostCSS will also leave it out even if you do not set this option.
|
||||
|
||||
* `annotation` boolean or string: indicates that PostCSS should add annotation
|
||||
comments to the CSS. By default, PostCSS will always add a comment with a path
|
||||
to the source map. PostCSS will not add annotations to CSS files that
|
||||
do not contain any comments.
|
||||
|
||||
By default, PostCSS presumes that you want to save the source map as
|
||||
`opts.to + '.map'` and will use this path in the annotation comment.
|
||||
A different path can be set by providing a string value for `annotation`.
|
||||
|
||||
If you have set `inline: true`, annotation cannot be disabled.
|
||||
|
||||
* `from` string: by default, PostCSS will set the `sources` property of the map
|
||||
to the value of the `from` option. If you want to override this behaviour, you
|
||||
can use `map.from` to explicitly set the source map's `sources` property.
|
||||
Path should be absolute or relative from generated file
|
||||
(`to` option in `process()` method).
|
||||
|
||||
[source maps]: http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/
|
||||
+231
@@ -0,0 +1,231 @@
|
||||
# How to Write Custom Syntax
|
||||
|
||||
PostCSS can transform styles in any syntax, and is not limited to just CSS.
|
||||
By writing a custom syntax, you can transform styles in any desired format.
|
||||
|
||||
Writing a custom syntax is much harder than writing a PostCSS plugin, but
|
||||
it is an awesome adventure.
|
||||
|
||||
There are 3 types of PostCSS syntax packages:
|
||||
|
||||
* **Parser** to parse input string to node’s tree.
|
||||
* **Stringifier** to generate output string by node’s tree.
|
||||
* **Syntax** contains both parser and stringifier.
|
||||
|
||||
## Syntax
|
||||
|
||||
A good example of a custom syntax is [SCSS]. Some users may want to transform
|
||||
SCSS sources with PostCSS plugins, for example if they need to add vendor
|
||||
prefixes or change the property order. So this syntax should output SCSS from
|
||||
an SCSS input.
|
||||
|
||||
The syntax API is a very simple plain object, with `parse` & `stringify`
|
||||
functions:
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
parse: require('./parse'),
|
||||
stringify: require('./stringify')
|
||||
};
|
||||
```
|
||||
|
||||
[SCSS]: https://github.com/postcss/postcss-scss
|
||||
|
||||
## Parser
|
||||
|
||||
A good example of a parser is [Safe Parser], which parses malformed/broken CSS.
|
||||
Because there is no point to generate broken output, this package only provides
|
||||
a parser.
|
||||
|
||||
The parser API is a function which receives a string & returns a [`Root`] node.
|
||||
The second argument is a function which receives an object with PostCSS options.
|
||||
|
||||
```js
|
||||
var postcss = require('postcss');
|
||||
|
||||
module.exports = function (css, opts) {
|
||||
var root = postcss.root();
|
||||
// Add other nodes to root
|
||||
return root;
|
||||
};
|
||||
```
|
||||
|
||||
[Safe Parser]: https://github.com/postcss/postcss-safe-parser
|
||||
[`Root`]: http://api.postcss.org/Root.html
|
||||
|
||||
### Main Theory
|
||||
|
||||
There are many books about parsers; but do not worry because CSS syntax is
|
||||
very easy, and so the parser will be much simpler than a programming language
|
||||
parser.
|
||||
|
||||
The default PostCSS parser contains two steps:
|
||||
|
||||
1. [Tokenizer] which reads input string character by character and builds a
|
||||
tokens array. For example, it joins space symbols to a `['space', '\n ']`
|
||||
token, and detects strings to a `['string', '"\"{"']` token.
|
||||
2. [Parser] which reads the tokens array, creates node instances and
|
||||
builds a tree.
|
||||
|
||||
[Tokenizer]: https://github.com/postcss/postcss/blob/master/lib/tokenize.es6
|
||||
[Parser]: https://github.com/postcss/postcss/blob/master/lib/parser.es6
|
||||
|
||||
### Performance
|
||||
|
||||
Parsing input is often the most time consuming task in CSS processors. So it
|
||||
is very important to have a fast parser.
|
||||
|
||||
The main rule of optimization is that there is no performance without a
|
||||
benchmark. You can look at [PostCSS benchmarks] to build your own.
|
||||
|
||||
Of parsing tasks, the tokenize step will often take the most time, so its
|
||||
performance should be prioritized. Unfortunately, classes, functions and
|
||||
high level structures can slow down your tokenizer. Be ready to write dirty
|
||||
code with repeated statements. This is why it is difficult to extend the
|
||||
default [PostCSS tokenizer]; copy & paste will be a necessary evil.
|
||||
|
||||
Second optimization is using character codes instead of strings.
|
||||
|
||||
```js
|
||||
// Slow
|
||||
string[i] === '{';
|
||||
|
||||
// Fast
|
||||
const OPEN_CURLY = 123; // `{'
|
||||
string.charCodeAt(i) === OPEN_CURLY;
|
||||
```
|
||||
|
||||
Third optimization is “fast jumps”. If you find open quotes, you can find
|
||||
next closing quote much faster by `indexOf`:
|
||||
|
||||
```js
|
||||
// Simple jump
|
||||
next = string.indexOf('"', currentPosition + 1);
|
||||
|
||||
// Jump by RegExp
|
||||
regexp.lastIndex = currentPosion + 1;
|
||||
regexp.test(string);
|
||||
next = regexp.lastIndex;
|
||||
```
|
||||
|
||||
The parser can be a well written class. There is no need in copy-paste and
|
||||
hardcore optimization there. You can extend the default [PostCSS parser].
|
||||
|
||||
[PostCSS benchmarks]: https://github.com/postcss/benchmark
|
||||
[PostCSS tokenizer]: https://github.com/postcss/postcss/blob/master/lib/tokenize.es6
|
||||
[PostCSS parser]: https://github.com/postcss/postcss/blob/master/lib/parser.es6
|
||||
|
||||
### Node Source
|
||||
|
||||
Every node should have `source` property to generate correct source map.
|
||||
This property contains `start` and `end` properties with `{ line, column }`,
|
||||
and `input` property with an [`Input`] instance.
|
||||
|
||||
Your tokenizer should save the original position so that you can propagate
|
||||
the values to the parser, to ensure that the source map is correctly updated.
|
||||
|
||||
[`Input`]: https://github.com/postcss/postcss/blob/master/lib/input.es6
|
||||
|
||||
### Raw Values
|
||||
|
||||
A good PostCSS parser should provide all information (including spaces symbols)
|
||||
to generate byte-to-byte equal output. It is not so difficult, but respectful
|
||||
for user input and allow integration smoke tests.
|
||||
|
||||
A parser should save all additional symbols to `node.raws` object.
|
||||
It is an open structure for you, you can add additional keys.
|
||||
For example, [SCSS parser] saves comment types (`/* */` or `//`)
|
||||
in `node.raws.inline`.
|
||||
|
||||
The default parser cleans CSS values from comments and spaces.
|
||||
It saves the original value with comments to `node.raws.value.raw` and uses it,
|
||||
if the node value was not changed.
|
||||
|
||||
[SCSS parser]: https://github.com/postcss/postcss-scss
|
||||
|
||||
### Tests
|
||||
|
||||
Of course, all parsers in the PostCSS ecosystem must have tests.
|
||||
|
||||
If your parser just extends CSS syntax (like [SCSS] or [Safe Parser]),
|
||||
you can use the [PostCSS Parser Tests]. It contains unit & integration tests.
|
||||
|
||||
[PostCSS Parser Tests]: https://github.com/postcss/postcss-parser-tests
|
||||
|
||||
## Stringifier
|
||||
|
||||
A style guide generator is a good example of a stringifier. It generates output
|
||||
HTML which contains CSS components. For this use case, a parser isn't necessary,
|
||||
so the package should just contain a stringifier.
|
||||
|
||||
The Stringifier API is little bit more complicated, than the parser API.
|
||||
PostCSS generates a source map, so a stringifier can’t just return a string.
|
||||
It must link every substring with its source node.
|
||||
|
||||
A Stringifier is a function which receives [`Root`] node and builder callback.
|
||||
Then it calls builder with every node’s string and node instance.
|
||||
|
||||
```js
|
||||
module.exports = function (root, builder) {
|
||||
// Some magic
|
||||
var string = decl.prop + ':' + decl.value + ';';
|
||||
builder(string, decl);
|
||||
// Some science
|
||||
};
|
||||
```
|
||||
|
||||
### Main Theory
|
||||
|
||||
PostCSS [default stringifier] is just a class with a method for each node type
|
||||
and many methods to detect raw properties.
|
||||
|
||||
In most cases it will be enough just to extend this class,
|
||||
like in [SCSS stringifier].
|
||||
|
||||
[default stringifier]: https://github.com/postcss/postcss/blob/master/lib/stringifier.es6
|
||||
[SCSS stringifier]: https://github.com/postcss/postcss-scss/blob/master/lib/scss-stringifier.es6
|
||||
|
||||
### Builder Function
|
||||
|
||||
A builder function will be passed to `stringify` function as second argument.
|
||||
For example, the default PostCSS stringifier class saves it
|
||||
to `this.builder` property.
|
||||
|
||||
Builder receives output substring and source node to append this substring
|
||||
to the final output.
|
||||
|
||||
Some nodes contain other nodes in the middle. For example, a rule has a `{`
|
||||
at the beginning, many declarations inside and a closing `}`.
|
||||
|
||||
For these cases, you should pass a third argument to builder function:
|
||||
`'start'` or `'end'` string:
|
||||
|
||||
```js
|
||||
this.builder(rule.selector + '{', rule, 'start');
|
||||
// Stringify declarations inside
|
||||
this.builder('}', rule, 'end');
|
||||
```
|
||||
|
||||
### Raw Values
|
||||
|
||||
A good PostCSS custom syntax saves all symbols and provide byte-to-byte equal
|
||||
output if there were no changes.
|
||||
|
||||
This is why every node has `node.raws` object to store space symbol, etc.
|
||||
|
||||
Be careful, because sometimes these raw properties will not be present; some
|
||||
nodes may be built manually, or may lose their indentation when they are moved
|
||||
to another parent node.
|
||||
|
||||
This is why the default stringifier has a `raw()` method to autodetect raw
|
||||
properties by other nodes. For example, it will look at other nodes to detect
|
||||
indent size and them multiply it with the current node depth.
|
||||
|
||||
### Tests
|
||||
|
||||
A stringifier must have tests too.
|
||||
|
||||
You can use unit and integration test cases from [PostCSS Parser Tests].
|
||||
Just compare input CSS with CSS after your parser and stringifier.
|
||||
|
||||
[PostCSS Parser Tests]: https://github.com/postcss/postcss-parser-tests
|
||||
+97
@@ -0,0 +1,97 @@
|
||||
'use strict';
|
||||
|
||||
const gulp = require('gulp');
|
||||
|
||||
gulp.task('clean', () => {
|
||||
let del = require('del');
|
||||
return del(['lib/*.js', 'postcss.js', 'build/', 'api/']);
|
||||
});
|
||||
|
||||
// Build
|
||||
|
||||
gulp.task('compile', () => {
|
||||
let sourcemaps = require('gulp-sourcemaps');
|
||||
let changed = require('gulp-changed');
|
||||
let babel = require('gulp-babel');
|
||||
return gulp.src('lib/*.es6')
|
||||
.pipe(changed('lib', { extension: '.js' }))
|
||||
.pipe(sourcemaps.init())
|
||||
.pipe(babel({
|
||||
presets: [
|
||||
[
|
||||
'env',
|
||||
{
|
||||
targets: {
|
||||
browsers: 'last 2 version',
|
||||
node: 4
|
||||
},
|
||||
loose: true
|
||||
}
|
||||
]
|
||||
],
|
||||
plugins: ['add-module-exports', 'precompile-charcodes']
|
||||
}))
|
||||
.pipe(sourcemaps.write())
|
||||
.pipe(gulp.dest('lib'));
|
||||
});
|
||||
|
||||
gulp.task('build:lib', ['compile'], () => {
|
||||
return gulp.src(['lib/*.js', 'lib/*.d.ts']).pipe(gulp.dest('build/lib'));
|
||||
});
|
||||
|
||||
gulp.task('build:package', () => {
|
||||
const editor = require('gulp-json-editor');
|
||||
return gulp.src('./package.json')
|
||||
.pipe(editor((json) => {
|
||||
delete json.babel;
|
||||
delete json.scripts;
|
||||
delete json.jest;
|
||||
delete json.eslintConfig;
|
||||
delete json['size-limit'];
|
||||
delete json['pre-commit'];
|
||||
delete json['lint-staged'];
|
||||
delete json.devDependencies;
|
||||
return json;
|
||||
}))
|
||||
.pipe(gulp.dest('build'));
|
||||
});
|
||||
|
||||
gulp.task('build:docs', () => {
|
||||
let ignore = require('fs').readFileSync('.npmignore').toString()
|
||||
.trim().split(/\n+/)
|
||||
.concat([
|
||||
'package.json', '.npmignore', 'lib/*', 'test/*',
|
||||
'node_modules/**/*', 'docs/api.md', 'docs/plugins.md',
|
||||
'docs/writing-a-plugin.md'
|
||||
]).map( i => '!' + i );
|
||||
return gulp.src(['**/*'].concat(ignore))
|
||||
.pipe(gulp.dest('build'));
|
||||
});
|
||||
|
||||
gulp.task('build', done => {
|
||||
let runSequence = require('run-sequence');
|
||||
runSequence('clean', ['build:lib', 'build:docs', 'build:package'], done);
|
||||
});
|
||||
|
||||
// Tests
|
||||
|
||||
gulp.task('integration', ['build'], done => {
|
||||
let postcss = require('./build');
|
||||
let real = require('postcss-parser-tests/real');
|
||||
real(done, css => {
|
||||
return postcss.parse(css).toResult({ map: { annotation: false } });
|
||||
});
|
||||
});
|
||||
|
||||
gulp.task('version', ['build:lib'], () => {
|
||||
let Processor = require('./lib/processor');
|
||||
let instance = new Processor();
|
||||
let pkg = require('./package');
|
||||
if ( pkg.version !== instance.version ) {
|
||||
throw new Error('Version in Processor is not equal to package.json');
|
||||
}
|
||||
});
|
||||
|
||||
// Common
|
||||
|
||||
gulp.task('default', ['version', 'integration']);
|
||||
+131
File diff suppressed because one or more lines are too long
+61
@@ -0,0 +1,61 @@
|
||||
'use strict';
|
||||
|
||||
exports.__esModule = true;
|
||||
|
||||
var _node = require('./node');
|
||||
|
||||
var _node2 = _interopRequireDefault(_node);
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
|
||||
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
||||
|
||||
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
|
||||
|
||||
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
|
||||
|
||||
/**
|
||||
* Represents a comment between declarations or statements (rule and at-rules).
|
||||
*
|
||||
* Comments inside selectors, at-rule parameters, or declaration values
|
||||
* will be stored in the `raws` properties explained above.
|
||||
*
|
||||
* @extends Node
|
||||
*/
|
||||
var Comment = function (_Node) {
|
||||
_inherits(Comment, _Node);
|
||||
|
||||
function Comment(defaults) {
|
||||
_classCallCheck(this, Comment);
|
||||
|
||||
var _this = _possibleConstructorReturn(this, _Node.call(this, defaults));
|
||||
|
||||
_this.type = 'comment';
|
||||
return _this;
|
||||
}
|
||||
|
||||
/**
|
||||
* @memberof Comment#
|
||||
* @member {string} text - the comment’s text
|
||||
*/
|
||||
|
||||
/**
|
||||
* @memberof Comment#
|
||||
* @member {object} raws - Information to generate byte-to-byte equal
|
||||
* node string as it was in the origin input.
|
||||
*
|
||||
* Every parser saves its own properties,
|
||||
* but the default CSS parser uses:
|
||||
*
|
||||
* * `before`: the space symbols before the node.
|
||||
* * `left`: the space symbols between `/*` and the comment’s text.
|
||||
* * `right`: the space symbols between the comment’s text.
|
||||
*/
|
||||
|
||||
|
||||
return Comment;
|
||||
}(_node2.default);
|
||||
|
||||
exports.default = Comment;
|
||||
module.exports = exports['default'];
|
||||
//# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvbW1lbnQuZXM2Il0sIm5hbWVzIjpbIkNvbW1lbnQiLCJkZWZhdWx0cyIsInR5cGUiLCJOb2RlIl0sIm1hcHBpbmdzIjoiOzs7O0FBQUE7Ozs7Ozs7Ozs7OztBQUVBOzs7Ozs7OztJQVFNQSxPOzs7QUFFRixtQkFBWUMsUUFBWixFQUFzQjtBQUFBOztBQUFBLGlEQUNsQixpQkFBTUEsUUFBTixDQURrQjs7QUFFbEIsVUFBS0MsSUFBTCxHQUFZLFNBQVo7QUFGa0I7QUFHckI7O0FBRUQ7Ozs7O0FBS0E7Ozs7Ozs7Ozs7Ozs7OztFQVprQkMsYzs7a0JBMEJQSCxPIiwiZmlsZSI6ImNvbW1lbnQuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgTm9kZSBmcm9tICcuL25vZGUnO1xuXG4vKipcbiAqIFJlcHJlc2VudHMgYSBjb21tZW50IGJldHdlZW4gZGVjbGFyYXRpb25zIG9yIHN0YXRlbWVudHMgKHJ1bGUgYW5kIGF0LXJ1bGVzKS5cbiAqXG4gKiBDb21tZW50cyBpbnNpZGUgc2VsZWN0b3JzLCBhdC1ydWxlIHBhcmFtZXRlcnMsIG9yIGRlY2xhcmF0aW9uIHZhbHVlc1xuICogd2lsbCBiZSBzdG9yZWQgaW4gdGhlIGByYXdzYCBwcm9wZXJ0aWVzIGV4cGxhaW5lZCBhYm92ZS5cbiAqXG4gKiBAZXh0ZW5kcyBOb2RlXG4gKi9cbmNsYXNzIENvbW1lbnQgZXh0ZW5kcyBOb2RlIHtcblxuICAgIGNvbnN0cnVjdG9yKGRlZmF1bHRzKSB7XG4gICAgICAgIHN1cGVyKGRlZmF1bHRzKTtcbiAgICAgICAgdGhpcy50eXBlID0gJ2NvbW1lbnQnO1xuICAgIH1cblxuICAgIC8qKlxuICAgICAqIEBtZW1iZXJvZiBDb21tZW50I1xuICAgICAqIEBtZW1iZXIge3N0cmluZ30gdGV4dCAtIHRoZSBjb21tZW504oCZcyB0ZXh0XG4gICAgICovXG5cbiAgICAvKipcbiAgICAgKiBAbWVtYmVyb2YgQ29tbWVudCNcbiAgICAgKiBAbWVtYmVyIHtvYmplY3R9IHJhd3MgLSBJbmZvcm1hdGlvbiB0byBnZW5lcmF0ZSBieXRlLXRvLWJ5dGUgZXF1YWxcbiAgICAgKiAgICAgICAgICAgICAgICAgICAgICAgICBub2RlIHN0cmluZyBhcyBpdCB3YXMgaW4gdGhlIG9yaWdpbiBpbnB1dC5cbiAgICAgKlxuICAgICAqIEV2ZXJ5IHBhcnNlciBzYXZlcyBpdHMgb3duIHByb3BlcnRpZXMsXG4gICAgICogYnV0IHRoZSBkZWZhdWx0IENTUyBwYXJzZXIgdXNlczpcbiAgICAgKlxuICAgICAqICogYGJlZm9yZWA6IHRoZSBzcGFjZSBzeW1ib2xzIGJlZm9yZSB0aGUgbm9kZS5cbiAgICAgKiAqIGBsZWZ0YDogdGhlIHNwYWNlIHN5bWJvbHMgYmV0d2VlbiBgLypgIGFuZCB0aGUgY29tbWVudOKAmXMgdGV4dC5cbiAgICAgKiAqIGByaWdodGA6IHRoZSBzcGFjZSBzeW1ib2xzIGJldHdlZW4gdGhlIGNvbW1lbnTigJlzIHRleHQuXG4gICAgICovXG59XG5cbmV4cG9ydCBkZWZhdWx0IENvbW1lbnQ7XG4iXX0=
|
||||
+907
File diff suppressed because one or more lines are too long
+256
File diff suppressed because one or more lines are too long
+101
@@ -0,0 +1,101 @@
|
||||
'use strict';
|
||||
|
||||
exports.__esModule = true;
|
||||
|
||||
var _node = require('./node');
|
||||
|
||||
var _node2 = _interopRequireDefault(_node);
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
|
||||
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
||||
|
||||
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
|
||||
|
||||
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
|
||||
|
||||
/**
|
||||
* Represents a CSS declaration.
|
||||
*
|
||||
* @extends Node
|
||||
*
|
||||
* @example
|
||||
* const root = postcss.parse('a { color: black }');
|
||||
* const decl = root.first.first;
|
||||
* decl.type //=> 'decl'
|
||||
* decl.toString() //=> ' color: black'
|
||||
*/
|
||||
var Declaration = function (_Node) {
|
||||
_inherits(Declaration, _Node);
|
||||
|
||||
function Declaration(defaults) {
|
||||
_classCallCheck(this, Declaration);
|
||||
|
||||
var _this = _possibleConstructorReturn(this, _Node.call(this, defaults));
|
||||
|
||||
_this.type = 'decl';
|
||||
return _this;
|
||||
}
|
||||
|
||||
/**
|
||||
* @memberof Declaration#
|
||||
* @member {string} prop - the declaration’s property name
|
||||
*
|
||||
* @example
|
||||
* const root = postcss.parse('a { color: black }');
|
||||
* const decl = root.first.first;
|
||||
* decl.prop //=> 'color'
|
||||
*/
|
||||
|
||||
/**
|
||||
* @memberof Declaration#
|
||||
* @member {string} value - the declaration’s value
|
||||
*
|
||||
* @example
|
||||
* const root = postcss.parse('a { color: black }');
|
||||
* const decl = root.first.first;
|
||||
* decl.value //=> 'black'
|
||||
*/
|
||||
|
||||
/**
|
||||
* @memberof Declaration#
|
||||
* @member {boolean} important - `true` if the declaration
|
||||
* has an !important annotation.
|
||||
*
|
||||
* @example
|
||||
* const root = postcss.parse('a { color: black !important; color: red }');
|
||||
* root.first.first.important //=> true
|
||||
* root.first.last.important //=> undefined
|
||||
*/
|
||||
|
||||
/**
|
||||
* @memberof Declaration#
|
||||
* @member {object} raws - Information to generate byte-to-byte equal
|
||||
* node string as it was in the origin input.
|
||||
*
|
||||
* Every parser saves its own properties,
|
||||
* but the default CSS parser uses:
|
||||
*
|
||||
* * `before`: the space symbols before the node. It also stores `*`
|
||||
* and `_` symbols before the declaration (IE hack).
|
||||
* * `between`: the symbols between the property and value
|
||||
* for declarations.
|
||||
* * `important`: the content of the important statement,
|
||||
* if it is not just `!important`.
|
||||
*
|
||||
* PostCSS cleans declaration from comments and extra spaces,
|
||||
* but it stores origin content in raws properties.
|
||||
* As such, if you don’t change a declaration’s value,
|
||||
* PostCSS will use the raw value with comments.
|
||||
*
|
||||
* @example
|
||||
* const root = postcss.parse('a {\n color:black\n}')
|
||||
* root.first.first.raws //=> { before: '\n ', between: ':' }
|
||||
*/
|
||||
|
||||
return Declaration;
|
||||
}(_node2.default);
|
||||
|
||||
exports.default = Declaration;
|
||||
module.exports = exports['default'];
|
||||
//# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImRlY2xhcmF0aW9uLmVzNiJdLCJuYW1lcyI6WyJEZWNsYXJhdGlvbiIsImRlZmF1bHRzIiwidHlwZSIsIk5vZGUiXSwibWFwcGluZ3MiOiI7Ozs7QUFBQTs7Ozs7Ozs7Ozs7O0FBRUE7Ozs7Ozs7Ozs7O0lBV01BLFc7OztBQUVGLHVCQUFZQyxRQUFaLEVBQXNCO0FBQUE7O0FBQUEsaURBQ2xCLGlCQUFNQSxRQUFOLENBRGtCOztBQUVsQixVQUFLQyxJQUFMLEdBQVksTUFBWjtBQUZrQjtBQUdyQjs7QUFFRDs7Ozs7Ozs7OztBQVVBOzs7Ozs7Ozs7O0FBVUE7Ozs7Ozs7Ozs7O0FBV0E7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0VBdENzQkMsYzs7a0JBaUVYSCxXIiwiZmlsZSI6ImRlY2xhcmF0aW9uLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IE5vZGUgZnJvbSAnLi9ub2RlJztcblxuLyoqXG4gKiBSZXByZXNlbnRzIGEgQ1NTIGRlY2xhcmF0aW9uLlxuICpcbiAqIEBleHRlbmRzIE5vZGVcbiAqXG4gKiBAZXhhbXBsZVxuICogY29uc3Qgcm9vdCA9IHBvc3Rjc3MucGFyc2UoJ2EgeyBjb2xvcjogYmxhY2sgfScpO1xuICogY29uc3QgZGVjbCA9IHJvb3QuZmlyc3QuZmlyc3Q7XG4gKiBkZWNsLnR5cGUgICAgICAgLy89PiAnZGVjbCdcbiAqIGRlY2wudG9TdHJpbmcoKSAvLz0+ICcgY29sb3I6IGJsYWNrJ1xuICovXG5jbGFzcyBEZWNsYXJhdGlvbiBleHRlbmRzIE5vZGUge1xuXG4gICAgY29uc3RydWN0b3IoZGVmYXVsdHMpIHtcbiAgICAgICAgc3VwZXIoZGVmYXVsdHMpO1xuICAgICAgICB0aGlzLnR5cGUgPSAnZGVjbCc7XG4gICAgfVxuXG4gICAgLyoqXG4gICAgICogQG1lbWJlcm9mIERlY2xhcmF0aW9uI1xuICAgICAqIEBtZW1iZXIge3N0cmluZ30gcHJvcCAtIHRoZSBkZWNsYXJhdGlvbuKAmXMgcHJvcGVydHkgbmFtZVxuICAgICAqXG4gICAgICogQGV4YW1wbGVcbiAgICAgKiBjb25zdCByb290ID0gcG9zdGNzcy5wYXJzZSgnYSB7IGNvbG9yOiBibGFjayB9Jyk7XG4gICAgICogY29uc3QgZGVjbCA9IHJvb3QuZmlyc3QuZmlyc3Q7XG4gICAgICogZGVjbC5wcm9wIC8vPT4gJ2NvbG9yJ1xuICAgICAqL1xuXG4gICAgLyoqXG4gICAgICogQG1lbWJlcm9mIERlY2xhcmF0aW9uI1xuICAgICAqIEBtZW1iZXIge3N0cmluZ30gdmFsdWUgLSB0aGUgZGVjbGFyYXRpb27igJlzIHZhbHVlXG4gICAgICpcbiAgICAgKiBAZXhhbXBsZVxuICAgICAqIGNvbnN0IHJvb3QgPSBwb3N0Y3NzLnBhcnNlKCdhIHsgY29sb3I6IGJsYWNrIH0nKTtcbiAgICAgKiBjb25zdCBkZWNsID0gcm9vdC5maXJzdC5maXJzdDtcbiAgICAgKiBkZWNsLnZhbHVlIC8vPT4gJ2JsYWNrJ1xuICAgICAqL1xuXG4gICAgLyoqXG4gICAgICogQG1lbWJlcm9mIERlY2xhcmF0aW9uI1xuICAgICAqIEBtZW1iZXIge2Jvb2xlYW59IGltcG9ydGFudCAtIGB0cnVlYCBpZiB0aGUgZGVjbGFyYXRpb25cbiAgICAgKiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBoYXMgYW4gIWltcG9ydGFudCBhbm5vdGF0aW9uLlxuICAgICAqXG4gICAgICogQGV4YW1wbGVcbiAgICAgKiBjb25zdCByb290ID0gcG9zdGNzcy5wYXJzZSgnYSB7IGNvbG9yOiBibGFjayAhaW1wb3J0YW50OyBjb2xvcjogcmVkIH0nKTtcbiAgICAgKiByb290LmZpcnN0LmZpcnN0LmltcG9ydGFudCAvLz0+IHRydWVcbiAgICAgKiByb290LmZpcnN0Lmxhc3QuaW1wb3J0YW50ICAvLz0+IHVuZGVmaW5lZFxuICAgICAqL1xuXG4gICAgLyoqXG4gICAgICogQG1lbWJlcm9mIERlY2xhcmF0aW9uI1xuICAgICAqIEBtZW1iZXIge29iamVjdH0gcmF3cyAtIEluZm9ybWF0aW9uIHRvIGdlbmVyYXRlIGJ5dGUtdG8tYnl0ZSBlcXVhbFxuICAgICAqICAgICAgICAgICAgICAgICAgICAgICAgIG5vZGUgc3RyaW5nIGFzIGl0IHdhcyBpbiB0aGUgb3JpZ2luIGlucHV0LlxuICAgICAqXG4gICAgICogRXZlcnkgcGFyc2VyIHNhdmVzIGl0cyBvd24gcHJvcGVydGllcyxcbiAgICAgKiBidXQgdGhlIGRlZmF1bHQgQ1NTIHBhcnNlciB1c2VzOlxuICAgICAqXG4gICAgICogKiBgYmVmb3JlYDogdGhlIHNwYWNlIHN5bWJvbHMgYmVmb3JlIHRoZSBub2RlLiBJdCBhbHNvIHN0b3JlcyBgKmBcbiAgICAgKiAgIGFuZCBgX2Agc3ltYm9scyBiZWZvcmUgdGhlIGRlY2xhcmF0aW9uIChJRSBoYWNrKS5cbiAgICAgKiAqIGBiZXR3ZWVuYDogdGhlIHN5bWJvbHMgYmV0d2VlbiB0aGUgcHJvcGVydHkgYW5kIHZhbHVlXG4gICAgICogICBmb3IgZGVjbGFyYXRpb25zLlxuICAgICAqICogYGltcG9ydGFudGA6IHRoZSBjb250ZW50IG9mIHRoZSBpbXBvcnRhbnQgc3RhdGVtZW50LFxuICAgICAqICAgaWYgaXQgaXMgbm90IGp1c3QgYCFpbXBvcnRhbnRgLlxuICAgICAqXG4gICAgICogUG9zdENTUyBjbGVhbnMgZGVjbGFyYXRpb24gZnJvbSBjb21tZW50cyBhbmQgZXh0cmEgc3BhY2VzLFxuICAgICAqIGJ1dCBpdCBzdG9yZXMgb3JpZ2luIGNvbnRlbnQgaW4gcmF3cyBwcm9wZXJ0aWVzLlxuICAgICAqIEFzIHN1Y2gsIGlmIHlvdSBkb27igJl0IGNoYW5nZSBhIGRlY2xhcmF0aW9u4oCZcyB2YWx1ZSxcbiAgICAgKiBQb3N0Q1NTIHdpbGwgdXNlIHRoZSByYXcgdmFsdWUgd2l0aCBjb21tZW50cy5cbiAgICAgKlxuICAgICAqIEBleGFtcGxlXG4gICAgICogY29uc3Qgcm9vdCA9IHBvc3Rjc3MucGFyc2UoJ2Ege1xcbiAgY29sb3I6YmxhY2tcXG59JylcbiAgICAgKiByb290LmZpcnN0LmZpcnN0LnJhd3MgLy89PiB7IGJlZm9yZTogJ1xcbiAgJywgYmV0d2VlbjogJzonIH1cbiAgICAgKi9cblxufVxuXG5leHBvcnQgZGVmYXVsdCBEZWNsYXJhdGlvbjtcbiJdfQ==
|
||||
+204
File diff suppressed because one or more lines are too long
+435
File diff suppressed because one or more lines are too long
+95
File diff suppressed because one or more lines are too long
+323
File diff suppressed because one or more lines are too long
+625
File diff suppressed because one or more lines are too long
+41
@@ -0,0 +1,41 @@
|
||||
'use strict';
|
||||
|
||||
exports.__esModule = true;
|
||||
exports.default = parse;
|
||||
|
||||
var _parser = require('./parser');
|
||||
|
||||
var _parser2 = _interopRequireDefault(_parser);
|
||||
|
||||
var _input = require('./input');
|
||||
|
||||
var _input2 = _interopRequireDefault(_input);
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
|
||||
function parse(css, opts) {
|
||||
if (opts && opts.safe) {
|
||||
throw new Error('Option safe was removed. ' + 'Use parser: require("postcss-safe-parser")');
|
||||
}
|
||||
|
||||
var input = new _input2.default(css, opts);
|
||||
var parser = new _parser2.default(input);
|
||||
try {
|
||||
parser.parse();
|
||||
} catch (e) {
|
||||
if (e.name === 'CssSyntaxError' && opts && opts.from) {
|
||||
if (/\.scss$/i.test(opts.from)) {
|
||||
e.message += '\nYou tried to parse SCSS with ' + 'the standard CSS parser; ' + 'try again with the postcss-scss parser';
|
||||
} else if (/\.sass/i.test(opts.from)) {
|
||||
e.message += '\nYou tried to parse Sass with ' + 'the standard CSS parser; ' + 'try again with the postcss-sass parser';
|
||||
} else if (/\.less$/i.test(opts.from)) {
|
||||
e.message += '\nYou tried to parse Less with ' + 'the standard CSS parser; ' + 'try again with the postcss-less parser';
|
||||
}
|
||||
}
|
||||
throw e;
|
||||
}
|
||||
|
||||
return parser.root;
|
||||
}
|
||||
module.exports = exports['default'];
|
||||
//# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInBhcnNlLmVzNiJdLCJuYW1lcyI6WyJwYXJzZSIsImNzcyIsIm9wdHMiLCJzYWZlIiwiRXJyb3IiLCJpbnB1dCIsIklucHV0IiwicGFyc2VyIiwiUGFyc2VyIiwiZSIsIm5hbWUiLCJmcm9tIiwidGVzdCIsIm1lc3NhZ2UiLCJyb290Il0sIm1hcHBpbmdzIjoiOzs7a0JBR3dCQSxLOztBQUh4Qjs7OztBQUNBOzs7Ozs7QUFFZSxTQUFTQSxLQUFULENBQWVDLEdBQWYsRUFBb0JDLElBQXBCLEVBQTBCO0FBQ3JDLFFBQUtBLFFBQVFBLEtBQUtDLElBQWxCLEVBQXlCO0FBQ3JCLGNBQU0sSUFBSUMsS0FBSixDQUFVLDhCQUNBLDRDQURWLENBQU47QUFFSDs7QUFFRCxRQUFJQyxRQUFRLElBQUlDLGVBQUosQ0FBVUwsR0FBVixFQUFlQyxJQUFmLENBQVo7QUFDQSxRQUFJSyxTQUFTLElBQUlDLGdCQUFKLENBQVdILEtBQVgsQ0FBYjtBQUNBLFFBQUk7QUFDQUUsZUFBT1AsS0FBUDtBQUNILEtBRkQsQ0FFRSxPQUFPUyxDQUFQLEVBQVU7QUFDUixZQUFLQSxFQUFFQyxJQUFGLEtBQVcsZ0JBQVgsSUFBK0JSLElBQS9CLElBQXVDQSxLQUFLUyxJQUFqRCxFQUF3RDtBQUNwRCxnQkFBSyxXQUFXQyxJQUFYLENBQWdCVixLQUFLUyxJQUFyQixDQUFMLEVBQWtDO0FBQzlCRixrQkFBRUksT0FBRixJQUFhLG9DQUNBLDJCQURBLEdBRUEsd0NBRmI7QUFHSCxhQUpELE1BSU8sSUFBSyxVQUFVRCxJQUFWLENBQWVWLEtBQUtTLElBQXBCLENBQUwsRUFBaUM7QUFDcENGLGtCQUFFSSxPQUFGLElBQWEsb0NBQ0EsMkJBREEsR0FFQSx3Q0FGYjtBQUdILGFBSk0sTUFJQSxJQUFLLFdBQVdELElBQVgsQ0FBZ0JWLEtBQUtTLElBQXJCLENBQUwsRUFBa0M7QUFDckNGLGtCQUFFSSxPQUFGLElBQWEsb0NBQ0EsMkJBREEsR0FFQSx3Q0FGYjtBQUdIO0FBQ0o7QUFDRCxjQUFNSixDQUFOO0FBQ0g7O0FBRUQsV0FBT0YsT0FBT08sSUFBZDtBQUNIIiwiZmlsZSI6InBhcnNlLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFBhcnNlciBmcm9tICcuL3BhcnNlcic7XG5pbXBvcnQgSW5wdXQgIGZyb20gJy4vaW5wdXQnO1xuXG5leHBvcnQgZGVmYXVsdCBmdW5jdGlvbiBwYXJzZShjc3MsIG9wdHMpIHtcbiAgICBpZiAoIG9wdHMgJiYgb3B0cy5zYWZlICkge1xuICAgICAgICB0aHJvdyBuZXcgRXJyb3IoJ09wdGlvbiBzYWZlIHdhcyByZW1vdmVkLiAnICtcbiAgICAgICAgICAgICAgICAgICAgICAgICdVc2UgcGFyc2VyOiByZXF1aXJlKFwicG9zdGNzcy1zYWZlLXBhcnNlclwiKScpO1xuICAgIH1cblxuICAgIGxldCBpbnB1dCA9IG5ldyBJbnB1dChjc3MsIG9wdHMpO1xuICAgIGxldCBwYXJzZXIgPSBuZXcgUGFyc2VyKGlucHV0KTtcbiAgICB0cnkge1xuICAgICAgICBwYXJzZXIucGFyc2UoKTtcbiAgICB9IGNhdGNoIChlKSB7XG4gICAgICAgIGlmICggZS5uYW1lID09PSAnQ3NzU3ludGF4RXJyb3InICYmIG9wdHMgJiYgb3B0cy5mcm9tICkge1xuICAgICAgICAgICAgaWYgKCAvXFwuc2NzcyQvaS50ZXN0KG9wdHMuZnJvbSkgKSB7XG4gICAgICAgICAgICAgICAgZS5tZXNzYWdlICs9ICdcXG5Zb3UgdHJpZWQgdG8gcGFyc2UgU0NTUyB3aXRoICcgK1xuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAndGhlIHN0YW5kYXJkIENTUyBwYXJzZXI7ICcgK1xuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAndHJ5IGFnYWluIHdpdGggdGhlIHBvc3Rjc3Mtc2NzcyBwYXJzZXInO1xuICAgICAgICAgICAgfSBlbHNlIGlmICggL1xcLnNhc3MvaS50ZXN0KG9wdHMuZnJvbSkgKSB7XG4gICAgICAgICAgICAgICAgZS5tZXNzYWdlICs9ICdcXG5Zb3UgdHJpZWQgdG8gcGFyc2UgU2FzcyB3aXRoICcgK1xuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAndGhlIHN0YW5kYXJkIENTUyBwYXJzZXI7ICcgK1xuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAndHJ5IGFnYWluIHdpdGggdGhlIHBvc3Rjc3Mtc2FzcyBwYXJzZXInO1xuICAgICAgICAgICAgfSBlbHNlIGlmICggL1xcLmxlc3MkL2kudGVzdChvcHRzLmZyb20pICkge1xuICAgICAgICAgICAgICAgIGUubWVzc2FnZSArPSAnXFxuWW91IHRyaWVkIHRvIHBhcnNlIExlc3Mgd2l0aCAnICtcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgJ3RoZSBzdGFuZGFyZCBDU1MgcGFyc2VyOyAnICtcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgJ3RyeSBhZ2FpbiB3aXRoIHRoZSBwb3N0Y3NzLWxlc3MgcGFyc2VyJztcbiAgICAgICAgICAgIH1cbiAgICAgICAgfVxuICAgICAgICB0aHJvdyBlO1xuICAgIH1cblxuICAgIHJldHVybiBwYXJzZXIucm9vdDtcbn1cbiJdfQ==
|
||||
+552
File diff suppressed because one or more lines are too long
+1301
File diff suppressed because it is too large
Load Diff
+292
File diff suppressed because one or more lines are too long
+170
File diff suppressed because one or more lines are too long
+240
File diff suppressed because one or more lines are too long
+206
File diff suppressed because one or more lines are too long
+129
File diff suppressed because one or more lines are too long
+123
@@ -0,0 +1,123 @@
|
||||
'use strict';
|
||||
|
||||
exports.__esModule = true;
|
||||
|
||||
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
|
||||
|
||||
var _container = require('./container');
|
||||
|
||||
var _container2 = _interopRequireDefault(_container);
|
||||
|
||||
var _list = require('./list');
|
||||
|
||||
var _list2 = _interopRequireDefault(_list);
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
|
||||
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
||||
|
||||
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
|
||||
|
||||
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
|
||||
|
||||
/**
|
||||
* Represents a CSS rule: a selector followed by a declaration block.
|
||||
*
|
||||
* @extends Container
|
||||
*
|
||||
* @example
|
||||
* const root = postcss.parse('a{}');
|
||||
* const rule = root.first;
|
||||
* rule.type //=> 'rule'
|
||||
* rule.toString() //=> 'a{}'
|
||||
*/
|
||||
var Rule = function (_Container) {
|
||||
_inherits(Rule, _Container);
|
||||
|
||||
function Rule(defaults) {
|
||||
_classCallCheck(this, Rule);
|
||||
|
||||
var _this = _possibleConstructorReturn(this, _Container.call(this, defaults));
|
||||
|
||||
_this.type = 'rule';
|
||||
if (!_this.nodes) _this.nodes = [];
|
||||
return _this;
|
||||
}
|
||||
|
||||
/**
|
||||
* An array containing the rule’s individual selectors.
|
||||
* Groups of selectors are split at commas.
|
||||
*
|
||||
* @type {string[]}
|
||||
*
|
||||
* @example
|
||||
* const root = postcss.parse('a, b { }');
|
||||
* const rule = root.first;
|
||||
*
|
||||
* rule.selector //=> 'a, b'
|
||||
* rule.selectors //=> ['a', 'b']
|
||||
*
|
||||
* rule.selectors = ['a', 'strong'];
|
||||
* rule.selector //=> 'a, strong'
|
||||
*/
|
||||
|
||||
|
||||
_createClass(Rule, [{
|
||||
key: 'selectors',
|
||||
get: function get() {
|
||||
return _list2.default.comma(this.selector);
|
||||
},
|
||||
set: function set(values) {
|
||||
var match = this.selector ? this.selector.match(/,\s*/) : null;
|
||||
var sep = match ? match[0] : ',' + this.raw('between', 'beforeOpen');
|
||||
this.selector = values.join(sep);
|
||||
}
|
||||
|
||||
/**
|
||||
* @memberof Rule#
|
||||
* @member {string} selector - the rule’s full selector represented
|
||||
* as a string
|
||||
*
|
||||
* @example
|
||||
* const root = postcss.parse('a, b { }');
|
||||
* const rule = root.first;
|
||||
* rule.selector //=> 'a, b'
|
||||
*/
|
||||
|
||||
/**
|
||||
* @memberof Rule#
|
||||
* @member {object} raws - Information to generate byte-to-byte equal
|
||||
* node string as it was in the origin input.
|
||||
*
|
||||
* Every parser saves its own properties,
|
||||
* but the default CSS parser uses:
|
||||
*
|
||||
* * `before`: the space symbols before the node. It also stores `*`
|
||||
* and `_` symbols before the declaration (IE hack).
|
||||
* * `after`: the space symbols after the last child of the node
|
||||
* to the end of the node.
|
||||
* * `between`: the symbols between the property and value
|
||||
* for declarations, selector and `{` for rules, or last parameter
|
||||
* and `{` for at-rules.
|
||||
* * `semicolon`: contains `true` if the last child has
|
||||
* an (optional) semicolon.
|
||||
* * `ownSemicolon`: contains `true` if there is semicolon after rule.
|
||||
*
|
||||
* PostCSS cleans selectors from comments and extra spaces,
|
||||
* but it stores origin content in raws properties.
|
||||
* As such, if you don’t change a declaration’s value,
|
||||
* PostCSS will use the raw value with comments.
|
||||
*
|
||||
* @example
|
||||
* const root = postcss.parse('a {\n color:black\n}')
|
||||
* root.first.first.raws //=> { before: '', between: ' ', after: '\n' }
|
||||
*/
|
||||
|
||||
}]);
|
||||
|
||||
return Rule;
|
||||
}(_container2.default);
|
||||
|
||||
exports.default = Rule;
|
||||
module.exports = exports['default'];
|
||||
//# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInJ1bGUuZXM2Il0sIm5hbWVzIjpbIlJ1bGUiLCJkZWZhdWx0cyIsInR5cGUiLCJub2RlcyIsImxpc3QiLCJjb21tYSIsInNlbGVjdG9yIiwidmFsdWVzIiwibWF0Y2giLCJzZXAiLCJyYXciLCJqb2luIiwiQ29udGFpbmVyIl0sIm1hcHBpbmdzIjoiOzs7Ozs7QUFBQTs7OztBQUNBOzs7Ozs7Ozs7Ozs7QUFFQTs7Ozs7Ozs7Ozs7SUFXTUEsSTs7O0FBRUYsZ0JBQVlDLFFBQVosRUFBc0I7QUFBQTs7QUFBQSxpREFDbEIsc0JBQU1BLFFBQU4sQ0FEa0I7O0FBRWxCLFVBQUtDLElBQUwsR0FBWSxNQUFaO0FBQ0EsUUFBSyxDQUFDLE1BQUtDLEtBQVgsRUFBbUIsTUFBS0EsS0FBTCxHQUFhLEVBQWI7QUFIRDtBQUlyQjs7QUFFRDs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7d0JBZ0JnQjtBQUNaLGFBQU9DLGVBQUtDLEtBQUwsQ0FBVyxLQUFLQyxRQUFoQixDQUFQO0FBQ0gsSztzQkFFYUMsTSxFQUFRO0FBQ2xCLFVBQUlDLFFBQVEsS0FBS0YsUUFBTCxHQUFnQixLQUFLQSxRQUFMLENBQWNFLEtBQWQsQ0FBb0IsTUFBcEIsQ0FBaEIsR0FBOEMsSUFBMUQ7QUFDQSxVQUFJQyxNQUFRRCxRQUFRQSxNQUFNLENBQU4sQ0FBUixHQUFtQixNQUFNLEtBQUtFLEdBQUwsQ0FBUyxTQUFULEVBQW9CLFlBQXBCLENBQXJDO0FBQ0EsV0FBS0osUUFBTCxHQUFnQkMsT0FBT0ksSUFBUCxDQUFZRixHQUFaLENBQWhCO0FBQ0g7O0FBRUQ7Ozs7Ozs7Ozs7O0FBV0E7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0VBN0NlRyxtQjs7a0JBNEVKWixJIiwiZmlsZSI6InJ1bGUuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgQ29udGFpbmVyIGZyb20gJy4vY29udGFpbmVyJztcbmltcG9ydCBsaXN0ICAgICAgZnJvbSAnLi9saXN0JztcblxuLyoqXG4gKiBSZXByZXNlbnRzIGEgQ1NTIHJ1bGU6IGEgc2VsZWN0b3IgZm9sbG93ZWQgYnkgYSBkZWNsYXJhdGlvbiBibG9jay5cbiAqXG4gKiBAZXh0ZW5kcyBDb250YWluZXJcbiAqXG4gKiBAZXhhbXBsZVxuICogY29uc3Qgcm9vdCA9IHBvc3Rjc3MucGFyc2UoJ2F7fScpO1xuICogY29uc3QgcnVsZSA9IHJvb3QuZmlyc3Q7XG4gKiBydWxlLnR5cGUgICAgICAgLy89PiAncnVsZSdcbiAqIHJ1bGUudG9TdHJpbmcoKSAvLz0+ICdhe30nXG4gKi9cbmNsYXNzIFJ1bGUgZXh0ZW5kcyBDb250YWluZXIge1xuXG4gICAgY29uc3RydWN0b3IoZGVmYXVsdHMpIHtcbiAgICAgICAgc3VwZXIoZGVmYXVsdHMpO1xuICAgICAgICB0aGlzLnR5cGUgPSAncnVsZSc7XG4gICAgICAgIGlmICggIXRoaXMubm9kZXMgKSB0aGlzLm5vZGVzID0gW107XG4gICAgfVxuXG4gICAgLyoqXG4gICAgICogQW4gYXJyYXkgY29udGFpbmluZyB0aGUgcnVsZeKAmXMgaW5kaXZpZHVhbCBzZWxlY3RvcnMuXG4gICAgICogR3JvdXBzIG9mIHNlbGVjdG9ycyBhcmUgc3BsaXQgYXQgY29tbWFzLlxuICAgICAqXG4gICAgICogQHR5cGUge3N0cmluZ1tdfVxuICAgICAqXG4gICAgICogQGV4YW1wbGVcbiAgICAgKiBjb25zdCByb290ID0gcG9zdGNzcy5wYXJzZSgnYSwgYiB7IH0nKTtcbiAgICAgKiBjb25zdCBydWxlID0gcm9vdC5maXJzdDtcbiAgICAgKlxuICAgICAqIHJ1bGUuc2VsZWN0b3IgIC8vPT4gJ2EsIGInXG4gICAgICogcnVsZS5zZWxlY3RvcnMgLy89PiBbJ2EnLCAnYiddXG4gICAgICpcbiAgICAgKiBydWxlLnNlbGVjdG9ycyA9IFsnYScsICdzdHJvbmcnXTtcbiAgICAgKiBydWxlLnNlbGVjdG9yIC8vPT4gJ2EsIHN0cm9uZydcbiAgICAgKi9cbiAgICBnZXQgc2VsZWN0b3JzKCkge1xuICAgICAgICByZXR1cm4gbGlzdC5jb21tYSh0aGlzLnNlbGVjdG9yKTtcbiAgICB9XG5cbiAgICBzZXQgc2VsZWN0b3JzKHZhbHVlcykge1xuICAgICAgICBsZXQgbWF0Y2ggPSB0aGlzLnNlbGVjdG9yID8gdGhpcy5zZWxlY3Rvci5tYXRjaCgvLFxccyovKSA6IG51bGw7XG4gICAgICAgIGxldCBzZXAgICA9IG1hdGNoID8gbWF0Y2hbMF0gOiAnLCcgKyB0aGlzLnJhdygnYmV0d2VlbicsICdiZWZvcmVPcGVuJyk7XG4gICAgICAgIHRoaXMuc2VsZWN0b3IgPSB2YWx1ZXMuam9pbihzZXApO1xuICAgIH1cblxuICAgIC8qKlxuICAgICAqIEBtZW1iZXJvZiBSdWxlI1xuICAgICAqIEBtZW1iZXIge3N0cmluZ30gc2VsZWN0b3IgLSB0aGUgcnVsZeKAmXMgZnVsbCBzZWxlY3RvciByZXByZXNlbnRlZFxuICAgICAqICAgICAgICAgICAgICAgICAgICAgICAgICAgICBhcyBhIHN0cmluZ1xuICAgICAqXG4gICAgICogQGV4YW1wbGVcbiAgICAgKiBjb25zdCByb290ID0gcG9zdGNzcy5wYXJzZSgnYSwgYiB7IH0nKTtcbiAgICAgKiBjb25zdCBydWxlID0gcm9vdC5maXJzdDtcbiAgICAgKiBydWxlLnNlbGVjdG9yIC8vPT4gJ2EsIGInXG4gICAgICovXG5cbiAgICAvKipcbiAgICAgKiBAbWVtYmVyb2YgUnVsZSNcbiAgICAgKiBAbWVtYmVyIHtvYmplY3R9IHJhd3MgLSBJbmZvcm1hdGlvbiB0byBnZW5lcmF0ZSBieXRlLXRvLWJ5dGUgZXF1YWxcbiAgICAgKiAgICAgICAgICAgICAgICAgICAgICAgICBub2RlIHN0cmluZyBhcyBpdCB3YXMgaW4gdGhlIG9yaWdpbiBpbnB1dC5cbiAgICAgKlxuICAgICAqIEV2ZXJ5IHBhcnNlciBzYXZlcyBpdHMgb3duIHByb3BlcnRpZXMsXG4gICAgICogYnV0IHRoZSBkZWZhdWx0IENTUyBwYXJzZXIgdXNlczpcbiAgICAgKlxuICAgICAqICogYGJlZm9yZWA6IHRoZSBzcGFjZSBzeW1ib2xzIGJlZm9yZSB0aGUgbm9kZS4gSXQgYWxzbyBzdG9yZXMgYCpgXG4gICAgICogICBhbmQgYF9gIHN5bWJvbHMgYmVmb3JlIHRoZSBkZWNsYXJhdGlvbiAoSUUgaGFjaykuXG4gICAgICogKiBgYWZ0ZXJgOiB0aGUgc3BhY2Ugc3ltYm9scyBhZnRlciB0aGUgbGFzdCBjaGlsZCBvZiB0aGUgbm9kZVxuICAgICAqICAgdG8gdGhlIGVuZCBvZiB0aGUgbm9kZS5cbiAgICAgKiAqIGBiZXR3ZWVuYDogdGhlIHN5bWJvbHMgYmV0d2VlbiB0aGUgcHJvcGVydHkgYW5kIHZhbHVlXG4gICAgICogICBmb3IgZGVjbGFyYXRpb25zLCBzZWxlY3RvciBhbmQgYHtgIGZvciBydWxlcywgb3IgbGFzdCBwYXJhbWV0ZXJcbiAgICAgKiAgIGFuZCBge2AgZm9yIGF0LXJ1bGVzLlxuICAgICAqICogYHNlbWljb2xvbmA6IGNvbnRhaW5zIGB0cnVlYCBpZiB0aGUgbGFzdCBjaGlsZCBoYXNcbiAgICAgKiAgIGFuIChvcHRpb25hbCkgc2VtaWNvbG9uLlxuICAgICAqICogYG93blNlbWljb2xvbmA6IGNvbnRhaW5zIGB0cnVlYCBpZiB0aGVyZSBpcyBzZW1pY29sb24gYWZ0ZXIgcnVsZS5cbiAgICAgKlxuICAgICAqIFBvc3RDU1MgY2xlYW5zIHNlbGVjdG9ycyBmcm9tIGNvbW1lbnRzIGFuZCBleHRyYSBzcGFjZXMsXG4gICAgICogYnV0IGl0IHN0b3JlcyBvcmlnaW4gY29udGVudCBpbiByYXdzIHByb3BlcnRpZXMuXG4gICAgICogQXMgc3VjaCwgaWYgeW91IGRvbuKAmXQgY2hhbmdlIGEgZGVjbGFyYXRpb27igJlzIHZhbHVlLFxuICAgICAqIFBvc3RDU1Mgd2lsbCB1c2UgdGhlIHJhdyB2YWx1ZSB3aXRoIGNvbW1lbnRzLlxuICAgICAqXG4gICAgICogQGV4YW1wbGVcbiAgICAgKiBjb25zdCByb290ID0gcG9zdGNzcy5wYXJzZSgnYSB7XFxuICBjb2xvcjpibGFja1xcbn0nKVxuICAgICAqIHJvb3QuZmlyc3QuZmlyc3QucmF3cyAvLz0+IHsgYmVmb3JlOiAnJywgYmV0d2VlbjogJyAnLCBhZnRlcjogJ1xcbicgfVxuICAgICAqL1xuXG59XG5cbmV4cG9ydCBkZWZhdWx0IFJ1bGU7XG4iXX0=
|
||||
+344
File diff suppressed because one or more lines are too long
+17
@@ -0,0 +1,17 @@
|
||||
'use strict';
|
||||
|
||||
exports.__esModule = true;
|
||||
exports.default = stringify;
|
||||
|
||||
var _stringifier = require('./stringifier');
|
||||
|
||||
var _stringifier2 = _interopRequireDefault(_stringifier);
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
|
||||
function stringify(node, builder) {
|
||||
var str = new _stringifier2.default(builder);
|
||||
str.stringify(node);
|
||||
}
|
||||
module.exports = exports['default'];
|
||||
//# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0cmluZ2lmeS5lczYiXSwibmFtZXMiOlsic3RyaW5naWZ5Iiwibm9kZSIsImJ1aWxkZXIiLCJzdHIiLCJTdHJpbmdpZmllciJdLCJtYXBwaW5ncyI6Ijs7O2tCQUV3QkEsUzs7QUFGeEI7Ozs7OztBQUVlLFNBQVNBLFNBQVQsQ0FBbUJDLElBQW5CLEVBQXlCQyxPQUF6QixFQUFrQztBQUM3QyxRQUFJQyxNQUFNLElBQUlDLHFCQUFKLENBQWdCRixPQUFoQixDQUFWO0FBQ0FDLFFBQUlILFNBQUosQ0FBY0MsSUFBZDtBQUNIIiwiZmlsZSI6InN0cmluZ2lmeS5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBTdHJpbmdpZmllciBmcm9tICcuL3N0cmluZ2lmaWVyJztcblxuZXhwb3J0IGRlZmF1bHQgZnVuY3Rpb24gc3RyaW5naWZ5KG5vZGUsIGJ1aWxkZXIpIHtcbiAgICBsZXQgc3RyID0gbmV3IFN0cmluZ2lmaWVyKGJ1aWxkZXIpO1xuICAgIHN0ci5zdHJpbmdpZnkobm9kZSk7XG59XG4iXX0=
|
||||
+83
@@ -0,0 +1,83 @@
|
||||
'use strict';
|
||||
|
||||
exports.__esModule = true;
|
||||
|
||||
var _chalk = require('chalk');
|
||||
|
||||
var _chalk2 = _interopRequireDefault(_chalk);
|
||||
|
||||
var _tokenize = require('./tokenize');
|
||||
|
||||
var _tokenize2 = _interopRequireDefault(_tokenize);
|
||||
|
||||
var _input = require('./input');
|
||||
|
||||
var _input2 = _interopRequireDefault(_input);
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
|
||||
var HIGHLIGHT_THEME = {
|
||||
'brackets': _chalk2.default.cyan,
|
||||
'at-word': _chalk2.default.cyan,
|
||||
'call': _chalk2.default.cyan,
|
||||
'comment': _chalk2.default.gray,
|
||||
'string': _chalk2.default.green,
|
||||
'class': _chalk2.default.yellow,
|
||||
'hash': _chalk2.default.magenta,
|
||||
'(': _chalk2.default.cyan,
|
||||
')': _chalk2.default.cyan,
|
||||
'{': _chalk2.default.yellow,
|
||||
'}': _chalk2.default.yellow,
|
||||
'[': _chalk2.default.yellow,
|
||||
']': _chalk2.default.yellow,
|
||||
':': _chalk2.default.yellow,
|
||||
';': _chalk2.default.yellow
|
||||
};
|
||||
|
||||
function getTokenType(_ref, processor) {
|
||||
var type = _ref[0],
|
||||
value = _ref[1];
|
||||
|
||||
if (type === 'word') {
|
||||
if (value[0] === '.') {
|
||||
return 'class';
|
||||
}
|
||||
if (value[0] === '#') {
|
||||
return 'hash';
|
||||
}
|
||||
}
|
||||
|
||||
if (!processor.endOfFile()) {
|
||||
var next = processor.nextToken();
|
||||
processor.back(next);
|
||||
if (next[0] === 'brackets' || next[0] === '(') return 'call';
|
||||
}
|
||||
|
||||
return type;
|
||||
}
|
||||
|
||||
function terminalHighlight(css) {
|
||||
var processor = (0, _tokenize2.default)(new _input2.default(css), { ignoreErrors: true });
|
||||
var result = '';
|
||||
|
||||
var _loop = function _loop() {
|
||||
var token = processor.nextToken();
|
||||
var color = HIGHLIGHT_THEME[getTokenType(token, processor)];
|
||||
if (color) {
|
||||
result += token[1].split(/\r?\n/).map(function (i) {
|
||||
return color(i);
|
||||
}).join('\n');
|
||||
} else {
|
||||
result += token[1];
|
||||
}
|
||||
};
|
||||
|
||||
while (!processor.endOfFile()) {
|
||||
_loop();
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
exports.default = terminalHighlight;
|
||||
module.exports = exports['default'];
|
||||
//# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInRlcm1pbmFsLWhpZ2hsaWdodC5lczYiXSwibmFtZXMiOlsiSElHSExJR0hUX1RIRU1FIiwiY2hhbGsiLCJjeWFuIiwiZ3JheSIsImdyZWVuIiwieWVsbG93IiwibWFnZW50YSIsImdldFRva2VuVHlwZSIsInByb2Nlc3NvciIsInR5cGUiLCJ2YWx1ZSIsImVuZE9mRmlsZSIsIm5leHQiLCJuZXh0VG9rZW4iLCJiYWNrIiwidGVybWluYWxIaWdobGlnaHQiLCJjc3MiLCJJbnB1dCIsImlnbm9yZUVycm9ycyIsInJlc3VsdCIsInRva2VuIiwiY29sb3IiLCJzcGxpdCIsIm1hcCIsImkiLCJqb2luIl0sIm1hcHBpbmdzIjoiOzs7O0FBQUE7Ozs7QUFFQTs7OztBQUNBOzs7Ozs7QUFFQSxJQUFNQSxrQkFBa0I7QUFDcEIsZ0JBQVlDLGdCQUFNQyxJQURFO0FBRXBCLGVBQVlELGdCQUFNQyxJQUZFO0FBR3BCLFlBQVlELGdCQUFNQyxJQUhFO0FBSXBCLGVBQVlELGdCQUFNRSxJQUpFO0FBS3BCLGNBQVlGLGdCQUFNRyxLQUxFO0FBTXBCLGFBQVlILGdCQUFNSSxNQU5FO0FBT3BCLFlBQVlKLGdCQUFNSyxPQVBFO0FBUXBCLFNBQVlMLGdCQUFNQyxJQVJFO0FBU3BCLFNBQVlELGdCQUFNQyxJQVRFO0FBVXBCLFNBQVlELGdCQUFNSSxNQVZFO0FBV3BCLFNBQVlKLGdCQUFNSSxNQVhFO0FBWXBCLFNBQVlKLGdCQUFNSSxNQVpFO0FBYXBCLFNBQVlKLGdCQUFNSSxNQWJFO0FBY3BCLFNBQVlKLGdCQUFNSSxNQWRFO0FBZXBCLFNBQVlKLGdCQUFNSTtBQWZFLENBQXhCOztBQWtCQSxTQUFTRSxZQUFULE9BQXFDQyxTQUFyQyxFQUFnRDtBQUFBLFFBQXpCQyxJQUF5QjtBQUFBLFFBQW5CQyxLQUFtQjs7QUFDNUMsUUFBS0QsU0FBUyxNQUFkLEVBQXVCO0FBQ25CLFlBQUtDLE1BQU0sQ0FBTixNQUFhLEdBQWxCLEVBQXdCO0FBQ3BCLG1CQUFPLE9BQVA7QUFDSDtBQUNELFlBQUtBLE1BQU0sQ0FBTixNQUFhLEdBQWxCLEVBQXdCO0FBQ3BCLG1CQUFPLE1BQVA7QUFDSDtBQUNKOztBQUVELFFBQUssQ0FBQ0YsVUFBVUcsU0FBVixFQUFOLEVBQThCO0FBQzFCLFlBQUlDLE9BQU9KLFVBQVVLLFNBQVYsRUFBWDtBQUNBTCxrQkFBVU0sSUFBVixDQUFlRixJQUFmO0FBQ0EsWUFBS0EsS0FBSyxDQUFMLE1BQVksVUFBWixJQUEwQkEsS0FBSyxDQUFMLE1BQVksR0FBM0MsRUFBaUQsT0FBTyxNQUFQO0FBQ3BEOztBQUVELFdBQU9ILElBQVA7QUFDSDs7QUFFRCxTQUFTTSxpQkFBVCxDQUEyQkMsR0FBM0IsRUFBZ0M7QUFDNUIsUUFBSVIsWUFBWSx3QkFBVSxJQUFJUyxlQUFKLENBQVVELEdBQVYsQ0FBVixFQUEwQixFQUFFRSxjQUFjLElBQWhCLEVBQTFCLENBQWhCO0FBQ0EsUUFBSUMsU0FBUyxFQUFiOztBQUY0QjtBQUl4QixZQUFJQyxRQUFRWixVQUFVSyxTQUFWLEVBQVo7QUFDQSxZQUFJUSxRQUFRckIsZ0JBQWdCTyxhQUFhYSxLQUFiLEVBQW9CWixTQUFwQixDQUFoQixDQUFaO0FBQ0EsWUFBS2EsS0FBTCxFQUFhO0FBQ1RGLHNCQUFVQyxNQUFNLENBQU4sRUFBU0UsS0FBVCxDQUFlLE9BQWYsRUFDTEMsR0FESyxDQUNBO0FBQUEsdUJBQUtGLE1BQU1HLENBQU4sQ0FBTDtBQUFBLGFBREEsRUFFTEMsSUFGSyxDQUVBLElBRkEsQ0FBVjtBQUdILFNBSkQsTUFJTztBQUNITixzQkFBVUMsTUFBTSxDQUFOLENBQVY7QUFDSDtBQVp1Qjs7QUFHNUIsV0FBUSxDQUFDWixVQUFVRyxTQUFWLEVBQVQsRUFBaUM7QUFBQTtBQVVoQztBQUNELFdBQU9RLE1BQVA7QUFDSDs7a0JBRWNKLGlCIiwiZmlsZSI6InRlcm1pbmFsLWhpZ2hsaWdodC5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBjaGFsayBmcm9tICdjaGFsayc7XG5cbmltcG9ydCB0b2tlbml6ZXIgZnJvbSAnLi90b2tlbml6ZSc7XG5pbXBvcnQgSW5wdXQgICAgZnJvbSAnLi9pbnB1dCc7XG5cbmNvbnN0IEhJR0hMSUdIVF9USEVNRSA9IHtcbiAgICAnYnJhY2tldHMnOiBjaGFsay5jeWFuLFxuICAgICdhdC13b3JkJzogIGNoYWxrLmN5YW4sXG4gICAgJ2NhbGwnOiAgICAgY2hhbGsuY3lhbixcbiAgICAnY29tbWVudCc6ICBjaGFsay5ncmF5LFxuICAgICdzdHJpbmcnOiAgIGNoYWxrLmdyZWVuLFxuICAgICdjbGFzcyc6ICAgIGNoYWxrLnllbGxvdyxcbiAgICAnaGFzaCc6ICAgICBjaGFsay5tYWdlbnRhLFxuICAgICcoJzogICAgICAgIGNoYWxrLmN5YW4sXG4gICAgJyknOiAgICAgICAgY2hhbGsuY3lhbixcbiAgICAneyc6ICAgICAgICBjaGFsay55ZWxsb3csXG4gICAgJ30nOiAgICAgICAgY2hhbGsueWVsbG93LFxuICAgICdbJzogICAgICAgIGNoYWxrLnllbGxvdyxcbiAgICAnXSc6ICAgICAgICBjaGFsay55ZWxsb3csXG4gICAgJzonOiAgICAgICAgY2hhbGsueWVsbG93LFxuICAgICc7JzogICAgICAgIGNoYWxrLnllbGxvd1xufTtcblxuZnVuY3Rpb24gZ2V0VG9rZW5UeXBlKFt0eXBlLCB2YWx1ZV0sIHByb2Nlc3Nvcikge1xuICAgIGlmICggdHlwZSA9PT0gJ3dvcmQnICkge1xuICAgICAgICBpZiAoIHZhbHVlWzBdID09PSAnLicgKSB7XG4gICAgICAgICAgICByZXR1cm4gJ2NsYXNzJztcbiAgICAgICAgfVxuICAgICAgICBpZiAoIHZhbHVlWzBdID09PSAnIycgKSB7XG4gICAgICAgICAgICByZXR1cm4gJ2hhc2gnO1xuICAgICAgICB9XG4gICAgfVxuXG4gICAgaWYgKCAhcHJvY2Vzc29yLmVuZE9mRmlsZSgpICkge1xuICAgICAgICBsZXQgbmV4dCA9IHByb2Nlc3Nvci5uZXh0VG9rZW4oKTtcbiAgICAgICAgcHJvY2Vzc29yLmJhY2sobmV4dCk7XG4gICAgICAgIGlmICggbmV4dFswXSA9PT0gJ2JyYWNrZXRzJyB8fCBuZXh0WzBdID09PSAnKCcgKSByZXR1cm4gJ2NhbGwnO1xuICAgIH1cblxuICAgIHJldHVybiB0eXBlO1xufVxuXG5mdW5jdGlvbiB0ZXJtaW5hbEhpZ2hsaWdodChjc3MpIHtcbiAgICBsZXQgcHJvY2Vzc29yID0gdG9rZW5pemVyKG5ldyBJbnB1dChjc3MpLCB7IGlnbm9yZUVycm9yczogdHJ1ZSB9KTtcbiAgICBsZXQgcmVzdWx0ID0gJyc7XG4gICAgd2hpbGUgKCAhcHJvY2Vzc29yLmVuZE9mRmlsZSgpICkge1xuICAgICAgICBsZXQgdG9rZW4gPSBwcm9jZXNzb3IubmV4dFRva2VuKCk7XG4gICAgICAgIGxldCBjb2xvciA9IEhJR0hMSUdIVF9USEVNRVtnZXRUb2tlblR5cGUodG9rZW4sIHByb2Nlc3NvcildO1xuICAgICAgICBpZiAoIGNvbG9yICkge1xuICAgICAgICAgICAgcmVzdWx0ICs9IHRva2VuWzFdLnNwbGl0KC9cXHI/XFxuLylcbiAgICAgICAgICAgICAgICAubWFwKCBpID0+IGNvbG9yKGkpIClcbiAgICAgICAgICAgICAgICAuam9pbignXFxuJyk7XG4gICAgICAgIH0gZWxzZSB7XG4gICAgICAgICAgICByZXN1bHQgKz0gdG9rZW5bMV07XG4gICAgICAgIH1cbiAgICB9XG4gICAgcmV0dXJuIHJlc3VsdDtcbn1cblxuZXhwb3J0IGRlZmF1bHQgdGVybWluYWxIaWdobGlnaHQ7XG4iXX0=
|
||||
+306
File diff suppressed because one or more lines are too long
+52
@@ -0,0 +1,52 @@
|
||||
'use strict';
|
||||
|
||||
exports.__esModule = true;
|
||||
/**
|
||||
* Contains helpers for working with vendor prefixes.
|
||||
*
|
||||
* @example
|
||||
* const vendor = postcss.vendor;
|
||||
*
|
||||
* @namespace vendor
|
||||
*/
|
||||
var vendor = {
|
||||
|
||||
/**
|
||||
* Returns the vendor prefix extracted from an input string.
|
||||
*
|
||||
* @param {string} prop - string with or without vendor prefix
|
||||
*
|
||||
* @return {string} vendor prefix or empty string
|
||||
*
|
||||
* @example
|
||||
* postcss.vendor.prefix('-moz-tab-size') //=> '-moz-'
|
||||
* postcss.vendor.prefix('tab-size') //=> ''
|
||||
*/
|
||||
prefix: function prefix(prop) {
|
||||
var match = prop.match(/^(-\w+-)/);
|
||||
if (match) {
|
||||
return match[0];
|
||||
} else {
|
||||
return '';
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* Returns the input string stripped of its vendor prefix.
|
||||
*
|
||||
* @param {string} prop - string with or without vendor prefix
|
||||
*
|
||||
* @return {string} string name without vendor prefixes
|
||||
*
|
||||
* @example
|
||||
* postcss.vendor.unprefixed('-moz-tab-size') //=> 'tab-size'
|
||||
*/
|
||||
unprefixed: function unprefixed(prop) {
|
||||
return prop.replace(/^-\w+-/, '');
|
||||
}
|
||||
};
|
||||
|
||||
exports.default = vendor;
|
||||
module.exports = exports['default'];
|
||||
//# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInZlbmRvci5lczYiXSwibmFtZXMiOlsidmVuZG9yIiwicHJlZml4IiwicHJvcCIsIm1hdGNoIiwidW5wcmVmaXhlZCIsInJlcGxhY2UiXSwibWFwcGluZ3MiOiI7OztBQUFBOzs7Ozs7OztBQVFBLElBQUlBLFNBQVM7O0FBRVQ7Ozs7Ozs7Ozs7O0FBV0FDLFVBYlMsa0JBYUZDLElBYkUsRUFhSTtBQUNULFlBQUlDLFFBQVFELEtBQUtDLEtBQUwsQ0FBVyxVQUFYLENBQVo7QUFDQSxZQUFLQSxLQUFMLEVBQWE7QUFDVCxtQkFBT0EsTUFBTSxDQUFOLENBQVA7QUFDSCxTQUZELE1BRU87QUFDSCxtQkFBTyxFQUFQO0FBQ0g7QUFDSixLQXBCUTs7O0FBc0JUOzs7Ozs7Ozs7O0FBVUFDLGNBaENTLHNCQWdDRUYsSUFoQ0YsRUFnQ1E7QUFDYixlQUFPQSxLQUFLRyxPQUFMLENBQWEsUUFBYixFQUF1QixFQUF2QixDQUFQO0FBQ0g7QUFsQ1EsQ0FBYjs7a0JBc0NlTCxNIiwiZmlsZSI6InZlbmRvci5qcyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQ29udGFpbnMgaGVscGVycyBmb3Igd29ya2luZyB3aXRoIHZlbmRvciBwcmVmaXhlcy5cbiAqXG4gKiBAZXhhbXBsZVxuICogY29uc3QgdmVuZG9yID0gcG9zdGNzcy52ZW5kb3I7XG4gKlxuICogQG5hbWVzcGFjZSB2ZW5kb3JcbiAqL1xubGV0IHZlbmRvciA9IHtcblxuICAgIC8qKlxuICAgICAqIFJldHVybnMgdGhlIHZlbmRvciBwcmVmaXggZXh0cmFjdGVkIGZyb20gYW4gaW5wdXQgc3RyaW5nLlxuICAgICAqXG4gICAgICogQHBhcmFtIHtzdHJpbmd9IHByb3AgLSBzdHJpbmcgd2l0aCBvciB3aXRob3V0IHZlbmRvciBwcmVmaXhcbiAgICAgKlxuICAgICAqIEByZXR1cm4ge3N0cmluZ30gdmVuZG9yIHByZWZpeCBvciBlbXB0eSBzdHJpbmdcbiAgICAgKlxuICAgICAqIEBleGFtcGxlXG4gICAgICogcG9zdGNzcy52ZW5kb3IucHJlZml4KCctbW96LXRhYi1zaXplJykgLy89PiAnLW1vei0nXG4gICAgICogcG9zdGNzcy52ZW5kb3IucHJlZml4KCd0YWItc2l6ZScpICAgICAgLy89PiAnJ1xuICAgICAqL1xuICAgIHByZWZpeChwcm9wKSB7XG4gICAgICAgIGxldCBtYXRjaCA9IHByb3AubWF0Y2goL14oLVxcdystKS8pO1xuICAgICAgICBpZiAoIG1hdGNoICkge1xuICAgICAgICAgICAgcmV0dXJuIG1hdGNoWzBdO1xuICAgICAgICB9IGVsc2Uge1xuICAgICAgICAgICAgcmV0dXJuICcnO1xuICAgICAgICB9XG4gICAgfSxcblxuICAgIC8qKlxuICAgICAqIFJldHVybnMgdGhlIGlucHV0IHN0cmluZyBzdHJpcHBlZCBvZiBpdHMgdmVuZG9yIHByZWZpeC5cbiAgICAgKlxuICAgICAqIEBwYXJhbSB7c3RyaW5nfSBwcm9wIC0gc3RyaW5nIHdpdGggb3Igd2l0aG91dCB2ZW5kb3IgcHJlZml4XG4gICAgICpcbiAgICAgKiBAcmV0dXJuIHtzdHJpbmd9IHN0cmluZyBuYW1lIHdpdGhvdXQgdmVuZG9yIHByZWZpeGVzXG4gICAgICpcbiAgICAgKiBAZXhhbXBsZVxuICAgICAqIHBvc3Rjc3MudmVuZG9yLnVucHJlZml4ZWQoJy1tb3otdGFiLXNpemUnKSAvLz0+ICd0YWItc2l6ZSdcbiAgICAgKi9cbiAgICB1bnByZWZpeGVkKHByb3ApIHtcbiAgICAgICAgcmV0dXJuIHByb3AucmVwbGFjZSgvXi1cXHcrLS8sICcnKTtcbiAgICB9XG5cbn07XG5cbmV4cG9ydCBkZWZhdWx0IHZlbmRvcjtcbiJdfQ==
|
||||
+14
@@ -0,0 +1,14 @@
|
||||
'use strict';
|
||||
|
||||
exports.__esModule = true;
|
||||
exports.default = warnOnce;
|
||||
var printed = {};
|
||||
|
||||
function warnOnce(message) {
|
||||
if (printed[message]) return;
|
||||
printed[message] = true;
|
||||
|
||||
if (typeof console !== 'undefined' && console.warn) console.warn(message);
|
||||
}
|
||||
module.exports = exports['default'];
|
||||
//# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndhcm4tb25jZS5lczYiXSwibmFtZXMiOlsid2Fybk9uY2UiLCJwcmludGVkIiwibWVzc2FnZSIsImNvbnNvbGUiLCJ3YXJuIl0sIm1hcHBpbmdzIjoiOzs7a0JBRXdCQSxRO0FBRnhCLElBQUlDLFVBQVUsRUFBZDs7QUFFZSxTQUFTRCxRQUFULENBQWtCRSxPQUFsQixFQUEyQjtBQUN0QyxRQUFLRCxRQUFRQyxPQUFSLENBQUwsRUFBd0I7QUFDeEJELFlBQVFDLE9BQVIsSUFBbUIsSUFBbkI7O0FBRUEsUUFBSyxPQUFPQyxPQUFQLEtBQW1CLFdBQW5CLElBQWtDQSxRQUFRQyxJQUEvQyxFQUFzREQsUUFBUUMsSUFBUixDQUFhRixPQUFiO0FBQ3pEIiwiZmlsZSI6Indhcm4tb25jZS5qcyIsInNvdXJjZXNDb250ZW50IjpbImxldCBwcmludGVkID0geyB9O1xuXG5leHBvcnQgZGVmYXVsdCBmdW5jdGlvbiB3YXJuT25jZShtZXNzYWdlKSB7XG4gICAgaWYgKCBwcmludGVkW21lc3NhZ2VdICkgcmV0dXJuO1xuICAgIHByaW50ZWRbbWVzc2FnZV0gPSB0cnVlO1xuXG4gICAgaWYgKCB0eXBlb2YgY29uc29sZSAhPT0gJ3VuZGVmaW5lZCcgJiYgY29uc29sZS53YXJuICkgY29uc29sZS53YXJuKG1lc3NhZ2UpO1xufVxuIl19
|
||||
+122
File diff suppressed because one or more lines are too long
+25
@@ -0,0 +1,25 @@
|
||||
{
|
||||
"name": "postcss",
|
||||
"version": "6.0.23",
|
||||
"description": "Tool for transforming styles with JS plugins",
|
||||
"engines": {
|
||||
"node": ">=4.0.0"
|
||||
},
|
||||
"keywords": ["css", "postcss", "rework", "preprocessor", "parser", "source map", "transform", "manipulation", "transpiler"],
|
||||
"author": "Andrey Sitnik <andrey@sitnik.ru>",
|
||||
"license": "MIT",
|
||||
"homepage": "https://postcss.org/",
|
||||
"repository": "postcss/postcss",
|
||||
"dependencies": {
|
||||
"chalk": "^2.4.1",
|
||||
"source-map": "^0.6.1",
|
||||
"supports-color": "^5.4.0"
|
||||
},
|
||||
"main": "lib/postcss",
|
||||
"types": "lib/postcss.d.ts",
|
||||
"browser": {
|
||||
"supports-color": false,
|
||||
"chalk": false,
|
||||
"fs": false
|
||||
}
|
||||
}
|
||||
+5
@@ -0,0 +1,5 @@
|
||||
'use strict';
|
||||
module.exports = {
|
||||
stdout: false,
|
||||
stderr: false
|
||||
};
|
||||
+131
@@ -0,0 +1,131 @@
|
||||
'use strict';
|
||||
const os = require('os');
|
||||
const hasFlag = require('has-flag');
|
||||
|
||||
const env = process.env;
|
||||
|
||||
let forceColor;
|
||||
if (hasFlag('no-color') ||
|
||||
hasFlag('no-colors') ||
|
||||
hasFlag('color=false')) {
|
||||
forceColor = false;
|
||||
} else if (hasFlag('color') ||
|
||||
hasFlag('colors') ||
|
||||
hasFlag('color=true') ||
|
||||
hasFlag('color=always')) {
|
||||
forceColor = true;
|
||||
}
|
||||
if ('FORCE_COLOR' in env) {
|
||||
forceColor = env.FORCE_COLOR.length === 0 || parseInt(env.FORCE_COLOR, 10) !== 0;
|
||||
}
|
||||
|
||||
function translateLevel(level) {
|
||||
if (level === 0) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return {
|
||||
level,
|
||||
hasBasic: true,
|
||||
has256: level >= 2,
|
||||
has16m: level >= 3
|
||||
};
|
||||
}
|
||||
|
||||
function supportsColor(stream) {
|
||||
if (forceColor === false) {
|
||||
return 0;
|
||||
}
|
||||
|
||||
if (hasFlag('color=16m') ||
|
||||
hasFlag('color=full') ||
|
||||
hasFlag('color=truecolor')) {
|
||||
return 3;
|
||||
}
|
||||
|
||||
if (hasFlag('color=256')) {
|
||||
return 2;
|
||||
}
|
||||
|
||||
if (stream && !stream.isTTY && forceColor !== true) {
|
||||
return 0;
|
||||
}
|
||||
|
||||
const min = forceColor ? 1 : 0;
|
||||
|
||||
if (process.platform === 'win32') {
|
||||
// Node.js 7.5.0 is the first version of Node.js to include a patch to
|
||||
// libuv that enables 256 color output on Windows. Anything earlier and it
|
||||
// won't work. However, here we target Node.js 8 at minimum as it is an LTS
|
||||
// release, and Node.js 7 is not. Windows 10 build 10586 is the first Windows
|
||||
// release that supports 256 colors. Windows 10 build 14931 is the first release
|
||||
// that supports 16m/TrueColor.
|
||||
const osRelease = os.release().split('.');
|
||||
if (
|
||||
Number(process.versions.node.split('.')[0]) >= 8 &&
|
||||
Number(osRelease[0]) >= 10 &&
|
||||
Number(osRelease[2]) >= 10586
|
||||
) {
|
||||
return Number(osRelease[2]) >= 14931 ? 3 : 2;
|
||||
}
|
||||
|
||||
return 1;
|
||||
}
|
||||
|
||||
if ('CI' in env) {
|
||||
if (['TRAVIS', 'CIRCLECI', 'APPVEYOR', 'GITLAB_CI'].some(sign => sign in env) || env.CI_NAME === 'codeship') {
|
||||
return 1;
|
||||
}
|
||||
|
||||
return min;
|
||||
}
|
||||
|
||||
if ('TEAMCITY_VERSION' in env) {
|
||||
return /^(9\.(0*[1-9]\d*)\.|\d{2,}\.)/.test(env.TEAMCITY_VERSION) ? 1 : 0;
|
||||
}
|
||||
|
||||
if (env.COLORTERM === 'truecolor') {
|
||||
return 3;
|
||||
}
|
||||
|
||||
if ('TERM_PROGRAM' in env) {
|
||||
const version = parseInt((env.TERM_PROGRAM_VERSION || '').split('.')[0], 10);
|
||||
|
||||
switch (env.TERM_PROGRAM) {
|
||||
case 'iTerm.app':
|
||||
return version >= 3 ? 3 : 2;
|
||||
case 'Apple_Terminal':
|
||||
return 2;
|
||||
// No default
|
||||
}
|
||||
}
|
||||
|
||||
if (/-256(color)?$/i.test(env.TERM)) {
|
||||
return 2;
|
||||
}
|
||||
|
||||
if (/^screen|^xterm|^vt100|^vt220|^rxvt|color|ansi|cygwin|linux/i.test(env.TERM)) {
|
||||
return 1;
|
||||
}
|
||||
|
||||
if ('COLORTERM' in env) {
|
||||
return 1;
|
||||
}
|
||||
|
||||
if (env.TERM === 'dumb') {
|
||||
return min;
|
||||
}
|
||||
|
||||
return min;
|
||||
}
|
||||
|
||||
function getSupportLevel(stream) {
|
||||
const level = supportsColor(stream);
|
||||
return translateLevel(level);
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
supportsColor: getSupportLevel,
|
||||
stdout: getSupportLevel(process.stdout),
|
||||
stderr: getSupportLevel(process.stderr)
|
||||
};
|
||||
+9
@@ -0,0 +1,9 @@
|
||||
MIT License
|
||||
|
||||
Copyright (c) Sindre Sorhus <sindresorhus@gmail.com> (sindresorhus.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.
|
||||
+53
@@ -0,0 +1,53 @@
|
||||
{
|
||||
"name": "supports-color",
|
||||
"version": "5.5.0",
|
||||
"description": "Detect whether a terminal supports color",
|
||||
"license": "MIT",
|
||||
"repository": "chalk/supports-color",
|
||||
"author": {
|
||||
"name": "Sindre Sorhus",
|
||||
"email": "sindresorhus@gmail.com",
|
||||
"url": "sindresorhus.com"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=4"
|
||||
},
|
||||
"scripts": {
|
||||
"test": "xo && ava"
|
||||
},
|
||||
"files": [
|
||||
"index.js",
|
||||
"browser.js"
|
||||
],
|
||||
"keywords": [
|
||||
"color",
|
||||
"colour",
|
||||
"colors",
|
||||
"terminal",
|
||||
"console",
|
||||
"cli",
|
||||
"ansi",
|
||||
"styles",
|
||||
"tty",
|
||||
"rgb",
|
||||
"256",
|
||||
"shell",
|
||||
"xterm",
|
||||
"command-line",
|
||||
"support",
|
||||
"supports",
|
||||
"capability",
|
||||
"detect",
|
||||
"truecolor",
|
||||
"16m"
|
||||
],
|
||||
"dependencies": {
|
||||
"has-flag": "^3.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"ava": "^0.25.0",
|
||||
"import-fresh": "^2.0.0",
|
||||
"xo": "^0.20.0"
|
||||
},
|
||||
"browser": "browser.js"
|
||||
}
|
||||
+66
@@ -0,0 +1,66 @@
|
||||
# supports-color [](https://travis-ci.org/chalk/supports-color)
|
||||
|
||||
> Detect whether a terminal supports color
|
||||
|
||||
|
||||
## Install
|
||||
|
||||
```
|
||||
$ npm install supports-color
|
||||
```
|
||||
|
||||
|
||||
## Usage
|
||||
|
||||
```js
|
||||
const supportsColor = require('supports-color');
|
||||
|
||||
if (supportsColor.stdout) {
|
||||
console.log('Terminal stdout supports color');
|
||||
}
|
||||
|
||||
if (supportsColor.stdout.has256) {
|
||||
console.log('Terminal stdout supports 256 colors');
|
||||
}
|
||||
|
||||
if (supportsColor.stderr.has16m) {
|
||||
console.log('Terminal stderr supports 16 million colors (truecolor)');
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
## API
|
||||
|
||||
Returns an `Object` with a `stdout` and `stderr` property for testing either streams. Each property is an `Object`, or `false` if color is not supported.
|
||||
|
||||
The `stdout`/`stderr` objects specifies a level of support for color through a `.level` property and a corresponding flag:
|
||||
|
||||
- `.level = 1` and `.hasBasic = true`: Basic color support (16 colors)
|
||||
- `.level = 2` and `.has256 = true`: 256 color support
|
||||
- `.level = 3` and `.has16m = true`: Truecolor support (16 million colors)
|
||||
|
||||
|
||||
## Info
|
||||
|
||||
It obeys the `--color` and `--no-color` CLI flags.
|
||||
|
||||
Can be overridden by the user with the flags `--color` and `--no-color`. For situations where using `--color` is not possible, add the environment variable `FORCE_COLOR=1` to forcefully enable color or `FORCE_COLOR=0` to forcefully disable. The use of `FORCE_COLOR` overrides all other color support checks.
|
||||
|
||||
Explicit 256/Truecolor mode can be enabled using the `--color=256` and `--color=16m` flags, respectively.
|
||||
|
||||
|
||||
## Related
|
||||
|
||||
- [supports-color-cli](https://github.com/chalk/supports-color-cli) - CLI for this module
|
||||
- [chalk](https://github.com/chalk/chalk) - Terminal string styling done right
|
||||
|
||||
|
||||
## Maintainers
|
||||
|
||||
- [Sindre Sorhus](https://github.com/sindresorhus)
|
||||
- [Josh Junon](https://github.com/qix-)
|
||||
|
||||
|
||||
## License
|
||||
|
||||
MIT
|
||||
Reference in New Issue
Block a user