sheetify - npm Package Compare versions

Comparing version 7.0.0 to 7.1.0

package.json

 {
   "name": "sheetify",
-  "version": "7.0.0",
+  "version": "7.1.0",
   "description": "Modular CSS bundler",
@@ -34,3 +34,3 @@ "repository": "stackcss/sheetify",
     "static-eval": "^1.1.0",
-    "style-resolve": "^1.0.0",
+    "style-resolve": "^1.1.0",
     "through2": "^2.0.0",
@@ -40,3 +40,7 @@ "xtend": "^4.0.1"
   "devDependencies": {
+    "babel-core": "^6.26.0",
+    "babel-preset-env": "^1.6.1",
+    "babelify": "^8.0.0",
     "browserify": "^13.0.0",
+    "bubleify": "^1.1.0",
     "codecov.io": "^0.1.6",
@@ -43,0 +47,0 @@ "concat-stream": "^1.5.1",

README.md

@@ -251,10 +251,2 @@ # sheetify
 
-## FAQ
-### Help, why isn't my inline CSS being transformed?
-Well, that might be because you're running `babelify` before running
-`sheetify`. `sheetify` looks for template strings in your code and then
-transforms them as inline stylesheets. If these are caught and transformed to
-ES5 strings by `babelify` then `sheetify` ends up sad. So try running
-`sheetify` before `babelify` and you should be good, we hope.
-
 ## Installation
@@ -261,0 +253,0 @@ ```sh

test/index.js

@@ -7,1 +7,2 @@ require('./prefix')
 require('./transform-package')
+require('./transpilers')

transform.js

@@ -16,2 +16,7 @@ const cssResolve = require('style-resolve').sync
 
+function isBabelTemplateDefinition (node) {
+  return node.type === 'CallExpression' &&
+    node.callee.type === 'Identifier' && node.callee.name === '_taggedTemplateLiteral'
+}
+
 // inline sheetify transform for browserify
@@ -59,2 +64,3 @@ // obj -> (str, opts) -> str
     const nodes = []
+    const babelTemplateObjects = {}
     const src = Buffer.concat(bufs).toString('utf8')
@@ -108,17 +114,46 @@ var mname = null
     function extractTemplateNodes (node) {
-      if (node.type !== 'TemplateLiteral') return
-      if (!node.parent || !node.parent.tag) return
-      if (node.parent.tag.name !== mname) return
+      var css
+      var elements
 
-      const css = [ node.quasis.map(cooked) ]
-        .concat(node.expressions.map(expr)).join('').trim()
+      if (node.type === 'VariableDeclarator' && node.init && isBabelTemplateDefinition(node.init)) {
+        // Babel generates helper calls like
+        //    _taggedTemplateLiteral([":host .class { color: hotpink; }"], [":host .class { color: hotpink; }"])
+        // we only keep the "cooked" part
+        babelTemplateObjects[node.id.name] = node.init.arguments[0]
+      }
 
-      const val = {
-        css: css,
-        filename: filename,
-        opts: xtend(opts),
-        node: node.parent
+      if (node.type === 'TemplateLiteral' && node.parent && node.parent.tag) {
+        if (node.parent.tag.name !== mname) return
+
+        css = [ node.quasis.map(cooked) ]
+          .concat(node.expressions.map(expr)).join('').trim()
+
+        nodes.push({
+          css: css,
+          filename: filename,
+          opts: xtend(opts),
+          node: node.parent
+        })
       }
 
-      nodes.push(val)
+      if (node.type === 'CallExpression' && node.callee.type === 'Identifier' && node.callee.name === mname) {
+        if (node.arguments[0] && node.arguments[0].type === 'ArrayExpression') {
+          // Buble generates code like
+          //     sheetify([":host .class { color: hotpink; }"])
+          elements = node.arguments[0].elements
+        } else if (node.arguments[0] && node.arguments[0].type === 'Identifier') {
+          // Babel generates code like
+          //    sheetify(_templateObject)
+          elements = babelTemplateObjects[node.arguments[0].name].elements
+        }
+
+        if (elements) {
+          nodes.push({
+            css: elements.map(function (part) { return part.value }).join(''),
+            filename: filename,
+            opts: xtend(opts),
+            node: node
+          })
+        }
+      }
     }
@@ -130,2 +165,3 @@
       if (node.callee.name !== mname) return
+      if (!node.arguments[0] || !node.arguments[0].value) return
       var pathOpts = { basedir: path.dirname(filename) }
@@ -142,2 +178,4 @@ try {
 
+      transformStream.emit('file', resolvePath)
+
       const val = {
@@ -144,0 +182,0 @@ filename: resolvePath,

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

35008

increased by10.4%

Number of package files

35

increased by2.94%

Lines of code

757

increased by14.7%

Worsened metrics

Dev dependency count

21

increased by23.53%

Number of lines in readme file

281

decreased by-2.77%

Number of low supply chain risk alerts

13

increased by8.33%

Dependency changes

• Updatedstyle-resolve@^1.1.0