dss 0.1.1

  • README.md
  • CHANGELOG.md
  • Installing
  • Versions
  • 0

DSS: CSS in Dart

DSS stands for Dart StyleSheet.

In the JavaScript community, there's a growing trend towards CSS in JS. It has some pros and, certainly, cons, but I won't point that out here because tons of great articles out there have already done that.

To my knowledge, at the time I wrote this, there's no library to do CSS in Dart yet. So, there you go, the first library of its kind.

This library is lightweight and platform agnostic. It doesn't do anything special. It doesn't auto-prefix your rules. It doesn't have some sophisticated cache. It just enables you to write CSS in Dart.

dartdocs.org uses Dart 1.x SDK to generate docs and fails to build, so I need to build the docs myself.

Usage

Regular Rule

CSS

.dss-0 {
  color: red;
  font-size: 12px;
}

DSS

querySelector('someSelector').className = dss(''
    'color: red;'
    'font-size: 12px;');

dss will generate a unique class name for your rule, parse the rule and insert it into a <style> tag.

Global Rule

You might need to specify the selector yourself.

CSS

html,
body {
  padding: 0;
}

DSS

global(
  'html, body',
  'padding: 0;',
);

Nesting and Pseudoclasses

CSS

.box {
  color: red;
}

.box:hover {
  color: blue;
}

.box > h5 {
  font-size: 20px;
}

.bigger > .box > h5 {
  font-size: 30px;
}

DSS

final box = dss('''
  color: red;

  &:hover {
    color: blue;
  }

  > h5 {
    font-size: 20px;
  }

  .bigger > & > h5 {
    font-size: 30px;
  }
''');

dss can generate a unique class name for you, so the concept of nesting might not be that important anymore, except for pseudoclasses, markups and legacy CSS interops.

Fallback Values

CSS

.box {
  color: purple;
  color: rebeccapurple;
}

DSS

// There's nothing special here.
final box = dss(''
    'color: purple;'
    'color: rebeccapurple;');

Media Queries @media

CSS

.box {
  color: red;
}

@media (min-width: 768px) and (max-width: 1024px) {
  .box {
    color: blue;
  }
}

DSS

final forIpad = '@media (min-width: 768px) and (max-width: 1024px)';
final box = dss('''
  color: red;

  $forIpad {
    color: blue;
  }
''');

Font Face @font-face

CSS

@font-face {
  font-family: "Open Sans";
  src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"), url("/fonts/OpenSans-Regular-webfont.woff")
      format("woff");
}

DSS

fontFace('''
  font-family: "Open Sans";
  src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
       url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
''');

Keyframes @keyframes

CSS

@keyframes fontbulger {
  0%,
  100% {
    font-size: 10px;
  }
  50% {
    font-size: 12px;
  }
}

.dss-0 {
  animation: fontbulger 2s infinite;
}

DSS

final fontBulger = keyframes('''
  0%,
  100% {
    font-size: 10px;
  }
  50% {
    font-size: 12px;
  }
''');

querySelector('someSelector')
  ..className = dss('animation: $fontBulger 2s infinite;')
  ..text = "Hello";

Import @import

CSS

@import url("https://fonts.googleapis.com/css?family=Roboto") screen;

DSS

importCss("url('https://fonts.googleapis.com/css?family=Roboto')", 'screen');

Supports @supports

Just use the native Css.supports and Css.supportsCondition.

Theming

String themedClass(String primaryColor, String textColor) => dss('''
  color: $textColor;
  background-color: $primaryColor;
''');

Moreover, it can be more reusable with cache.

class Theme {
  String primaryColor;
  String textColor;
  Theme(this.primaryColor, this.textColor);
}

final cache = new Expando<String>();

ButtonElement themedButton(Theme theme, [String text = 'Click!']) {
  if (cache[theme] == null) {
    cache[theme] = dss(''
        'color: ${theme.textColor};'
        'background-color: ${theme.primaryColor};');
  }
  return new ButtonElement()
    ..className = cache[theme]
    ..text = text;
}

void main() {
  final lightTheme = new Theme('white', 'black');
  final darkTheme = new Theme('black', 'white');
  document.body.append(themedButton(lightTheme));
  document.body.append(themedButton(darkTheme));
  document.body.append(
      themedButton(lightTheme, 'Do not click!')..setAttribute('disabled', ''));
}

This will result in

<button class="dss-0">Click!</button>
<button class="dss-1">Click!</button>
<button class="dss-0" disabled>Do not click!</button>

Composibility

CSS

.blue {
  color: blue;
}

.blue:hover {
  color: red;
}

.green {
  color: green;
}

.green:hover {
  color: red;
}

DSS

final redOnHoverMixin = '''
  &:hover {
    color: red;
  }
''';

final blue = dss('''
  color: blue;
  $redOnHoverMixin
''');

final green = dss('''
  color: green;
  $redOnHoverMixin
''');

Production Mode

Production mode will utilize the CSSStyleSheet.insertRule. insertRule is super fast, but its big drawback is that the css won't show in devtool's <style>.

To enable production mode, set an environment variable dss to prod.

An example of what build.yaml would look like:

targets:
  $default:
    builders:
      build_web_compilers|entrypoint:
        options:
          compiler: dart2js
          dart2js_args:
          - --fast-startup
          - --minify
          - --trust-type-annotations
          - --trust-primitives
          - -Ddss=prod # This line is needed to enable production mode.

Changelog

0.1.1

  • Add prefix for better debugging experience.

0.1.0

  • Drop the abstraction layer and use strings instead.

0.0.1

  • Initial version

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  dss: ^0.1.1

2. Install it

You can install packages from the command line:

with pub:


$ pub get

Alternatively, your editor might support pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:dss/dss.dart';
  
Version Uploaded Documentation Archive
0.1.1 Mar 10, 2018 Go to the documentation of dss 0.1.1 Download dss 0.1.1 archive
0.1.0 Mar 10, 2018 Go to the documentation of dss 0.1.0 Download dss 0.1.0 archive
0.0.1 Mar 3, 2018 Go to the documentation of dss 0.0.1 Download dss 0.0.1 archive
Popularity:
Describes how popular the package is relative to other packages. [more]
0
Health:
Code health derived from static analysis. [more]
0
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
0
Overall:
Weighted score of the above. [more]
0
Learn more about scoring.

The package version is not analyzed, because it does not support Dart 2. Until this is resolved, the package will receive a health and maintenance score of 0.

Analysis issues and suggestions

Support Dart 2 in pubspec.yaml.

The SDK constraint in pubspec.yaml doesn't allow the Dart 2.0.0 release. For information about upgrading it to be Dart 2 compatible, please see https://www.dartlang.org/dart-2#migration.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.0.0-dev <2.0.0