prepare npm package

Author: fraserxu

README.md

@@ -1,2 +1,85 @@
 # babel-plugin-postcss-cssmodules-transform
-Babel Plugin Transform PostCSS and extract static CSS
+Babel plugin transform and extract PostCSS and CSS Modules to static CSS
+
+### Status
+
+This plugin is still at a very early stage and features are incomplete.
+
+### This plugin does two things:
+
+```JavaScript
+// index.js
+import styles from './index.module.css'
+```
+
+```CSS
+/* index.module.css */
+.root {
+  display: flex;
+}
+```
+
+Into an object that has properties mirroring the styles name in the compiled JS file:
+
+```JavaScript
+// index.js
+var styles = {"root":"_root_amfqe_1"};
+```
+
+And extract to `styles.css`
+
+```CSS
+/* styles.css */
+._root_amfqe_1 {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+}
+```
+
+### Usage
+
+Install from NPM
+
+```sh
+$ yarn add @envato/babel-plugin-postcss-cssmodules-transform -D
+```
+
+Add the plugin to `.babelrc`.
+
+
+```JSON
+{
+  "presets": [
+    ["@babel/env", {
+      "targets": {
+        "browsers": ["last 2 versions"]
+      }
+    }],
+    "@babel/stage-3",
+    "@babel/react",
+    "@babel/typescript"
+  ],
+  "plugins": [
+    ["@envato/babel-plugin-postcss-cssmodules-transform", {
+      "extractCss": "./dist/styles.css"
+    }]
+  ]
+}
+```
+
+### Todo
+
+- [ ] support `require('./index.module.css')` syntax
+- [ ] support `postcss.config.js`
+- [ ] unit test
+
+### Alternatives
+
+This plugin is based on the two plugins below, and modified to support `extractCss` option with full `postcss` plugin support.
+
+* [babel-plugin-css-modules-transform](https://github.com/michalkvasnicak/babel-plugin-css-modules-transform)
+* [babel-plugin-transform-postcss](https://github.com/wbyoung/babel-plugin-transform-postcss)
+
+### License
+MIT

index.js

@@ -0,0 +1,93 @@
+const { extname, dirname, resolve } = require('path')
+const mkdirp = require('mkdirp')
+const { readFileSync, appendFileSync } = require('fs')
+const deasync = require('deasync')
+
+const postcss = require('postcss')
+const atImport = require('postcss-import')
+const simpleVars = require('postcss-simple-vars')
+const cssNext = require('postcss-cssnext')
+const cssModules = require('postcss-modules')
+
+const extensions = ['.css']
+
+const sync = promise => {
+  let success, error
+  promise.then(result => (success = { result }), err => (error = err))
+  deasync.loopWhile(() => !(success || error))
+
+  if (!success) {
+    throw error
+  }
+  return success.result
+}
+
+const writeCssFile = (targetFilePath, content) => {
+  mkdirp.sync(dirname(targetFilePath))
+  appendFileSync(targetFilePath, content, 'utf8')
+}
+
+module.exports = function(babel) {
+  const { types: t } = babel
+
+  return {
+    visitor: {
+      ImportDeclaration(path, state) {
+        const { file, opts } = state
+        const stylesheetPath = path.node.source.value
+
+        if (path.node.specifiers.length !== 1) {
+          return
+        }
+
+        // match `import styles from './index.module.css'` statemenet
+        if (extensions.indexOf(extname(stylesheetPath)) !== -1) {
+          const requiringFile = file.opts.filename
+          const resolvedStylesheetPath = resolve(
+            process.env.PWD,
+            dirname(requiringFile),
+            stylesheetPath
+          )
+
+          const source = readFileSync(resolvedStylesheetPath, 'utf8')
+
+          let tokens = {}
+          const plugins = [
+            atImport,
+            simpleVars,
+            cssNext,
+            cssModules({
+              getJSON: function(cssFileName, json, outputFileName) {
+                tokens = json
+              }
+            })
+          ]
+          // read and process css with `postcss`
+          const results = sync(
+            postcss(plugins).process(source, {
+              from: resolvedStylesheetPath,
+              to: resolvedStylesheetPath
+            })
+          )
+          const distStylesheetPath = resolve(process.env.PWD, opts.extractCss)
+          // append all the compiled css into the dist css file
+          writeCssFile(distStylesheetPath, results.css)
+
+          const styles = t.objectExpression(
+            Object.keys(tokens).map(token =>
+              t.objectProperty(
+                t.stringLiteral(token),
+                t.stringLiteral(tokens[token])
+              )
+            )
+          )
+          const variableDeclaration = t.VariableDeclaration('var', [
+            t.VariableDeclarator(path.node.specifiers[0].local, styles)
+          ])
+          // replace the import statement into `var styles = {}`
+          path.replaceWith(variableDeclaration)
+        }
+      }
+    }
+  }
+}

package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@envato/babel-plugin-postcss-cssmodules-transform",
+  "version": "1.0.0",
+  "description": "Babel Plugin Transform PostCSS and extract static CSS",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/envato/babel-plugin-postcss-cssmodules-transform.git"
+  },
+  "keywords": [
+    "postcss",
+    "css-modules",
+    "babel"
+  ],
+  "author": "Envato",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/envato/babel-plugin-postcss-cssmodules-transform/issues"
+  },
+  "homepage": "https://github.com/envato/babel-plugin-postcss-cssmodules-transform#readme",
+  "dependencies": {
+    "deasync": "^0.1.12",
+    "mkdirp": "^0.5.1",
+    "postcss": "^6.0.19",
+    "postcss-cssnext": "^3.1.0",
+    "postcss-import": "^11.1.0",
+    "postcss-modules": "^1.1.0",
+    "postcss-simple-vars": "^4.1.0"
+  }
+}