Permalink
Browse files

Initial commit

  • Loading branch information...
0 parents commit 0a7be255bfe753d03f93c7072351266fa636e80a @tj tj committed Sep 1, 2012
@@ -0,0 +1 @@
+node_modules
@@ -0,0 +1,4 @@
+support
+test
+examples
+*.sock
No changes.
@@ -0,0 +1,7 @@
+
+test:
+ @./node_modules/.bin/mocha \
+ --require should \
+ --reporter spec
+
+.PHONY: test
266 Readme.md
@@ -0,0 +1,266 @@
+
+# rework
+
+ CSS manipulations built on [node-css](github.com/visionmedia/node-css),
+ allowing you to automate vendor prefixing, create your own properties,
+ inline images, anything you can imagine!
+
+## API
+
+### rework(css)
+
+ Return a new `Rework` instance for the given string of `css`.
+
+### Rework#vendors(prefixes)
+
+ Define vendor `prefixes` that plugins may utilize,
+ however most plugins do and should accept direct passing
+ of vendor prefixes as well.
+
+### Rework#use(fn)
+
+ Use the given plugin `fn`. A rework "plugin" is simply
+ a function accepting the stylesheet object and `Rework` instance,
+ view the definitions in `./lib/plugins` for examples.
+
+### Rework#toString()
+
+ Return the string representation of the manipulated css.
+
+## Plugins
+
+ The following plugins are bundled with `rework`:
+
+### .at2x([vendors])
+
+ Add retina support for images, with optional `vendor` prefixes,
+ defaulting to `.vendors()`.
+
+```css
+logo {
+ background-image: url('/public/images/logo.png')
+}
+```
+
+yields:
+
+```css
+logo {
+ background-image: url('/public/images/logo.png')
+}
+
+@media all and (-webkit-min-device-pixel-ratio : 1.5) {
+ .logo {
+ background-image: url("/public/images/logo@2x.png")
+ }
+}
+```
+
+### .prefix(property, [vendors])
+
+ Prefix `property` with optional `vendors` defaulting to `.vendors()`.
+
+```css
+.button {
+ border-radius: 5px;
+}
+```
+
+yields:
+
+```css
+.button {
+ -webkit-border-radius: 5px;
+ -moz-border-radius: 5px;
+ border-radius: 5px;
+}
+```
+
+### .prefixValue(value, [vendors])
+
+ Prefix `value` with optional `vendors` defaulting to `.vendors()`.
+
+```css
+button {
+ transition: height, transform 2s, width 0.3s linear;
+}
+```
+
+yields:
+
+```css
+button {
+ -webkit-transition: height, -webkit-transform 2s, width 0.3s linear;
+ -moz-transition: height, -moz-transform 2s, width 0.3s linear;
+ transition: height, transform 2s, width 0.3s linear
+}
+```
+
+### .opacity()
+
+ Add IE opacity support.
+
+```css
+ul {
+ opacity: 1 !important;
+}
+```
+
+yields:
+
+```css
+ul {
+ opacity: 1 !important;
+ -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100) !important;
+ filter: alpha(opacity=100) !important
+}
+```
+
+### .keyframes([vendors])
+
+ Prefix __@keyframes__ with `vendors` defaulting to `.vendors()`.
+ Ordering with `.keyframes()` is important, as other plugins
+ may traverse into the newly generated rules, for example the
+ following will allow `.prefix()` to prefix keyframe `border-radius`
+ property, `.prefix()` is also smart about which keyframes definition
+ it is within, and will not add extraneous vendor definitions.
+
+```js
+var css = rework(read('examples/keyframes.css', 'utf8'))
+ .vendors(['-webkit-', '-moz-'])
+ .use(rework.keyframes())
+ .use(rework.prefix('border-radius'))
+ .toString()
+```
+
+```css
+@keyframes animation {
+ from {
+ opacity: 0;
+ }
+
+ to {
+ opacity: 1;
+ }
+}
+```
+
+yields:
+
+```css
+@keyframes animation {
+ from {
+ opacity: 0;
+ }
+
+ to {
+ opacity: 1;
+ }
+}
+
+@-webkit-keyframes animation {
+ from {
+ opacity: 0;
+ }
+
+ to {
+ opacity: 1;
+ }
+}
+```
+
+## Example
+
+example.js:
+
+```js
+var rework = require('rework')
+ , read = require('fs').readFileSync
+ , str = read('example.css', 'utf8');
+
+var css = rework(str)
+ .vendors(['-webkit-', '-moz-'])
+ .use(rework.keyframes())
+ .use(rework.prefix('border-radius'))
+ .toString()
+
+console.log(css);
+```
+
+example.css:
+
+```css
+@keyframes animation {
+ from { opacity: 0; border-radius: 5px }
+ to { opacity: 1; border-radius: 5px }
+}
+```
+
+stdout:
+
+```css
+@keyframes animation {
+ from {
+ opacity: 0;
+ border-radius: 5px
+ }
+
+ to {
+ opacity: 1;
+ border-radius: 5px
+ }
+}
+
+@-webkit-keyframes animation {
+ from {
+ opacity: 0;
+ -webkit-border-radius: 5px;
+ border-radius: 5px
+ }
+
+ to {
+ opacity: 1;
+ -webkit-border-radius: 5px;
+ border-radius: 5px
+ }
+}
+
+@-moz-keyframes animation {
+ from {
+ opacity: 0;
+ -moz-border-radius: 5px;
+ border-radius: 5px
+ }
+
+ to {
+ opacity: 1;
+ -moz-border-radius: 5px;
+ border-radius: 5px
+ }
+}
+```
+
+## License
+
+(The MIT License)
+
+Copyright (c) 2012 Learnboost <tj@vision-media.ca>
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+'Software'), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
+CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
@@ -0,0 +1,3 @@
+.logo {
+ background-image: url('/public/images/logo.png');
+}
@@ -0,0 +1,10 @@
+
+var rework = require('..')
+ , read = require('fs').readFileSync;
+
+var css = rework(read('examples/at2x.css', 'utf8'))
+ .vendors(['-webkit-', '-moz-'])
+ .use(rework.at2x())
+ .toString()
+
+console.log(css);
@@ -0,0 +1,4 @@
+@keyframes animation {
+ from { opacity: 0; border-radius: 5px }
+ to { opacity: 1; border-radius: 5px }
+}
@@ -0,0 +1,12 @@
+
+var rework = require('..')
+ , read = require('fs').readFileSync;
+
+var css = rework(read('examples/keyframes.css', 'utf8'))
+ .vendors(['-webkit-', '-moz-', '-ms-'])
+ .use(rework.keyframes())
+ .use(rework.opacity())
+ .use(rework.prefix('border-radius'))
+ .toString()
+
+console.log(css);
@@ -0,0 +1,8 @@
+
+a {
+ opacity: .5;
+}
+
+ul {
+ opacity: 1 !important;
+}
@@ -0,0 +1,10 @@
+
+var rework = require('..')
+ , read = require('fs').readFileSync;
+
+var css = rework(read('examples/opacity.css', 'utf8'))
+ .vendors(['-webkit-', '-moz-'])
+ .use(rework.opacity())
+ .toString()
+
+console.log(css);
@@ -0,0 +1,12 @@
+
+#logo {
+ absolute: top left;
+}
+
+#logo {
+ relative: top 5px left;
+}
+
+#logo {
+ fixed: top 5px left 10px;
+}
Oops, something went wrong.

0 comments on commit 0a7be25

Please sign in to comment.