diff --git a/.github/workflows/loading-groups.yml b/.github/workflows/loading-groups.yml index dd5a5dc..7eae651 100644 --- a/.github/workflows/loading-groups.yml +++ b/.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 }} diff --git a/.github/workflows/markdown-lint.yml b/.github/workflows/markdown-lint.yml index c1f5f49..c746191 100644 --- a/.github/workflows/markdown-lint.yml +++ b/.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 diff --git a/.github/workflows/unit-tests.yml b/.github/workflows/unit-tests.yml index 7e76ffb..c4f41df 100644 --- a/.github/workflows/unit-tests.yml +++ b/.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 }} diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index bfeda70..9f3ebef 100644 --- a/CONTRIBUTING.md +++ b/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/) diff --git a/README.md b/README.md index 4bcc19f..6d719d8 100644 --- a/README.md +++ b/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). *********************************************** diff --git a/docs/tutorial/Tutorial-Part-I.md b/docs/tutorial/Tutorial-Part-I.md index eee466b..258fab5 100644 --- a/docs/tutorial/Tutorial-Part-I.md +++ b/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: diff --git a/docs/tutorial/Tutorial-Part-II.md b/docs/tutorial/Tutorial-Part-II.md index 9879633..1948a7e 100644 --- a/docs/tutorial/Tutorial-Part-II.md +++ b/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 . @@ -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: . -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 diff --git a/docs/tutorial/Tutorial-Part-III.md b/docs/tutorial/Tutorial-Part-III.md index 3910c5b..2e9858e 100644 --- a/docs/tutorial/Tutorial-Part-III.md +++ b/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 diff --git a/source/BaselineOfRenoirSt/BaselineOfRenoirSt.class.st b/source/BaselineOfRenoirSt/BaselineOfRenoirSt.class.st index 0f1ddbf..9810dd6 100644 --- a/source/BaselineOfRenoirSt/BaselineOfRenoirSt.class.st +++ b/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' ] ]