@@ -4,7 +4,7 @@ import Prelude
4
4
5
5
import Effect (Effect )
6
6
import Effect.Exception (error , throwException )
7
- import CSS (Rendered , Path (..), Predicate (..), Refinement (..), Selector (..), FontFaceSrc (..), FontFaceFormat (..), renderedSheet , renderedInline , fromString , selector , block , display , render , borderBox , boxSizing , contentBox , blue , color , body , a , p , px , dashed , border , inlineBlock , red , (?), (## ), (|>), (** ), hover , fontFaceSrc , fontStyle , deg , zIndex , textOverflow , opacity )
7
+ import CSS (Rendered , Path (..), Predicate (..), Refinement (..), Selector (..), FontFaceSrc (..), FontFaceFormat (..), renderedSheet , renderedInline , fromString , selector , block , display , render , borderBox , boxSizing , contentBox , blue , color , body , a , p , px , dashed , border , inlineBlock , red , (?), (& ), (|>), (|*), (|+), byId , byClass , (@=), (^=), ($=), (*=), (~=), (|= ), hover , fontFaceSrc , fontStyle , deg , zIndex , textOverflow , opacity )
8
8
import CSS.FontStyle as FontStyle
9
9
import CSS.Text.Overflow as TextOverflow
10
10
import Data.Maybe (Maybe (..))
@@ -48,7 +48,7 @@ withSelector :: Rendered
48
48
withSelector = render do
49
49
a ? do
50
50
color blue
51
- a ## hover ? do
51
+ a & hover ? do
52
52
color red
53
53
54
54
childSelector :: Rendered
@@ -58,9 +58,43 @@ childSelector = render do
58
58
59
59
deepSelector :: Rendered
60
60
deepSelector = render do
61
- p * * a ? do
61
+ p | * a ? do
62
62
display block
63
63
64
+ byClassById :: Rendered
65
+ byClassById = render do
66
+ a & byClass " bar" ? color red
67
+ p & byId " foo" ? display block
68
+
69
+ attrVal :: Rendered
70
+ attrVal = render do
71
+ p & (" foo" @= " bar" ) ? display block
72
+
73
+ attrBegins :: Rendered
74
+ attrBegins = render do
75
+ p & (" foo" ^= " bar" ) ? display block
76
+
77
+ attrEnds :: Rendered
78
+ attrEnds = render do
79
+ p & (" foo" $= " bar" ) ? display block
80
+
81
+ attrContains :: Rendered
82
+ attrContains = render do
83
+ p & (" foo" *= " bar" ) ? display block
84
+
85
+ attrSpace :: Rendered
86
+ attrSpace = render do
87
+ p & (" foo" ~= " bar" ) ? display block
88
+
89
+ attrHyph :: Rendered
90
+ attrHyph = render do
91
+ p & (" foo" |= " bar" ) ? display block
92
+
93
+ adjacentSelector :: Rendered
94
+ adjacentSelector = render do
95
+ a |+ a ? do
96
+ display inlineBlock
97
+
64
98
exampleFontStyle1 :: Rendered
65
99
exampleFontStyle1 = render do
66
100
fontStyle FontStyle .italic
@@ -112,6 +146,7 @@ main = do
112
146
renderedSheet withSelector `assertEqual` Just " a { color: hsl(240.0, 100.0%, 50.0%) }\n a:hover { color: hsl(0.0, 100.0%, 50.0%) }\n "
113
147
renderedSheet childSelector `assertEqual` Just " p > a { z-index: 9 }\n "
114
148
renderedSheet deepSelector `assertEqual` Just " p a { display: block }\n "
149
+ renderedSheet adjacentSelector `assertEqual` Just " a + a { display: inline-block }\n "
115
150
116
151
renderedSheet nestedNodes `assertEqual` Just " #parent { display: block }\n #parent #child { display: block }\n "
117
152
@@ -127,3 +162,12 @@ main = do
127
162
128
163
renderedInline exampleTextOverflow1 `assertEqual` Just " text-overflow: ellipsis"
129
164
renderedInline exampleTextOverflow2 `assertEqual` Just " text-overflow: \" foobar\" "
165
+
166
+ renderedSheet byClassById `assertEqual` Just " a.bar { color: hsl(0.0, 100.0%, 50.0%) }\n p#foo { display: block }\n "
167
+ renderedSheet attrVal `assertEqual` Just " p[foo='bar'] { display: block }\n "
168
+ renderedSheet attrBegins `assertEqual` Just " p[foo^='bar'] { display: block }\n "
169
+ renderedSheet attrEnds `assertEqual` Just " p[foo$='bar'] { display: block }\n "
170
+ renderedSheet attrContains `assertEqual` Just " p[foo*='bar'] { display: block }\n "
171
+ renderedSheet attrSpace `assertEqual` Just " p[foo~='bar'] { display: block }\n "
172
+ renderedSheet attrHyph `assertEqual` Just " p[foo|='bar'] { display: block }\n "
173
+
0 commit comments