button.csjs.js

import csjs from "csjs";
const pink = "#c74d5a";
const white = "#fff";

export default csjs`

  .simple-button {
    background-color: ${pink};
    border-radius: 3px;
    color: ${white};
  }

`;

index.js

//create this file under node_modules/csjs

var getCss = require("csjs/get-css");
var csjs = require("csjs");
var requireFromString = require("require-from-string");

module.exports = function(source) {
  var parsedSource = requireFromString(source);
  return getCss(parsedSource.__esModule ? parsedSource.default : parsedSource);
}

shallow_button.csjs.js

import csjs from "csjs";
const white = "#fff";
const pink = "#c74d5a";
import button from "./button.csjs"; // since webpack interprets this it will transform it into string. 
                                    // the import is undefined

export default csjs`

  .shallow-button extends ${button['simple-button']} { // tries to extend undefined['simple-button']
    background-color: ${white};
    border: 1px solid #ddd;
  }

  .shallow-button:hover {
    background-color: ${pink};
    border-color: ${pink};
    color: ${white};
  }

`;

webpack.config.js

var path = require("path");
var ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
  entry: "./index.js",
  output: {
    path: path.resolve(__dirname, "assets"),
    publicPath: "/assets/",
    filename: "index.js",
  },
  plugins: [
    new ExtractTextPlugin("styles.css")
  ],
  module: {
    loaders: [
      {
        test: /\.js?$/,
        loader: "babel-loader",
        exclude: /node_modules/,
        query: {
          cacheDirectory: true
        }
      }, {
        test: /\.csjs.js?$/,
        loader: ExtractTextPlugin.extract("css-loader!csjs-loader!babel-loader")
      }
    ]
  }
}