Visitar URL original
feat: CSS3 filter support by shaidshark · Pull Request #1 · shaidshark/NativeScript · GitHub
Skip to content

feat: CSS3 filter support - #1

Merged
shaidshark merged 2 commits into
mainfrom
feature/css-filter-support
Apr 3, 2026
Merged

shaidshark merged 2 commits into
mainfrom
feature/css-filter-support

Conversation

@shaidshark

Copy link
Copy Markdown
Owner

This PR implements CSS3 filter support for NativeScript, addressing issue NativeScript#1428.

What's Included

  • New ilter CSS property that accepts filter functions:
    • �lur(px)
    • �rightness(%)
    • contrast(%)
    • grayscale(%)
    • saturate(%)
    • invert(%)
    • sepia(%)
    • hue-rotate(deg/rad/grad/turn)
    • drop-shadow(offset-x offset-y blur-radius color?)
    • opacity(%) (note: opacity already exists as a separate property)

Implementation Details

  • Parser: Added ilter-parser.ts to parse filter functions into structured data.
  • Style Property: Registered ilterProperty in style-properties.ts.
  • iOS: Uses Core Image filters (CIGaussianBlur, CIColorControls, CISepiaTone, CIHueAdjust, CIColorInvert) and layer shadow for drop-shadow.
  • Android: Uses RenderEffect (API 31+) with ColorMatrix for color adjustments and BlurEffect for blur. drop-shadow not fully implemented on Android due to platform limitations.

Tests

  • Added unit tests for the filter parser in ilter-parser.spec.ts.

Notes

  • The opacity filter function directly sets view alpha; may conflict with the existing opacity property.
  • Some filter functions may not be supported on older Android versions (pre-API 31).

Fixes NativeScript#1428

- Implement filter CSS property with support for:
  blur, brightness, contrast, grayscale, saturate,
  invert, sepia, hue-rotate, drop-shadow (iOS), and opacity.
- Added filter-parser.ts to parse filter functions.
- Added native implementations for iOS (CIFilter) and Android (RenderEffect/ColorMatrix).
- Added unit tests for filter parser.

Note: drop-shadow on Android not fully implemented due to platform limitations.
opacity filter function sets view alpha directly.

Fixes NativeScript#1428
@shaidshark
shaidshark merged commit e651fb9 into main Apr 3, 2026
@shaidshark
shaidshark deleted the feature/css-filter-support branch April 3, 2026 18:35
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

CSS3 filter support [$300]

1 participant