@homebound/truss 1.109.0 → 1.110.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (244) hide show
  1. package/build/breakpoints.d.ts +0 -1
  2. package/build/breakpoints.js +11 -11
  3. package/build/breakpoints.js.map +1 -1
  4. package/build/breakpoints.test.d.ts +0 -1
  5. package/build/breakpoints.test.js +4 -4
  6. package/build/breakpoints.test.js.map +1 -1
  7. package/build/config.d.ts +0 -1
  8. package/build/generate.d.ts +0 -1
  9. package/build/generate.js +21 -18
  10. package/build/generate.js.map +1 -1
  11. package/build/index.d.ts +3 -3
  12. package/build/index.js +7 -3
  13. package/build/index.js.map +1 -1
  14. package/build/methods.d.ts +1 -2
  15. package/build/methods.js +35 -30
  16. package/build/methods.js.map +1 -1
  17. package/build/methods.test.d.ts +0 -1
  18. package/build/methods.test.js +3 -3
  19. package/build/methods.test.js.map +1 -1
  20. package/build/sections/tachyons/border.d.ts +2 -0
  21. package/build/sections/{border.js → tachyons/border.js} +14 -9
  22. package/build/sections/tachyons/border.js.map +1 -0
  23. package/build/sections/tachyons/borderColors.d.ts +2 -0
  24. package/build/sections/{borderColors.js → tachyons/borderColors.js} +3 -3
  25. package/build/sections/tachyons/borderColors.js.map +1 -0
  26. package/build/sections/tachyons/borderRadius.d.ts +2 -0
  27. package/build/sections/{borderRadius.js → tachyons/borderRadius.js} +2 -2
  28. package/build/sections/tachyons/borderRadius.js.map +1 -0
  29. package/build/sections/tachyons/borderStyles.d.ts +2 -0
  30. package/build/sections/{borderStyles.js → tachyons/borderStyles.js} +2 -2
  31. package/build/sections/tachyons/borderStyles.js.map +1 -0
  32. package/build/sections/tachyons/borderWidths.d.ts +2 -0
  33. package/build/sections/{borderWidths.js → tachyons/borderWidths.js} +2 -2
  34. package/build/sections/tachyons/borderWidths.js.map +1 -0
  35. package/build/sections/tachyons/boxShadow.d.ts +2 -0
  36. package/build/sections/{boxShadow.js → tachyons/boxShadow.js} +2 -2
  37. package/build/sections/tachyons/boxShadow.js.map +1 -0
  38. package/build/sections/tachyons/coordinates.d.ts +2 -0
  39. package/build/sections/{coordinates.js → tachyons/coordinates.js} +2 -2
  40. package/build/sections/tachyons/coordinates.js.map +1 -0
  41. package/build/sections/tachyons/cursor.d.ts +2 -0
  42. package/build/sections/{cursor.js → tachyons/cursor.js} +11 -6
  43. package/build/sections/tachyons/cursor.js.map +1 -0
  44. package/build/sections/tachyons/display.d.ts +2 -0
  45. package/build/sections/{display.js → tachyons/display.js} +2 -2
  46. package/build/sections/tachyons/display.js.map +1 -0
  47. package/build/sections/tachyons/flexbox.d.ts +2 -0
  48. package/build/sections/{flexbox.js → tachyons/flexbox.js} +16 -11
  49. package/build/sections/tachyons/flexbox.js.map +1 -0
  50. package/build/sections/tachyons/floats.d.ts +2 -0
  51. package/build/sections/{floats.js → tachyons/floats.js} +2 -2
  52. package/build/sections/tachyons/floats.js.map +1 -0
  53. package/build/sections/tachyons/fontWeight.d.ts +2 -0
  54. package/build/sections/{fontWeight.js → tachyons/fontWeight.js} +2 -2
  55. package/build/sections/tachyons/fontWeight.js.map +1 -0
  56. package/build/sections/tachyons/grid.d.ts +2 -0
  57. package/build/sections/tachyons/grid.js +37 -0
  58. package/build/sections/tachyons/grid.js.map +1 -0
  59. package/build/sections/tachyons/heights.d.ts +2 -0
  60. package/build/sections/{heights.js → tachyons/heights.js} +15 -10
  61. package/build/sections/tachyons/heights.js.map +1 -0
  62. package/build/sections/tachyons/index.d.ts +35 -0
  63. package/build/sections/{index.js → tachyons/index.js} +0 -0
  64. package/build/sections/tachyons/index.js.map +1 -0
  65. package/build/sections/tachyons/lineClamp.d.ts +2 -0
  66. package/build/sections/{lineClamp.js → tachyons/lineClamp.js} +14 -9
  67. package/build/sections/tachyons/lineClamp.js.map +1 -0
  68. package/build/sections/tachyons/objectFit.d.ts +2 -0
  69. package/build/sections/{objectFit.js → tachyons/objectFit.js} +2 -2
  70. package/build/sections/tachyons/objectFit.js.map +1 -0
  71. package/build/sections/tachyons/outlines.d.ts +2 -0
  72. package/build/sections/{outlines.js → tachyons/outlines.js} +2 -2
  73. package/build/sections/tachyons/outlines.js.map +1 -0
  74. package/build/sections/tachyons/overflow.d.ts +2 -0
  75. package/build/sections/{overflow.js → tachyons/overflow.js} +13 -8
  76. package/build/sections/tachyons/overflow.js.map +1 -0
  77. package/build/sections/tachyons/position.d.ts +2 -0
  78. package/build/sections/{position.js → tachyons/position.js} +2 -2
  79. package/build/sections/tachyons/position.js.map +1 -0
  80. package/build/sections/tachyons/skins.d.ts +2 -0
  81. package/build/sections/tachyons/skins.js +51 -0
  82. package/build/sections/tachyons/skins.js.map +1 -0
  83. package/build/sections/tachyons/spacing.d.ts +2 -0
  84. package/build/sections/{spacing.js → tachyons/spacing.js} +12 -7
  85. package/build/sections/tachyons/spacing.js.map +1 -0
  86. package/build/sections/tachyons/textAlign.d.ts +2 -0
  87. package/build/sections/{textAlign.js → tachyons/textAlign.js} +2 -2
  88. package/build/sections/tachyons/textAlign.js.map +1 -0
  89. package/build/sections/tachyons/textDecoration.d.ts +2 -0
  90. package/build/sections/{textDecoration.js → tachyons/textDecoration.js} +2 -2
  91. package/build/sections/tachyons/textDecoration.js.map +1 -0
  92. package/build/sections/tachyons/textTransform.d.ts +2 -0
  93. package/build/sections/{textTransform.js → tachyons/textTransform.js} +2 -2
  94. package/build/sections/tachyons/textTransform.js.map +1 -0
  95. package/build/sections/tachyons/typeScale.d.ts +2 -0
  96. package/build/sections/{typeScale.js → tachyons/typeScale.js} +3 -3
  97. package/build/sections/tachyons/typeScale.js.map +1 -0
  98. package/build/sections/tachyons/typography.d.ts +2 -0
  99. package/build/sections/tachyons/typography.js +24 -0
  100. package/build/sections/tachyons/typography.js.map +1 -0
  101. package/build/sections/tachyons/userSelect.d.ts +2 -0
  102. package/build/sections/{userSelect.js → tachyons/userSelect.js} +2 -2
  103. package/build/sections/tachyons/userSelect.js.map +1 -0
  104. package/build/sections/tachyons/verticalAlign.d.ts +2 -0
  105. package/build/sections/{verticalAlign.js → tachyons/verticalAlign.js} +2 -2
  106. package/build/sections/tachyons/verticalAlign.js.map +1 -0
  107. package/build/sections/tachyons/visibility.d.ts +2 -0
  108. package/build/sections/{visibility.js → tachyons/visibility.js} +2 -2
  109. package/build/sections/tachyons/visibility.js.map +1 -0
  110. package/build/sections/tachyons/whitespace.d.ts +2 -0
  111. package/build/sections/{whitespace.js → tachyons/whitespace.js} +2 -2
  112. package/build/sections/tachyons/whitespace.js.map +1 -0
  113. package/build/sections/tachyons/widths.d.ts +2 -0
  114. package/build/sections/tachyons/widths.js +49 -0
  115. package/build/sections/tachyons/widths.js.map +1 -0
  116. package/build/sections/tachyons/wordBreak.d.ts +2 -0
  117. package/build/sections/{wordBreak.js → tachyons/wordBreak.js} +2 -2
  118. package/build/sections/tachyons/wordBreak.js.map +1 -0
  119. package/build/sections/tachyons/zIndex.d.ts +2 -0
  120. package/build/sections/{zIndex.js → tachyons/zIndex.js} +11 -6
  121. package/build/sections/tachyons/zIndex.js.map +1 -0
  122. package/build/utils.d.ts +0 -1
  123. package/build/utils.js +1 -1
  124. package/build/utils.js.map +1 -1
  125. package/package.json +9 -17
  126. package/.nvmrc +0 -1
  127. package/README.markdown +0 -373
  128. package/build/breakpoints.d.ts.map +0 -1
  129. package/build/breakpoints.test.d.ts.map +0 -1
  130. package/build/config.d.ts.map +0 -1
  131. package/build/generate.d.ts.map +0 -1
  132. package/build/index.d.ts.map +0 -1
  133. package/build/methods.d.ts.map +0 -1
  134. package/build/methods.test.d.ts.map +0 -1
  135. package/build/sections/border.d.ts +0 -3
  136. package/build/sections/border.d.ts.map +0 -1
  137. package/build/sections/border.js.map +0 -1
  138. package/build/sections/borderColors.d.ts +0 -3
  139. package/build/sections/borderColors.d.ts.map +0 -1
  140. package/build/sections/borderColors.js.map +0 -1
  141. package/build/sections/borderRadius.d.ts +0 -3
  142. package/build/sections/borderRadius.d.ts.map +0 -1
  143. package/build/sections/borderRadius.js.map +0 -1
  144. package/build/sections/borderStyles.d.ts +0 -3
  145. package/build/sections/borderStyles.d.ts.map +0 -1
  146. package/build/sections/borderStyles.js.map +0 -1
  147. package/build/sections/borderWidths.d.ts +0 -3
  148. package/build/sections/borderWidths.d.ts.map +0 -1
  149. package/build/sections/borderWidths.js.map +0 -1
  150. package/build/sections/boxShadow.d.ts +0 -3
  151. package/build/sections/boxShadow.d.ts.map +0 -1
  152. package/build/sections/boxShadow.js.map +0 -1
  153. package/build/sections/coordinates.d.ts +0 -3
  154. package/build/sections/coordinates.d.ts.map +0 -1
  155. package/build/sections/coordinates.js.map +0 -1
  156. package/build/sections/cursor.d.ts +0 -3
  157. package/build/sections/cursor.d.ts.map +0 -1
  158. package/build/sections/cursor.js.map +0 -1
  159. package/build/sections/display.d.ts +0 -3
  160. package/build/sections/display.d.ts.map +0 -1
  161. package/build/sections/display.js.map +0 -1
  162. package/build/sections/flexbox.d.ts +0 -3
  163. package/build/sections/flexbox.d.ts.map +0 -1
  164. package/build/sections/flexbox.js.map +0 -1
  165. package/build/sections/floats.d.ts +0 -3
  166. package/build/sections/floats.d.ts.map +0 -1
  167. package/build/sections/floats.js.map +0 -1
  168. package/build/sections/fontWeight.d.ts +0 -3
  169. package/build/sections/fontWeight.d.ts.map +0 -1
  170. package/build/sections/fontWeight.js.map +0 -1
  171. package/build/sections/grid.d.ts +0 -3
  172. package/build/sections/grid.d.ts.map +0 -1
  173. package/build/sections/grid.js +0 -32
  174. package/build/sections/grid.js.map +0 -1
  175. package/build/sections/heights.d.ts +0 -3
  176. package/build/sections/heights.d.ts.map +0 -1
  177. package/build/sections/heights.js.map +0 -1
  178. package/build/sections/index.d.ts +0 -36
  179. package/build/sections/index.d.ts.map +0 -1
  180. package/build/sections/index.js.map +0 -1
  181. package/build/sections/lineClamp.d.ts +0 -3
  182. package/build/sections/lineClamp.d.ts.map +0 -1
  183. package/build/sections/lineClamp.js.map +0 -1
  184. package/build/sections/objectFit.d.ts +0 -3
  185. package/build/sections/objectFit.d.ts.map +0 -1
  186. package/build/sections/objectFit.js.map +0 -1
  187. package/build/sections/outlines.d.ts +0 -3
  188. package/build/sections/outlines.d.ts.map +0 -1
  189. package/build/sections/outlines.js.map +0 -1
  190. package/build/sections/overflow.d.ts +0 -3
  191. package/build/sections/overflow.d.ts.map +0 -1
  192. package/build/sections/overflow.js.map +0 -1
  193. package/build/sections/position.d.ts +0 -3
  194. package/build/sections/position.d.ts.map +0 -1
  195. package/build/sections/position.js.map +0 -1
  196. package/build/sections/skins.d.ts +0 -3
  197. package/build/sections/skins.d.ts.map +0 -1
  198. package/build/sections/skins.js +0 -46
  199. package/build/sections/skins.js.map +0 -1
  200. package/build/sections/spacing.d.ts +0 -3
  201. package/build/sections/spacing.d.ts.map +0 -1
  202. package/build/sections/spacing.js.map +0 -1
  203. package/build/sections/textAlign.d.ts +0 -3
  204. package/build/sections/textAlign.d.ts.map +0 -1
  205. package/build/sections/textAlign.js.map +0 -1
  206. package/build/sections/textDecoration.d.ts +0 -3
  207. package/build/sections/textDecoration.d.ts.map +0 -1
  208. package/build/sections/textDecoration.js.map +0 -1
  209. package/build/sections/textTransform.d.ts +0 -3
  210. package/build/sections/textTransform.d.ts.map +0 -1
  211. package/build/sections/textTransform.js.map +0 -1
  212. package/build/sections/typeScale.d.ts +0 -3
  213. package/build/sections/typeScale.d.ts.map +0 -1
  214. package/build/sections/typeScale.js.map +0 -1
  215. package/build/sections/typography.d.ts +0 -3
  216. package/build/sections/typography.d.ts.map +0 -1
  217. package/build/sections/typography.js +0 -24
  218. package/build/sections/typography.js.map +0 -1
  219. package/build/sections/userSelect.d.ts +0 -3
  220. package/build/sections/userSelect.d.ts.map +0 -1
  221. package/build/sections/userSelect.js.map +0 -1
  222. package/build/sections/verticalAlign.d.ts +0 -3
  223. package/build/sections/verticalAlign.d.ts.map +0 -1
  224. package/build/sections/verticalAlign.js.map +0 -1
  225. package/build/sections/visibility.d.ts +0 -3
  226. package/build/sections/visibility.d.ts.map +0 -1
  227. package/build/sections/visibility.js.map +0 -1
  228. package/build/sections/whitespace.d.ts +0 -3
  229. package/build/sections/whitespace.d.ts.map +0 -1
  230. package/build/sections/whitespace.js.map +0 -1
  231. package/build/sections/widths.d.ts +0 -3
  232. package/build/sections/widths.d.ts.map +0 -1
  233. package/build/sections/widths.js +0 -44
  234. package/build/sections/widths.js.map +0 -1
  235. package/build/sections/wordBreak.d.ts +0 -3
  236. package/build/sections/wordBreak.d.ts.map +0 -1
  237. package/build/sections/wordBreak.js.map +0 -1
  238. package/build/sections/zIndex.d.ts +0 -3
  239. package/build/sections/zIndex.d.ts.map +0 -1
  240. package/build/sections/zIndex.js.map +0 -1
  241. package/build/utils.d.ts.map +0 -1
  242. package/logo.svg +0 -11
  243. package/package.json.bak +0 -38
  244. package/tsconfig.json +0 -20
package/README.markdown DELETED
@@ -1,373 +0,0 @@
1
- <p align="center" style="padding: 100px">
2
- <img src="logo.svg" width="400" />
3
- </p>
4
-
5
- Truss is a TypeScript DSL for writing utility CSS (think Tailwinds or Tachyons) in React/JSX, but on top of existing CSS-in-JS libraries (i.e. Emotion, MUI, and Fela).
6
-
7
- ## Quick Features
8
-
9
- Truss lets you:
10
-
11
- * Write `<div css={Css.mt1.black.$}>`, which Truss turns into `css={{ margin-top: 8px, color: "black" }}`, and then Emotion (or another CSS-in-JS library) turns into injected CSS classes.
12
-
13
- * Setup your project's design system (palette, fonts, increments, and breakpoints) in Truss's configuration ([see example code](https://github.com/homebound-team/truss/blob/main/integration-test/index.ts#L12) and the "Customization" section below)
14
-
15
- * Achieve both utility-class brevity and critical-CSS delivery.
16
-
17
- * Output dynamic style values as needed, i.e. `Css.mt(someValue).$` or `Css.mt0.if(someCondition).mt4.$`.
18
-
19
- Also see the "Why This Approach?" section for more rationale.
20
-
21
- ## Quick Intro
22
-
23
- Truss generates a `src/Css.ts` file in your local project; this file exports a `Css` const that you use like:
24
-
25
- ```typescript
26
- import { Css } from "src/Css";
27
-
28
- const css = Css.mx2.black.$;
29
- ```
30
-
31
- The last `.$` is like a `.build()` or `.finish()` method that converts the DSL object, with its fluent abbreviation getters/methods (like `mx2` and `black`), into just a regular POJO (plain old JavaScript object), as if you'd written by hand:
32
-
33
- ```typescript
34
- const css = {
35
- // added by .mx2
36
- marginLeft: "16px",
37
- marginRight: "16px",
38
- // added by .black
39
- color: "#000000",
40
- };
41
- ```
42
-
43
- You can then pass this POJO to whatever CSS-in-JS framework you're using, i.e. with Emotion you would do something like:
44
-
45
- ```tsx
46
- /** @jsxImportSource @emotion/react */
47
-
48
- function MyReactComponent(props: ...) {
49
- // Use emotion's css prop
50
- return <div css={Css.mx2.black.$}>content</div>
51
- }
52
- ```
53
-
54
- And in your HTML output, you'd get an Emotion-generated `.emotion-0` CSS class with the three `marginLeft`, `marginRight`, `color` properties set. (If you were to use Truss with Fela's `fe` JSX factory/`css` prop, you'd get three CSS classes, `a`, `b`, and `c`.)
55
-
56
- See the "Common CSS-in-JS Frameworks" section below for Fela and MUI examples.
57
-
58
- ## Installation
59
-
60
- The recommended Truss installation involves checking a few `index.ts`/`package.json` files into a `truss/` subdirectory of your project, to provide a place for Truss configuration/customization, as well as an easy way to kick off the code generator (i.e. it keeps Truss's `package.json`/`tsconfig.json` from interfering with your project's existing setup).
61
-
62
- In your current project, run (todo script/make this shorter):
63
-
64
- - `mkdir truss`
65
- - `cd truss`
66
- - `wget https://github.com/homebound-team/truss-project-files/archive/main.zip`
67
- - `unzip main.zip`
68
- - `mv truss-project-files-main/* .`
69
- - `mv truss-project-files-main/.gitignore .`
70
- - `rmdir truss-project-files-main`
71
- - `rm main.zip`
72
- - `npm install --save @homebound/truss`
73
- - Note this is purposefully `install`-ing into the `truss/package.json` and not your root `package.json` file
74
- - `npm run generate`
75
-
76
- This should create a `src/Css.ts` in your project's main `src/` directory (you can change the output path in `index.ts` if needed).
77
-
78
- You can then check in the `truss/` directory, and the generated `src/Css.ts` file (which will be in your root project's `src/` directory and not the `truss/` subdirectory).
79
-
80
- Note that you do not need to run `npm run generate` on a regular basis/as part of your day-to-day workflow; you only need to run it when you're specifically making updates to the `truss/index.ts`/`truss/palette.ts` files.
81
-
82
- ## Configuration
83
-
84
- Truss's configuration is all done in the `truss/index.ts` and `truss/palette.ts` files that are installed in your local project.
85
-
86
- See the comments in [that file](https://github.com/homebound-team/truss-project-files/blob/main/index.ts) for the available config options.
87
-
88
- ## Psuedo-Selectors and Media Queries
89
-
90
- Unlike Tachyons and Tailwinds, Truss's DSL does not have abbreviations/method names for psuedo-selectors and media queries.
91
-
92
- Instead of building these complications into the DSL, with Truss you use your CSS-in-JS framework-of-choice's existing psuedo-selector and media query support.
93
-
94
- For example, using Emotion you would do hover-specific styling like:
95
-
96
- ```tsx
97
- /** @jsxImportSource @emotion/react */
98
-
99
- function MyReactComponent(props: ...) {
100
- return (
101
- <div css={{...Css.mx2.black.$, "&:hover": Css.blue.$ }}>
102
- content
103
- </div>
104
- );
105
- }
106
- ```
107
-
108
- And breakpoints like:
109
-
110
- ```tsx
111
- /** @jsxImportSource @emotion/react */
112
- import { Css, sm } from "src/Css";
113
-
114
- function MyReactComponent(props: ...) {
115
- return (
116
- <div css={{...Css.mx2.black.$, [sm]: Css.mx1.$}}>
117
- content
118
- </div>
119
- );
120
- }
121
- ```
122
-
123
- Where `sm` is just a regular media query string, i.e. `@media (max-width: 420px)`, that you can either generate with Truss's `breakpoints` config setting or just write your own by hand.
124
-
125
- This leveraging of the existing framework's selector support makes Truss's DSL shorter and simpler than Tachyons/Tailwinds, which have to repetively/pre-emptively mixin hover/media variations for each size into each abbreviation.
126
-
127
- ## Common CSS-in-JS Frameworks
128
-
129
- Truss generates a TypeScript/`Css.ts` DSL that, without any changes, can be used in MUI, Emotion, and Fela.
130
-
131
- See the `./integration-test` directory in Truss's repo for running unit tests for each of the these frameworks.
132
-
133
- ### Emotion
134
-
135
- ```tsx
136
- function FooComponent() {
137
- return <div css={Css.black.$}>root</div>;
138
- }
139
- ```
140
-
141
- ### Fela
142
-
143
- ```tsx
144
- function FooComponent() {
145
- return <div css={Css.black.$}>root</div>;
146
- }
147
- ```
148
-
149
- ```tsx
150
- function FooComponent() {
151
- const { css } = useFela();
152
- return <div className={css(Css.black.$)}>root</div>;
153
- }
154
- ```
155
-
156
- ### MUI
157
-
158
- ```tsx
159
- const useStyles = makeStyles({ root: Css.black.$ });
160
-
161
- function FooComponent() {
162
- const styles = useStyles();
163
- return <div className={styles.root}>root</div>;
164
- }
165
- ```
166
-
167
- ## XStyles / Xss Extension Contracts
168
-
169
- Truss liberally borrows the idea of type-checked "extension" CSS from the currently-unreleased Facebook XStyles library (at least in theory; I've only seen one or two slides for this feature of XStyles, but I'm pretty sure Truss is faithful re-implementation of it).
170
-
171
- As context, when developing components, you often end up with "properties that are okay for the caller to set" (i.e. that you as the component developer support the caller setting) and "properties that are _not_ okay for the caller to set" (i.e. because the component controls them).
172
-
173
- Basically, you want to allow the caller to customize _some_ styles of the component, typically things like color or margin or font size, but not give them blanket control of "here is a `className` prop, do whatever you want to my root element", which risks "radical"/open-ended customization that then you, as the component developer, don't know if you will/will not unintentionally break going forward.
174
-
175
- (I.e. see [Layout isolated components](https://visly.app/blog/layout-isolated-components) for a great write up of "parents control margin, components control padding".)
176
-
177
- With Truss, you can explicitly declare a contract of styles allowed to be set on your component, i.e.:
178
-
179
- ```tsx
180
- import { Css, Only, Xss } from "src/Css";
181
-
182
- // Declare the allowed/supported styles
183
- export type DatePickerXss = Xss<"marginLeft" | "marginRight">;
184
-
185
- // Update the props to accept an `xss` prop to accept the customizations
186
- export interface DatePickerProps<X> {
187
- date: Date;
188
- xss?: X;
189
- }
190
-
191
- // Use the `Only` type to ensure `xss` prop is a subset of DatePickerXss
192
- export function DatePicker<X extends Only<DatePickerXss, X>>(
193
- props: DatePickerProps<X>
194
- ) {
195
- const { date, xss } = props;
196
- // The component controls marginTop/marginBottom, and defers to the caller for marginLeft/marginRight
197
- return <div css={{ ...Css.my2.$, ...xss }}>{date}</div>;
198
- }
199
- ```
200
-
201
- Here we're allowing callers to set `marginLeft` or `marginRight`, i.e. this line will compile because `mx2` is statically typed as `{ marginLeft: number; marginRight: number }`, and so is a valid `xss` value:
202
-
203
- ```tsx
204
- <DatePicker xss={Css.mx2.$} date={...} />
205
- ```
206
-
207
- However, this line will not compile because `mt2` is statically typed as `{ marginTop: number }`, and `marginTop` is not allowed by `DatePickerXss`:
208
-
209
- ```tsx
210
- <DatePicker date={...} xss={Css.mt2.$} />
211
- ```
212
-
213
- The `Css` DSL also iteratively types itself, i.e. `Css.ml1.mr2.$` is still statically typed as `{ marginLeft: number; marginRight: number }`, instead of being based just on the last-used abbreviation.
214
-
215
- Note that Truss conventionally uses the `xss` prop name for "the component's allowed extension styles" as a play on Emotion's `css` prop, with the `x` representing the "extension" concept. But there is otherwise nothing special about the name of the `xss` prop; i.e. you could use `xstyles={...}` which I believe is what the Facebook XStyles library does, or your own convention.
216
-
217
- Also note that the XStyles/Xss feature is completely opt-in; you can use it if you want, or you can use Truss solely for the `Css.m2.black.$` abbreviations.
218
-
219
- ## Customization
220
-
221
- Truss supports several levels of customization:
222
-
223
- 1. Per-project fonts/colors/etc.
224
- 2. Per-project rule additions or changes
225
- 3. Forking
226
-
227
- ### Per-Project Fonts/Colors/Etc
228
-
229
- Each project that uses Truss gets a local `index.ts`, checked into its repo essentially as a config file, that defines in TypeScript the core settings, i.e.:
230
-
231
- ```typescript
232
- const increment = 8;
233
- const numberOfIncrements = 4;
234
-
235
- const palette = {
236
- Black: "#353535",
237
- MidGray: "#888888",
238
- LightGray: "#cecece",
239
- White: "#fcfcfa",
240
- Blue: "#526675",
241
- };
242
-
243
- const fonts = {
244
- f24: "24px",
245
- f18: "18px",
246
- f16: "16px",
247
- f14: "14px",
248
- f12: "12px",
249
- // Can also set multiple properties if necessary
250
- f10: { fontSize: "10px", fontWeight: 500 },
251
- };
252
-
253
- const breakpoints = { sm: 0, md: 600, lg: 960 };
254
-
255
- // ...rest of the config file...
256
- ```
257
-
258
- Projects should heavily customize these settings to match their project-specific design system, then run `npm run generate` to get an updated `Css.ts`, i.e. after adding `Green: "green"` as a color in `palette`, the `Css.ts` file will automatically have utility methods added like:
259
-
260
- ```typescript
261
- get green() { return this.add("color", "green"); }
262
- get bgGreen() { return this.add("backgroundColor", "green"); }
263
- get bGreen() { return this.add("borderColor", "green"); }
264
-
265
- ```
266
-
267
- ### Per-Project Utility Methods
268
-
269
- In the same `index.ts`, projects can add their own new abbreviations/utility methods:
270
-
271
- ```typescript
272
- const sections = {
273
- ourSection: () => [newMethod("someAbbreviation", { color: "#000000" })],
274
- };
275
- ```
276
-
277
- Will result in `Css.ts` having a line that looks like:
278
-
279
- ```typescript
280
- // ourSection
281
- get someAbbreviation() { return this.add("color", "#000000"); }
282
- ```
283
-
284
- Which can then be used as `Css.m2.someAbbreviation.$`.
285
-
286
- Besides adding one-off additional methods, if your project wants to replace a whole section of Truss's out-of-the-box methods, you can do this via:
287
-
288
- ```typescript
289
- const sections = {
290
- // Prefer app-specific border radiuses
291
- borderRadius: () => newMethodsForProp("borderRadius", {
292
- br4: "4px",
293
- br8: "8px",
294
- br16: "16px",
295
- }),
296
- };
297
- ```
298
-
299
- Where `borderRadius` matches the name of the section in Truss's [sections](https://github.com/homebound-team/truss/tree/main/src/sections) directory (which generally matches Tachyon's organization).
300
-
301
- ### Forking
302
-
303
- At the end of the day, Truss is small and hackable such that forking it to make the abbreviations "strict Tachyons" or "strict Tailwinds" or "whatever best fits your project/conventions/styles" should be easy and is kosher/encouraged.
304
-
305
- The core Truss feature of "make a TypeScript DSL with a bunch of abbreviations" is also basically done, so it's unlikely you will miss out on some future/forthcoming amazing features by forking.
306
-
307
- And, even if so, the coupling between Truss and your application code is limited to the `Css.abbreviations.$` lines that should be extremely stable even if/as the core of Truss evolves.
308
-
309
- ## Why This Approach?
310
-
311
- Truss's approach is "Tachyons-ish" (or Tailwinds-ish), insofar as having short/cute utility class definitions.
312
-
313
- However, the abbreviations are runtime resolved to object-style CSS-in-JS rules that are then injected into the DOM by Emotion (or your CSS-in-JS framework of choice), as if the rules had originally been written long-form.
314
-
315
- The benefits of this approach are:
316
-
317
- - We get the brevity + "inline-ness" of Tachyons/Tailwinds.
318
-
319
- - It delivers critical CSS, i.e. we don't need the large static TW/Tachyons CSS files.
320
-
321
- (My reading of projects like [tachyons-styled-react](https://github.com/tachyons-css/tachyons-styled-react), from the creator of Tachyons, is that critical-ness is still important goal/improvement even for static-utility-class approaches like Tachyons.)
322
-
323
- - Psuedo-selectors/breakpoints go through Emotion/the CSS-in-JS framework, which is simpler, more powerful, and reduces method/abbreviation bloat.
324
-
325
- I.e. we don't need to suffix `-nl` for "not large" onto every single abbreviation.
326
-
327
- - "Regular Emotion/CSS-in-JS" is easily/inherently available as an escape hatch for places where utility classes don't make sense.
328
-
329
- It's very likely you'll need "not utility" styles at some point in your project, and because Truss's DSL is already going through Emotion/CSS-in-JS anyway, it means your one-off "not utility" styles will use the same/consistent CSS-in-JS output/generation pipeline.
330
-
331
- This means you don't end up with mixed idioms of `className="mx2 black"` for 90% of your styles, but then "something different" like `css={...}` for the last 10%.
332
-
333
- - Projects can easily tweak their preferred styles/abbreviations.
334
-
335
- Granted, this is very similar in spirit to Tailwinds customization, but for Truss, the config process is "just change some TypeScript code and run `generate`", and doesn't involve any changes to your build/webpack/PostCSS/etc. setup.
336
-
337
- ## Themes
338
-
339
- The word "theme" can mean either "static themes" (i.e. using the same consistent colors/fonts throughout your app, but the values themselves never really change) or "dynamic themes" (i.e. the user changing from light mode to dark mode).
340
-
341
- For static themes, Truss's `index.ts`/`palette.ts` are specifically setup to centrally define your application's fonts, colors, etc. (see the "Configuration" section), so that they are consistently applied through your application.
342
-
343
- For dynamic themes, Truss doesn't have any features dedicated explicitly to support them, but you can easily use CSS variables in your methods, i.e.:
344
-
345
- ```typescript
346
- const palette = {
347
- Primary: "var(--primary)",
348
- Secondary: "var(--secondary)",
349
- };
350
- ```
351
-
352
- And then have your application handle setting the `--primary` / `--secondary` values as appropriate (i.e. by importing a `dark-mode.css` or `light-mode.css` which define the respective CSS variable values).
353
-
354
- ## Inspiration
355
-
356
- Several libraries influenced Truss, specifically:
357
-
358
- - [Typed Tailwinds](https://typed.tw) and [babel-plugin-tailwind-components](https://github.com/bradlc/babel-plugin-tailwind-components) are both "type-safe TypeScript utility-css DSLs".
359
-
360
- In particular, the babel-plugin-tailwind-components insight of "if you just make `csstype`-compliant object literals, you can bring them to whatever CSS-in-JS framework you want" was a very useful/inspirational insight.
361
-
362
- The main difference between Truss and both Typed.tw and babel-plugin-tailwind-components is that Truss doesn't try to "perfectly match Tachyons or Tailwinds" (see "Why This Approach?"). Specifically, both projects assume that a `tachyons.css` or `tailwinds.css` file is the source-of-truth for your project's rules (and so parse/generate the TypeScript code from that CSS file); however, with Truss your source-of-truth is Truss's out-of-the-box TypeScript rules + whatever customizations you make in your project's `truss/index.ts` file (so rules are defined directly in TypeScript).
363
-
364
- - Facebook's XStyles for the "typed extension" idea
365
-
366
- ## Todo
367
-
368
- - `npx -p @homebound/truss init` type experience for setup - inspired by [Storybook](https://storybook.js.org/docs/guides/quick-start-guide/)
369
- - Support `number[]` increments as config
370
- - Babel plugin that evaluates `Css...$` expressions at build-time
371
- - I.e. see babel-plugin-tailwind-components and [typed.tw's implementation](https://github.com/dvkndn/typed.tw/tree/master/webpack-loader)
372
- - Server-side generation; in theory this should just work?
373
- - Add [goober](https://github.com/cristianbote/goober#css-prop) example
@@ -1 +0,0 @@
1
- {"version":3,"file":"breakpoints.d.ts","sourceRoot":"","sources":["../src/breakpoints.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,wBAAgB,eAAe,CAC7B,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAClC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAiDxB"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"breakpoints.test.d.ts","sourceRoot":"","sources":["../src/breakpoints.test.ts"],"names":[],"mappings":""}
@@ -1 +0,0 @@
1
- {"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../src/config.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AACrC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAE/B;;;;GAIG;AACH,oBAAY,UAAU,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,UAAU,CAAC,CAAC;AAE7D;;;;;;;;;;GAUG;AACH,MAAM,WAAW,MAAM;IACrB,4CAA4C;IAC5C,UAAU,EAAE,MAAM,CAAC;IAEnB;;;;;;OAMG;IACH,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAEhC;;;;OAIG;IACH,KAAK,EAAE,UAAU,CAAC;IAElB,+CAA+C;IAC/C,SAAS,EAAE,MAAM,CAAC;IAElB,6EAA6E;IAC7E,kBAAkB,EAAE,MAAM,CAAC;IAE3B,iEAAiE;IACjE,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,kHAAkH;IAClH,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,MAAM,UAAU,CAAC,CAAC,CAAC;IAEtD,8CAA8C;IAC9C,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAErC;;;;;OAKG;IACH,cAAc,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC;IAErC;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC;IAEpB,yEAAyE;IACzE,MAAM,CAAC,EAAE,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;CAC/B;AAED;;;;;;;;;;;;;;;GAeG;AACH,oBAAY,eAAe,GAAG,CAAC,MAAM,EAAE,MAAM,KAAK,aAAa,EAAE,CAAC;AAElE;;GAEG;AACH,oBAAY,WAAW,GAAG,MAAM,CAAC;AAEjC;;;;;;GAMG;AACH,oBAAY,aAAa,GAAG,MAAM,CAAC;AAEnC,yDAAyD;AACzD,oBAAY,WAAW,GAAG,MAAM,CAAC;AAEjC,mDAAmD;AACnD,oBAAY,QAAQ,GAAG,MAAM,CAAC,WAAW,EAAE,eAAe,CAAC,CAAC;AAE5D,kFAAkF;AAClF,oBAAY,OAAO,GAAG,MAAM,CAAC,WAAW,EAAE,WAAW,EAAE,CAAC,CAAC"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"generate.d.ts","sourceRoot":"","sources":["../src/generate.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAIrC,OAAO,EAAE,MAAM,EAAwC,MAAM,UAAU,CAAC;AAKxE,eAAO,MAAM,kBAAkB,EAAE,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,MAAM,UAAU,CAAC,CAStE,CAAC;AAEF,wBAAsB,QAAQ,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAI5D"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EACL,iBAAiB,EACjB,SAAS,EACT,iBAAiB,EACjB,2BAA2B,EAC3B,mBAAmB,EACnB,cAAc,EACd,wBAAwB,EACxB,SAAS,GACV,MAAM,WAAW,CAAC"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"methods.d.ts","sourceRoot":"","sources":["../src/methods.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC;AACrE,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAErC,oBAAY,IAAI,GAAG,MAAM,UAAU,CAAC;AAEpC;;;GAGG;AACH,wBAAgB,SAAS,CAAC,IAAI,EAAE,WAAW,EAAE,IAAI,EAAE,UAAU,GAAG,aAAa,CAI5E;AAED;;;;;GAKG;AACH,wBAAgB,cAAc,CAC5B,IAAI,EAAE,WAAW,EACjB,IAAI,EAAE,MAAM,UAAU,GACrB,aAAa,CAEf;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,iBAAiB,CAAC,CAAC,SAAS,IAAI,EAC9C,IAAI,EAAE,CAAC,EACP,IAAI,EAAE,MAAM,CAAC,WAAW,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC,EACxC,QAAQ,GAAE,MAAM,GAAG,IAAW,EAC9B,SAAS,GAAE,OAAe,GACzB,aAAa,EAAE,CASjB;AAED;;;GAGG;AACH,wBAAgB,iBAAiB,CAAC,OAAO,EAAE,OAAO,GAAG,aAAa,EAAE,CAMnE;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,wBAAwB,CACtC,IAAI,EAAE,WAAW,EACjB,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAC3B,aAAa,CAIf;AAID,oBAAY,SAAS,GAAG,CAAC,MAAM,EAAE,IAAI,GAAG,MAAM,EAAE,CAAC,CAAC;AAElD;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,mBAAmB,CACjC,MAAM,EAAE,MAAM,EACd,IAAI,EAAE,WAAW,EACjB,IAAI,EAAE,IAAI,GAAG,MAAM,EAAE,GACpB,aAAa,EAAE,CAsBjB;AAED,iHAAiH;AACjH,wBAAgB,2BAA2B,CACzC,IAAI,EAAE,WAAW,EACjB,kBAAkB,EAAE,MAAM,GACzB,aAAa,EAAE,CAIjB;AAED,wBAAgB,WAAW,CAAC,IAAI,EAAE,WAAW,GAAG,WAAW,CAE1D;AAED,eAAO,MAAM,MAAM,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,EAAoC,CAAC"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"methods.test.d.ts","sourceRoot":"","sources":["../src/methods.test.ts"],"names":[],"mappings":""}
@@ -1,3 +0,0 @@
1
- import { CreateMethodsFn } from "../config";
2
- export declare const border: CreateMethodsFn;
3
- //# sourceMappingURL=border.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"border.d.ts","sourceRoot":"","sources":["../../src/sections/border.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAU5C,eAAO,MAAM,MAAM,EAAE,eAKpB,CAAC"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"border.js","sourceRoot":"","sources":["../../src/sections/border.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA,sCAAuC;AAGvC,IAAM,UAAU,GAAiC;IAC/C,CAAC,IAAI,EAAE,CAAC,aAAa,EAAE,aAAa,CAAC,CAAC;IACtC,CAAC,IAAI,EAAE,CAAC,gBAAgB,EAAE,gBAAgB,CAAC,CAAC;IAC5C,CAAC,IAAI,EAAE,CAAC,kBAAkB,EAAE,kBAAkB,CAAC,CAAC;IAChD,CAAC,IAAI,EAAE,CAAC,mBAAmB,EAAE,mBAAmB,CAAC,CAAC;IAClD,CAAC,IAAI,EAAE,CAAC,iBAAiB,EAAE,iBAAiB,CAAC,CAAC;CAC/C,CAAC;AAEK,IAAM,MAAM,GAAoB,cAAM,gBACxC,UAAU,CAAC,GAAG,CAAC,UAAC,EAAsB;;QAAtB,KAAA,aAAsB,EAArB,IAAI,QAAA,EAAE,KAAA,gBAAc,EAAb,KAAK,QAAA,EAAE,KAAK,QAAA;IACrC,OAAO,mBAAS,CAAC,IAAI,YAAI,GAAC,KAAK,IAAG,OAAO,EAAE,GAAC,KAAK,IAAG,KAAK,MAAG,CAAC;AAC/D,CAAC,CAAC;IACF,mBAAS,CAAC,IAAI,EAAE,EAAE,WAAW,EAAE,MAAM,EAAE,WAAW,EAAE,GAAG,EAAE,CAAC;IAJf,CAK5C,CAAC;AALW,QAAA,MAAM,UAKjB"}
@@ -1,3 +0,0 @@
1
- import { CreateMethodsFn } from "../config";
2
- export declare const borderColor: CreateMethodsFn;
3
- //# sourceMappingURL=borderColors.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"borderColors.d.ts","sourceRoot":"","sources":["../../src/sections/borderColors.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAG5C,eAAO,MAAM,WAAW,EAAE,eAKzB,CAAC"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"borderColors.js","sourceRoot":"","sources":["../../src/sections/borderColors.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AACA,sCAA+C;AAExC,IAAM,WAAW,GAAoB,UAAC,EAAW;QAAT,OAAO,aAAA;IACpD,IAAM,IAAI,GAAG,MAAM,CAAC,WAAW,CAC7B,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,UAAC,EAAY;YAAZ,KAAA,aAAY,EAAX,GAAG,QAAA,EAAE,KAAK,QAAA;QAAM,OAAA,CAAC,MAAI,GAAK,EAAE,KAAK,CAAC;IAAlB,CAAkB,CAAC,CAClE,CAAC;IACF,OAAO,2BAAiB,CAAC,aAAa,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;AACtD,CAAC,CAAC;AALW,QAAA,WAAW,eAKtB"}
@@ -1,3 +0,0 @@
1
- import { CreateMethodsFn } from "../config";
2
- export declare const borderRadius: CreateMethodsFn;
3
- //# sourceMappingURL=borderRadius.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"borderRadius.d.ts","sourceRoot":"","sources":["../../src/sections/borderRadius.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAG5C,eAAO,MAAM,YAAY,EAAE,eASvB,CAAC"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"borderRadius.js","sourceRoot":"","sources":["../../src/sections/borderRadius.ts"],"names":[],"mappings":";;;AACA,sCAA+C;AAExC,IAAM,YAAY,GAAoB;IAC3C,OAAA,2BAAiB,CAAC,cAAc,EAAE;QAChC,GAAG,EAAE,GAAG;QACR,GAAG,EAAE,SAAS;QACd,GAAG,EAAE,QAAQ;QACb,GAAG,EAAE,OAAO;QACZ,GAAG,EAAE,MAAM;QACX,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,QAAQ;KACjB,CAAC;AARF,CAQE,CAAC;AATQ,QAAA,YAAY,gBASpB"}
@@ -1,3 +0,0 @@
1
- import { CreateMethodsFn } from "../config";
2
- export declare const borderStyle: CreateMethodsFn;
3
- //# sourceMappingURL=borderStyles.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"borderStyles.d.ts","sourceRoot":"","sources":["../../src/sections/borderStyles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAK5C,eAAO,MAAM,WAAW,EAAE,eAUvB,CAAC"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"borderStyles.js","sourceRoot":"","sources":["../../src/sections/borderStyles.ts"],"names":[],"mappings":";;;AACA,sCAA+C;AAE/C,0CAA0C;AAC1C,iDAAiD;AAC1C,IAAM,WAAW,GAAoB;IAC1C,OAAA,2BAAiB,CACf,aAAa,EACb;QACE,QAAQ,EAAE,QAAQ;QAClB,QAAQ,EAAE,QAAQ;QAClB,MAAM,EAAE,MAAM;QACd,OAAO,EAAE,OAAO;KACjB,EACD,IAAI,CACL;AATD,CASC,CAAC;AAVS,QAAA,WAAW,eAUpB"}
@@ -1,3 +0,0 @@
1
- import { CreateMethodsFn } from "../config";
2
- export declare const borderWidth: CreateMethodsFn;
3
- //# sourceMappingURL=borderWidths.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"borderWidths.d.ts","sourceRoot":"","sources":["../../src/sections/borderWidths.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAI5C,eAAO,MAAM,WAAW,EAAE,eAQvB,CAAC"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"borderWidths.js","sourceRoot":"","sources":["../../src/sections/borderWidths.ts"],"names":[],"mappings":";;;AACA,sCAA+C;AAE/C,0CAA0C;AACnC,IAAM,WAAW,GAAoB;IAC1C,OAAA,2BAAiB,CACf,aAAa,EACb;QACE,GAAG,EAAE,KAAK;QACV,GAAG,EAAE,KAAK;KACX,EACD,IAAI,CACL;AAPD,CAOC,CAAC;AARS,QAAA,WAAW,eAQpB"}
@@ -1,3 +0,0 @@
1
- import { CreateMethodsFn } from "../config";
2
- export declare const boxShadow: CreateMethodsFn;
3
- //# sourceMappingURL=boxShadow.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"boxShadow.d.ts","sourceRoot":"","sources":["../../src/sections/boxShadow.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAE5C,eAAO,MAAM,SAAS,EAAE,eAEvB,CAAC"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"boxShadow.js","sourceRoot":"","sources":["../../src/sections/boxShadow.ts"],"names":[],"mappings":";;;AAAA,sCAAuC;AAGhC,IAAM,SAAS,GAAoB,cAAM,OAAA;IAC9C,mBAAS,CAAC,YAAY,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,CAAC;CAC/C,EAF+C,CAE/C,CAAC;AAFW,QAAA,SAAS,aAEpB"}
@@ -1,3 +0,0 @@
1
- import { CreateMethodsFn } from "../config";
2
- export declare const coordinates: CreateMethodsFn;
3
- //# sourceMappingURL=coordinates.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"coordinates.d.ts","sourceRoot":"","sources":["../../src/sections/coordinates.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAI5C,eAAO,MAAM,WAAW,EAAE,eAGtB,CAAC"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"coordinates.js","sourceRoot":"","sources":["../../src/sections/coordinates.ts"],"names":[],"mappings":";;;AAAA,sCAAiD;AAGjD,IAAM,UAAU,GAAG,CAAC,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,CAAU,CAAC;AAExD,IAAM,WAAW,GAAoB,UAAC,MAAM;IACjD,OAAA,UAAU,CAAC,OAAO,CAAC,UAAC,CAAC;QACnB,OAAO,6BAAmB,CAAC,MAAM,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;IAC3C,CAAC,CAAC;AAFF,CAEE,CAAC;AAHQ,QAAA,WAAW,eAGnB"}
@@ -1,3 +0,0 @@
1
- import { CreateMethodsFn } from "../config";
2
- export declare const cursor: CreateMethodsFn;
3
- //# sourceMappingURL=cursor.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"cursor.d.ts","sourceRoot":"","sources":["../../src/sections/cursor.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAE5C,eAAO,MAAM,MAAM,EAAE,eAKpB,CAAC"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"cursor.js","sourceRoot":"","sources":["../../src/sections/cursor.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA,sCAA0D;AAGnD,IAAM,MAAM,GAAoB,cAAM,gBACxC,2BAAiB,CAAC,QAAQ,EAAE;IAC7B,aAAa,EAAE,SAAS;IACxB,gBAAgB,EAAE,aAAa;CAChC,CAAC,GAJyC,CAK5C,CAAC;AALW,QAAA,MAAM,UAKjB"}
@@ -1,3 +0,0 @@
1
- import { CreateMethodsFn } from "../config";
2
- export declare const display: CreateMethodsFn;
3
- //# sourceMappingURL=display.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"display.d.ts","sourceRoot":"","sources":["../../src/sections/display.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAI5C,eAAO,MAAM,OAAO,EAAE,eAgBlB,CAAC"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"display.js","sourceRoot":"","sources":["../../src/sections/display.ts"],"names":[],"mappings":";;;AACA,sCAA+C;AAE/C,wEAAwE;AACjE,IAAM,OAAO,GAAoB;IACtC,OAAA,2BAAiB,CAAC,SAAS,EAAE;QAC3B,EAAE,EAAE,MAAM;QACV,EAAE,EAAE,OAAO;QACX,GAAG,EAAE,cAAc;QACnB,GAAG,EAAE,cAAc;QACnB,EAAE,EAAE,OAAO;QACX,GAAG,EAAE,YAAY;QACjB,KAAK,EAAE,WAAW;QAClB,QAAQ,EAAE,cAAc;QACxB,aAAa,EAAE,oBAAoB;QACnC,QAAQ;QACR,EAAE,EAAE,MAAM;QACV,GAAG,EAAE,aAAa;QAClB,EAAE,EAAE,MAAM;QACV,GAAG,EAAE,aAAa;KACnB,CAAC;AAfF,CAeE,CAAC;AAhBQ,QAAA,OAAO,WAgBf"}
@@ -1,3 +0,0 @@
1
- import { CreateMethodsFn } from "../config";
2
- export declare const flexbox: CreateMethodsFn;
3
- //# sourceMappingURL=flexbox.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"flexbox.d.ts","sourceRoot":"","sources":["../../src/sections/flexbox.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAU5C,eAAO,MAAM,OAAO,EAAE,eAmFrB,CAAC"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"flexbox.js","sourceRoot":"","sources":["../../src/sections/flexbox.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AACA,sCAA+C;AAE/C,4CAA4C;AAC5C,4EAA4E;AAC5E,EAAE;AACF,gFAAgF;AAChF,gFAAgF;AAChF,+EAA+E;AAC/E,oDAAoD;AAC7C,IAAM,OAAO,GAAoB,cAAM,gBACzC,2BAAiB,CAClB,MAAM,EACN;IACE,EAAE,EAAE,SAAS;IACb,EAAE,EAAE,MAAM;IACV,EAAE,EAAE,MAAM;IACV,EAAE,EAAE,GAAG;IACP,EAAE,EAAE,GAAG;IACP,EAAE,EAAE,GAAG;IACP,EAAE,EAAE,GAAG;IACP,EAAE,EAAE,GAAG;CACR,EACD,GAAG,CACJ,EACE,2BAAiB,CAClB,gBAAgB,EAChB;IACE,IAAI,EAAE,YAAY;IAClB,IAAI,EAAE,UAAU;IAChB,GAAG,EAAE,QAAQ;IACb,IAAI,EAAE,eAAe;IACrB,IAAI,EAAE,cAAc;IACpB,IAAI,EAAE,cAAc;CACrB,EACD,IAAI,CACL,EAEE,2BAAiB,CAClB,WAAW,EACX;IACE,IAAI,EAAE,YAAY;IAClB,IAAI,EAAE,UAAU;IAChB,GAAG,EAAE,QAAQ;IACb,GAAG,EAAE,UAAU;IACf,SAAS,EAAE,SAAS;CACrB,EACD,IAAI,CACL,EAEE,2BAAiB,CAClB,YAAY,EACZ;IACE,IAAI,EAAE,YAAY;IAClB,IAAI,EAAE,UAAU;IAChB,GAAG,EAAE,QAAQ;IACb,GAAG,EAAE,UAAU;IACf,GAAG,EAAE,SAAS;CACf,EACD,IAAI,CACL,EAEE,2BAAiB,CAClB,WAAW;AACX,kEAAkE;AAClE;IACE,GAAG,EAAE,MAAM;IACX,GAAG,EAAE,KAAK;IACV,GAAG,EAAE,YAAY;IACjB,GAAG,EAAE,KAAK;IACV,GAAG,EAAE,KAAK;IACV,GAAG,EAAE,YAAY;IACjB,GAAG,EAAE,YAAY;IACjB,GAAG,EAAE,OAAO;CACb,EACD,IAAI,CACL,EAEE,2BAAiB,CAAC,MAAM,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,CAAC,EAEjE,2BAAiB,CAAC,UAAU,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,CAAC,EACjD,2BAAiB,CAAC,YAAY,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,CAAC,EAEnD,2BAAiB,CAClB,eAAe,EACf;IACE,GAAG,EAAE,KAAK;IACV,IAAI,EAAE,aAAa;IACnB,GAAG,EAAE,QAAQ;IACb,IAAI,EAAE,gBAAgB;CACvB,EACD,IAAI,CACL,GAlF2C,CAmF7C,CAAC;AAnFW,QAAA,OAAO,WAmFlB"}
@@ -1,3 +0,0 @@
1
- import { CreateMethodsFn } from "../config";
2
- export declare const float: CreateMethodsFn;
3
- //# sourceMappingURL=floats.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"floats.d.ts","sourceRoot":"","sources":["../../src/sections/floats.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAI5C,eAAO,MAAM,KAAK,EAAE,eAQjB,CAAC"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"floats.js","sourceRoot":"","sources":["../../src/sections/floats.ts"],"names":[],"mappings":";;;AACA,sCAA+C;AAE/C,uEAAuE;AAChE,IAAM,KAAK,GAAoB;IACpC,OAAA,2BAAiB,CACf,OAAO,EACP;QACE,EAAE,EAAE,MAAM;QACV,EAAE,EAAE,OAAO;KACZ,EACD,OAAO,CACR;AAPD,CAOC,CAAC;AARS,QAAA,KAAK,SAQd"}
@@ -1,3 +0,0 @@
1
- import { CreateMethodsFn } from "../config";
2
- export declare const fontWeight: CreateMethodsFn;
3
- //# sourceMappingURL=fontWeight.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"fontWeight.d.ts","sourceRoot":"","sources":["../../src/sections/fontWeight.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAG5C,eAAO,MAAM,UAAU,EAAE,eAiBtB,CAAC"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"fontWeight.js","sourceRoot":"","sources":["../../src/sections/fontWeight.ts"],"names":[],"mappings":";;;AACA,sCAA+C;AAExC,IAAM,UAAU,GAAoB;IACzC,OAAA,2BAAiB,CACf,YAAY,EACZ;QACE,MAAM,EAAE,QAAQ;QAChB,CAAC,EAAE,MAAM;QACT,GAAG,EAAE,GAAG;QACR,GAAG,EAAE,GAAG;QACR,GAAG,EAAE,GAAG;QACR,GAAG,EAAE,GAAG;QACR,GAAG,EAAE,GAAG;QACR,GAAG,EAAE,GAAG;QACR,GAAG,EAAE,GAAG;QACR,GAAG,EAAE,GAAG;QACR,GAAG,EAAE,GAAG;KACT,EACD,IAAI,CACL;AAhBD,CAgBC,CAAC;AAjBS,QAAA,UAAU,cAiBnB"}
@@ -1,3 +0,0 @@
1
- import { CreateMethodsFn } from "../config";
2
- export declare const grid: CreateMethodsFn;
3
- //# sourceMappingURL=grid.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"grid.d.ts","sourceRoot":"","sources":["../../src/sections/grid.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAO5C,eAAO,MAAM,IAAI,EAAE,eAQlB,CAAC"}
@@ -1,32 +0,0 @@
1
- "use strict";
2
- var __read = (this && this.__read) || function (o, n) {
3
- var m = typeof Symbol === "function" && o[Symbol.iterator];
4
- if (!m) return o;
5
- var i = m.call(o), r, ar = [], e;
6
- try {
7
- while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
8
- }
9
- catch (error) { e = { error: error }; }
10
- finally {
11
- try {
12
- if (r && !r.done && (m = i["return"])) m.call(i);
13
- }
14
- finally { if (e) throw e.error; }
15
- }
16
- return ar;
17
- };
18
- var __spread = (this && this.__spread) || function () {
19
- for (var ar = [], i = 0; i < arguments.length; i++) ar = ar.concat(__read(arguments[i]));
20
- return ar;
21
- };
22
- Object.defineProperty(exports, "__esModule", { value: true });
23
- exports.grid = void 0;
24
- var methods_1 = require("../methods");
25
- var grid = function (config) { return __spread([
26
- methods_1.newParamMethod("gtc", "gridTemplateColumns"),
27
- methods_1.newParamMethod("gtr", "gridTemplateRows"),
28
- methods_1.newParamMethod("gr", "gridRow"),
29
- methods_1.newParamMethod("gc", "gridColumn")
30
- ], methods_1.newIncrementMethods(config, "gap", "gap"), methods_1.newIncrementMethods(config, "rg", "rowGap"), methods_1.newIncrementMethods(config, "cg", "columnGap")); };
31
- exports.grid = grid;
32
- //# sourceMappingURL=grid.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"grid.js","sourceRoot":"","sources":["../../src/sections/grid.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AACA,sCAIoB;AAEb,IAAM,IAAI,GAAoB,UAAC,MAAM,IAAK;IAC/C,wBAAc,CAAC,KAAK,EAAE,qBAAqB,CAAC;IAC5C,wBAAc,CAAC,KAAK,EAAE,kBAAkB,CAAC;IACzC,wBAAc,CAAC,IAAI,EAAE,SAAS,CAAC;IAC/B,wBAAc,CAAC,IAAI,EAAE,YAAY,CAAC;GAC/B,6BAAmB,CAAC,MAAM,EAAE,KAAK,EAAE,KAAK,CAAC,EACzC,6BAAmB,CAAC,MAAM,EAAE,IAAI,EAAE,QAAQ,CAAC,EAC3C,6BAAmB,CAAC,MAAM,EAAE,IAAI,EAAE,WAAW,CAAC,GAPF,CAQhD,CAAC;AARW,QAAA,IAAI,QAQf"}
@@ -1,3 +0,0 @@
1
- import { CreateMethodsFn } from "../config";
2
- export declare const height: CreateMethodsFn;
3
- //# sourceMappingURL=heights.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"heights.d.ts","sourceRoot":"","sources":["../../src/sections/heights.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAG5C,eAAO,MAAM,MAAM,EAAE,eA+CpB,CAAC"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"heights.js","sourceRoot":"","sources":["../../src/sections/heights.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AACA,sCAAoE;AAE7D,IAAM,MAAM,GAAoB,UAAC,MAAM,IAAK,gBAI9C,6BAAmB,CAAC,MAAM,EAAE,GAAG,EAAE,QAAQ,CAAC,EAE1C,2BAAiB,CAClB,QAAQ,EACR;IACE,GAAG,EAAE,KAAK;IACV,GAAG,EAAE,KAAK;IACV,GAAG,EAAE,KAAK;IACV,IAAI,EAAE,MAAM;IACZ,IAAI,EAAE,MAAM;IACZ,IAAI,EAAE,MAAM;IACZ,IAAI,EAAE,MAAM;IACZ,KAAK,EAAE,OAAO;CACf,EACD,IAAI,CACL,EAEE,2BAAiB,CAClB,WAAW,EACX;IACE,GAAG,EAAE,CAAC;IACN,IAAI,EAAE,KAAK;IACX,IAAI,EAAE,KAAK;IACX,IAAI,EAAE,KAAK;IACX,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,OAAO;CAChB,EACD,IAAI,CACL;IACD,iEAAkE;GAE/D,2BAAiB,CAClB,WAAW,EACX;IACE,KAAK,EAAE,GAAG;IACV,MAAM,EAAE,KAAK;IACb,MAAM,EAAE,KAAK;IACb,MAAM,EAAE,KAAK;IACb,OAAO,EAAE,MAAM;CAChB,EACD,MAAM,CACP;IACD,mEAAoE;IA9CnB,CA+ClD,CAAC;AA/CW,QAAA,MAAM,UA+CjB"}