You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

143 lines
4.3 KiB

4 years ago
  1. # PostCSS Runner Guidelines
  2. A PostCSS runner is a tool that processes CSS through a user-defined list
  3. of plugins; for example, [`postcss-cli`] or [`gulp‑postcss`].
  4. These rules are mandatory for any such runners.
  5. For single-plugin tools, like [`gulp-autoprefixer`],
  6. these rules are not mandatory but are highly recommended.
  7. See also [ClojureWerkz’s recommendations] for open source projects.
  8. [ClojureWerkz’s recommendations]: http://blog.clojurewerkz.org/blog/2013/04/20/how-to-make-your-open-source-project-really-awesome/
  9. [`gulp-autoprefixer`]: https://github.com/sindresorhus/gulp-autoprefixer
  10. [`gulp‑postcss`]: https://github.com/w0rm/gulp-postcss
  11. [`postcss-cli`]: https://github.com/postcss/postcss-cli
  12. ## 1. API
  13. ### 1.1. Accept functions in plugin parameters
  14. If your runner uses a config file, it must be written in JavaScript, so that
  15. it can support plugins which accept a function, such as [`postcss-assets`]:
  16. ```js
  17. module.exports = [
  18. require('postcss-assets')({
  19. cachebuster: function (file) {
  20. return fs.statSync(file).mtime.getTime().toString(16)
  21. }
  22. })
  23. ]
  24. ```
  25. [`postcss-assets`]: https://github.com/borodean/postcss-assets
  26. ## 2. Processing
  27. ### 2.1. Set `from` and `to` processing options
  28. To ensure that PostCSS generates source maps and displays better syntax errors,
  29. runners must specify the `from` and `to` options. If your runner does not handle
  30. writing to disk (for example, a gulp transform), you should set both options
  31. to point to the same file:
  32. ```js
  33. processor.process({ from: file.path, to: file.path })
  34. ```
  35. ### 2.2. Use only the asynchronous API
  36. PostCSS runners must use only the asynchronous API.
  37. The synchronous API is provided only for debugging, is slower,
  38. and can’t work with asynchronous plugins.
  39. ```js
  40. processor.process(opts).then(result => {
  41. // processing is finished
  42. });
  43. ```
  44. ### 2.3. Use only the public PostCSS API
  45. PostCSS runners must not rely on undocumented properties or methods,
  46. which may be subject to change in any minor release. The public API
  47. is described in [API docs].
  48. [API docs]: http://api.postcss.org/
  49. ## 3. Output
  50. ### 3.1. Don’t show JS stack for `CssSyntaxError`
  51. PostCSS runners must not show a stack trace for CSS syntax errors,
  52. as the runner can be used by developers who are not familiar with JavaScript.
  53. Instead, handle such errors gracefully:
  54. ```js
  55. processor.process(opts).catch(error => {
  56. if (error.name === 'CssSyntaxError') {
  57. process.stderr.write(error.message + error.showSourceCode())
  58. } else {
  59. throw error
  60. }
  61. })
  62. ```
  63. ### 3.2. Display `result.warnings()`
  64. PostCSS runners must output warnings from `result.warnings()`:
  65. ```js
  66. result.warnings().forEach(warn => {
  67. process.stderr.write(warn.toString())
  68. })
  69. ```
  70. See also [postcss-log-warnings] and [postcss-messages] plugins.
  71. [postcss-log-warnings]: https://github.com/davidtheclark/postcss-log-warnings
  72. [postcss-messages]: https://github.com/postcss/postcss-messages
  73. ### 3.3. Allow the user to write source maps to different files
  74. PostCSS by default will inline source maps in the generated file; however,
  75. PostCSS runners must provide an option to save the source map in a different
  76. file:
  77. ```js
  78. if (result.map) {
  79. fs.writeFile(opts.to + '.map', result.map.toString())
  80. }
  81. ```
  82. ## 4. Documentation
  83. ### 4.1. Document your runner in English
  84. PostCSS runners must have their `README.md` wrote in English. Do not be afraid
  85. of your English skills, as the open source community will fix your errors.
  86. Of course, you are welcome to write documentation in other languages;
  87. just name them appropriately (e.g. `README.ja.md`).
  88. ### 4.2. Maintain a changelog
  89. PostCSS runners must describe changes of all releases in a separate file,
  90. such as `ChangeLog.md`, `History.md`, or with [GitHub Releases].
  91. Visit [Keep A Changelog] for more information on how to write one of these.
  92. Of course, you should use [SemVer].
  93. [Keep A Changelog]: http://keepachangelog.com/
  94. [GitHub Releases]: https://help.github.com/articles/creating-releases/
  95. [SemVer]: http://semver.org/
  96. ### 4.3. `postcss-runner` keyword in `package.json`
  97. PostCSS runners written for npm must have the `postcss-runner` keyword
  98. in their `package.json`. This special keyword will be useful for feedback about
  99. the PostCSS ecosystem.
  100. For packages not published to npm, this is not mandatory, but recommended
  101. if the package format is allowed to contain keywords.