{"id":28740063,"url":"https://github.com/meteor-community-packages/meteor-postcss","last_synced_at":"2025-06-16T06:41:17.890Z","repository":{"id":44585709,"uuid":"45139123","full_name":"Meteor-Community-Packages/meteor-postcss","owner":"Meteor-Community-Packages","description":"PostCSS for Meteor","archived":false,"fork":false,"pushed_at":"2024-05-07T09:14:45.000Z","size":102,"stargazers_count":69,"open_issues_count":6,"forks_count":22,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-05-07T10:31:42.209Z","etag":null,"topics":["css","hacktoberfest","meteor","postcss"],"latest_commit_sha":null,"homepage":"https://packosphere.com/juliancwirko/postcss","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Meteor-Community-Packages.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["storytellercz","jankapunkt"],"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"lfx_crowdfunding":null,"custom":null}},"created_at":"2015-10-28T20:14:16.000Z","updated_at":"2024-05-07T10:31:47.224Z","dependencies_parsed_at":"2024-05-07T10:31:45.236Z","dependency_job_id":"688d65c7-6406-407b-bccc-225bef6e8553","html_url":"https://github.com/Meteor-Community-Packages/meteor-postcss","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"purl":"pkg:github/Meteor-Community-Packages/meteor-postcss","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Meteor-Community-Packages%2Fmeteor-postcss","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Meteor-Community-Packages%2Fmeteor-postcss/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Meteor-Community-Packages%2Fmeteor-postcss/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Meteor-Community-Packages%2Fmeteor-postcss/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Meteor-Community-Packages","download_url":"https://codeload.github.com/Meteor-Community-Packages/meteor-postcss/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Meteor-Community-Packages%2Fmeteor-postcss/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260115279,"owners_count":22961027,"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":["css","hacktoberfest","meteor","postcss"],"created_at":"2025-06-16T06:41:15.687Z","updated_at":"2025-06-16T06:41:17.846Z","avatar_url":"https://github.com/Meteor-Community-Packages.png","language":"JavaScript","funding_links":["https://github.com/sponsors/storytellercz","https://github.com/sponsors/jankapunkt"],"categories":[],"sub_categories":[],"readme":"# PostCSS Plugin For Meteor\n\nMeteor CSS Minifier with [PostCSS](https://github.com/postcss/postcss) processing.\n\nThis package allows you to use PostCSS plugins with **.css files**. You can add your custom plugins by adding Npm packages using `package.json`. You can also use your favourite preprocessor side by side with this package. It allows you to enable many PostCSS plugins, for example **Autoprefixer** for all preprocessors you use. (Of course you can use it whithout any preprocessor too).\n\nRead more below...\n\n- Blog post: [Some things you may think about PostCSS... and you might be wrong](http://julian.io/some-things-you-may-think-about-postcss-and-you-might-be-wrong/)\n- Blog post: [How to use PostCSS in Meteor](http://julian.io/how-to-use-postcss-in-meteor/)\n- Blog post: [How to use CSS linter in Meteor](https://medium.com/@juliancwirko/how-to-use-css-linter-in-meteor-c60b2f24f969) (example of PostCSS plugin usage)\n\n## Usage\n\n1. Remove `standard-minifier-css` package\n\n   ```sh\n   meteor remove standard-minifier-css\n   ```\n\n2. Add `juliancwirko:postcss` package\n\n   ```sh\n   meteor add juliancwirko:postcss\n   ```\n\n3. Add peer NPM dependencies\n\n   ```sh\n   meteor npm install --save-dev postcss@8.3.5 postcss-load-config@3.1.0\n   ```\n\n4. Add PostCSS plugins:\n\n   From Meteor 1.3 you can use standard NPM `package.json`. You can add PostCSS plugins in `devDependencies`. You can also install it like `npm install autoprefixer --save-dev`.\n\n   Then you need to prepare PostCSS configuration under the `postcss.plugins`.\n\n   **Important:** Even if you don't want to provide any options you should list your PostCSS plugins in `postcss.plugins` key. This works that way because order here is important. For example 'postcss-easy-import' should be always first PostCSS plugin on the list and 'autoprefixer' should be the last PostCSS plugin on the list. And devDependencies items can be automatically reordered when installing new by `npm install ... --save-dev`.\n\n   See example:\n\n   **package.json (example):**\n\n   ```json\n   {\n     \"name\": \"demo PostCSS app\",\n     \"version\": \"1.0.0\",\n     \"description\": \"\",\n     \"author\": \"\",\n     \"devDependencies\": {\n       \"autoprefixer\": \"^6.5.1\",\n       \"mocha\": \"^3.1.2\",\n       \"postcss\": \"^6.0.22\",\n       \"postcss-easy-import\": \"^1.0.1\",\n       \"postcss-load-config\": \"^1.2.0\",\n       \"postcss-nested\": \"^1.0.0\",\n       \"postcss-simple-vars\": \"^3.0.0\",\n       \"rucksack-css\": \"^0.8.6\"\n     },\n     \"postcss\": {\n       \"plugins\": {\n         \"postcss-easy-import\": {},\n         \"postcss-nested\": {},\n         \"postcss-simple-vars\": {},\n         \"rucksack-css\": {},\n         \"autoprefixer\": {\"browsers\": [\"last 2 versions\"]}\n       }\n     }\n   }\n   ```\n\n   Make sure that the plugins that you list in \"plugins\" are also in \"devDependencies\" as well. You may not need the plugins in this example, so please include them only if you need them.\n\n   Remember to run `npm install` or `npm update` after changes.\n\n   You can add more plugins here.\n\n   If you want to change something in postcss config later, you should restart your app and also change any .css file to rerun build plugin.\n\n5. Create your standard `.css` files with additional features according to PostCSS plugins you use.\n\n## PostCSS parsers\n\nFrom version 1.0.0 you can configure parser for PostCSS. To do this you can add `parser` key in the `package.json` file under the `postcss` key. Let's see an example:\n\n```json\n{\n  \"name\": \"demo PostCSS app\",\n  \"version\": \"1.0.0\",\n  \"description\": \"\",\n  \"author\": \"\",\n  \"devDependencies\": {\n    \"autoprefixer\": \"^6.5.1\",\n    \"postcss-safe-parser\": \"^2.0.0\"\n  },\n  \"postcss\": {\n    \"plugins\": {\n      \"autoprefixer\": {\"browsers\": [\"last 2 versions\"]}\n    },\n    \"parser\": \"postcss-safe-parser\"\n  }\n}\n```\n\nAs you can see we use here `postcss-safe-parser` which will repair broken css syntax. This is just one example. You can find a list of parsers here: [https://github.com/postcss/postcss#syntaxes](https://github.com/postcss/postcss#syntaxes). You can use `postcss-scss` parser or `postcss-less` parser.\n\n## Exclude Meteor Packages\n\nBecause PostCSS processes all CSS files in Meteor, it will also process CSS files from Meteor packages. This is good in most cases and will not break anything, but sometimes it could be problematic.\n\nIf you have installed a package which is problematic and PostCSS plugins can't process the CSS files from that package you can exclude it in the process. See for example this issue: [#14](https://github.com/juliancwirko/meteor-postcss/issues/14). In this case you need to exclude `constellation:console` package because it uses not standard CSS in its files. PostCSS plugin can't process that file. You can exclude it so it will be not processed by PostCSS, but it will be still bundled as is.\n\nIf you want to exclude a package you need to use `postcss.excludedPackages` key, see the example below:\n\n```json\n{\n  \"name\": \"demo PostCSS app\",\n  \"version\": \"1.0.0\",\n  \"description\": \"\",\n  \"author\": \"\",\n  \"devDependencies\": {\n    \"autoprefixer\": \"^6.5.1\",\n    \"postcss-safe-parser\": \"^2.0.0\"\n  },\n  \"postcss\": {\n    \"plugins\": {\n      \"autoprefixer\": {\"browsers\": [\"last 2 versions\"]}\n    },\n    \"parser\": \"postcss-safe-parser\",\n    \"excludedPackages\": [\"constellation:console\"]\n  }\n}\n```\n\n**Remember that you should provide a package name which contains a problematic CSS file and not global wrapper package** In this example you want to install `babrahams:constellation` but in fact the problematic package is `constellation:console` which is installed with `babrahams:constellation`. You'll find which package makes troubles by looking into the consolle errors. For example here we have something like:\n\n```sh\nWhile minifying app stylesheet:\n   packages/constellation_console/client/Constellation.css:118:3: postcss-simple-vars:\n   /workspace/meteor/postcss-demo/packages/constellation_console/client/Constellation.css:118:3: Undefined variable $c1\n\n   Css Syntax Error.\n\n   postcss-simple-vars: /workspace/meteor/postcss-demo/packages/constellation_console/client/Constellation.css:118:3: Undefined variable $c1\n   background-image: -o-linear-gradient(#000, #000);\n   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$c1', endColorstr='$c2',GradientType=0);\n   ^\n   color: rgba(255, 255, 255, 0.6);\n```\n\nSo we know that this is the problem with `constellation:console` package.\n\n## Imports with PostCSS\n\nYou can use imports with [postcss-easy-import](https://github.com/postcss/postcss-easy-import) plugin. **Remember that postcss-easy-import plugin should be loaded first (so put it on the first place in the packages.json file under the 'postcss.plugins' key)**.\n\nYou need to use `.import.css` extension and standard import like with preprocessors `@import \"my-file.import.css\";` Files with `.import.css` will be ommited by css minifier from this package. You can also put them in an `imports` folder (from Meteor 1.3). Also read more about `postcss-easy-import` and `postcss-import` which is a part of the first one.\n\nImports from Meteor packages will not work. But there is a good news too. from Meteor 1.3 you can use standard Npm packages and imports from `node_modules` should work. So you will be able to import css files from instaled Npm packages. You will be able to do something like: `@import 'my-npm-lib/styles.css'`;\n\n## Usage with preprocessors like Stylus and Sass\n\nYou can use it side by side with your favourite preprocessor. There is an example in the demo app.\n\nYou should be able to use PostCSS plugins syntax in the .styl or .scss files too. (Tested only with Stylus).\n\n## Alternative configuration locations\n\nThis package uses [postcss-load-config](https://github.com/michael-ciniawsky/postcss-load-config) to load\nconfiguration for PostCSS. This allows you to put PostCSS configuration into alternative locations and not\njust `package.json`. An interesting option is to put configuration into `.postcssrc.js` file in the root\ndirectory of your app, which allows you to dynamically decide on the configuration. Example:\n\n```js\nmodule.exports = (ctx) =\u003e {\n  // This flag is set when loading configuration by this package.\n  if (ctx.meteor) {\n    const config = {\n      plugins: {\n        'postcss-easy-import': {},\n      },\n    };\n\n    if (ctx.env === 'production') {\n      // \"autoprefixer\" is reported to be slow,\n      // so we use it only in production.\n      config.plugins.autoprefixer = {\n        browsers: [\n          'last 2 versions',\n        ],\n      };\n    }\n\n    return config;\n  }\n  else {\n    return {};\n  }\n};\n```\n\n## Demo test repo\n\nCheck out the demo repo. This is the best way of learning.\n\n- [https://github.com/juliancwirko/meteor-postcss-test](https://github.com/juliancwirko/meteor-postcss-test)\n- [Discussion and updates](https://forums.meteor.com/t/postcss-package-and-meteor-build-plugin-questions/12454?u=juliancwirko)\n\n## License\n\nMIT\n\n## Also check out\n\n- [PostCSS and Bootstrap 4 with Scss from Npm package - experiment](https://github.com/juliancwirko/meteor-bootstrap-postcss-test)\n- [sGrid - Flexbox Grid System for Stylus with PostCSS](https://packosphere.com/juliancwirko/s-grid)\n\n## Changelog\n\n- v2.0.7 Update postcss to 8.3.x and postcss-load-config to 3.1.x, other dependencies updated as well.\n- v2.0.6 Update tmeasday:check-npm-versions dep to 1.0.1\n- v2.0.5 Update/fix dependency checks\n- v2.0.3 Restoring the use of app-module-path\n- v2.0.2 Moved to use peer NPM dependencies\n- v2.0.1 Bumping PostCSS to 6.0.22\n- v2.0.0 Started using postcss-load-config for loading configuration\n- v1.3.0 Bumping PostCSS to 6.0.17\n- v1.2.0 Updates (works quite well with Meteor 1.4.2)\n- v1.1.1 Removed `fs.existsSync` call because of [#18](https://github.com/juliancwirko/meteor-postcss/issues/18)\n- v1.1.0 Exclude Meteor package option [#14](https://github.com/juliancwirko/meteor-postcss/issues/14)\n- v1.0.0 Version bump for Meteor 1.3\n- v1.0.0-rc.12 Version bump for Meteor 1.3 rc 12\n- v1.0.0-rc.10 Version bump for Meteor 1.3 rc 10\n- v1.0.0-rc.4 Version bump for Meteor 1.3 rc 4\n- v1.0.0-rc.2 Version bump for Meteor 1.3 rc 2\n- v1.0.0-beta.11 Versions bump for Meteor 1.3 beta 11\n- v1.0.0-beta.1 Modifications for Meteor 1.3 beta 4\n- v0.2.5 Removed Promise Polyfill [#4](https://github.com/juliancwirko/meteor-postcss/pull/4)\n- v0.2.4 Catch PostCSS 'CssSyntaxError' [#3](https://github.com/juliancwirko/meteor-postcss/issues/3)\n- v0.2.3 PostCSS (v5.0.12) version bump\n- v0.2.2 PostCSS (v5.0.11) version bump - [performance improvements](https://evilmartians.com/chronicles/postcss-1_5x-faster)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmeteor-community-packages%2Fmeteor-postcss","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmeteor-community-packages%2Fmeteor-postcss","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmeteor-community-packages%2Fmeteor-postcss/lists"}