Pattern CSS – The Missing Stylesheet For Patterns

Screenshots

Add custom CSS styles to any WordPress block or pattern, including reusable patterns (synced or detached). Unlike with similar tools, your css will be optimized, minified, and inlined directly into the page only where the block is used. Features Scopes styles to the block so that parent/sibling blocks arent affected It’s fast. CSS is minified and optimized in the browser It’s safe. Invalid, non-spec CSS is never persisted (validated via webassembly sandbox) Supports reusable (synced or not-synced) patterns See changes on the page as you make them Combines adjacent rules (to decrease size) Minifies colors and math functions to simplify according to spec Star it on GitHub Tips Use [block] to target the current block directly instead of children Create reusable patterns to make starting points for your blocks Use !important to override some of your theme styles (use sparingly) Combines Rules [block] { color: red; } .bar { color: red; } /* Output: */ .pcss-3aa0f0fc,.pcss-3aa0f0fc .bar{color:red} Fixes redundant properties [block] { padding-top: 5px; padding-left: 50px; padding-bottom: 15px; padding-right: 5px; } /* Output: */ .pcss-3aa0f0fc{padding:5px 5px 15px 50px}