rollup-plugin-postcss - npm Package Compare versions

Comparing version 0.1.1 to 0.2.0

index.js

@@ -20,2 +20,3 @@ 'use strict';
   var extensions = options.extensions || ['.css', '.sss'];
+  var getExport = options.getExport || function () {};
 
@@ -39,3 +40,3 @@ return {
       return postcss(options.plugins || []).process(code, opts).then(function (result) {
-        var code = 'export default ' + injectFnName + '(' + JSON.stringify(result.css) + ');';
+        var code = 'export default ' + injectFnName + '(' + JSON.stringify(result.css) + ',' + JSON.stringify(getExport(result.opts.from)) + ');';
         var map = options.sourceMap && result.map ? JSON.parse(result.map) : { mappings: '' };
@@ -42,0 +43,0 @@ return {

package.json

 {
   "name": "rollup-plugin-postcss",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "Seamless integration between Rollup and PostCSS",
@@ -35,2 +35,3 @@ "main": "index.js",
     "jsdom": "^9.2.1",
+    "postcss-modules": "^0.5.2",
     "postcss-nested": "^1.0.0",
@@ -45,3 +46,3 @@ "require-from-string": "^1.1.0",
     "rollup-pluginutils": "^1.2.0",
-    "style-inject": "0.0.11"
+    "style-inject": "^0.1.0"
   },
@@ -48,0 +49,0 @@ "ava": {

README.md

@@ -44,4 +44,42 @@ # rollup-plugin-postcss [![Build Status](https://img.shields.io/circleci/project/egoist/rollup-plugin-postcss/master.svg?style=flat-square)](https://circleci.com/gh/egoist/rollup-plugin-postcss/tree/master)
 
+## Use with CSS modules
+
+The [postcss-modules](postcss-modules) plugin allows you to use CSS modules in PostCSS, it requires some additional setup to use in Rollup:
+
+```js
+import postcss from 'rollup-plugin-postcss';
+import postcssModules from 'postcss-modules';
+
+const cssExportMap = {};
+
+rollup({
+ plugins: [
+    postcss({
+      plugins: [
+        postcssModules({
+          getJSON (id, exportTokens) {
+            cssExportMap[id] = exportTokens;
+          }
+        })
+      ],
+      getExport (id) {
+        return cssExportMap[id];
+      }
+    })
+ ]
+})
+```
+
+That's it, you can now use CSS modules and import CSS like this:
+
+```js
+import style from './style.css';
+
+console.log(style.className); // .className_echwj_1
+```
+
+
+
 ## License
 
 MIT © [EGOIST](https://github.com/egoist)

src/index.js

@@ -14,2 +14,3 @@ import { createFilter } from 'rollup-pluginutils';
   const extensions = options.extensions || ['.css', '.sss']
+  const getExport = options.getExport || function () {}
 
@@ -35,3 +36,3 @@ return {
           .then(result => {
-            const code = `export default ${injectFnName}(${JSON.stringify(result.css)});`;
+            const code = `export default ${injectFnName}(${JSON.stringify(result.css)},${JSON.stringify(getExport(result.opts.from))});`;
             const map = options.sourceMap && result.map
@@ -38,0 +39,0 @@ ? JSON.parse(result.map)

No alert changes

Improved metrics

Total package byte prevSize

7301

increased by15.38%

Lines of code

85

increased by2.41%

Number of lines in readme file

85

increased by80.85%

Worsened metrics

Dev dependency count

11

increased by10%

Dependency changes

• + Addedstyle-inject@0.1.2(transitive)

• - Removedstyle-inject@0.0.11(transitive)

• Updatedstyle-inject@^0.1.0