[
  {
    "path": ".gitignore",
    "content": "node_modules/\n"
  },
  {
    "path": "Makefile",
    "content": ".DELETE_ON_ERROR:\n\nversion-major version-minor version-patch:\n\t@npm version $(@:version-%=%)\n\npublish:\n\t@git push --tags origin HEAD:master\n\t@npm publish\n"
  },
  {
    "path": "README.md",
    "content": "Styling\n=======\n\nStyling is the [Webpack][] based tool to write component styles with the full\npower of JavaScript:\n```js\nimport styling from 'styling'\nimport {baseColor} from './theme'\n\nexport let button = styling({\n  backgroundColor: baseColor\n})\n```\nWhy\n---\n\n* Modules, variables, functions, all of these works out of the box because you\n  use JavaScript.\n\n* Rich ecosystem of ready to use [npm][] packages: for example you can use\n  [color][] for color manipulation.\n\n* Compatability with the existent CSS tools such as [autoprefixer][] and a ton\n  of other [PostCSS][] transforms.\n\n* Compatability with the existent JS tools such as compile-to-js languages\n  (CoffeeScript, TypeScript), type checkers (FlowType), linters (ESLint) and\n  others.\n\nHow\n---\n\nStyling is implemented as a [Webpack][] loader which executes JavaScript code to\nproduce *styling* objects.\n\nEach styling object is then converted to a [CSS module][] and passed further to\nWebpack CSS processing pipeline (usually css-loader and style-loader).\n\nConsuming styling styles is no different than consuming a CSS module: you get a\nmapping of CSS class names which can be used to style your components.\n\nLimitations\n-----------\n\nYou should still keep your UI code and your stylesheet code separate as\nstylesheet code executes during bundling and doesn't have any runtime\nrepresentation.\n\nInstallation\n------------\n\nInstall from [npm][]:\n```bash\n% npm install styling\n```\nUsage\n-----\n\nAdd the following configuration to `webpack.config.js`:\n```js\nvar styling = require('styling')\n\nmodule.exports = {\n  module: {\n    loaders: [\n      {\n        test: /\\.style\\.js/,\n        loader: styling(\n          ['style', 'css'], // loaders to execute after styling\n          ['babel']        // loaders to execute before styling\n        )\n      }\n    ]\n  }\n}\n```\nFunction `styling` configures loader and accepts two arguments, one for\n*postloaders* and one for *preloaders*.\n\nNow you can write styles with the full power of JavaScript, `Button.style.js`:\n```js\nimport styling from 'styling'\n\nexport let self = styling({\n  backgroundColor: 'red',\n  borderWidth: 1 + 10,\n\n  hover: {\n    borderWidth: 100\n  }\n})\n```\nAnd consume them, `Button.js`:\n```js\nimport ButtonStyle from './Button.style'\n\nexport function render() {\n  return `<button className=\"${ButtonStyle.self}\">Click!</button>`\n}\n```\nUsage with Extract Text Webpack plugin\n--------------------------------------\n\nStyling is compatible with [extract-text-webpack-plugin][] so you can have your\nstyles extracted into a separate CSS bundle by Webpack. This is how you\nconfigure it to do so:\n```js\nvar styling = require('styling')\nvar ExtractTextWebpackPlugin = require('extract-text-webpack-plugin')\n\nmodule.exports = {\n  module: {\n    loaders: [\n      {\n        test: /\\.style\\.js/,\n        loader: styling(ExtractTextWebpackPlugin.extract('style', 'css'), 'babel')\n      }\n    ]\n  },\n\n  plugins: [\n    new ExtractTextWebpackPlugin('bundle.css')\n  ]\n}\n```\n[npm]: http://npmjs.org\n[Webpack]: http://webpack.github.io/\n[extract-text-webpack-plugin]: https://github.com/webpack/extract-text-webpack-plugin\n[color]: https://www.npmjs.com/package/color\n[CSS module]: https://github.com/css-modules/css-modules\n[autoprefixer]: https://github.com/postcss/autoprefixer\n[PostCSS]: http://postcss.parts/\n"
  },
  {
    "path": "Styling.js",
    "content": "/**\n * @copyright 2015, Andrey Popp\n */\n\nvar KEY = '@@styling';\n\nfunction Styling(spec) {\n  this[KEY] = spec;\n  this.rules = spec;\n}\n\nStyling.prototype.getSpec = function Styling_getStyle() {\n  return this[KEY];\n}\n\nStyling.is = function Styling_is(obj) {\n  return obj && obj[KEY] !== undefined;\n}\n\nmodule.exports = Styling;\n"
  },
  {
    "path": "browser.js",
    "content": "/**\n * @copyright 2015, Andrey Popp\n */\n\nvar Styling = require('./Styling');\n\nfunction styling(spec) {\n  return new Styling(spec);\n}\n\nmodule.exports = styling;\n"
  },
  {
    "path": "examples/extract/.gitignore",
    "content": "build\n"
  },
  {
    "path": "examples/extract/Button.js",
    "content": "import Style from './Button.style'\n\nexport default class Button extends React.Component {\n\n  render() {\n    return (\n      <button className={Style.self}>\n        <span className={Style.icon} />\n        <span className={Style.caption}>\n          {caption}\n        </span>\n      </button>\n    )\n  }\n}\n"
  },
  {
    "path": "examples/extract/Button.style.js",
    "content": "import styling from 'styling'\nimport {bgColor} from './Theme'\n\nexport let self = styling({\n  background: bgColor\n})\n\nexport let icon = styling({\n  padding: 10 + 5\n})\n\nexport let caption = styling({\n  fontWeight: 'bold'\n})\n"
  },
  {
    "path": "examples/extract/README.md",
    "content": "styling-example-extract\n=======================\n\nThis is an example of using styling to write component styles which are then\nextracted into a separate CSS chunk.\n\nBuild:\n\n    % npm install .\n    % npm run webpack\n\nProject description:\n\n    ├── webpack.config.js   Webpack config\n    ├── Button.js           Component\n    ├── Button.style.js     Component styles\n    └── Theme.js            Theme constants (used by styles)\n\nBuild output desciption:\n\n    build/\n    ├── bundle.css          Built styles\n    └── bundle.js           Built code\n"
  },
  {
    "path": "examples/extract/Theme.js",
    "content": "export let bgColor = 'red'\n"
  },
  {
    "path": "examples/extract/package.json",
    "content": "{\n  \"name\": \"styling-example-simple\",\n  \"version\": \"1.0.0\",\n  \"scripts\": {\n    \"webpack\": \"webpack\"\n  },\n  \"dependencies\": {\n    \"styling\": \"../../\",\n    \"babel-loader\": \"^5.3.2\",\n    \"css-loader\": \"^0.16.0\",\n    \"extract-text-webpack-plugin\": \"^0.8.2\",\n    \"style-loader\": \"^0.12.3\",\n    \"webpack\": \"^1.11.0\"\n  }\n}\n"
  },
  {
    "path": "examples/extract/webpack.config.js",
    "content": "var styling = require('styling');\nvar ExtractTextWebpackPlugin = require('extract-text-webpack-plugin');\n\nmodule.exports = {\n\n  entry: './Button',\n\n  output: {\n    path: './build',\n    filename: 'bundle.js'\n  },\n\n  module: {\n    loaders: [\n      {\n        include: /\\.style\\.js$/,\n        loader: styling(ExtractTextWebpackPlugin.extract('style', 'css?modules'), 'babel')\n      },\n      {\n        include: /\\.js$/,\n        loader: 'babel'\n      }\n    ]\n  },\n\n  plugins: [\n    new ExtractTextWebpackPlugin('bundle.css')\n  ]\n};\n"
  },
  {
    "path": "examples/simple/.gitignore",
    "content": "build\n"
  },
  {
    "path": "examples/simple/Button.js",
    "content": "import Style from './Button.style'\n\nexport default class Button {\n\n  render() {\n    return (\n      <button className={Style.self}>\n        <span className={Style.icon} />\n        <span className={Style.caption}>\n          {caption}\n        </span>\n      </button>\n    )\n  }\n}\n"
  },
  {
    "path": "examples/simple/Button.style.js",
    "content": "import styling from 'styling'\nimport {bgColor} from './Theme'\n\nexport let self = styling({\n  background: bgColor\n})\n\nexport let icon = styling({\n  padding: 10 + 5\n})\n\nexport let caption = styling({\n  fontWeight: 'bold'\n})\n"
  },
  {
    "path": "examples/simple/README.md",
    "content": "styling-example-simple\n======================\n\nThis is an example of using styling to write component styles.\n\nBuild:\n\n    % npm install .\n    % npm run webpack\n\nProject description:\n\n    ├── webpack.config.js   Webpack config\n    ├── Button.js           Component\n    ├── Button.style.js     Component styles\n    └── Theme.js            Theme constants (used by styles)\n\nBuild output desciption:\n\n    build/\n    └── bundle.js           Built bundle (including code and styles)\n"
  },
  {
    "path": "examples/simple/Theme.js",
    "content": "export let bgColor = 'red'\n"
  },
  {
    "path": "examples/simple/package.json",
    "content": "{\n  \"name\": \"styling-example-simple\",\n  \"version\": \"1.0.0\",\n  \"scripts\": {\n    \"webpack\": \"webpack\"\n  },\n  \"dependencies\": {\n    \"styling\": \"../../\",\n    \"babel-loader\": \"^5.3.2\",\n    \"css-loader\": \"^0.16.0\",\n    \"style-loader\": \"^0.12.3\",\n    \"webpack\": \"^1.11.0\"\n  }\n}\n"
  },
  {
    "path": "examples/simple/webpack.config.js",
    "content": "var styling = require('styling');\n\nmodule.exports = {\n\n  entry: './Button',\n\n  output: {\n    path: './build',\n    filename: 'bundle.js'\n  },\n\n  module: {\n    loaders: [\n      {\n        include: /\\.style\\.js$/,\n        loader: styling(['style', 'css'], ['babel'])\n      },\n      {\n        include: /\\.js$/,\n        loader: 'babel'\n      }\n    ]\n  }\n};\n"
  },
  {
    "path": "index.js",
    "content": "/**\n * @copyright 2015, Andrey Popp\n */\n\nvar omitRequest = require.resolve('./omit');\nvar loaderRequest = require.resolve('./loader');\n\nmodule.exports = function styling(post, pre) {\n  if (Array.isArray(post)) {\n    post = post.join('!');\n  }\n  if (Array.isArray(pre)) {\n    pre = pre.join('!');\n  }\n  return [omitRequest, post, loaderRequest, pre || ''].join('!');\n}\n"
  },
  {
    "path": "loader.js",
    "content": "/**\n * @copyright 2015, Andrey Popp\n */\n\nvar path                = require('path');\nvar Module              = require('module');\nvar Styling             = require('./Styling');\nvar renderStylingSheet  = require('./renderStylingSheet');\n\nvar NodeTemplatePlugin    = require('webpack/lib/node/NodeTemplatePlugin');\nvar NodeTargetPlugin      = require('webpack/lib/node/NodeTargetPlugin');\nvar LibraryTemplatePlugin = require('webpack/lib/LibraryTemplatePlugin');\nvar SingleEntryPlugin     = require('webpack/lib/SingleEntryPlugin');\nvar LimitChunkCountPlugin = require('webpack/lib/optimize/LimitChunkCountPlugin');\n\nvar renderStylingSheetMod = require.resolve('./renderStylingSheet');\n\nvar extractTextWebpackPluginKey;\ntry {\n  extractTextWebpackPluginKey = path.dirname(require.resolve('extract-text-webpack-plugin'));\n} catch (error) {}\n\nmodule.exports = function styling(content) {\n  this.cacheable();\n  if (this[__dirname] === false) {\n    return '';\n  } else if (typeof this[extractTextWebpackPluginKey] === 'function') {\n    return '';\n  } else if (this[extractTextWebpackPluginKey] === false) {\n    var request = this.request.split('!').slice(this.loaderIndex + 1).join('!');\n    produce(this, request, this.async());\n  }  else {\n    return '';\n  }\n};\n\nmodule.exports.pitch = function stylingPitch(request, precedingRequest, data) {\n  this.cacheable();\n  if (this[__dirname] === false) {\n    // if we already inside the loader\n    return;\n  } else if (extractTextWebpackPluginKey in this) {\n    // if extract-text-webpack-plugin is active we do all work in a loader phase\n    return;\n  } else {\n    produce(this, request, this.async());\n  }\n};\n\nfunction produce(loader, request, callback) {\n  var outputFilename = \"styling-output-filename\";\n  var outputOptions = {filename: outputFilename};\n  var childCompiler = getRootCompilation(loader).createChildCompiler(\"styling-compiler\", outputOptions);\n  childCompiler.apply(new NodeTemplatePlugin(outputOptions));\n  childCompiler.apply(new LibraryTemplatePlugin(null, \"commonjs2\"));\n  childCompiler.apply(new NodeTargetPlugin());\n  childCompiler.apply(new SingleEntryPlugin(loader.context, \"!!\" + request));\n  childCompiler.apply(new LimitChunkCountPlugin({ maxChunks: 1 }));\n\n  var subCache = \"subcache \" + __dirname + \" \" + request;\n\n  childCompiler.plugin(\"compilation\", function(compilation) {\n    if (compilation.cache) {\n      if(!compilation.cache[subCache]) {\n        compilation.cache[subCache] = {};\n      }\n      compilation.cache = compilation.cache[subCache];\n    }\n  });\n\n  // We set loaderContext[__dirname] = false to indicate we already in\n  // a child compiler so we don't spawn another child compilers from there.\n  childCompiler.plugin(\"this-compilation\", function(compilation) {\n    compilation.plugin(\"normal-module-loader\", function(loaderContext) {\n      loaderContext[__dirname] = false;\n      if (extractTextWebpackPluginKey in loader) {\n        loaderContext[extractTextWebpackPluginKey] = loader[extractTextWebpackPluginKey];\n      }\n    });\n  });\n\n  var source;\n  childCompiler.plugin(\"after-compile\", function(compilation, callback) {\n    source = compilation.assets[outputFilename] && compilation.assets[outputFilename].source();\n\n    // Remove all chunk assets\n    compilation.chunks.forEach(function(chunk) {\n      chunk.files.forEach(function(file) {\n        delete compilation.assets[file];\n      });\n    });\n\n    callback();\n  });\n\n  childCompiler.runAsChild(function(error, entries, compilation) {\n    if (error) {\n      return callback(error);\n    }\n    if (compilation.errors.length > 0) {\n      return callback(compilation.errors[0]);\n    }\n    if (!source) {\n      return callback(new Error(\"Didn't get a result from child compiler\"));\n    }\n    compilation.fileDependencies.forEach(function(dep) {\n      loader.addDependency(dep);\n    });\n    compilation.contextDependencies.forEach(function(dep) {\n      loader.addContextDependency(dep);\n    });\n    try {\n      var exports = loader.exec(source, request);\n      var text = renderStylingSheet(exports);\n    } catch (e) {\n      return callback(e);\n    }\n    if (text) {\n      callback(null, text);\n    } else {\n      callback();\n    }\n  });\n}\n\nfunction getRootCompilation(loader) {\n  var compiler = loader._compiler;\n  var compilation = loader._compilation;\n  while (compiler.parentCompilation) {\n    compilation = compiler.parentCompilation;\n    compiler = compilation.compiler;\n  }\n  return compilation;\n}\n"
  },
  {
    "path": "omit.js",
    "content": "var loaderPath = require.resolve('./loader');\n\nmodule.exports = function(content) {\n  this.cacheable();\n  return content;\n}\n\nmodule.exports.pitch = function(request) {\n  if (this[__dirname] === false) {\n    request = request.split('!');\n    while (request.length > 1) {\n      var req = request.shift();\n      if (req === loaderPath) {\n        break;\n      }\n    }\n    request = request.join('!');\n    return 'module.exports = require(' + JSON.stringify('!!' + request) + ');';\n  }\n}\n"
  },
  {
    "path": "package.json",
    "content": "{\n  \"name\": \"styling\",\n  \"version\": \"0.4.1\",\n  \"description\": \"Style components with JavaScript\",\n  \"main\": \"index.js\",\n  \"browser\": \"browser.js\",\n  \"webpackLoader\": \"loader.js\",\n  \"author\": \"Andrey Popp <8mayday@gmail.com>\",\n  \"license\": \"MIT\",\n  \"repository\": \"andreypopp/styling\",\n  \"keywords\": [\n    \"webpack\",\n    \"webpack-loader\",\n    \"css-modules\",\n    \"css\",\n    \"style\"\n  ],\n  \"dependencies\": {}\n}\n"
  },
  {
    "path": "renderStyling.js",
    "content": "/**\n * @copyright 2013-2015, Facebook, Inc.\n * @copyright 2015, Andrey Popp\n */\n\nfunction renderStyling(key, styling) {\n  var stylesheet = [];\n  var spec = styling.getSpec();\n  if (typeof spec === 'string') {\n    stylesheet.push(spec);\n  } else {\n    var self = {};\n    for (var prop in spec) {\n      if (spec.hasOwnProperty(prop)) {\n        var value = spec[prop];\n        value = valueOf(value);\n        if (value && typeof value === 'object' && !Array.isArray(value)) {\n          stylesheet.push(renderStyle(key, prop, value));\n        } else {\n          self[prop] = value;\n        }\n      }\n    }\n    stylesheet.unshift(renderStyle(key, null, self));\n  }\n  return stylesheet;\n}\n\nfunction renderStyle(name, state, style) {\n  var css = '';\n  css += renderSelector(name, state) + ' {\\n';\n  for (var prop in style) {\n    if (style.hasOwnProperty(prop)) {\n      var value = valueOf(style[prop]);\n      if (Array.isArray(value)) {\n        for (var i = 0; i < value.length; i++) {\n          css += '  ' + renderProp(prop, value[i]) + '\\n';\n        }\n      } else {\n        css += '  ' + renderProp(prop, value) + '\\n';\n      }\n    }\n  }\n  css += '}';\n  return css;\n}\n\nfunction renderProp(key, value) {\n  value = valueOf(value);\n\n  var isNonNumeric = isNaN(value);\n  if (isNonNumeric || value === 0 ||\n      IS_UNITLESS_NUMBER.hasOwnProperty(key) && IS_UNITLESS_NUMBER[key]) {\n    value = '' + value;\n  } else {\n    value = value + 'px';\n  }\n  key = key.replace(CAMEL_CASE_TO_DASH_CASE, '$1-$2').toLowerCase();\n  return key + ': ' + value + ';';\n}\n\nfunction renderSelector(name, state) {\n  return ':local(.' + name + (state ? ':' + state : '') + ')';\n}\n\nfunction valueOf(value) {\n  if (value != null) {\n    return value.valueOf();\n  } else {\n    return value;\n  }\n}\n\nvar CAMEL_CASE_TO_DASH_CASE = /([a-z]|^)([A-Z])/g;\n\nvar IS_UNITLESS_NUMBER = {\n  boxFlex: true,\n  boxFlexGroup: true,\n  columnCount: true,\n  flex: true,\n  flexGrow: true,\n  flexPositive: true,\n  flexShrink: true,\n  flexNegative: true,\n  fontWeight: true,\n  lineClamp: true,\n  lineHeight: true,\n  opacity: true,\n  order: true,\n  orphans: true,\n  tabSize: true,\n  widows: true,\n  zIndex: true,\n  zoom: true,\n\n  // SVG-related properties\n  fillOpacity: true,\n  strokeDashoffset: true,\n  strokeOpacity: true,\n  strokeWidth: true,\n};\n\nmodule.exports = renderStyling;\n"
  },
  {
    "path": "renderStylingSheet.js",
    "content": "/**\n * @copyright 2015, Andrey Popp\n */\n\nvar Styling       = require('./Styling');\nvar renderStyling = require('./renderStyling');\n\nfunction renderStylingSheet(sheet) {\n  var stylesheet = [];\n  for (var key in sheet) {\n    if (sheet.hasOwnProperty(key)) {\n      var styling = sheet[key];\n      if (Styling.is(styling)) {\n        stylesheet = stylesheet.concat(renderStyling(key, styling));\n      }\n    }\n  }\n  return stylesheet.join('\\n\\n');\n}\n\nmodule.exports = renderStylingSheet;\n"
  }
]