เกี่ยวกับเครื่องมือนี้
เครื่องมือ CSS เป็น JS Style Object แปลงบล็อกของ CSS เป็น JavaScript object ที่เหมาะกับ inline style ของ React หรือไลบรารี CSS-in-JS อย่าง styled-components และ Emotion มันแยกวิเคราะห์ declaration ภายในเบราว์เซอร์ของคุณ — ไม่มีอะไรถูกอัปโหลด — การย้ายสไตล์ชีตไปเป็น inline style จึงเป็นเพียงการวางแล้วคัดลอก
ชื่อพร็อพเพอร์ตี้แต่ละตัวถูกทำ camelCase: background-color กลายเป็น backgroundColor, z-index กลายเป็น zIndex vendor prefix ตามกฎของ React — -ms- ที่นำหน้าถูกทำเป็นตัวพิมพ์เล็ก ms (msFilter) ขณะที่ -webkit-, -moz- และ -o- ถูกทำเป็นตัวพิมพ์ใหญ่ Webkit, Moz และ O (WebkitBoxShadow) custom property (--brand-color) ถูกคงไว้ตามเดิมเป็นคีย์ที่ใส่เครื่องหมายคำพูด ค่าถูกสร้างเป็นสตริงโดยค่าเริ่มต้น โดยคงหน่วยและ !important; ตัวสลับ numeric ให้จำนวนเต็มและทศนิยมเปล่ากลายเป็นตัวเลขที่ไม่ใส่เครื่องหมายคำพูดแทน คีย์ที่เป็น identifier ของ JavaScript ที่ถูกต้องถูกปล่อยไว้ไม่ใส่เครื่องหมายคำพูด; ที่เหลือถูกใส่เครื่องหมายคำพูดอัตโนมัติ
เมื่ออินพุตเป็นบล็อก declaration ธรรมดา (ไม่มี selector) มันสร้าง object แบนหนึ่งตัว เหมาะกับ style prop ของ React เมื่ออินพุตมีกฎเต็มพร้อม selector โหมด styled/Emotion จะสร้าง object ซ้อนที่มีคีย์เป็นแต่ละสตริง selector — ไวยากรณ์ object ที่ไลบรารีเหล่านั้นยอมรับ คุณควบคุมชื่อ const ผลลัพธ์ และทั้งหมดถูกเขียนเป็น const styles = { ... }; พร้อมวาง