{"id":19653039,"url":"https://github.com/csstools/postcss-module-import","last_synced_at":"2025-04-28T17:31:15.392Z","repository":{"id":66028396,"uuid":"62366485","full_name":"csstools/postcss-module-import","owner":"csstools","description":"Inline import statements as CSS Modules","archived":true,"fork":false,"pushed_at":"2016-07-01T18:19:26.000Z","size":4,"stargazers_count":6,"open_issues_count":0,"forks_count":2,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-04-21T21:39:45.989Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/csstools.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2016-07-01T05:45:50.000Z","updated_at":"2024-12-27T18:42:49.000Z","dependencies_parsed_at":"2023-07-16T18:16:36.408Z","dependency_job_id":null,"html_url":"https://github.com/csstools/postcss-module-import","commit_stats":{"total_commits":1,"total_committers":1,"mean_commits":1.0,"dds":0.0,"last_synced_commit":"0753716c3d58671aff014ecce936097fe35f0bae"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/csstools%2Fpostcss-module-import","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/csstools%2Fpostcss-module-import/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/csstools%2Fpostcss-module-import/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/csstools%2Fpostcss-module-import/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/csstools","download_url":"https://codeload.github.com/csstools/postcss-module-import/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251215770,"owners_count":21553877,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-11T15:12:59.547Z","updated_at":"2025-04-28T17:31:15.369Z","avatar_url":"https://github.com/csstools.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Module Import\n\n\u003ca href=\"https://github.com/postcss/postcss\"\u003e\u003cimg src=\"https://postcss.github.io/postcss/logo.svg\" alt=\"PostCSS Logo\" width=\"80\" height=\"80\" align=\"right\"\u003e\u003c/a\u003e\n\n[![npm][npm-image]][npm-url] [![bower][bower-image]][bower-url]\n[![ci][ci-image]][ci-url] [![gitter][gitter-image]][gitter-url]\n\n[Module Import] is a [PostCSS] plugin that inlines `@import` statements as [CSS\nModules] in CSS, giving you all the modular benefits while also maintaining a\nseparation between style, markup, and functionality.\n\nModule Import also supports sugary imports like Sass and automatically looks\nfor stylesheets within npm and Bower packages. It can even generate files if\nthey don’t already exist to further reduce development time.\n\n```css\n/* before */\n\n@import \"module/_some-module\";\n@import \"module/_another-module\";\n\n/* before: module/_some-module.css */\n\n.container {\n\tbackground-color: red;\n}\n\n/* before: module/another-module.css */\n\n.container {\n\tbackground-color: blue;\n}\n\n/* after */\n\n._container_eosv8_1 {\n    background-color: red\n}\n._container_wpmzm_1 {\n    background-color: blue\n}\n```\n\n**Manifest JSON**\n\n```json\n{\n\t\"module/_some-module.css\": {\n\t\t\"container\": \"_container_eosv8_1\"\n\t},\n\t\"module/_another-module.css\": {\n\t\t\"container\": \"_container_wpmzm_1\"\n\t}\n}\n```\n\nNow your modules are mixed into the same file while preserving access to their\nparts.\n\n##### WordPress Example\n\n```php\n\u003c?php\n\n// get the path to the modules json\n$css_modules_path = get_template_directory() . '/assets/css/theme.json';\n\n// load the modules json\n$css_modules = json_decode( file_get_contents( $css_modules_path ), true );\n\n// get the modules names for a particular path\n$article_cn = $css_modules[ 'module/_main-article.css' ];\n\n?\u003e\n\u003carticle class=\"\u003c?php echo esc_attr( $article_cn['container'] ); ?\u003e\"\u003e\n    \u003ch1 class=\"\u003c?php echo esc_attr( $article_cn['title'] ); ?\u003e\"\u003eMy style is scoped.\u003c/h1\u003e\n\u003c/article\u003e\n```\n\n### Usage\n\nFollow these steps to use [Module Import].\n\nAdd [Module Import] to your build tool:\n\n```bash\nnpm install postcss-module-import --save-dev\n```\n\n##### Node\n\n```js\nrequire('postcss-module-import')({ /* options */ }).process(YOUR_CSS);\n```\n\n##### PostCSS\n\nAdd [PostCSS] to your build tool:\n\n```bash\nnpm install postcss --save-dev\n```\n\nLoad [Module Import] as a PostCSS plugin:\n\n```js\npostcss([\n    require('postcss-module-import')({ /* options */ })\n]);\n```\n\n##### Gulp\n\nAdd [Gulp PostCSS] to your build tool:\n\n```bash\nnpm install gulp-postcss --save-dev\n```\n\nEnable [Module Import] within your Gulpfile:\n\n```js\nvar postcss = require('gulp-postcss');\n\ngulp.task('css', function () {\n    return gulp.src('./css/src/*.css').pipe(\n        postcss([\n            require('postcss-module-import')({ /* options */ })\n        ])\n    ).pipe(\n        gulp.dest('./css')\n    );\n});\n```\n\n##### Grunt\n\nAdd [Grunt PostCSS] to your build tool:\n\n```bash\nnpm install grunt-postcss --save-dev\n```\n\nEnable [Module Import] within your Gruntfile:\n\n```js\ngrunt.loadNpmTasks('grunt-postcss');\n\ngrunt.initConfig({\n    postcss: {\n        options: {\n            processors: [\n                require('postcss-module-import')({ /* options */ })\n            ]\n        },\n        dist: {\n            src: 'css/*.css'\n        }\n    }\n});\n```\n\n### Options\n\n##### `plugins`\n\nType: `Array`  \nDefault: `[]`\n\nA list of PostCSS plugins to run on each `@import` before being processed by\nCSS Modules.\n\n##### `pluginsAfter`\n\nType: `Array`  \nDefault: `[]`\n\nA list of PostCSS plugins to run on each `@import` after being processed by\nCSS Modules.\n\n##### `importOpts`\n\nType: `Object`  \nDefault: `{}`\n\nThe options passed into the [PostCSS Partial Import] plugin.\n\n##### `moduleOpts`\n\nType: `Object`  \nDefault: `{}`\n\nThe options passed into the [PostCSS Modules] plugin.\n\n[bower-image]:  https://img.shields.io/bower/v/postcss-module-import.svg?style=flat-square\n[bower-url]:    https://libraries.io/bower/postcss-module-import\n[ci-image]:     https://img.shields.io/travis/jonathantneal/postcss-module-import.svg?style=flat-square\n[ci-url]:       https://travis-ci.org/jonathantneal/postcss-module-import\n[gitter-image]: https://img.shields.io/gitter/room/postcss/postcss.svg?style=flat-square\n[gitter-url]:   https://gitter.im/postcss/postcss\n[npm-image]:    https://img.shields.io/npm/v/postcss-module-import.svg?style=flat-square\n[npm-url]:      https://www.npmjs.com/package/postcss-module-import\n\n[Gulp PostCSS]:  https://github.com/postcss/gulp-postcss\n[Grunt PostCSS]: https://github.com/nDmitry/grunt-postcss\n[PostCSS]:       https://github.com/postcss/postcss\n\n[CSS Modules]: https://github.com/css-modules/css-modules\n[PostCSS Modules]: https://github.com/css-modules/postcss-modules#usage\n[PostCSS Partial Import]: https://github.com/jonathantneal/postcss-partial-import#options\n\n[Module Import]: https://github.com/jonathantneal/postcss-module-import\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcsstools%2Fpostcss-module-import","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcsstools%2Fpostcss-module-import","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcsstools%2Fpostcss-module-import/lists"}