dss 0.1.1

  • README.md
  • CHANGELOG.md
  • Installing
  • Versions
  • 50

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

Analysis

We analyzed this package on Jul 13, 2018, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.0.0-dev.63.0
  • pana: 0.11.3

Scores

Popularity:
Describes how popular the package is relative to other packages. [more]
0 / 100
Health:
Code health derived from static analysis. [more]
100 / 100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100 / 100
Overall score:
Weighted score of the above. [more]
50
Learn more about scoring.

Platforms

Detected platforms: web

Primary library: package:dss/dss.dart with components: html.

Suggestions

  • The description is too short.

    Add more detail about the package, what it does and what is its target use case. Try to write at least 60 characters.

  • Package is pre-v1 release.

    While there is nothing inherently wrong with versions of 0.*.*, it usually means that the author is still experimenting with the general direction API.

  • Maintain an example.

    Create a short demo in the example/ directory to show how to use this package. Common file name patterns include: main.dart, example.dart or you could also use dss.dart.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.0.0-dev <2.0.0
Dev dependencies
build_runner
build_web_compilers
livereload