Postcss-js droped

Author: Alexander Ryzhikov

package.json

@@ -42,8 +42,7 @@
     "lodash": "^4.16.4",
     "postcss": "^5.2.5",
     "postcss-cssnext": "^2.8.0",
-    "postcss-import": "7.1.3",
-    "postcss-js": "^0.1.3"
+    "postcss-import": "7.1.3"
   },
   "devDependencies": {
     "ava": "^0.16.0",

src/lib/index.js

@@ -11,11 +11,16 @@ export default function (source) {
 
   const transformToConfig = options.es5 ? utils.toES5Config : utils.toConfig
 
-  const end = (err, data = {}, map) => {
+  const end = (err, result, path, map) => {
     if (err) {
       _done(err)
     }
-    return _done(null, transformToConfig(data), map)
+
+    if (!result) {
+      return _done(null, {}, map)
+    }
+
+    return _done(null, transformToConfig(result.root, path), map)
   }
 
   const emitWarnings = (result) => {
@@ -35,6 +40,6 @@ export default function (source) {
   utils.getPostcss(true)
     .process(source, { from: this.resourcePath })
     .then(emitWarnings)
-    .then((result) => end(null, utils.objectify(result.root, this.resourcePath), result.map))
+    .then((result) => end(null, result, this.resourcePath, result.map))
     .catch(onError)
 }

src/lib/sync.js

@@ -4,5 +4,5 @@ export default function sync (source, filepath, options = {}) {
   const transformToConfig = options.es5 ? utils.toES5Config : utils.toConfig
   const root = utils.getPostcss(false).process(source, { from: filepath }).root
 
-  return transformToConfig(utils.objectify(root, filepath))
+  return transformToConfig(root, filepath)
 }

src/lib/utils.js

@@ -1,34 +1,15 @@
-import postcssJs from 'postcss-js'
 import compose from 'lodash/fp/compose'
-import get from 'lodash/fp/get'
 import cond from 'lodash/fp/cond'
-import lowerFirst from 'lodash/lowerFirst'
 import postcss from 'postcss'
 import cssnext from 'postcss-cssnext'
 import atImport from 'postcss-import'
 
 const isDev = () => process.env.NODE_ENV === 'development'
 const isProd = () => !isDev()
 
-const transform = (data) => {
-  if (!data) {
-    return {}
-  }
-  return Object
-    .keys(data)
-    .reduce((acc, k) => {
-      const v = data[k]
-
-      k = k.replace(/^-+/, '') // strips '-'
-      k = lowerFirst(k)
-      acc[k] = v.endsWith('px') ? parseInt(v, 10) : v
-      return acc
-    }, {})
-}
-
 const toProdExport = (code) => `export default ${code}`
 const toDevExport = (code) => `let config = ${code};
-if (typeof global.Proxy !== 'undefined') {
+if (typeof Proxy !== 'undefined') {
     config = new Proxy(config, {
         get(target, key) {
             if (key !== '__esModule' && !target[key]) {
@@ -52,21 +33,29 @@ const toExport = cond([
 ])
 
 const toString = (data) => `${JSON.stringify(data, null, '\t')}`
-const toData = compose(transform, get(':root'))
 
-export const toConfig = compose(toExport, toString, toData)
-export const toES5Config = compose(toES5Export, toString, toData)
+const objectify = (root, filepath) => {
+  const result = {}
+
+  if (!root) {
+    return result
+  }
+
+  root.walkDecls((rule) => {
+    if (rule.source.input.file !== filepath) {
+      return
+    }
+    if (rule.parent && rule.parent.selectors.find((sel) => sel === ':root')) {
+      const v = rule.value // replace "--"
 
-export const objectify = (root, filepath) => {
-  // removes imported rules, so we have only computed output
-  root.walkRules((r) => {
-    if (r.source.input.file !== filepath) {
-      r.remove()
+      result[rule.prop.replace(/^-+/, '')] = v.endsWith('px') ? parseInt(v, 10) : v
     }
   })
-  return postcssJs.objectify(root)
+  return result
 }
 
+export const toConfig = compose(toExport, toString, objectify)
+export const toES5Config = compose(toES5Export, toString, objectify)
 export const getPostcss = (async) => postcss()
   .use(atImport({ async }))
   .use(cssnext({ features: { customProperties: { preserve: 'computed' } } }))

test/fixtures/computedOverwrite.css

@@ -0,0 +1,5 @@
+@import './basic.css';
+
+:root {
+  --size: 1rem;
+}

test/fixtures/multipleRoots.css

@@ -0,0 +1,8 @@
+:root {
+  --size: 10em;
+}
+
+:root {
+  --size: 11em;
+  --color: violet;
+}

test/index.js

@@ -28,6 +28,12 @@ test('imports drop', async (t) => {
   t.is(typeof result.size, 'undefined')
 })
 
+test('imports overwrite', async (t) => {
+  const result = await runner('./computedOverwrite.css')
+
+  t.true(result.size === '1rem')
+})
+
 test('works with @apply', async (t) => {
   const result = await runner('./apply.css')
 
@@ -49,3 +55,10 @@ test('sync loader works with es5 ', (t) => {
 
   t.true(result.size === '10em')
 })
+
+test('works with multiple roots', async (t) => {
+  const result = await runner('./multipleRoots.css')
+
+  t.true(result.size === '11em')
+  t.true(result.color === 'violet')
+})

yarn.lock

@@ -1172,10 +1172,6 @@ callsites@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/callsites/-/callsites-0.2.0.tgz#afab96262910a7f33c19a5775825c69f34e350ca"
 
-camelcase-css@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/camelcase-css/-/camelcase-css-1.0.1.tgz#157c4238265f5cf94a1dffde86446552cbf3f705"
-
 camelcase-keys@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/camelcase-keys/-/camelcase-keys-2.1.0.tgz#308beeaffdf28119051efa1d932213c91b8f92e7"
@@ -3492,13 +3488,6 @@ postcss-initial@^1.3.1:
     lodash.template "^4.2.4"
     postcss "^5.0.19"
 
-postcss-js@^0.1.3:
-  version "0.1.3"
-  resolved "https://registry.yarnpkg.com/postcss-js/-/postcss-js-0.1.3.tgz#8c0a5daa1c918b3073c4806a3c5b332c67250c03"
-  dependencies:
-    camelcase-css "^1.0.1"
-    postcss "^5.0.21"
-
 postcss-media-minmax@^2.1.0:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/postcss-media-minmax/-/postcss-media-minmax-2.1.2.tgz#444c5cf8926ab5e4fd8a2509e9297e751649cdf8"