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.

314 lines
7.7 KiB

4 years ago
  1. # css [![Build Status](https://travis-ci.org/reworkcss/css.svg?branch=master)](https://travis-ci.org/reworkcss/css)
  2. CSS parser / stringifier.
  3. ## Installation
  4. $ npm install css
  5. ## Usage
  6. ```js
  7. var css = require('css');
  8. var obj = css.parse('body { font-size: 12px; }', options);
  9. css.stringify(obj, options);
  10. ```
  11. ## API
  12. ### css.parse(code, [options])
  13. Accepts a CSS string and returns an AST `object`.
  14. `options`:
  15. - silent: silently fail on parse errors.
  16. - source: the path to the file containing `css`. Makes errors and source
  17. maps more helpful, by letting them know where code comes from.
  18. ### css.stringify(object, [options])
  19. Accepts an AST `object` (as `css.parse` produces) and returns a CSS string.
  20. `options`:
  21. - indent: the string used to indent the output. Defaults to two spaces.
  22. - compress: omit comments and extraneous whitespace.
  23. - sourcemap: return a sourcemap along with the CSS output. Using the `source`
  24. option of `css.parse` is strongly recommended when creating a source map.
  25. Specify `sourcemap: 'generator'` to return the SourceMapGenerator object
  26. instead of serializing the source map.
  27. - inputSourcemaps: (enabled by default, specify `false` to disable) reads any
  28. source maps referenced by the input files when generating the output source
  29. map. When enabled, file system access may be required for reading the
  30. referenced source maps.
  31. ### Example
  32. ```js
  33. var ast = css.parse('body { font-size: 12px; }', { source: 'source.css' });
  34. var css = css.stringify(ast);
  35. var result = css.stringify(ast, { sourcemap: true });
  36. result.code // string with CSS
  37. result.map // source map object
  38. ```
  39. ### Errors
  40. Errors thrown during parsing have the following properties:
  41. - message: `String`. The full error message with the source position.
  42. - reason: `String`. The error message without position.
  43. - filename: `String` or `undefined`. The value of `options.source` if
  44. passed to `css.parse`. Otherwise `undefined`.
  45. - line: `Integer`.
  46. - column: `Integer`.
  47. - source: `String`. The portion of code that couldn't be parsed.
  48. When parsing with the `silent` option, errors are listed in the
  49. `parsingErrors` property of the [`stylesheet`](#stylesheet) node instead
  50. of being thrown.
  51. If you create any errors in plugins such as in
  52. [rework](https://github.com/reworkcss/rework), you __must__ set the same
  53. properties for consistency.
  54. ## AST
  55. Interactively explore the AST with <http://iamdustan.com/reworkcss_ast_explorer/>.
  56. ### Common properties
  57. All nodes have the following properties.
  58. #### position
  59. Information about the position in the source string that corresponds to
  60. the node.
  61. `Object`:
  62. - start: `Object`:
  63. - line: `Number`.
  64. - column: `Number`.
  65. - end: `Object`:
  66. - line: `Number`.
  67. - column: `Number`.
  68. - source: `String` or `undefined`. The value of `options.source` if passed to
  69. `css.parse`. Otherwise `undefined`.
  70. - content: `String`. The full source string passed to `css.parse`.
  71. The line and column numbers are 1-based: The first line is 1 and the first
  72. column of a line is 1 (not 0).
  73. The `position` property lets you know from which source file the node comes
  74. from (if available), what that file contains, and what part of that file was
  75. parsed into the node.
  76. #### type
  77. `String`. The possible values are the ones listed in the Types section below.
  78. #### parent
  79. A reference to the parent node, or `null` if the node has no parent.
  80. ### Types
  81. The available values of `node.type` are listed below, as well as the available
  82. properties of each node (other than the common properties listed above.)
  83. #### stylesheet
  84. The root node returned by `css.parse`.
  85. - stylesheet: `Object`:
  86. - rules: `Array` of nodes with the types `rule`, `comment` and any of the
  87. at-rule types.
  88. - parsingErrors: `Array` of `Error`s. Errors collected during parsing when
  89. option `silent` is true.
  90. #### rule
  91. - selectors: `Array` of `String`s. The list of selectors of the rule, split
  92. on commas. Each selector is trimmed from whitespace and comments.
  93. - declarations: `Array` of nodes with the types `declaration` and `comment`.
  94. #### declaration
  95. - property: `String`. The property name, trimmed from whitespace and
  96. comments. May not be empty.
  97. - value: `String`. The value of the property, trimmed from whitespace and
  98. comments. Empty values are allowed.
  99. #### comment
  100. A rule-level or declaration-level comment. Comments inside selectors,
  101. properties and values etc. are lost.
  102. - comment: `String`. The part between the starting `/*` and the ending `*/`
  103. of the comment, including whitespace.
  104. #### charset
  105. The `@charset` at-rule.
  106. - charset: `String`. The part following `@charset `.
  107. #### custom-media
  108. The `@custom-media` at-rule.
  109. - name: `String`. The `--`-prefixed name.
  110. - media: `String`. The part following the name.
  111. #### document
  112. The `@document` at-rule.
  113. - document: `String`. The part following `@document `.
  114. - vendor: `String` or `undefined`. The vendor prefix in `@document`, or
  115. `undefined` if there is none.
  116. - rules: `Array` of nodes with the types `rule`, `comment` and any of the
  117. at-rule types.
  118. #### font-face
  119. The `@font-face` at-rule.
  120. - declarations: `Array` of nodes with the types `declaration` and `comment`.
  121. #### host
  122. The `@host` at-rule.
  123. - rules: `Array` of nodes with the types `rule`, `comment` and any of the
  124. at-rule types.
  125. #### import
  126. The `@import` at-rule.
  127. - import: `String`. The part following `@import `.
  128. #### keyframes
  129. The `@keyframes` at-rule.
  130. - name: `String`. The name of the keyframes rule.
  131. - vendor: `String` or `undefined`. The vendor prefix in `@keyframes`, or
  132. `undefined` if there is none.
  133. - keyframes: `Array` of nodes with the types `keyframe` and `comment`.
  134. #### keyframe
  135. - values: `Array` of `String`s. The list of “selectors” of the keyframe rule,
  136. split on commas. Each “selector” is trimmed from whitespace.
  137. - declarations: `Array` of nodes with the types `declaration` and `comment`.
  138. #### media
  139. The `@media` at-rule.
  140. - media: `String`. The part following `@media `.
  141. - rules: `Array` of nodes with the types `rule`, `comment` and any of the
  142. at-rule types.
  143. #### namespace
  144. The `@namespace` at-rule.
  145. - namespace: `String`. The part following `@namespace `.
  146. #### page
  147. The `@page` at-rule.
  148. - selectors: `Array` of `String`s. The list of selectors of the rule, split
  149. on commas. Each selector is trimmed from whitespace and comments.
  150. - declarations: `Array` of nodes with the types `declaration` and `comment`.
  151. #### supports
  152. The `@supports` at-rule.
  153. - supports: `String`. The part following `@supports `.
  154. - rules: `Array` of nodes with the types `rule`, `comment` and any of the
  155. at-rule types.
  156. ### Example
  157. CSS:
  158. ```css
  159. body {
  160. background: #eee;
  161. color: #888;
  162. }
  163. ```
  164. Parse tree:
  165. ```json
  166. {
  167. "type": "stylesheet",
  168. "stylesheet": {
  169. "rules": [
  170. {
  171. "type": "rule",
  172. "selectors": [
  173. "body"
  174. ],
  175. "declarations": [
  176. {
  177. "type": "declaration",
  178. "property": "background",
  179. "value": "#eee",
  180. "position": {
  181. "start": {
  182. "line": 2,
  183. "column": 3
  184. },
  185. "end": {
  186. "line": 2,
  187. "column": 19
  188. }
  189. }
  190. },
  191. {
  192. "type": "declaration",
  193. "property": "color",
  194. "value": "#888",
  195. "position": {
  196. "start": {
  197. "line": 3,
  198. "column": 3
  199. },
  200. "end": {
  201. "line": 3,
  202. "column": 14
  203. }
  204. }
  205. }
  206. ],
  207. "position": {
  208. "start": {
  209. "line": 1,
  210. "column": 1
  211. },
  212. "end": {
  213. "line": 4,
  214. "column": 2
  215. }
  216. }
  217. }
  218. ]
  219. }
  220. }
  221. ```
  222. ## License
  223. MIT