🎨🖌 CSSProxyBuilder (CSS-in-JS)

CSS.Builder provides a declarative, chainable API for building CSS with:

• 🧱 Nested selectors
• 📱 Media queries
• 🎞 Keyframes
• 🧬 Vendor prefixing
• 🧹 Optional minification

---

✨🎯 Basic Example

          
            1import { CSS } from "hbh-proxies";3const css = new CSS.Builder()4  .button({5    padding: "10px",6    background: "blue",7    color: "white"8  })9  .button.hover({10    background: "darkblue"11  })12  .all;14console.log(css);
          
        

🖨 Output

          
            1button { padding: 10px; background: blue; color: white; }2button:hover { background: darkblue; }
          
        

---

🔗📐 Selector Chaining

Pseudo-selectors (:hover, :active, etc.) automatically attach without spaces.

---

🎯🧩 Applying Styles

You apply styles by calling the proxy:

          
            1.div({2  margin: "0",3  padding: "0"4})
          
        

---

📱🌐 Media Queries

Media queries are declared using keys starting with @media.

          
            1.container({2  width: "100%",3  "@media (max-width: 600px)": {4    width: "90%"5  }6})
          
        

🖨 Output

          
            1container { width: 100%; }2@media (max-width: 600px) {3  container { width: 90%; }4}
          
        

---

🎞✨ Keyframes

          
            1const css = new CSS.Builder()2  .keyframes("fadeIn", {3    from: { opacity: 0 },4    to: { opacity: 1 }5  })6  .box({7    animation: "fadeIn 1s ease-in"8  })9  .all;
          
        

🖨 Output

          
            1box { animation: fadeIn 1s ease-in; }3@keyframes fadeIn {4  from { opacity: 0; }5  to { opacity: 1; }6}
          
        

---

🧬🔧 Vendor Prefixing

Vendor prefixes are automatically applied to known properties:

          
            1.box({2  transform: "scale(1.2)"3})
          
        

🖨 Output

          
            1box {2  -webkit-transform: scale(1.2);3  -moz-transform: scale(1.2);4  -ms-transform: scale(1.2);5  -o-transform: scale(1.2);6  transform: scale(1.2);7}
          
        

📦 Prefix Data

          
            1CSS.Prefixers.Props     // Set of prefixed properties2CSS.Prefixers.Prefixes // ['-webkit-', '-moz-', '-ms-', '-o-']
          
        

---

🧹⚡ Minification

▶️ Enable Minification

          
            1const css = new CSS.Builder()2  .minify()3  .card({4    padding: "10px",5    border: "1px solid #000"6  })7  .all;
          
        

🖨 Output

          
            1card{padding:10px;border:1px solid #000}
          
        

---

🛠🧪 Standalone Minifier

          
            1import { CSS } from "hbh-proxies";3CSS.Minify(`4  /* comment */5  .box {6    padding: 10px;7    margin: 0;8  }9`);
          
        

---

📤📄 Retrieving CSS

---