feat(preset_tw): add rule of box-sizing

TomokiMiyauci · Jan 26, 2022 · c4b00f1 · c4b00f1
1 parent 7a12e01
commit c4b00f1
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 1 deletion.
diff --git a/_docs/pages/docs/box_sizing.md b/_docs/pages/docs/box_sizing.md
@@ -0,0 +1,5 @@
+---
+title: Box Sizing
+description: Utilities for controlling how the browser should calculate an element's total size.
+category: Layout
+---
diff --git a/preset_tw/rules/layout.ts b/preset_tw/rules/layout.ts
@@ -27,3 +27,10 @@ export const boxDecorations: Rule[] = [
     [BOX_DECORATION_BREAK]: "slice",
   }],
 ];
+
+const BOX_SIZING = "box-sizing";
+
+export const boxSizings: Rule[] = [
+  ["box-border", { [BOX_SIZING]: "border-box" }],
+  ["box-content", { [BOX_SIZING]: "content-box" }],
+];
diff --git a/preset_tw/rules/mod.ts b/preset_tw/rules/mod.ts
@@ -39,7 +39,7 @@ import { lineHeights } from "./line_height.ts";
 import { columns } from "./columns.ts";
 import { breakBefore } from "./break_before.ts";
 import { breakAfter } from "./break_after.ts";
-import { boxDecorations, breakInsides } from "./layout.ts";
+import { boxDecorations, boxSizings, breakInsides } from "./layout.ts";
 
 export const nestedRules = [
   alignContents,
@@ -85,6 +85,7 @@ export const nestedRules = [
   breakAfter,
   breakInsides,
   boxDecorations,
+  boxSizings,
 ];
 
 export {
@@ -95,6 +96,7 @@ export {
   backfaceVisibilities,
   backgroundColors,
   boxDecorations,
+  boxSizings,
   breakAfter,
   breakBefore,
   breakInsides,