พจนานุกรมรูปแบบ: การแปลงและสร้างโทเคน

Style Dictionary (สร้างโดย Amazon) คือเครื่องมือสร้างที่รับคำจำกัดความของโทเค็นการออกแบบในรูปแบบ JSON แล้วส่งออกเป็นรูปแบบเป้าหมายใดก็ได้ เช่น คุณสมบัติ CSS แบบกำหนดเอง โมดูล ES ของ JavaScript ตัวแปร Sass ค่าคงที่ Swift ของ iOS ทรัพยากร XML ของ Android และรูปแบบที่กำหนดเองใด ๆ ที่คุณสร้างขึ้น แหล่งข้อมูลอ้างอิงเดียว ผลลัพธ์หลากหลาย

ติดตั้งด้วย npm install --save-dev style-dictionary เริ่มต้นโครงสร้างโครงการด้วย npx style-dictionary init ซึ่งจะสร้าง config.json (หรือ config.js) และไดเรกทอรี tokens/ ไฟล์กำหนดค่าจะบอก Style Dictionary ว่าต้องค้นหาไฟล์โทเค็นที่ใด และต้องเขียนผลลัพธ์ลงที่ใด

Style Dictionary ใช้โครงสร้าง JSON แบบซ้อนกัน โดยโหนดปลายทางจะมีคุณสมบัติ value ตัวอย่างเช่น { "color": { "primary": { "500": { "value": "#3b82f6" } } } } เส้นทางไปยังค่า (สี, ค่าหลัก, 500) จะกลายเป็นชื่อโทเค็นหลังการแปลง โดยทั่วไปจะจัดรูปแบบเป็น color-primary-500 หรือ --color-primary-500

เรียกใช้ npx style-dictionary build --config config.json (หรือ style-dictionary build หากกำหนดไว้ในสคริปต์ของ package.json) Style Dictionary จะอ่านไฟล์โทเค็นทั้งหมดจากแหล่งที่กำหนด ใช้การแปลง แล้วเขียนผลลัพธ์ไปยังปลายทางที่กำหนด หากรูปแบบโทเค็นมีข้อผิดพลาด ระบบจะแจ้งพร้อมชื่อไฟล์และเส้นทาง

config.json กำหนดแพลตฟอร์มต่าง ๆ ได้แก่ css (ส่งออกไฟล์ CSS ที่มีคุณสมบัติแบบกำหนดเอง), js (ส่งออกอ็อบเจ็กต์ JS) และ scss (ส่งออกตัวแปร Sass) แต่ละแพลตฟอร์มจะระบุไดเรกทอรีผลลัพธ์ ชื่อไฟล์ รูปแบบ (แม่แบบ) และการแปลง (ฟังก์ชันประมวลผลชื่อและค่า) ที่ต้องใช้

Style Dictionary มีการแปลงที่มีมาให้ในตัว ได้แก่ name/cti/kebab ซึ่งแปลงเส้นทางที่ซ้อนกันเป็น color-primary-500, name/cti/camel ซึ่งสร้าง colorPrimary500, size/rem ซึ่งแปลงค่าพิกเซลเป็น rem และ color/hex ซึ่งปรับสีให้อยู่ในรูปแบบเลขฐานสิบหก การแปลงสามารถประกอบร่วมกันได้และจะถูกนำไปใช้ตามลำดับ

คุณสามารถลงทะเบียนการแปลงแบบกำหนดเองด้วย StyleDictionary.registerTransform() ตัวอย่างเช่น การแปลงที่เปลี่ยนค่าพิกเซลเป็นจุดของ iOS หรือการแปลงที่เพิ่มคำนำหน้าเฉพาะบริษัทให้กับชื่อโทเค็นทั้งหมด การแปลงแบบกำหนดเองช่วยให้คุณควบคุมวิธีประมวลผลค่าก่อนส่งออกได้อย่างเต็มที่

รูปแบบแบบกำหนดเองจะกำหนดแม่แบบของไฟล์ผลลัพธ์ StyleDictionary.registerFormat() รับพจนานุกรมของโทเค็นที่ผ่านการแปลงแล้วส่งคืนสตริง ซึ่งก็คือเนื้อหาไฟล์ คุณสามารถส่งออกโทเค็นเป็นชนิด TypeScript เป็นอ็อบเจ็กต์ธีมของ React เป็นส่วนขยายการกำหนดค่าของ Tailwind หรือเป็นรูปแบบอื่นใดที่ชุดเทคโนโลยีของคุณต้องการ

หลังจากสร้างผลลัพธ์แล้ว ให้นำเข้าเอาต์พุต CSS ในสไตล์ชีตส่วนกลางด้วย @import './tokens/tokens.css' และนำเข้าเอาต์พุต JS ในคอมโพเนนต์หรือการกำหนดค่า Tailwind ด้วย import tokens from './tokens/tokens.js' CSS ช่วยให้ใช้คุณสมบัติแบบกำหนดเองสำหรับการเปลี่ยนธีมขณะทำงาน ส่วน JS ช่วยให้ใช้ค่าคงที่ที่มีชนิดข้อมูลสำหรับ Tailwind และตรรกะของ JavaScript

Style Dictionary รองรับการอ้างอิงโทเค็นโดยใช้เครื่องหมายวงเล็บปีกกา: { "value": "{color.primary.500}" } วิธีนี้จะสร้างนามแฝงของโทเค็นเชิงความหมาย โดยโทเค็นเชิงความหมายจะอ้างอิงโทเค็นพื้นฐาน เมื่อสร้างผลลัพธ์ Style Dictionary จะคลี่การอ้างอิงและส่งออกค่าที่ได้จริงในขั้นสุดท้าย (หรือการอ้างอิงตัวแปร CSS ขึ้นอยู่กับรูปแบบของคุณ)

เรียกใช้ Style Dictionary เป็นสคริปต์ npm ก่อนการสร้าง เพื่อให้สร้างโทเค็นใหม่ทุกครั้งก่อนสร้างแอปพลิเคชัน เพิ่ม "prebuild": "style-dictionary build" ลงใน package.json วิธีนี้ช่วยให้มั่นใจว่าการเปลี่ยนแปลงใด ๆ ในไฟล์ JSON ของโทเค็นจะถูกสะท้อนในผลลัพธ์ CSS และ JS ก่อนที่กระบวนการสร้าง React จะประมวลผลไฟล์เหล่านั้น

การแปลงใน Style Dictionary มีจุดประสงค์อะไร

Style Dictionary แปลง JSON ของโทเค็นเป็นรูปแบบผลลัพธ์ใดก็ได้ เช่น ตัวแปร CSS โมดูล JS Sass, iOS และ Android JSON ของโทเค็นใช้อ็อบเจ็กต์แบบซ้อนกัน โดยมีโหนดปลายทางเป็น value การแปลงจะประมวลผลชื่อและค่า (camelCase, px-to-rem) ส่วนรูปแบบจะกำหนดแม่แบบผลลัพธ์ การอ้างอิงโทเค็น ({color.primary.500}) ช่วยให้สร้างนามแฝงเชิงความหมายได้ ทำงานอัตโนมัติด้วยสคริปต์ prebuild เพื่อให้โทเค็นเป็นข้อมูลล่าสุดก่อนการสร้าง React เสมอ