use @import instead of @require

@import is valid css and doesn't rely on any strange comment behavior.
npm-css is a preprocessor, so handling @import as css and flattening the
file is valid behavior. The @require comment file is useless unless run
through npm-css anyway so no sense in hiding the fact that you need
something like npm-css.

see issue #3 for more discussion

Author: defunctzombie

README.md

@@ -5,25 +5,23 @@ Require css from node modules.
 ## Syntax
 
 ``` css
-/*
-@require typeahead
+@import "typeahead";
 
-@require ./foo.css
-@require ./bar/baz.css
-*/
+@import "./foo.css";
+@import "./bar/baz.css";
 
 .foo {
     color: red
 }
 ```
 
-npm-css reads comments in the format of `// @require` and inlines the CSS at that path for you. It also understands node modules.
+npm-css reads css imports in the format of `@import " ... "` and inlines the CSS at that path for you. It also understands node modules.
 
-If you `@require` a folder it will try to look for a package.json file or read `index.css` by default. See the `package.json` section below.
+If you `@import` a folder it will try to look for a package.json file or read `index.css` by default. See the `package.json` section below.
 
 ## CLI
 
-To build a single css file from an entry.css with @require statements.
+To build a single css file from an entry.css with @import statements.
 
 `npm-css entry.css -o bundle.css`
 

index.js

@@ -4,73 +4,111 @@ var path = require('path');
 
 // vendor
 var resolve = require('resolve');
+var cssp = require('cssp');
+var traverse = require('traverse');
 
 // local
 var prefix = require('./lib/prefix');
 
-module.exports = npmcss;
+// replace nodes with tree
+// nodes is an array representing a node
+function replace(nodes, tree) {
 
-// process given file for // @require statements
-// file should be /full/path/to/file.css
-function npmcss(file) {
-    // load source file
+    // truncate previous nodes
+    nodes.splice(0, nodes.length);
+
+    // insert tree as new nodes
+    tree.forEach(function(node) {
+        nodes.push(node);
+    });
+}
+
+// flatten @imports given a basepath, and a tree
+// inline all of the import statements into the tree
+// @return a tree with all statements inlined
+function flatten(file) {
     var src = fs.readFileSync(file, 'utf8');
 
-    // replace all instances of @require foo with proper content
-    src = src.replace(/@require (.*)\n/g, function(str, name) {
-
-        // base path for the file we want to load
-        var base = path.dirname(file);
-
-        // relative path, just read and load the file
-        if (name[0] === '.') {
-            // if path is a dir, see if package.json is available
-            // if avail, read style field
-            // if not avail or no style field, use index.css
-            var filepath = path.join(base, name);
-
-            // path is a file
-            if (fs.statSync(filepath).isFile()) {
-                return '*/\n' + npmcss(filepath) + '\n/*';
-            }
-
-            // path is a dir
-            var pkginfo = path.join(filepath, 'package.json');
-
-            // package.json exists for path
-            // use style info and prefix
-            if (fs.existsSync(pkginfo)) {
-                var info = JSON.parse(fs.readFileSync(pkginfo));
-                filepath = path.join(base, name, info.style || 'index.css')
-                return '*/\n' + prefix(info.name, npmcss(filepath)) + '\n/*';
-            }
-
-            // no package.json, try index.css in the dir
-            filepath = path.join(filepath, 'index.css');
-
-            // do not prefix if just loading index.css from a dir
-            // allows for easier organization of multi css files without prefixing
-            if (fs.existsSync(filepath)) {
-                return '*/\n' + npmcss(filepath) + '\n/*';
-            }
-
-            // if all else fails, return original source
-            return src;
+    var base = path.dirname(file);
+    var tree = cssp.parse(src);
+
+    traverse(tree).forEach(function (node) {
+        var self = this;
+
+        if (node !== 'atrules') {
+            return;
+        }
+
+        node = this.parent.node;
+
+        // ignore non import
+        if (node[1][0] !== 'atkeyword' && nodes[1][1][0] !== 'ident' &&
+           node[1][1][1] !== 'import') {
+            return;
+        }
+
+        // ignore non string imports
+        if (node[3][0] !== 'string') {
+            return;
         }
 
-        var res = resolve.sync(name, {
-            basedir: base,
-            extensions: ['.css'],
-            packageFilter: function (pkg) {
-                pkg.main = pkg.style;
-                return pkg;
-            }
-        });
-
-        // run resolution on the required css file
-        return '*/\n' + prefix(name, npmcss(res)) + '\n/*';
+        // remove quotes from imported name
+        var name = node[3][1].replace(/["']/g, '');
+
+        // @import "module"
+        if (name[0] !== '.') {
+
+            // lookup the entry css file
+            var filepath = resolve.sync(name, {
+                basedir: base,
+                extensions: ['.css'],
+                packageFilter: function (pkg) {
+                    pkg.main = pkg.style;
+                    return pkg;
+                }
+            });
+
+            // run css file through tree -> flatten -> prefix
+            // get required module as a css tree
+            // replace @import node with new tree
+            return replace(self.parent.node, prefix(name, flatten(filepath)));
+        }
+
+        var filepath = path.join(base, name);
+
+        // path is a file
+        if (fs.statSync(filepath).isFile()) {
+            return replace(self.parent.node, flatten(filepath));
+        }
+
+        // path is a dir
+        var pkginfo = path.join(filepath, 'package.json');
+
+        // package.json exists for path
+        // use style info and prefix
+        if (fs.existsSync(pkginfo)) {
+            var info = JSON.parse(fs.readFileSync(pkginfo));
+            filepath = path.join(base, name, info.style || 'index.css')
+            return replace(self.parent.node, prefix(info.name, flatten(filepath)));
+        }
+
+        // no package.json, try index.css in the dir
+        filepath = path.join(filepath, 'index.css');
+
+        // do not prefix if just loading index.css from a dir
+        // allows for easier organization of multi css files without prefixing
+        if (fs.existsSync(filepath)) {
+            return replace(self.parent.node, flatten(filepath));
+        }
     });
 
-    return src;
+    return tree;
 }
 
+// process given file for // @require statements
+// file should be /full/path/to/file.css
+module.exports = function(file) {
+    var base = path.dirname(file);
+    return cssp.translate(flatten(file));
+};
+

lib/prefix.js

@@ -1,14 +1,11 @@
 // vendor
-var cssp = require('cssp');
 var traverse = require('traverse');
 
-module.exports = function (name, src) {
-    if (typeof opts === 'string') {
-        opts = { prefix : opts };
-    }
-
-    var tree = cssp.parse(src);
-
+// prefix selectors of a css tree with a given name
+// if the selector has already been properly prefixed, it is not changed
+// modifies the tree in place
+// @return tree
+module.exports = function prefix(name, tree) {
     traverse(tree).forEach(function (node) {
         if (node !== 'simpleselector') {
             return;
@@ -41,6 +38,5 @@ module.exports = function (name, src) {
         );
     });
 
-    return cssp.translate(tree);
+    return tree;
 };
-

test/expected/index.css

@@ -1,6 +1,3 @@
-/*
- */
 /* .foo {} */
 .foo {}
 
-/* */

test/expected/input.css

@@ -1,10 +1,7 @@
-/*
-    */
 .foo {
     color: red;
 }
 
-/*    */
 /* foobar stuff */
 
 /* .foobar */
@@ -37,5 +34,4 @@ p.foobar {}
 /* .foobar .baz .foobar */
 .foobar .baz .foobar {}
 
-/**/
 

test/expected/relative.css

@@ -1,9 +1,6 @@
 /* test require dir */
 
-/* should load localwidget based on localwidget/package.json
-/*
-  */
+/* should load localwidget based on localwidget/package.json */
 /* .localwidget .foo */
 .localwidget .foo {}
 
-/**/

test/fixtures/index.css

@@ -1,3 +1 @@
-/*
- @require ./foo
- */
+@import "./foo";

test/fixtures/input.css

@@ -1,5 +1,3 @@
-/*
-    @require ./required.css
-    @require foobar
-*/
+@import "./required.css";
+@import "foobar";
 

test/fixtures/relative.css

@@ -1,6 +1,4 @@
 /* test require dir */
 
-/* should load localwidget based on localwidget/package.json
-/*
-  @require ./localwidget
-*/
+/* should load localwidget based on localwidget/package.json */
+@import "./localwidget";