Pattern CSS

Lightening Fast, Reusable, Safe, In-editor CSS Optimization and Minification Tool. The perfect compliment to your site's theme.json. Safely add custom CSS to any WordPress block, including synced reusable blocks. Supports adding global CSS too.

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

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-f903c5c0,.pcss-f903c5c0 .bar{color:red}

Fixes redundant properties

[block] {
  padding-top: 5px;
  padding-left: 50px;
  padding-bottom: 15px;
  padding-right: 5px;
}

/* output: */
.pcss-f903c5c0{padding:5px 5px 15px 50px}