This is an automated email from the ASF dual-hosted git repository. joshtynjala pushed a commit to branch develop in repository https://gitbox.apache.org/repos/asf/royale-compiler.git
commit 11c1e8b439667246d939420c2b407539ae97ea13 Author: Josh Tynjala <[email protected]> AuthorDate: Thu May 23 08:51:21 2024 -0700 compiler: support CSS custom properties with -- prefix and var() function in JS targets (closes #184) --- RELEASE_NOTES.md | 5 +++-- .../internal/driver/js/royale/JSCSSCompilationSession.java | 5 +++++ .../main/antlr3/org/apache/royale/compiler/internal/css/CSS.g | 4 +++- .../antlr3/org/apache/royale/compiler/internal/css/CSSTree.g | 2 ++ .../org/apache/royale/compiler/internal/css/CSSProperty.java | 9 ++++++++- 5 files changed, 21 insertions(+), 4 deletions(-) diff --git a/RELEASE_NOTES.md b/RELEASE_NOTES.md index 48fba9674..43ad7023e 100644 --- a/RELEASE_NOTES.md +++ b/RELEASE_NOTES.md @@ -29,8 +29,9 @@ Apache Royale Compiler 0.9.11 - compiler: Fix silently ignoring errors in some invalid CSS content, if it appears at the end after valid content. - compiler: Fix crash when attempting to use `--remove-circulars=false` with a release build. - compiler: Added CSS support for modern syntax without commas in `rgb` and `rgba` functions. -- compiler: Added CSS support for `radial-gradient`, `conic-gradient`, and repeating gradient functions. -- compiler: Added CSS support for several translate, rotate, scale, skew, and matrix transformation functions. +- compiler: Added CSS support for `radial-gradient`, `conic-gradient`, and repeating gradient functions in JS. +- compiler: Added CSS support for several translate, rotate, scale, skew, and matrix transformation functions in JS. +- compiler: Add CSS support for declaring custom properties (CSS variables) and using `var` function in JS. - compiler: Fix crash when `[Style]` is of type `Object` and value is passed in MXML. - debugger: Fix exception when evaluating certain expressions at run-time. - formatter: Added `insert-new-line-else` configuration option. diff --git a/compiler-jx/src/main/java/org/apache/royale/compiler/internal/driver/js/royale/JSCSSCompilationSession.java b/compiler-jx/src/main/java/org/apache/royale/compiler/internal/driver/js/royale/JSCSSCompilationSession.java index 5b0cbb170..540b0708f 100644 --- a/compiler-jx/src/main/java/org/apache/royale/compiler/internal/driver/js/royale/JSCSSCompilationSession.java +++ b/compiler-jx/src/main/java/org/apache/royale/compiler/internal/driver/js/royale/JSCSSCompilationSession.java @@ -616,6 +616,11 @@ public class JSCSSCompilationSession extends CSSCompilationSession // TODO: implement me line.append("null"); } + else if ("var".equals(functionCall.name)) + { + // TODO: implement me + line.append("null"); + } else if ("Embed".equals(functionCall.name)) { // TODO: implement me diff --git a/compiler/src/main/antlr3/org/apache/royale/compiler/internal/css/CSS.g b/compiler/src/main/antlr3/org/apache/royale/compiler/internal/css/CSS.g index ea5976577..490f33aa8 100644 --- a/compiler/src/main/antlr3/org/apache/royale/compiler/internal/css/CSS.g +++ b/compiler/src/main/antlr3/org/apache/royale/compiler/internal/css/CSS.g @@ -497,6 +497,7 @@ singleValue | URL ARGUMENTS formatOption* -> ^(URL ARGUMENTS formatOption*) | LOCAL ARGUMENTS -> ^(LOCAL ARGUMENTS) | CALC ARGUMENTS -> ^(CALC ARGUMENTS) + | VAR ARGUMENTS -> ^(VAR ARGUMENTS) | FUNCTIONS ARGUMENTS -> ^(FUNCTIONS ARGUMENTS) | ALPHA_VALUE | SCALE_VALUE @@ -572,6 +573,7 @@ FORMAT : 'format' ; LOCAL : 'local' ; CALC : 'calc' ; SCALE : 'scale' ; +VAR : 'var' ; NULL : 'null' ; ONLY : 'only' ; CHILD : '>' ; @@ -725,7 +727,7 @@ HASH_WORD : '#' ( LETTER | DIGIT | '-' | '_' )+ ; -ID : ( '-' | '_' | '__' | '___' )? LETTER ( LETTER | DIGIT | '-' | '_' )* +ID : ( '-' | '--' | '_' | '__' | '___' )? LETTER ( LETTER | DIGIT | '-' | '_' )* ; /** diff --git a/compiler/src/main/antlr3/org/apache/royale/compiler/internal/css/CSSTree.g b/compiler/src/main/antlr3/org/apache/royale/compiler/internal/css/CSSTree.g index cd79ce6f5..5c37966db 100644 --- a/compiler/src/main/antlr3/org/apache/royale/compiler/internal/css/CSSTree.g +++ b/compiler/src/main/antlr3/org/apache/royale/compiler/internal/css/CSSTree.g @@ -438,6 +438,8 @@ singleValue returns [CSSPropertyValue propertyValue] { $propertyValue = new CSSFunctionCallPropertyValue($LOCAL.text, $l.text, $start, tokenStream); } | ^(CALC l=ARGUMENTS) { $propertyValue = new CSSFunctionCallPropertyValue($CALC.text, $l.text, $start, tokenStream); } + | ^(VAR l=ARGUMENTS) + { $propertyValue = new CSSFunctionCallPropertyValue($VAR.text, $l.text, $start, tokenStream); } | ^(FUNCTIONS l=ARGUMENTS) { $propertyValue = new CSSFunctionCallPropertyValue($FUNCTIONS.text, $l.text, $start, tokenStream); } | s=STRING diff --git a/compiler/src/main/java/org/apache/royale/compiler/internal/css/CSSProperty.java b/compiler/src/main/java/org/apache/royale/compiler/internal/css/CSSProperty.java index 66e230b02..ebc17f8d4 100644 --- a/compiler/src/main/java/org/apache/royale/compiler/internal/css/CSSProperty.java +++ b/compiler/src/main/java/org/apache/royale/compiler/internal/css/CSSProperty.java @@ -93,7 +93,7 @@ public class CSSProperty extends CSSNodeBase implements ICSSProperty /** - * Normalize CSS property names to camel-case style names. Names alread in + * Normalize CSS property names to camel-case style names. Names already in * camel-cases will be returned as-is. * <p> * For example:<br> @@ -108,6 +108,13 @@ public class CSSProperty extends CSSNodeBase implements ICSSProperty if (name == null) return null; + if (name.startsWith("--")) { + // names of CSS custom properties should not be normalized + // because they are case-sensitive, and we don't want to normalize + // two different values to the same value + return name; + } + final StringBuilder result = new StringBuilder(); boolean lastCharIsHyphen = false;
