CSS to JS Object Converter: แปลง CSS เป็น React Style Object และ JavaScript Object

แนวทางพัฒนา React ในยุคนี้มักดึงส่วนการแสดงผลเข้ามาไว้ใกล้ตัว component มากขึ้นเรื่อย ๆ เมื่อต้องย้ายดีไซน์จากไฟล์ CSS เข้ามาอยู่ใน component ของ React ประกาศทุกบรรทัด (declaration) จำเป็นต้องเขียนใหม่ทั้งหมด background-color กลายเป็น backgroundColor และค่าต่าง ๆ ต้องใส่เครื่องหมายคำพูดให้ถูกต้อง style object ถึงจะรันผ่าน จนถึงตอนนี้งานแปลงเหล่านี้ยังต้องทำด้วยมือทั้งหมด

CSS to JS Object Converter ช่วยทำส่วนนี้ให้อัตโนมัติ เพียงวาง CSS declarations ลงไป เครื่องมือจะสร้างผลลัพธ์เป็น React inline-style object, plain JavaScript object หรือ template literal ที่พร้อมนำไปใช้ทันที ครบทั้ง key แบบ camelCase การจัดการค่าตัวเลขที่ถูกต้อง และคำเตือนสำหรับจุดที่แปลงได้ไม่สะอาด ทุกอย่างทำงานในเบราว์เซอร์ 100% ไม่มีการอัปโหลดโค้ดออกไป

บทความนี้จะอธิบายกฎการแปลงของเครื่องมือ วิธีเลือก output format ให้เหมาะกับงาน และ use case จริงที่นำไปใช้ได้ทันที

ทำไมต้องใช้ CSS to JS Object Converter?

• ลดงานพิมพ์ซ้ำที่น่าเบื่อ — การเขียน declaration ใหม่ด้วยมือชวนให้พลาดทั้งขีดลบที่หลุดและเครื่องหมายคำพูดที่ลืมใส่ เครื่องมือนี้ให้ผลลัพธ์ที่ถูกต้องตั้งแต่การวางครั้งแรก
• ได้ key แบบ camelCase อัตโนมัติ — ชื่อ property แบบ kebab-case ใช้ใน CSS ได้แต่ใช้เป็น identifier ใน JavaScript ไม่ได้ เครื่องมือแปลงให้ครบทุก property รวมถึงแบบมี vendor prefix อย่าง -webkit-transform
• จัดการตัวเลขตามแบบที่ React ต้องการ — property แบบ unitless อย่าง zIndex และ opacity คงค่าเป็นตัวเลข ส่วนค่าความยาวเก็บหน่วยไว้เป็น string ตรงกับพฤติกรรม inline style ของ React
• เลือก output ให้ตรงกับ stack ของคุณ — React style object, plain JS object หรือ template literal เครื่องมือเดียวครอบคลุมทั้ง inline style, style dictionary และการดึงโค้ดออกจาก CSS-in-JS
• โค้ดของคุณเป็นส่วนตัว — การ parse ทำงานในเบราว์เซอร์ล้วน ๆ ไม่มีการอัปโหลดและไม่ต้องสมัครบัญชี

ฟีเจอร์สำคัญ

รายละเอียดที่ควรรู้เพิ่มเติม:

• รวม declaration เหมือน cascade ของ CSS — หาก property เดียวกันปรากฏหลายครั้ง เครื่องมือจะเก็บค่าสุดท้ายพร้อมแจ้งเตือน ตรงกับวิธีที่ CSS แก้ปัญหาการชนกันของค่า
• จัดการ escaping ให้เอง — ค่าที่มีเครื่องหมายคำพูด เช่น content: "'" จะถูก escape อย่างถูกต้องใน JavaScript ที่สร้างออกมา

วิธีใช้งาน

1. วาง CSS declarations — วาง rule, บล็อก media query หรือ declarations แบบหลวม ๆ ลงในช่อง input หรือกดโหลดตัวอย่างที่เตรียมไว้ให้ดูการทำงาน
2. เลือกรูปแบบ output — เลือก React style object, plain JS object หรือ template literal ตามปลายทางที่โค้ดจะถูกนำไปใช้
3. เลือกรูปแบบ quote — เลือก single หรือ double quote ให้ตรงกับกฎ lint ของโปรเจกต์ ผลลัพธ์อัปเดตทันที
4. ตรวจสอบผลลัพธ์และคำเตือน — ดูจำนวน selector, declaration และคำเตือน พร้อมอ่านหมายเหตุเรื่องค่าที่ถูกรวมกันก่อนนำโค้ดไปใช้
5. Copy หรือ download — คัดลอกโค้ดไปยังคลิปบอร์ด หรือดาวน์โหลดเป็นไฟล์ styles.js (หรือ styles.txt สำหรับ template literal)

จาก kebab-case สู่ camelCase และกฎการจัดการค่า

หัวใจของเครื่องมือคือกฎชุดเล็ก ๆ ที่แน่นอน ซึ่งแปลง syntax ของ CSS ให้เป็น syntax ของ JavaScript การเข้าใจกฎเหล่านี้ช่วยให้คุณคาดเดาผลลัพธ์ทุกครั้งได้

จาก kebab-case เป็น key แบบ camelCase

CSS ตั้งชื่อ property แบบ kebab-case เช่น background-color และ border-radius แต่ key ใน JavaScript ต้องเป็น identifier ที่ถูกต้อง เครื่องมือจะตัดขีดลบทิ้งและเปลี่ยนตัวอักษรถัดไปเป็นตัวพิมพ์ใหญ่ background-color จึงกลายเป็น backgroundColor และ line-height กลายเป็น lineHeight ส่วน vendor prefix ได้การจัดการแบบเดียวกับที่ React ใช้ คือตัดขีดหน้าออกแล้วทำตัวแรกเป็นพิมพ์ใหญ่ -webkit-transform จึงกลายเป็น WebkitTransform

ข้อยกเว้นของชื่อ property

ไม่ใช่ทุก property ที่ควรแปลงเป็น camelCase CSS custom property อย่าง --card-padding แปลงไม่ได้ เพราะขีดสองตัวด้านหน้ามีความหมายในตัวเอง เครื่องมือจึงเก็บไว้เป็น key แบบมีเครื่องหมายคำพูดพร้อมค่าแบบ string:

const styles = {
  '--card-padding': '16px',
};

ผลลัพธ์ยังใช้งานได้ปกติ เพียงไป resolve ค่าด้วย var() ที่จุดที่นำ style ไปใช้

ค่าตัวเลขกับประเด็นเรื่อง px

React จะเติม px ให้อัตโนมัติเมื่อคุณส่งตัวเลขล้วนให้กับ property ที่ต้องการค่าความยาว แต่ไม่ใช่ทุก property property อย่าง z-index, opacity, font-weight และ line-height เป็นแบบ unitless ตัวเลขที่นั่นต้องยังเป็นตัวเลข เครื่องมือรู้รายการนี้ z-index: 10 จึงกลายเป็น zIndex: 10 โดยไม่มีเครื่องหมายคำพูด ขณะที่ padding: 16px กลายเป็น padding: '16px' คือ string ที่เก็บหน่วยไว้ครบ การเก็บหน่วยไว้ช่วยขจัดความกำกวมในจุดที่ React ต้องเดาเอง

ปลายทาง output ทั้งสามแบบ

• React inline-style object — object แบบแบน key เป็น camelCase พร้อมใช้กับ style={styles} เหมาะเมื่อย้าย declarations เข้าไปใน component
• Plain JS object — selector กลายเป็น key ระดับบนสุด ส่วน property คงชื่อ kebab-case เดิม เหมาะกับสคริปต์ Node และ pipeline สไตล์ design token
• Template literal — declarations ถูกแสดงเป็น CSS ดิบใน backticks เหมาะกับ styled-components, CSS-in-JS ตระกูลอื่น ๆ และทุกที่ที่ต้องการ CSS เป็น string

ตัวอย่างก่อนและหลัง

/* ก่อน — CSS declarations */
.card {
  background-color: #fff;
  border-radius: 8px;
  z-index: 10;
}

// หลัง — React inline-style object
const styles = {
  backgroundColor: '#fff',
  borderRadius: '8px',
  zIndex: 10,
};

ไม่ต้องพิมพ์ซ้ำแม้แต่บรรทัดเดียว และ property ที่เป็นตัวเลขก็ทำงานถูกต้องตามที่ React ต้องการตั้งแต่แรก

กรณีการใช้งานจริง

React Inline Styles

Inline style เหมาะกับค่าที่เปลี่ยนตาม runtime เช่น ตำแหน่ง สีที่ขับเคลื่อนด้วย state หรือความกว้างของ progress แปลงส่วนดีไซน์ที่คงที่ไว้ แล้วค่อยแทรกค่า dynamic เข้าไปภายหลัง

<div style={{ ...cardStyles, width: `${progress}%` }} />

ดึงสไตล์ไปใช้กับ styled-components

นักออกแบบมักส่งงานมาเป็น CSS ธรรมดา ขณะที่โค้ดเบสใช้ styled-components ซึ่งต้องการ template literal เพียงสลับ output format เป็น template literal declarations ก็จะถูกจัดรูปแบบพร้อมวางเหนือตัว component ทันที

Canvas และการจัดการ DOM โดยตรง

เมื่อ JavaScript ขับเคลื่อน DOM เอง เช่น animation, canvas overlay หรือ widget จากภายนอก การตั้งค่าสไตล์จะผ่าน element.style ชื่อ property แบบ camelCase ที่เครื่องมือสร้างให้ตรงกับสิ่งที่ CSSOM ต้องการพอดี จึงคัดลอก el.style.borderRadius = '8px' ไปใช้ได้จากผลลัพธ์โดยตรง

Email HTML ที่สร้างด้วย JavaScript

อีเมลแบบ transactional ถูกประกอบเป็น HTML string ในโค้ด และสไตล์ของมันต้องเป็น inline เสมอ สร้าง plain object ของ declarations ราย element แล้ววนลูปเพื่อ emit attribute style="..." ทุก template ก็จะได้สไตล์ที่สม่ำเสมอ

แนวทางปฏิบัติที่ดี

• สไตล์ที่นิ่งให้อยู่ใน stylesheet — inline style แสดง pseudo-class, media query หรือ keyframe animation ไม่ได้ ย้ายเฉพาะค่าที่จำเป็นต้อง dynamic เท่านั้น
• แปลงแยกตาม component — แปลงเฉพาะ declarations ที่ component นั้นต้องใช้ แทนการแปลงทั้ง stylesheet ผลลัพธ์จะเล็กและตรวจสอบง่ายกว่า
• ระวัง vendor prefix — property ที่มี prefix จะกลายเป็น key ตัวแรกพิมพ์ใหญ่อย่าง WebkitTransform ควรเก็บไว้ แต่ตรวจดูว่า autoprefixer ไม่ได้จัดการจุดนี้อยู่แล้ว
• อ่านคำเตือนก่อนวางโค้ด — property ที่ซ้ำกันจะถูกรวมโดยค่าสุดท้ายชนะ ตรวจสอบให้แน่ใจว่าตรงกับความตั้งใจของคุณ
• เก็บ custom property เป็น string — ปล่อยให้ --variables อยู่ในเครื่องหมายคำพูด แล้ว resolve ด้วย var() แทนการพยายามแปลงเป็น camelCase

พร้อมแปลง CSS ของคุณหรือยัง?

เลิกพิมพ์ declaration ใหม่แล้วเผื่อใจว่าขีดลบจะลงตำแหน่งถูก เปิด CSS to JS Object Converter วาง CSS ของคุณ เลือก format ที่ stack ต้องการ แล้วคัดลอก JavaScript ที่สะอาดและ camelCase ถูกต้องภายในไม่กี่วินาที

เครื่องมือที่เกี่ยวข้องที่คุณอาจสนใจ:

• Tailwind to CSS Converter
• CSS Unit Converter
• Text Case Converter

ขอให้สนุกกับการแปลงโค้ดครับ

คำถามที่พบบ่อย

ถ: CSS to JS Object Converter อัปโหลดโค้ดของฉันขึ้นเซิร์ฟเวอร์หรือไม่?

ตอบ: ไม่ การ parse และการสร้างโค้ดทำงานในเบราว์เซอร์ทั้งหมด CSS ต้นทางและ JavaScript ที่สร้างได้ไม่เคยออกจากเครื่องของคุณ

ถ: ทำไม z-index คงเป็นตัวเลข แต่ padding กลายเป็น string?

ตอบ: React เติม px ให้ตัวเลขที่ส่งให้ property แบบความยาว แต่ property อย่าง z-index และ opacity เป็นแบบ unitless และต้องคงเป็นตัวเลข เครื่องมือจึงใช้รายการ unitless ของ React ในการตัดสินใจให้อัตโนมัติ

ถ: วาง stylesheet ทั้งไฟล์ที่มี media query และ pseudo-class ได้ไหม?

ตอบ: วางได้และเครื่องมือจะ parse ให้ แต่ inline style แสดง :hover หรือ @media ไม่ได้ ให้ใช้คำเตือนช่วยระบุ declarations ที่มาจากบล็อกเหล่านั้น

ถ: custom property อย่าง --brand-color จะถูกจัดการอย่างไร?

ตอบ: จะถูกเก็บเป็น key แบบมีเครื่องหมายคำพูดพร้อมค่าเดิม เพราะชื่อแบบนี้แปลงเป็น camelCase ไม่ได้ ให้ resolve ด้วย var() ที่จุดที่นำ style ไปใช้

ถ: ควรเลือก output format แบบไหนสำหรับ styled-components?

ตอบ: เลือกแบบ template literal เพราะ styled-components และ CSS-in-JS ส่วนใหญ่ต้องการ CSS เป็น string ซึ่งตรงกับผลลัพธ์ของรูปแบบนี้พอดี