Skip to content

Instantly share code, notes, and snippets.

@matanlurey
Created August 18, 2018 01:01
Show Gist options
  • Save matanlurey/f3b6f6633e8541d8cc8c18052d1f638a to your computer and use it in GitHub Desktop.
Save matanlurey/f3b6f6633e8541d8cc8c18052d1f638a to your computer and use it in GitHub Desktop.
import 'dart:html';
import 'package:meta/dart2js.dart' as dart2js;
import 'optimizations.dart' show isDevMode;
/// A location in the DOM where CSS-styles are inserted for an application.
///
/// Often this is in `<head>`, but it could be in a different location in
/// test environments where the styles get cleared after every test case.
///
/// This class should not be implemented, extended, or mixed-in.
class CssStyleHost {
/// Application-level shared style host to shim CSS styles for components.
///
/// By default this is `<head>`, but may be configured in test environments.
static CssStyleHost sharedHost = CssStyleHost(document.head);
final HtmlElement _host;
final Expando<bool> _visited = new Expando();
CssStyleHost(this._host);
/// Appends [cssStyles] within this host.
@dart2js.noInline
void append(ComponentStyles cssStyles) {
if (_visited[cssStyles] == null) {
final sheet = StyleElement()..text = cssStyles._templateStyles;
if (isDevMode) {
sheet.setAttribute('from', cssStyles._templateUrl);
}
_host.append(sheet);
_visited[cssStyles] = true;
}
}
}
/// Encapsulates the CSS styles configured for a given component.
///
/// This class should not be implemented, extended, or mixed-in in user code.
class ComponentStyles {
/// Matches the component ID placeholder in encapsulating CSS classes.
static final RegExp _idPlaceholder = RegExp(r'%ID%');
final String _templateUrl;
final String _templateStyles;
ComponentStyles(
String uniqueId,
String templateStyles,
this._templateUrl,
) : _templateStyles = templateStyles.replaceAll(_idPlaceholder, uniqueId);
factory ComponentStyles.withEncapsulation(
String uniqueId,
String templateStyles,
String templateUrl,
) = _EncapsulatedComponentStyles;
/// Adds content CSS shim classes to a known HTML [element].
void addContentShimC(HtmlElement element) => element;
/// Adds content CSS shim classes to an unknown or SVG [element].
void addContentShimE(Element element) => element;
/// Adds host CSS shim classes to the root element of a component.
void addHostShim(HtmlElement element) => element;
/// Adds a [newClass] to [element], shimming as necessary.
void addContentClassShimmed(Element element, String newClass) {}
/// Adds a [newClass] to [element], shimming as necessary.
void addHostClassShimmed(Element element, String newClass) {}
}
class _EncapsulatedComponentStyles extends ComponentStyles {
static const _contentClassPrefix = '_ngcontent-';
static const _hostClassPrefix = '_nghost-';
final String _contentClass;
final String _hostClass;
_EncapsulatedComponentStyles(
String uniqueId,
String templateStyles,
String templateUrl,
) : _contentClass = '$_contentClassPrefix$uniqueId',
_hostClass = '$_hostClassPrefix$uniqueId',
super(
uniqueId,
templateStyles,
templateUrl,
);
@override
void addContentShimC(HtmlElement element) {
element.classes.add(_contentClass);
}
@override
void addContentShimE(Element element) {
element.classes.add(_contentClass);
}
@override
void addHostShim(HtmlElement element) {
element.classes.add(_hostClass);
}
@override
void addContentClassShimmed(Element element, String newClass) {
element.className = '$newClass $_contentClass';
}
@override
void addHostClassShimmed(Element element, String newClass) {
element.className = '$newClass $_hostClass';
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment