Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including powercss with all npm packages installed. Try it out:

var powercss = require("powercss")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

powercss v1.4.6

Unleash PowerCSS to create custom styling for every user of your web application. PowerCSS uses merging, caching, compression, and double-buffering to exceed the speed and flexibility of static CSS. https://www.youtube.com/watch?v=rnkMjzhxw4s

Extendo property feature plans

Summary

The __extendo_map_ property feature is planned which will extend style properties with an arbitrary number of keys and values in a named map.

Purpose

Extendo maps should be very handy for quickly creating similar selectors.

Example

Consider the following selector definition:

  _mixin_map_ : {
    _fred_map_ : {
      _background_ : '_xfff_',
      _margin_     : '_0_'
    },
    _default_font_ : 'arial,sans'
  }

  _style_list_ = [
    { _selector_str_ : '#pcss-_switch_',
      _rule_map_     : {
        _color_        : '_x888_',
        _font_         : '_default_font_',
        __extendo_map_ : '_fred_map_'
      }
    }
  ];

The resulting CSS should be:

#pcss-_switch_{background:#fff;margin:000;color:#888;font:arial,sans}

Requirements

The __extendo_map_ key (or more appropriate alternate) should be reserved and will need to be interpreted as such:

Search for the specified anywhere in the cascade, and if found add the
properties of that map to the closure. If a map value for the provided key
(_fred_map_ in this example) is not found ignore this directive.

Status

This is currently WIP and is held in reserve. Prior implementation needs to be rethought.

Last updated

2017-07-05 mmikowski

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free