{"id":13805771,"url":"https://github.com/jeffjewiss/ember-cli-postcss","last_synced_at":"2025-04-05T11:08:07.594Z","repository":{"id":29360367,"uuid":"32894843","full_name":"jeffjewiss/ember-cli-postcss","owner":"jeffjewiss","description":"🔥 Postcss for Ember","archived":false,"fork":false,"pushed_at":"2023-03-15T04:48:50.000Z","size":17089,"stargazers_count":110,"open_issues_count":18,"forks_count":25,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-29T10:05:45.710Z","etag":null,"topics":["css-parser","ember","ember-addon","ember-cli-postcss","plug-ins","postcss"],"latest_commit_sha":null,"homepage":"https://jeffjewiss.github.io/ember-cli-postcss/","language":"Handlebars","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":"rwieruch/nextjs-redux-firebase-authentication","license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jeffjewiss.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2015-03-25T22:33:13.000Z","updated_at":"2024-05-30T02:12:22.000Z","dependencies_parsed_at":"2024-01-09T05:01:21.964Z","dependency_job_id":"fd04f59b-c7f7-462b-aa4e-dcca167f1902","html_url":"https://github.com/jeffjewiss/ember-cli-postcss","commit_stats":{"total_commits":877,"total_committers":27,"mean_commits":32.48148148148148,"dds":0.7103762827822121,"last_synced_commit":"e5b1297859a755ea41bf9fafbb83a56ee63038c2"},"previous_names":[],"tags_count":43,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jeffjewiss%2Fember-cli-postcss","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jeffjewiss%2Fember-cli-postcss/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jeffjewiss%2Fember-cli-postcss/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jeffjewiss%2Fember-cli-postcss/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jeffjewiss","download_url":"https://codeload.github.com/jeffjewiss/ember-cli-postcss/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247325693,"owners_count":20920714,"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-parser","ember","ember-addon","ember-cli-postcss","plug-ins","postcss"],"created_at":"2024-08-04T01:01:04.723Z","updated_at":"2025-04-05T11:08:07.570Z","avatar_url":"https://github.com/jeffjewiss.png","language":"Handlebars","funding_links":[],"categories":["Packages"],"sub_categories":["CSS \u0026 etc"],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"tests/dummy/public/postcss.svg\" alt=\"Postcss Logo\"\u003e\n\u003c/div\u003e\n\n\u003ch1 align=\"center\"\u003eEmber CLI Postcss\u003c/h1\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \u003ca href=\"https://github.com/jeffjewiss/ember-cli-postcss/actions?query=workflow%3ACI\"\u003e\u003cimg src=\"https://github.com/jeffjewiss/ember-cli-postcss/workflows/CI/badge.svg\" alt=\"Build Status\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/ember-cli-postcss\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/ember-cli-postcss.svg\" alt=\"npm version\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/ember-cli-postcss\"\u003e\u003cimg src=\"https://img.shields.io/npm/dm/ember-cli-postcss.svg\" alt=\"Monthly Downloads\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/ember-cli-postcss\"\u003e\u003cimg src=\"https://img.shields.io/npm/dt/ember-cli-postcss.svg\" alt=\"Total Downloads\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://emberobserver.com/addons/ember-cli-postcss\"\u003e\u003cimg src=\"https://emberobserver.com/badges/ember-cli-postcss.svg\" alt=\"Ember Observer Score\"\u003e\u003c/a\u003e\n\u003c/div\u003e\n\n\u003cbr\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \u003cp\u003eUse \u003ca href=\"http://github.com/postcss/postcss\"\u003epostcss\u003c/a\u003e to process your \u003cstrong\u003ecss\u003c/strong\u003e with a large selection of \u003ca href=\"http://postcss.parts\"\u003eplug-ins\u003c/a\u003e.\u003c/p\u003e\n\u003c/div\u003e\n\n\u003cbr\u003e\n\u003cbr\u003e\n\u003cbr\u003e\n\nInstallation\n------------\n\n```shell\nember install ember-cli-postcss\n```\n\nCompatibility\n-------------\n\nDue to changes in the plugin API of Postcss V8 some plugins will need to be updated after upgrading Postcss. This should be as simple as updating this package from v6 to v7, however compatibility is not guaranteed.\n\n- V7 ember-cli-postcss -\u003e Postcss V8\n- V6 ember-cli-postcss -\u003e Postcss V7\n\nUsage\n-----\n\nThe add-on can be used in two ways:\n\n* on individual files, referred to as “compile”\n* on all CSS files, referred to as “filter”\n\n*Note: it’s possible to use both compile and filter.*\n\n*Additional Note: this app is compatible with Glimmer JS*\n\n#### Compile\n\nThis step will look for either `app.css` or `\u003cproject-name\u003e.css` in your styles directory. Additional files to be processed can be defined in the output paths configuration object for your application:\n\n```javascript\nconst app = new EmberApp(defaults, {\n  outputPaths: {\n    app: {\n      html: 'index.html',\n      css: {\n        'app': '/assets/app.css',\n        'print': '/assets/print.css'\n      }\n    }\n  }\n}\n```\n\n#### Filter\n\nThis step will run at the end of the build process on all CSS files, including the merged `vendor.css` file and any CSS imported into the Broccoli tree by add-ons.\n\nFiles can be white-listed and/or black-listed by using the respective include and exclude options. Each accepts an array of file globs, which are then passed on to Broccoli Funnel. An example can be seen in the sample configuration below.\n\n### Configuring Plug-ins\n\nThere are two steps to setting up [postcss](https://github.com/postcss/postcss) with `ember-cli-postcss`:\n\n1. install and require the node modules for any plug-ins\n2. provide the node module and plug-in options as a `postcssOptions` object in `ember-cli-build.js`\n\nThe `postcssOptions` object should have a “compile” and/or “filter” property, which will have the properties `enabled` and `plugins`, which is an array of objects that contain a `module` property and an `options` property:\n\n#### Browser Targets\n\nSome postcss plug-ins, like autoprefixer, allow you to configure which browsers to target for transpilation. When using Ember CLI \u003e= 2.13.0, the browser targets configuration found in the file `config/targets.js` will be added to each plug-in’s options (as `options.browsers`). This browser list can be overwritten on a plug-in by plug-in basis. You can learn more about the targets feature on the [Ember.js blog](https://emberjs.com/blog/2017/04/29/ember-2-13-released.html#toc_targets).\n\n```javascript\npostcssOptions: {\n  compile: {\n    enabled: true, // defaults to true\n    browsers: ['last 3 versions'], // this will override config found in config/targets.js\n    plugins: [\n      {\n        module: \u003cmodule\u003e,\n        options: {\n          ...\n        }\n      }\n    ]\n  },\n  filter: {\n    enabled: true, // defaults to false\n    map: false, // defaults to inline, false in production\n    browsers: ['last 3 versions'], // this will override config found in config/targets.js\n    include: ['styles/*.css'],\n    exclude: ['vendor/bootstrap/**/*'],\n    processTrees: ['css'],\n    plugins: [\n      {\n        module: \u003cmodule\u003e,\n        options: {\n          ...\n        }\n      }\n    ]\n  }\n}\n```\n\n#### Process Trees\n\nWhen using the filter version of this add-on the default configuration is now to\nonly run on the `css` tree. This will mean that the add-on is only run when CSS\nfiles are changed. If you need the process to run on other trees or when other\nfiles are changed, you should update the `processTrees` option to include more\ntrees from the following list: `[template, js, css, test, all,]`\n\nExample\n-------\n\nInstall the autoprefixer plug-in:\n\n```shell\nnpm i --save-dev autoprefixer\n```\n\nSpecify some plug-ins in your `ember-cli-build.js`:\n\n```javascript\nconst EmberApp = require('ember-cli/lib/broccoli/ember-app');\nconst autoprefixer = require('autoprefixer');\n\nmodule.exports = function (defaults) {\n  const app = new EmberApp(defaults, {\n    postcssOptions: {\n      compile: {\n        enabled: false,\n      },\n      filter: {\n        enabled: true,\n        plugins: [\n          {\n            module: autoprefixer,\n            options: {\n              browsers: ['last 2 versions'] // this will override the config, but just for this plugin\n            }\n          }\n        ]\n      }\n    }\n  });\n  return app.toTree();\n};\n```\n\nCompile Caching\n---------------\n\nWhen using the compile method, the default list of file extensions for caching is set to `.css, .scss, .sass, .less` for faster incremental builds. If you are using a parser or filetype not in the list you will want to add the file extension as a regex to the `cacheInclude` option.\n\nIf you are using something like **Tailwind** or a postcss plugin with a JS config file that you would like to trigger a rebuild, you will need to update the options to cache JS files: `cacheInclude: [/.*\\.(css|scss|sass|less|js)$/],` or more specifically `cacheInclude: [/.*\\.(css|scss)$/, /.tailwind\\.js$/]`.\n\nIf you are using something like **PurgeCSS** and would like postcss to rebuild when template files are updated, you will need to update the options to cache HBS files: `cacheInclude: [/.*\\.(css|scss|sass|less|hbs)$/],`. However, in most cases PurgeCSS should only be run for a production build and this shouldn't be necessary.\n\n## Example\n\n```javascript\npostcssOptions: {\n  compile: {\n    enabled: true,\n    cacheExclude: [],\n    cacheInclude: [/.*\\.(css|scss|sass|less)$/]\n  }\n}\n```\n\n\nDeveloping Addons\n-----------------\n\nIf you are developing an addon and would like to use `ember-cli-postcss` to process the CSS to automatically be included in the `vendor.css` of Ember applications consuming the addon, there are 3 steps to follow.\n\n1. create your styles in `addon/styles/addon.css` (you can import other CSS files if a postcss import plugin is installed)\n2. Add a \"before\" option under `ember-addon` key in `package.json`\n```\n// package.json\n  ...\n  \"ember-addon\": {\n    \"before\": [\n      \"ember-cli-postcss\"\n    ],\n    \"configPath\": \"tests/dummy/config\"\n  },\n  ...\n```\n\n3. configure your addon’s options to process postcss:\n\n```javascript\n// index.js\nconst CssImport = require('postcss-import')\nconst PresetEnv = require('postcss-preset-env');\n\nmodule.exports = {\n  name: require('./package').name,\n  included: function(app) {\n    this._super.included.apply(this, arguments);\n    app.options = app.options || {};\n    app.options.postcssOptions = {\n      compile: {\n        enabled: true,\n        plugins: [\n          { module: CssImport },\n          {\n            module: PresetEnv,\n            options: { stage: 3 }\n          }\n        ]\n      }\n    }\n  },\n  ...\n};\n```\n\nMigrating from other Processors\n-------------------------------\n\nIf you’d like to migrate a project from one of the other processors, such as Less, Sass, or Stylus, you can configure Postcss with an appropriate parser and set of plugins that provides an equivalent set of features.\n\nThis then allows you to use additional Postcss plugins at the end of the compilation to continue transforming your styles for more powerful control of authoring styles in your application. This also plays nicely with [ember-component-css](https://github.com/ebryn/ember-component-css).\n\nSo far this migration process has been tested when switching from Sass.\n\n\n### Switching from Sass\n\nOne common use case is to transition from using Sass to Postcss or using them both together. As of `ember-cli-postcss@3.7.0` this is possible with the right combination of options and plugins.\n\nThere are three key pieces of configuration:\n\n1. Set the parser to `postcss-scss`\n2. Configure the extension to match your files (ie. 'scss')\n3. Use `@csstools/postcss-sass` as the first plugin\n\nYour configuration options in `ember-cli-build.js` would contain the following options for this addon:\n\n```javascript\n  postcssOptions: {\n    compile: {\n      extension: 'scss',\n      enabled: true,\n      parser: require('postcss-scss'),\n      plugins: [\n        {\n          module: require('@csstools/postcss-sass'),\n          options: {\n            includePaths: [\n              'node_modules/tachyons-sass',\n            ],\n          },\n        },\n        ...\n      ],\n    },\n    ...\n  }\n```\n\nThis allows your to switch your CSS processing pipeline to use postcss without being hugely disruptive as you can keep the Sass features and `.scss` or `.sass` file extension. The importing feature of `@csstools/postcss-sass` will also look for `.css` files, so you can choose to gradually rename your files from Sass partials `_\u003cfilename\u003e.scss` to `\u003cfilename\u003e.css` without breaking anything.\n\nIf your goal is to completely move away from using Sass features you can remove the parser, remove the sass plugin, use an import plugin that fits your needs and ensure that your files have the `.css` extension.\n\nExperimental Features\n---------------------\n\n### Custom Properties Service\n\nCSS variables are now supported by many major browsers. The values of these variables can be accessed, set, and removed using JavaScript. This addon now exports a service, which provides methods to work with CSS variables. Each method is a wrapper around the browser API, which includes a check for browser support before executing.\n\nThe service provides 3 methods:\n\n1. `getVal ({ element = docEl, variableName })`\n2. `setVal ({ element = docEl, variableName, variableValue })`\n3. `removeVal ({ element = docEl, variableName })`\n\nA Contrived Example:\n\n```javascript\nimport { inject } from '@ember/service'\n\nexport default \u003cember object\u003e.extend({\n  customProperties: inject(),\n  ...\n\n  nightMode() {\n    this.get('customProperties').setVal({variableName: '--background', variableValue: 'black'})\n    this.get('customProperties').setVal({variableName: '--text', variableValue: 'white'})\n  },\n\n  dayMode() {\n    this.get('customProperties').setVal({variableName: '--background', variableValue: 'white'})\n    this.get('customProperties').setVal({variableName: '--text', variableValue: 'black'})\n  },\n})\n```\n\n*Note: if you are using postcss-custom-properties, ensure you configure the option `{ preserve: true }`*\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjeffjewiss%2Fember-cli-postcss","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjeffjewiss%2Fember-cli-postcss","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjeffjewiss%2Fember-cli-postcss/lists"}