Improvements to examples (resolves #10) (#13)

nsaunders · web-flow · commit 18cb3a23540b · 2022-11-29T06:03:38.000-07:00
* Build one example at a time.

* Type error examples now function as tests.

* Pseudo-element type error examples

* grid-template-columns type error examples

* Add CHANGELOG entry for example improvements.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -29,6 +29,13 @@ New features:
 Bugfixes:
 
 Other improvements:
+- New examples of type safety
+  - [`TypeError.SelectorPseudoClassingPseudoElement`](examples/type-errors/SelectorPseudoClassingPseudoElement.purs)
+  - [`TypeError.SelectorPseudoElementDescendant`](examples/type-errors/SelectorPseudoElementDescendant.purs)
+  - [`TypeError.GridTemplateColumnsAutoRepeatWithFlex`](examples/type-errors/GridTemplateColumnsAutoRepeatWithFlex.purs)
+  - [`TypeError.GridTemplateColumnsMultipleAutoRepeat`](examples/type-errors/GridTemplateColumnsMultipleAutoRepeat.purs)
+- The `check-examples` script now verifies that each `TypeError.*` example fails
+  to compile.
 
 ## [0.1.3] - 2022-11-09
 
diff --git a/example.dhall b/example.dhall
@@ -1,6 +1,5 @@
 let conf = ./spago.dhall
 
 in conf // {
-  sources = conf.sources # ["examples/**/*.purs"],
   dependencies = conf.dependencies # ["console", "effect"]
 }
diff --git a/examples/TypeSafety.purs b/examples/TypeSafety.purs
diff --git a/examples/output/TypeSafety.css b/examples/output/TypeSafety.css
diff --git a/examples/type-errors/FontFaceMissingFontFamily.purs b/examples/type-errors/FontFaceMissingFontFamily.purs
@@ -0,0 +1,15 @@
+{-
+
+This example fails to compile because a `@font-face` rule must include a
+`font-family` descriptor.
+
+See https://www.w3.org/TR/css-fonts-4/#font-family-desc for more information.
+
+-}
+
+module TypeError.FontFaceMissingFontFamily where
+
+import Tecton (CSS, fontFace, fontFamily, src, url, (?), (:=))
+
+css :: CSS
+css = fontFace ? src := url "foo.woff"
diff --git a/examples/type-errors/FontFaceMissingSrc.purs b/examples/type-errors/FontFaceMissingSrc.purs
@@ -0,0 +1,15 @@
+{-
+
+This example fails to compile because a `@font-face` rule must include a `src`
+descriptor.
+
+See https://www.w3.org/TR/css-fonts-4/#src-desc for more information.
+
+-}
+
+module TypeError.FontFaceMissingSrc where
+
+import Tecton (CSS, fontFace, fontFamily, (:=), (?))
+
+css :: CSS
+css = fontFace ? fontFamily := "Roboto"
diff --git a/examples/type-errors/FontFamilyMissingFallback.purs b/examples/type-errors/FontFamilyMissingFallback.purs
@@ -0,0 +1,18 @@
+{-
+
+This example fails to compile because the Fonts Module Level 4 specification
+encourages authors "to append a generic font family as a last alternative for
+improved robustness" within `font-family` declarations.
+
+See https://www.w3.org/TR/css-fonts-4/#generic-family-value for more
+information.
+
+-}
+
+module TypeError.FontFamilyMissingFallback where
+
+import Data.Tuple.Nested ((/\))
+import Tecton (CSS, fontFamily, universal, (:=), (?))
+
+css :: CSS
+css = universal ? fontFamily := "Roboto" /\ "Arial"
diff --git a/examples/type-errors/GradientConsecutiveTransitionHints.purs b/examples/type-errors/GradientConsecutiveTransitionHints.purs
@@ -0,0 +1,22 @@
+{-
+
+This example fails to compile because the gradient `<color-stop-list>` syntax
+does not allow two consecutive transition hints.
+
+See https://www.w3.org/TR/css-images-3/#typedef-color-stop-list for more
+information.
+
+-}
+
+module TypeError.GradientConsecutiveTransitionHints where
+
+import Prelude
+import Color (black, white)
+import Data.Tuple.Nested ((/\))
+import Tecton (CSS, backgroundImage, deg, linearGradient, pct, universal, (:=), (?))
+
+css :: CSS
+css =
+  universal ?
+    backgroundImage :=
+      linearGradient (deg 180) $ black /\ pct 40 /\ pct 50 /\ white
diff --git a/examples/type-errors/GradientInsufficientColorStops.purs b/examples/type-errors/GradientInsufficientColorStops.purs
@@ -0,0 +1,17 @@
+{-
+
+This example fails to compile because the gradient `<color-stop-list>` syntax
+requires at minimum two color stops.
+
+See https://www.w3.org/TR/css-images-3/#typedef-color-stop-list for more
+information.
+
+-}
+
+module TypeError.GradientInsufficientColorStops where
+
+import Color (black, white)
+import Tecton (CSS, backgroundImage, deg, linearGradient, universal, (?), (:=))
+
+css :: CSS
+css = universal ? backgroundImage := linearGradient (deg 180) black
diff --git a/examples/type-errors/GridTemplateColumnsAutoRepeatWithFlex.purs b/examples/type-errors/GridTemplateColumnsAutoRepeatWithFlex.purs
@@ -0,0 +1,20 @@
+{-
+
+This example fails to compile because `<flex>` values (e.g. `1fr`) cannot appear
+in the same track list as `<auto-repeat>` values (e.g.
+`repeat(auto-fill, 100px 10%)`).
+
+See https://www.w3.org/TR/css-grid-1/#typedef-auto-track-list for more
+information.
+
+-}
+
+module TypeError.GridTemplateColumnsAutoRepeatWithFlex where
+
+import Data.Tuple.Nested ((/\))
+import Tecton (CSS, autoFill, fr, gridTemplateColumns, pct, px, repeat, universal, (?), (:=))
+
+css :: CSS
+css =
+  universal ?
+    gridTemplateColumns := fr 1 /\ repeat autoFill (px 100 /\ pct 10)
diff --git a/examples/type-errors/GridTemplateColumnsMultipleAutoRepeat.purs b/examples/type-errors/GridTemplateColumnsMultipleAutoRepeat.purs
@@ -0,0 +1,20 @@
+{-
+
+This example fails to compile because multiple `<auto-repeat>` values (e.g.
+`repeat(auto-fit, 100px)` or `repeat(auto-fill, 10%)`) cannot appear within the
+same track list.
+
+See https://www.w3.org/TR/css-grid-1/#typedef-auto-track-list for more
+information.
+
+-}
+
+module TypeError.GridTemplateColumnsMultipleAutoRepeat where
+
+import Data.Tuple.Nested ((/\))
+import Tecton (CSS, autoFill, autoFit, gridTemplateColumns, pct, px, repeat, universal, (?), (:=))
+
+css :: CSS
+css =
+  universal ?
+    gridTemplateColumns := repeat autoFit (px 100) /\ repeat autoFill (pct 10)
diff --git a/examples/type-errors/KeyframesNonAnimatableProperty.purs b/examples/type-errors/KeyframesNonAnimatableProperty.purs
@@ -0,0 +1,23 @@
+{-
+
+This example fails to compile because only certain properties are animatable
+and therefore compatible with `@keyframes` animations; and `content` is not
+among them.
+
+See https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties
+for more information.
+
+-}
+
+module TypeError.KeyframesNonAnimatableProperty where
+
+import Prelude
+import Tecton (CSS, content, keyframes, keyframesName, nil, pct, (:=), (?))
+
+css :: CSS
+css = do
+  keyframes (keyframesName "foo") ? do
+    pct 0 ?
+      content := ""
+    pct 100 ?
+      content := "hello"
diff --git a/examples/type-errors/RulesetPropertyAppearsTwice.purs b/examples/type-errors/RulesetPropertyAppearsTwice.purs
@@ -0,0 +1,20 @@
+{-
+
+This example fails to compile because the same property appears twice within the
+same ruleset. Although in some cases this type of issue is harmless and the last
+declaration simply overrides previous ones, it is unintentional and should be
+reviewed.
+
+-}
+
+module TypeError.RulesetPropertyAppearsTwice where
+
+import Color (black, white)
+import Tecton (CSS, color, universal, (?), (:=))
+import Tecton.Rule as Rule
+
+css :: CSS
+css =
+  universal ? Rule.do
+    color := white
+    color := black
diff --git a/examples/type-errors/SelectorMultiplePseudoElements.purs b/examples/type-errors/SelectorMultiplePseudoElements.purs
@@ -0,0 +1,20 @@
+{-
+
+This example fails to compile because multiple pseudo-elements within a selector
+would most likely be unintentional and represent a defect.
+
+However, the Selectors Level 4 specification does include the notion of
+"sub-pseudo-elements" here:
+https://www.w3.org/TR/selectors-4/#sub-pseudo-elements
+
+For now, real-world use cases and browser support for "sub-pseudo-elements" are
+unclear. Google it: https://www.google.com/search?q=%22sub+pseudo+elements%22
+
+-}
+
+module TypeError.SelectorMultiplePseudoElements where
+
+import Tecton (CSS, after, color, currentColor, placeholder, universal, (&:), (?), (:=))
+
+css :: CSS
+css = universal &: placeholder &: after ? color := currentColor
diff --git a/examples/type-errors/SelectorPseudoClassingPseudoElement.purs b/examples/type-errors/SelectorPseudoClassingPseudoElement.purs
@@ -0,0 +1,18 @@
+{-
+
+This example fails to compile because a pseudo-class cannot follow a
+pseudo-element; therefore, the use of `:hover` is invalid.
+
+This is contrary to the Selectors Level 4 specification
+(https://www.w3.org/TR/selectors-4/#pseudo-element-states) and should be
+reviewed in the future. However, as of now, neither Safari 14.1, nor Chrome 107,
+nor Firefox 107, supports this notion of "pseudo-classing pseudo-elements".
+
+-}
+
+module TypeError.SelectorPseudoClassingPseudoElement where
+
+import Tecton (CSS, after, hover, textDecorationLine, underline, universal, (&:), (?), (:=))
+
+css :: CSS
+css = universal &: after &: hover ? textDecorationLine := underline
diff --git a/examples/type-errors/SelectorPseudoElementDescendant.purs b/examples/type-errors/SelectorPseudoElementDescendant.purs
@@ -0,0 +1,16 @@
+{-
+
+This example does not compile because pseudo-elements do not exist in the DOM
+tree and therefore cannot have descendants.
+
+See https://www.w3.org/TR/selectors-4/#pseudo-element-attachment for more
+information.
+
+-}
+
+module TypeError.SelectorPseudoElementDescendant where
+
+import Tecton (CSS, after, nil, universal, width, (&:), (|*), (?), (:=))
+
+css :: CSS
+css = universal &: after |* universal ? width := nil
diff --git a/examples/type-errors/TransitionPropertyNotAnimatable.purs b/examples/type-errors/TransitionPropertyNotAnimatable.purs
diff --git a/scripts/check-examples.mjs b/scripts/check-examples.mjs

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,5 @@`
`1`	`1`	`let conf = ./spago.dhall`
`2`	`2`
`3`	`3`	`in conf // {`
`4`		`- sources = conf.sources # ["examples/*/.purs"],`
`5`	`4`	`dependencies = conf.dependencies # ["console", "effect"]`
`6`	`5`	`}`