Follow for free plugins, new theme releases and theme news
Plugin Description
Safely add custom CSS to any WordPress block, including synced reusable blocks. Unlike with similar tools, your css will be optimized, minified, and inlined directly into the head of the page only where the block is used.
Features
- 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)
- Scopes styles to the block, removing the need to manage class naming
- 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
- 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}
Screenshots
No screenshots provided
