Add more CSS

2026-08-15 18:45:06 +00:00 · 2015-06-21 16:19:49 -07:00
parent a856049f03
commit f7c105863c
19 changed files with 230 additions and 134 deletions
@@ -2,7 +2,7 @@

 **Experimental / Proof of concept**

-A React SDK (~8KB gzipped) for creating web applications and toolkits. Inspired by `react-native`.
+A React SDK (~9KB gzipped) for creating web applications and toolkits. Inspired by `react-native`.

 It includes the following components:

@@ -14,7 +14,7 @@ It includes the following components:
 And uses a [styling strategy](docs/styling-strategy.md) that maps inline styles
 to single-purpose CSS rules.

-This proof of concept uses a CSS bundle (~3.7KB gzipped) of 300+ precomputed
+This proof of concept uses a CSS bundle (~4.5KB gzipped) of 300+ precomputed
 declarations. A more sophisticated implementation is likely to produce a
 slightly larger CSS file and fewer inline styles.

@@ -1,14 +1,44 @@
+.backgroundAttachment-fixed { background-attachment: fixed; }
+.backgroundAttachment-inherit { background-attachment: inherit; }
+.backgroundAttachment-local { background-attachment: local; }
+.backgroundAttachment-scroll { background-attachment: scroll; }
+
+.backgroundClip-border-box { background-clip: border-box; }
+.backgroundClip-content-box { background-clip: content-box; }
+.backgroundClip-inherit { background-clip: inherit; }
+.backgroundClip-padding-box { background-clip: padding-box; }
+
+.backgroundColor-\#000,
 .backgroundColor-black { background-color: black; }
-.backgroundColor-transparent { background-color: currentcolor; }
+.backgroundColor-\#fff,
 .backgroundColor-white { background-color: white; }
+.backgroundColor-currentcolor,
+.backgroundColor-currentColor { background-color: currentcolor; }
+.backgroundColor-inherit { background-color: inherit; }
+.backgroundColor-transparent { background-color: transparent; }

 .backgroundImage { background-image: none; }

-.backgroundPosition-center { background-position: center; }
-.backgroundSize-contain { background-size: contain; }
-.backgroundSize-cover { background-size: cover; }
+.backgroundOrigin-border-box { background-clip: border-box; }
+.backgroundOrigin-content-box { background-clip: content-box; }
+.backgroundOrigin-inherit { background-clip: inherit; }
+.backgroundOrigin-padding-box { background-clip: padding-box; }

+.backgroundPosition-bottom { background-position: bottom; }
+.backgroundPosition-center { background-position: center; }
+.backgroundPosition-left { background-position: left; }
+.backgroundPosition-right { background-position: right; }
+.backgroundPosition-top { background-position: top; }
+
+.backgroundRepeat-inherit { background-repeat: inherit; }
 .backgroundRepeat-no-repeat { background-repeat: no-repeat; }
 .backgroundRepeat-repeat { background-repeat: repeat; }
 .backgroundRepeat-repeat-x { background-repeat: repeat-x; }
 .backgroundRepeat-repeat-y { background-repeat: repeat-y; }
+.backgroundRepeat-round { background-repeat: round; }
+.backgroundRepeat-space { background-repeat: space; }
+
+.backgroundSize-auto { background-size: auto; }
+.backgroundSize-contain { background-size: contain; }
+.backgroundSize-cover { background-size: cover; }
+.backgroundSize-inherit { background-size: inherit; }
@@ -1,43 +1,100 @@
+/* border-color */
+
+.borderColor-\#fff,
+.borderColor-white { border-color: white; }
 .borderColor-currentcolor { border-color: currentcolor; }
+.borderColor-inherit { border-color: inherit; }
 .borderColor-transparent { border-color: transparent; }
-.borderColor-white { border-color: white; }
+
+.borderBottomColor-\#fff,
+.borderBottomColor-white { border-bottom-color: white; }
+.borderBottomColor-currentcolor { border-bottom-color: currentcolor; }
+.borderBottomColor-inherit { border-bottom-color: inherit; }
+.borderBottomColor-transparent { border-bottom-color: transparent; }
+
+.borderLeftColor-\#fff,
+.borderLeftColor-white { border-left-color: white; }
+.borderLeftColor-currentcolor { border-left-color: currentcolor; }
+.borderLeftColor-inherit { border-left-color: inherit; }
+.borderLeftColor-transparent { border-left-color: transparent; }
+
+.borderRightColor-\#fff,
+.borderRightColor-white { border-right-color: white; }
+.borderRightColor-currentcolor { border-right-color: currentcolor; }
+.borderRightColor-inherit { border-right-color: inherit; }
+.borderRightColor-transparent { border-right-color: transparent; }
+
+.borderTopColor-\#fff,
+.borderTopColor-white { border-top-color: white; }
+.borderTopColor-currentcolor { border-top-color: currentcolor; }
+.borderTopColor-inherit { border-top-color: inherit; }
+.borderTopColor-transparent { border-top-color: transparent; }
+
+/* border-style */

-.borderStyle-dotted { border-style: dotted; }
 .borderStyle-dashed { border-style: dashed; }
+.borderStyle-dotted { border-style: dotted; }
+.borderStyle-inherit { border-style: inherit; }
+.borderStyle-none { border-style: none; }
 .borderStyle-solid { border-style: solid; }

+.borderBottomStyle-dashed { border-bottom-style: dashed; }
+.borderBottomStyle-dotted { border-bottom-style: dotted; }
+.borderBottomStyle-inherit { border-bottom-style: inherit; }
+.borderBottomStyle-none { border-bottom-style: none; }
+.borderBottomStyle-solid { border-bottom-style: solid; }
+
+.borderLeftStyle-dashed { border-left-style: dashed; }
+.borderLeftStyle-dotted { border-left-style: dotted; }
+.borderLeftStyle-inherit { border-left-style: inherit; }
+.borderLeftStyle-none { border-left-style: none; }
+.borderLeftStyle-solid { border-left-style: solid; }
+
+.borderRightStyle-dashed { border-right-style: dashed; }
+.borderRightStyle-dotted { border-right-style: dotted; }
+.borderRightStyle-inherit { border-right-style: inherit; }
+.borderRightStyle-none { border-right-style: none; }
+.borderRightStyle-solid { border-right-style: solid; }
+
+.borderTopStyle-dashed { border-top-style: dashed; }
+.borderTopStyle-dotted { border-top-style: dotted; }
+.borderTopStyle-inherit { border-top-style: inherit; }
+.borderTopStyle-none { border-top-style: none; }
+.borderTopStyle-solid { border-top-style: solid; }
+
+/* border-width */
+
 .borderWidth-0 { border-width: 0; }
-.borderTopWidth-0 { border-top-width: 0; }
-.borderRightWidth-0 { border-right-width: 0; }
-.borderBottomWidth-0 { border-bottom-width: 0; }
-.borderLeftWidth-0 { border-left-width: 0; }
-
 .borderWidth-1px { border-width: 1px; }
-.borderTopWidth-1px { border-top-width: 1px; }
-.borderRightWidth-1px { border-right-width: 1px; }
-.borderBottomWidth-1px { border-bottom-width: 1px; }
-.borderLeftWidth-1px { border-left-width: 1px; }
-
 .borderWidth-2px { border-width: 2px; }
-.borderTopWidth-2px { border-top-width: 2px; }
-.borderRightWidth-2px { border-right-width: 2px; }
-.borderBottomWidth-2px { border-bottom-width: 2px; }
-.borderLeftWidth-2px { border-left-width: 2px; }
-
 .borderWidth-3px { border-width: 3px; }
-.borderTopWidth-3px { border-top-width: 3px; }
-.borderRightWidth-3px { border-right-width: 3px; }
-.borderBottomWidth-3px { border-bottom-width: 3px; }
-.borderLeftWidth-3px { border-left-width: 3px; }
-
 .borderWidth-4px { border-width: 4px; }
-.borderTopWidth-4px { border-top-width: 4px; }
-.borderRightWidth-4px { border-right-width: 4px; }
-.borderBottomWidth-4px { border-bottom-width: 4px; }
-.borderLeftWidth-4px { border-left-width: 4px; }
-
 .borderWidth-5px { border-width: 5px; }
-.borderTopWidth-5px { border-top-width: 5px; }
-.borderRightWidth-5px { border-right-width: 5px; }
+
+.borderBottomWidth-0 { border-bottom-width: 0; }
+.borderBottomWidth-1px { border-bottom-width: 1px; }
+.borderBottomWidth-2px { border-bottom-width: 2px; }
+.borderBottomWidth-3px { border-bottom-width: 3px; }
+.borderBottomWidth-4px { border-bottom-width: 4px; }
 .borderBottomWidth-5px { border-bottom-width: 5px; }
+
+.borderLeftWidth-0 { border-left-width: 0; }
+.borderLeftWidth-1px { border-left-width: 1px; }
+.borderLeftWidth-2px { border-left-width: 2px; }
+.borderLeftWidth-3px { border-left-width: 3px; }
+.borderLeftWidth-4px { border-left-width: 4px; }
 .borderLeftWidth-5px { border-left-width: 5px; }
+
+.borderRightWidth-0 { border-right-width: 0; }
+.borderRightWidth-1px { border-right-width: 1px; }
+.borderRightWidth-2px { border-right-width: 2px; }
+.borderRightWidth-3px { border-right-width: 3px; }
+.borderRightWidth-4px { border-right-width: 4px; }
+.borderRightWidth-5px { border-right-width: 5px; }
+
+.borderTopWidth-0 { border-top-width: 0; }
+.borderTopWidth-1px { border-top-width: 1px; }
+.borderTopWidth-2px { border-top-width: 2px; }
+.borderTopWidth-3px { border-top-width: 3px; }
+.borderTopWidth-4px { border-top-width: 4px; }
+.borderTopWidth-5px { border-top-width: 5px; }
@@ -1,2 +1,4 @@
 .boxSizing-border-box { box-sizing: border-box; }
 .boxSizing-content-box { box-sizing: content-box; }
+.boxSizing-inherit { box-sizing: inherit; }
+.boxSizing-padding-box { box-sizing: padding-box; }
@@ -1,4 +1,5 @@
 .clear-both { clear: both; }
+.clear-inherit { clear: inherit; }
 .clear-left { clear: left; }
 .clear-none { clear: none; }
 .clear-right { clear: right; }
@@ -1,4 +1,6 @@
+.color-#000,
 .color-black { color: black; }
+.color-\#fff,
+.color-white { color: white; }
 .color-inherit { color: inherit; }
 .color-transparent { color: transparent; }
-.color-white { color: white; }
@@ -1,3 +1,3 @@
-.direction-auto { direction: auto; }
+.direction-inherit { direction: inherit; }
 .direction-ltr { direction: ltr; }
 .direction-rtl { direction: rtl; }
@@ -1,12 +1,22 @@
 .display-block { display: block; }
+.display-contents { display: contents; }
 .display-flex { display: flex; }
+.display-grid { display: grid; }
+.display-inherit { display: inherit; }
+.display-initial { display: initial; }
 .display-inline { display: inline; }
 .display-inline-block { display: inline-block; }
 .display-inline-flex { display: inline-flex; }
+.display-inline-grid { display: inline-grid; }
 .display-inline-table { display: inline-table; }
+.display-list-item { display: list-item; }
 .display-none { display: none; }
 .display-table { display: table; }
-.display-table-row { display: table-row; }
 .display-table-cell { display: table-cell; }
 .display-table-column { display: table-column; }
 .display-table-column-group { display: table-column-group; }
+.display-table-footer-group { display: table-footer-group; }
+.display-table-header-group { display: table-header-group; }
+.display-table-row { display: table-row; }
+.display-table-row-group { display: table-row-group; }
+.display-unset { display: unset; }
@@ -1,7 +1,25 @@
 .font-inherit { font: inherit; }

+/* font-family */
+
+.fontFamily-inherit { font-family: inherit; }
+.fontFamily-monospace { font-family: monospace; }
+.fontFamily-sans-serif { font-family: sans-serif; }
+.fontFamily-serif { font-family: serif; }
+
+/* font-size */
+
+.fontSize-100\% { font-size: 100%; }
+.fontSize-inherit { font-size: inherit; }
+
+/* font-style */
+
+.fontStyle-inherit { font-style: inherit; }
 .fontStyle-italic { font-style: italic; }
 .fontStyle-normal { font-style: normal; }
+.fontStyle-oblique { font-style: oblique; }
+
+/* font-weight */

 .fontWeight-100 { font-weight: 100; }
 .fontWeight-200 { font-weight: 200; }
@@ -13,4 +31,7 @@
 .fontWeight-800 { font-weight: 800; }
 .fontWeight-900 { font-weight: 900; }
 .fontWeight-bold { font-weight: bold; }
+.fontWeight-bolder { font-weight: bolder; }
+.fontWeight-inherit { font-weight: inherit; }
+.fontWeight-lighter { font-weight: lighter; }
 .fontWeight-normal { font-weight: normal; }
@@ -1,49 +1,20 @@
 .height-0 { height: 0; }
+.height-10\% { height: 10%; }
+.height-12\.5\% { height: 12.5%; }
+.height-20\% { height: 20%; }
+.height-25\% { height: 25%; }
+.height-30\% { height: 30%; }
+.height-37\.5\% { height: 37.5%; }
+.height-40\% { height: 40%; }
+.height-50\% { height: 50%; }
+.height-60\% { height: 60%; }
+.height-62\.5\% { height: 62.5%; }
+.height-70\% { height: 70%; }
+.height-75\% { height: 75%; }
+.height-80\% { height: 80%; }
+.height-87\.5\% { height: 87.5%; }
+.height-90\% { height: 90%; }
+.height-100\% { height: 100%; }

-.maxHeight-10% { max-height: 10%; }
-.minHeight-10% { min-height: 10%; }
-.height-10% { height: 10%; }
-
-.maxHeight-20% { max-height: 20%; }
-.minHeight-20% { min-height: 20%; }
-.height-20% { height: 20%; }
-
-.maxHeight-25% { max-height: 25%; }
-.minHeight-25% { min-height: 25%; }
-.height-25% { height: 25%; }
-
-.maxHeight-30% { max-height: 30%; }
-.minHeight-30% { min-height: 30%; }
-.height-30% { height: 30%; }
-
-.maxHeight-40% { max-height: 40%; }
-.minHeight-40% { min-height: 40%; }
-.height-40% { height: 40%; }
-
-.maxHeight-50% { max-height: 50%; }
-.minHeight-50% { min-height: 50%; }
-.height-50% { height: 50%; }
-
-.maxHeight-60% { max-height: 60%; }
-.minHeight-60% { min-height: 60%; }
-.height-60% { height: 60%; }
-
-.maxHeight-70% { max-height: 70%; }
-.minHeight-70% { min-height: 70%; }
-.height-70% { height: 70%; }
-
-.maxHeight-75% { max-height: 75%; }
-.minHeight-75% { min-height: 75%; }
-.height-75% { height: 75%; }
-
-.maxHeight-80% { max-height: 80%; }
-.minHeight-80% { min-height: 80%; }
-.height-80% { height: 80%; }
-
-.maxHeight-90% { max-height: 90%; }
-.minHeight-90% { min-height: 90%; }
-.height-90% { height: 90%; }
-
-.maxHeight-100% { max-height: 100%; }
-.minHeight-100% { min-height: 100%; }
-.height-100% { height: 100%; }
+.maxHeight-100\% { max-height: 100%; }
+.minHeight-100\% { min-height: 100%; }
@@ -0,0 +1,2 @@
+.lineHeight-inherit { line-height: inherit; }
+.lineHeight-normal { line-height: normal; }
@@ -1,14 +1,17 @@
 .overflow-auto { overflow: auto; }
 .overflow-hidden { overflow: hidden; }
+.overflow-inherit { overflow: inherit; }
 .overflow-scroll { overflow: scroll; }
 .overflow-visible { overflow: visible; }

 .overflowX-auto { overflow-x: auto; }
 .overflowX-hidden { overflow-x: hidden; }
+.overflowX-inherit { overflow-x: inherit; }
 .overflowX-scroll { overflow-x: scroll; }
 .overflowX-visible { overflow-x: visible; }

 .overflowY-auto { overflow-y: auto; }
 .overflowY-hidden { overflow-y: hidden; }
+.overflowY-inherit { overflow-y: inherit; }
 .overflowY-scroll { overflow-y: scroll; }
 .overflowY-visible { overflow-y: visible; }
@@ -1,12 +1,23 @@
 .textAlign-center { text-align: center; }
+.textAlign-end { text-align: end; }
+.textAlign-inherit { text-align: inherit; }
 .textAlign-left { text-align: left; }
 .textAlign-right { text-align: right; }
 .textAlign-justify { text-align: justify; }
+.textAlign-start { text-align: start; }

+.textDecoration-inherit { text-decoration: inherit; }
 .textDecoration-none { text-decoration: none; }
 .textDecoration-underline { text-decoration: underline; }

-.textOverflow-ellipsis { text-overflow: ellipsis }
+.textOverflow-clip { text-overflow: clip; }
+.textOverflow-ellipsis { text-overflow: ellipsis; }
+
+.textRendering-auto { text-rendering: auto; }
+.textRendering-geometricPrecision { text-rendering: geometricPrecision; }
+.textRendering-inherit { text-rendering: inherit; }
+.textRendering-optimizeLegibility { text-rendering: optimizeLegibility; }
+.textRendering-optimizeSpeed { text-rendering: optimizeSpeed; }

 .textTransform-capitalize { text-transform: capitalize; }
 .textTransform-lowercase { text-transform: lowercase; }
@@ -0,0 +1,7 @@
+.unicodeBidi-bidi-override { unicode-bidi: bidi-override; }
+.unicodeBidi-embed { unicode-bidi: embed; }
+.unicodeBidi-inherit { unicode-bidi: inherit; }
+.unicodeBidi-isolate { unicode-bidi: isolate; }
+.unicodeBidi-isolate-override { unicode-bidi: isolate-override; }
+.unicodeBidi-normal { unicode-bidi: normal; }
+.unicodeBidi-plaintext { unicode-bidi: plaintext; }
@@ -1,3 +1,4 @@
 .userSelect-all { user-select: all; }
 .userSelect-inherit { user-select: inherit; }
 .userSelect-none { user-select: none; }
+.userSelect-text { user-select: text; }
@@ -1,2 +1,4 @@
+.visibility-collapse { visibility: collapse; }
 .visibility-hidden { visibility: hidden; }
+.visibility-inherit { visibility: inherit; }
 .visibility-visible { visibility: visible; }
@@ -1,3 +1,5 @@
 .whiteSpace-normal { white-space: normal; }
 .whiteSpace-nowrap { white-space: nowrap; }
 .whiteSpace-pre { white-space: pre; }
+.whiteSpace-pre-line { white-space: pre-line; }
+.whiteSpace-pre-wrap { white-space: pre-wrap; }
@@ -1,49 +1,20 @@
+.maxWidth-100\% { max-width: 100%; }
+.minWidth-100\% { min-width: 100%; }
+
 .width-0 { width: 0; }
-
-.maxWidth-10% { max-width: 10%; }
-.minWidth-10% { min-width: 10%; }
-.width-10% { width: 10%; }
-
-.maxWidth-20% { max-width: 20%; }
-.minWidth-20% { min-width: 20%; }
-.width-20% { width: 20%; }
-
-.maxWidth-25% { max-width: 25%; }
-.minWidth-25% { min-width: 25%; }
-.width-25% { width: 25%; }
-
-.maxWidth-30% { max-width: 30%; }
-.minWidth-30% { min-width: 30%; }
-.width-30% { width: 30%; }
-
-.maxWidth-40% { max-width: 40%; }
-.minWidth-40% { min-width: 40%; }
-.width-40% { width: 40%; }
-
-.maxWidth-50% { max-width: 50%; }
-.minWidth-50% { min-width: 50%; }
-.width-50% { width: 50%; }
-
-.maxWidth-60% { max-width: 60%; }
-.minWidth-60% { min-width: 60%; }
-.width-60% { width: 60%; }
-
-.maxWidth-70% { max-width: 70%; }
-.minWidth-70% { min-width: 70%; }
-.width-70% { width: 70%; }
-
-.maxWidth-75% { max-width: 75%; }
-.minWidth-75% { min-width: 75%; }
-.width-75% { width: 75%; }
-
-.maxWidth-80% { max-width: 80%; }
-.minWidth-80% { min-width: 80%; }
-.width-80% { width: 80%; }
-
-.maxWidth-90% { max-width: 90%; }
-.minWidth-90% { min-width: 90%; }
-.width-90% { width: 90%; }
-
-.maxWidth-100% { max-width: 100%; }
-.minWidth-100% { min-width: 100%; }
-.width-100% { width: 100%; }
+.width-10\% { width: 10%; }
+.width-12\.5\% { width: 12.5%; }
+.width-20\% { width: 20%; }
+.width-25\% { width: 25%; }
+.width-30\% { width: 30%; }
+.width-37\.5\% { width: 37.5%; }
+.width-40\% { width: 40%; }
+.width-50\% { width: 50%; }
+.width-60\% { width: 60%; }
+.width-62\.5\% { width: 62.5%; }
+.width-70\% { width: 70%; }
+.width-75\% { width: 75%; }
+.width-80\% { width: 80%; }
+.width-87\.5\% { width: 87.5%; }
+.width-90\% { width: 90%; }
+.width-100\% { width: 100%; }
@@ -10,6 +10,7 @@ import display from './css/display.css';
 import flexbox from './css/flexbox.css';
 import font from './css/font.css';
 import height from './css/height.css';
+import lineHeight from './css/lineHeight.css';
 import list from './css/list.css';
 import margin from './css/margin.css';
 import opacity from './css/opacity.css';
@@ -18,6 +19,7 @@ import padding from './css/padding.css';
 import pointerEvents from './css/pointerEvents.css';
 import position from './css/position.css';
 import text from './css/text.css';
+import unicodeBidi from './css/unicodeBidi.css';
 import userSelect from './css/userSelect.css';
 import visibility from './css/visibility.css';
 import whiteSpace from './css/whiteSpace.css';
@@ -46,6 +48,7 @@ const map = Object.assign({},
  pointerEvents,
  position,
  text,
+  unicodeBidi,
  userSelect,
  visibility,
  whiteSpace,