DEV Community

itzsrikanth
itzsrikanth

Posted on

PostCSS: Input and other modules source code walk-through

#postcss #underthehood #sourcecode

Terminal Highlight

Purpose of this module is to enable syntax highlight while printing the stringified CSS (after transformation) to the terminal. picocolors is used for this (similar to chalk npm package). For each token, a specific color is defined as a map.

getTokenType

When the type is word, it is very generic and we need to classify them as hash or class. Using Tokenizer, forward lookup is done to detect bracket or parentheses.

terminalHighlight

Get Processor instance from Tokenizer initialization and until EOF is reached, wrap all the tokens using picocolors by splitting them by newline character.

Input

This takes in CSS as String type as first argument. The main purpose of this entity is to store CSS, origin, sourcemap and to provide associated functionalities listed below. The steps to initialize are:

  • Error handling
  • BOM check and handling
  • When from is specified, it is check if value is a network path or absolute path. Else it is resolved using path.
  • When from is not specified, id is generated using nanoid
  • Source map added if available, generated from compilation step before PostCSS kicks in.

fromOffset

Purpose of this method is to return line and column number when offset is provided.

  • CSS string is split by \n and stored as Array<string>.
  • The no of characters in each line is counted incrementally (including the newline), say, if there are 10 lines with each line having 20 characters. The corresponding array created is: 
lineToIndex = [20, 40, 60, ... 200]
Enter fullscreen mode Exit fullscreen mode
  • This is stored as cache with Symbol('fromOffsetCache'). Using this the line number and column number is determined in O(log n) complexity similar to searching sorted Array.

error

Returns CssSyntaxError
Parameters are:

  • error message (string)
  • any one of:
    • both line and column as {offset?:number; line:number; col:number}
    • line (number) and column (null)
  • opts ({plugins: any})
  • If offset is present, FilePosition is determined using fromOffset().

Steps:

  • generate the start and end line-column numbers from parameters (which is FilePosition) and pass to CssSyntaxError to get result.
  • Add {...FilePosition, source, url} to result

origin

  • return false if
    • not having map, or
    • map not having source
  • get sourcemap consumer to get the original FilePosition data before previous stage compilation
  • Add url, source (sourceContent) from consumer to FilePosition

mapResolve

Takes in file path and checks if it has protocol like file:// or http://. Else, it resolves path from map source.

from (getter)

Returns file or nanoid generated id

toJSON

Adds the following keys:

  • hasBOM
  • css
  • file
  • id
  • map and remove the map.consumerCache

Top comments (0)