/ cssnano Public
fix(site-playground): add missing error handling to fix WSOD (#991) #1154
Add this suggestion to a batch that can be applied as a single commit. This suggestion is invalid because no changes were made to the code. Suggestions cannot be applied while the pull request is closed. Suggestions cannot be applied while viewing a subset of changes. Only one suggestion per line can be applied in a batch. Add this suggestion to a batch that can be applied as a single commit. Applying suggestions on deleted lines is not supported. You must change the existing code in this line in order to create a valid suggestion. Outdated suggestions cannot be applied. This suggestion has been applied or marked resolved. Suggestions cannot be applied from pending reviews. Suggestions cannot be applied on multi-line comments. Suggestions cannot be applied while the pull request is queued to merge.
This pull request aims to fix the playground WSOD reported in #991
I found two related issues leading to this behaviour:
prettier.format()when the "Format" button is used.
setOutput()in order to output it to the output pane of the playground. Here it was passed in raw as
EditorProps.value- which expected a string, not an object.
The two cases throws slightly different types of errors.
On most syntax errors, Prettier throws a
SyntaxErrorwrapping some output from
CssSyntaxErrorthrown by the css parser - which is quite verbose with numbered line output and such in the message. There are also some edge cases causing Prettier to throw different types of errors. And the line numbering from the SyntaxError does not correspond to the input lines.
While postcss throws a clean
CssSyntaxErrorwith good/usable information.
I therefore introduced a simple error handling function which conforms the errors to a short and concise format (using common factors), and outputs it as a red bar right above the code panes. So now the error will for the most part be identical whether one clicks "Run" or "Format"
This is also more friendly for devices with small screen resolutions, where outputting errors to the output pane would be out of view and could cause confusion (i.e. "nothing happening" when clicking the buttons)
I tried to follow the general style/conventions of the existing code.