Add Sass/SCSS playground. #754
Conversation
@nex3 I swapped the font stack here for the pipes to better align, since the Source Code Pro's glyphs needed a line height lower than 1 to meet. I don't know if you'd be OK with switching here, but we'd be able to load 4 less font files so a bit of a performance boost here if we go this direction. You can preview this change on the deploy preview here. |
|
I think I'd prefer to stick to Source Code Pro and just have the lines be a bit tight in the output panel. |
Playground review
I’ve highlighted all the debug/warn/error messages where we have spans. It seems like debug and error will always have spans, but warn is optional. In practice, it seems that deprecation warnings have spans, but user/library generated warnings will not. This was one reason why I initially had not included debug and warn highlights. Another reason I didn't include them initially is that while errors will only ever happen once, debugs and warns may be triggered many times, for example within a mixin. The tooltip will show all the messages triggered by a specific span, but the highlight won’t change no matter how many messages the span emits. Here's a playground with a few examples- everything possible is currently highlighted, but if any of these reasons are compelling, it'll be simple to disable certain cases.
I added a custom importer to show the message “The Sass Playground does not support loading stylesheets.” for any non built-in module usage of |
# Conflicts: # source/assets/sass/config/_typography.scss
Playground type
source/assets/js/playground/utils.ts
Outdated
|
|
||
| export const customLoader: Importer<'sync'> = { | ||
| canonicalize() { | ||
| throw new Error(PLAYGROUND_LOAD_ERROR_MESSAGE, {cause: 'Test'}); |
There was a problem hiding this comment.
Is this cause supposed to be here? What is it doing?
|
Looks great! Thanks everyone! |
Add Sass/SCSS playground.
Add Sass/SCSS playground.
----- It is inappropriate to include political and offensive content in public code repositories. Public code repositories should be neutral spaces for collaboration and community, free from personal or political views that could alienate or discriminate against others. Political content, especially that which targets or disparages minority groups, can be harmful and divisive. It can make people feel unwelcome and unsafe, and it can create a hostile work environment. Please refrain from adding such content to public code repositories. --- sass#700 sass#701 sass#702 sass#703 sass#704 sass#705 sass#706 sass#707 sass#708 sass#709 sass#710 sass#711 sass#712 sass#713 sass#714 sass#715 sass#716 sass#717 sass#718 sass#719 sass#720 sass#721 sass#722 sass#723 sass#724 sass#725 sass#726 sass#727 sass#728 sass#729 sass#730 sass#731 sass#732 sass#733 sass#734 sass#735 sass#736 sass#737 sass#738 sass#739 sass#740 sass#741 sass#742 sass#743 sass#744 sass#745 sass#746 sass#747 sass#748 sass#749 sass#750 sass#751 sass#752 sass#753 sass#754 sass#755 sass#756 sass#757 sass#758 sass#759 sass#760 sass#761 sass#762 sass#763 sass#764 sass#765 sass#766 sass#767 sass#768 sass#769 sass#770 sass#771 sass#772 sass#773 sass#774 sass#775 sass#776 sass#777 sass#778 sass#779 sass#780 sass#781 sass#782 sass#783 sass#784 sass#785 sass#786 sass#787 sass#788 sass#789 sass#790 sass#791 sass#792 sass#793 sass#794 sass#795 sass#796 sass#797 sass#798 sass#798 sass#799
Closes #620.
Helpful test links