Merge pull request #55 from ba-st/pharo11

Add Pharo 11 support

.github/workflows/loading-groups.yml

@@ -8,11 +8,11 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        smalltalk: [ Pharo64-10, Pharo64-9.0, Pharo64-8.0 ]
+        smalltalk: [ Pharo64-11, Pharo64-10, Pharo64-9.0, Pharo64-8.0 ]
         load-spec: [ deployment, deployment-seaside-extensions, tests, tools, development, development-seaside-extensions ]
     name: ${{ matrix.smalltalk }} + ${{ matrix.load-spec }}
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
       - uses: hpi-swa/setup-smalltalkCI@v1
         with:
           smalltalk-image: ${{ matrix.smalltalk }}

.github/workflows/markdown-lint.yml

@@ -5,9 +5,9 @@ jobs:
     name: runner / markdownlint
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
       - name: markdownlint
-        uses: reviewdog/action-markdownlint@v0.1
+        uses: reviewdog/action-markdownlint@v0
         with:
           github_token: ${{ secrets.GITHUB_TOKEN }}
           fail_on_error: true

.github/workflows/unit-tests.yml

@@ -7,10 +7,10 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        smalltalk: [ Pharo64-10, Pharo64-9.0, Pharo64-8.0, Pharo64-7.0, Pharo32-7.0 ]
+        smalltalk: [ Pharo64-11, Pharo64-10, Pharo64-9.0, Pharo64-8.0, Pharo64-7.0 ]
     name: ${{ matrix.smalltalk }}
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
       - uses: hpi-swa/setup-smalltalkCI@v1
         with:
           smalltalk-image: ${{ matrix.smalltalk }}
@@ -20,7 +20,7 @@ jobs:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         timeout-minutes: 15
       - name: Upload coverage to Codecov
-        uses: codecov/codecov-action@v1
+        uses: codecov/codecov-action@v3
         with:
-          name: ${{matrix.os}}-${{matrix.smalltalk}}
+          name: Unit-Tests-${{matrix.smalltalk}}
           token: ${{ secrets.CODECOV_TOKEN }}

CONTRIBUTING.md

@@ -39,4 +39,4 @@ changes and send a pull request.
 
 ### Useful References
 
-- [W3c Css Home](http://www.w3.org/Style/CSS/)
+- [W3c CSS Home](http://www.w3.org/Style/CSS/)

README.md

@@ -10,11 +10,11 @@ A DSL enabling programmatic cascading style sheet generation for Pharo Smalltalk
 [![Markdown Lint](https://github.com/ba-st/RenoirSt/actions/workflows/markdown-lint.yml/badge.svg)](https://github.com/ba-st/RenoirSt/actions/workflows/markdown-lint.yml)
 
 [![GitHub release](https://img.shields.io/github/release/ba-st/RenoirSt.svg)](https://github.com/ba-st/RenoirSt/releases/latest)
-[![Pharo 6.1](https://img.shields.io/badge/Pharo-6.1-informational)](https://pharo.org)
 [![Pharo 7.0](https://img.shields.io/badge/Pharo-7.0-informational)](https://pharo.org)
 [![Pharo 8.0](https://img.shields.io/badge/Pharo-8.0-informational)](https://pharo.org)
 [![Pharo 9.0](https://img.shields.io/badge/Pharo-9.0-informational)](https://pharo.org)
 [![Pharo 10](https://img.shields.io/badge/Pharo-10-informational)](https://pharo.org)
+[![Pharo 11](https://img.shields.io/badge/Pharo-10-informational)](https://pharo.org)
 
 ## Quick links
 
@@ -40,7 +40,7 @@ A DSL enabling programmatic cascading style sheet generation for Pharo Smalltalk
 
 ## Installation
 
-To load the project in a Pharo image follow this [instructions](docs/how-to/how-to-load-in-pharo.md).
+To load the project in a Pharo image follow these [instructions](docs/how-to/how-to-load-in-pharo.md).
 
 ***********************************************
 

docs/tutorial/Tutorial-Part-I.md

@@ -96,7 +96,7 @@ The supported frequency units are:
 It also supports the creation of percentages: `50 percent` is expressed as `50%`
 in the resulting CSS.
 
-Some properties require integer or floating point values. In this cases just use
+Some properties require integer or floating point values. In these cases just use
 the Pharo provided integer and float support. For example:
 
 ```smalltalk
@@ -134,7 +134,7 @@ div
 }
 ```
 
-> **Hint:** In a real scenario you should never hardcode the colors as in the
+> **Hint:** In a real scenario you should never hard code the colors as in the
 > examples, instead put them in objects representing a theme or something that
 > gives them a name related to your application.
 
@@ -183,7 +183,7 @@ div
 #### Several Property Values
 
 Some properties support a wide range of values. For example the `margin`
-property can have 1, 2 , 3 or 4 values specified. If only one value needs to be
+property can have 1, 2, 3 or 4 values specified. If only one value needs to be
 specified just provide it, in other case use an `Array` like this:
 
 ```smalltalk
@@ -204,17 +204,17 @@ div
 
 #### URLs
 
-`ZnUrl` instances can be used as the value for properties requiring an URI.
+`ZnUrl` instances can be used as the value for properties requiring a URI.
 Both relative and absolute URLs are accepted. A relative URL is by default
 considered relative to the site root.
 
 ```smalltalk
 CascadingStyleSheetBuilder new
   declareRuleSetFor: [:selector | selector div class: 'logo' ]
-  with: [:style | style backgroundImage: 'images/logo.png' asZnUrl ];
+  with: [:style | style backgroundImage: 'images/logo.png' asUrl ];
   declareRuleSetFor: [:selector | selector div class: 'logo' ]
   with: [:style | style
-    backgroundImage: 'http://www.example.com/images/logo.png' asZnUrl ];
+    backgroundImage: 'http://www.example.com/images/logo.png' asUrl ];
   build
 ```
 
@@ -232,12 +232,12 @@ div.logo
 }
 ```
 
-In case you want an URL relative to the style sheet, you must send the message `relativeToStyleSheet`:
+In case you want a URL relative to the style sheet, you must send the message `relativeToStyleSheet`:
 
 ```smalltalk
 CascadingStyleSheetBuilder new
   declareRuleSetFor: [:selector | selector div class: 'logo' ]
-  with: [:style | style backgroundImage: 'images/logo.png' asZnUrl relativeToStyleSheet];
+  with: [:style | style backgroundImage: 'images/logo.png' asUrl relativeToStyleSheet];
   build
 ```
 
@@ -295,9 +295,9 @@ complex types or invoke special processing. The following notations are supporte
 
 #### Mathematical Expressions: `calc()`
 
-The library provides support for math expressions using the  `CssMathExpression`
+The library provides support for math expressions using the `CssMathExpression`
 abstraction. This math expressions are built instantiating a `CssMathExpression`
-with the first operand, and sending to it `+`, `-`, `*` or `/` messages. Lets
+with the first operand, and sending to it `+`, `-`, `*` or `/` messages. Let's
 see some example:
 
 ```smalltalk
@@ -341,7 +341,7 @@ ul ul
 
 #### Attribute references: `attr()`
 
-The attr() function is allowed as a component value in properties applied to an
+The `attr()` function is allowed as a component value in properties applied to an
 element or pseudo-element. It returns the value of an attribute on the element.
 If used on a pseudo-element, it returns the value of the attribute on the
 pseudo-element's originating element. It's supported using the
@@ -562,16 +562,16 @@ repeating-radial-gradient(yellow, green);
 
 #### Transforms
 
-Css transforms are a collection of functions that allow you to shape elements
+CSS transforms are a collection of functions that allow you to shape elements
 in particular ways.
 
 ##### Rotation: `rotate()` `rotateX()` `rotateY()` `rotateZ()` `rotate3d()`
 
 The library provides support for rotation functions, used in animations to move
-an element around a central point. The rotate expressions are built
+an element around a central point. The `rotate` expressions are built
 instantiating `CssRotate` or `CssRotate3D` for 3D rotations.
 
-Lets see a basic working rotation example:
+Let's see a basic working rotation example:
 
 ```smalltalk
 CascadingStyleSheetBuilder new
@@ -628,7 +628,7 @@ div
 The library supports `translate` functions, used to mode the position of an
 element. To translate an element, instantiate `CssTranslate`.
 
-Lets see an example:
+Let's see an example:
 
 ```smalltalk
 CascadingStyleSheetBuilder new
@@ -826,7 +826,7 @@ div
 ##### Steps
 
 The library also supports the `steps` function, used in the timing parameter of
-animation keyframes called `animation-timing-function`. Steps are a timing
+animation key frames called `animation-timing-function`. Steps are a timing
 function that allows us to break an animation or transition into segments.
 
 A usage example can be:
@@ -888,7 +888,7 @@ div
 Renoir supports the `cubic-bezier` function, that can be used with the
 `transition-timing-function` property to control how a transition will change
 speed over its duration. It also works with the `animation-timing-function` for
-keyframes. To create your own cubic bezier timing function build an instance
+keyframes. To create your own cubic Bézier timing function build an instance
 with `CssCubicBezier`.
 
 Here's an example:

docs/tutorial/Tutorial-Part-II.md

@@ -4,7 +4,7 @@
 
 So far our focus was on the *style* part of the rule. Let's focus now on the
 available *selectors*. Remember that a CSS selector represents a structure used
-to match elements in the document tree. This chapter assume some familiarity with
+to match elements in the document tree. This chapter assumes some familiarity with
 the CSS selectors and will not go in detail about the exact meaning of each one.
 For more details you can take a look at <http://www.w3.org/TR/css3-selectors/>.
 
@@ -208,7 +208,7 @@ a[hreflang|="en"]
 
 #### Substring matching attribute selectors
 
-This selectors are provided for matching substrings in the value of an attribute:
+These selectors are provided for matching substrings in the value of an attribute:
 
 - `attribute:beginsWith:`
 - `attribute:endsWith:`
@@ -262,7 +262,7 @@ p[title*="hello"]
 ### Pseudo-Classes
 
 The pseudo-class concept is introduced to allow selection based on information
-that lies outside of the document tree or that cannot be expressed using the
+that lies outside the document tree or that cannot be expressed using the
 simpler selectors. Most pseudo-classes are supported just by sending one of the
 following messages `link`, `visited`, `active`, `hover`, `focus`, `target`,
 `enabled`, `disabled` or `checked`.
@@ -334,7 +334,7 @@ selector (excluding the negation pseudo-class itself) as an argument. It
 represents an element that is not represented by its argument.
 For more information take a look at: <http://www.w3.org/TR/css3-selectors/#negation>.
 
-This selector is supported sending the message `not:`. Lets see an example:
+This selector is supported sending the message `not:`. Let's see an example:
 
 ```smalltalk
 CascadingStyleSheetBuilder new
@@ -378,9 +378,9 @@ CascadingStyleSheetBuilder new
 The `:nth-child(an+b)` pseudo-class notation represents an element that has
 `an+b-1` siblings before it in the document tree, for any positive integer or
 zero value of n, and has a parent element. For values of a and b greater than
-zero, this effectively divides the element's children into groups of a elements
-(the last group taking the remainder), and selecting the bth element of each
-group. The a and b values must be integers (positive, negative, or zero). The
+zero, this effectively divides the element's children into groups of `a` elements
+(the last group taking the remainder), and selecting the `b`th element of each
+group. The `a` and `b` values must be integers (positive, negative, or zero). The
 index of the first child of an element is 1.
 
 In addition to this, `:nth-child()` can take ‘odd’ and ‘even’ as arguments
@@ -431,16 +431,16 @@ Some examples:
 
 The rest of the selectors in this category are modeled using the following messages:
 
-- `nth-last-child()` -> `childFromLastAt:`
-- `nth-of-type()` -> `siblingOfTypeAt:`
-- `nth-last-of-type()` -> `siblingOfTypeFromLastAt:`
-- `first-child` -> `firstChild`
-- `last-child` -> `lastChild`
-- `first-of-type` -> `firstOfType`
-- `last-of-type` -> `lastOfType`
-- `only-child` -> `onlyChild`
-- `only-of-type` -> `onlyOfType`
-- `empty` -> `empty`
+- `nth-last-child()` → `childFromLastAt:`
+- `nth-of-type()` → `siblingOfTypeAt:`
+- `nth-last-of-type()` → `siblingOfTypeFromLastAt:`
+- `first-child` → `firstChild`
+- `last-child` → `lastChild`
+- `first-of-type` → `firstOfType`
+- `last-of-type` → `lastOfType`
+- `only-child` → `onlyChild`
+- `only-of-type` → `onlyOfType`
+- `empty` → `empty`
 
 ### Pseudo-Elements
 

docs/tutorial/Tutorial-Part-III.md

@@ -58,7 +58,7 @@ animation, 100% is when the animation is complete.
 > **Tip:** For best browser support, you should always define both the 0% and the
 > 100% selectors.
 
-A basic keyframe rule consists of specifying just a keyframe with some style rule:
+A basic key frame rule consists of specifying just a key frame with some style rule:
 
 ```smalltalk
 CascadingStyleSheetBuilder new
@@ -75,7 +75,7 @@ CascadingStyleSheetBuilder new
 To use keyframes in the library just send the message
 `declare:forKeyframesNamed:` to the builder.  The first closure is evaluated
 with an instance of a `CascadingStyleSheetBuilder`. The second parameter is to
-give a name to your keyframe rule.
+give a name to your key frame rule.
 
 The style can be built with either the `animation:` shorthand:
 
@@ -193,7 +193,7 @@ div
 }
 ```
 
-> **Note:** The `!important` rule is ignored in a keyframe
+> **Note:** The `!important` rule is ignored in a key frame
 
 ### Keyframe references
 
@@ -203,7 +203,7 @@ div
 
 A `@media` rule specifies the target media types of a set of statements. The
 `@media` construct allows style sheet rules that apply to various media in the
-same style sheet. Style rules outside of `@media` rules apply to all media types
+same style sheet. Style rules outside `@media` rules apply to all media types
 that the style sheet applies to. At-rules inside `@media` are invalid in CSS2.1.
 
 The most basic media rule consists of specifying just a media type:
@@ -320,8 +320,8 @@ Evaluates to:
 
 ## Vendor specific extensions
 
-The library doesn't provide out of the box support for non standard properties.
-However since version `1.4.0` the message `vendorPropertyAt:put:` is available
+The library doesn't provide out of the box support for non-standard properties.
+However, since version `1.4.0` the message `vendorPropertyAt:put:` is available
 to ease the creation of this kind of properties by the end user.
 
 For example:
@@ -347,7 +347,7 @@ div
 ```
 
 > **Hint:** If you really want to use a vendor specific extension, It's better
-> to create an extension method sending the vendorPropertyAt:put: message.
+> to create an extension method sending the `vendorPropertyAt:put:` message.
 
 ## Font Face Rules
 
@@ -380,7 +380,7 @@ renders as:
 ```
 
 This kind of rule allows for multiple `src` definitions specifying the resources
-containing the data. This resources can be external (fonts fetched from a URL)
+containing the data. These resources can be external (fonts fetched from a URL)
 or local (available in the user system). This kind of resources are supported
 using `CssLocalFontReference` and `CssExternalFontReference`.
 
@@ -421,7 +421,7 @@ CascadingStyleSheetBuilder new
 ### Units
 
 The `Units` package (available using the ConfigurationBrowser in Pharo) includes
-some extensions that collides with RenoirSt.  Since version `1.1.0` this library
+some extensions that collide with RenoirSt.  Since version `1.1.0` this library
 is able to load automatically a compatibility package if it's loaded after
 `Units` package.
 
@@ -430,7 +430,7 @@ is able to load automatically a compatibility package if it's loaded after
 The library includes an optional group including some useful extensions. The
 [Seaside](www.seaside.st) framework includes his own class modeling URLs, when
 this configuration is loaded the instances of `WAUrl` can be used in the
-properties requiring an URI:
+properties requiring a URI:
 
 ```smalltalk
 CascadingStyleSheetBuilder new
@@ -452,7 +452,7 @@ This optional configuration also loads extensions to `CssDeclarationBlock` so it
 can be used as a `JSObject` in plugins requiring some style parameter or in
 `style:` methods.
 
-To load this extensions you need to load in an image with Seaside already loaded
+To load these extensions you need to load in an image with Seaside already loaded
 the group `Deployment-Seaside-Extensions` or `Development-Seaside-Extensions`
 (if you want the test cases):
 
@@ -502,7 +502,7 @@ matching on the versions given this project uses Semantic Versioning:
 
 The available groups are:
 
-- Deployment: Base library  (the default group)
+- Deployment: Base library (the default group)
 - Development: Deployment + Test cases
 - Deployment-Seaside-Extensions: Deployment + Seaside specific extensions
 - Development-Seaside-Extensions: Deployment-Seaside-Extensions + Test cases

source/BaselineOfRenoirSt/BaselineOfRenoirSt.class.st

@@ -48,7 +48,7 @@ BaselineOfRenoirSt >> setUpDependencies: spec [
 		project: 'Buoy-Tools' copyFrom: 'Buoy' with: [ spec loads: 'Tools' ].
 
 	spec
-		baseline: 'Seaside3' with: [ spec repository: 'github://SeasideSt/Seaside:v3.4.x/repository' ];
+		baseline: 'Seaside3' with: [ spec repository: 'github://SeasideSt/Seaside:v3.5.x/repository' ];
 		project: 'Seaside3-Javascript' copyFrom: 'Seaside3' with: [ spec loads: 'Javascript' ]
 ]