{"_id":"@cameron-martin/postcss-modules","_rev":"4-764cbcfc76245b79ac4ac8cf8a7be390","name":"@cameron-martin/postcss-modules","description":"PostCSS plugin to use CSS Modules everywhere","dist-tags":{"latest":"0.5.3"},"versions":{"0.5.2":{"name":"@cameron-martin/postcss-modules","version":"0.5.2","description":"PostCSS plugin to use CSS Modules everywhere","main":"build/index.js","keywords":["postcss","css","postcss-plugin","modules","css modules","components"],"author":{"name":"Alexander Madyankin","email":"alexander@madyankin.name"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/css-modules/postcss-modules.git"},"dependencies":{"@cameron-martin/css-modules-loader-core":"^1.0.1","generic-names":"^1.0.1","postcss":"^5.1.2","string-hash":"^1.1.0"},"devDependencies":{"autoprefixer":"^6.4.0","ava":"^0.16.0","babel":"^6.5.2","babel-cli":"^6.11.4","babel-core":"^6.13.2","babel-eslint":"^6.1.2","babel-preset-es2015":"^6.13.2","eslint":"^3.3.1","eslint-config-airbnb-base":"^5.0.2","eslint-plugin-import":"^1.13.0","file-exists":"^2.0.0","rimraf":"^2.5.4"},"scripts":{"pretest":"eslint src test","test":"ava --require babel-core/register","transpile":"babel src -d build","prepublish":"npm run transpile","postpublish":"rimraf build && git push --follow-tags"},"gitHead":"34d235e3427f55a4c5f13993c4be691ccd13c932","bugs":{"url":"https://github.com/css-modules/postcss-modules/issues"},"homepage":"https://github.com/css-modules/postcss-modules#readme","_id":"@cameron-martin/postcss-modules@0.5.2","_shasum":"f9e22d860fb4d71d64a849c853215d31f3246388","_from":".","_npmVersion":"3.10.3","_nodeVersion":"6.7.0","_npmUser":{"name":"cameron-martin","email":"cameronmartin123@gmail.com"},"dist":{"shasum":"f9e22d860fb4d71d64a849c853215d31f3246388","tarball":"https://registry.npmjs.org/@cameron-martin/postcss-modules/-/postcss-modules-0.5.2.tgz","integrity":"sha512-8Qlp3d2OOZoWVQ0TgBuKBHtEZr7EvHgXFfXTaKMsbuj/vYoNCUcE7vgEvD9RhqEQEj2fx5RZ0pZpI/nMy1scVw==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDYlfeMN9RMHdrbRoWkdrGb5r698cmR8xpINRg4dJ/kkwIhAOLyB32d/jICKOl3Zs+CYt7XyHBQARDrKm0r88IFHcdv"}]},"maintainers":[{"name":"cameron-martin","email":"cameronmartin123@gmail.com"}],"_npmOperationalInternal":{"host":"packages-12-west.internal.npmjs.com","tmp":"tmp/postcss-modules-0.5.2.tgz_1475157796112_0.6223884013015777"}},"0.5.3":{"name":"@cameron-martin/postcss-modules","version":"0.5.3","description":"PostCSS plugin to use CSS Modules everywhere","main":"build/index.js","keywords":["postcss","css","postcss-plugin","modules","css modules","components"],"author":{"name":"Alexander Madyankin","email":"alexander@madyankin.name"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/css-modules/postcss-modules.git"},"dependencies":{"@cameron-martin/css-modules-loader-core":"^1.0.1","generic-names":"^1.0.1","postcss":"^5.1.2","string-hash":"^1.1.0"},"devDependencies":{"autoprefixer":"^6.4.0","ava":"^0.16.0","babel":"^6.5.2","babel-cli":"^6.11.4","babel-core":"^6.13.2","babel-eslint":"^6.1.2","babel-preset-es2015":"^6.13.2","eslint":"^3.3.1","eslint-config-airbnb-base":"^5.0.2","eslint-plugin-import":"^1.13.0","file-exists":"^2.0.0","rimraf":"^2.5.4"},"scripts":{"pretest":"eslint src test","test":"ava --require babel-core/register","transpile":"babel src -d build","prepublish":"npm run transpile","postpublish":"rimraf build && git push --follow-tags"},"gitHead":"5c6e492bed68369b8e152e2e0ea49de5becd50a7","bugs":{"url":"https://github.com/css-modules/postcss-modules/issues"},"homepage":"https://github.com/css-modules/postcss-modules#readme","_id":"@cameron-martin/postcss-modules@0.5.3","_shasum":"f0e3226f57c229d26206118169cb53c9e0e11c59","_from":".","_npmVersion":"3.10.3","_nodeVersion":"6.7.0","_npmUser":{"name":"cameron-martin","email":"cameronmartin123@gmail.com"},"dist":{"shasum":"f0e3226f57c229d26206118169cb53c9e0e11c59","tarball":"https://registry.npmjs.org/@cameron-martin/postcss-modules/-/postcss-modules-0.5.3.tgz","integrity":"sha512-ZrdoFMlINZL1Yn0B10Cv8U1mt8q/jaTS4ut680INzyZphDLDES3gqCtxyAtL0DMP2dUlQ+Ak+KLDMu7bAlj1BQ==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD8F+8F8TW+7LpMoaUs+3AoxgcVuDyT2rF/E2q8OTZcDQIhAIllQfgtqFpyrgPPWMXtIXIvtzQDVIo4gSsQpwfHD3WK"}]},"maintainers":[{"name":"cameron-martin","email":"cameronmartin123@gmail.com"}],"_npmOperationalInternal":{"host":"packages-16-east.internal.npmjs.com","tmp":"tmp/postcss-modules-0.5.3.tgz_1475158853636_0.49916392168961465"}}},"readme":"# postcss-modules [![Build Status][ci-img]][ci]\r\n\r\nA [PostCSS] plugin to use [CSS Modules] everywhere. Not only at the client side.\r\n\r\n[PostCSS]:      https://github.com/postcss/postcss\r\n[ci-img]:       https://travis-ci.org/css-modules/postcss-modules.svg\r\n[ci]:           https://travis-ci.org/css-modules/postcss-modules\r\n[CSS Modules]:  https://github.com/css-modules/css-modules\r\n\r\n<a href=\"https://evilmartians.com/?utm_source=postcss-modules\">\r\n<img src=\"https://evilmartians.com/badges/sponsored-by-evil-martians.svg\" alt=\"Sponsored by Evil Martians\" width=\"236\" height=\"54\">\r\n</a>\r\n\r\nWhat is this? For example, you have the following CSS:\r\n\r\n```css\r\n\r\n/* styles.css */\r\n:global .page {\r\n    padding: 20px;\r\n}\r\n\r\n.title {\r\n    composes: title from \"./mixins.css\";\r\n    color: green;\r\n}\r\n\r\n.article {\r\n    font-size: 16px;\r\n}\r\n\r\n/* mixins.css */\r\n.title {\r\n    color: black;\r\n    font-size: 40px;\r\n}\r\n\r\n.title:hover {\r\n    color: red;\r\n}\r\n\r\n```\r\nAfter the transformation it will become like this:\r\n\r\n```css\r\n._title_116zl_1 {\r\n    color: black;\r\n    font-size: 40px;\r\n}\r\n\r\n._title_116zl_1:hover {\r\n    color: red;\r\n}\r\n\r\n.page {\r\n    padding: 20px;\r\n}\r\n\r\n._title_xkpkl_5 {\r\n    color: green;\r\n}\r\n\r\n._article_xkpkl_10 {\r\n    font-size: 16px;\r\n}\r\n```\r\n\r\nAnd the plugin will give you a JSON object for transformed classes:\r\n```json\r\n{\r\n  \"title\": \"_title_xkpkl_5 _title_116zl_1\",\r\n  \"article\": \"_article_xkpkl_10\",\r\n}\r\n```\r\n\r\n\r\n## Usage\r\n\r\n### Saving exported classes\r\n\r\nBy default, a JSON file with exported classes will be placed next to corresponding CSS.\r\nBut you have a freedom to make everything you want with exported classes, just\r\nuse the `getJSON` callback. For example, save data about classes into a corresponding JSON file:\r\n\r\n```js\r\npostcss([\r\n  require('postcss-modules')({\r\n    getJSON: function(cssFileName, json) {\r\n      var path          = require('path');\r\n      var cssName       = path.basename(cssFileName, '.css');\r\n      var jsonFileName  = path.resolve('./build' + cssName + '.json');\r\n      fs.writeFileSync(jsonFileName, JSON.stringify(json));\r\n    }\r\n  });\r\n]);\r\n```\r\n\r\n### Generating scoped names\r\n\r\nBy default, the plugin assumes that all the classes are local. You can change\r\nthis behaviour using the `scopeBehaviour` option:\r\n\r\n```js\r\npostcss([\r\n  require('postcss-modules')({\r\n    scopeBehaviour: 'global' // can be 'global' or 'local',\r\n  });\r\n]);\r\n```\r\n\r\nTo generate custom classes, use the `generateScopedName` callback:\r\n\r\n```js\r\npostcss([\r\n  require('postcss-modules')({\r\n    generateScopedName: function(name, filename, css) {\r\n      var path  = require('path');\r\n      var i     = css.indexOf('.' + name);\r\n      var line  = css.substr(0, i).split(/[\\r\\n]/).length;\r\n      var file  = path.basename(filename, '.css');\r\n\r\n      return '_' + file + '_' + line + '_' + name;\r\n    }\r\n  });\r\n]);\r\n```\r\n\r\nOr just pass an interpolated string to the `generateScopedName` option\r\n(More details [here](https://github.com/webpack/loader-utils#interpolatename)):\r\n\r\n```js\r\npostcss([\r\n  require('postcss-modules')({\r\n    generateScopedName: '[name]__[local]___[hash:base64:5]',\r\n  });\r\n]);\r\n```\r\n\r\n### Loading source files\r\n\r\nIf you need, you can pass a custom loader (see [FileSystemLoader] for example):\r\n\r\n```js\r\npostcss([\r\n  require('postcss-modules')({\r\n    Loader: CustomLoader,\r\n  });\r\n]);\r\n```\r\n\r\n## Integration with templates\r\nThe plugin only transforms CSS classes to CSS modules.\r\nBut you probably want to integrate these CSS modules with your templates.\r\nHere are some examples.\r\n\r\nAssume you've saved project's CSS modules in `cssModules.json`:\r\n\r\n```json\r\n{\r\n  \"title\": \"_title_xkpkl_5 _title_116zl_1\",\r\n  \"article\": \"_article_xkpkl_10\"\r\n}\r\n```\r\n\r\n\r\n### Pug (ex-Jade)\r\nLet's say you have a Pug template `about.jade`:\r\n```jade\r\nh1(class=css.title) postcss-modules\r\narticle(class=css.article) A PostCSS plugin to use CSS Modules everywhere\r\n```\r\n\r\nRender it:\r\n```js\r\nvar jade = require('jade');\r\nvar cssModules = require('./cssModules.json');\r\nvar html = jade.compileFile('about.jade')({css: cssModules});\r\nconsole.log(html);\r\n```\r\n\r\nAnd you'll get the following HTML:\r\n```html\r\n<h1 class=\"_title_xkpkl_5 _title_116zl_1\">postcss-modules</h1>\r\n<article class=\"_article_xkpkl_10\">A PostCSS plugin to use CSS Modules everywhere</article>\r\n```\r\n\r\n\r\n### HTML\r\nFor HTML transformation we'll use [PostHTML](https://github.com/posthtml/posthtml) and [PostHTML CSS Modules](https://github.com/maltsev/posthtml-css-modules):\r\n```bash\r\nnpm install --save posthtml posthtml-css-modules\r\n```\r\n\r\nHere is our template `about.html`:\r\n```html\r\n<h1 css-module=\"title\">postcss-modules</h1>\r\n<article css-module=\"article\">A PostCSS plugin to use CSS Modules everywhere</article>\r\n```\r\n\r\nTransform it:\r\n```js\r\nvar fs = require('fs');\r\nvar posthtml = require('posthtml');\r\nvar posthtmlCssModules = require('posthtml-css-modules');\r\nvar template = fs.readFileSync('./about.html', 'utf8');\r\n\r\nposthtml([posthtmlCssModules('./cssModules.json')])\r\n    .process(template)\r\n    .then(function (result) {\r\n        console.log(result.html);\r\n    });\r\n```\r\n(for using other build systems please check [the documentation of PostHTML](https://github.com/posthtml/posthtml/blob/master/README.md))\r\n\r\n\r\nAnd you'll get the following HTML:\r\n```html\r\n<h1 class=\"_title_xkpkl_5 _title_116zl_1\">postcss-modules</h1>\r\n<article class=\"_article_xkpkl_10\">A PostCSS plugin to use CSS Modules everywhere</article>\r\n```\r\n\r\n\r\n## May I see the plugin in action?\r\nSure! Take a look at the [example](https://github.com/outpunk/postcss-modules-example).\r\n\r\nSee [PostCSS] docs for examples for your environment and don't forget to run\r\n```\r\nnpm install --save-dev postcss-modules\r\n```\r\n\r\n[FileSystemLoader]: https://github.com/css-modules/css-modules-loader-core/blob/master/src/file-system-loader.js\r\n","maintainers":[{"name":"cameron-martin","email":"cameronmartin123@gmail.com"}],"time":{"modified":"2022-06-12T15:38:00.152Z","created":"2016-09-29T14:03:17.890Z","0.5.2":"2016-09-29T14:03:17.890Z","0.5.3":"2016-09-29T14:20:54.612Z"},"homepage":"https://github.com/css-modules/postcss-modules#readme","keywords":["postcss","css","postcss-plugin","modules","css modules","components"],"repository":{"type":"git","url":"git+https://github.com/css-modules/postcss-modules.git"},"author":{"name":"Alexander Madyankin","email":"alexander@madyankin.name"},"bugs":{"url":"https://github.com/css-modules/postcss-modules/issues"},"license":"MIT","readmeFilename":"README.md"}