Just like I say:

var Ladda = require('ladda/js/ladda');

I want to say:

@import('ladda/dist/ladda.min.css');

Because some repos have multiple versions of their css and I want to pick and choose which I use (so they can't specify it in the style property).

make run errors because the bin file's name has changed to npm-css

node ./bin/index.js \
        ./test/fixtures/input.css \
        -o output.css

module.js:340
    throw err;
          ^
Error: Cannot find module '/Users/nicolasgallagher/Code/_other/npm-css/bin/index.js'
    at Function.Module._resolveFilename (module.js:338:15)
    at Function.Module._load (module.js:280:25)
    at Function.Module.runMain (module.js:497:10)
    at startup (node.js:119:16)
    at node.js:901:3
make: *** [run] Error 8

Steps:

• npm install
• npm test

․  index.css: 17ms
  1)  input.css
  ․  relative.css: 16ms
  ․  required.css: 4ms

  3 passing (53ms)
  1 failing

  1)  input.css:
     Error: Cannot find module 'foobar'

it's all in russian. i don't know what's going on.

Hi, I'm using gulp to automate the conversion of the file, but it produces an error, while the the bash command works as expected.

the gulp script:

    var npmcss = require('npm-css');
    require("fs").writeFile("app/dest/bundle.css", npmcss('app/first.css'));

the css file (first.css):
@import "./random_css_file.css";
@import "bootstrap";

Produces an error:
Cannot find module 'bootstrap'

While using the bash command did work as expected (required the css module to the bundle.css).
I also tried without the local css file (random_css_file.css), same results...

this needs test coverage: 439ab86

should also mention this feature in the README, I had to go looking to find out.

If my modules and my project both use Sass, is there a way npm-css could be used in conjunction with Sass to combine all the modules via the @import statements, and then run Sass on the result?

Or, since Sass already supports @import, do something to transform the content Sass sees, so that it sees paths to modules' main sass files rather than just the name of the module?

Browserify has transforms, which allow you to do this, but sass compilers don't seem to offer the opportunity to intervene in the process. Sass also has watch mode, where files are continuously recompiled every time you make a change to a file or it's dependencies, which seems to complicate the issue.

I don't mean to be harsh and applaud any effort to create tools for our community! but what is this for? A self teaching project?

Stylus is built for this already and can you use the old CSS syntax if you wish.

For discussion, assume that .module represents a css class which is the name of the module.

The issue:
The reason we want to prefix css rules is to prevent leaking them into the global css namespace. A widget author should be free (although maybe not encouraged) to style all of the p tags in their widget with p { ... }. If they do this, we need to make sure other elements on the page are not affected.

Simple prefix flaw:
Blind prefixing of all rules in a css file with .module as a parent class means that you would need to have a "container" element and could not style the root directly. This makes it impossible to have widgets that are just tr, li, or even avoid adding useless tags just to style something.

Poposed solution:
Detect if the developer has already properly namespaced their rules. I have boiled this down to the following checks. If any of them are true, then we know a rule has been properly namespaced.

.module already exists parent

.module h1 { ... }

.module exists in a set of class right after an element

h1.module { }

Note that the following is not valid

h1 .module {}

.module exists in the first set of classes

.foo.bar.module {}
.module.foo.bar {}

The following is not ok

.foo.bar .module {}

Specifying @charset "UTF-8" in any stylesheet throws an error with npm-css. the error says : Cannot find module "UTF-8"

Instead of using @require which is not a thing in css, use @import to handle including modules and/or local files. npm-css is a preprocessor and thus will turn the css file into a valid one after it runs. Having @require in a comment doesn't really add value as you still need to run npm-css on it to get the correct file.

/cc @Raynos

I notice that npm-css only bundles css files, leaves image, font and other reference assets out. Because CSS always comes along with these, e.x. background-image: url('relative/path'), is there any plan to handle this?

I'm trying to concat all of my deps together and then run the result through rework, but npm-css seems to be eating any css rule that has a variable in it.

var file = npmcss('/absolute/path/to/file');
var css = rework(file);
css.use(variables(vars))
console.log(css.toString());

running (globally installed) npm-css via:

npm-css index.css -o test.css

is resulting in:

/usr/local/lib/node_modules/npm-css/node_modules/resolve/lib/sync.js:32
    throw new Error("Cannot find module '" + x + "'");
          ^
Error: Cannot find module 'normalize-css'
    at Function.module.exports [as sync] (/usr/local/lib/node_modules/npm-css/node_modules/resolve/lib/sync.js:32:11)
    at Object.<anonymous> (/usr/local/lib/node_modules/npm-css/index.js:66:36)
    at walker (/usr/local/lib/node_modules/npm-css/node_modules/traverse/index.js:190:22)
    at /usr/local/lib/node_modules/npm-css/node_modules/traverse/index.js:208:29
    at Array.forEach (native)
    at forEach (/usr/local/lib/node_modules/npm-css/node_modules/traverse/index.js:298:31)
    at walker (/usr/local/lib/node_modules/npm-css/node_modules/traverse/index.js:203:13)
    at /usr/local/lib/node_modules/npm-css/node_modules/traverse/index.js:208:29
    at Array.forEach (native)
    at forEach (/usr/local/lib/node_modules/npm-css/node_modules/traverse/index.js:298:31)

I've tried with two modules (Leaflet & Normalize), and both are having the same issue.

Here's the CSS:

/* import packages here to get their CSS from the package.json "style" property */
@import "normalize-css";
@import "leaftlet";

Here's an excerpt from package.json:

{
  "style": "public/css/core.css",
  "dependencies": {
    "leaflet": "~0.7.2",
    "normalize-css": "~2.3.0",
    "npm-css": "~0.2.3"
  }
}

Any idea what I'm doing wrong?

I tried installing the packages to devDependencies, but that didn't fix the issue (nor did I expect it to from perusing the source).

This seems to need me to add to everything that has an @include "bootstrap"; as it transforms .foo to .bootstrap .foo which is not what is documented - I expected the compile without that.

Needs some tests for media queries because the output is very unexpected.

Source:

@media (min-width:500px) {
  @import "./foo";
}

Expected:

@media (min-width:500px) {
/* .foo {} */
.foo {}
}

Actual:

/* .foo {} */
.foo {}

Another example.

Source:

@import "./foo";

@media (min-width:500px) {
  @import "./foo";
}

Expected:

/* .foo {} */
.foo {}

@media (min-width:500px) {

}

Actual:

/* .foo {} */
.foo {}

How important is it to you that @import is used in a way that wouldn't completely break without npm-css? That would help define what the output should be for these kinds of inputs.