PostCSS Example sheet

postcss-examples.css

/* Custom Properties */
:root {
	--wp--custom--spacing--block-gap: 2rem;
	--wp--custom--color--primary: #0073aa;
	--wp--custom--color--secondary: #23282d;
	--wp--custom--transition--duration: 0.3s;
	--wp--custom--border-radius: 4px;
}

/* Advanced Block Styling */
.wp-block-group.is-style-featured {
	position: relative;
	overflow: hidden;
	padding: var(--wp--custom--spacing--block-gap);
	background: linear-gradient(135deg, var(--wp--custom--color--primary), var(--wp--custom--color--secondary));
	border-radius: var(--wp--custom--border-radius);
	transition: transform var(--wp--custom--transition--duration) ease;

	&:hover {
		transform: translateY(-5px);
	}

	/* Nested Selectors */
	.wp-block-heading {
		color: #fff;
		margin-bottom: 1rem;
		opacity: 0;
		animation: fadeInUp 0.6s ease forwards;
	}

	.wp-block-paragraph {
		color: rgba(255, 255, 255, 0.9);
		line-height: 1.6;
	}
}

/* Flex Layout with Media Queries */
.wp-block-columns.is-style-features {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--custom--spacing--block-gap);
	margin: 0;

	@media (min-width: 782px) {
		flex-wrap: nowrap;
	}

	.wp-block-column {
		flex: 1 1 300px;
		min-width: 0;
		padding: 1.5rem;
		background: #fff;
		border-radius: var(--wp--custom--border-radius);
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
		transition: box-shadow var(--wp--custom--transition--duration) ease;

		&:hover {
			box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
		}
	}
}

/* Advanced Button Styling */
.wp-block-button.is-style-outline {
	.wp-block-button__link {
		position: relative;
		overflow: hidden;
		background: transparent;
		border: 2px solid var(--wp--custom--color--primary);
		color: var(--wp--custom--color--primary);
		transition: color var(--wp--custom--transition--duration) ease;

		&::before {
			content: '';
			position: absolute;
			top: 0;
			left: -100%;
			width: 100%;
			height: 100%;
			background: var(--wp--custom--color--primary);
			transition: transform var(--wp--custom--transition--duration) ease;
			z-index: -1;
		}

		&:hover {
			color: #fff;

			&::before {
				transform: translateX(100%);
			}
		}
	}
}

/* Keyframe Animations */
@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Container Query Example */
@container (min-width: 400px) {
	.wp-block-group.is-style-featured {
		padding: calc(var(--wp--custom--spacing--block-gap) * 1.5);
	}
}

/* Modern CSS Features */
.wp-block-group.is-style-card {
	backdrop-filter: blur(10px);
	
	&:has(.wp-block-heading) {
		padding-top: 2rem;
	}
}

/* Responsive Typography */
.wp-block-heading {
	font-size: clamp(1.5rem, 5vw, 2.5rem);
	line-height: 1.2;
}

/* Grid Layout */
.wp-block-columns.is-style-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	gap: var(--wp--custom--spacing--block-gap);
	
	@media (min-width: 782px) {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Scroll Animation */
.wp-block-group.is-style-scroll-reveal {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.6s ease, transform 0.6s ease;

	&.is-visible {
		opacity: 1;
		transform: translateY(0);
	}
}