Phantom Types TODO List

[rtfeldman]

This issue will help coordinate efforts on #375 (the phantom-types branch)

If you'd like to pitch in, awesome! Here are some guidelines on how to contribute: https://github.com/rtfeldman/elm-css/wiki/Phantom-Types:-Contributing

If you'd like to grab one (or a related set) of these, comment below and I'll add your name! This way we can avoid stepping on each others' toes.

Grabbed

1. width @edkv
2. height @edkv
3. minWidth @edkv
4. minHeight @edkv
5. maxWidth @edkv
6. maxHeight @edkv
7. textShadow @brianvanburken
8. textShadow2 @brianvanburken
9. textShadow3 @brianvanburken
10. textShadow4 @brianvanburken

If you'd like to grab something, please leave a comment below!

Available to convert

1. blink
2. bottom
3. boxShadow2
4. boxShadow3
5. boxShadow4
6. boxShadow5
7. boxShadow6
8. breakWord
9. checked
10. circle
11. clip
12. column
13. columnReverse
14. content
15. currentColor
16. cursorAlias
17. decimal
18. decimalLeadingZero
19. deg
20. dir
21. disabled
22. disc
23. eachLine
24. ellipsis
25. empty
26. enabled
27. featureOff
28. featureOn
29. featureTag
30. featureTag2
31. fillAvailable
32. first
33. firstChild
34. firstLetter
35. firstLine
36. firstOfType
37. fitContent
38. flat
39. flex
40. flex2
41. flex3
42. flexBasis
43. flexDirection
44. flexFlow1
45. flexFlow2
46. flexGrow
47. flexShrink
48. flexWrap
49. focus
50. fullscreen
51. grad
52. hanging
53. horizontal
54. hover
55. important
56. indeterminate
57. inlineListItem
58. inlineTable
59. inside
60. invalid
61. justifyAll
62. justifyContent
63. lang
64. lastChild
65. lastOfType
66. letterSpacing
67. lineHeight
68. lineThrough
69. linearGradient
70. linearGradient2
71. link
72. listItem
73. listStylePosition
74. listStyleType
75. lowerAlpha
76. lowerGreek
77. lowerLatin
78. lowerRoman
79. manipulation
80. maxContent
81. minContent
82. nthChild
83. nthLastChild
84. nthLastOfType
85. nthOfType
86. onlyChild
87. onlyOfType
88. optional
89. outOfRange
90. outline
91. outline3
92. outlineColor
93. outlineOffset
94. outlineStyle
95. outlineWidth
96. outside
97. overline
98. panDown
99. panLeft
100. panRight
101. panUp
102. panX
103. panY
104. pinchZoom
105. preserve3d
106. property
107. qt
108. rad
109. readWrite
110. required
111. resize
112. root
113. row
114. rowReverse
115. scope
116. screenBlendMode
117. selection
118. spaceAround
119. spaceBetween
120. stroke
121. src_
122. target
123. textAlignLast
124. textEmphasisColor
125. textIndent
126. textIndent2
127. textIndent3
128. textOverflow
129. thick
130. thin
131. top
132. touchAction
133. transformBox
134. transformStyle
135. transparent
136. true
137. turn
138. upperAlpha
139. upperLatin
140. upperRoman
141. valid
142. vertical
143. viewBox
144. visited
145. wrap
146. wrapReverse

Done!

1. absolute @rtfeldman
2. active @rtfeldman
3. after @rtfeldman
4. alias @rtfeldman
5. alignItems @rtfeldman
6. alignSelf @rtfeldman
7. all @rtfeldman
8. allPetiteCaps @rtfeldman
9. allScroll @rtfeldman
10. allSmallCaps @rtfeldman
11. arabicIndic @rtfeldman
12. armenian @rtfeldman
13. auto @rtfeldman
14. backgroundAttachment @rtfeldman
15. backgroundAttachments @rtfeldman
16. backgroundBlendMode @rtfeldman
17. backgroundBlendModes @rtfeldman
18. backgroundClip @rtfeldman
19. backgroundClips @rtfeldman
20. backgroundColor @rtfeldman
21. backgroundOrigin @rtfeldman
22. backgroundOrigins @rtfeldman
23. baseline @rtfeldman
24. batch @rtfeldman
25. before @rtfeldman
26. bengali @rtfeldman
27. block @rtfeldman
28. bold @rtfeldman
29. bolder @rtfeldman
30. borderBox @rtfeldman
31. boxShadow @rtfeldman
32. cell @rtfeldman
33. center @rtfeldman
34. ch @rtfeldman
35. cjkEarthlyBranch @rtfeldman
36. cjkHeavenlyStem @rtfeldman
37. cm @rtfeldman
38. colResize @rtfeldman
39. color @rtfeldman
40. colorBurn @rtfeldman
41. colorDodge @rtfeldman
42. color_ @rtfeldman
43. commonLigatures @rtfeldman
44. contentBox @rtfeldman
45. contextMenu @rtfeldman
46. contextual @rtfeldman
47. copy @rtfeldman
48. crosshair @rtfeldman
49. cursive @rtfeldman
50. cursor @rtfeldman
51. darken @rtfeldman
52. dashed @rtfeldman
53. default @rtfeldman
54. defaultBoxShadow @rtfeldman
55. devanagari @rtfeldman
56. diagonalFractions @rtfeldman
57. difference @rtfeldman
58. discretionaryLigatures @rtfeldman
59. display @rtfeldman
60. displayFlex @rtfeldman
61. dotted @rtfeldman
62. double @rtfeldman
63. eResize @rtfeldman
64. em @rtfeldman
65. end @rtfeldman
66. ewResize @rtfeldman
67. ex @rtfeldman
68. exclusion @rtfeldman
69. fantasy @rtfeldman
70. firstBaseline @rtfeldman
71. fixed @rtfeldman
72. flexEnd @rtfeldman
73. flexStart @rtfeldman
74. fontFamilies @rtfeldman
75. fontFamily @rtfeldman
76. fontSize @rtfeldman
77. fontStyle @rtfeldman
78. fontVariantCaps @rtfeldman
79. fontVariantLigatures @rtfeldman
80. fontVariantNumeric @rtfeldman
81. fontWeight @rtfeldman
82. georgian @rtfeldman
83. grab @rtfeldman
84. grabbing @rtfeldman
85. grid @rtfeldman
86. groove @rtfeldman
87. gujarati @rtfeldman
88. gurmukhi @rtfeldman
89. hardLight @rtfeldman
90. help @rtfeldman
91. hex @rtfeldman
92. historicalLigatures @rtfeldman
93. hsl @rtfeldman
94. hsla @rtfeldman
95. hue @rtfeldman
96. inches @rtfeldman
97. inherit @rtfeldman
98. initial @rtfeldman
99. inline @rtfeldman
100. inlineBlock @rtfeldman
101. inlineFlex @rtfeldman
102. inset @rtfeldman
103. int @rtfeldman
104. italic @rtfeldman
105. kannada @rtfeldman
106. khmer @rtfeldman
107. lao @rtfeldman
108. large @rtfeldman
109. larger @rtfeldman
110. lastBaseline @rtfeldman
111. left @rtfeldman
112. lighten @rtfeldman
113. lighter @rtfeldman
114. liningNums @rtfeldman
115. listStyle @rtfeldman
116. listStyle2 @rtfeldman
117. listStyle3 @rtfeldman
118. local @rtfeldman
119. luminosity @rtfeldman
120. malayalam @rtfeldman
121. medium @rtfeldman
122. mm @rtfeldman
123. monospace @rtfeldman
124. move @rtfeldman
125. multiply @rtfeldman
126. myanmar @rtfeldman
127. nResize @rtfeldman
128. neResize @rtfeldman
129. neswResize @rtfeldman
130. noCommonLigatures @rtfeldman
131. noContextual @rtfeldman
132. noDiscretionaryLigatures @rtfeldman
133. noDrop @rtfeldman
134. noHistoricalLigatures @rtfeldman
135. none @rtfeldman
136. normal @rtfeldman
137. notAllowed @rtfeldman
138. nsResize @rtfeldman
139. num @rtfeldman
140. nwResize @rtfeldman
141. nwseResize @rtfeldman
142. oblique @rtfeldman
143. oldstyleNums @rtfeldman
144. ordinal @rtfeldman
145. oriya @rtfeldman
146. outset @rtfeldman
147. overlay @rtfeldman
148. paddingBox @rtfeldman
149. pc @rtfeldman
150. pct @rtfeldman
151. petiteCaps @rtfeldman
152. pointer @rtfeldman
153. progress @rtfeldman
154. proportionalNums @rtfeldman
155. pseudoClass @rtfeldman
156. pseudoElement @rtfeldman
157. pt @rtfeldman
158. px @rtfeldman
159. rem @rtfeldman
160. revert @rtfeldman
161. rgb @rtfeldman
162. rgba @rtfeldman
163. ridge @rtfeldman
164. right @rtfeldman
165. rowResize @rtfeldman
166. sResize @rtfeldman
167. safeCenter @rtfeldman
168. sansSerif @rtfeldman
169. saturation @rtfeldman
170. screen @rtfeldman
171. scroll @rtfeldman
172. seResize @rtfeldman
173. selfEnd @rtfeldman
174. selfStart @rtfeldman
175. serif @rtfeldman
176. slashedZero @rtfeldman
177. small @rtfeldman
178. smallCaps @rtfeldman
179. smaller @rtfeldman
180. softLight @rtfeldman
181. solid @rtfeldman
182. stackedFractions @rtfeldman
183. start @rtfeldman
184. stretch @rtfeldman
185. swResize @rtfeldman
186. systemUi @rtfeldman
187. table @rtfeldman
188. tableCaption @rtfeldman
189. tableCell @rtfeldman
190. tableColumn @rtfeldman
191. tableColumnGroup @rtfeldman
192. tableFooterGroup @rtfeldman
193. tableHeaderGroup @rtfeldman
194. tableRow @rtfeldman
195. tableRowGroup @rtfeldman
196. tabularNums @rtfeldman
197. telugu @rtfeldman
198. text @rtfeldman
199. text_ @rtfeldman
200. thai @rtfeldman
201. titlingCaps @rtfeldman
202. unicase @rtfeldman
203. unsafeCenter @rtfeldman
204. unset @rtfeldman
205. url @rtfeldman
206. verticalText @rtfeldman
207. vh @rtfeldman
208. vmax @rtfeldman
209. vmin @rtfeldman
210. vw @rtfeldman
211. wResize @rtfeldman
212. wait @rtfeldman
213. wavy @rtfeldman
214. xLarge @rtfeldman
215. xSmall @rtfeldman
216. xxLarge @rtfeldman
217. xxSmall @rtfeldman
218. zero @rtfeldman
219. zoomIn @rtfeldman
220. zoomOut @rtfeldman
221. backgroundImage @BrianHicks
222. backgroundPosition @BrianHicks
223. backgroundPosition2 @BrianHicks
224. backgroundPosition4 @BrianHicks
225. backgroundSize @BrianHicks
226. backgroundSize2 @BrianHicks
227. bottom_ @BrianHicks
228. deg @BrianHicks
229. grad @BrianHicks
230. left_ @BrianHicks
231. linearGradient @BrianHicks
232. rad @BrianHicks
233. right_ @BrianHicks
234. stop @BrianHicks
235. stop2 @BrianHicks
236. to @BrianHicks
237. toCorner @BrianHicks
238. top_ @BrianHicks
239. turn @BrianHicks
240. overflow @juanedi
241. overflowWrap @juanedi
242. overflowX @juanedi
243. overflowY @juanedi
244. textTransform @sturgman
245. capitalize @sturgman
246. uppercase @sturgman
247. lowercase @sturgman
248. fullWidth @sturgman
249. textRendering @sturgman
250. optimizeLegibility @sturgman
251. optimizeSpeed @sturgman
252. geometricPrecision @sturgman
253. textOrientation @sturgman
254. mixed @sturgman
255. upright @sturgman
256. sideways @sturgman
257. captionSide @mattjbray
258. borderCollapse @mattjbray
259. borderSpacing @mattjbray
260. borderSpacing2 @mattjbray
261. separate @mattjbray
262. collapse @mattjbray
263. emptyCells @mattjbray
264. show @mattjbray
265. hide @mattjbray
266. tableLayout @mattjbray
267. verticalAlign @mattjbray
268. sub @mattjbray
269. super @mattjbray
270. textTop @mattjbray
271. textBottom @mattjbray
272. middle @mattjbray
273. direction @brianvanburken
274. ltr @brianvanburken
275. rtl @brianvanburken
276. textAlign @brianvanburken
277. matchParent @brianvanburken
278. justify @brianvanburken
279. toBottom @rtfeldman
280. toBottomLeft @rtfeldman
281. toBottomRight @rtfeldman
282. toLeft @rtfeldman
283. toRight @rtfeldman
284. toTop @rtfeldman
285. toTopLeft @rtfeldman
286. toTopRight @rtfeldman
287. position @tolgap
288. relative @tolgap
289. static @tolgap
290. sticky @tolgap
291. top @tolgap
292. bottom @tolgap
293. left @tolgap
294. right @tolgap
295. zIndex @tolgap
296. backgroundRepeat @BrianHicks
297. backgroundRepeat2 @BrianHicks
298. noRepeat @BrianHicks
299. repeat @BrianHicks
300. repeatX @BrianHicks
301. repeatY @BrianHicks
302. round @BrianHicks
303. space @BrianHicks
304. border @owanturist
305. border2 @owanturist
306. border3 @owanturist
307. borderColor @owanturist
308. borderColor2 @owanturist
309. borderColor3 @owanturist
310. borderColor4 @owanturist
311. borderStyle @owanturist
312. borderWidth @owanturist
313. borderWidth2 @owanturist
314. borderWidth3 @owanturist
315. borderWidth4 @owanturist
316. borderBottom @owanturist
317. borderBottom2 @owanturist
318. borderBottom3 @owanturist
319. borderBottomColor @owanturist
320. borderBottomStyle @owanturist
321. borderBottomWidth @owanturist
322. borderTop @owanturist
323. borderTop2 @owanturist
324. borderTop3 @owanturist
325. borderTopColor @owanturist
326. borderTopStyle @owanturist
327. borderTopWidth @owanturist
328. borderRight @owanturist
329. borderRight2 @owanturist
330. borderRight3 @owanturist
331. borderRightColor @owanturist
332. borderRightStyle @owanturist
333. borderRightWidth @owanturist
334. borderLeft @owanturist
335. borderLeft2 @owanturist
336. borderLeft3 @owanturist
337. borderLeftColor @owanturist
338. borderLeftStyle @owanturist
339. borderLeftWidth @owanturist
340. thick @owanturist
341. thin @owanturist
342. nowrap @brianvanburken
343. pre @brianvanburken
344. preLine @brianvanburken
345. preWrap @brianvanburken
346. whiteSpace @brianvanburken
347. float @brianvanburken
348. wordBreak @brianvanburken
349. breakAll @brianvanburken
350. keepAll @brianvanburken
351. visibility @brianvanburken
352. visible @brianvanburken
353. contain @BrianHicks
354. cover @BrianHicks
355. borderRadius @owanturist
356. borderRadius2 @owanturist
357. borderRadius3 @owanturist
358. borderRadius4 @owanturist
359. borderTopLeftRadius @owanturist
360. borderTopLeftRadius2 @owanturist
361. borderTopRightRadius @owanturist
362. borderTopRightRadius2 @owanturist
363. borderBottomLeftRadius @owanturist
364. borderBottomLeftRadius2 @owanturist
365. borderBottomRightRadius @owanturist
366. borderBottomRightRadius2 @owanturist
367. fill @brianvanburken
368. padding @owanturist
369. padding2 @owanturist
370. padding3 @owanturist
371. padding4 @owanturist
372. paddingBottom @owanturist
373. paddingLeft @owanturist
374. paddingRight @owanturist
375. paddingTop @owanturist
376. margin @owanturist
377. margin2 @owanturist
378. margin3 @owanturist
379. margin4 @owanturist
380. marginBottom @owanturist
381. marginLeft @owanturist
382. marginRight @owanturist
383. marginTop @owanturist
384. textDecoration @owanturist
385. textDecoration2 @owanturist
386. textDecoration3 @owanturist
387. textDecorationColor @owanturist
388. textDecorationLine @owanturist
389. textDecorationLine3 @owanturist
390. textDecorationStyle @owanturist
391. underline @owanturist
392. overline @owanturist
393. lineThrough @owanturist
394. borderImageOutset @Arkham
395. borderImageOutset2 @Arkham
396. borderImageOutset3 @Arkham
397. borderImageOutset4 @Arkham
398. borderImageWidth @Arkham
399. borderImageWidth2 @Arkham
400. borderImageWidth3 @Arkham
401. borderImageWidth4 @Arkham
402. all_ @brianvanburken
403. balance @brianvanburken
404. balanceAll @brianvanburken
405. columnCount @brianvanburken
406. columnFill @brianvanburken
407. columnGap @brianvanburken
408. columnRule @brianvanburken
409. columnRule2 @brianvanburken
410. columnRule3 @brianvanburken
411. columnRuleColor @brianvanburken
412. columnRuleStyle @brianvanburken
413. columnRuleWidth @brianvanburken
414. columnSpan @brianvanburken
415. columnWidth @brianvanburken
416. columns @brianvanburken
417. columns2 @brianvanburken
418. boxSizing @edkv
419. arcs @brianvanburken
420. bevel @brianvanburken
421. boundingBox @brianvanburken
422. butt @brianvanburken
423. clone @brianvanburken
424. compress @brianvanburken
425. crop @brianvanburken
426. dashes @brianvanburken
427. fillBox @brianvanburken
428. gaps @brianvanburken
429. miter @brianvanburken
430. slice @brianvanburken
431. square @brianvanburken
432. strokeAlign @brianvanburken
433. strokeAlign @brianvanburken
434. strokeBox @brianvanburken
435. strokeBreak @brianvanburken
436. strokeColor @brianvanburken
437. strokeDashCorner @brianvanburken
438. strokeDashJustify @brianvanburken
439. strokeDasharray @brianvanburken
440. strokeDashoffset @brianvanburken
441. strokeImage @brianvanburken
442. strokeLinecap @brianvanburken
443. strokeLinejoin @brianvanburken
444. strokeLinejoin2 @brianvanburken
445. strokeMiterlimit @brianvanburken
446. strokeOpacity @brianvanburken
447. strokeOrigin @brianvanburken
448. strokePosition @brianvanburken
449. strokePosition2 @brianvanburken
450. strokePosition4 @brianvanburken
451. strokeRepeat @brianvanburken
452. strokeRepeat2 @brianvanburken
453. strokeSize @brianvanburken
454. strokeSize2 @brianvanburken
455. strokeWidth @brianvanburken
456. stupid @brianvanburken
457. calc @rtfeldman
458. plus @rtfeldman
459. minus @rtfeldman
460. both @brianvanburken
461. clear @brianvanburken
462. zoom @brianvanburken
463. opacity @brianvanburken
464. inlineEnd @brianvanburken
465. inlineStart @brianvanburken
466. matrix @brianvanburken
467. matrix3d @brianvanburken
468. perspective @brianvanburken
469. rotate @brianvanburken
470. rotate3d @brianvanburken
471. rotateX @brianvanburken
472. rotateY @brianvanburken
473. rotateZ @brianvanburken
474. scale @brianvanburken
475. scale2 @brianvanburken
476. scale3d @brianvanburken
477. scaleX @brianvanburken
478. scaleY @brianvanburken
479. scaleZ @brianvanburken
480. skew @brianvanburken
481. skew2 @brianvanburken
482. skewX @brianvanburken
483. skewY @brianvanburken
484. translate @brianvanburken
485. translate2 @brianvanburken
486. translate3d @brianvanburken
487. translateX @brianvanburken
488. translateY @brianvanburken
489. translateZ @brianvanburken
490. transform @brianvanburken

[BrianHicks]

I'll take background! (1-7 inclusive)

What do you think would be the best diff to look at so I don't submit something unexpected in a PR?

[rtfeldman]

@BrianHicks For backgroundImage I'd look at how cursor works, since it also accepts url.

I think for backgroundRepeat you'll also end up implementing a bunch of related ones like noRepeat. I'd look at backgroundAttachment for an example of how that works. (There's also backgroundAttachments - the plural of backgroundAttachment, that is - which accepts a List. I don't know if that applies to background-repeat the way it applies to background-attachment, though. Looking at the MDN docs for those two properties should make it clear what should be accepted!)

[BrianHicks]

Mmm, my bad. I guess I was after general advice for the other 356 items to make this low-hanging fruit even lower. Based on our chat elsewhere, here's how you'd upgrade one item:

1. find a similar type already in this branch and modify it to work with the new types and according to the CSS spec as documented by MDN.
2. copy docs from master, if they're present.
3. change MDN links to css-tricks links if available (they tend to say "how" more than "what" and are more helpful for docs.)
4. add simple examples to docs–mostly to demonstrate compilable simple use, not necessarily real-world use (for example: display none for either display or none.)

[BrianHicks]

also, ah dang you already did this in the wiki! Nice! I just missed it.

[sturgman]

I did textTransform and its values since I identified that one as a very easy one and I am a total beginner on this stuff. I did:

• textTransform
• capitalize
• uppercase
• lowercase
• fullWidth

If you can review when you get a chance and let me know if I did it correctly I can submit you a list of some others I can do (with less hand-holding/reviewing). Here it is: textTransform

Hopefully I am more help than trouble!

[BrianHicks]

looks like I'll also need to do the linearGradients for backgroundImage

[juanedi]

I'll start with the overflow props (220-223)!

[juanedi]

👋 overflow, overflowX, overflowY and overflowWrap: #400

[sturgman]

I can work on:

• textRendering [305] and its values optimizeSpeed [206], optimizeLegibility [205], and geometricPrecision [140]. It seems that auto is already implemented.
• textOrientation [303] and its values mixed [?], upright [?], sideways [?]. Maybe there is a reason the list is missing the values for textOrientation? MDN also claims that sidewaysRight is an alias to sideways kept for compatibility purposes and that useGlyphOrientation is used to set deprecated properties in SVG. Should sidewaysRight and useGlyphOrientation be implemented? I checked the current version of elm-css and it implements the three official/supported values: mixed, upright, and sideways.

[rtfeldman]

Nice, sounds good @sturgman!

I avoid including things that are deprecated, or which are too new to have widespread browser support yet. I don't think we need the aliases.

[mattjbray]

I can take the table-related properties and their values:

• borderCollapse, collapse, separate
• borderSpacing, borderSpacing2
• captionSide
• emptyCells, show, hide
• tableLayout (values already done)
• verticalAlign, sub, super, textTop, textBottom, middle (other values already done)

Edit: #404