@@ -1,4 +1,109 @@
1−module Internal.Model exposing (Aligned(..), Angle, Attribute(..), Axis(..), Children(..), Color(..), Description(..), Element(..), EmbedStyle(..), FocusStyle, Font(..), Gathered, HAlign(..), HoverSetting(..), LayoutContext(..), Length(..), Location(..), NodeName(..), Option(..), OptionRecord, Padding(..), Property(..), PseudoClass(..), RenderMode(..), Shadow, Spacing(..), Style(..), TransformComponent(..), Transformation(..), VAlign(..), XYZ, addNodeName, addWhen, alignXName, alignYName, asColumn, asEl, asGrid, asParagraph, asRow, asTextColumn, boxShadowName, columnClass, composeTransformation, contextClasses, createElement, defaultOptions, div, element, embedKeyed, embedWith, extractSpacingAndPadding, filter, finalizeNode, floatClass, focusDefaultStyle, formatBoxShadow, formatColor, formatColorClass, formatDropShadow, formatTextShadow, gatherAttrRecursive, get, getHeight, getSpacing, getStyleName, getWidth, gridClass, htmlClass, lengthClassName, map, mapAttr, mapAttrFromStyle, noStyleSheet, onlyStyles, optionsToRecord, paddingName, pageClass, paragraphClass, reduceRecursive, reduceRecursiveCalcName, reduceStyles, reduceStylesRecursive, removeNever, renderFocusStyle, renderFont, renderFontClassName, renderHeight, renderRoot, renderWidth, rootStyle, rowClass, singleClass, skippable, sortedReduce, spacingName, staticRoot, tag, textElement, textElementFill, textShadowName, toHtml, toStyleSheet, toStyleSheetString, transformClass, transformValue, unit, unstyled, untransformed, unwrapDecorations, unwrapDecsHelper)
1+module Internal.Model exposing
2+ ( Aligned(..)
3+ , Angle
4+ , Attribute(..)
5+ , Axis(..)
6+ , Children(..)
7+ , Color(..)
8+ , Description(..)
9+ , Element(..)
10+ , EmbedStyle(..)
11+ , FocusStyle
12+ , Font(..)
13+ , Gathered
14+ , HAlign(..)
15+ , HoverSetting(..)
16+ , LayoutContext(..)
17+ , Length(..)
18+ , Location(..)
19+ , NearbyChildren(..)
20+ , NodeName(..)
21+ , Option(..)
22+ , OptionRecord
23+ , Padding(..)
24+ , Property(..)
25+ , PseudoClass(..)
26+ , RenderMode(..)
27+ , Shadow
28+ , Spacing(..)
29+ , Style(..)
30+ , TransformComponent(..)
31+ , Transformation(..)
32+ , VAlign(..)
33+ , Variant(..)
34+ , XYZ
35+ , addNodeName
36+ , addWhen
37+ , alignXName
38+ , alignYName
39+ , asColumn
40+ , asEl
41+ , asGrid
42+ , asParagraph
43+ , asRow
44+ , asTextColumn
45+ , boxShadowClass
46+ , columnClass
47+ , composeTransformation
48+ , contextClasses
49+ , createElement
50+ , defaultOptions
51+ , div
52+ , element
53+ , embedKeyed
54+ , embedWith
55+ , extractSpacingAndPadding
56+ , filter
57+ , finalizeNode
58+ , floatClass
59+ , focusDefaultStyle
60+ , formatBoxShadow
61+ , formatColor
62+ , formatColorClass
63+ , formatDropShadow
64+ , formatTextShadow
65+ , gatherAttrRecursive
66+ , get
67+ , getHeight
68+ , getSpacing
69+ , getStyleName
70+ , getWidth
71+ , gridClass
72+ , htmlClass
73+ , isContent
74+ , lengthClassName
75+ , map
76+ , mapAttr
77+ , mapAttrFromStyle
78+ , noStyleSheet
79+ , onlyStyles
80+ , optionsToRecord
81+ , paddingName
82+ , paddingNameFloat
83+ , pageClass
84+ , paragraphClass
85+ , reduceRecursive
86+ , reduceStyles
87+ , reduceStylesRecursive
88+ , removeNever
89+ , renderFontClassName
90+ , renderHeight
91+ , renderRoot
92+ , renderVariant
93+ , renderWidth
94+ , rootStyle
95+ , rowClass
96+ , singleClass
97+ , spacingName
98+ , tag
99+ , textShadowClass
100+ , toHtml
101+ , toStyleSheet
102+ , transformClass
103+ , unstyled
104+ , unwrapDecorations
105+ , variantName
106+ )
2107
3108{-| -}
4109
@@ -7,7 +112,7 @@ import Html.Attributes
7112import Html.Keyed
8113import Internal.Flag as Flag exposing (Flag)
9114import Internal.Style exposing (classes, dot)
10−import Json.Encode as Json
115+import Json.Encode as Encode
11116import Set exposing (Set)
12117import VirtualDom
13118
@@ -68,7 +173,8 @@ type Style
68173 | Single String String String
69174 | Colored String String Color
70175 | SpacingStyle String Int Int
71− | PaddingStyle String Int Int Int Int
176+ | BorderWidth String Int Int Int Int
177+ | PaddingStyle String Float Float Float Float
72178 | GridTemplateStyle
73179 { spacing : ( Length, Length )
74180 , columns : List Length
@@ -99,12 +205,86 @@ type PseudoClass
99205 | Active
100206
101207
208+{-| -}
209+type alias Adjustment =
210+ { capital : Float
211+ , lowercase : Float
212+ , baseline : Float
213+ , descender : Float
214+ }
215+
216+
102217type Font
103218 = Serif
104219 | SansSerif
105220 | Monospace
106221 | Typeface String
107222 | ImportFont String String
223+ | FontWith
224+ { name : String
225+ , adjustment : Maybe Adjustment
226+ , variants : List Variant
227+ }
228+
229+
230+type Variant
231+ = VariantActive String
232+ | VariantOff String
233+ | VariantIndexed String Int
234+
235+
236+renderVariant var =
237+ case var of
238+ VariantActive name ->
239+ "\"" ++ name ++ "\""
240+
241+ VariantOff name ->
242+ "\"" ++ name ++ "\" 0"
243+
244+ VariantIndexed name index ->
245+ "\"" ++ name ++ "\" " ++ String.fromInt index
246+
247+
248+variantName var =
249+ case var of
250+ VariantActive name ->
251+ name
252+
253+ VariantOff name ->
254+ name ++ "-0"
255+
256+ VariantIndexed name index ->
257+ name ++ "-" ++ String.fromInt index
258+
259+
260+renderVariants typeface =
261+ case typeface of
262+ FontWith font ->
263+ Just (String.join ", " (List.map renderVariant font.variants))
264+
265+ _ ->
266+ Nothing
267+
268+
269+isSmallCaps var =
270+ case var of
271+ VariantActive name ->
272+ name == "smcp"
273+
274+ VariantOff name ->
275+ False
276+
277+ VariantIndexed name index ->
278+ name == "smcp" && index == 1
279+
280+
281+hasSmallCaps typeface =
282+ case typeface of
283+ FontWith font ->
284+ List.any isSmallCaps font.variants
285+
286+ _ ->
287+ False
108288
109289
110290type Property
@@ -192,6 +372,13 @@ type NodeName
192372 | Embedded String String
193373
194374
375+type NearbyChildren msg
376+ = NoNearbyChildren
377+ | ChildrenBehind (List (Html.Html msg))
378+ | ChildrenInFront (List (Html.Html msg))
379+ | ChildrenBehindAndInFront (List (Html.Html msg)) (List (Html.Html msg))
380+
381+
195382div =
196383 Generic
197384
@@ -200,7 +387,7 @@ type alias Gathered msg =
200387 { node : NodeName
201388 , attributes : List (VirtualDom.Attribute msg)
202389 , styles : List Style
203− , children : List (VirtualDom.Node msg)
390+ , children : NearbyChildren msg
204391 , has : Flag.Field
205392 }
206393
@@ -268,7 +455,10 @@ finalizeNode has node attributes children embedMode parentContext =
268455 Embedded nodeName internal ->
269456 VirtualDom.node nodeName
270457 attributes
271− [ createNode internal [ Html.Attributes.class (classes.any ++ " " ++ classes.single) ]
458+ [ createNode internal
459+ [ Html.Attributes.class
460+ (classes.any ++ " " ++ classes.single)
461+ ]
272462 ]
273463 in
274464 case parentContext of
@@ -345,49 +535,45 @@ finalizeNode has node attributes children embedMode parentContext =
345535
346536
347537embedWith static opts styles children =
538+ let
539+ dynamicStyleSheet =
540+ styles
541+ |> List.foldl reduceStyles ( Set.empty, renderFocusStyle opts.focus )
542+ |> Tuple.second
543+ -- |> reduceStylesRecursive Set.empty [ ]) --renderFocusStyle opts.focus ]
544+ -- |> sortedReduce
545+ |> toStyleSheet opts
546+ in
348547 if static then
349− staticRoot
350− :: (styles
351− |> List.foldl reduceStyles ( Set.empty, [ renderFocusStyle opts.focus ] )
352− |> Tuple.second
353− -- |> reduceStylesRecursive Set.empty [ ]) --renderFocusStyle opts.focus ]
354− -- |> sortedReduce
355− |> toStyleSheet opts
356− )
548+ staticRoot opts
549+ :: dynamicStyleSheet
357550 :: children
358551
359552 else
360− (styles
361− |> List.foldl reduceStyles ( Set.empty, [ renderFocusStyle opts.focus ] )
362− |> Tuple.second
363− -- |> reduceStylesRecursive Set.empty [ ]) --renderFocusStyle opts.focus ]
364− -- |> sortedReduce
365− |> toStyleSheet opts
366− )
553+ dynamicStyleSheet
367554 :: children
368555
369556
370557embedKeyed static opts styles children =
558+ let
559+ dynamicStyleSheet =
560+ styles
561+ |> List.foldl reduceStyles ( Set.empty, renderFocusStyle opts.focus )
562+ |> Tuple.second
563+ -- |> reduceStylesRecursive Set.empty [ ]) --renderFocusStyle opts.focus ]
564+ -- |> sortedReduce
565+ |> toStyleSheet opts
566+ in
371567 if static then
372− ( "static-stylesheet", staticRoot )
568+ ( "static-stylesheet", staticRoot opts )
373569 :: ( "dynamic-stylesheet"
374− , styles
375− |> List.foldl reduceStyles ( Set.empty, [ renderFocusStyle opts.focus ] )
376− |> Tuple.second
377− -- |> reduceStylesRecursive Set.empty [ ]) --renderFocusStyle opts.focus ]
378− -- |> sortedReduce
379− |> toStyleSheet opts
570+ , dynamicStyleSheet
380571 )
381572 :: children
382573
383574 else
384575 ( "dynamic-stylesheet"
385− , styles
386− |> List.foldl reduceStyles ( Set.empty, [ renderFocusStyle opts.focus ] )
387− |> Tuple.second
388− -- |> reduceStylesRecursive Set.empty [ ]) --renderFocusStyle opts.focus ]
389− -- |> sortedReduce
390− |> toStyleSheet opts
576+ , dynamicStyleSheet
391577 )
392578 :: children
393579
@@ -703,7 +889,16 @@ skippable flag style =
703889 False
704890
705891
706−gatherAttrRecursive : String -> NodeName -> Flag.Field -> Transformation -> List Style -> List (VirtualDom.Attribute msg) -> List (VirtualDom.Node msg) -> List (Attribute aligned msg) -> Gathered msg
892+gatherAttrRecursive :
893+ String
894+ -> NodeName
895+ -> Flag.Field
896+ -> Transformation
897+ -> List Style
898+ -> List (VirtualDom.Attribute msg)
899+ -> NearbyChildren msg
900+ -> List (Attribute aligned msg)
901+ -> Gathered msg
707902gatherAttrRecursive classes node has transform styles attrs children elementAttrs =
708903 case elementAttrs of
709904 [] ->
@@ -837,7 +1032,7 @@ gatherAttrRecursive classes node has transform styles attrs children elementAttr
8371032 in
8381033 gatherAttrRecursive (classes ++ " " ++ newClass)
8391034 node
840− (Flag.merge addToFlags has)
1035+ (Flag.merge addToFlags (Flag.add Flag.width has))
8411036 transform
8421037 (newStyles ++ styles)
8431038 attrs
@@ -858,7 +1053,7 @@ gatherAttrRecursive classes node has transform styles attrs children elementAttr
8581053 name =
8591054 "height-px-" ++ val
8601055 in
861− gatherAttrRecursive (name ++ " " ++ classes)
1056+ gatherAttrRecursive (Internal.Style.classes.heightExact ++ " " ++ name ++ " " ++ classes)
8621057 node
8631058 (Flag.add Flag.height has)
8641059 transform
@@ -915,7 +1110,7 @@ gatherAttrRecursive classes node has transform styles attrs children elementAttr
9151110 in
9161111 gatherAttrRecursive (classes ++ " " ++ newClass)
9171112 node
918− (Flag.merge addToFlags has)
1113+ (Flag.merge addToFlags (Flag.add Flag.height has))
9191114 transform
9201115 (newStyles ++ styles)
9211116 attrs
@@ -947,20 +1142,15 @@ gatherAttrRecursive classes node has transform styles attrs children elementAttr
9471142 gatherAttrRecursive classes (addNodeName "h6" node) has transform styles attrs children remaining
9481143
9491144 Paragraph ->
950− let
951− newNode =
952− case node of
953− Generic ->
954− NodeName "p"
955−
956− NodeName name ->
957− NodeName name
958−
959− Embedded x y ->
960− Embedded x y
961− in
962− gatherAttrRecursive classes
963− newNode
1145+ -- previously we rendered a <p> tag, though apparently this invalidates the html if it has <div>s inside.
1146+ -- Since we can't guaranteee that there are no divs, we need another strategy.
1147+ -- While it's not documented in many places, there apparently is a paragraph aria role
1148+ -- https://github.com/w3c/aria/blob/11f85f41a5b621fdbe85fc9bcdcd270e653a48ba/common/script/roleInfo.js
1149+ -- Though we'll need to wait till it gets released in an official wai-aria spec to use it.
1150+ -- If it's used at the moment, then Lighthouse complains (likely rightfully) that role paragraph is not recognized.
1151+ gatherAttrRecursive
1152+ classes
1153+ node
9641154 has
9651155 transform
9661156 styles
@@ -995,83 +1185,16 @@ gatherAttrRecursive classes node has transform styles attrs children elementAttr
9951185
9961186 Styled styled ->
9971187 styles ++ styled.styles
998−
999− nearbyElement =
1000− Html.div
1001− [ Html.Attributes.class <|
1002− case location of
1003− Above ->
1004− String.join " "
1005− [
1006− Internal.Style.classes.nearby
1007− , Internal.Style.classes.single
1008− , Internal.Style.classes.above
1009− ]
1010−
1011− Below ->
1012− String.join " "
1013− [
1014− Internal.Style.classes.nearby
1015− , Internal.Style.classes.single
1016− , Internal.Style.classes.below
1017− ]
1018−
1019− OnRight ->
1020− String.join " "
1021− [
1022− Internal.Style.classes.nearby
1023− , Internal.Style.classes.single
1024− , Internal.Style.classes.onRight
1025− ]
1026−
1027− OnLeft ->
1028−
1029−
1030− String.join " "
1031− [
1032− Internal.Style.classes.nearby
1033− , Internal.Style.classes.single
1034− , Internal.Style.classes.onLeft
1035− ]
1036−
1037− InFront ->
1038− String.join " "
1039− [
1040− Internal.Style.classes.nearby
1041− , Internal.Style.classes.single
1042− , Internal.Style.classes.inFront
1043− ]
1044−
1045− Behind ->
1046− String.join " "
1047− [
1048− Internal.Style.classes.nearby
1049− , Internal.Style.classes.single
1050− , Internal.Style.classes.behind
1051− ]
1052− ]
1053− [ case elem of
1054− Empty ->
1055− VirtualDom.text ""
1056−
1057− Text str ->
1058− textElement str
1059−
1060− Unstyled html ->
1061− html asEl
1062−
1063− Styled styled ->
1064− styled.html NoStyleSheet asEl
1065− ]
1066−
1067− newClasses =
1068− if location == Behind then
1069− Internal.Style.classes.hasBehind ++ " " ++ classes
1070−
1071− else
1072− classes
10731188 in
1074− gatherAttrRecursive newClasses node has transform newStyles attrs (nearbyElement :: children) remaining
1189+ gatherAttrRecursive
1190+ classes
1191+ node
1192+ has
1193+ transform
1194+ newStyles
1195+ attrs
1196+ (addNearbyElement location elem children)
1197+ remaining
10751198
10761199 AlignX x ->
10771200 if Flag.present Flag.xAlign has then
@@ -1127,6 +1250,106 @@ gatherAttrRecursive classes node has transform styles attrs children elementAttr
11271250 remaining
11281251
11291252
1253+addNearbyElement location elem existing =
1254+ let
1255+ nearby =
1256+ nearbyElement location elem
1257+ in
1258+ case existing of
1259+ NoNearbyChildren ->
1260+ case location of
1261+ Behind ->
1262+ ChildrenBehind [ nearby ]
1263+
1264+ _ ->
1265+ ChildrenInFront [ nearby ]
1266+
1267+ ChildrenBehind existingBehind ->
1268+ case location of
1269+ Behind ->
1270+ ChildrenBehind (nearby :: existingBehind)
1271+
1272+ _ ->
1273+ ChildrenBehindAndInFront existingBehind [ nearby ]
1274+
1275+ ChildrenInFront existingInFront ->
1276+ case location of
1277+ Behind ->
1278+ ChildrenBehindAndInFront [ nearby ] existingInFront
1279+
1280+ _ ->
1281+ ChildrenInFront (nearby :: existingInFront)
1282+
1283+ ChildrenBehindAndInFront existingBehind existingInFront ->
1284+ case location of
1285+ Behind ->
1286+ ChildrenBehindAndInFront (nearby :: existingBehind) existingInFront
1287+
1288+ _ ->
1289+ ChildrenBehindAndInFront existingBehind (nearby :: existingInFront)
1290+
1291+
1292+nearbyElement location elem =
1293+ Html.div
1294+ [ Html.Attributes.class <|
1295+ case location of
1296+ Above ->
1297+ String.join " "
1298+ [ Internal.Style.classes.nearby
1299+ , Internal.Style.classes.single
1300+ , Internal.Style.classes.above
1301+ ]
1302+
1303+ Below ->
1304+ String.join " "
1305+ [ Internal.Style.classes.nearby
1306+ , Internal.Style.classes.single
1307+ , Internal.Style.classes.below
1308+ ]
1309+
1310+ OnRight ->
1311+ String.join " "
1312+ [ Internal.Style.classes.nearby
1313+ , Internal.Style.classes.single
1314+ , Internal.Style.classes.onRight
1315+ ]
1316+
1317+ OnLeft ->
1318+ String.join " "
1319+ [ Internal.Style.classes.nearby
1320+ , Internal.Style.classes.single
1321+ , Internal.Style.classes.onLeft
1322+ ]
1323+
1324+ InFront ->
1325+ String.join " "
1326+ [ Internal.Style.classes.nearby
1327+ , Internal.Style.classes.single
1328+ , Internal.Style.classes.inFront
1329+ ]
1330+
1331+ Behind ->
1332+ String.join " "
1333+ [ Internal.Style.classes.nearby
1334+ , Internal.Style.classes.single
1335+ , Internal.Style.classes.behind
1336+ ]
1337+ ]
1338+ [ case elem of
1339+ Empty ->
1340+ VirtualDom.text ""
1341+
1342+ Text str ->
1343+ textElement str
1344+
1345+ Unstyled html ->
1346+ html asEl
1347+
1348+ Styled styled ->
1349+ styled.html NoStyleSheet asEl
1350+ ]
1351+
1352+
11301353renderWidth w =
11311354 case w of
11321355 Px px ->
@@ -1213,7 +1436,7 @@ renderHeight h =
12131436 "height-px-" ++ val
12141437 in
12151438 ( Flag.none
1216− , name
1439+ , Internal.Style.classes.heightExact ++ " " ++ name
12171440 , [ Single name "height" (val ++ "px") ]
12181441 )
12191442
@@ -1236,7 +1459,7 @@ renderHeight h =
12361459 , [ Single
12371460 (Internal.Style.classes.any
12381461 ++ "."
1239− ++ Internal.Style.classes.row
1462+ ++ Internal.Style.classes.column
12401463 ++ " > "
12411464 ++ (Internal.Style.dot <| "height-fill-" ++ String.fromInt portion)
12421465 )
@@ -1255,7 +1478,9 @@ renderHeight h =
12551478 Single
12561479 cls
12571480 "min-height"
1258− (String.fromInt minSize ++ "px")
1481+ -- This needs to be !important because we're using `min-height: min-content`
1482+ -- to correct for safari's incorrect implementation of flexbox.
1483+ (String.fromInt minSize ++ "px !important")
12591484
12601485 ( newFlag, newAttrs, newStyle ) =
12611486 renderHeight len
@@ -1333,7 +1558,7 @@ element : LayoutContext -> NodeName -> List (Attribute aligned msg) -> Children
13331558element context node attributes children =
13341559 attributes
13351560 |> List.reverse
1336− |> gatherAttrRecursive (contextClasses context) node Flag.none untransformed [] [] []
1561+ |> gatherAttrRecursive (contextClasses context) node Flag.none untransformed [] [] NoNearbyChildren
13371562 |> createElement context children
13381563
13391564
@@ -1341,13 +1566,6 @@ untransformed =
13411566 Untransformed
13421567
13431568
1344−
1345−-- space =
1346−-- VirtualDom.text " "
1347−-- keyedSpace =
1348−-- ( " ", space )
1349−
1350−
13511569createElement : LayoutContext -> Children (Element msg) -> Gathered msg -> Element msg
13521570createElement context children rendered =
13531571 let
@@ -1389,36 +1607,33 @@ createElement context children rendered =
13891607 -- Same if it's a column or row with one child and width-content, height-content
13901608 -- interferes with css grid
13911609 -- Maybe we could unpack text elements in a paragraph as well,
1392− -- however embedded style elements that are larger than the line height will overlap with exisitng text.
1610+ -- however, embedded elements that are larger than the line height will overlap with exisitng text.
13931611 -- I don't think that's what we want.
1394− if
1395− context
1396− == asEl
1397− || context
1398− == asParagraph
1399− then
1400− ( VirtualDom.text
1401− (if context == asParagraph then
1402− str ++ " "
1403−
1404− else
1405− str
1406− )
1407− :: htmls
1408− , existingStyles
1409− )
1410−
1411− else
1412− ( textElement
1413− (if context == asParagraph then
1414− str ++ " "
1415−
1416− else
1417− str
1418− )
1419− :: htmls
1420− , existingStyles
1421− )
1612+ -- if
1613+ -- context
1614+ -- == asEl
1615+ -- || context
1616+ -- == asParagraph
1617+ -- then
1618+ -- ( VirtualDom.text
1619+ -- (if context == asParagraph then
1620+ -- str
1621+ -- else
1622+ -- str
1623+ -- )
1624+ -- :: htmls
1625+ -- , existingStyles
1626+ -- )
1627+ -- else
1628+ ( (if context == asEl then
1629+ textElementFill str
1630+
1631+ else
1632+ textElement str
1633+ )
1634+ :: htmls
1635+ , existingStyles
1636+ )
14221637
14231638 Empty ->
14241639 ( htmls, existingStyles )
@@ -1460,38 +1675,30 @@ createElement context children rendered =
14601675 -- TEXT OPTIMIZATION
14611676 -- You can have raw text if the element is an el, and has `width-content` and `height-content`
14621677 -- Same if it's a column or row with one child and width-content, height-content
1463− if
1464− context
1465− == asEl
1466− || context
1467− == asParagraph
1468− then
1469− ( ( key
1470− , VirtualDom.text
1471− (if context == asParagraph then
1472− str ++ " "
1473−
1474− else
1475− str
1476− )
1477− )
1478− :: htmls
1479− , existingStyles
1480− )
1678+ -- if
1679+ -- context
1680+ -- == asEl
1681+ -- || context
1682+ -- == asParagraph
1683+ -- then
1684+ -- ( ( key
1685+ -- , VirtualDom.text
1686+ -- str
1687+ -- )
1688+ -- :: htmls
1689+ -- , existingStyles
1690+ -- )
1691+ -- else
1692+ ( ( key
1693+ , if context == asEl then
1694+ textElementFill str
14811695
1482− else
1483− ( ( key
1484− , textElement
1485− (if context == asParagraph then
1486− str ++ " "
1487−
1488− else
1489− str
1490− )
1491− )
1492− :: htmls
1493− , existingStyles
1494− )
1696+ else
1697+ textElement str
1698+ )
1699+ :: htmls
1700+ , existingStyles
1701+ )
14951702
14961703 Empty ->
14971704 ( htmls, existingStyles )
@@ -1514,7 +1721,9 @@ createElement context children rendered =
15141721 (finalizeNode rendered.has
15151722 rendered.node
15161723 rendered.attributes
1517− (Keyed <| List.map (\x -> ( "nearby-elements-pls", x )) rendered.children ++ keyed)
1724+ (Keyed
1725+ (addKeyedChildren "nearby-element-pls" keyed rendered.children)
1726+ )
15181727 NoStyleSheet
15191728 )
15201729
@@ -1522,7 +1731,13 @@ createElement context children rendered =
15221731 Styled
15231732 { styles = allStyles
15241733 , html =
1525− finalizeNode rendered.has rendered.node rendered.attributes (Keyed (List.map (\x -> ( "nearby-elements-pls", x )) rendered.children ++ keyed))
1734+ finalizeNode
1735+ rendered.has
1736+ rendered.node
1737+ rendered.attributes
1738+ (Keyed
1739+ (addKeyedChildren "nearby-element-pls" keyed rendered.children)
1740+ )
15261741 }
15271742
15281743 Unkeyed unkeyedChildren ->
@@ -1539,20 +1754,58 @@ createElement context children rendered =
15391754 case newStyles of
15401755 [] ->
15411756 Unstyled
1542− (finalizeNode rendered.has
1757+ (finalizeNode
1758+ rendered.has
15431759 rendered.node
15441760 rendered.attributes
1545− (Unkeyed <| rendered.children ++ unkeyed)
1761+ (Unkeyed (addChildren unkeyed rendered.children))
15461762 NoStyleSheet
15471763 )
15481764
15491765 allStyles ->
15501766 Styled
15511767 { styles = allStyles
1552− , html = finalizeNode rendered.has rendered.node rendered.attributes (Unkeyed (rendered.children ++ unkeyed))
1768+ , html =
1769+ finalizeNode
1770+ rendered.has
1771+ rendered.node
1772+ rendered.attributes
1773+ (Unkeyed (addChildren unkeyed rendered.children))
15531774 }
15541775
15551776
1777+addChildren existing nearbyChildren =
1778+ case nearbyChildren of
1779+ NoNearbyChildren ->
1780+ existing
1781+
1782+ ChildrenBehind behind ->
1783+ behind ++ existing
1784+
1785+ ChildrenInFront inFront ->
1786+ existing ++ inFront
1787+
1788+ ChildrenBehindAndInFront behind inFront ->
1789+ behind ++ existing ++ inFront
1790+
1791+
1792+addKeyedChildren key existing nearbyChildren =
1793+ case nearbyChildren of
1794+ NoNearbyChildren ->
1795+ existing
1796+
1797+ ChildrenBehind behind ->
1798+ List.map (\x -> ( key, x )) behind ++ existing
1799+
1800+ ChildrenInFront inFront ->
1801+ existing ++ List.map (\x -> ( key, x )) inFront
1802+
1803+ ChildrenBehindAndInFront behind inFront ->
1804+ List.map (\x -> ( key, x )) behind
1805+ ++ existing
1806+ ++ List.map (\x -> ( key, x )) inFront
1807+
1808+
15561809unit =
15571810 0
15581811
@@ -1564,8 +1817,20 @@ defaultOptions =
15641817 }
15651818
15661819
1567−staticRoot =
1568− VirtualDom.node "style" [] [ VirtualDom.text Internal.Style.rules ]
1820+staticRoot : OptionRecord -> VirtualDom.Node msg
1821+staticRoot opts =
1822+ case opts.mode of
1823+ Layout ->
1824+ -- wrap the style node in a div to prevent `Dark Reader` from blowin up the dom.
1825+ VirtualDom.node "div"
1826+ []
1827+ [ VirtualDom.node "style" [] [ VirtualDom.text Internal.Style.rules ] ]
1828+
1829+ NoStaticStyleSheet ->
1830+ VirtualDom.text ""
1831+
1832+ WithVirtualCss ->
1833+ VirtualDom.node "elm-ui-static-rules" [ VirtualDom.property "rules" (Encode.string Internal.Style.rules) ] []
15691834
15701835
15711836addWhen ifThis x to =
@@ -1648,6 +1913,21 @@ filter attrs =
16481913 attrs
16491914
16501915
1916+isContent len =
1917+ case len of
1918+ Content ->
1919+ True
1920+
1921+ Max _ l ->
1922+ isContent l
1923+
1924+ Min _ l ->
1925+ isContent l
1926+
1927+ _ ->
1928+ False
1929+
1930+
16511931get : List (Attribute aligned msg) -> (Attribute aligned msg -> Bool) -> List (Attribute aligned msg)
16521932get attrs isAttr =
16531933 attrs
@@ -1668,7 +1948,7 @@ type Spacing
16681948
16691949
16701950type Padding
1671− = Padding String Int Int Int Int
1951+ = Padding String Float Float Float Float
16721952
16731953
16741954extractSpacingAndPadding : List (Attribute aligned msg) -> ( Maybe Padding, Maybe Spacing )
@@ -1764,35 +2044,44 @@ getHeight attrs =
17642044 Nothing
17652045
17662046
2047+textElementClasses : String
2048+textElementClasses =
2049+ classes.any
2050+ ++ " "
2051+ ++ classes.text
2052+ ++ " "
2053+ ++ classes.widthContent
2054+ ++ " "
2055+ ++ classes.heightContent
2056+
2057+
17672058textElement : String -> VirtualDom.Node msg
17682059textElement str =
17692060 Html.div
17702061 [ Html.Attributes.class
1771− (String.join " "
1772− [ classes.any
1773− , classes.text
1774− , classes.widthContent
1775− , classes.heightContent
1776− ]
1777− )
2062+ textElementClasses
17782063 ]
17792064 [ Html.text str ]
17802065
17812066
2067+textElementFillClasses : String
2068+textElementFillClasses =
2069+ classes.any
2070+ ++ " "
2071+ ++ classes.text
2072+ ++ " "
2073+ ++ classes.widthFill
2074+ ++ " "
2075+ ++ classes.heightFill
2076+
2077+
17822078textElementFill : String -> VirtualDom.Node msg
17832079textElementFill str =
1784− VirtualDom.node "div"
1785− [ VirtualDom.property "className"
1786− (Json.string <|
1787− String.join " "
1788− [ classes.any
1789− , classes.text
1790− , classes.widthFill
1791− , classes.heightFill
1792− ]
1793− )
2080+ Html.div
2081+ [ Html.Attributes.class
2082+ textElementFillClasses
17942083 ]
1795− [ VirtualDom.text str ]
2084+ [ Html.text str ]
17962085
17972086
17982087type Children x
@@ -1800,10 +2089,6 @@ type Children x
18002089 | Keyed (List ( String, x ))
18012090
18022091
1803−
1804−-- toHtml : OptionRecord -> Element msg -> VirtualDom.Node msg
1805−
1806−
18072092toHtml mode el =
18082093 case el of
18092094 Unstyled html ->
@@ -1839,8 +2124,7 @@ renderRoot optionList attributes child =
18392124
18402125
18412126type RenderMode
1842− = Viewport
1843− | Layout
2127+ = Layout
18442128 | NoStaticStyleSheet
18452129 | WithVirtualCss
18462130
@@ -1889,8 +2173,8 @@ rootStyle =
18892173 , SansSerif
18902174 ]
18912175 in
1892− [ StyleClass Flag.bgColor (Colored ("bg-color-" ++ formatColorClass (Rgba 1 1 1 0)) "background-color" (Rgba 1 1 1 0))
1893− , StyleClass Flag.fontColor (Colored ("font-color-" ++ formatColorClass (Rgba 0 0 0 1)) "color" (Rgba 0 0 0 1))
2176+ [ StyleClass Flag.bgColor (Colored ("bg-" ++ formatColorClass (Rgba 1 1 1 0)) "background-color" (Rgba 1 1 1 0))
2177+ , StyleClass Flag.fontColor (Colored ("fc-" ++ formatColorClass (Rgba 0 0 0 1)) "color" (Rgba 0 0 0 1))
18942178 , StyleClass Flag.fontSize (FontSize 20)
18952179 , StyleClass Flag.fontFamily <|
18962180 FontFamily (List.foldl renderFontClassName "font-" families)
@@ -1922,14 +2206,49 @@ renderFontClassName font current =
19222206 |> String.toLower
19232207 |> String.words
19242208 |> String.join "-"
2209+
2210+ FontWith { name } ->
2211+ name
2212+ |> String.toLower
2213+ |> String.words
2214+ |> String.join "-"
19252215 )
19262216
19272217
19282218renderFocusStyle :
19292219 FocusStyle
1930− -> Style
2220+ -> List Style
19312221renderFocusStyle focus =
1932− Style (Internal.Style.dot classes.any ++ ":focus .focusable, " ++ Internal.Style.dot classes.any ++ ".focusable:focus")
2222+ [ Style (Internal.Style.dot classes.focusedWithin ++ ":focus-within")
2223+ (List.filterMap identity
2224+ [ Maybe.map (\color -> Property "border-color" (formatColor color)) focus.borderColor
2225+ , Maybe.map (\color -> Property "background-color" (formatColor color)) focus.backgroundColor
2226+ , Maybe.map
2227+ (\shadow ->
2228+ Property "box-shadow"
2229+ (formatBoxShadow
2230+ { color = shadow.color
2231+ , offset =
2232+ shadow.offset
2233+ |> Tuple.mapFirst toFloat
2234+ |> Tuple.mapSecond toFloat
2235+ , inset = False
2236+ , blur =
2237+ toFloat shadow.blur
2238+ , size =
2239+ toFloat shadow.size
2240+ }
2241+ )
2242+ )
2243+ focus.shadow
2244+ , Just <| Property "outline" "none"
2245+ ]
2246+ )
2247+ , Style
2248+ ((Internal.Style.dot classes.any ++ ":focus .focusable, ")
2249+ ++ (Internal.Style.dot classes.any ++ ".focusable:focus, ")
2250+ ++ (".ui-slide-bar:focus + " ++ Internal.Style.dot classes.any ++ " .focusable-thumb")
2251+ )
19332252 (List.filterMap identity
19342253 [ Maybe.map (\color -> Property "border-color" (formatColor color)) focus.borderColor
19352254 , Maybe.map (\color -> Property "background-color" (formatColor color)) focus.backgroundColor
@@ -1952,6 +2271,7 @@ renderFocusStyle focus =
19522271 , Just <| Property "outline" "none"
19532272 ]
19542273 )
2274+ ]
19552275
19562276
19572277focusDefaultStyle : { backgroundColor : Maybe Color, borderColor : Maybe Color, shadow : Maybe Shadow }
@@ -1963,7 +2283,7 @@ focusDefaultStyle =
19632283 { color =
19642284 Rgba (155 / 255) (203 / 255) 1 1
19652285 , offset = ( 0, 0 )
1966− , blur = 3
2286+ , blur = 0
19672287 , size = 3
19682288 }
19692289 }
@@ -2031,498 +2351,734 @@ optionsToRecord options =
20312351 options
20322352
20332353
2034−renderFont : List Font -> String
2035−renderFont families =
2354+toStyleSheet : OptionRecord -> List Style -> VirtualDom.Node msg
2355+toStyleSheet options styleSheet =
2356+ case options.mode of
2357+ Layout ->
2358+ -- wrap the style node in a div to prevent `Dark Reader` from blowin up the dom.
2359+ VirtualDom.node "div"
2360+ []
2361+ [ VirtualDom.node "style"
2362+ []
2363+ [ VirtualDom.text (toStyleSheetString options styleSheet) ]
2364+ ]
2365+
2366+ NoStaticStyleSheet ->
2367+ -- wrap the style node in a div to prevent `Dark Reader` from blowin up the dom.
2368+ VirtualDom.node "div"
2369+ []
2370+ [ VirtualDom.node "style"
2371+ []
2372+ [ VirtualDom.text (toStyleSheetString options styleSheet) ]
2373+ ]
2374+
2375+ WithVirtualCss ->
2376+ VirtualDom.node "elm-ui-rules"
2377+ [ VirtualDom.property "rules"
2378+ (encodeStyles options styleSheet)
2379+ ]
2380+ []
2381+
2382+
2383+renderTopLevelValues rules =
20362384 let
2037− fontName font =
2385+ withImport font =
20382386 case font of
2039− Serif ->
2040− "serif"
2387+ ImportFont _ url ->
2388+ Just ("@import url('" ++ url ++ "');")
2389+
2390+ -- FontWith with ->
2391+ -- case with.url of
2392+ -- Just x ->
2393+ -- Just ("@import url('" ++ x ++ "');")
2394+ -- Nothing ->
2395+ -- Nothing
2396+ _ ->
2397+ Nothing
20412398
2042− SansSerif ->
2043− "sans-serif"
2399+ allNames =
2400+ List.map Tuple.first rules
20442401
2045− Monospace ->
2046− "monospace"
2402+ fontImports ( name, typefaces ) =
2403+ let
2404+ imports =
2405+ String.join "\n" (List.filterMap withImport typefaces)
2406+ in
2407+ imports
20472408
2048− Typeface name ->
2049− "\"" ++ name ++ "\""
2409+ fontAdjustments ( name, typefaces ) =
2410+ case typefaceAdjustment typefaces of
2411+ Nothing ->
2412+ String.join ""
2413+ (List.map (renderNullAdjustmentRule name) allNames)
20502414
2051− ImportFont name url ->
2052− "\"" ++ name ++ "\""
2415+ Just adjustment ->
2416+ String.join ""
2417+ (List.map (renderFontAdjustmentRule name adjustment) allNames)
20532418 in
2054− families
2055− |> List.map fontName
2056− |> String.join ", "
2419+ String.join "\n" (List.map fontImports rules)
2420+ ++ String.join "\n" (List.map fontAdjustments rules)
20572421
20582422
2059−toStyleSheet : OptionRecord -> List Style -> VirtualDom.Node msg
2060−toStyleSheet options styleSheet =
2061− VirtualDom.node "style" [] [ VirtualDom.text (toStyleSheetString options styleSheet) ]
2423+renderNullAdjustmentRule fontToAdjust otherFontName =
2424+ let
2425+ name =
2426+ if fontToAdjust == otherFontName then
2427+ fontToAdjust
2428+
2429+ else
2430+ otherFontName ++ " ." ++ fontToAdjust
2431+ in
2432+ String.join " "
2433+ [ bracket
2434+ ("."
2435+ ++ name
2436+ ++ "."
2437+ ++ classes.sizeByCapital
2438+ ++ ", "
2439+ ++ "."
2440+ ++ name
2441+ ++ " ."
2442+ ++ classes.sizeByCapital
2443+ )
2444+ [ ( "line-height", "1" )
2445+ ]
2446+ , bracket
2447+ ("."
2448+ ++ name
2449+ ++ "."
2450+ ++ classes.sizeByCapital
2451+ ++ "> ."
2452+ ++ Internal.Style.classes.text
2453+ ++ ", ."
2454+ ++ name
2455+ ++ " ."
2456+ ++ classes.sizeByCapital
2457+ ++ " > ."
2458+ ++ Internal.Style.classes.text
2459+ )
2460+ [ ( "vertical-align", "0" )
2461+ , ( "line-height", "1" )
2462+ ]
2463+ ]
20622464
20632465
2064−toStyleSheetString : OptionRecord -> List Style -> String
2065−toStyleSheetString options stylesheet =
2466+fontRule name modifier ( parentAdj, textAdjustment ) =
2467+ [ bracket
2468+ ("."
2469+ ++ name
2470+ ++ "."
2471+ ++ modifier
2472+ ++ ", "
2473+ ++ "."
2474+ ++ name
2475+ ++ " ."
2476+ ++ modifier
2477+ )
2478+ parentAdj
2479+ , bracket
2480+ ("."
2481+ ++ name
2482+ ++ "."
2483+ ++ modifier
2484+ ++ "> ."
2485+ ++ Internal.Style.classes.text
2486+ ++ ", ."
2487+ ++ name
2488+ ++ " ."
2489+ ++ modifier
2490+ ++ " > ."
2491+ ++ Internal.Style.classes.text
2492+ )
2493+ textAdjustment
2494+ ]
2495+
2496+
2497+renderFontAdjustmentRule fontToAdjust ( full, capital ) otherFontName =
20662498 let
2067− renderTopLevels rule =
2068− case rule of
2069− FontFamily name typefaces ->
2070− let
2071− getImports font =
2072− case font of
2073− ImportFont _ url ->
2074− Just ("@import url('" ++ url ++ "');")
2499+ name =
2500+ if fontToAdjust == otherFontName then
2501+ fontToAdjust
20752502
2076− _ ->
2077− Nothing
2078− in
2079− typefaces
2080− |> List.filterMap getImports
2081− |> String.join "\n"
2082− |> Just
2503+ else
2504+ otherFontName ++ " ." ++ fontToAdjust
2505+ in
2506+ String.join " "
2507+ (fontRule name classes.sizeByCapital capital ++ fontRule name classes.fullSize full)
20832508
2084− _ ->
2085− Nothing
20862509
2087− renderProps force (Property key val) existing =
2088− if force then
2089− existing ++ "\n " ++ key ++ ": " ++ val ++ " !important;"
2510+bracket selector rules =
2511+ let
2512+ renderPair ( name, val ) =
2513+ name ++ ": " ++ val ++ ";"
2514+ in
2515+ selector ++ " {" ++ String.join "" (List.map renderPair rules) ++ "}"
20902516
2091− else
2092− existing ++ "\n " ++ key ++ ": " ++ val ++ ";"
20932517
2094− renderStyle maybePseudo selector props =
2095− case maybePseudo of
2518+fontAdjustmentRules converted =
2519+ ( [ ( "display", "block" )
2520+ ]
2521+ , [ ( "display", "inline-block" )
2522+ , ( "line-height", String.fromFloat converted.height )
2523+ , ( "vertical-align", String.fromFloat converted.vertical ++ "em" )
2524+ , ( "font-size", String.fromFloat converted.size ++ "em" )
2525+ ]
2526+ )
2527+
2528+
2529+typefaceAdjustment typefaces =
2530+ List.foldl
2531+ (\face found ->
2532+ case found of
20962533 Nothing ->
2097− selector ++ "{" ++ List.foldl (renderProps False) "" props ++ "\n}"
2534+ case face of
2535+ FontWith with ->
2536+ case with.adjustment of
2537+ Nothing ->
2538+ found
2539+
2540+ Just adjustment ->
2541+ Just
2542+ ( fontAdjustmentRules
2543+ (.full (convertAdjustment adjustment))
2544+ , fontAdjustmentRules
2545+ (.capital (convertAdjustment adjustment))
2546+ )
20982547
2099− Just pseudo ->
2100− case pseudo of
2101− Hover ->
2102− case options.hover of
2103− NoHover ->
2104− ""
2548+ _ ->
2549+ found
2550+
2551+ Just _ ->
2552+ found
2553+ )
2554+ Nothing
2555+ typefaces
21052556
2106− ForceHover ->
2107− selector ++ "-hv {" ++ List.foldl (renderProps True) "" props ++ "\n}"
21082557
2109− AllowHover ->
2110− selector ++ "-hv:hover {" ++ List.foldl (renderProps False) "" props ++ "\n}"
2558+fontName font =
2559+ case font of
2560+ Serif ->
2561+ "serif"
21112562
2112− Focus ->
2113− let
2114− renderedProps =
2115− List.foldl (renderProps False) "" props
2116− in
2117− String.join "\n"
2118− [ selector
2119− ++ "-fs:focus {"
2120− ++ renderedProps
2121− ++ "\n}"
2122− , "."
2123− ++ classes.any
2124− ++ ":focus ~ "
2125− ++ selector
2126− ++ "-fs:not(.focus) {"
2127− ++ renderedProps
2128− ++ "\n}"
2129− , "."
2130− ++ classes.any
2131− ++ ":focus "
2132− ++ selector
2133− ++ "-fs {"
2134− ++ renderedProps
2135− ++ "\n}"
2136− , ".focusable-parent:focus ~ "
2137− ++ "."
2138− ++ classes.any
2139− ++ " "
2140− ++ selector
2141− ++ "-fs {"
2142− ++ renderedProps
2143− ++ "\n}"
2144− ]
2563+ SansSerif ->
2564+ "sans-serif"
21452565
2146− Active ->
2147− selector ++ "-act:active {" ++ List.foldl (renderProps False) "" props ++ "\n}"
2566+ Monospace ->
2567+ "monospace"
21482568
2149− renderStyleRule rule maybePseudo =
2150− case rule of
2151− Style selector props ->
2152− renderStyle maybePseudo selector props
2569+ Typeface name ->
2570+ "\"" ++ name ++ "\""
2571+
2572+ ImportFont name url ->
2573+ "\"" ++ name ++ "\""
2574+
2575+ FontWith { name } ->
2576+ "\"" ++ name ++ "\""
2577+
2578+
2579+topLevelValue rule =
2580+ case rule of
2581+ FontFamily name typefaces ->
2582+ Just ( name, typefaces )
2583+
2584+ _ ->
2585+ Nothing
21532586
2154− Shadows name prop ->
2155− renderStyle
2156− maybePseudo
2157− ("." ++ name)
2158− [ Property "box-shadow" prop
2159− ]
21602587
2161− Transparency name transparency ->
2588+renderProps force (Property key val) existing =
2589+ if force then
2590+ existing ++ "\n " ++ key ++ ": " ++ val ++ " !important;"
2591+
2592+ else
2593+ existing ++ "\n " ++ key ++ ": " ++ val ++ ";"
2594+
2595+
2596+encodeStyles options stylesheet =
2597+ stylesheet
2598+ |> List.map
2599+ (\style ->
2600+ let
2601+ styled =
2602+ renderStyleRule options style Nothing
2603+ in
2604+ ( getStyleName style, Encode.list Encode.string styled )
2605+ )
2606+ |> Encode.object
2607+
2608+
2609+toStyleSheetString : OptionRecord -> List Style -> String
2610+toStyleSheetString options stylesheet =
2611+ let
2612+ combine style rendered =
2613+ { rules = rendered.rules ++ renderStyleRule options style Nothing
2614+ , topLevel =
2615+ case topLevelValue style of
2616+ Nothing ->
2617+ rendered.topLevel
2618+
2619+ Just topLevel ->
2620+ topLevel :: rendered.topLevel
2621+ }
2622+ in
2623+ case List.foldl combine { topLevel = [], rules = [] } stylesheet of
2624+ { topLevel, rules } ->
2625+ renderTopLevelValues topLevel ++ String.concat rules
2626+
2627+
2628+renderStyle : OptionRecord -> Maybe PseudoClass -> String -> List Property -> List String
2629+renderStyle options maybePseudo selector props =
2630+ case maybePseudo of
2631+ Nothing ->
2632+ [ selector ++ "{" ++ List.foldl (renderProps False) "" props ++ "\n}" ]
2633+
2634+ Just pseudo ->
2635+ case pseudo of
2636+ Hover ->
2637+ case options.hover of
2638+ NoHover ->
2639+ []
2640+
2641+ ForceHover ->
2642+ [ selector ++ "-hv {" ++ List.foldl (renderProps True) "" props ++ "\n}" ]
2643+
2644+ AllowHover ->
2645+ [ selector ++ "-hv:hover {" ++ List.foldl (renderProps False) "" props ++ "\n}" ]
2646+
2647+ Focus ->
21622648 let
2163− opacity =
2164− (1 - transparency)
2165− |> min 1
2166− |> max 0
2649+ renderedProps =
2650+ List.foldl (renderProps False) "" props
21672651 in
2168− renderStyle
2169− maybePseudo
2170− ("." ++ name)
2171− [ Property "opacity" (String.fromFloat opacity)
2172− ]
2652+ [ selector ++ "-fs:focus {" ++ renderedProps ++ "\n}"
2653+ , ("." ++ classes.any ++ ":focus " ++ selector ++ "-fs {")
2654+ ++ renderedProps
2655+ ++ "\n}"
2656+ , (selector ++ "-fs:focus-within {")
2657+ ++ renderedProps
2658+ ++ "\n}"
2659+ , (".ui-slide-bar:focus + " ++ Internal.Style.dot classes.any ++ " .focusable-thumb" ++ selector ++ "-fs {")
2660+ ++ renderedProps
2661+ ++ "\n}"
2662+ ]
21732663
2174− FontSize i ->
2175− renderStyle
2176− maybePseudo
2177− (".font-size-" ++ String.fromInt i)
2178− [ Property "font-size" (String.fromInt i ++ "px")
2179− ]
2664+ Active ->
2665+ [ selector ++ "-act:active {" ++ List.foldl (renderProps False) "" props ++ "\n}" ]
21802666
2181− FontFamily name typefaces ->
2182− renderStyle
2183− maybePseudo
2184− ("." ++ name)
2185− [ Property "font-family" (renderFont typefaces)
2186− ]
21872667
2188− Single class prop val ->
2189− renderStyle
2190− maybePseudo
2191− ("." ++ class)
2192− [ Property prop val
2193− ]
2668+renderStyleRule : OptionRecord -> Style -> Maybe PseudoClass -> List String
2669+renderStyleRule options rule maybePseudo =
2670+ case rule of
2671+ Style selector props ->
2672+ renderStyle options maybePseudo selector props
21942673
2195− Colored class prop color ->
2196− renderStyle
2197− maybePseudo
2198− ("." ++ class)
2199− [ Property prop (formatColor color)
2200− ]
2674+ Shadows name prop ->
2675+ renderStyle options
2676+ maybePseudo
2677+ ("." ++ name)
2678+ [ Property "box-shadow" prop
2679+ ]
22012680
2202− SpacingStyle cls x y ->
2203− let
2204− class =
2205− "." ++ cls
2681+ Transparency name transparency ->
2682+ let
2683+ opacity =
2684+ (1 - transparency)
2685+ |> min 1
2686+ |> max 0
2687+ in
2688+ renderStyle options
2689+ maybePseudo
2690+ ("." ++ name)
2691+ [ Property "opacity" (String.fromFloat opacity)
2692+ ]
22062693
2207− xPx =
2208− String.fromInt x ++ "px"
2694+ FontSize i ->
2695+ renderStyle options
2696+ maybePseudo
2697+ (".font-size-" ++ String.fromInt i)
2698+ [ Property "font-size" (String.fromInt i ++ "px")
2699+ ]
22092700
2210− yPx =
2211− String.fromInt y ++ "px"
2701+ FontFamily name typefaces ->
2702+ let
2703+ features =
2704+ typefaces
2705+ |> List.filterMap renderVariants
2706+ |> String.join ", "
2707+
2708+ families =
2709+ [ Property "font-family"
2710+ (typefaces
2711+ |> List.map fontName
2712+ |> String.join ", "
2713+ )
2714+ , Property "font-feature-settings" features
2715+ , Property "font-variant"
2716+ (if List.any hasSmallCaps typefaces then
2717+ "small-caps"
22122718
2213− row =
2214− "." ++ Internal.Style.classes.row
2719+ else
2720+ "normal"
2721+ )
2722+ ]
2723+ in
2724+ renderStyle options
2725+ maybePseudo
2726+ ("." ++ name)
2727+ families
22152728
2216− wrappedRow =
2217− "." ++ Internal.Style.classes.wrapped ++ row
2729+ Single class prop val ->
2730+ renderStyle options
2731+ maybePseudo
2732+ ("." ++ class)
2733+ [ Property prop val
2734+ ]
22182735
2219− column =
2220− "." ++ Internal.Style.classes.column
2736+ Colored class prop color ->
2737+ renderStyle options
2738+ maybePseudo
2739+ ("." ++ class)
2740+ [ Property prop (formatColor color)
2741+ ]
22212742
2222− page =
2223− "." ++ Internal.Style.classes.page
2743+ SpacingStyle cls x y ->
2744+ let
2745+ class =
2746+ "." ++ cls
22242747
2225− paragraph =
2226− "." ++ Internal.Style.classes.paragraph
2748+ halfX =
2749+ String.fromFloat (toFloat x / 2) ++ "px"
22272750
2228− left =
2229− "." ++ Internal.Style.classes.alignLeft
2751+ halfY =
2752+ String.fromFloat (toFloat y / 2) ++ "px"
22302753
2231− right =
2232− "." ++ Internal.Style.classes.alignRight
2754+ xPx =
2755+ String.fromInt x ++ "px"
22332756
2234− any =
2235− "." ++ Internal.Style.classes.any
2757+ yPx =
2758+ String.fromInt y ++ "px"
22362759
2237− single =
2238− "." ++ Internal.Style.classes.single
2239− in
2240− String.concat
2241− [ renderStyle maybePseudo (class ++ row ++ " > " ++ any) [ Property "margin-right" xPx ]
2760+ row =
2761+ "." ++ Internal.Style.classes.row
22422762
2243− -- margins don't apply to last element of normal, unwrapped rows
2244− , renderStyle maybePseudo (class ++ row ++ " > " ++ any ++ ":last-child") [ Property "margin" "0" ]
2763+ wrappedRow =
2764+ "." ++ Internal.Style.classes.wrapped ++ row
22452765
2246− -- For wrapped rows, margins always apply because we handle "canceling out" the other margins manually in the element.
2247− , renderStyle maybePseudo
2248− (class ++ wrappedRow ++ " > " ++ any)
2249− [ Property "margin" ("0 " ++ xPx ++ " " ++ yPx ++ " 0")
2250− ]
2251− , renderStyle maybePseudo
2252− (class ++ wrappedRow ++ " > " ++ any ++ ":last-child")
2253− [ Property "margin-right" "0"
2254− ]
2766+ column =
2767+ "." ++ Internal.Style.classes.column
22552768
2256− -- columns
2257− , renderStyle maybePseudo (class ++ column ++ " > " ++ any ++ " + " ++ any) [ Property "margin-top" yPx ]
2258− , renderStyle maybePseudo (class ++ page ++ " > " ++ any ++ " + " ++ any) [ Property "margin-top" yPx ]
2259− , renderStyle maybePseudo (class ++ page ++ " > " ++ left) [ Property "margin-right" xPx ]
2260− , renderStyle maybePseudo (class ++ page ++ " > " ++ right) [ Property "margin-left" xPx ]
2261− , renderStyle
2262− maybePseudo
2263− (class ++ paragraph)
2264− [ Property "line-height" ("calc(1em + " ++ String.fromInt y ++ "px)")
2265− ]
2266− , renderStyle
2267− maybePseudo
2268− ("textarea" ++ class)
2269− [ Property "line-height" ("calc(1em + " ++ String.fromInt y ++ "px)")
2270− ]
2769+ page =
2770+ "." ++ Internal.Style.classes.page
22712771
2272− -- , renderStyle
2273− -- maybePseudo
2274− -- (class ++ paragraph ++ " > " ++ any)
2275− -- [ Property "margin-right" xPx
2276− -- , Property "margin-bottom" yPx
2277− -- ]
2278− , renderStyle
2279− maybePseudo
2280− (class ++ paragraph ++ " > " ++ left)
2281− [ Property "margin-right" xPx
2282− ]
2283− , renderStyle
2284− maybePseudo
2285− (class ++ paragraph ++ " > " ++ right)
2286− [ Property "margin-left" xPx
2287− ]
2288− , renderStyle
2289− maybePseudo
2290− (class ++ paragraph ++ "::after")
2291− [ Property "content" "''"
2292− , Property "display" "block"
2293− , Property "height" "0"
2294− , Property "width" "0"
2295− , Property "margin-top" (String.fromInt (-1 * (y // 2)) ++ "px")
2296− ]
2297− , renderStyle
2298− maybePseudo
2299− (class ++ paragraph ++ "::before")
2300− [ Property "content" "''"
2301− , Property "display" "block"
2302− , Property "height" "0"
2303− , Property "width" "0"
2304− , Property "margin-bottom" (String.fromInt (-1 * (y // 2)) ++ "px")
2305− ]
2306− ]
2772+ paragraph =
2773+ "." ++ Internal.Style.classes.paragraph
23072774
2308− PaddingStyle cls top right bottom left ->
2309− let
2310− class =
2311− "."
2312− ++ cls
2313− in
2314− renderStyle
2315− maybePseudo
2316− class
2317− [ Property "padding"
2318− (String.fromInt top
2319− ++ "px "
2320− ++ String.fromInt right
2321− ++ "px "
2322− ++ String.fromInt bottom
2323− ++ "px "
2324− ++ String.fromInt left
2325− ++ "px"
2326− )
2327− ]
2775+ left =
2776+ "." ++ Internal.Style.classes.alignLeft
23282777
2329− GridTemplateStyle template ->
2330− let
2331− class =
2332− ".grid-rows-"
2333− ++ String.join "-" (List.map lengthClassName template.rows)
2334− ++ "-cols-"
2335− ++ String.join "-" (List.map lengthClassName template.columns)
2336− ++ "-space-x-"
2337− ++ lengthClassName (Tuple.first template.spacing)
2338− ++ "-space-y-"
2339− ++ lengthClassName (Tuple.second template.spacing)
2340−
2341− ySpacing =
2342− toGridLength (Tuple.second template.spacing)
2343−
2344− xSpacing =
2345− toGridLength (Tuple.first template.spacing)
2346−
2347− toGridLength x =
2348− toGridLengthHelper Nothing Nothing x
2349−
2350− toGridLengthHelper minimum maximum x =
2351− case x of
2352− Px px ->
2353− String.fromInt px ++ "px"
2354−
2355− Content ->
2356− case ( minimum, maximum ) of
2357− ( Nothing, Nothing ) ->
2358− "max-content"
2359−
2360− ( Just minSize, Nothing ) ->
2361− "minmax(" ++ String.fromInt minSize ++ "px, " ++ "max-content)"
2362−
2363− ( Nothing, Just maxSize ) ->
2364− "minmax(max-content, " ++ String.fromInt maxSize ++ "px)"
2365−
2366− ( Just minSize, Just maxSize ) ->
2367− "minmax(" ++ String.fromInt minSize ++ "px, " ++ String.fromInt maxSize ++ "px)"
2368−
2369− Fill i ->
2370− case ( minimum, maximum ) of
2371− ( Nothing, Nothing ) ->
2372− String.fromInt i ++ "fr"
2373−
2374− ( Just minSize, Nothing ) ->
2375− "minmax(" ++ String.fromInt minSize ++ "px, " ++ String.fromInt i ++ "fr" ++ "fr)"
2376−
2377− ( Nothing, Just maxSize ) ->
2378− "minmax(max-content, " ++ String.fromInt maxSize ++ "px)"
2379−
2380− ( Just minSize, Just maxSize ) ->
2381− "minmax(" ++ String.fromInt minSize ++ "px, " ++ String.fromInt maxSize ++ "px)"
2382−
2383− Min m len ->
2384− toGridLengthHelper (Just m) maximum len
2385−
2386− Max m len ->
2387− toGridLengthHelper minimum (Just m) len
2388−
2389− msColumns =
2390− template.columns
2391− |> List.map toGridLength
2392− |> String.join ySpacing
2393− |> (\x -> "-ms-grid-columns: " ++ x ++ ";")
2394−
2395− msRows =
2396− template.columns
2397− |> List.map toGridLength
2398− |> String.join ySpacing
2399− |> (\x -> "-ms-grid-rows: " ++ x ++ ";")
2400−
2401− base =
2402− class ++ "{" ++ msColumns ++ msRows ++ "}"
2403−
2404− columns =
2405− template.columns
2406− |> List.map toGridLength
2407− |> String.join " "
2408− |> (\x -> "grid-template-columns: " ++ x ++ ";")
2409−
2410− rows =
2411− template.rows
2412− |> List.map toGridLength
2413− |> String.join " "
2414− |> (\x -> "grid-template-rows: " ++ x ++ ";")
2415−
2416− gapX =
2417− "grid-column-gap:" ++ toGridLength (Tuple.first template.spacing) ++ ";"
2418−
2419− gapY =
2420− "grid-row-gap:" ++ toGridLength (Tuple.second template.spacing) ++ ";"
2421−
2422− modernGrid =
2423− class ++ "{" ++ columns ++ rows ++ gapX ++ gapY ++ "}"
2424−
2425− supports =
2426− "@supports (display:grid) {" ++ modernGrid ++ "}"
2427− in
2428− base ++ supports
2778+ right =
2779+ "." ++ Internal.Style.classes.alignRight
24292780
2430− GridPosition position ->
2431− let
2432− class =
2433− ".grid-pos-"
2434− ++ String.fromInt position.row
2435− ++ "-"
2436− ++ String.fromInt position.col
2437− ++ "-"
2438− ++ String.fromInt position.width
2439− ++ "-"
2440− ++ String.fromInt position.height
2441−
2442− msPosition =
2443− String.join " "
2444− [ "-ms-grid-row: "
2445− ++ String.fromInt position.row
2446− ++ ";"
2447− , "-ms-grid-row-span: "
2448− ++ String.fromInt position.height
2449− ++ ";"
2450− , "-ms-grid-column: "
2451− ++ String.fromInt position.col
2452− ++ ";"
2453− , "-ms-grid-column-span: "
2454− ++ String.fromInt position.width
2455− ++ ";"
2456− ]
2457−
2458− base =
2459− class ++ "{" ++ msPosition ++ "}"
2460−
2461− modernPosition =
2462− String.join " "
2463− [ "grid-row: "
2464− ++ String.fromInt position.row
2465− ++ " / "
2466− ++ String.fromInt (position.row + position.height)
2467− ++ ";"
2468− , "grid-column: "
2469− ++ String.fromInt position.col
2470− ++ " / "
2471− ++ String.fromInt (position.col + position.width)
2472− ++ ";"
2473− ]
2474−
2475− modernGrid =
2476− class ++ "{" ++ modernPosition ++ "}"
2477−
2478− supports =
2479− "@supports (display:grid) {" ++ modernGrid ++ "}"
2480− in
2481− base ++ supports
2781+ any =
2782+ "." ++ Internal.Style.classes.any
24822783
2483− PseudoSelector class styles ->
2484− let
2485− renderPseudoRule style =
2486− renderStyleRule style (Just class)
2487− in
2488− List.map renderPseudoRule styles
2784+ single =
2785+ "." ++ Internal.Style.classes.single
2786+ in
2787+ List.concat
2788+ [ renderStyle options maybePseudo (class ++ row ++ " > " ++ any ++ " + " ++ any) [ Property "margin-left" xPx ]
2789+
2790+ -- margins don't apply to last element of normal, unwrapped rows
2791+ -- , renderStyle options maybePseudo (class ++ row ++ " > " ++ any ++ ":first-child") [ Property "margin" "0" ]
2792+ -- For wrapped rows, margins always apply because we handle "canceling out" the other margins manually in the element.
2793+ , renderStyle options
2794+ maybePseudo
2795+ (class ++ wrappedRow ++ " > " ++ any)
2796+ [ Property "margin" (halfY ++ " " ++ halfX)
2797+ ]
2798+
2799+ -- , renderStyle options maybePseudo
2800+ -- (class ++ wrappedRow ++ " > " ++ any ++ ":last-child")
2801+ -- [ Property "margin-right" "0"
2802+ -- ]
2803+ -- columns
2804+ , renderStyle options maybePseudo (class ++ column ++ " > " ++ any ++ " + " ++ any) [ Property "margin-top" yPx ]
2805+ , renderStyle options maybePseudo (class ++ page ++ " > " ++ any ++ " + " ++ any) [ Property "margin-top" yPx ]
2806+ , renderStyle options maybePseudo (class ++ page ++ " > " ++ left) [ Property "margin-right" xPx ]
2807+ , renderStyle options maybePseudo (class ++ page ++ " > " ++ right) [ Property "margin-left" xPx ]
2808+ , renderStyle options
2809+ maybePseudo
2810+ (class ++ paragraph)
2811+ [ Property "line-height" ("calc(1em + " ++ String.fromInt y ++ "px)")
2812+ ]
2813+ , renderStyle options
2814+ maybePseudo
2815+ ("textarea" ++ any ++ class)
2816+ [ Property "line-height" ("calc(1em + " ++ String.fromInt y ++ "px)")
2817+ , Property "height" ("calc(100% + " ++ String.fromInt y ++ "px)")
2818+ ]
2819+
2820+ -- , renderStyle options
2821+ -- maybePseudo
2822+ -- (class ++ paragraph ++ " > " ++ any)
2823+ -- [ Property "margin-right" xPx
2824+ -- , Property "margin-bottom" yPx
2825+ -- ]
2826+ , renderStyle options
2827+ maybePseudo
2828+ (class ++ paragraph ++ " > " ++ left)
2829+ [ Property "margin-right" xPx
2830+ ]
2831+ , renderStyle options
2832+ maybePseudo
2833+ (class ++ paragraph ++ " > " ++ right)
2834+ [ Property "margin-left" xPx
2835+ ]
2836+ , renderStyle options
2837+ maybePseudo
2838+ (class ++ paragraph ++ "::after")
2839+ [ Property "content" "''"
2840+ , Property "display" "block"
2841+ , Property "height" "0"
2842+ , Property "width" "0"
2843+ , Property "margin-top" (String.fromInt (-1 * (y // 2)) ++ "px")
2844+ ]
2845+ , renderStyle options
2846+ maybePseudo
2847+ (class ++ paragraph ++ "::before")
2848+ [ Property "content" "''"
2849+ , Property "display" "block"
2850+ , Property "height" "0"
2851+ , Property "width" "0"
2852+ , Property "margin-bottom" (String.fromInt (-1 * (y // 2)) ++ "px")
2853+ ]
2854+ ]
2855+
2856+ PaddingStyle cls top right bottom left ->
2857+ let
2858+ class =
2859+ "."
2860+ ++ cls
2861+ in
2862+ renderStyle options
2863+ maybePseudo
2864+ class
2865+ [ Property "padding"
2866+ (String.fromFloat top
2867+ ++ "px "
2868+ ++ String.fromFloat right
2869+ ++ "px "
2870+ ++ String.fromFloat bottom
2871+ ++ "px "
2872+ ++ String.fromFloat left
2873+ ++ "px"
2874+ )
2875+ ]
2876+
2877+ BorderWidth cls top right bottom left ->
2878+ let
2879+ class =
2880+ "."
2881+ ++ cls
2882+ in
2883+ renderStyle options
2884+ maybePseudo
2885+ class
2886+ [ Property "border-width"
2887+ (String.fromInt top
2888+ ++ "px "
2889+ ++ String.fromInt right
2890+ ++ "px "
2891+ ++ String.fromInt bottom
2892+ ++ "px "
2893+ ++ String.fromInt left
2894+ ++ "px"
2895+ )
2896+ ]
2897+
2898+ GridTemplateStyle template ->
2899+ let
2900+ class =
2901+ ".grid-rows-"
2902+ ++ String.join "-" (List.map lengthClassName template.rows)
2903+ ++ "-cols-"
2904+ ++ String.join "-" (List.map lengthClassName template.columns)
2905+ ++ "-space-x-"
2906+ ++ lengthClassName (Tuple.first template.spacing)
2907+ ++ "-space-y-"
2908+ ++ lengthClassName (Tuple.second template.spacing)
2909+
2910+ ySpacing =
2911+ toGridLength (Tuple.second template.spacing)
2912+
2913+ xSpacing =
2914+ toGridLength (Tuple.first template.spacing)
2915+
2916+ toGridLength x =
2917+ toGridLengthHelper Nothing Nothing x
2918+
2919+ toGridLengthHelper minimum maximum x =
2920+ case x of
2921+ Px px ->
2922+ String.fromInt px ++ "px"
2923+
2924+ Content ->
2925+ case ( minimum, maximum ) of
2926+ ( Nothing, Nothing ) ->
2927+ "max-content"
2928+
2929+ ( Just minSize, Nothing ) ->
2930+ "minmax(" ++ String.fromInt minSize ++ "px, " ++ "max-content)"
2931+
2932+ ( Nothing, Just maxSize ) ->
2933+ "minmax(max-content, " ++ String.fromInt maxSize ++ "px)"
2934+
2935+ ( Just minSize, Just maxSize ) ->
2936+ "minmax(" ++ String.fromInt minSize ++ "px, " ++ String.fromInt maxSize ++ "px)"
2937+
2938+ Fill i ->
2939+ case ( minimum, maximum ) of
2940+ ( Nothing, Nothing ) ->
2941+ String.fromInt i ++ "fr"
2942+
2943+ ( Just minSize, Nothing ) ->
2944+ "minmax(" ++ String.fromInt minSize ++ "px, " ++ String.fromInt i ++ "fr" ++ "fr)"
2945+
2946+ ( Nothing, Just maxSize ) ->
2947+ "minmax(max-content, " ++ String.fromInt maxSize ++ "px)"
2948+
2949+ ( Just minSize, Just maxSize ) ->
2950+ "minmax(" ++ String.fromInt minSize ++ "px, " ++ String.fromInt maxSize ++ "px)"
2951+
2952+ Min m len ->
2953+ toGridLengthHelper (Just m) maximum len
2954+
2955+ Max m len ->
2956+ toGridLengthHelper minimum (Just m) len
2957+
2958+ msColumns =
2959+ template.columns
2960+ |> List.map toGridLength
2961+ |> String.join ySpacing
2962+ |> (\x -> "-ms-grid-columns: " ++ x ++ ";")
2963+
2964+ msRows =
2965+ template.columns
2966+ |> List.map toGridLength
2967+ |> String.join ySpacing
2968+ |> (\x -> "-ms-grid-rows: " ++ x ++ ";")
2969+
2970+ base =
2971+ class ++ "{" ++ msColumns ++ msRows ++ "}"
2972+
2973+ columns =
2974+ template.columns
2975+ |> List.map toGridLength
24892976 |> String.join " "
2977+ |> (\x -> "grid-template-columns: " ++ x ++ ";")
24902978
2491− Transform transform ->
2492− let
2493− val =
2494− transformValue transform
2979+ rows =
2980+ template.rows
2981+ |> List.map toGridLength
2982+ |> String.join " "
2983+ |> (\x -> "grid-template-rows: " ++ x ++ ";")
24952984
2496− class =
2497− transformClass transform
2498− in
2499− case ( class, val ) of
2500− ( Just cls, Just v ) ->
2501− renderStyle
2502− maybePseudo
2503− ("." ++ cls)
2504− [ Property "transform"
2505− v
2506− ]
2985+ gapX =
2986+ "grid-column-gap:" ++ toGridLength (Tuple.first template.spacing) ++ ";"
25072987
2508− _ ->
2509− ""
2988+ gapY =
2989+ "grid-row-gap:" ++ toGridLength (Tuple.second template.spacing) ++ ";"
25102990
2511− combine style rendered =
2512− { rendered
2513− | rules = rendered.rules ++ renderStyleRule style Nothing
2514− , topLevel =
2515− case renderTopLevels style of
2516− Nothing ->
2517− rendered.topLevel
2991+ modernGrid =
2992+ class ++ "{" ++ columns ++ rows ++ gapX ++ gapY ++ "}"
25182993
2519− Just topLevel ->
2520− rendered.topLevel ++ topLevel
2521− }
2522− in
2523− case List.foldl combine { rules = "", topLevel = "" } stylesheet of
2524− { topLevel, rules } ->
2525− topLevel ++ rules
2994+ supports =
2995+ "@supports (display:grid) {" ++ modernGrid ++ "}"
2996+ in
2997+ [ base
2998+ , supports
2999+ ]
3000+
3001+ GridPosition position ->
3002+ let
3003+ class =
3004+ ".grid-pos-"
3005+ ++ String.fromInt position.row
3006+ ++ "-"
3007+ ++ String.fromInt position.col
3008+ ++ "-"
3009+ ++ String.fromInt position.width
3010+ ++ "-"
3011+ ++ String.fromInt position.height
3012+
3013+ msPosition =
3014+ String.join " "
3015+ [ "-ms-grid-row: "
3016+ ++ String.fromInt position.row
3017+ ++ ";"
3018+ , "-ms-grid-row-span: "
3019+ ++ String.fromInt position.height
3020+ ++ ";"
3021+ , "-ms-grid-column: "
3022+ ++ String.fromInt position.col
3023+ ++ ";"
3024+ , "-ms-grid-column-span: "
3025+ ++ String.fromInt position.width
3026+ ++ ";"
3027+ ]
3028+
3029+ base =
3030+ class ++ "{" ++ msPosition ++ "}"
3031+
3032+ modernPosition =
3033+ String.join " "
3034+ [ "grid-row: "
3035+ ++ String.fromInt position.row
3036+ ++ " / "
3037+ ++ String.fromInt (position.row + position.height)
3038+ ++ ";"
3039+ , "grid-column: "
3040+ ++ String.fromInt position.col
3041+ ++ " / "
3042+ ++ String.fromInt (position.col + position.width)
3043+ ++ ";"
3044+ ]
3045+
3046+ modernGrid =
3047+ class ++ "{" ++ modernPosition ++ "}"
3048+
3049+ supports =
3050+ "@supports (display:grid) {" ++ modernGrid ++ "}"
3051+ in
3052+ [ base
3053+ , supports
3054+ ]
3055+
3056+ PseudoSelector class styles ->
3057+ let
3058+ renderPseudoRule style =
3059+ renderStyleRule options style (Just class)
3060+ in
3061+ List.concatMap renderPseudoRule styles
3062+
3063+ Transform transform ->
3064+ let
3065+ val =
3066+ transformValue transform
3067+
3068+ class =
3069+ transformClass transform
3070+ in
3071+ case ( class, val ) of
3072+ ( Just cls, Just v ) ->
3073+ renderStyle options
3074+ maybePseudo
3075+ ("." ++ cls)
3076+ [ Property "transform"
3077+ v
3078+ ]
3079+
3080+ _ ->
3081+ []
25263082
25273083
25283084lengthClassName : Length -> String
@@ -2562,12 +3118,12 @@ formatTextShadow shadow =
25623118 ]
25633119
25643120
2565−textShadowName shadow =
3121+textShadowClass shadow =
25663122 String.concat
25673123 [ "txt"
2568− , String.fromFloat (Tuple.first shadow.offset) ++ "px"
2569− , String.fromFloat (Tuple.second shadow.offset) ++ "px"
2570− , String.fromFloat shadow.blur ++ "px"
3124+ , floatClass (Tuple.first shadow.offset) ++ "px"
3125+ , floatClass (Tuple.second shadow.offset) ++ "px"
3126+ , floatClass shadow.blur ++ "px"
25713127 , formatColorClass shadow.color
25723128 ]
25733129
@@ -2588,17 +3144,17 @@ formatBoxShadow shadow =
25883144 ]
25893145
25903146
2591−boxShadowName shadow =
3147+boxShadowClass shadow =
25923148 String.concat <|
25933149 [ if shadow.inset then
25943150 "box-inset"
25953151
25963152 else
25973153 "box-"
2598− , String.fromFloat (Tuple.first shadow.offset) ++ "px"
2599− , String.fromFloat (Tuple.second shadow.offset) ++ "px"
2600− , String.fromFloat shadow.blur ++ "px"
2601− , String.fromFloat shadow.size ++ "px"
3154+ , floatClass (Tuple.first shadow.offset) ++ "px"
3155+ , floatClass (Tuple.second shadow.offset) ++ "px"
3156+ , floatClass shadow.blur ++ "px"
3157+ , floatClass shadow.size ++ "px"
26023158 , formatColorClass shadow.color
26033159 ]
26043160
@@ -2643,6 +3199,17 @@ paddingName top right bottom left =
26433199 ++ String.fromInt left
26443200
26453201
3202+paddingNameFloat top right bottom left =
3203+ "pad-"
3204+ ++ floatClass top
3205+ ++ "-"
3206+ ++ floatClass right
3207+ ++ "-"
3208+ ++ floatClass bottom
3209+ ++ "-"
3210+ ++ floatClass left
3211+
3212+
26463213getStyleName : Style -> String
26473214getStyleName style =
26483215 case style of
@@ -2673,6 +3240,9 @@ getStyleName style =
26733240 PaddingStyle cls top right bottom left ->
26743241 cls
26753242
3243+ BorderWidth cls top right bottom left ->
3244+ cls
3245+
26763246 GridTemplateStyle template ->
26773247 "grid-rows-"
26783248 ++ String.join "-" (List.map lengthClassName template.rows)
@@ -2905,3 +3475,76 @@ onlyStyles attr =
29053475
29063476 _ ->
29073477 Nothing
3478+
3479+
3480+
3481+{- Font Adjustments -}
3482+
3483+
3484+convertAdjustment adjustment =
3485+ let
3486+ lineHeight =
3487+ 1.5
3488+
3489+ base =
3490+ lineHeight
3491+
3492+ normalDescender =
3493+ (lineHeight - 1)
3494+ / 2
3495+
3496+ oldMiddle =
3497+ lineHeight / 2
3498+
3499+ newCapitalMiddle =
3500+ ((ascender - newBaseline) / 2) + newBaseline
3501+
3502+ newFullMiddle =
3503+ ((ascender - descender) / 2) + descender
3504+
3505+ lines =
3506+ [ adjustment.capital
3507+ , adjustment.baseline
3508+ , adjustment.descender
3509+ , adjustment.lowercase
3510+ ]
3511+
3512+ ascender =
3513+ Maybe.withDefault adjustment.capital (List.maximum lines)
3514+
3515+ descender =
3516+ Maybe.withDefault adjustment.descender (List.minimum lines)
3517+
3518+ newBaseline =
3519+ lines
3520+ |> List.filter (\x -> x /= descender)
3521+ |> List.minimum
3522+ |> Maybe.withDefault adjustment.baseline
3523+
3524+ capitalVertical =
3525+ 1 - ascender
3526+
3527+ capitalSize =
3528+ 1 / (ascender - newBaseline)
3529+
3530+ fullSize =
3531+ 1 / (ascender - descender)
3532+
3533+ fullVertical =
3534+ 1 - ascender
3535+
3536+ -- (oldMiddle - newFullMiddle) * 2
3537+ in
3538+ { full =
3539+ adjust fullSize (ascender - descender) fullVertical
3540+ , capital =
3541+ adjust capitalSize (ascender - newBaseline) capitalVertical
3542+ }
3543+
3544+
3545+adjust size height vertical =
3546+ { vertical = vertical
3547+ , height =
3548+ height / size
3549+ , size = size
3550+ }