extend the playground

Author: romainmenke

sites/postcss-preset-env/playground.njk

@@ -53,11 +53,18 @@ description: Play with PostCSS Preset Env in your browser
 					<option value="bottom-to-top">bottom to top</option>
 				</select>
 			</fieldset>
+
+			<fieldset>
+				<label for="enableClientSidePolyfills">enable client-side polyfills</label>
+				<input type="checkbox" name="enableClientSidePolyfills" id="enableClientSidePolyfills">
+			</fieldset>
 		</div>
 
-		<div id="input-editor" class="editor"></div>
-		<div id="config-editor" class="editor" data-preset-env-version="{{ presetVersionPlayground }}"></div>
-		<div id="output-editor" class="editor"></div>
+		<div class="editors">
+			<div id="input-editor" class="editor"></div>
+			<div id="config-editor" class="editor" data-preset-env-version="{{ presetVersionPlayground }}"></div>
+			<div id="output-editor" class="editor"></div>
+		</div>
 	</div>
 </main>
 {% endblock %}

sites/postcss-preset-env/src/static/css/pages/_playground.css

@@ -8,10 +8,21 @@
 	}
 
 	.editors-container {
+		display: grid;
+		width: 100%;
+		grid-template-rows: max-content minmax(0, 1fr);
+		grid-template-columns: 100%;
+		gap: var(--space-20);
+
+		@media (--from-wide) {
+			height: calc(100vh - var(--heading-size-from-medium));
+		}
+	}
+
+	.editors {
 		display: grid;
 		gap: var(--space-20);
 		grid-template-areas:
-			"controls"
 			"input"
 			"output"
 			"config";
@@ -20,23 +31,21 @@
 
 		@media (--from-wide) {
 			grid-template-areas:
-				"controls controls"
 				"input output"
 				"config output";
-			grid-template-rows: 80px calc(65% - 60px) calc(35% - 60px);
+			grid-template-rows: minmax(0, 65%) minmax(0, 35%);
 			grid-template-columns: calc(50% - var(--space-10)) calc(50% - var(--space-10));
-			height: calc(100vh - var(--heading-size-from-medium));
+			height: 100%;
 		}
 
-		@media (width >= 1440px) {
-			grid-template-rows: 40px calc(65% - 40px) calc(35% - 40px);
+		@media (width >=1440px) {
+			grid-template-rows: minmax(0, 65%) minmax(0, 35%);
 		}
 	}
 
 	#controls {
 		background-color: #282c34;
 		color: white;
-		grid-area: controls;
 		padding-inline: var(--space-10);
 
 		@media (--from-medium) {

sites/postcss-preset-env/src/static/js/playground.js

@@ -38,6 +38,7 @@ const currentConfig = stateAtLoad.config ?? {
 	browsers: ['> 0.2% and not dead'],
 	minimumVendorImplementations: 0,
 	stage: 2,
+	enableClientSidePolyfills: false,
 	logical: {
 		inlineDirection: 'left-to-right',
 		blockDirection: 'top-to-bottom',
@@ -110,6 +111,10 @@ function renderConfig(config) {
 		delete copy.logical.blockDirection;
 	}
 
+	if (!copy.enableClientSidePolyfills) {
+		delete copy.enableClientSidePolyfills;
+	}
+
 	if (Object.keys(copy.logical).length === 0) {
 		delete copy.logical;
 	}
@@ -250,15 +255,17 @@ let controls = {
 	preserve: document.getElementById('preserve'),
 	inlineDirection: document.getElementById('inlineDirection'),
 	blockDirection: document.getElementById('blockDirection'),
+	enableClientSidePolyfills: document.getElementById('enableClientSidePolyfills'),
 };
 
 {
 	controls.browsers.value = currentConfig.browsers.join(', ');
 	controls.minimumVendorImplementations.value = currentConfig.minimumVendorImplementations.toString();
 	controls.inlineDirection.value = currentConfig.logical.inlineDirection;
 	controls.blockDirection.value = currentConfig.logical.blockDirection;
-
 	controls.stage.value = currentConfig.stage.toString();
+	controls.enableClientSidePolyfills.checked = !!currentConfig.enableClientSidePolyfills;
+
 	if (currentConfig.preserve === true) {
 		controls.preserve.value = 'true';
 	} else if (currentConfig.preserve === false) {
@@ -280,6 +287,7 @@ for (const control of Object.values(controls)) {
 		currentConfig.browsers = controls.browsers.value.split(',').filter((x) => !!x);
 		currentConfig.minimumVendorImplementations = parseInt(controls.minimumVendorImplementations.value || '0', 10);
 		currentConfig.stage = parseInt(controls.stage.value || '0', 10);
+		currentConfig.enableClientSidePolyfills = controls.enableClientSidePolyfills.checked;
 
 		if (typeof preserve !== 'undefined') {
 			currentConfig.preserve = preserve;