Repository files navigation

The ast explorer is not active since 2021/8/22, this fork just update postcss to the latest version for better debug experence

Paste or drop css code into the editor and inspect the generated AST onhttps://postcss-rs.github.io/astexplorer/

The AST explorer provides following css parsers:

• [cssom][]
• [csstree][]
• [postcss][] + [postcss-safe-parser][] & [postcss-scss][]
• [rework][]

Since future syntax is supported, the AST explorer is a useful tool fordevelopers who want to create AST transforms. In fact, following transformersare included so you can prototype your own plugins:

• [postcss][]

1. Go towebsite/.
2. Install the new parser as dependency:yarn add theParser (ornpm install -S theParser)
3. Copy one of the existing examples insrc/parsers/{language}.
4. Adjust the code as necessary:

• Update metadata.
• Load the right parser (loadParser).
• Call the right parsing method with the right/necessary options inparse.
• Implement thenodeToRange method (this is for highlighting).
• Implement thegetNodeName method (this is for quick look through the tree).
• ImplementopensByDefault method for auto-expansion of specific properties.
• Define_ignoredProperties set or implementforEachProperty generator method for filtering.
• Provide arenderSettings method if applicable.

0. Go towebsite/.
1. Install the new transformer as dependency.
2. Copy one of the existing examples insrc/parsers/{language}/transformers.
3. Adjust the code as necessary:

• Update metadata anddefaultParserID.
• Load the right transformer (loadTransformer).
• Call the transformation method intransform.
• Change sample transformation code incodeExample.txt.

1. Clone the repository.
2. Go towebsite/.
3. Install all dependencies withyarn install (you can runnpm install aswell).

Runyarn run build for the final minimized version.Runyarn run watch for incremental builds.

Runyarn start to start a simple static webserver.