Skip to content

README.md

Latest commit

 

History

History
51 lines (38 loc) · 1.5 KB

README.md

File metadata and controls

51 lines (38 loc) · 1.5 KB

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.

Twitter

Pattern CSS

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}