├── .gitignore
├── 404.html
├── README.md
├── TODO.md
├── css-anim-types.js
├── main.css
├── main.html
├── main.js
├── package-lock.json
├── package.json
├── scripts
├── deploy
├── helpers.js
├── inline
└── prefix
└── snippets.js
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | _build
3 | _deploy
4 | DESIGN.txt
5 | scratchpad
6 | npm-debug.log
7 |
--------------------------------------------------------------------------------
/404.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | )
29 | 2. Update `css-animated-properties`
30 | 3. Update `css-shorthand-properties`
31 | 1. Some manual processing will be needed to define the expanded properties correctly
32 | - [ ] Come up with new design
33 | * See issues for more info
34 | * Use a phased approach — start with new display of what currently exists, then add things later
35 | - [ ] Work out how to include SVG properties as well
36 | - [ ] Implement new design for existing content
37 | - [ ] Start adding new feature suggestions
38 |
--------------------------------------------------------------------------------
/css-anim-types.js:
--------------------------------------------------------------------------------
1 | var typeDescriptions = {
2 | 'color': {
3 | spec: 'Interpolated via red, green, blue and alpha components (treating each as a number). The interpolation is done between premultiplied colors (that is, colors for which the red, green, and blue components specified have been multiplied by the alpha).
',
4 | human: [
5 | 'All colours are animated in the same way regardless of how they’re defined.',
6 | '(To be completed)'
7 | ]
8 | },
9 | 'length': {
10 | spec: 'Interpolated as real numbers.
',
11 | human: [
12 | 'Animate from a start number to an end number via any number in between.'
13 | ]
14 | },
15 | 'length-percentage-calc': {
16 | spec: 'When both values are lengths, interpolated as lengths; when both values are percentages, interpolated as percentages; otherwise, both values are converted into a calc()
function that is the sum of a length and a percentage (each possibly zero), and these calc()
functions have each half interpolated as real numbers.
',
17 | human: [
18 | '(To be completed)'
19 | ]
20 | },
21 | 'integer': {
22 | spec: 'Interpolated via discrete steps (whole numbers). The interpolation happens in real number space and is converted to an integer by rounding to the nearest integer, with values halfway between a pair of integers rounded towards positive infinity.
',
23 | human: [
24 | '(To be completed)'
25 | ]
26 | },
27 | 'font-weight': {
28 | spec: 'Interpolated via discrete steps (multiples of 100). The interpolation happens in real number space and is converted to an integer by rounding to the nearest multiple of 100, with values halfway between multiples of 100 rounded towards positive infinity.
',
29 | human: [
30 | '(To be completed)'
31 | ]
32 | },
33 | 'number': {
34 | spec: 'Interpolated as real (floating point) numbers.
',
35 | human: [
36 | '(To be completed)'
37 | ]
38 | },
39 | 'rectangle': {
40 | spec: 'interpolated via the x, y, width and height components (treating each as a number).
',
41 | human: [
42 | '(To be completed)'
43 | ]
44 | },
45 | 'visibility': {
46 | spec: 'If one of the values is visible
, interpolated as a discrete step where values of the timing function between 0 and 1 map to visible
and other values of the timing function (which occur only at the start/end of the transition or as a result of cubic-bezier()
functions with Y values outside of [0, 1]) map to the closer endpoint; if neither value is visible
then not interpolable.
',
47 | human: [
48 | '(To be completed)'
49 | ]
50 | },
51 | 'shadow-list': {
52 | spec: 'Each shadow in the list is interpolated via the color (as color) component, and x, y, blur, and (when appropriate) spread (as length) components. For each shadow, if one input shadow is inset
and the other is not, then the result for that shadow matches the inputs; otherwise the entire list is not interpolable. If the lists of shadows have different lengths, then the shorter list is padded at the end with shadows whose color is transparent
, all lengths are 0
, and whose inset
(or not) matches the longer list.
',
53 | human: [
54 | '(To be completed)'
55 | ]
56 | },
57 | 'font-stretch': {
58 | spec: 'Font stretch is interpolated in discrete steps. The interpolation happens as though the ordered values are equally spaced real numbers. The interpolation result is rounded to the nearest value, with values exactly halfway between two values rounded towards the later value in the list above.
',
59 | human: [
60 | '(To be completed)'
61 | ]
62 | },
63 | 'transform': {
64 | spec: 'When animating or transitioning transforms, the transform function lists must be interpolated. For interpolation between one transform from-transform and a second transforms to-transform , the rules described below are applied.
If both the from- and to-transform are none :There is no interpolation necessary. The computed value stays none . If one of the from- or to-transforms is none .The value none is replaced by an equivalent identity transform function list for the corresponding transform function list. Both transform function lists get interpolated following the next rule. If from- and to-transform have the same number of transform functions, each transform function pair has either the same name, or is a derivative of the same primitive . In all other cases:The transform functions of each transform function list on the from- and to-transform get post multiplied and converted into 4x4 matrices. Each of the matrices gets interpolated following the instructions in Interpolation of matrices . The computed value is the transform function matrix if both initial matrices can be represented by a correlating 3x2 matrix and matrix3d otherwise. In some cases, an animation might cause a transformation matrix to be singular or non-invertible. For example, an animation in which scale moves from 1 to -1. At the time when the matrix is in such a state, the transformed element is not rendered.
',
65 | human: [
66 | '(To be completed)'
67 | ]
68 | },
69 | 'basic-shape': {
70 | spec: 'For interpolating between one basic shape and a second, the rules below are applied. The values in the shape functions interpolate as a simple list . The list values interpolate as length, percentage, or calc where possible. If list values are not one of those types but are identical (such as finding nonzero in the same list position in both lists) those values do interpolate.
Both shapes must use the same reference box . If both shapes are the same type, that type is ellipse() or circle() , and none of the radii use the closest-side or farthest-side keywords, interpolate between each value in the shape functions. If both shapes are of type inset() , interpolate between each value in the shape functions. If both shapes are of type polygon() , both polygons have the same number of vertices, and use the same <fill-rule> , interpolate between each value in the shape functions. In all other cases no interpolation is specified. ',
71 | human: [
72 | '(To be completed)'
73 | ]
74 | }
75 | };
76 |
--------------------------------------------------------------------------------
/main.css:
--------------------------------------------------------------------------------
1 | /* Generic elements */
2 |
3 | body, input {
4 | background-color: hsl(207, 11%, 15%);
5 | color: #fff;
6 | /* Use the good fonts if they're available, but I'm not bothering with web font bloat */
7 | font-family: "Fira Sans", "Trebuchet MS", Tahoma, sans-serif;
8 | font-weight: 300;
9 | font-size: 1em;
10 | line-height: 1.5;
11 | }
12 | body {
13 | display: flex;
14 | flex-direction: column;
15 | margin: 0;
16 | min-height: 100vh;
17 | }
18 | a {
19 | color: #fff;
20 | text-decoration: none;
21 | border-bottom: 1px solid currentColor;
22 | }
23 | a:hover {
24 | background-color: rgba(255, 255, 255, 0.2);
25 | border-bottom-color: transparent;
26 | border-radius: 1px;
27 | }
28 | blockquote {
29 | font-style: italic;
30 | margin: 1em 0.75rem;
31 | }
32 | code {
33 | font-family: "Fira Mono", Menlo, Consolas, "Courier New", monospace;
34 | font-size: 1em;
35 | }
36 | main {
37 | display: flex;
38 | flex-direction: column;
39 | flex-grow: 1;
40 | }
41 |
42 |
43 | /* Search form */
44 |
45 | .big-text {
46 | font-size: 1.625em;
47 | margin: 0 0.5rem;
48 | }
49 | .big-text p:first-child {
50 | margin-top: 0.5em;
51 | }
52 | .big-text label {
53 | line-height: 1.25;
54 | }
55 | .big-text input[type=text] {
56 | border: 0 solid #999;
57 | border-bottom-width: 1px;
58 | border-radius: 0;
59 | padding: 0 0.1em;
60 | width: calc(100% - 1em);
61 | }
62 | .big-text input[type=text]:focus {
63 | background-color: hsl(189, 21%, 20%);
64 | outline: none;
65 | }
66 |
67 |
68 | /* Results */
69 |
70 | .results {
71 | display: none;
72 | position: relative;
73 | }
74 | .results.has-results {
75 | display: block;
76 | }
77 | .result {
78 | background-color: hsl(206, 93%, 17%);
79 | overflow: hidden;
80 | }
81 | .result::before {
82 | border-radius: 0.25em 0.25em 0.35em 0.35em / 0.25em 0.25em 1em 1em;
83 | box-sizing: border-box;
84 | display: block;
85 | left: 0.75rem;
86 | padding: 0.125em 0.5em;
87 | position: absolute;
88 | text-align: center;
89 | top: 0;
90 | transform: translateY(-50%);
91 | font-weight: bold;
92 | }
93 | .result-yes::before,
94 | .result-shorthand-yes::before {
95 | background-color: hsl(146, 95%, 19%);
96 | content: '✔︎';
97 | }
98 | .result-no::before {
99 | background-color: hsl(14, 83%, 31%);
100 | content: '✘';
101 | }
102 | .result-shorthand-mixed::before {
103 | background-color: hsl(76, 97%, 18%);
104 | content: '~';
105 | }
106 | .result-sortof::before {
107 | background-color: hsl(29, 51%, 34%);
108 | content: '!?';
109 | }
110 | .headline {
111 | font-size: 1.25em;
112 | margin: 0 0.75rem;
113 | }
114 | .animtype {
115 | background-color: hsl(206, 92%, 31%);
116 | font-size: 1.125em;
117 | overflow: hidden;
118 | padding: 0 0.75rem;
119 | }
120 | .animtype h2 {
121 | font-size: 1em;
122 | }
123 | .animtype h2 small {
124 | display: block;
125 | margin-left: 0.75rem;
126 | }
127 | .shorthand-details {
128 | border-top: 1px dashed #fff;
129 | font-size: 1.125em;
130 | margin: 0 0.75rem 1em;
131 | overflow: hidden;
132 | }
133 | .shorthand-unanimatable {
134 | border-top: 1px dashed currentColor;
135 | color: rgba(255, 255, 255, 0.6);
136 | }
137 | .longhand-list {
138 | line-height: 1.5;
139 | list-style: none;
140 | padding-left: 0.75rem;
141 | }
142 | .longhand-list li::before {
143 | content: '»';
144 | margin-right: 0.25em;
145 | }
146 | .longhand-type {
147 | display: block;
148 | margin-left: 3em;
149 | }
150 |
151 |
152 | /* About section */
153 |
154 | .about {
155 | background-color: hsl(181, 93%, 20%);
156 | display: none;
157 | font-size: 1.125em;
158 | overflow: hidden;
159 | padding: 0 0.75em;
160 | }
161 | .about:target {
162 | display: block;
163 | }
164 | .about h2 {
165 | font-size: 1em;
166 | }
167 |
168 |
169 | /* Footer */
170 |
171 | .footer-nav {
172 | display: flex;
173 | flex-wrap: wrap;
174 | list-style: none;
175 | margin: 1.5em 0 1em;
176 | padding: 0;
177 | }
178 | .footer-nav li {
179 | margin: 0.125em 0.75rem;
180 | }
181 | .footer-nav li::before {
182 | content: '•';
183 | margin-right: 0.25em;
184 | }
185 |
186 |
187 |
188 | /**
189 | * BREAKPOINT: A little bit of breathing room.
190 | *
191 | * - Space the content away from the window edges
192 | * - Round the content corners a tad
193 | */
194 |
195 | @media (min-width: 25em) {
196 | body {
197 | margin: 0.75rem;
198 | min-height: calc(100vh - 1.5rem);
199 | }
200 | .result,
201 | .animtype,
202 | .about {
203 | border-radius: 0.25em;
204 | }
205 | .about {
206 | margin-top: 0.75rem;
207 | }
208 | }
209 |
210 |
211 | /**
212 | * BREAKPOINT: Space for side-by-side content.
213 | *
214 | * - Animation type sub-header moves inline
215 | * - Longhand property and type details sit in columns
216 | * - Footer links are centre-aligned
217 | */
218 |
219 | @media (min-width: 35em) {
220 | .animtype h2 small {
221 | display: inline;
222 | margin-left: 0;
223 | }
224 | .longhand-list li {
225 | display: table-row;
226 | }
227 | .longhand-list code {
228 | display: table-cell;
229 | }
230 | .longhand-type {
231 | margin-left: 1em;
232 | }
233 | footer ul {
234 | justify-content: center;
235 | }
236 | }
237 |
238 |
239 | /**
240 | * BREAKPOINT: Lotsa room for some better personal space boundaries.
241 | *
242 | * - Bigger fonts
243 | * - More spacing between content sections
244 | * - Main input moves inline
245 | */
246 |
247 | @media (min-width: 47em) {
248 | .big-text input[type=text] {
249 | width: 10em;
250 | }
251 | .big-text {
252 | font-size: 1.875em;
253 | margin-left: 1.25rem;
254 | }
255 | .result::before {
256 | left: 1.25rem;
257 | }
258 | .headline {
259 | font-size: 1.5em;
260 | }
261 | .headline,
262 | .shorthand-details {
263 | margin-left: 1.25rem;
264 | margin-right: 1.25rem;
265 | }
266 | .animtype {
267 | padding: 0 1.25rem;
268 | }
269 | .longhand-list {
270 | padding-left: 1.25rem;
271 | }
272 | .about {
273 | margin-top: 1.25rem;
274 | padding: 0 1.25rem;
275 | }
276 | }
277 |
278 |
279 | /* These rules copied from w3.org, to match the visual display of specs */
280 | .spec .css::before {content: "\2018";}
281 | .spec .css::after {content: "\2019";}
282 | .spec code.css {font-family: inherit;}
283 |
--------------------------------------------------------------------------------
/main.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Can I animate…?
8 |
9 |
10 |
11 |
12 |
17 |
18 |
19 |
20 |
21 | What’s this all about then, eh?
22 | “Can I animate?” is a site inspired by Can I use , but focused specifically on CSS animations and transitions.
23 | The aim is to provide a comprehensive reference of which CSS properties can and can‘t be animated, and exactly how the animations are calculated by browsers.
24 | Admittedly, it’s not complete yet (ship early and iterate) – there’s a rough roadmap of planned features on GitHub .
25 | The site is maintained by Gilmore Davidson with assistance from Sean Curtis .
26 |
27 |
28 |
29 |
36 |
37 |
68 |
81 |
114 |
121 |
122 |
123 |
124 |
125 |
126 |
127 |
128 |
129 |
--------------------------------------------------------------------------------
/main.js:
--------------------------------------------------------------------------------
1 | (function () {
2 | var id = document.getElementById.bind(document);
3 | var domProperty = id('search-property');
4 | var domResults = id('results');
5 |
6 | var knownProps = ['align-content','align-items','align-self','alignment-baseline','animation','animation-delay','animation-direction','animation-duration','animation-fill-mode','animation-iteration-count','animation-name','animation-play-state','animation-timing-function','azimuth','backface-visibility','background','background-attachment','background-blend-mode','background-clip','background-color','background-image','background-origin','background-position','background-position-x','background-position-y','background-repeat','background-size','baseline-shift','bookmark-label','bookmark-level','bookmark-state','border','border-bottom','border-bottom-color','border-bottom-left-radius','border-bottom-right-radius','border-bottom-style','border-bottom-width','border-boundary','border-collapse','border-color','border-image','border-image-outset','border-image-repeat','border-image-slice','border-image-source','border-image-width','border-left','border-left-color','border-left-style','border-left-width','border-radius','border-right','border-right-color','border-right-style','border-right-width','border-spacing','border-style','border-top','border-top-color','border-top-left-radius','border-top-right-radius','border-top-style','border-top-width','border-width','bottom','box-decoration-break','box-shadow','box-sizing','box-snap','break-after','break-before','break-inside','buffered-rendering','caption-side','caret-color','clear','clip','clip-path','clip-rule','color','color-adjust','color-interpolation','color-interpolation-filters','color-rendering','column-count','column-fill','column-gap','column-rule','column-rule-color','column-rule-style','column-rule-width','column-span','column-width','columns','contain','content','counter-increment','counter-reset','counter-set','cue','cue-after','cue-before','cursor','cx','cy','d','direction','display','dominant-baseline','elevation','empty-cells','fill','fill-opacity','fill-rule','filter','flex','flex-basis','flex-direction','flex-flow','flex-grow','flex-shrink','flex-wrap','float','flood-color','flood-opacity','flow-from','flow-into','font','font-family','font-feature-settings','font-kerning','font-language-override','font-size','font-size-adjust','font-stretch','font-style','font-synthesis','font-variant','font-variant-alternates','font-variant-caps','font-variant-east-asian','font-variant-ligatures','font-variant-numeric','font-variant-position','font-weight','footnote-display','footnote-policy','gap','glyph-orientation-vertical','grid','grid-area','grid-auto-columns','grid-auto-flow','grid-auto-rows','grid-column','grid-column-end','grid-column-gap','grid-column-start','grid-gap','grid-row','grid-row-end','grid-row-gap','grid-row-start','grid-template','grid-template-areas','grid-template-columns','grid-template-rows','hanging-punctuation','height','hyphens','image-orientation','image-rendering','image-resolution','ime-mode','initial-letter','initial-letter-align','initial-letter-wrap','isolation','justify-content','justify-items','justify-self','left','letter-spacing','lighting-color','line-break','line-grid','line-height','line-snap','list-style','list-style-image','list-style-position','list-style-type','margin','margin-bottom','margin-left','margin-right','margin-top','marker-end','marker-mid','marker-side','marker-start','marquee-direction','marquee-loop','marquee-speed','marquee-style','mask','mask-border','mask-border-mode','mask-border-outset','mask-border-repeat','mask-border-slice','mask-border-source','mask-border-width','mask-clip','mask-composite','mask-image','mask-mode','mask-origin','mask-position','mask-position-x','mask-position-y','mask-repeat','mask-size','mask-type','max-height','max-lines','max-width','min-height','min-width','mix-blend-mode','nav-down','nav-left','nav-right','nav-up','object-fit','object-position','offset','offset-after','offset-anchor','offset-before','offset-distance','offset-end','offset-path','offset-position','offset-rotate','offset-start','opacity','order','orphans','outline','outline-color','outline-offset','outline-style','outline-width','overflow','overflow-anchor','overflow-style','overflow-wrap','overflow-x','overflow-y','padding','padding-bottom','padding-left','padding-right','padding-top','page','page-break-after','page-break-before','page-break-inside','paint-order','pause','pause-after','pause-before','perspective','perspective-origin','pitch','pitch-range','place-content','place-items','place-self','play-during','pointer-events','position','quotes','r','region-fragment','resize','rest','rest-after','rest-before','richness','right','rotation','rotation-point','row-gap','ruby-align','ruby-merge','ruby-position','running','rx','ry','scroll-behavior','scroll-padding','scroll-padding-block','scroll-padding-block-end','scroll-padding-block-start','scroll-padding-bottom','scroll-padding-inline','scroll-padding-inline-end','scroll-padding-inline-start','scroll-padding-left','scroll-padding-right','scroll-padding-top','scroll-snap-align','scroll-snap-coordinate','scroll-snap-destination','scroll-snap-margin','scroll-snap-margin-block','scroll-snap-margin-block-end','scroll-snap-margin-block-start','scroll-snap-margin-bottom','scroll-snap-margin-inline','scroll-snap-margin-inline-end','scroll-snap-margin-inline-start','scroll-snap-margin-left','scroll-snap-margin-right','scroll-snap-margin-top','scroll-snap-points-x','scroll-snap-points-y','scroll-snap-stop','scroll-snap-type','scroll-snap-type-x','scroll-snap-type-y','shape-image-threshold','shape-inside','shape-margin','shape-outside','shape-rendering','size','speak','speak-as','speak-header','speak-numeral','speak-punctuation','speech-rate','stop-color','stop-opacity','stress','string-set','stroke','stroke-dasharray','stroke-dashoffset','stroke-linecap','stroke-linejoin','stroke-miterlimit','stroke-opacity','stroke-width','tab-size','table-layout','text-align','text-align-all','text-align-last','text-anchor','text-combine-upright','text-decoration','text-decoration-color','text-decoration-line','text-decoration-skip','text-decoration-style','text-emphasis','text-emphasis-color','text-emphasis-position','text-emphasis-style','text-indent','text-justify','text-orientation','text-overflow','text-rendering','text-shadow','text-size-adjust','text-transform','text-underline-position','top','touch-action','transform','transform-box','transform-origin','transform-style','transition','transition-delay','transition-duration','transition-property','transition-timing-function','unicode-bidi','user-select','vector-effect','vertical-align','visibility','voice-balance','voice-duration','voice-family','voice-pitch','voice-range','voice-rate','voice-stress','voice-volume','volume','white-space','widows','width','will-change','word-break','word-spacing','word-wrap','wrap-flow','wrap-through','writing-mode','x','y','z-index','zoom'];
7 | var shorthands = cssShorthandProps.shorthandProperties;
8 |
9 | var templates = {
10 | cache: {},
11 | get: function (name) {
12 | if (name in templates.cache) {
13 | return templates.cache[name];
14 | }
15 | var elem = document.getElementById('tpl-' + name);
16 | if (!elem) {
17 | return [];
18 | }
19 | var tpl = templates.cache[name] = elem.innerHTML;
20 | return tpl;
21 | },
22 | render: function (name, data) {
23 | var tpl = templates.get(name);
24 | return Mustache.render(tpl, data);
25 | },
26 | renderAsNode: function (name, data) {
27 | var htmlString = templates.render(name, data);
28 | var holder = document.createElement('div');
29 | holder.innerHTML = htmlString;
30 | return holder;
31 | },
32 | renderAsFragment: function (name, data) {
33 | var holder = templates.renderAsNode(name, data);
34 | var node;
35 | while ((node = holder.childNodes[0])) {
36 | // childNodes is a live NodeList, so appending to the fragment removes it from holder
37 | frag.appendChild(node);
38 | }
39 | return frag;
40 | }
41 | };
42 |
43 | function joinWords(list, lastJoiner) {
44 | if (list.length < 2) {
45 | return list.join();
46 | }
47 | lastJoiner || (lastJoiner = ' or ');
48 | var last = list.slice(-1);
49 | return list.slice(0, -1).join(', ') + lastJoiner + last;
50 | }
51 |
52 | function getTypeDetails(types) {
53 | return types.map(function (type, index) {
54 | var typeData = cssAnimProps.types[type];
55 | var prefix = (type === 'integer') ? 'an' : 'a';
56 | if (index && index === types.length - 1) {
57 | prefix = 'or';
58 | }
59 | return {
60 | type: type,
61 | name: typeData.name,
62 | href: typeData.href,
63 | prefix: prefix
64 | };
65 | })
66 | }
67 |
68 | function runInput() {
69 | var prop = domProperty.value.trim();
70 | domResults.classList[prop.length ? 'add' : 'remove']('has-results');
71 | if (prop.length) {
72 | showResult(prop);
73 | }
74 | }
75 |
76 | function showResult(prop) {
77 | prop = prop.toLowerCase();
78 | var canAnimate = cssAnimProps.canAnimate(prop);
79 | var canAnimatePartial = false;
80 | var isShorthand = (prop in shorthands);
81 | var data = {
82 | property: prop
83 | };
84 | var details, longhands, output;
85 | if (canAnimate) {
86 | details = cssAnimProps.getProperty(prop);
87 | if (isShorthand) {
88 | longhands = cssShorthandProps.expand(prop);
89 | longhands.forEach(function (p) {
90 | if (details.properties.indexOf(p) === -1) {
91 | canAnimatePartial = true;
92 | }
93 | });
94 | data.result_shorthand = true;
95 | data.result = canAnimatePartial ? 'A bit' : 'Yep';
96 | data.className = canAnimatePartial ? 'shorthand-mixed' : 'shorthand-yes';
97 | } else {
98 | data.result_yes = true;
99 | data.result = 'Yep';
100 | data.className = 'yes';
101 | data.types = getTypeDetails(details.types);
102 | }
103 | } else {
104 | if (knownProps.indexOf(prop) === -1 && !isShorthand) {
105 | data.result_unknown = true;
106 | data.className = 'unknown';
107 | // Special case
108 | } else if (prop === 'background-image') {
109 | data.result_sortof_bgimage = true;
110 | data.result = 'Sort of';
111 | data.className = 'sortof';
112 | } else {
113 | data.result_no = true;
114 | data.result = 'Nope'
115 | data.className = 'no';
116 | }
117 | }
118 |
119 | output = templates.renderAsNode('result', data);
120 | if (canAnimate) {
121 | output.querySelector('.details').innerHTML = isShorthand ?
122 | showShorthand(details, {
123 | canAnimate: canAnimate,
124 | isPartial: canAnimatePartial,
125 | longhands: longhands
126 | }) :
127 | showAnimType(details.types[0]);
128 | // Special case
129 | } else if (prop === 'background-image') {
130 | output.querySelector('.details').innerHTML = templates.render('bgimage', data);
131 | }
132 | domResults.innerHTML = output.innerHTML;
133 | }
134 |
135 | function showShorthand(details, extra) {
136 | var data = Object.create(details);
137 | data.compatibility = extra.isPartial ? 'only some' : 'all';
138 | data.isPartial = extra.isPartial;
139 | if (extra.canAnimate) {
140 | data.propertiesYes = data.properties.map(function (prop) {
141 | var subDetails = cssAnimProps.getProperty(prop);
142 | var subProps;
143 | // Special case: Only `border` is a shorthand of shorthands
144 | if (subDetails.properties) {
145 | subProps = subDetails.properties;
146 | }
147 | return {
148 | name: prop,
149 | types: subDetails.types && getTypeDetails(subDetails.types),
150 | properties: subProps,
151 | isShorthand: !!subProps
152 | };
153 | });
154 | }
155 | if (data.isPartial) {
156 | data.propertiesNo = extra.longhands.filter(function (prop) {
157 | return data.properties.indexOf(prop) === -1;
158 | });
159 | }
160 | return templates.render('shorthand', data);
161 | }
162 |
163 | function showAnimType(type) {
164 | var desc = typeDescriptions[type] || {};
165 | var details = cssAnimProps.types[type] || {};
166 | var data = {
167 | key: type,
168 | name: details.name,
169 | href: details.href,
170 | desc: desc
171 | };
172 |
173 | return templates.render('animtype', data);
174 | }
175 |
176 | function delegatedClass(className, callback) {
177 | return function (e) {
178 | if (e.target.classList.contains(className)) {
179 | callback.apply(e.target, arguments);
180 | }
181 | };
182 | }
183 |
184 |
185 | // Initial setup and DOM bindings
186 |
187 | id('search-form').addEventListener('submit', function (e) {
188 | e.preventDefault();
189 | }, false);
190 |
191 | domProperty.addEventListener('input', runInput, false);
192 | window.addEventListener('load', runInput, false);
193 |
194 | })();
195 |
196 | // Analytics
197 | if (location.hostname.indexOf('canianimate.com') > -1) {
198 | var ga = function () {
199 | ga.q.push(arguments);
200 | }
201 | ga.q = [
202 | ['create', 'UA-8341018-6', 'auto'],
203 | ['send', 'pageview']
204 | ];
205 | ga.l = +new Date();
206 | // Make sure to load GA script after page load
207 | window.addEventListener('load', function (e) {
208 | var s = document.createElement('script');
209 | s.src = 'https://ssl.google-analytics.com/analytics.js';
210 | document.body.appendChild(s);
211 | }, false);
212 | }
213 |
--------------------------------------------------------------------------------
/package-lock.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "canianimate",
3 | "version": "1.0.0",
4 | "lockfileVersion": 1,
5 | "requires": true,
6 | "dependencies": {
7 | "ansi-regex": {
8 | "version": "2.1.1",
9 | "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
10 | "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=",
11 | "dev": true
12 | },
13 | "ansi-styles": {
14 | "version": "3.2.0",
15 | "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.0.tgz",
16 | "integrity": "sha512-NnSOmMEYtVR2JVMIGTzynRkkaxtiq1xnFBcdQD/DnNCYPoEPsVJhM98BDyaoNOQIi7p4okdi3E27eN7GQbsUug==",
17 | "dev": true,
18 | "requires": {
19 | "color-convert": "1.9.1"
20 | }
21 | },
22 | "argparse": {
23 | "version": "1.0.9",
24 | "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.9.tgz",
25 | "integrity": "sha1-c9g7wmP4bpf4zE9rrhsOkKfSLIY=",
26 | "dev": true,
27 | "requires": {
28 | "sprintf-js": "1.0.3"
29 | }
30 | },
31 | "autoprefixer": {
32 | "version": "7.1.6",
33 | "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-7.1.6.tgz",
34 | "integrity": "sha512-C9yv/UF3X+eJTi/zvfxuyfxmLibYrntpF3qoJYrMeQwgUJOZrZvpJiMG2FMQ3qnhWtF/be4pYONBBw95ZGe3vA==",
35 | "dev": true,
36 | "requires": {
37 | "browserslist": "2.9.1",
38 | "caniuse-lite": "1.0.30000777",
39 | "normalize-range": "0.1.2",
40 | "num2fraction": "https://registry.npmjs.org/num2fraction/-/num2fraction-1.2.2.tgz",
41 | "postcss": "6.0.14",
42 | "postcss-value-parser": "3.3.0"
43 | },
44 | "dependencies": {
45 | "browserslist": {
46 | "version": "2.9.1",
47 | "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-2.9.1.tgz",
48 | "integrity": "sha512-3n3nPdbUqn3nWmsy4PeSQthz2ja1ndpoXta+dwFFNhveGjMg6FXpWYe12vsTpNoXJbzx3j7GZXdtoVIdvh3JbA==",
49 | "dev": true,
50 | "requires": {
51 | "caniuse-lite": "1.0.30000777",
52 | "electron-to-chromium": "1.3.27"
53 | }
54 | },
55 | "postcss": {
56 | "version": "6.0.14",
57 | "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.14.tgz",
58 | "integrity": "sha512-NJ1z0f+1offCgadPhz+DvGm5Mkci+mmV5BqD13S992o0Xk9eElxUfPPF+t2ksH5R/17gz4xVK8KWocUQ5o3Rog==",
59 | "dev": true,
60 | "requires": {
61 | "chalk": "2.3.0",
62 | "source-map": "0.6.1",
63 | "supports-color": "4.5.0"
64 | }
65 | },
66 | "source-map": {
67 | "version": "0.6.1",
68 | "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
69 | "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
70 | "dev": true
71 | }
72 | }
73 | },
74 | "caniuse-lite": {
75 | "version": "1.0.30000777",
76 | "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30000777.tgz",
77 | "integrity": "sha1-McGKSozUl4LrswXI6Kk+azs+TxM=",
78 | "dev": true
79 | },
80 | "chalk": {
81 | "version": "2.3.0",
82 | "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.3.0.tgz",
83 | "integrity": "sha512-Az5zJR2CBujap2rqXGaJKaPHyJ0IrUimvYNX+ncCy8PJP4ltOGTrHUIo097ZaL2zMeKYpiCdqDvS6zdrTFok3Q==",
84 | "dev": true,
85 | "requires": {
86 | "ansi-styles": "3.2.0",
87 | "escape-string-regexp": "1.0.5",
88 | "supports-color": "4.5.0"
89 | }
90 | },
91 | "clap": {
92 | "version": "1.2.3",
93 | "resolved": "https://registry.npmjs.org/clap/-/clap-1.2.3.tgz",
94 | "integrity": "sha512-4CoL/A3hf90V3VIEjeuhSvlGFEHKzOz+Wfc2IVZc+FaUgU0ZQafJTP49fvnULipOPcAfqhyI2duwQyns6xqjYA==",
95 | "dev": true,
96 | "requires": {
97 | "chalk": "1.1.3"
98 | },
99 | "dependencies": {
100 | "ansi-styles": {
101 | "version": "2.2.1",
102 | "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
103 | "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=",
104 | "dev": true
105 | },
106 | "chalk": {
107 | "version": "1.1.3",
108 | "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
109 | "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
110 | "dev": true,
111 | "requires": {
112 | "ansi-styles": "2.2.1",
113 | "escape-string-regexp": "1.0.5",
114 | "has-ansi": "2.0.0",
115 | "strip-ansi": "3.0.1",
116 | "supports-color": "2.0.0"
117 | }
118 | },
119 | "supports-color": {
120 | "version": "2.0.0",
121 | "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
122 | "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=",
123 | "dev": true
124 | }
125 | }
126 | },
127 | "coa": {
128 | "version": "1.0.4",
129 | "resolved": "https://registry.npmjs.org/coa/-/coa-1.0.4.tgz",
130 | "integrity": "sha1-qe8VNmDWqGqL3sAomlxoTSF0Mv0=",
131 | "dev": true,
132 | "requires": {
133 | "q": "1.5.1"
134 | }
135 | },
136 | "color-convert": {
137 | "version": "1.9.1",
138 | "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.1.tgz",
139 | "integrity": "sha512-mjGanIiwQJskCC18rPR6OmrZ6fm2Lc7PeGFYwCmy5J34wC6F1PzdGL6xeMfmgicfYcNLGuVFA3WzXtIDCQSZxQ==",
140 | "dev": true,
141 | "requires": {
142 | "color-name": "1.1.3"
143 | }
144 | },
145 | "color-name": {
146 | "version": "1.1.3",
147 | "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
148 | "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
149 | "dev": true
150 | },
151 | "colors": {
152 | "version": "1.1.2",
153 | "resolved": "https://registry.npmjs.org/colors/-/colors-1.1.2.tgz",
154 | "integrity": "sha1-FopHAXVran9RoSzgyXv6KMCE7WM=",
155 | "dev": true
156 | },
157 | "concat-map": {
158 | "version": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
159 | "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
160 | "dev": true
161 | },
162 | "core-util-is": {
163 | "version": "1.0.2",
164 | "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
165 | "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=",
166 | "dev": true
167 | },
168 | "css-animated-properties": {
169 | "version": "1.1.0",
170 | "resolved": "https://registry.npmjs.org/css-animated-properties/-/css-animated-properties-1.1.0.tgz",
171 | "integrity": "sha512-smXJuz5DHj0z1J/2OKCq6FeJgL9KlBBlzrgkjQzanu9lCBiUsByBHQeOUH5z9sC5xUByB6NYhj8Ttx4xEa9SoA=="
172 | },
173 | "css-shorthand-properties": {
174 | "version": "1.1.0",
175 | "resolved": "https://registry.npmjs.org/css-shorthand-properties/-/css-shorthand-properties-1.1.0.tgz",
176 | "integrity": "sha512-0Pg/e2U0NgT6Chw1TUe3D2ZTOOO3JFzlDV+bN3hxR8T0RDjnwzmx5WhuYUA0GHYWlPYAYi2/Ac0e8oqgerHDQw=="
177 | },
178 | "css-tree": {
179 | "version": "1.0.0-alpha25",
180 | "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha25.tgz",
181 | "integrity": "sha512-XC6xLW/JqIGirnZuUWHXCHRaAjje2b3OIB0Vj5RIJo6mIi/AdJo30quQl5LxUl0gkXDIrTrFGbMlcZjyFplz1A==",
182 | "dev": true,
183 | "requires": {
184 | "mdn-data": "1.0.0",
185 | "source-map": "0.5.7"
186 | },
187 | "dependencies": {
188 | "source-map": {
189 | "version": "0.5.7",
190 | "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
191 | "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
192 | "dev": true
193 | }
194 | }
195 | },
196 | "dom-serializer": {
197 | "version": "0.1.0",
198 | "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.1.0.tgz",
199 | "integrity": "sha1-BzxpdUbOB4DOI75KKOKT5AvDDII=",
200 | "dev": true,
201 | "requires": {
202 | "domelementtype": "1.1.3",
203 | "entities": "1.1.1"
204 | },
205 | "dependencies": {
206 | "domelementtype": {
207 | "version": "1.1.3",
208 | "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-1.1.3.tgz",
209 | "integrity": "sha1-vSh3PiZCiBrsUVRJJCmcXNgiGFs=",
210 | "dev": true
211 | }
212 | }
213 | },
214 | "domelementtype": {
215 | "version": "1.3.0",
216 | "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-1.3.0.tgz",
217 | "integrity": "sha1-sXrtguirWeUt2cGbF1bg/BhyBMI=",
218 | "dev": true
219 | },
220 | "domhandler": {
221 | "version": "2.4.1",
222 | "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-2.4.1.tgz",
223 | "integrity": "sha1-iS5HAAqZvlW783dP/qBWHYh5wlk=",
224 | "dev": true,
225 | "requires": {
226 | "domelementtype": "1.3.0"
227 | }
228 | },
229 | "domutils": {
230 | "version": "1.6.2",
231 | "resolved": "https://registry.npmjs.org/domutils/-/domutils-1.6.2.tgz",
232 | "integrity": "sha1-GVjMC0yUJuntNn+xyOhUiRsPo/8=",
233 | "dev": true,
234 | "requires": {
235 | "dom-serializer": "0.1.0",
236 | "domelementtype": "1.3.0"
237 | }
238 | },
239 | "electron-to-chromium": {
240 | "version": "1.3.27",
241 | "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.27.tgz",
242 | "integrity": "sha1-eOy4o5kGYYe7N07t412ccFZagD0=",
243 | "dev": true
244 | },
245 | "entities": {
246 | "version": "1.1.1",
247 | "resolved": "https://registry.npmjs.org/entities/-/entities-1.1.1.tgz",
248 | "integrity": "sha1-blwtClYhtdra7O+AuQ7ftc13cvA=",
249 | "dev": true
250 | },
251 | "escape-string-regexp": {
252 | "version": "1.0.5",
253 | "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
254 | "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=",
255 | "dev": true
256 | },
257 | "esprima": {
258 | "version": "2.7.3",
259 | "resolved": "https://registry.npmjs.org/esprima/-/esprima-2.7.3.tgz",
260 | "integrity": "sha1-luO3DVd59q1JzQMmc9HDEnZ7pYE=",
261 | "dev": true
262 | },
263 | "fs-extra": {
264 | "version": "4.0.2",
265 | "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-4.0.2.tgz",
266 | "integrity": "sha1-+RcExT0bRh+JNFKwwwfZmXZHq2s=",
267 | "dev": true,
268 | "requires": {
269 | "graceful-fs": "4.1.11",
270 | "jsonfile": "4.0.0",
271 | "universalify": "0.1.1"
272 | },
273 | "dependencies": {
274 | "graceful-fs": {
275 | "version": "4.1.11",
276 | "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.11.tgz",
277 | "integrity": "sha1-Dovf5NHduIVNZOBOp8AOKgJuVlg=",
278 | "dev": true
279 | },
280 | "jsonfile": {
281 | "version": "4.0.0",
282 | "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
283 | "integrity": "sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=",
284 | "dev": true,
285 | "requires": {
286 | "graceful-fs": "4.1.11"
287 | }
288 | }
289 | }
290 | },
291 | "fs.realpath": {
292 | "version": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
293 | "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=",
294 | "dev": true
295 | },
296 | "glob": {
297 | "version": "7.1.2",
298 | "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.2.tgz",
299 | "integrity": "sha512-MJTUg1kjuLeQCJ+ccE4Vpa6kKVXkPYJ2mOCQyUuKLcLQsdrMCpBPUi8qVE6+YuaJkozeA9NusTAw3hLr8Xe5EQ==",
300 | "dev": true,
301 | "requires": {
302 | "fs.realpath": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
303 | "inflight": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
304 | "inherits": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
305 | "minimatch": "3.0.4",
306 | "once": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
307 | "path-is-absolute": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz"
308 | },
309 | "dependencies": {
310 | "balanced-match": {
311 | "version": "1.0.0",
312 | "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
313 | "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=",
314 | "dev": true
315 | },
316 | "brace-expansion": {
317 | "version": "1.1.8",
318 | "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.8.tgz",
319 | "integrity": "sha1-wHshHHyVLsH479Uad+8NHTmQopI=",
320 | "dev": true,
321 | "requires": {
322 | "balanced-match": "1.0.0",
323 | "concat-map": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz"
324 | }
325 | },
326 | "minimatch": {
327 | "version": "3.0.4",
328 | "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
329 | "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
330 | "dev": true,
331 | "requires": {
332 | "brace-expansion": "1.1.8"
333 | }
334 | }
335 | }
336 | },
337 | "has-ansi": {
338 | "version": "2.0.0",
339 | "resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-2.0.0.tgz",
340 | "integrity": "sha1-NPUEnOHs3ysGSa8+8k5F7TVBbZE=",
341 | "dev": true,
342 | "requires": {
343 | "ansi-regex": "2.1.1"
344 | }
345 | },
346 | "has-flag": {
347 | "version": "2.0.0",
348 | "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-2.0.0.tgz",
349 | "integrity": "sha1-6CB68cx7MNRGzHC3NLXovhj4jVE=",
350 | "dev": true
351 | },
352 | "he": {
353 | "version": "1.1.1",
354 | "resolved": "https://registry.npmjs.org/he/-/he-1.1.1.tgz",
355 | "integrity": "sha1-k0EP0hsAlzUVH4howvJx80J+I/0=",
356 | "dev": true
357 | },
358 | "html-minifier": {
359 | "version": "3.5.7",
360 | "resolved": "https://registry.npmjs.org/html-minifier/-/html-minifier-3.5.7.tgz",
361 | "integrity": "sha512-GISXn6oKDo7+gVpKOgZJTbHMCUI2TSGfpg/8jgencWhWJsvEmsvp3M8emX7QocsXsYznWloLib3OeSfeyb/ewg==",
362 | "dev": true,
363 | "requires": {
364 | "camel-case": "3.0.0",
365 | "clean-css": "4.1.9",
366 | "commander": "2.12.2",
367 | "he": "1.1.1",
368 | "ncname": "1.0.0",
369 | "param-case": "2.1.1",
370 | "relateurl": "https://registry.npmjs.org/relateurl/-/relateurl-0.2.7.tgz",
371 | "uglify-js": "3.2.0"
372 | },
373 | "dependencies": {
374 | "camel-case": {
375 | "version": "3.0.0",
376 | "resolved": "https://registry.npmjs.org/camel-case/-/camel-case-3.0.0.tgz",
377 | "integrity": "sha1-yjw2iKTpzzpM2nd9xNy8cTJJz3M=",
378 | "dev": true,
379 | "requires": {
380 | "no-case": "2.3.2",
381 | "upper-case": "https://registry.npmjs.org/upper-case/-/upper-case-1.1.3.tgz"
382 | }
383 | },
384 | "clean-css": {
385 | "version": "4.1.9",
386 | "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.1.9.tgz",
387 | "integrity": "sha1-Nc7ornaHpJuYA09w3gDE7dOCYwE=",
388 | "dev": true,
389 | "requires": {
390 | "source-map": "0.5.7"
391 | }
392 | },
393 | "commander": {
394 | "version": "2.12.2",
395 | "resolved": "https://registry.npmjs.org/commander/-/commander-2.12.2.tgz",
396 | "integrity": "sha512-BFnaq5ZOGcDN7FlrtBT4xxkgIToalIIxwjxLWVJ8bGTpe1LroqMiqQXdA7ygc7CRvaYS+9zfPGFnJqFSayx+AA==",
397 | "dev": true
398 | },
399 | "param-case": {
400 | "version": "2.1.1",
401 | "resolved": "https://registry.npmjs.org/param-case/-/param-case-2.1.1.tgz",
402 | "integrity": "sha1-35T9jPZTHs915r75oIWPvHK+Ikc=",
403 | "dev": true,
404 | "requires": {
405 | "no-case": "2.3.2"
406 | }
407 | },
408 | "source-map": {
409 | "version": "0.5.7",
410 | "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
411 | "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
412 | "dev": true
413 | },
414 | "uglify-js": {
415 | "version": "3.2.0",
416 | "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.2.0.tgz",
417 | "integrity": "sha512-L98DlTshoPGnZGF8pr3MoE+CCo6n9joktHNHMPkckeBV8xTVc4CWtC0kGGhQsIvnX2Ug4nXFTAeE7SpTrPX2tg==",
418 | "dev": true,
419 | "requires": {
420 | "commander": "2.12.2",
421 | "source-map": "0.6.1"
422 | },
423 | "dependencies": {
424 | "source-map": {
425 | "version": "0.6.1",
426 | "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
427 | "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
428 | "dev": true
429 | }
430 | }
431 | }
432 | }
433 | },
434 | "htmlparser2": {
435 | "version": "3.9.2",
436 | "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-3.9.2.tgz",
437 | "integrity": "sha1-G9+HrMoPP55T+k/M6w9LTLsAszg=",
438 | "dev": true,
439 | "requires": {
440 | "domelementtype": "1.3.0",
441 | "domhandler": "2.4.1",
442 | "domutils": "1.6.2",
443 | "entities": "1.1.1",
444 | "inherits": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
445 | "readable-stream": "2.3.3"
446 | }
447 | },
448 | "inflight": {
449 | "version": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
450 | "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=",
451 | "dev": true,
452 | "requires": {
453 | "once": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
454 | "wrappy": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz"
455 | }
456 | },
457 | "inherits": {
458 | "version": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
459 | "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=",
460 | "dev": true
461 | },
462 | "inline-source": {
463 | "version": "5.2.6",
464 | "resolved": "https://registry.npmjs.org/inline-source/-/inline-source-5.2.6.tgz",
465 | "integrity": "sha512-7pDWdf3LtsHR3i0EoRC8zNkJ4cuVs4cbf75B+/3ZpDDb3MMaGFBfFLO0ActxbL/MmOS+Zn3N0qJSdSTmOFc8+A==",
466 | "dev": true,
467 | "requires": {
468 | "csso": "3.3.1",
469 | "htmlparser2": "3.9.2",
470 | "is-plain-obj": "1.1.0",
471 | "object-assign": "4.1.1",
472 | "svgo": "0.7.2",
473 | "uglify-js": "3.1.10"
474 | },
475 | "dependencies": {
476 | "commander": {
477 | "version": "2.11.0",
478 | "resolved": "https://registry.npmjs.org/commander/-/commander-2.11.0.tgz",
479 | "integrity": "sha512-b0553uYA5YAEGgyYIGYROzKQ7X5RAqedkfjiZxwi0kL1g3bOaBNNZfYkzt/CL0umgD5wc9Jec2FbB98CjkMRvQ==",
480 | "dev": true
481 | },
482 | "csso": {
483 | "version": "3.3.1",
484 | "resolved": "https://registry.npmjs.org/csso/-/csso-3.3.1.tgz",
485 | "integrity": "sha512-OjETffCFB/OzwxVL3eF0+5tXOXCMukVO6rEUxlkIhscE1KRObyg+zMrLUbkPn9kxgBrFWicc37Gv5/22dOh5EA==",
486 | "dev": true,
487 | "requires": {
488 | "css-tree": "1.0.0-alpha25"
489 | }
490 | },
491 | "source-map": {
492 | "version": "0.6.1",
493 | "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
494 | "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
495 | "dev": true
496 | },
497 | "uglify-js": {
498 | "version": "3.1.10",
499 | "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.1.10.tgz",
500 | "integrity": "sha512-0ul3BWx79We0mIPM1l72oqpMtWL0TVMnKZZY6FaHPy3tDzCZGXeFxw5N1ZvtkmQsLI+ECR/tUQyIYbyHUcuvEw==",
501 | "dev": true,
502 | "requires": {
503 | "commander": "2.11.0",
504 | "source-map": "0.6.1"
505 | }
506 | }
507 | }
508 | },
509 | "is-plain-obj": {
510 | "version": "1.1.0",
511 | "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-1.1.0.tgz",
512 | "integrity": "sha1-caUMhCnfync8kqOQpKA7OfzVHT4=",
513 | "dev": true
514 | },
515 | "isarray": {
516 | "version": "1.0.0",
517 | "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
518 | "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=",
519 | "dev": true
520 | },
521 | "js-yaml": {
522 | "version": "3.7.0",
523 | "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.7.0.tgz",
524 | "integrity": "sha1-XJZ93YN6m/3KXy3oQlOr6KHAO4A=",
525 | "dev": true,
526 | "requires": {
527 | "argparse": "1.0.9",
528 | "esprima": "2.7.3"
529 | }
530 | },
531 | "mdn-data": {
532 | "version": "1.0.0",
533 | "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-1.0.0.tgz",
534 | "integrity": "sha1-pp2dp2hHtNWDTBRl6iXAZTofv2Y=",
535 | "dev": true
536 | },
537 | "minimist": {
538 | "version": "0.0.8",
539 | "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
540 | "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=",
541 | "dev": true
542 | },
543 | "mkdirp": {
544 | "version": "0.5.1",
545 | "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
546 | "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
547 | "dev": true,
548 | "requires": {
549 | "minimist": "0.0.8"
550 | }
551 | },
552 | "mustache": {
553 | "version": "2.3.0",
554 | "resolved": "https://registry.npmjs.org/mustache/-/mustache-2.3.0.tgz",
555 | "integrity": "sha1-QCj3d4sXcIpImTCm5SrDvKDaQdA="
556 | },
557 | "ncname": {
558 | "version": "1.0.0",
559 | "resolved": "https://registry.npmjs.org/ncname/-/ncname-1.0.0.tgz",
560 | "integrity": "sha1-W1etGLHKCShk72Kwse2BlPODtxw=",
561 | "dev": true,
562 | "requires": {
563 | "xml-char-classes": "1.0.0"
564 | }
565 | },
566 | "no-case": {
567 | "version": "2.3.2",
568 | "resolved": "https://registry.npmjs.org/no-case/-/no-case-2.3.2.tgz",
569 | "integrity": "sha512-rmTZ9kz+f3rCvK2TD1Ue/oZlns7OGoIWP4fc3llxxRXlOkHKoWPPWJOfFYpITabSow43QJbRIoHQXtt10VldyQ==",
570 | "dev": true,
571 | "requires": {
572 | "lower-case": "1.1.4"
573 | },
574 | "dependencies": {
575 | "lower-case": {
576 | "version": "1.1.4",
577 | "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-1.1.4.tgz",
578 | "integrity": "sha1-miyr0bno4K6ZOkv31YdcOcQujqw=",
579 | "dev": true
580 | }
581 | }
582 | },
583 | "normalize-range": {
584 | "version": "0.1.2",
585 | "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
586 | "integrity": "sha1-LRDAa9/TEuqXd2laTShDlFa3WUI=",
587 | "dev": true
588 | },
589 | "num2fraction": {
590 | "version": "https://registry.npmjs.org/num2fraction/-/num2fraction-1.2.2.tgz",
591 | "integrity": "sha1-b2gragJ6Tp3fpFZM0lidHU5mnt4=",
592 | "dev": true
593 | },
594 | "object-assign": {
595 | "version": "4.1.1",
596 | "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
597 | "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
598 | "dev": true
599 | },
600 | "once": {
601 | "version": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
602 | "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
603 | "dev": true,
604 | "requires": {
605 | "wrappy": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz"
606 | }
607 | },
608 | "path-is-absolute": {
609 | "version": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
610 | "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=",
611 | "dev": true
612 | },
613 | "postcss-value-parser": {
614 | "version": "3.3.0",
615 | "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.0.tgz",
616 | "integrity": "sha1-h/OPnxj3dKSrTIojL1xc6IcqnRU=",
617 | "dev": true
618 | },
619 | "process-nextick-args": {
620 | "version": "1.0.7",
621 | "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-1.0.7.tgz",
622 | "integrity": "sha1-FQ4gt1ZZCtP5EJPyWk8q2L/zC6M=",
623 | "dev": true
624 | },
625 | "q": {
626 | "version": "1.5.1",
627 | "resolved": "https://registry.npmjs.org/q/-/q-1.5.1.tgz",
628 | "integrity": "sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc=",
629 | "dev": true
630 | },
631 | "readable-stream": {
632 | "version": "2.3.3",
633 | "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.3.tgz",
634 | "integrity": "sha512-m+qzzcn7KUxEmd1gMbchF+Y2eIUbieUaxkWtptyHywrX0rE8QEYqPC07Vuy4Wm32/xE16NcdBctb8S0Xe/5IeQ==",
635 | "dev": true,
636 | "requires": {
637 | "core-util-is": "1.0.2",
638 | "inherits": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
639 | "isarray": "1.0.0",
640 | "process-nextick-args": "1.0.7",
641 | "safe-buffer": "5.1.1",
642 | "string_decoder": "1.0.3",
643 | "util-deprecate": "1.0.2"
644 | }
645 | },
646 | "relateurl": {
647 | "version": "https://registry.npmjs.org/relateurl/-/relateurl-0.2.7.tgz",
648 | "integrity": "sha1-VNvzd+UUQKypCkzSdGANP/LYiKk=",
649 | "dev": true
650 | },
651 | "safe-buffer": {
652 | "version": "5.1.1",
653 | "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.1.tgz",
654 | "integrity": "sha512-kKvNJn6Mm93gAczWVJg7wH+wGYWNrDHdWvpUmHyEsgCtIwwo3bqPtV4tR5tuPaUhTOo/kvhVwd8XwwOllGYkbg==",
655 | "dev": true
656 | },
657 | "sax": {
658 | "version": "1.2.4",
659 | "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
660 | "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==",
661 | "dev": true
662 | },
663 | "sprintf-js": {
664 | "version": "1.0.3",
665 | "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
666 | "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=",
667 | "dev": true
668 | },
669 | "string_decoder": {
670 | "version": "1.0.3",
671 | "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.0.3.tgz",
672 | "integrity": "sha512-4AH6Z5fzNNBcH+6XDMfA/BTt87skxqJlO0lAh3Dker5zThcAxG6mKz+iGu308UKoPPQ8Dcqx/4JhujzltRa+hQ==",
673 | "dev": true,
674 | "requires": {
675 | "safe-buffer": "5.1.1"
676 | }
677 | },
678 | "strip-ansi": {
679 | "version": "3.0.1",
680 | "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
681 | "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
682 | "dev": true,
683 | "requires": {
684 | "ansi-regex": "2.1.1"
685 | }
686 | },
687 | "supports-color": {
688 | "version": "4.5.0",
689 | "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-4.5.0.tgz",
690 | "integrity": "sha1-vnoN5ITexcXN34s9WRJQRJEvY1s=",
691 | "dev": true,
692 | "requires": {
693 | "has-flag": "2.0.0"
694 | }
695 | },
696 | "svgo": {
697 | "version": "0.7.2",
698 | "resolved": "https://registry.npmjs.org/svgo/-/svgo-0.7.2.tgz",
699 | "integrity": "sha1-n1dyQTlSE1xv779Ar+ak+qiLS7U=",
700 | "dev": true,
701 | "requires": {
702 | "coa": "1.0.4",
703 | "colors": "1.1.2",
704 | "csso": "2.3.2",
705 | "js-yaml": "3.7.0",
706 | "mkdirp": "0.5.1",
707 | "sax": "1.2.4",
708 | "whet.extend": "0.9.9"
709 | },
710 | "dependencies": {
711 | "csso": {
712 | "version": "2.3.2",
713 | "resolved": "https://registry.npmjs.org/csso/-/csso-2.3.2.tgz",
714 | "integrity": "sha1-3dUsWHAz9J6Utx/FVWnyUuj/X4U=",
715 | "dev": true,
716 | "requires": {
717 | "clap": "1.2.3",
718 | "source-map": "0.5.7"
719 | }
720 | },
721 | "source-map": {
722 | "version": "0.5.7",
723 | "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
724 | "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
725 | "dev": true
726 | }
727 | }
728 | },
729 | "universalify": {
730 | "version": "0.1.1",
731 | "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.1.tgz",
732 | "integrity": "sha1-+nG63UQ3r0wUiEHjs7Fl+enlkLc=",
733 | "dev": true
734 | },
735 | "upper-case": {
736 | "version": "https://registry.npmjs.org/upper-case/-/upper-case-1.1.3.tgz",
737 | "integrity": "sha1-9rRQHC7EzdJrp4vnIilh3ndiFZg=",
738 | "dev": true
739 | },
740 | "util-deprecate": {
741 | "version": "1.0.2",
742 | "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
743 | "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=",
744 | "dev": true
745 | },
746 | "whet.extend": {
747 | "version": "0.9.9",
748 | "resolved": "https://registry.npmjs.org/whet.extend/-/whet.extend-0.9.9.tgz",
749 | "integrity": "sha1-+HfVv2SMl+WqVC+twW1qJZucEaE=",
750 | "dev": true
751 | },
752 | "wrappy": {
753 | "version": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
754 | "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
755 | "dev": true
756 | },
757 | "xml-char-classes": {
758 | "version": "1.0.0",
759 | "resolved": "https://registry.npmjs.org/xml-char-classes/-/xml-char-classes-1.0.0.tgz",
760 | "integrity": "sha1-ZGV4SKIP/F31g6Qq2KJ3tFErvE0=",
761 | "dev": true
762 | }
763 | }
764 | }
765 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "canianimate",
3 | "version": "1.0.0",
4 | "private": true,
5 | "description": "Source for canianimate.com",
6 | "repository": {
7 | "type": "git",
8 | "url": "https://github.com/ecssplain/canianimate.git"
9 | },
10 | "author": "Gilmore Davidson ",
11 | "license": "MIT",
12 | "bugs": {
13 | "url": "https://github.com/ecssplain/canianimate/issues"
14 | },
15 | "homepage": "http://canianimate.com/",
16 | "scripts": {
17 | "clean": "rm -rf _build/ _deploy/",
18 | "prefix": "./scripts/prefix",
19 | "build": "npm run prefix && ./scripts/inline -m",
20 | "deploy": "./scripts/deploy",
21 | "fulldeploy": "npm run build && npm run deploy"
22 | },
23 | "dependencies": {
24 | "css-animated-properties": "^1.1.0",
25 | "css-shorthand-properties": "^1.1.0",
26 | "mustache": "^2.3.0"
27 | },
28 | "devDependencies": {
29 | "autoprefixer": "^7.1.6",
30 | "fs-extra": "^4.0.2",
31 | "glob": "^7.1.2",
32 | "html-minifier": "^3.5.7",
33 | "inline-source": "^5.2.6"
34 | }
35 | }
36 |
--------------------------------------------------------------------------------
/scripts/deploy:
--------------------------------------------------------------------------------
1 | #!/bin/bash
2 |
3 | # Working directory is always the project root when run via `npm run`
4 |
5 | if [ ! -d _deploy ]; then
6 | echo 'ERR: _deploy directory is missing. Use `npm run build` to generate the files.'
7 | exit 1
8 | fi
9 |
10 | echo ==================
11 | echo GZIP all assets
12 | echo ==================
13 |
14 | find _deploy/ -iname '*.html' -exec gzip -n {} +
15 | find _deploy/ -iname "*.gz" -exec bash -c 'mv -fv "$0" "${0%\.gz}"' {} \;
16 | echo done.
17 |
18 | echo ==================
19 | echo Syncing to S3
20 | echo ==================
21 |
22 | # sync gzipped html files
23 | s3cmd sync --progress --acl-public --cf-invalidate --rr --mime-type="text/html; charset=utf-8" --add-header 'Content-Encoding:gzip' --add-header 'Cache-Control: max-age=300, must-revalidate' _deploy/ s3://canianimate.com/ --exclude '*.*' --include '*.html'
24 |
25 | # sync non gzipped, non js/css/image files
26 | #s3cmd sync --progress --acl-public --cf-invalidate _deploy/ s3://canianimate.com/ --exclude '*.sh' --exclude 'assets/*' --exclude '*.html' --exclude '*.ico' --exclude '*.js' --exclude '*.css' --exclude '*.png' --exclude '*.svg'
27 |
28 | # sync gzipped css and js to static bucket
29 | #s3cmd sync --progress --acl-public --cf-invalidate --add-header 'Content-Encoding:gzip' --add-header 'Cache-Control: max-age=86400' _deploy/ s3://canianimate.com/ --exclude '*.*' --include '*.js' --include '*.css' --include '*.ico' --include '*.svg'
30 |
31 | # sync all non gzipped css, js and image files to the static bucket (e.g. images)
32 | #s3cmd sync --progress --acl-public --cf-invalidate --add-header 'Cache-Control: max-age=86400' _deploy/ s3://canianimate.com/ --exclude '*.*' --include '*.png'
33 |
--------------------------------------------------------------------------------
/scripts/helpers.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Common config and helpers for build scripts.
3 | */
4 |
5 | var fs = require('fs-extra'),
6 | path = require('path');
7 |
8 | var helpers = module.exports = {};
9 |
10 | helpers.path = function (filepath) {
11 | return path.join(helpers.rootDir, filepath);
12 | };
13 |
14 | helpers.checkdir = function (dirname) {
15 | var fullpath = helpers.path(dirname);
16 | fs.ensureDirSync(fullpath);
17 | return fullpath;
18 | };
19 |
20 | helpers.rootDir = path.resolve(__dirname + '/../');
21 | helpers.buildDir = helpers.checkdir('_build');
22 | helpers.deployDir = helpers.checkdir('_deploy');
23 |
24 | helpers.processedCssName = 'prefixed';
25 |
26 | helpers.parts = function (filepath) {
27 | var parts = {};
28 | parts.ext = path.extname(filepath);
29 | parts.filename = path.basename(filepath, parts.ext);
30 | parts.dirname = path.dirname(filepath);
31 | return parts;
32 | };
33 |
34 | helpers.processedPath = function (filepath) {
35 | var parts = helpers.parts(filepath);
36 | var newname = parts.filename + '.' + helpers.processedCssName + parts.ext;
37 | return path.join(helpers.buildDir, newname);
38 | };
39 |
--------------------------------------------------------------------------------
/scripts/inline:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env node
2 |
3 | /**
4 | * A lightweight script to inline and (optionally) minify CSS and JS.
5 | * Hand-rolled to avoid Grunt/Gulp/Flavour-of-the-month with their various wrappers of other
6 | * modules, sometimes with outdated versions that I don't want.
7 | */
8 |
9 | var fs = require('fs-extra'),
10 | path = require('path'),
11 | helpers = require('./helpers'),
12 | inlineSource = require('inline-source'),
13 | minify = require('html-minifier').minify;
14 |
15 | var inputFile = 'main.html';
16 | var outputFile = 'index.html';
17 | var contents = '';
18 |
19 | // Rewrite CSS links to point to autoprefixed files, if found
20 | function usePrefixedFile(source) {
21 | if (source.type === 'css') {
22 | var newpath = helpers.processedPath(source.filepath);
23 | try {
24 | var stats = fs.statSync(newpath);
25 | if (stats && stats.isFile()) {
26 | source.filepath = newpath;
27 | source.fileContent = fs.readFileSync(newpath, 'utf-8');
28 | }
29 | } catch (e) {}
30 | }
31 | }
32 |
33 | // Perform the inlining of scripts and styles
34 | var file = helpers.path(inputFile);
35 | var inlineOpts = {
36 | compress: false,
37 | attribute: false,
38 | handlers: [usePrefixedFile],
39 | };
40 | contents = inlineSource.sync(file, inlineOpts);
41 |
42 | // Minify (optional with -m argument)
43 | if (process.argv[2] === '-m') {
44 | contents = minify(contents, {
45 | removeComments: true,
46 | collapseWhitespace: true,
47 | minifyJS: true,
48 | minifyCSS: true,
49 | maxLineLength: 1000
50 | });
51 | }
52 |
53 | // Write to file
54 | fs.writeFileSync(path.join(helpers.deployDir, outputFile), contents);
55 |
56 | console.log('generated ' + path.join(path.basename(helpers.deployDir), outputFile));
57 |
--------------------------------------------------------------------------------
/scripts/prefix:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env node
2 |
3 | /**
4 | * A basic wrapper for autoprefixer.
5 | * Hand-rolled to avoid Grunt/Gulp/Flavour-of-the-month.
6 | */
7 |
8 | var fs = require('fs-extra'),
9 | glob = require('glob'),
10 | path = require('path'),
11 | helpers = require('./helpers'),
12 | autoprefixer = require('autoprefixer');
13 |
14 | var autoprefixerOpts = { browsers: ['> 1%', 'last 2 versions'] };
15 |
16 | glob(helpers.path('*.css'), function (err, files) {
17 | if (err) return console.error(err);
18 | files.forEach(function (file) {
19 | var fileparts = helpers.parts(file);
20 | var outputpath = helpers.processedPath(file);
21 | var outputname = path.basename(outputpath);
22 |
23 | var input = fs.readFileSync(file, 'utf-8');
24 | var output = autoprefixer.process(input, autoprefixerOpts);
25 | fs.writeFileSync(outputpath, output);
26 | console.log('prefixed ' + fileparts.filename + fileparts.ext + ' to ' + path.basename(helpers.buildDir) + '/' + outputname);
27 | });
28 | });
29 |
--------------------------------------------------------------------------------
/snippets.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Console snippets to run in browsers to get a list of available CSS properties
3 | */
4 |
5 | /**
6 | * Get all non-vendor-prefixed properties in a browser
7 | */
8 | (function () {
9 | var style = getComputedStyle(document.body);
10 | var props = Array.prototype.filter.call(style, function (prop) {
11 | return prop.slice(0, 1) !== '-';
12 | });
13 | props.sort();
14 | copy(JSON.stringify(props));
15 | console.log('Props (%d)', props.length, props);
16 | })();
17 |
18 | /**
19 | * Get all known properties from useful W3C specs (REC, CR, WD)
20 | */
21 | (function () {
22 | var cp = copy;
23 | fetch('https://www.w3.org/Style/CSS/all-properties.en.json')
24 | .then(res => res.json())
25 | .then(json => {
26 | var propSet = new Set(json
27 | .filter(def =>
28 | def.property !== 'all' &&
29 | def.property.substr(0, 1) !== '-' &&
30 | ['REC', 'CR', 'WD'].includes(def.status)
31 | )
32 | .map(def => def.property)
33 | );
34 | var props = [...propSet].sort();
35 | cp(JSON.stringify(props));
36 | console.log('Props (%d)', props.length, props);
37 | });
38 | })();
39 |
40 | /**
41 | * Merge different browser lists into a single list
42 | */
43 | (function () {
44 | var lists = [];
45 | // W3C
46 | lists.push(["align-content","align-items","align-self","alignment-baseline","animation","animation-delay","animation-direction","animation-duration","animation-fill-mode","animation-iteration-count","animation-name","animation-play-state","animation-timing-function","azimuth","backface-visibility","background","background-attachment","background-blend-mode","background-clip","background-color","background-image","background-origin","background-position","background-repeat","background-size","baseline-shift","bookmark-label","bookmark-level","bookmark-state","border","border-bottom","border-bottom-color","border-bottom-left-radius","border-bottom-right-radius","border-bottom-style","border-bottom-width","border-boundary","border-collapse","border-color","border-image","border-image-outset","border-image-repeat","border-image-slice","border-image-source","border-image-width","border-left","border-left-color","border-left-style","border-left-width","border-radius","border-right","border-right-color","border-right-style","border-right-width","border-spacing","border-style","border-top","border-top-color","border-top-left-radius","border-top-right-radius","border-top-style","border-top-width","border-width","bottom","box-decoration-break","box-shadow","box-sizing","box-snap","break-after","break-before","break-inside","caption-side","caret-color","clear","clip","clip-path","clip-rule","color","color-interpolation-filters","column-count","column-fill","column-gap","column-rule","column-rule-color","column-rule-style","column-rule-width","column-span","column-width","columns","contain","content","counter-increment","counter-reset","counter-set","cue","cue-after","cue-before","cursor","direction","display","dominant-baseline","elevation","empty-cells","filter","flex","flex-basis","flex-direction","flex-flow","flex-grow","flex-shrink","flex-wrap","float","flood-color","flood-opacity","flow-from","flow-into","font","font-family","font-feature-settings","font-kerning","font-language-override","font-size","font-size-adjust","font-stretch","font-style","font-synthesis","font-variant","font-variant-alternates","font-variant-caps","font-variant-east-asian","font-variant-ligatures","font-variant-numeric","font-variant-position","font-weight","footnote-display","footnote-policy","gap","glyph-orientation-vertical","grid","grid-area","grid-auto-columns","grid-auto-flow","grid-auto-rows","grid-column","grid-column-end","grid-column-gap","grid-column-start","grid-gap","grid-row","grid-row-end","grid-row-gap","grid-row-start","grid-template","grid-template-areas","grid-template-columns","grid-template-rows","hanging-punctuation","height","hyphens","image-orientation","image-resolution","initial-letter","initial-letter-align","initial-letter-wrap","isolation","justify-content","justify-items","justify-self","left","letter-spacing","lighting-color","line-break","line-grid","line-height","line-snap","list-style","list-style-image","list-style-position","list-style-type","margin","margin-bottom","margin-left","margin-right","margin-top","marker-side","marquee-direction","marquee-loop","marquee-speed","marquee-style","mask","mask-border","mask-border-mode","mask-border-outset","mask-border-repeat","mask-border-slice","mask-border-source","mask-border-width","mask-clip","mask-composite","mask-image","mask-mode","mask-origin","mask-position","mask-repeat","mask-size","mask-type","max-height","max-lines","max-width","min-height","min-width","mix-blend-mode","nav-down","nav-left","nav-right","nav-up","object-fit","object-position","offset","offset-after","offset-anchor","offset-before","offset-distance","offset-end","offset-path","offset-position","offset-rotate","offset-start","opacity","order","orphans","outline","outline-color","outline-offset","outline-style","outline-width","overflow","overflow-style","overflow-wrap","overflow-x","overflow-y","padding","padding-bottom","padding-left","padding-right","padding-top","page","page-break-after","page-break-before","page-break-inside","pause","pause-after","pause-before","perspective","perspective-origin","pitch","pitch-range","place-content","place-items","place-self","play-during","position","quotes","region-fragment","resize","rest","rest-after","rest-before","richness","right","rotation","rotation-point","row-gap","ruby-align","ruby-merge","ruby-position","running","scroll-behavior","scroll-padding","scroll-padding-block","scroll-padding-block-end","scroll-padding-block-start","scroll-padding-bottom","scroll-padding-inline","scroll-padding-inline-end","scroll-padding-inline-start","scroll-padding-left","scroll-padding-right","scroll-padding-top","scroll-snap-align","scroll-snap-margin","scroll-snap-margin-block","scroll-snap-margin-block-end","scroll-snap-margin-block-start","scroll-snap-margin-bottom","scroll-snap-margin-inline","scroll-snap-margin-inline-end","scroll-snap-margin-inline-start","scroll-snap-margin-left","scroll-snap-margin-right","scroll-snap-margin-top","scroll-snap-stop","scroll-snap-type","shape-image-threshold","shape-inside","shape-margin","shape-outside","size","speak","speak-as","speak-header","speak-numeral","speak-punctuation","speech-rate","stress","string-set","tab-size","table-layout","text-align","text-align-all","text-align-last","text-combine-upright","text-decoration","text-decoration-color","text-decoration-line","text-decoration-skip","text-decoration-style","text-emphasis","text-emphasis-color","text-emphasis-position","text-emphasis-style","text-indent","text-justify","text-orientation","text-overflow","text-shadow","text-transform","text-underline-position","top","transform","transform-origin","transform-style","transition","transition-delay","transition-duration","transition-property","transition-timing-function","unicode-bidi","vertical-align","visibility","voice-balance","voice-duration","voice-family","voice-pitch","voice-range","voice-rate","voice-stress","voice-volume","volume","white-space","widows","width","will-change","word-break","word-spacing","word-wrap","wrap-flow","wrap-through","writing-mode","z-index"]);
47 | // Chrome
48 | lists.push(["align-content","align-items","align-self","alignment-baseline","animation-delay","animation-direction","animation-duration","animation-fill-mode","animation-iteration-count","animation-name","animation-play-state","animation-timing-function","backface-visibility","background-attachment","background-blend-mode","background-clip","background-color","background-image","background-origin","background-position","background-repeat","background-size","baseline-shift","border-bottom-color","border-bottom-left-radius","border-bottom-right-radius","border-bottom-style","border-bottom-width","border-collapse","border-image-outset","border-image-repeat","border-image-slice","border-image-source","border-image-width","border-left-color","border-left-style","border-left-width","border-right-color","border-right-style","border-right-width","border-top-color","border-top-left-radius","border-top-right-radius","border-top-style","border-top-width","bottom","box-shadow","box-sizing","break-after","break-before","break-inside","buffered-rendering","caption-side","caret-color","clear","clip","clip-path","clip-rule","color","color-interpolation","color-interpolation-filters","color-rendering","column-count","column-gap","column-rule-color","column-rule-style","column-rule-width","column-span","column-width","content","cursor","cx","cy","d","direction","display","dominant-baseline","empty-cells","fill","fill-opacity","fill-rule","filter","flex-basis","flex-direction","flex-grow","flex-shrink","flex-wrap","float","flood-color","flood-opacity","font-family","font-kerning","font-size","font-stretch","font-style","font-variant","font-variant-caps","font-variant-east-asian","font-variant-ligatures","font-variant-numeric","font-weight","grid-auto-columns","grid-auto-flow","grid-auto-rows","grid-column-end","grid-column-gap","grid-column-start","grid-row-end","grid-row-gap","grid-row-start","grid-template-areas","grid-template-columns","grid-template-rows","height","hyphens","image-rendering","isolation","justify-content","justify-items","justify-self","left","letter-spacing","lighting-color","line-break","line-height","list-style-image","list-style-position","list-style-type","margin-bottom","margin-left","margin-right","margin-top","marker-end","marker-mid","marker-start","mask","mask-type","max-height","max-width","min-height","min-width","mix-blend-mode","object-fit","object-position","offset-distance","offset-path","offset-rotate","opacity","order","orphans","outline-color","outline-offset","outline-style","outline-width","overflow-anchor","overflow-wrap","overflow-x","overflow-y","padding-bottom","padding-left","padding-right","padding-top","paint-order","perspective","perspective-origin","pointer-events","position","r","resize","right","rx","ry","scroll-behavior","shape-image-threshold","shape-margin","shape-outside","shape-rendering","speak","stop-color","stop-opacity","stroke","stroke-dasharray","stroke-dashoffset","stroke-linecap","stroke-linejoin","stroke-miterlimit","stroke-opacity","stroke-width","tab-size","table-layout","text-align","text-align-last","text-anchor","text-decoration","text-decoration-color","text-decoration-line","text-decoration-skip","text-decoration-style","text-indent","text-overflow","text-rendering","text-shadow","text-size-adjust","text-transform","text-underline-position","top","touch-action","transform","transform-origin","transform-style","transition-delay","transition-duration","transition-property","transition-timing-function","unicode-bidi","user-select","vector-effect","vertical-align","visibility","white-space","widows","width","will-change","word-break","word-spacing","word-wrap","writing-mode","x","y","z-index","zoom"]);
49 | // Firefox
50 | lists.push(["align-content","align-items","align-self","animation-delay","animation-direction","animation-duration","animation-fill-mode","animation-iteration-count","animation-name","animation-play-state","animation-timing-function","backface-visibility","background-attachment","background-blend-mode","background-clip","background-color","background-image","background-origin","background-position","background-position-x","background-position-y","background-repeat","background-size","border-bottom-color","border-bottom-left-radius","border-bottom-right-radius","border-bottom-style","border-bottom-width","border-collapse","border-image-outset","border-image-repeat","border-image-slice","border-image-source","border-image-width","border-left-color","border-left-style","border-left-width","border-right-color","border-right-style","border-right-width","border-spacing","border-top-color","border-top-left-radius","border-top-right-radius","border-top-style","border-top-width","bottom","box-decoration-break","box-shadow","box-sizing","caption-side","caret-color","clear","clip","clip-path","clip-rule","color","color-adjust","color-interpolation","color-interpolation-filters","column-count","column-fill","column-gap","column-rule-color","column-rule-style","column-rule-width","column-width","content","counter-increment","counter-reset","cursor","direction","display","dominant-baseline","empty-cells","fill","fill-opacity","fill-rule","filter","flex-basis","flex-direction","flex-grow","flex-shrink","flex-wrap","float","flood-color","flood-opacity","font-family","font-feature-settings","font-kerning","font-language-override","font-size","font-size-adjust","font-stretch","font-style","font-synthesis","font-variant","font-variant-alternates","font-variant-caps","font-variant-east-asian","font-variant-ligatures","font-variant-numeric","font-variant-position","font-weight","grid-auto-columns","grid-auto-flow","grid-auto-rows","grid-column-end","grid-column-gap","grid-column-start","grid-row-end","grid-row-gap","grid-row-start","grid-template-areas","grid-template-columns","grid-template-rows","height","hyphens","image-orientation","image-rendering","ime-mode","isolation","justify-content","justify-items","justify-self","left","letter-spacing","lighting-color","line-height","list-style-image","list-style-position","list-style-type","margin-bottom","margin-left","margin-right","margin-top","marker-end","marker-mid","marker-start","mask","mask-clip","mask-composite","mask-image","mask-mode","mask-origin","mask-position","mask-position-x","mask-position-y","mask-repeat","mask-size","mask-type","max-height","max-width","min-height","min-width","mix-blend-mode","object-fit","object-position","opacity","order","outline-color","outline-offset","outline-style","outline-width","overflow","overflow-wrap","overflow-x","overflow-y","padding-bottom","padding-left","padding-right","padding-top","page-break-after","page-break-before","page-break-inside","paint-order","perspective","perspective-origin","pointer-events","position","quotes","resize","right","ruby-align","ruby-position","scroll-behavior","scroll-snap-coordinate","scroll-snap-destination","scroll-snap-points-x","scroll-snap-points-y","scroll-snap-type-x","scroll-snap-type-y","shape-rendering","stop-color","stop-opacity","stroke","stroke-dasharray","stroke-dashoffset","stroke-linecap","stroke-linejoin","stroke-miterlimit","stroke-opacity","stroke-width","table-layout","text-align","text-align-last","text-anchor","text-combine-upright","text-decoration","text-decoration-color","text-decoration-line","text-decoration-style","text-emphasis-color","text-emphasis-position","text-emphasis-style","text-indent","text-justify","text-orientation","text-overflow","text-rendering","text-shadow","text-transform","top","touch-action","transform","transform-box","transform-origin","transform-style","transition-delay","transition-duration","transition-property","transition-timing-function","unicode-bidi","vector-effect","vertical-align","visibility","white-space","width","will-change","word-break","word-spacing","writing-mode","z-index"]);
51 | // Merge
52 | var used = new Set();
53 | lists.forEach(function (list) {
54 | list.forEach(function (prop) {
55 | used.add(prop);
56 | });
57 | });
58 | var merged = [...used].sort();
59 | copy(JSON.stringify(merged).replace(/"/g, "'"));
60 | console.log('Merged (%d)', merged.length, merged);
61 | })();
62 |
--------------------------------------------------------------------------------