scissors 0.1.5 scissors: ^0.1.5 copied to clipboard
A CSS minifier / tree-shaker for AngularDart 1.x / Angular2.
sCiSSors #
Cuts your Angular Dart builds: resource optimizer (CSS, SVG, PNG), Sass runner and more.
Bored of tuning your Sass imports to avoid bloated CSS? This is for you!
Disclaimer: This is not an official Google product.
Features #
- For each .css file, prunes rules that aren't used in its .html companion or in the templates inlined in its .dart companion (see tests and examples)
- Supports Angular(1,2) templates inside
@Component
/@View
annotations. - Supports
ng-class
andclass
names with programmatic interpolated fragments (e.g.class="some-{{fragmented}}-class and-some-normal-class"
,ng-class="{'some-class': isSome}"
). - Compiles
*.sass
and*.scss
files withsassc
- Rebuilds
.css
file whenever any transitive.sass
import is modified. (note: requirespub serve --force-poll
) - Supports Compass's inline-image helper to inline images.
- Optimizes
.svg
and.png
files (withpngcrush
) before inlining them
- Rebuilds
- Also experimentally supports generating locale permutations with pre-loaded
deferred messages (concatenates
.part.js
files to speed up load time), and reoptimizing the resulting.js
files with the Closure Compiler. See example/permutations for usage example.
Usage #
-
Add the sCiSSors dep and transformer:
dev_dependencies: scissors transformers: - scissors
-
You can optionally point sCiSSors to your local
sassc
install if it's not in the path (hint: install withbrew install sassc
on MacOS X) and provide it with extra args:transformers: - scissors: sasscPath: path/to/sassc sasscArgs: - -foo - -bar
Please only setup sCiSSors's transformer on projects you know respect sCiSSors' conventions and limitations.
Limitations #
- Assumes if foo.html exists, foo.css is only used from there (conventions
matter). This means sCiSSors should be disabled or used with caution when
using Angular2 with
ViewEncapsulation.None
(see section below). - Very limited support of CSS rules (naive and hopefully pessimistic matching),
- Bails out of pruning as soon as it doesn't recognize the (map literal)
syntax of an
ng-class
(or if the map has non-string-literal keys), - Does not detect direct / handle DOM manipulations done in .dart companion files yet (html:Element.classes, etc).
- No support for XML namespaces in CSS3 attribute selectors.
- No CSS renaming yet (just pruning for now),
- No Polymer.dart support yet.
Style Isolation in Angular #
Angular(1,2) provide the following strategies:
- Shadow DOM (default in AngularDart 1.x), implemented by
ShadowDomComponentFactory
in AngularDart 1.x andViewEncapsulation.Native
in Angular2 - Shadow DOM emulation with "transclusion" (default in Angular2) implemented by
TranscludingComponentFactory
in AngularDart 1.x andViewEncapsulation.Emulated
in Angular2 - Unscoped / no Shadow DOM, implemented by
ViewEncapsulation.None
in Angular2
The first two strategies (Shadow DOM & its transcluded emulation) provide strict encapsulation of style at the component level: styles defined in a component do not leak to any of its sub-components or parent components. This is the assumption by which sCiSSors lives, so you're safe with it.
The last "unscoped" strategy means there's no file- or component-local way of deciding if a style could be used elsewhere. You should not use sCiSSors on packages / projects with that strategy.
TODO #
Please see issues.