feat(spark_css): add typed background-repeat property

Author: kevin-sakemaer

packages/spark_css/lib/src/css_types/css_background_repeat.dart

@@ -0,0 +1,90 @@
+import 'css_value.dart';
+
+/// CSS background-repeat property values.
+sealed class CssBackgroundRepeat implements CssValue {
+  const CssBackgroundRepeat._();
+
+  // Keyword values
+  static const CssBackgroundRepeat repeat = _CssBackgroundRepeatKeyword(
+    'repeat',
+  );
+  static const CssBackgroundRepeat repeatX = _CssBackgroundRepeatKeyword(
+    'repeat-x',
+  );
+  static const CssBackgroundRepeat repeatY = _CssBackgroundRepeatKeyword(
+    'repeat-y',
+  );
+  static const CssBackgroundRepeat space = _CssBackgroundRepeatKeyword('space');
+  static const CssBackgroundRepeat round = _CssBackgroundRepeatKeyword('round');
+  static const CssBackgroundRepeat noRepeat = _CssBackgroundRepeatKeyword(
+    'no-repeat',
+  );
+
+  /// Creates a two-value syntax background-repeat (e.g. `repeat space`).
+  factory CssBackgroundRepeat.xy(CssBackgroundRepeat x, CssBackgroundRepeat y) =
+      _CssBackgroundRepeatTwoValue;
+
+  /// Creates a comma-separated list of background-repeat values for multiple background images.
+  factory CssBackgroundRepeat.multiple(List<CssBackgroundRepeat> repeats) =
+      _CssBackgroundRepeatMultiple;
+
+  /// CSS variable reference.
+  factory CssBackgroundRepeat.variable(String varName) =
+      _CssBackgroundRepeatVariable;
+
+  /// Raw CSS value escape hatch.
+  factory CssBackgroundRepeat.raw(String value) = _CssBackgroundRepeatRaw;
+
+  /// Global keyword (inherit, initial, unset, revert).
+  factory CssBackgroundRepeat.global(CssGlobal global) =
+      _CssBackgroundRepeatGlobal;
+}
+
+final class _CssBackgroundRepeatKeyword extends CssBackgroundRepeat {
+  final String keyword;
+  const _CssBackgroundRepeatKeyword(this.keyword) : super._();
+
+  @override
+  String toCss() => keyword;
+}
+
+final class _CssBackgroundRepeatTwoValue extends CssBackgroundRepeat {
+  final CssBackgroundRepeat x;
+  final CssBackgroundRepeat y;
+  const _CssBackgroundRepeatTwoValue(this.x, this.y) : super._();
+
+  @override
+  String toCss() => '${x.toCss()} ${y.toCss()}';
+}
+
+final class _CssBackgroundRepeatMultiple extends CssBackgroundRepeat {
+  final List<CssBackgroundRepeat> repeats;
+  const _CssBackgroundRepeatMultiple(this.repeats) : super._();
+
+  @override
+  String toCss() => repeats.map((r) => r.toCss()).join(', ');
+}
+
+final class _CssBackgroundRepeatVariable extends CssBackgroundRepeat {
+  final String varName;
+  const _CssBackgroundRepeatVariable(this.varName) : super._();
+
+  @override
+  String toCss() => 'var(--$varName)';
+}
+
+final class _CssBackgroundRepeatRaw extends CssBackgroundRepeat {
+  final String value;
+  const _CssBackgroundRepeatRaw(this.value) : super._();
+
+  @override
+  String toCss() => value;
+}
+
+final class _CssBackgroundRepeatGlobal extends CssBackgroundRepeat {
+  final CssGlobal global;
+  const _CssBackgroundRepeatGlobal(this.global) : super._();
+
+  @override
+  String toCss() => global.toCss();
+}

packages/spark_css/test/css_background_repeat_test.dart

@@ -0,0 +1,75 @@
+import 'package:spark_css/src/css_types/css_background_repeat.dart';
+import 'package:spark_css/src/css_types/css_value.dart';
+import 'package:test/test.dart';
+
+void main() {
+  group('CssBackgroundRepeat', () {
+    test('keywords output correct CSS', () {
+      expect(CssBackgroundRepeat.repeat.toCss(), equals('repeat'));
+      expect(CssBackgroundRepeat.repeatX.toCss(), equals('repeat-x'));
+      expect(CssBackgroundRepeat.repeatY.toCss(), equals('repeat-y'));
+      expect(CssBackgroundRepeat.space.toCss(), equals('space'));
+      expect(CssBackgroundRepeat.round.toCss(), equals('round'));
+      expect(CssBackgroundRepeat.noRepeat.toCss(), equals('no-repeat'));
+    });
+
+    test('two-value syntax outputs correct CSS', () {
+      expect(
+        CssBackgroundRepeat.xy(
+          CssBackgroundRepeat.repeat,
+          CssBackgroundRepeat.space,
+        ).toCss(),
+        equals('repeat space'),
+      );
+      expect(
+        CssBackgroundRepeat.xy(
+          CssBackgroundRepeat.noRepeat,
+          CssBackgroundRepeat.round,
+        ).toCss(),
+        equals('no-repeat round'),
+      );
+    });
+
+    test('multiple values output correct CSS', () {
+      expect(
+        CssBackgroundRepeat.multiple([
+          CssBackgroundRepeat.repeatX,
+          CssBackgroundRepeat.repeatY,
+        ]).toCss(),
+        equals('repeat-x, repeat-y'),
+      );
+
+      expect(
+        CssBackgroundRepeat.multiple([
+          CssBackgroundRepeat.xy(
+            CssBackgroundRepeat.space,
+            CssBackgroundRepeat.round,
+          ),
+          CssBackgroundRepeat.noRepeat,
+        ]).toCss(),
+        equals('space round, no-repeat'),
+      );
+    });
+
+    test('variable outputs correct CSS', () {
+      expect(
+        CssBackgroundRepeat.variable('bg-repeat').toCss(),
+        equals('var(--bg-repeat)'),
+      );
+    });
+
+    test('raw outputs value as-is', () {
+      expect(
+        CssBackgroundRepeat.raw('repeat round').toCss(),
+        equals('repeat round'),
+      );
+    });
+
+    test('global outputs correct CSS', () {
+      expect(
+        CssBackgroundRepeat.global(CssGlobal.inherit).toCss(),
+        equals('inherit'),
+      );
+    });
+  });
+}