postcss-js - npm Package Compare versions

Comparing version 2.0.3 to 3.0.0

async.js

@@ -1,14 +0,15 @@
-var postcss = require('postcss')
+let postcss = require('postcss')
 
-var processResult = require('./process-result')
-var parse = require('./parser')
+let processResult = require('./process-result')
+let parse = require('./parser')
 
-module.exports = function (plugins) {
-  var processor = postcss(plugins)
-  return function (input) {
-    return processor.process(input, {
+module.exports = function async (plugins) {
+  let processor = postcss(plugins)
+  return async input => {
+    let result = await processor.process(input, {
       parser: parse,
       from: undefined
-    }).then(processResult)
+    })
+    return processResult(result)
   }
 }

CHANGELOG.md

 # Change Log
 This project adheres to [Semantic Versioning](http://semver.org/).
 
+## 3.0
+* Removed support for Node.js 6.x, 8.x, 11.x, and 13.x versions.
+* Moved to PostCSS 8.0.
+* Added ES modules support.
+* Avoid stringification of unitless values (by Rishabh Rathod).
+
 ## 2.0.3
@@ -5,0 +11,0 @@ * Fix `from` option warning.

index.js

@@ -1,11 +0,11 @@
-var objectify = require('./objectifier')
-var parse = require('./parser')
-var async = require('./async')
-var sync = require('./sync')
+let objectify = require('./objectifier')
+let parse = require('./parser')
+let async = require('./async')
+let sync = require('./sync')
 
 module.exports = {
-  objectify: objectify,
-  parse: parse,
-  async: async,
-  sync: sync
+  objectify,
+  parse,
+  async,
+  sync
 }

objectifier.js

@@ -1,3 +0,28 @@
-var camelcase = require('camelcase-css')
+let camelcase = require('camelcase-css')
 
+let UNITLESS = {
+  boxFlex: true,
+  boxFlexGroup: true,
+  columnCount: true,
+  flex: true,
+  flexGrow: true,
+  flexPositive: true,
+  flexShrink: true,
+  flexNegative: true,
+  fontWeight: true,
+  lineClamp: true,
+  lineHeight: true,
+  opacity: true,
+  order: true,
+  orphans: true,
+  tabSize: true,
+  widows: true,
+  zIndex: true,
+  zoom: true,
+  fillOpacity: true,
+  strokeDashoffset: true,
+  strokeOpacity: true,
+  strokeWidth: true
+}
+
 function atRule (node) {
@@ -12,6 +37,6 @@ if (typeof node.nodes === 'undefined') {
 function process (node) {
-  var name
-  var result = { }
+  let name
+  let result = {}
 
-  node.each(function (child) {
+  node.each(child => {
     if (child.type === 'atrule') {
@@ -28,5 +53,5 @@ name = '@' + child.name
     } else if (child.type === 'rule') {
-      var body = process(child)
+      let body = process(child)
       if (result[child.selector]) {
-        for (var i in body) {
+        for (let i in body) {
           result[child.selector][i] = body[i]
@@ -38,4 +63,11 @@ }
     } else if (child.type === 'decl') {
-      name = camelcase(child.prop)
-      var value = child.value
+      if (child.prop[0] === '-' && child.prop[1] === '-') {
+        name = child.prop
+      } else {
+        name = camelcase(child.prop)
+      }
+      let value = child.value
+      if (!isNaN(child.value) && UNITLESS[name]) {
+        value = parseFloat(child.value)
+      }
       if (child.important) value += ' !important'
@@ -42,0 +74,0 @@ if (typeof result[name] === 'undefined') {

package.json

 {
   "name": "postcss-js",
-  "version": "2.0.3",
+  "version": "3.0.0",
   "description": "PostCSS for React Inline Styles, Radium, Free Style and other CSS-in-JS",
@@ -17,6 +17,16 @@ "keywords": [
   "repository": "postcss/postcss-js",
+  "engines": {
+    "node": ">=10.0"
+  },
+  "exports": {
+    ".": {
+      "require": "./index.js",
+      "import": "./index.mjs"
+    },
+    "./": "./"
+  },
   "dependencies": {
     "camelcase-css": "^2.0.1",
-    "postcss": "^7.0.18"
+    "postcss": "^8.0.2"
   }
 }

parser.js

@@ -1,6 +0,6 @@
-var postcss = require('postcss')
+let postcss = require('postcss')
 
-var IMPORTANT = /\s*!important\s*$/i
+let IMPORTANT = /\s*!important\s*$/i
 
-var unitless = {
+let UNITLESS = {
   'box-flex': true,
@@ -42,3 +42,3 @@ 'box-flex-group': true,
   if (typeof value === 'number') {
-    if (value === 0 || unitless[name]) {
+    if (value === 0 || UNITLESS[name]) {
       value = value.toString()
@@ -54,5 +54,5 @@ } else {
     value = value.replace(IMPORTANT, '')
-    parent.push(postcss.decl({ prop: name, value: value, important: true }))
+    parent.push(postcss.decl({ prop: name, value, important: true }))
   } else {
-    parent.push(postcss.decl({ prop: name, value: value }))
+    parent.push(postcss.decl({ prop: name, value }))
   }
@@ -62,3 +62,3 @@ }
 function atRule (parent, parts, value) {
-  var node = postcss.atRule({ name: parts[1], params: parts[3] || '' })
+  let node = postcss.atRule({ name: parts[1], params: parts[3] || '' })
   if (typeof value === 'object') {
@@ -72,28 +72,26 @@ node.nodes = []
 function parse (obj, parent) {
-  var name, value, node, i
+  let name, value, node
   for (name in obj) {
-    if (obj.hasOwnProperty(name)) {
-      value = obj[name]
-      if (value === null || typeof value === 'undefined') {
-        continue
-      } else if (name[0] === '@') {
-        var parts = name.match(/@([^\s]+)(\s+([\w\W]*)\s*)?/)
-        if (Array.isArray(value)) {
-          for (i = 0; i < value.length; i++) {
-            atRule(parent, parts, value[i])
-          }
-        } else {
-          atRule(parent, parts, value)
+    value = obj[name]
+    if (value === null || typeof value === 'undefined') {
+      continue
+    } else if (name[0] === '@') {
+      let parts = name.match(/@(\S+)(\s+([\W\w]*)\s*)?/)
+      if (Array.isArray(value)) {
+        for (let i of value) {
+          atRule(parent, parts, i)
         }
-      } else if (Array.isArray(value)) {
-        for (i = 0; i < value.length; i++) {
-          decl(parent, name, value[i])
-        }
-      } else if (typeof value === 'object') {
-        node = postcss.rule({ selector: name })
-        parse(value, node)
-        parent.push(node)
       } else {
-        decl(parent, name, value)
+        atRule(parent, parts, value)
       }
+    } else if (Array.isArray(value)) {
+      for (let i of value) {
+        decl(parent, name, i)
+      }
+    } else if (typeof value === 'object') {
+      node = postcss.rule({ selector: name })
+      parse(value, node)
+      parent.push(node)
+    } else {
+      decl(parent, name, value)
     }
@@ -104,5 +102,5 @@ }
 module.exports = function (obj) {
-  var root = postcss.root()
+  let root = postcss.root()
   parse(obj, root)
   return root
 }

process-result.js

@@ -1,7 +0,7 @@
-var objectify = require('./objectifier')
+let objectify = require('./objectifier')
 
-module.exports = function (result) {
+module.exports = function processResult (result) {
   if (console && console.warn) {
-    result.warnings().forEach(function (warn) {
-      var source = warn.plugin || 'PostCSS'
+    result.warnings().forEach(warn => {
+      let source = warn.plugin || 'PostCSS'
       console.warn(source + ': ' + warn.text)
@@ -8,0 +8,0 @@ })

README.md

@@ -1,6 +0,6 @@
-# PostCSS JS [![Build Status][ci-img]][ci]
+# PostCSS JS
 
-<img align="right" width="95" height="95"
+<img align="right" width="135" height="95"
      title="Philosopher’s stone, logo of PostCSS"
-     src="http://postcss.github.io/postcss/logo.svg">
+     src="https://postcss.org/logo-leftp.svg">
 
@@ -12,2 +12,7 @@ [PostCSS] for React Inline Styles, Radium, JSS and other CSS-in-JS.
 
+<a href="https://evilmartians.com/?utm_source=postcss-js">
+  <img src="https://evilmartians.com/badges/sponsored-by-evil-martians.svg"
+       alt="Sponsored by Evil Martians" width="236" height="54">
+</a>
+
 [postcss-write-svg]: https://github.com/jonathantneal/postcss-write-svg
@@ -17,13 +22,6 @@ [Stylelint]:         https://github.com/stylelint/stylelint
 [RTLCSS]:            https://github.com/MohammadYounes/rtlcss
-[ci-img]:            https://travis-ci.org/postcss/postcss-js.svg
-[ci]:                https://travis-ci.org/postcss/postcss-js
 
+
 ## Usage
 
-### Installation
-
-```sh
-npm i postcss-js
-```
-
 ### Processing
@@ -35,7 +33,7 @@
 
-const prefixer = postcssJs.sync([ autoprefixer ]);
+const prefixer = postcssJs.sync([ autoprefixer ])
 
 const style = prefixer({
-    userSelect: 'none'
-});
+  userSelect: 'none'
+})
 
@@ -50,2 +48,3 @@ style //=> {
 
+
 ### Compile CSS-in-JS to CSS
@@ -58,14 +57,15 @@
 const style = {
-    top: 10,
-    '&:hover': {
-        top: 5
-    }
+  top: 10,
+  '&:hover': {
+    top: 5
+  }
 };
 
 postcss().process(style, { parser: postcssJs }).then( (result) => {
-    result.css //=> top: 10px;
-               //   &:hover { top: 5px; }
+  result.css //=> top: 10px;
+             //   &:hover { top: 5px; }
 })
 ```
 
+
 ### Compile CSS to CSS-in-JS
@@ -77,8 +77,15 @@
 
-const css  = '@media screen { z-index: 1 }'
-const root = postcss.parse(css);
+const css  = '--text-color: #DD3A0A; @media screen { z-index: 1; color: var(--text-color) }'
+const root = postcss.parse(css)
 
-postcssJs.objectify(root) //=> { '@media screen': { zIndex: '1' } }
+postcssJs.objectify(root) //=> {
+                          //     '--text-color': '#DD3A0A',
+                          //     '@media screen': {
+                          //       zIndex: '1',
+                          //       color: 'var(--text-color)'
+                          //     }
+                          //   }
 ```
 
+
 ## API
@@ -93,2 +100,3 @@
 
+
 ### `async(plugins): function`
@@ -100,2 +108,3 @@
 
+
 ### `parse(obj): Root`
@@ -124,2 +133,3 @@
 
+
 ### `objectify(root): object`
@@ -129,2 +139,3 @@
 
+
 ## Troubleshoot
@@ -134,2 +145,3 @@
 
+
 ### `Module parse failed`
@@ -144,7 +156,7 @@
 loaders: [
-    {
-        test: /\.json$/,
-        loader: "json-loader"
-    }
+  {
+    test: /\.json$/,
+    loader: "json-loader"
+  }
 ]
 ```

sync.js

@@ -1,12 +0,12 @@
-var postcss = require('postcss')
+let postcss = require('postcss')
 
-var processResult = require('./process-result')
-var parse = require('./parser')
+let processResult = require('./process-result')
+let parse = require('./parser')
 
 module.exports = function (plugins) {
-  var processor = postcss(plugins)
-  return function (input) {
-    var result = processor.process(input, { parser: parse, from: undefined })
+  let processor = postcss(plugins)
+  return input => {
+    let result = processor.process(input, { parser: parse, from: undefined })
     return processResult(result)
   }
 }

No alert changes

Improved metrics

Total package byte prevSize

11438

increased by12.79%

Number of package files

11

increased by10%

Lines of code

218

increased by19.78%

Number of lines in readme file

151

increased by8.63%

Dependency changes

• + Addednanoid@3.3.7(transitive)

• + Addedpicocolors@1.0.1(transitive)

• + Addedpostcss@8.4.38(transitive)

• + Addedsource-map-js@1.2.0(transitive)

• - Removedpicocolors@0.2.1(transitive)

• - Removedpostcss@7.0.39(transitive)

• - Removedsource-map@0.6.1(transitive)

• Updatedpostcss@^8.0.2