nav tabs on admin dashboard
This commit is contained in:
72
node_modules/postcss/docs/guidelines/plugin.md
generated
vendored
72
node_modules/postcss/docs/guidelines/plugin.md
generated
vendored
@@ -22,34 +22,34 @@ 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].
|
||||
PostCSS — for example, [RTLCSS] and [Autoprefixer].
|
||||
|
||||
[Autoprefixer]: https://github.com/postcss/autoprefixer
|
||||
[cssnext]: http://cssnext.io/
|
||||
[RTLCSS]: https://rtlcss.com/
|
||||
|
||||
### 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 example, [`postcss-preset-env`] 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
|
||||
[`postcss-preset-env`]: https://preset-env.cssdb.org/
|
||||
[`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].
|
||||
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
|
||||
[`postcss-mixins`]: https://github.com/postcss/postcss-mixins
|
||||
|
||||
### 1.4. Create plugin by `postcss.plugin`
|
||||
|
||||
@@ -57,11 +57,11 @@ 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
|
||||
};
|
||||
});
|
||||
module.exports = postcss.plugin('plugin-name', opts => {
|
||||
return (root, result) => {
|
||||
// Plugin code
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
## 2. Processing
|
||||
@@ -78,19 +78,19 @@ different environments. You should test in (at least) Node.js [active LTS](https
|
||||
For example, use `fs.writeFile` instead of `fs.writeFileSync`:
|
||||
|
||||
```js
|
||||
postcss.plugin('plugin-sprite', function (opts) {
|
||||
return function (root, result) {
|
||||
postcss.plugin('plugin-sprite', opts => {
|
||||
return (root, result) => {
|
||||
|
||||
return new Promise(function (resolve, reject) {
|
||||
var sprite = makeSprite();
|
||||
fs.writeFile(opts.file, function (err) {
|
||||
if ( err ) return reject(err);
|
||||
resolve();
|
||||
})
|
||||
});
|
||||
return new Promise((resolve, reject) => {
|
||||
const sprite = makeSprite()
|
||||
fs.writeFile(opts.file, sprite, err => {
|
||||
if (err) return reject(err)
|
||||
resolve()
|
||||
})
|
||||
})
|
||||
|
||||
};
|
||||
});
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### 2.3. Set `node.source` for new nodes
|
||||
@@ -98,22 +98,22 @@ postcss.plugin('plugin-sprite', function (opts) {
|
||||
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
|
||||
So if you add a 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 });
|
||||
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);
|
||||
if (decl.prop === 'animation') {
|
||||
const keyframe = createAnimationByName(decl.value)
|
||||
keyframes.source = decl.source
|
||||
decl.root().append(keyframes)
|
||||
}
|
||||
```
|
||||
|
||||
@@ -134,8 +134,8 @@ 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' });
|
||||
if (typeof mixins[name] === 'undefined') {
|
||||
throw decl.error('Unknown mixin ' + name, { plugin: 'postcss-mixins' })
|
||||
}
|
||||
```
|
||||
|
||||
@@ -145,8 +145,8 @@ 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 (outdated(decl.prop)) {
|
||||
result.warn(decl.prop + ' is outdated', { node: decl })
|
||||
}
|
||||
```
|
||||
|
||||
@@ -156,7 +156,7 @@ If CSS input is a source of the warning, the plugin must set the `node` option.
|
||||
|
||||
### 4.1. Document your plugin in English
|
||||
|
||||
PostCSS plugins must have their `README.md` written in English. Do not be afraid
|
||||
PostCSS plugins must have their `README.md` wrote 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;
|
||||
|
||||
Reference in New Issue
Block a user