Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/spark_css/CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
- **Feat**: Added `accent-color` CSS property support via `CssColor? accentColor` parameter in `Style.typed()`.
- **Feat**: Added `CssAnimation` sealed class for the `animation` shorthand property with `.none`, single animation (name, duration, timingFunction, delay, iterationCount, direction, fillMode, playState), `.multiple()`, plus `.variable()`, `.raw()`, and `.global()` escape hatches.
- **Feat**: Added `CssAnimationDirection`, `CssAnimationFillMode`, `CssAnimationPlayState`, and `CssAnimationIterationCount` sealed classes for animation sub-properties. Reuses existing `CssDuration` and `CssTimingFunction` from `CssTransition`.
- **Feat**: Added `CssBorderCollapse` sealed class for `border-collapse` property with `.separate`, `.collapse` keywords, plus `.variable()`, `.raw()`, and `.global()` escape hatches.

### Changed

Expand Down
55 changes: 55 additions & 0 deletions packages/spark_css/lib/src/css_types/css_border_collapse.dart
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
import 'css_value.dart';

/// CSS border-collapse property values.
sealed class CssBorderCollapse implements CssValue {
const CssBorderCollapse._();

static const CssBorderCollapse separate = _CssBorderCollapseKeyword(
'separate',
);
static const CssBorderCollapse collapse = _CssBorderCollapseKeyword(
'collapse',
);

/// CSS variable reference.
factory CssBorderCollapse.variable(String varName) =
_CssBorderCollapseVariable;

/// Raw CSS value escape hatch.
factory CssBorderCollapse.raw(String value) = _CssBorderCollapseRaw;

/// Global keyword (inherit, initial, unset, revert).
factory CssBorderCollapse.global(CssGlobal global) = _CssBorderCollapseGlobal;
}

final class _CssBorderCollapseKeyword extends CssBorderCollapse {
final String keyword;
const _CssBorderCollapseKeyword(this.keyword) : super._();

@override
String toCss() => keyword;
}

final class _CssBorderCollapseVariable extends CssBorderCollapse {
final String varName;
const _CssBorderCollapseVariable(this.varName) : super._();

@override
String toCss() => 'var(--$varName)';
}

final class _CssBorderCollapseRaw extends CssBorderCollapse {
final String value;
const _CssBorderCollapseRaw(this.value) : super._();

@override
String toCss() => value;
}

final class _CssBorderCollapseGlobal extends CssBorderCollapse {
final CssGlobal global;
const _CssBorderCollapseGlobal(this.global) : super._();

@override
String toCss() => global.toCss();
}
1 change: 1 addition & 0 deletions packages/spark_css/lib/src/css_types/css_types.dart
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ export 'css_background_position.dart';
export 'css_background_repeat.dart';
export 'css_background_size.dart';
export 'css_border.dart';
export 'css_border_collapse.dart';
export 'css_border_radius.dart';
export 'css_box_shadow.dart';
export 'css_color.dart';
Expand Down
4 changes: 4 additions & 0 deletions packages/spark_css/lib/src/style.dart
Original file line number Diff line number Diff line change
Expand Up @@ -291,6 +291,7 @@ class Style implements CssStyle {
CssBorder? borderBottom,
CssBorder? borderLeft,
CssBorderRadius? borderRadius,
CssBorderCollapse? borderCollapse,
CssOutline? outline,
CssLength? outlineOffset,
// Visual
Expand Down Expand Up @@ -415,6 +416,9 @@ class Style implements CssStyle {
if (borderRadius != null) {
_properties['border-radius'] = borderRadius.toCss();
}
if (borderCollapse != null) {
_properties['border-collapse'] = borderCollapse.toCss();
}
if (outline != null) _properties['outline'] = outline.toCss();
if (outlineOffset != null) {
_properties['outline-offset'] = outlineOffset.toCss();
Expand Down
27 changes: 27 additions & 0 deletions packages/spark_css/test/css_border_collapse_test.dart
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
import 'package:spark_css/spark_css.dart';
import 'package:test/test.dart';

void main() {
group('CssBorderCollapse', () {
test('keywords output correct CSS', () {
expect(CssBorderCollapse.separate.toCss(), equals('separate'));
expect(CssBorderCollapse.collapse.toCss(), equals('collapse'));
});
test('variable outputs correct CSS', () {
expect(CssBorderCollapse.variable('bc').toCss(), equals('var(--bc)'));
});
test('raw outputs value as-is', () {
expect(CssBorderCollapse.raw('collapse').toCss(), equals('collapse'));
});
test('global outputs correct CSS', () {
expect(
CssBorderCollapse.global(CssGlobal.inherit).toCss(),
equals('inherit'),
);
});
test('Style.typed integration', () {
final style = Style.typed(borderCollapse: CssBorderCollapse.collapse);
expect(style.toCss(), contains('border-collapse: collapse;'));
});
});
}