Fixes #84 - adds support for @import with media queries.

diff --git a/History.md b/History.md
index 9979f09..ebad7aa 100644 (file)
--- a/History.md
+++ b/History.md
@@ -2,6 +2,7 @@
 ==================
 
 * Fixed issue [#65](https://github.com/GoalSmashers/clean-css/issues/65) - full color name / hex shortening.
+* Fixed issue [#84](https://github.com/GoalSmashers/clean-css/issues/84) - support for @import with media queries.
 * Fixed issue [#126](https://github.com/GoalSmashers/clean-css/issues/126) - proper CSS expressions handling.
 * Fixed issue [#130](https://github.com/GoalSmashers/clean-css/issues/130) - better code modularity.
 * Fixed issue [#135](https://github.com/GoalSmashers/clean-css/issues/135) - require node.js 0.8+.

diff --git a/lib/imports/inliner.js b/lib/imports/inliner.js
index fa3ff96..9f3a386 100644 (file)
--- a/lib/imports/inliner.js
+++ b/lib/imports/inliner.js
@@ -32,12 +32,19 @@ module.exports = function Inliner() {
   };
 
   var inlinedFile = function(data, nextStart, nextEnd, options) {
-    var importedFile = data
+    var strippedImport = data
       .substring(data.indexOf(' ', nextStart) + 1, nextEnd)
       .replace(/^url\(/, '')
-      .replace(/\)$/, '')
       .replace(/['"]/g, '');
 
+    var separatorIndex = strippedImport.indexOf(' ');
+    var importedFile = strippedImport
+      .substring(0, separatorIndex > 0 ? separatorIndex : strippedImport.length)
+      .replace(')', '');
+    var mediaQuery = strippedImport
+      .substring(importedFile.length + 1)
+      .trim();
+
     if (/^(http|https):\/\//.test(importedFile) || /^\/\//.test(importedFile))
       return '@import url(' + importedFile + ');';
 
@@ -53,12 +60,16 @@ module.exports = function Inliner() {
       var importedData = fs.readFileSync(fullPath, 'utf8');
       var importRelativeTo = path.dirname(fullPath);
       importedData = rebaseRelativeURLs(importedData, importRelativeTo, options._baseRelativeTo);
-      return process(importedData, {
+
+      var inlinedData = process(importedData, {
         root: options.root,
         relativeTo: importRelativeTo,
         _baseRelativeTo: options.baseRelativeTo,
         visited: options.visited
       });
+      return mediaQuery.length > 0 ?
+        '@media ' + mediaQuery + '{' + inlinedData + '}' :
+        inlinedData;
     } else {
       return '';
     }

diff --git a/test/unit-test.js b/test/unit-test.js
index fa400cd..f927f87 100644 (file)
--- a/test/unit-test.js
+++ b/test/unit-test.js
@@ -861,10 +861,26 @@ title']",
       '@import "test/data/partials/one.css";',
       ".one{color:red}"
     ],
+    'of a real file with single simple media': [
+      '@import url(test/data/partials/one.css) screen;',
+      "@media screen{.one{color:red}}"
+    ],
+    'of a real file with multiple simple media': [
+      '@import "test/data/partials/one.css" screen, tv, print;',
+      "@media screen,tv,print{.one{color:red}}"
+    ],
+    'of a real file with complex media': [
+      '@import \'test/data/partials/one.css\' screen and (orientation:landscape);',
+      "@media screen and (orientation:landscape){.one{color:red}}"
+    ],
     'of more files': [
       "@import url(test/data/partials/one.css);\n\na{}\n\n@import url(test/data/partials/extra/three.css);",
       ".one{color:red}a{}.three{color:#0f0}"
     ],
+    'of more files with media': [
+      "@import url(test/data/partials/one.css) screen;@import url(test/data/partials/extra/three.css) tv;",
+      "@media screen{.one{color:red}}@media tv{.three{color:#0f0}}"
+    ],
     'of multi-level, circular dependency file': [
       "@import url(test/data/partials/two.css);",
       ".one{color:red}.three{color:#0f0}.four{color:#00f}.two{color:#fff}"
@@ -888,6 +904,10 @@ title']",
     'of a file with a comment': [
       '@import url(test/data/partials/comment.css);',
       ''
+    ],
+    'of a file (with media) with a comment': [
+      '@import url(test/data/partials/comment.css) screen and (device-height: 600px);',
+      '@media screen and (device-height:600px){}'
     ]
   }),
   '@import with absolute paths': cssContext({