Merge pull request #58 from reworkcss/at-rule-linebreak

Allow EOL characters in all at-rules

Author: conradz

History.md

@@ -1,3 +1,9 @@
+Next
+====
+
+ * accept EOL characters and all other whitespace characters in `@` rules such
+   as `@media`
+
 2.1.0 / 2014-08-05
 ==================
 

generate-tests.js

@@ -0,0 +1,47 @@
+// Generates missing output source and AST files for the test cases
+// IMPORTANT: Always verify the generated files when using this!
+
+var fs = require('fs');
+var path = require('path');
+var parse = require('./').parse;
+var stringify = require('./').stringify;
+
+var casesDir = path.join(__dirname, 'test', 'cases');
+var cases = fs.readdirSync(casesDir)
+    .map(function(f) { return path.join(casesDir, f); });
+
+cases.forEach(function(dir) {
+    var inputFile = path.join(dir, 'input.css');
+    if (!fs.existsSync(inputFile))
+        throw new Error('Missing input file ' + inputFile);
+
+    var input = fs.readFileSync(inputFile, 'utf8');
+    var parsed;
+    try {
+        parsed = parse(input, { source: 'input.css' });
+    } catch(e) {
+        console.log('Failed to parse', inputFile);
+        throw e;
+    }
+
+    var outputFile = path.join(dir, 'output.css');
+    if (!fs.existsSync(outputFile)) {
+        console.log('Generating', outputFile);
+        var output = stringify(parsed);
+        fs.writeFileSync(outputFile, output, 'utf8');
+    }
+
+    var compressedFile = path.join(dir, 'compressed.css');
+    if (!fs.existsSync(compressedFile)) {
+        console.log('Generating', compressedFile);
+        var compressed = stringify(parsed, { compress: true });
+        fs.writeFileSync(compressedFile, compressed, 'utf8');
+    }
+
+    var astFile = path.join(dir, 'ast.json');
+    if (!fs.existsSync(astFile)) {
+        console.log('Generating', astFile);
+        var ast = JSON.stringify(parsed, null, '  ');
+        fs.writeFileSync(astFile, ast, 'utf8');
+    }
+});

lib/parse/index.js

@@ -342,7 +342,7 @@ module.exports = function(css, options){
 
   function athost() {
     var pos = position();
-    var m = match(/^@host */);
+    var m = match(/^@host\s*/);
 
     if (!m) return;
 
@@ -389,7 +389,7 @@ module.exports = function(css, options){
 
   function atcustommedia() {
     var pos = position();
-    var m = match(/^@custom-media (--[^\s]+) *([^{;]+);/);
+    var m = match(/^@custom-media\s+(--[^\s]+)\s*([^{;]+);/);
     if (!m) return;
 
     return pos({
@@ -506,7 +506,7 @@ module.exports = function(css, options){
 
 
   function _compileAtrule(name) {
-    var re = new RegExp('^@' + name + ' *([^;\\n]+);');
+    var re = new RegExp('^@' + name + '\\s*([^;]+);');
     return function() {
       var pos = position();
       var m = match(re);

test/cases/charset-linebreak/ast.json

@@ -0,0 +1,22 @@
+{
+  "type": "stylesheet",
+  "stylesheet": {
+    "rules": [
+      {
+        "type": "charset",
+        "charset": "\"UTF-8\"",
+        "position": {
+          "start": {
+            "line": 1,
+            "column": 1
+          },
+          "end": {
+            "line": 3,
+            "column": 6
+          },
+          "source": "input.css"
+        }
+      }
+    ]
+  }
+}

test/cases/charset-linebreak/compressed.css

@@ -0,0 +1 @@
+@charset "UTF-8";

test/cases/charset-linebreak/input.css

@@ -0,0 +1,3 @@
+@charset
+    "UTF-8"
+    ;

test/cases/charset-linebreak/output.css

@@ -0,0 +1 @@
+@charset "UTF-8";

test/cases/custom-media-linebreak/ast.json

@@ -0,0 +1,23 @@
+{
+  "type": "stylesheet",
+  "stylesheet": {
+    "rules": [
+      {
+        "type": "custom-media",
+        "name": "--test",
+        "media": "(min-width: 200px)",
+        "position": {
+          "start": {
+            "line": 1,
+            "column": 1
+          },
+          "end": {
+            "line": 4,
+            "column": 2
+          },
+          "source": "input.css"
+        }
+      }
+    ]
+  }
+}

test/cases/custom-media-linebreak/compressed.css

@@ -0,0 +1 @@
+@custom-media --test (min-width: 200px);

test/cases/custom-media-linebreak/input.css

@@ -0,0 +1,4 @@
+@custom-media
+    --test
+    (min-width: 200px)
+;