Name: dr-frankenstyle
Owner: Pivotal Cloud Foundry
Description: We like to build small reusable bits of CSS, and include only necessary CSS in our applications. dr-frankenstyle enables us to do just that! It resolves CSS dependencies between node packages, carefully respecting the order of our components, so that our final CSS cascades correctly.
Created: 2015-04-24 22:48:57.0
Updated: 2018-01-22 18:45:56.0
Pushed: 2016-03-03 21:20:10.0
Size: 1590
Language: JavaScript
GitHub Committers
User | Most Recent Commit | # Commits |
---|
Other Committers
User | Most Recent Commit | # Commits |
---|
We like to build small reusable bits of CSS, and include only necessary CSS in our applications. dr-frankenstyle enables us to do just that! It resolves CSS dependencies between node packages, carefully respecting the order of our components, so that our final CSS cascades correctly.
Dr. Frankenstyle takes the CSS in your node packages and produces nicely packaged, ready-to-serve CSS and assets.
For example, let's say that you needed the styles from the pui-css-buttons
and pui-css-tooltips
packages.
Assuming you've installed the npm packages:
install pui-css-buttons --save
install pui-css-tooltips --save
Dr. Frankenstyle will will read the dependency tree from npm list
and find all of the required CSS files (indicated by packages with the style
key).
It will then create a single components.css
file with those CSS files concatenated together in order and without duplication:
So for our example above, where the dependency tree looks like this:
pui-css-buttons
? pui-css-bootstrap
pui-css-tooltips
? pui-css-typography
??? pui-css-bootstrap
The resultant components.css
looks like this:
ss for pui-css-bootstrap */
ss for pui-css-typography */
ss for pui-css-buttons */
ss for pui-css-tooltips */
Dr. Frankenstyle also copies over any assets specified by these css files (images, fonts, etc.) to the output directory you specify, and it updates the urls in the css for you. This makes it easier to serve the assets.
There are two ways to use Dr. Frankenstyle: a CLI or an stream-based API. The CLI is the simplest way to use this tool. Use the API if you want use Dr. Frankenstyle with a task runner such as gulp.
If you want to use the CLI:
install -g dr-frankenstyle
If you want to use the API:
install --save-dev dr-frankenstyle
Dr. Frankenstyle works by looking in your node_modules
folder for modules that define style
(i.e. modules that have a style
property defined in their package.json
).
We assume that you've installed other npm packages which provide CSS components.
For example:
Run the following command from your project directory.
rankenstyle <output-dir>
components.css
and the relevant assets will end up in the <output-dir>
folder (e.g. public/
).
The stream API returns the concatenated CSS and associated assets as a stream of virtual Vinyl files. You probably want to pipe the resultant stream into some sort of vinyl file writer:
drFrankenstyle = require('dr-frankenstyle');
fs = require('vinyl-fs');
ankenstyle()
ipe(fs.dest('<output-dir>'));
Because Dr. Frankenstyle uses streams and vinyl under the hood, it's super easy to use with Gulp!
drFrankenstyle = require('dr-frankenstyle');
gulp = require('gulp');
.task('css', function() {
turn drFrankenstyle()
.pipe(gulp.dest('<output-dir>'));
Dr. Frankenstyle is easy to use with Grunt as well. Just register a new task:
t.registerTask('styles', function() {
r drFrankenstyle = require('dr-frankenstyle');
r fs = require('vinyl-fs');
Frankenstyle().pipe(fs.dest('<output-dir>')).on('end', this.async());
If you have a Rails project and you're using the asset pipeline, you probably want to use Rails' asset-url
helper.
(I.e. your css would have rules like background: asset-url('path/to/image.png')
instead of background: url('path/to/image.png')
.)
Dr. Frankenstyle has an option that will replace all url
s with asset-url
s
rankenstyle --rails <output-dir>
Or, if you are using the API:
ankenstyle()
ipe(drFrankenstyle.railsUrls())
ipe(fs.dest('<output-dir>'));
If you want Dr. F to only look at specific top level dependencies, you can create a FrankenFile (.drfrankenstylerc).
For example, if you only want to include pui-css-typography
in your CSS output, you could create this file.
hitelist": ["pui-css-typography"]
You are probably ready at this point to give your own CSS a go! There are a few important steps to get it working with Dr. Frankenstyle.
If you are developing complicated components, or a component library, you may want to use our developer api
(c) Copyright 2015 Pivotal Software, Inc. All Rights Reserved.