added StyleSheet object to link external stylesheets

title
schultek · Jan 6, 2024 · e778ecc · e778ecc
1 parent fe6229a
commit e778ecc
Show file tree

Hide file tree

Showing 9 changed files with 126 additions and 66 deletions.
diff --git a/examples/flutter_plugin_interop/pubspec.lock b/examples/flutter_plugin_interop/pubspec.lock
@@ -101,10 +101,10 @@ packages:
     dependency: transitive
     description:
       name: build_modules
-      sha256: "409fc1be491612bc1e2262f4c7fec6c91c683560662a34cfeedfcd1f7c13470b"
+      sha256: bd2e3693a33761fce4260704fcfa519042573457c8cf61c50249a7dde2fbe5e1
       url: "https://pub.dev"
     source: hosted
-    version: "5.0.3"
+    version: "5.0.5"
   build_resolvers:
     dependency: transitive
     description:
@@ -205,10 +205,10 @@ packages:
     dependency: transitive
     description:
       name: collection
-      sha256: f092b211a4319e98e5ff58223576de6c2803db36221657b46c82574721240687
+      sha256: ee67cb0715911d28db6bf4af1026078bd6f0128b07a5f66fb2ed94ec6783c09a
       url: "https://pub.dev"
     source: hosted
-    version: "1.17.2"
+    version: "1.18.0"
   convert:
     dependency: transitive
     description:
@@ -425,9 +425,10 @@ packages:
   jaspr_web_compilers:
     dependency: "direct dev"
     description:
-      path: "../../modules/build/jaspr_web_compilers"
-      relative: true
-    source: path
+      name: jaspr_web_compilers
+      sha256: "2c3818585e12f88008f0ffd84ff847743ce4d0096df50cc8b59584e69fa75b56"
+      url: "https://pub.dev"
+    source: hosted
     version: "4.0.7"
   js:
     dependency: transitive
@@ -481,10 +482,10 @@ packages:
     dependency: transitive
     description:
       name: meta
-      sha256: "3c74dbf8763d36539f114c799d8a2d87343b5067e9d796ca22b5eb8437090ee3"
+      sha256: a6e590c838b18133bb482a2745ad77c5bb7715fb0451209e1a7567d416678b8e
       url: "https://pub.dev"
     source: hosted
-    version: "1.9.1"
+    version: "1.10.0"
   mime:
     dependency: transitive
     description:
@@ -726,18 +727,18 @@ packages:
     dependency: transitive
     description:
       name: stack_trace
-      sha256: c3c7d8edb15bee7f0f74debd4b9c5f3c2ea86766fe4178eb2a18eb30a0bdaed5
+      sha256: "73713990125a6d93122541237550ee3352a2d84baad52d375a4cad2eb9b7ce0b"
       url: "https://pub.dev"
     source: hosted
-    version: "1.11.0"
+    version: "1.11.1"
   stream_channel:
     dependency: transitive
     description:
       name: stream_channel
-      sha256: "83615bee9045c1d322bbbd1ba209b7a749c2cbcdcb3fdd1df8eb488b3279c1c8"
+      sha256: ba2aa5d8cc609d96bbb2899c28934f9e1af5cddbd60a827822ea467161eb54e7
       url: "https://pub.dev"
     source: hosted
-    version: "2.1.1"
+    version: "2.1.2"
   stream_transform:
     dependency: transitive
     description:
@@ -766,10 +767,10 @@ packages:
     dependency: transitive
     description:
       name: test_api
-      sha256: "75760ffd7786fffdfb9597c35c5b27eaeec82be8edfb6d71d32651128ed7aab8"
+      sha256: "5c2f730018264d276c20e4f1503fd1308dfbbae39ec8ee63c5236311ac06954b"
       url: "https://pub.dev"
     source: hosted
-    version: "0.6.0"
+    version: "0.6.1"
   timing:
     dependency: transitive
     description:
@@ -814,10 +815,10 @@ packages:
     dependency: transitive
     description:
       name: web
-      sha256: dc8ccd225a2005c1be616fe02951e2e342092edf968cf0844220383757ef8f10
+      sha256: afe077240a270dcfd2aafe77602b4113645af95d0ad31128cc02bce5ac5d5152
       url: "https://pub.dev"
     source: hosted
-    version: "0.1.4-beta"
+    version: "0.3.0"
   web_socket_channel:
     dependency: transitive
     description:
@@ -851,5 +852,5 @@ packages:
     source: hosted
     version: "3.1.2"
 sdks:
-  dart: ">=3.1.0-185.0.dev <3.2.0"
+  dart: ">=3.2.0-194.0.dev <3.4.0"
   flutter: ">=3.3.0"
diff --git a/examples/package_riverpod/pubspec.lock b/examples/package_riverpod/pubspec.lock
@@ -310,13 +310,6 @@ packages:
       relative: true
     source: path
     version: "0.3.8"
-  jaspr_web_compilers:
-    dependency: "direct overridden"
-    description:
-      path: "../../modules/build/jaspr_web_compilers"
-      relative: true
-    source: path
-    version: "4.0.7"
   js:
     dependency: transitive
     description:

diff --git a/experiments/mobx_hooks/pubspec.lock b/experiments/mobx_hooks/pubspec.lock
@@ -93,10 +93,10 @@ packages:
     dependency: transitive
     description:
       name: build_modules
-      sha256: "017226b2fd3eef4e5f31839c930efad33110cdfe71b6255c7dca298b38dba61c"
+      sha256: bd2e3693a33761fce4260704fcfa519042573457c8cf61c50249a7dde2fbe5e1
       url: "https://pub.dev"
     source: hosted
-    version: "5.0.2"
+    version: "5.0.5"
   build_resolvers:
     dependency: transitive
     description:
@@ -125,10 +125,10 @@ packages:
     dependency: "direct dev"
     description:
       name: build_web_compilers
-      sha256: e614f5e1317fe9b2574429e3e651951a1c38943416c047e02815a7d6ade264c9
+      sha256: ebd3db74f0d53ae9b91a214016e35733add484a1a3014e188754954e8d69843c
       url: "https://pub.dev"
     source: hosted
-    version: "4.0.3"
+    version: "4.0.8"
   built_collection:
     dependency: transitive
     description:
@@ -640,4 +640,4 @@ packages:
     source: hosted
     version: "3.1.1"
 sdks:
-  dart: ">=3.0.0 <3.2.0"
+  dart: ">=3.1.0 <3.4.0"
diff --git a/experiments/preload_images/pubspec.lock b/experiments/preload_images/pubspec.lock
@@ -85,10 +85,10 @@ packages:
     dependency: transitive
     description:
       name: build_modules
-      sha256: "017226b2fd3eef4e5f31839c930efad33110cdfe71b6255c7dca298b38dba61c"
+      sha256: bd2e3693a33761fce4260704fcfa519042573457c8cf61c50249a7dde2fbe5e1
       url: "https://pub.dev"
     source: hosted
-    version: "5.0.2"
+    version: "5.0.5"
   build_resolvers:
     dependency: transitive
     description:
@@ -117,10 +117,10 @@ packages:
     dependency: "direct dev"
     description:
       name: build_web_compilers
-      sha256: e614f5e1317fe9b2574429e3e651951a1c38943416c047e02815a7d6ade264c9
+      sha256: ebd3db74f0d53ae9b91a214016e35733add484a1a3014e188754954e8d69843c
       url: "https://pub.dev"
     source: hosted
-    version: "4.0.3"
+    version: "4.0.8"
   built_collection:
     dependency: transitive
     description:
@@ -560,4 +560,4 @@ packages:
     source: hosted
     version: "3.1.1"
 sdks:
-  dart: ">=3.0.0 <3.2.0"
+  dart: ">=3.1.0 <3.4.0"
diff --git a/experiments/scoped_styles/pubspec.lock b/experiments/scoped_styles/pubspec.lock
@@ -85,10 +85,10 @@ packages:
     dependency: transitive
     description:
       name: build_modules
-      sha256: "017226b2fd3eef4e5f31839c930efad33110cdfe71b6255c7dca298b38dba61c"
+      sha256: bd2e3693a33761fce4260704fcfa519042573457c8cf61c50249a7dde2fbe5e1
       url: "https://pub.dev"
     source: hosted
-    version: "5.0.2"
+    version: "5.0.5"
   build_resolvers:
     dependency: transitive
     description:
@@ -117,10 +117,10 @@ packages:
     dependency: "direct dev"
     description:
       name: build_web_compilers
-      sha256: e614f5e1317fe9b2574429e3e651951a1c38943416c047e02815a7d6ade264c9
+      sha256: ebd3db74f0d53ae9b91a214016e35733add484a1a3014e188754954e8d69843c
       url: "https://pub.dev"
     source: hosted
-    version: "4.0.3"
+    version: "4.0.8"
   built_collection:
     dependency: transitive
     description:
@@ -569,4 +569,4 @@ packages:
     source: hosted
     version: "3.1.1"
 sdks:
-  dart: ">=3.0.0 <3.2.0"
+  dart: ">=3.1.0 <3.4.0"
diff --git a/packages/jaspr/CHANGELOG.md b/packages/jaspr/CHANGELOG.md
@@ -1,3 +1,7 @@
+## Unreleased minor
+- Added StyleSheet object to jaspr/lib/src/components/style.dart, so you can add custom CSS StyleSheets
+- Modified _BaseDocument to inlcude option StyleSheet list attribute
+
 ## 0.9.3
 
 - Fixed `melos format` on Windows.

diff --git a/packages/jaspr/lib/src/components/style.dart b/packages/jaspr/lib/src/components/style.dart
@@ -1,3 +1,5 @@
+import 'dart:html';
+
 import '../../jaspr.dart';
 
 class Style extends StatelessComponent {
@@ -9,7 +11,8 @@ class Style extends StatelessComponent {
   Iterable<Component> build(BuildContext context) sync* {
     yield DomComponent(
       tag: 'style',
-      child: Text(styles.map((s) => s._toCss()).join(cssPropSpace), rawHtml: true),
+      child:
+          Text(styles.map((s) => s._toCss()).join(cssPropSpace), rawHtml: true),
     );
   }
 }
@@ -18,10 +21,13 @@ const cssBlockInset = kDebugMode || kGenerateMode ? '  ' : '';
 const cssPropSpace = kDebugMode || kGenerateMode ? '\n' : ' ';
 
 abstract class StyleRule {
-  const factory StyleRule({required Selector selector, required Styles styles}) = _BlockStyleRule;
+  const factory StyleRule(
+      {required Selector selector, required Styles styles}) = _BlockStyleRule;
 
   const factory StyleRule.import(String url) = _ImportStyleRule;
-  const factory StyleRule.media({required MediaRuleQuery query, required List<StyleRule> styles}) = _MediaStyleRule;
+  const factory StyleRule.media(
+      {required MediaRuleQuery query,
+      required List<StyleRule> styles}) = _MediaStyleRule;
 
   String _toCss([String indent]);
 }
@@ -64,8 +70,10 @@ abstract class MediaRuleQuery {
   String get _value;
 
   static const MediaRuleQuery all = MediaRuleQuery();
-  static const MediaRuleQuery screen = MediaRuleQuery(target: MediaRuleTarget.screen);
-  static const MediaRuleQuery print = MediaRuleQuery(target: MediaRuleTarget.print);
+  static const MediaRuleQuery screen =
+      MediaRuleQuery(target: MediaRuleTarget.screen);
+  static const MediaRuleQuery print =
+      MediaRuleQuery(target: MediaRuleTarget.print);
 
   const factory MediaRuleQuery({
     MediaRuleTarget target,
@@ -79,7 +87,8 @@ abstract class MediaRuleQuery {
   }) = _MediaRuleQuery;
 
   const factory MediaRuleQuery.not(MediaRuleQuery query) = _NotMediaRuleQuery;
-  const factory MediaRuleQuery.any(List<MediaRuleQuery> queries) = _AnyMediaRuleQuery;
+  const factory MediaRuleQuery.any(List<MediaRuleQuery> queries) =
+      _AnyMediaRuleQuery;
 }
 
 enum Orientation { portrait, landscape }
@@ -200,7 +209,8 @@ extension SelectorMixin on Selector {
 
   Selector adjacentSibling(Selector next) {
     assert(unallowedList(this));
-    return Selector.combine([this, next], combinator: Combinator.adjacentSibling);
+    return Selector.combine([this, next],
+        combinator: Combinator.adjacentSibling);
   }
 }
 
@@ -223,7 +233,8 @@ class Selector {
 
   const factory Selector.chain(List<Selector> selectors) = _ChainSelector;
 
-  const factory Selector.combine(List<Selector> selectors, {Combinator combinator}) = _CombineSelector;
+  const factory Selector.combine(List<Selector> selectors,
+      {Combinator combinator}) = _CombineSelector;
 
   const factory Selector.list(List<Selector> selectors) = _ListSelector;
 }
@@ -235,7 +246,8 @@ class _AttrSelector implements Selector {
   const _AttrSelector(this.attr, {this.check = const AttrCheck.exists()});
 
   @override
-  String get selector => '[$attr${check.value}${!check.caseSensitive ? ' i' : ''}]';
+  String get selector =>
+      '[$attr${check.value}${!check.caseSensitive ? ' i' : ''}]';
 }
 
 class AttrCheck {
@@ -245,12 +257,18 @@ class AttrCheck {
   const AttrCheck.exists()
       : value = '',
         caseSensitive = true;
-  const AttrCheck.exactly(String value, {this.caseSensitive = true}) : value = '="$value"';
-  const AttrCheck.containsWord(String value, {this.caseSensitive = true}) : value = '~="$value"';
-  const AttrCheck.startsWith(String prefix, {this.caseSensitive = true}) : value = '^="$prefix"';
-  const AttrCheck.endsWith(String suffix, {this.caseSensitive = true}) : value = '\$="$suffix"';
-  const AttrCheck.dashPrefixed(String prefix, {this.caseSensitive = true}) : value = '|="$prefix"';
-  const AttrCheck.contains(String prefix, {this.caseSensitive = true}) : value = '*="$prefix"';
+  const AttrCheck.exactly(String value, {this.caseSensitive = true})
+      : value = '="$value"';
+  const AttrCheck.containsWord(String value, {this.caseSensitive = true})
+      : value = '~="$value"';
+  const AttrCheck.startsWith(String prefix, {this.caseSensitive = true})
+      : value = '^="$prefix"';
+  const AttrCheck.endsWith(String suffix, {this.caseSensitive = true})
+      : value = '\$="$suffix"';
+  const AttrCheck.dashPrefixed(String prefix, {this.caseSensitive = true})
+      : value = '|="$prefix"';
+  const AttrCheck.contains(String prefix, {this.caseSensitive = true})
+      : value = '*="$prefix"';
 }
 
 class _ChainSelector implements Selector {
@@ -284,10 +302,12 @@ class _CombineSelector implements Selector {
   final List<Selector> selectors;
   final Combinator combinator;
 
-  const _CombineSelector(this.selectors, {this.combinator = Combinator.descendant});
+  const _CombineSelector(this.selectors,
+      {this.combinator = Combinator.descendant});
 
   @override
-  String get selector => selectors.map((s) => s.selector).join(combinator.separator);
+  String get selector =>
+      selectors.map((s) => s.selector).join(combinator.separator);
 }
 
 class _ListSelector implements Selector {
@@ -298,3 +318,19 @@ class _ListSelector implements Selector {
   @override
   String get selector => selectors.map((s) => s.selector).join(', ');
 }
+
+//<link rel="stylesheet" href="mystyle.css">
+///StyleSheet Components to link CSS StyleSheets to Document
+class StyleSheet extends StatelessComponent {
+  final String src;
+
+  const StyleSheet({required this.src, super.key});
+
+  @override
+  Iterable<Component> build(BuildContext context) sync* {
+    yield DomComponent(
+      tag: 'link',
+      attributes: {"rel": "stylesheet", "href": src},
+    );
+  }
+}