Skip to content

Commit aadca7e

Browse files
kevin-sakemaerkevin-sakemaer
authored
Merge pull request #107 from KLEAK-Development/feat/css-contain-will-change-touch-action-user-select-hyphens
feat: add CssContain, CssWillChange, CssTouchAction, CssUserSelect, CssHyphens
2 parents 9c714c4 + fb5b78e commit aadca7e

13 files changed

Lines changed: 637 additions & 0 deletions

‎packages/spark_css/CHANGELOG.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,11 @@
3131
- **Feat**: Added `CssIsolation` sealed class for `isolation` property with `.auto`, `.isolate` keywords, plus `.variable()`, `.raw()`, and `.global()` escape hatches.
3232
- **Feat**: Added `CssMixBlendMode` sealed class for `mix-blend-mode` property with `.normal`, `.multiply`, `.screen`, `.overlay`, `.darken`, `.lighten`, `.colorDodge`, `.colorBurn`, `.hardLight`, `.softLight`, `.difference`, `.exclusion`, `.hue`, `.saturation`, `.color`, `.luminosity` keywords, plus `.variable()`, `.raw()`, and `.global()` escape hatches.
3333
- **Feat**: Added `CssBackgroundBlendMode` sealed class for `background-blend-mode` property with `.normal`, `.multiply`, `.screen`, `.overlay`, `.darken`, `.lighten`, `.colorDodge`, `.colorBurn`, `.hardLight`, `.softLight`, `.difference`, `.exclusion`, `.hue`, `.saturation`, `.color`, `.luminosity` keywords, plus `.variable()`, `.raw()`, and `.global()` escape hatches.
34+
- **Feat**: Added `CssContain` sealed class for `contain` property with `.none`, `.strict`, `.content` keyword shortcuts, `.size`, `.layout`, `.style`, `.paint` individual keyword constants, and `.flags()` factory for composing individual containment values, plus `.variable()`, `.raw()`, and `.global()` escape hatches.
35+
- **Feat**: Added `CssWillChange` sealed class for `will-change` property with `.auto`, `.scrollPosition`, `.contents` keywords and `.properties()` factory for arbitrary CSS property names, plus `.variable()`, `.raw()`, and `.global()` escape hatches.
36+
- **Feat**: Added `CssTouchAction` sealed class for `touch-action` property with `.auto`, `.none`, `.manipulation` standalone keywords, `.panX`, `.panLeft`, `.panRight`, `.panY`, `.panUp`, `.panDown`, `.pinchZoom` combinable keywords, and `.combine()` factory, plus `.variable()`, `.raw()`, and `.global()` escape hatches.
37+
- **Feat**: Added `CssUserSelect` sealed class for `user-select` property with `.none`, `.auto`, `.text`, `.all`, `.contain` keywords, plus `.variable()`, `.raw()`, and `.global()` escape hatches.
38+
- **Feat**: Added `CssHyphens` sealed class for `hyphens` property with `.none`, `.manual`, `.auto` keywords, plus `.variable()`, `.raw()`, and `.global()` escape hatches.
3439

3540
### Changed
3641

‎packages/spark_css/lib/src/css_types/css_contain.dart‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
import 'css_value.dart';
2+
3+
/// CSS contain property values.
4+
sealed class CssContain implements CssValue {
5+
const CssContain._();
6+
7+
static const CssContain none = _CssContainKeyword('none');
8+
static const CssContain strict = _CssContainKeyword('strict');
9+
static const CssContain content = _CssContainKeyword('content');
10+
static const CssContain size = _CssContainKeyword('size');
11+
static const CssContain layout = _CssContainKeyword('layout');
12+
static const CssContain style = _CssContainKeyword('style');
13+
static const CssContain paint = _CssContainKeyword('paint');
14+
15+
/// Constructs a `contain` value from boolean flags.
16+
///
17+
/// Active flags are joined with spaces in the order: size, layout, style,
18+
/// paint. Returns `none` if no flags are true.
19+
factory CssContain.flags({bool size, bool layout, bool style, bool paint}) =
20+
_CssContainFlags;
21+
22+
/// CSS variable reference.
23+
factory CssContain.variable(String varName) = _CssContainVariable;
24+
25+
/// Raw CSS value escape hatch.
26+
factory CssContain.raw(String value) = _CssContainRaw;
27+
28+
/// Global keyword (inherit, initial, unset, revert).
29+
factory CssContain.global(CssGlobal global) = _CssContainGlobal;
30+
}
31+
32+
final class _CssContainKeyword extends CssContain {
33+
final String keyword;
34+
const _CssContainKeyword(this.keyword) : super._();
35+
36+
@override
37+
String toCss() => keyword;
38+
}
39+
40+
final class _CssContainFlags extends CssContain {
41+
final bool size;
42+
final bool layout;
43+
final bool style;
44+
final bool paint;
45+
46+
const _CssContainFlags({
47+
this.size = false,
48+
this.layout = false,
49+
this.style = false,
50+
this.paint = false,
51+
}) : super._();
52+
53+
@override
54+
String toCss() {
55+
final parts = <String>[];
56+
if (size) parts.add('size');
57+
if (layout) parts.add('layout');
58+
if (style) parts.add('style');
59+
if (paint) parts.add('paint');
60+
return parts.isEmpty ? 'none' : parts.join(' ');
61+
}
62+
}
63+
64+
final class _CssContainVariable extends CssContain {
65+
final String varName;
66+
const _CssContainVariable(this.varName) : super._();
67+
68+
@override
69+
String toCss() => 'var(--$varName)';
70+
}
71+
72+
final class _CssContainRaw extends CssContain {
73+
final String value;
74+
const _CssContainRaw(this.value) : super._();
75+
76+
@override
77+
String toCss() => value;
78+
}
79+
80+
final class _CssContainGlobal extends CssContain {
81+
final CssGlobal global;
82+
const _CssContainGlobal(this.global) : super._();
83+
84+
@override
85+
String toCss() => global.toCss();
86+
}

‎packages/spark_css/lib/src/css_types/css_hyphens.dart‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import 'css_value.dart';
2+
3+
/// CSS hyphens property values.
4+
sealed class CssHyphens implements CssValue {
5+
const CssHyphens._();
6+
7+
static const CssHyphens none = _CssHyphensKeyword('none');
8+
static const CssHyphens manual = _CssHyphensKeyword('manual');
9+
static const CssHyphens auto = _CssHyphensKeyword('auto');
10+
11+
/// CSS variable reference.
12+
factory CssHyphens.variable(String varName) = _CssHyphensVariable;
13+
14+
/// Raw CSS value escape hatch.
15+
factory CssHyphens.raw(String value) = _CssHyphensRaw;
16+
17+
/// Global keyword (inherit, initial, unset, revert).
18+
factory CssHyphens.global(CssGlobal global) = _CssHyphensGlobal;
19+
}
20+
21+
final class _CssHyphensKeyword extends CssHyphens {
22+
final String keyword;
23+
const _CssHyphensKeyword(this.keyword) : super._();
24+
25+
@override
26+
String toCss() => keyword;
27+
}
28+
29+
final class _CssHyphensVariable extends CssHyphens {
30+
final String varName;
31+
const _CssHyphensVariable(this.varName) : super._();
32+
33+
@override
34+
String toCss() => 'var(--$varName)';
35+
}
36+
37+
final class _CssHyphensRaw extends CssHyphens {
38+
final String value;
39+
const _CssHyphensRaw(this.value) : super._();
40+
41+
@override
42+
String toCss() => value;
43+
}
44+
45+
final class _CssHyphensGlobal extends CssHyphens {
46+
final CssGlobal global;
47+
const _CssHyphensGlobal(this.global) : super._();
48+
49+
@override
50+
String toCss() => global.toCss();
51+
}

‎packages/spark_css/lib/src/css_types/css_touch_action.dart‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
import 'css_value.dart';
2+
3+
/// CSS touch-action property values.
4+
sealed class CssTouchAction implements CssValue {
5+
const CssTouchAction._();
6+
7+
static const CssTouchAction auto = _CssTouchActionKeyword('auto');
8+
static const CssTouchAction none = _CssTouchActionKeyword('none');
9+
static const CssTouchAction manipulation = _CssTouchActionKeyword(
10+
'manipulation',
11+
);
12+
static const CssTouchAction panX = _CssTouchActionKeyword('pan-x');
13+
static const CssTouchAction panLeft = _CssTouchActionKeyword('pan-left');
14+
static const CssTouchAction panRight = _CssTouchActionKeyword('pan-right');
15+
static const CssTouchAction panY = _CssTouchActionKeyword('pan-y');
16+
static const CssTouchAction panUp = _CssTouchActionKeyword('pan-up');
17+
static const CssTouchAction panDown = _CssTouchActionKeyword('pan-down');
18+
static const CssTouchAction pinchZoom = _CssTouchActionKeyword('pinch-zoom');
19+
20+
/// Combines multiple touch-action values.
21+
///
22+
/// Example: `CssTouchAction.combine([CssTouchAction.panX, CssTouchAction.pinchZoom])`
23+
/// produces `pan-x pinch-zoom`.
24+
factory CssTouchAction.combine(List<CssTouchAction> values) =
25+
_CssTouchActionCombined;
26+
27+
/// CSS variable reference.
28+
factory CssTouchAction.variable(String varName) = _CssTouchActionVariable;
29+
30+
/// Raw CSS value escape hatch.
31+
factory CssTouchAction.raw(String value) = _CssTouchActionRaw;
32+
33+
/// Global keyword (inherit, initial, unset, revert).
34+
factory CssTouchAction.global(CssGlobal global) = _CssTouchActionGlobal;
35+
}
36+
37+
final class _CssTouchActionKeyword extends CssTouchAction {
38+
final String keyword;
39+
const _CssTouchActionKeyword(this.keyword) : super._();
40+
41+
@override
42+
String toCss() => keyword;
43+
}
44+
45+
final class _CssTouchActionCombined extends CssTouchAction {
46+
final List<CssTouchAction> values;
47+
const _CssTouchActionCombined(this.values) : super._();
48+
49+
@override
50+
String toCss() => values.map((v) => v.toCss()).join(' ');
51+
}
52+
53+
final class _CssTouchActionVariable extends CssTouchAction {
54+
final String varName;
55+
const _CssTouchActionVariable(this.varName) : super._();
56+
57+
@override
58+
String toCss() => 'var(--$varName)';
59+
}
60+
61+
final class _CssTouchActionRaw extends CssTouchAction {
62+
final String value;
63+
const _CssTouchActionRaw(this.value) : super._();
64+
65+
@override
66+
String toCss() => value;
67+
}
68+
69+
final class _CssTouchActionGlobal extends CssTouchAction {
70+
final CssGlobal global;
71+
const _CssTouchActionGlobal(this.global) : super._();
72+
73+
@override
74+
String toCss() => global.toCss();
75+
}

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ export 'css_border_radius.dart';
1919
export 'css_box_shadow.dart';
2020
export 'css_box_sizing.dart';
2121
export 'css_color.dart';
22+
export 'css_contain.dart';
2223
export 'css_content.dart';
2324
export 'css_cursor.dart';
2425
export 'css_display.dart';
@@ -28,6 +29,7 @@ export 'css_flex_shorthand.dart';
2829
export 'css_font.dart';
2930
export 'css_gradient_direction.dart';
3031
export 'css_grid_template_columns.dart';
32+
export 'css_hyphens.dart';
3133
export 'css_isolation.dart';
3234
export 'css_justify_items.dart';
3335
export 'css_justify_self.dart';
@@ -51,6 +53,9 @@ export 'css_spacing.dart';
5153
export 'css_text.dart';
5254
export 'css_text_overflow.dart';
5355
export 'css_text_shadow.dart';
56+
export 'css_touch_action.dart';
5457
export 'css_transform.dart';
5558
export 'css_transition.dart';
59+
export 'css_user_select.dart';
5660
export 'css_value.dart';
61+
export 'css_will_change.dart';

‎packages/spark_css/lib/src/css_types/css_user_select.dart‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import 'css_value.dart';
2+
3+
/// CSS user-select property values.
4+
sealed class CssUserSelect implements CssValue {
5+
const CssUserSelect._();
6+
7+
static const CssUserSelect none = _CssUserSelectKeyword('none');
8+
static const CssUserSelect auto = _CssUserSelectKeyword('auto');
9+
static const CssUserSelect text = _CssUserSelectKeyword('text');
10+
static const CssUserSelect all = _CssUserSelectKeyword('all');
11+
static const CssUserSelect contain = _CssUserSelectKeyword('contain');
12+
13+
/// CSS variable reference.
14+
factory CssUserSelect.variable(String varName) = _CssUserSelectVariable;
15+
16+
/// Raw CSS value escape hatch.
17+
factory CssUserSelect.raw(String value) = _CssUserSelectRaw;
18+
19+
/// Global keyword (inherit, initial, unset, revert).
20+
factory CssUserSelect.global(CssGlobal global) = _CssUserSelectGlobal;
21+
}
22+
23+
final class _CssUserSelectKeyword extends CssUserSelect {
24+
final String keyword;
25+
const _CssUserSelectKeyword(this.keyword) : super._();
26+
27+
@override
28+
String toCss() => keyword;
29+
}
30+
31+
final class _CssUserSelectVariable extends CssUserSelect {
32+
final String varName;
33+
const _CssUserSelectVariable(this.varName) : super._();
34+
35+
@override
36+
String toCss() => 'var(--$varName)';
37+
}
38+
39+
final class _CssUserSelectRaw extends CssUserSelect {
40+
final String value;
41+
const _CssUserSelectRaw(this.value) : super._();
42+
43+
@override
44+
String toCss() => value;
45+
}
46+
47+
final class _CssUserSelectGlobal extends CssUserSelect {
48+
final CssGlobal global;
49+
const _CssUserSelectGlobal(this.global) : super._();
50+
51+
@override
52+
String toCss() => global.toCss();
53+
}

‎packages/spark_css/lib/src/css_types/css_will_change.dart‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
import 'css_value.dart';
2+
3+
/// CSS will-change property values.
4+
sealed class CssWillChange implements CssValue {
5+
const CssWillChange._();
6+
7+
static const CssWillChange auto = _CssWillChangeKeyword('auto');
8+
static const CssWillChange scrollPosition = _CssWillChangeKeyword(
9+
'scroll-position',
10+
);
11+
static const CssWillChange contents = _CssWillChangeKeyword('contents');
12+
13+
/// Hints that the listed CSS property names will change.
14+
///
15+
/// Example: `CssWillChange.properties(['transform', 'opacity'])`
16+
/// produces `will-change: transform, opacity`.
17+
factory CssWillChange.properties(List<String> properties) =
18+
_CssWillChangeProperties;
19+
20+
/// CSS variable reference.
21+
factory CssWillChange.variable(String varName) = _CssWillChangeVariable;
22+
23+
/// Raw CSS value escape hatch.
24+
factory CssWillChange.raw(String value) = _CssWillChangeRaw;
25+
26+
/// Global keyword (inherit, initial, unset, revert).
27+
factory CssWillChange.global(CssGlobal global) = _CssWillChangeGlobal;
28+
}
29+
30+
final class _CssWillChangeKeyword extends CssWillChange {
31+
final String keyword;
32+
const _CssWillChangeKeyword(this.keyword) : super._();
33+
34+
@override
35+
String toCss() => keyword;
36+
}
37+
38+
final class _CssWillChangeProperties extends CssWillChange {
39+
final List<String> properties;
40+
const _CssWillChangeProperties(this.properties) : super._();
41+
42+
@override
43+
String toCss() => properties.join(', ');
44+
}
45+
46+
final class _CssWillChangeVariable extends CssWillChange {
47+
final String varName;
48+
const _CssWillChangeVariable(this.varName) : super._();
49+
50+
@override
51+
String toCss() => 'var(--$varName)';
52+
}
53+
54+
final class _CssWillChangeRaw extends CssWillChange {
55+
final String value;
56+
const _CssWillChangeRaw(this.value) : super._();
57+
58+
@override
59+
String toCss() => value;
60+
}
61+
62+
final class _CssWillChangeGlobal extends CssWillChange {
63+
final CssGlobal global;
64+
const _CssWillChangeGlobal(this.global) : super._();
65+
66+
@override
67+
String toCss() => global.toCss();
68+
}

0 commit comments

Comments
 (0)