jsheets - npm Package Compare versions

Comparing version 0.0.2 to 0.1.0

helpers/helpers.js

@@ -6,7 +6,6 @@ var _ = require('underscore')
 module.exports = function (context) {
-  return {
-    $: function (expression) {
+  var helpers = function (expression) {
       return expression
-    },
-
+  }
+  _.extend(helpers, {
     extend: {
@@ -23,3 +22,3 @@ extendables: {},
         this.extendables[extendable]['selectors'].push(selector)
-        context.onDone.push(this.extendMaker(extendable))
+        context.onEOF.push(this.extendMaker(extendable))
       },
@@ -47,3 +46,4 @@ extendMaker: function (extendable) {
     }
-  }
+  })
+  return helpers
 }

lib/parser.js

@@ -42,4 +42,6 @@ var vm = require('vm')
       },
-      onDone: [],
-      _: _
+      _: _,
+      require: require,
+      onEOF: [],
+      onAfterParse: []
     }
@@ -52,3 +54,2 @@ sandbox.$ = new (require('../helpers/helpers.js'))(sandbox)
     var returnString = ''
-    this.cleanContext()
     try {
@@ -62,4 +63,3 @@ vm.runInContext(javaScriptString, this.context)
     }
-    returnString = this.context.returnString
-    this.cleanContext()
+    returnString = this.cleanContext()
     return returnString
@@ -162,3 +162,5 @@ },
   cleanContext: function () {
+    var returnString = this.context.returnString
     this.context.returnString = ''
+    return returnString
   },
@@ -170,2 +172,19 @@
 
+  runOnAfterParse: function (parsedCss) {
+    this.context.onAfterParse.forEach(function (hook) {
+      parsedCss = hook(parsedCss)
+    })
+    return parsedCss
+  },
+
+  runOnEOF: function () {
+    var returnString = ''
+    vm.runInContext(
+      'css((' + utilities.runArray.toString() + ')' +
+      '(onEOF))',
+      this.context)
+    returnString = this.cleanContext()
+    return returnString ? '\n' + returnString : ''
+  },
+
   parse: function (jsheetsString) {
@@ -182,9 +201,5 @@ var splitJcss = []
     } while (jsheetsString = splitJcss[2])
-    vm.runInContext(
-      'css((' + utilities.runArray.toString() + ')' +
-      '(onDone))',
-      this.context)
-    if(this.context.returnString) parsedCss += '\n' + this.context.returnString
-    return parsedCss
+    parsedCss += this.runOnEOF()
+    return this.runOnAfterParse(parsedCss)
   }
 } }

package.json

 {
   "name": "jsheets",
-  "version": "0.0.2",
+  "version": "0.1.0",
   "description": "A simple CSS preprocessor that interprets JavaScript",
@@ -27,5 +27,6 @@ "author": {
   "scripts": {
-    "test": "mocha tests/",
-    "build-man": "marked-man README.md > man/jsheets.1"
+    "test": "mocha --reporter nyan --watch tests/ 2> /dev/null",
+
+    "prepublish": "marked-man README.md > man/jsheets.1"
   }
 }

README.md

 jsheets(1)
 ======
 
-`v0.0.2` - A simple CSS preprocessor that interprets JavaScript
+`v0.1.0` - A simple CSS preprocessor that interprets JavaScript
 
@@ -27,3 +27,3 @@ SYNOPSYS
 ### The `$` Object
-Inside CSS the whole `$` object is availible to you. That's it.
+Inside CSS the whole `$` object is availible to you. Because `$` is also a function (as explained in the helpers section), you can't write to its `arguments`, `caller`, `length` and `prototype` attributes.
 
@@ -54,17 +54,19 @@ ```
 ### helpers
-Because underscore is used in the project, I thought i'd pass it to the jsheets. There are also some helpers provided inside the `$` object.
+There are some helpers provided inside the `$` object.
 
 #### $
-`$.$` is a function that executes and returns what is passed to it. This can be usefull for math or sometimes you can use it to use variables in weird places. Example:
+`$` itself is not just an object but also a function that executes and returns what is passed to it. This can be usefull for math or sometimes you can use it to use variables in weird places. Example:
 
 ```
 div {
-  width: $.$(100 * 30)px
+  width: $(100 * 30)px
   /* WON'T WORK */
   width: $.someWithem
   /* WILL WORK */
-  width: $.$($.someWith)em
+  width: $($.someWith)em
 }
 ```
 
+You cannot use braces inside of a call to `$`. That's because the `$` variables and functions are replaced using a mediocar RegEx.
+
 #### extend
@@ -92,7 +94,2 @@ With `extend` you can reuse css attributes. It has two methods: `add` and `that`. With add you create save a bunch of attributes under a name.
 
-#### onDone
-On done is an array you can push functions to that get executed at the and of parsing a file. The return value of a onDone hook will get printed as CSS.
-
-You cannot use braces inside of a call to `$.$`. That's because the `$` variables and functions are replaced using a mediocar RegEx.
-
 #### calc
@@ -111,2 +108,14 @@ With calc you can do calculations in css units. You pass it a string. It also does a printf-style replacement with `%d`.
 
+### Hooks
+
+In jsheets hooks are simple arrays you can push functions to. At a certain point in the parsing process those function will get executed with certain parameters
+
+#### onEOF
+
+These hooks are executed without an argument, at the and of parsing a file. The return value of a `onEOF` hook will get printed as CSS.
+
+#### onAfterParse
+
+`onAfterParse` hooks are the last thing that gets called. They receive the parsed CSS as an argument. Their return value replaces the parsed CSS. This makes it perfect for something like autoprefixer.
+
 ROADMAP
@@ -117,2 +126,3 @@ -------
 
+* Extensions
 * Integration
@@ -119,0 +129,0 @@ * express

tests/helpers.js

@@ -7,6 +7,6 @@ var assert = require('assert')
 describe('helpers', function () {
-  describe('$', function () {
+  describe('()', function () {
     var helpers = new Helpers({})
     it('should be able to parse an expression and return the pased value', function () {
-      assert.equal(true, helpers.$(true))
+      assert.equal(true, helpers(true))
     })
@@ -16,3 +16,3 @@ })
   describe('extend', function () {
-    var context = {onDone: []}
+    var context = {onEOF: []}
     var helpers = new Helpers(context)
@@ -43,6 +43,6 @@ it('should be an object', function () {
       })
-      it('should add a function to onDone', function () {
-        onDone = []
+      it('should add a function to onEOF', function () {
+        onEOF = []
         assert.equal(undefined, helpers.extend.that(' ', 'div'))
-        assert.equal('function', typeof context.onDone[0])
+        assert.equal('function', typeof context.onEOF[0])
       })
@@ -60,3 +60,3 @@ })
       it('should add css blocks to the end of a file', function () {
-        assert.equal(' , div {css}\n', context.onDone[0]())
+        assert.equal(' , div {css}\n', context.onEOF[0]())
       })
@@ -63,0 +63,0 @@ })

tests/parser.js

@@ -43,16 +43,42 @@ var assert = require('assert')
 
-    it('should run the onDone hook', function () {
+    it('should run the onEOF hook', function () {
       var testParser = new Parser
-      testParser.context.onDone = [function () {return 'css'}]
+      testParser.context.onEOF = [function () {return 'css'}]
       assert.equal('\ncss', testParser.parse(''))
     })
-    describe('onDone', function () {
-      it('should add the returned value of a hook to the parsed css string', function () {
-        var testParser = new Parser
-        testParser.context.onDone = [function () {return 'css'}]
-        assert.equal('\ncss', testParser.parse(''))
+
+    it('should run the onAfterParse hooks', function () {
+      var testParser = new Parser
+      testParser.context.onAfterParse.push(function (parsedJsheet) {
+        return '!'
       })
+      assert.equal('!', testParser.parse('css(\'css\')'))
     })
   })
 
+  describe('runOnEOF', function () {
+    it('should add the returned value of a hook to the parsed css string', function () {
+      var testParser = new Parser
+      testParser.context.onEOF = [function () {return 'css'}]
+      assert.equal('\ncss', testParser.runOnEOF())
+    })
+  })
+
+  describe('runOnAfterParse', function () {
+    it('should pass the parsed jsheet to the hook', function () {
+      var testParser = new Parser
+      testParser.context.onAfterParse.push(function (parsedJsheet) {
+        assert.equal('css', parsedJsheet)
+      })
+      testParser.runOnAfterParse('css')
+    })
+    it('should set the return value of a hook as the redered css', function () {
+      var testParser = new Parser
+      testParser.context.onAfterParse.push(function (parsedJsheet) {
+        return '!'
+      })
+      assert.equal('!', testParser.runOnAfterParse('css'))
+    })
+  })
+
   describe('interpret', function () {
@@ -63,2 +89,3 @@ it('should exec js if the first position is js', function () {
     })
+
     it('should return the passed string if the first position is css', function () {
@@ -269,2 +296,8 @@ var testParser = new Parser
     })
+
+    it('should provide the require methode', function () {
+      var testParser = new Parser
+      assert.equal('function', testParser.exec('css(typeof require)'))
+      assert.equal('function', testParser.exec('css(typeof require(\'underscore\'))'))
+    })
   })
@@ -350,2 +383,7 @@
     })
+    it('should return the current returnString', function () {
+      var testParser = new Parser
+      testParser.context.returnString = 'css'
+      assert.equal('css', testParser.cleanContext())
+    })
   })
@@ -352,0 +390,0 @@

New alerts

Dynamic require

Supply chain risk

Dynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

48946

increased by5.85%

Lines of code

974

increased by5.07%

Number of lines in readme file

127

increased by8.55%

Worsened metrics

Number of low supply chain risk alerts

7

increased by16.67%

No dependency changes