Skip to content

Commit

Permalink
Merge pull request #23 from ba-st/improve_constants_handling
Browse files Browse the repository at this point in the history 
Automatically resolve constant references
  • Loading branch information
@gcotelli
gcotelli committed May 28, 2018
2 parents 36321ba + 08d021e commit be2339e
Show file tree
Hide file tree
Showing 32 changed files with 546 additions and 563 deletions.
50 changes: 26 additions & 24 deletions docs/tutorial/Tutorial - Part I.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,14 +82,14 @@ CascadingStyleSheetBuilder new

#### Colors

The library also supports abstractions for properties requiring color values. The second block on the builder can be used to access constants provided by the library. So `constants >> #colors` provides easy access to colors in the SVG 1.0 list, and the abstractions `CssRGBColor` and `CssHSLColor` allow the creation of colors in the RGB or HSL space including alpha support.
The library also supports abstractions for properties requiring color values. You can reference the colors in the SVG 1.0 list by name, and the abstractions `CssRGBColor` and `CssHSLColor` allow the creation of colors in the RGB or HSL space including alpha support. To get the list of supported colors inspect `RenoirSt constants >> #colors`.

```smalltalk
CascadingStyleSheetBuilder new
declareRuleSetFor: [:selector | selector div ]
with: [:style :constants |
with: [:style |
style
backgroundColor: constants >> #colors >> #aliceBlue;
backgroundColor: #aliceBlue;
borderColor: (CssRGBColor red: 0 green: 128 blue: 0 alpha: 0.5)];
build
```
Expand Down Expand Up @@ -123,12 +123,12 @@ Notice the difference in the message used because there is no alpha channel spec

#### Constants

A lot of values for CSS properties are just keyword constants. This support is in the second argument in the builder.
A lot of values for CSS properties are just keyword constants. You can reference it by keyword, inspect `RenoirSt constants` to get the list of supported ones.

```smalltalk
CascadingStyleSheetBuilder new
declareRuleSetFor: [:selector | selector div ]
with: [:style :constants | style textAlign: constants >> #justify ];
with: [:style | style textAlign: #justify ];
build
```
Evaluates to:
Expand Down Expand Up @@ -257,7 +257,7 @@ This kind of expressions allows descendant elements to cycle over a list of valu
```smalltalk
CascadingStyleSheetBuilder new
declareRuleSetFor: [:selector | selector unorderedList unorderedList ]
with: [:style :constants | style listStyleType: (CssToggle cyclingOver: { constants >> #disc. constants >> #circle. constants >> #square}) ];
with: [:style | style listStyleType: (CssToggle cyclingOver: { #disc. #circle. #square}) ];
build
```
Evaluates to:
Expand Down Expand Up @@ -290,7 +290,7 @@ or providing also the type or unit of the attribute (if no type or unit is speci
```smalltalk
CascadingStyleSheetBuilder new
declareRuleSetFor: [:selector | selector div ]
with: [:style :constants | style width: (CssAttributeReference toAttributeNamed: 'height' ofType: constants >> #units >> #pixel) ];
with: [:style | style width: (CssAttributeReference toAttributeNamed: 'height' ofType: #pixel) ];
build
```
Evaluates to:
Expand Down Expand Up @@ -320,7 +320,7 @@ div::before
```smalltalk
CascadingStyleSheetBuilder new
declareRuleSetFor: [:selector | selector div before ]
with: [:style :constants | style content: (CssAttributeReference toAttributeNamed: 'height' ofType: constants >> #units >> #pixel withFallback: 10 px) ];
with: [:style | style content: (CssAttributeReference toAttributeNamed: 'height' ofType: #pixel withFallback: 10 px) ];
build
```
Evaluates to:
Expand All @@ -331,6 +331,8 @@ div::before
}
```

To get a list of the supported units inspect `RenoirSt constants >> #units`.

#### Gradients: `linear-gradient()` `radial-gradient()` `repeating-linear-gradient()` `repeating-radial-gradient()`

A gradient is an image that smoothly fades from one color to another. These are commonly used for subtle shading in background images, buttons, and many other things. The gradient notations described in this section allow an author to specify such an image in a terse syntax, so that the UA can generate the image automatically when rendering the page. This notation is supported using `CssLinearGradient` and `CssRadialGradient` asbtractions.
Expand All @@ -340,17 +342,17 @@ Let's see some examples for linear gradients:
```smalltalk
CascadingStyleSheetBuilder new
declareRuleSetFor: [:selector | selector div ]
with: [:style :constants | style background: (CssLinearGradient fading: { constants >> #colors >> #yellow. constants >> #colors >> #blue }) ];
with: [:style | style background: (CssLinearGradient fading: { #yellow. #blue }) ];
declareRuleSetFor: [:selector | selector div ]
with: [:style :constants | style background: (CssLinearGradient to: constants >> #bottom fading: { constants >> #colors >> #yellow. constants >> #colors >> #blue }) ];
with: [:style | style background: (CssLinearGradient to: #bottom fading: { #yellow. #blue }) ];
declareRuleSetFor: [:selector | selector div ]
with: [:style :constants | style background: (CssLinearGradient rotated: 45 deg fading: { constants >> #colors >> #yellow. constants >> #colors >> #blue }) ];
with: [:style | style background: (CssLinearGradient rotated: 45 deg fading: { #yellow. #blue }) ];
declareRuleSetFor: [:selector | selector div ]
with: [:style :constants | style background: (CssLinearGradient rotated: 90 deg fading: { constants >> #colors >> #yellow. (CssColorStop for: constants >> #colors >> #blue at: 30 percent) }) ];
with: [:style | style background: (CssLinearGradient rotated: 90 deg fading: { #yellow. (CssColorStop for: #blue at: 30 percent) }) ];
declareRuleSetFor: [:selector | selector div ]
with: [:style :constants | style background: (CssLinearGradient fading: { constants >> #colors >> #yellow. (CssColorStop for: constants >> #colors >> #blue at: 20 percent). constants >> #colors >> #green}) ];
with: [:style | style background: (CssLinearGradient fading: { #yellow. (CssColorStop for: #blue at: 20 percent). #green}) ];
declareRuleSetFor: [:selector | selector div ]
with: [:style :constants | style background: (CssLinearGradient to: { constants >> #top. constants >> #right } fading: { constants >> #colors >> #red. constants >> #colors >> #white. constants >> #colors >> #blue }) ];
with: [:style | style background: (CssLinearGradient to: { #top. #right } fading: { #red. #white. #blue }) ];
build
```

Expand Down Expand Up @@ -392,13 +394,13 @@ and some for radial gradients:
```smalltalk
CascadingStyleSheetBuilder new
declareRuleSetFor: [:selector | selector div ]
with: [:style :constants | style background: (CssRadialGradient fading: { constants >> #colors >> #yellow. constants >> #colors >> #green }) ];
with: [:style | style background: (CssRadialGradient fading: { #yellow. #green }) ];
declareRuleSetFor: [:selector | selector div ]
with: [:style :constants | style background: (CssRadialGradient elliptical: constants >> #farthestCorner at: constants >> #center fading: { constants >> #colors >> #yellow. constants >> #colors >> #green }) ];
with: [:style | style background: (CssRadialGradient elliptical: #farthestCorner at: #center fading: { #yellow. #green }) ];
declareRuleSetFor: [:selector | selector div ]
with: [:style :constants | style background: (CssRadialGradient elliptical: constants >> #farthestSide at: { constants >> #left. constants >> #bottom} fading: { constants >> #colors >> #red. (CssColorStop for: constants >> #colors >> #yellow at: 50 px). constants >> #colors >> #green }) ];
with: [:style | style background: (CssRadialGradient elliptical: #farthestSide at: { #left. #bottom} fading: { #red. (CssColorStop for: #yellow at: 50 px). #green }) ];
declareRuleSetFor: [:selector | selector div ]
with: [:style :constants | style background: (CssRadialGradient elliptical: {20 px. 30 px} at: { 20 px. 30 px} fading: { constants >> #colors >> #red. constants >> #colors >> #yellow. constants >> #colors >> #green }) ];
with: [:style | style background: (CssRadialGradient elliptical: {20 px. 30 px} at: { 20 px. 30 px} fading: { #red. #yellow. #green }) ];
build
```
evaluates to:
Expand Down Expand Up @@ -426,7 +428,7 @@ div

To make the gradient repeatable, just send to it the message `beRepeating`. For Example:
```smalltalk
(CssRadialGradient fading: { CssSVGColors yellow. CssSVGColors green }) beRepeating
(CssRadialGradient fading: { #yellow. #green }) beRepeating
```
renders as:
```css
Expand All @@ -438,20 +440,20 @@ repeating-radial-gradient(yellow, green);
This abstraction simplifies the use of the `box-shadow` property. Let's see some examples:

```smalltalk
CssBoxShadow horizontalOffset: 64 px verticalOffset: 64 px blurRadius: 12 px spreadDistance: 40 px color: (CssConstants >> #colors >> #black newWithAlpha: 0.4)
CssBoxShadow horizontalOffset: 64 px verticalOffset: 64 px blurRadius: 12 px spreadDistance: 40 px color: #black
```
renders as:
```css
64px 64px 12px 40px rgba(0,0,0,0.4)
64px 64px 12px 40px black
```

```smalltalk
(CssBoxShadow horizontalOffset: 64 px verticalOffset: 64 px blurRadius: 12 px spreadDistance: 40 px color: (CssConstants >> #colors >> #black newWithAlpha: 0.4)) ,
(CssBoxShadow horizontalOffset: 12 px verticalOffset: 11 px blurRadius: 0 px spreadDistance: 8 px color: (CssConstants >> #colors >> #black newWithAlpha: 0.4)) beInset
(CssBoxShadow horizontalOffset: 64 px verticalOffset: 64 px blurRadius: 12 px spreadDistance: 40 px color: #black) ,
(CssBoxShadow horizontalOffset: 12 px verticalOffset: 11 px blurRadius: 0 px spreadDistance: 8 px color: #black ) beInset
```
renders as:
```css
64px 64px 12px 40px rgba(0,0,0,0.4), inset 12px 11px 0px 8px rgba(0,0,0,0.4)
64px 64px 12px 40px black, inset 12px 11px 0px 8px black
```

[Go to next chapter](Tutorial - Part II.md)
52 changes: 26 additions & 26 deletions docs/tutorial/Tutorial - Part II.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ These selectors match a specific element type in the DOM. The library provides o
```smalltalk
CascadingStyleSheetBuilder new
declareRuleSetFor: [:selector | selector orderedList ]
with: [:style :constants | style listStyleType: constants >> #lowerRoman ];
with: [:style | style listStyleType: #lowerRoman ];
build
```
```css
Expand All @@ -30,7 +30,7 @@ One of the most common use cases is the **descendant combinator**.
```smalltalk
CascadingStyleSheetBuilder new
declareRuleSetFor: [:selector | selector div orderedList ]
with: [:style :constants | style listStyleType: constants >> #lowerRoman ];
with: [:style | style listStyleType: #lowerRoman ];
build
```
```css
Expand All @@ -44,7 +44,7 @@ In case you need to use parenthesis in the right part of the expression, use `/`
```smalltalk
CascadingStyleSheetBuilder new
declareRuleSetFor: [:selector | selector div / (selector class: 'custom') ]
with: [:style :constants | style listStyleType: constants >> #lowerRoman ];
with: [:style | style listStyleType: #lowerRoman ];
build
```
```css
Expand All @@ -58,7 +58,7 @@ div .custom
```smalltalk
CascadingStyleSheetBuilder new
declareRuleSetFor: [:selector | selector div > selector orderedList ]
with: [:style :constants | style listStyleType: constants >> #lowerRoman ];
with: [:style | style listStyleType: #lowerRoman ];
build
```
```css
Expand All @@ -72,7 +72,7 @@ div > ol
```smalltalk
CascadingStyleSheetBuilder new
declareRuleSetFor: [:selector | selector div + selector orderedList ]
with: [:style :constants | style listStyleType: constants >> #lowerRoman ];
with: [:style | style listStyleType: #lowerRoman ];
build
```
```css
Expand All @@ -84,7 +84,7 @@ div + ol
```smalltalk
CascadingStyleSheetBuilder new
declareRuleSetFor: [:selector | selector div ~ selector orderedList ]
with: [:style :constants | style listStyleType: constants >> #lowerRoman ];
with: [:style | style listStyleType: #lowerRoman ];
build
```
```css
Expand All @@ -98,7 +98,7 @@ div ~ ol
```smalltalk
CascadingStyleSheetBuilder new
declareRuleSetFor: [:selector | (selector div class: 'pastoral') id: #account5 ]
with: [:style :constants | style listStyleType: constants >> #lowerRoman ];
with: [:style | style listStyleType: #lowerRoman ];
build
```
```css
Expand All @@ -119,7 +119,7 @@ Attribute presence:
```smalltalk
CascadingStyleSheetBuilder new
declareRuleSetFor: [:selector | selector h1 havingAttribute: 'title' ]
with: [:style :constants | style color: constants >> #colors >> #blue ];
with: [:style | style color: #blue ];
build
```
```css
Expand All @@ -133,7 +133,7 @@ exact attribute value matching:
```smalltalk
CascadingStyleSheetBuilder new
declareRuleSetFor: [:selector | selector span withAttribute: 'class' equalTo: 'example' ]
with: [:style :constants | style color: constants >> #colors >> #blue ];
with: [:style | style color: #blue ];
build
```
```css
Expand All @@ -148,7 +148,7 @@ inclusion:
```smalltalk
CascadingStyleSheetBuilder new
declareRuleSetFor: [:selector | selector anchor attribute: 'rel' includes: 'copyright' ]
with: [:style :constants | style color: constants >> #colors >> #blue ];
with: [:style | style color: #blue ];
build
```
```css
Expand All @@ -162,7 +162,7 @@ and:
```smalltalk
CascadingStyleSheetBuilder new
declareRuleSetFor: [:selector | selector anchor firstValueOfAttribute: 'hreflang' beginsWith: 'en' ]
with: [:style :constants | style color: constants >> #colors >> #blue ];
with: [:style | style color: #blue ];
build
```
```css
Expand All @@ -182,7 +182,7 @@ This selectors are provided for matching substrings in the value of an attribute
```smalltalk
CascadingStyleSheetBuilder new
declareRuleSetFor: [:selector | selector anchor attribute: 'type' beginsWith: 'image/' ]
with: [:style :constants | style color: constants >> #colors >> #blue ];
with: [:style | style color: #blue ];
build
```
```css
Expand All @@ -195,7 +195,7 @@ a[type^="image/"]
```smalltalk
CascadingStyleSheetBuilder new
declareRuleSetFor: [:selector | selector anchor attribute: 'type' endsWith: '.html' ]
with: [:style :constants | style color: constants >> #colors >> #blue ];
with: [:style | style color: #blue ];
build
```
```css
Expand All @@ -208,7 +208,7 @@ a[type$=".html"]
```smalltalk
CascadingStyleSheetBuilder new
declareRuleSetFor: [:selector | selector paragraph attribute: 'title' includesSubstring: 'hello' ]
with: [:style :constants | style color: constants >> #colors >> #blue ];
with: [:style | style color: #blue ];
build
```
```css
Expand All @@ -225,15 +225,15 @@ Here is a small example that uses the pseudo-classes:
```smalltalk
CascadingStyleSheetBuilder new
declareRuleSetFor: [:selector | selector anchor link ]
with: [:style :constants | style color: constants >> #colors >> #blue ];
with: [:style | style color: #blue ];
declareRuleSetFor: [:selector | selector anchor visited active]
with: [:style :constants | style color: constants >> #colors >> #green ];
with: [:style | style color: #green ];
declareRuleSetFor: [:selector | selector anchor focus hover enabled]
with: [:style :constants | style color: constants >> #colors >> #green ];
with: [:style | style color: #green ];
declareRuleSetFor: [:selector | (selector paragraph class: 'note') target disabled]
with: [:style :constants | style color: constants >> #colors >> #green ];
with: [:style | style color: #green ];
declareRuleSetFor: [:selector | selector input checked ]
with: [:style :constants | style color: constants >> #colors >> #green ];
with: [:style | style color: #green ];
build
```
```css
Expand Down Expand Up @@ -285,7 +285,7 @@ This selector is supported sending the message `not:`. Lets see an example:
```smalltalk
CascadingStyleSheetBuilder new
declareRuleSetFor: [:selector | selector button not: (selector havingAttribute: 'DISABLED') ]
with: [:style :constants | style color: constants >> #colors >> #blue ];
with: [:style | style color: #blue ];
build
```
```css
Expand All @@ -304,7 +304,7 @@ The :root pseudo-class represents an element that is the root of the document. T
```smalltalk
CascadingStyleSheetBuilder new
declareRuleSetFor: [:selector | selector root ]
with: [:style :constants | style color: constants >> #colors >> #grey ];
with: [:style | style color: #grey ];
build
```

Expand All @@ -319,11 +319,11 @@ Since version 1.1.0 the library supports an abstraction for this kind of formula
```smalltalk
CascadingStyleSheetBuilder new
declareRuleSetFor: [:selector | selector childAt: 3 n + 1 ]
with: [:style :constants | style color: constants >> #colors >> #blue ];
with: [:style | style color: #blue ];
declareRuleSetFor: [:selector | selector childAt: 5 ]
with: [:style :constants | style color: constants >> #colors >> #blue ];
declareRuleSetFor: [:selector | selector childAt: CssConstants even]
with: [:style :constants | style color: constants >> #colors >> #blue ];
with: [:style | style color: #blue ];
declareRuleSetFor: [:selector | selector childAt: #even]
with: [:style | style color: #blue ];
build
```
```css
Expand Down Expand Up @@ -374,7 +374,7 @@ This selector describes the contents of the first formatted line of an element.
```smalltalk
CascadingStyleSheetBuilder new
declareRuleSetFor: [:selector | selector paragraph firstLine ]
with: [:style :constants | style textTransform: constants >> #uppercase ];
with: [:style | style textTransform: #uppercase ];
build
```
```css
Expand Down
Loading

0 comments on commit be2339e

Please sign in to comment.