Comments (10)
Thanks @pixelhandler, yeah the refactor of the add-on should support your use case as setup in the example app you linked to without having to use broccoli-postcss
in the custom add-on. If you use the new filter method in the refactor, it should run on any styles that are added to the main app broccoli tree and also to the vendor styles as well.
Do you know when you'll have a chance to give this a try? I'd like to release the new version soon, but was really hoping someone could try it on projects other than my own. Thanks again!
from ember-cli-postcss.
Hi Bill, sorry for taking so long to respond. The addon in its current state isn't really setup to build styles that are imported from other addons.
However, I've been working on refactoring the addon to add some basic tests and to add support for using postcss as a compile step (it's current form) and also as a filter/postprocessor step, which should happen after other processors run and addons add files to the broccoli tree or vendor file.
Could you please try out this update and see if it works for your use case? I've updated the readme with new instructions here: https://github.com/jeffjewiss/ember-cli-postcss/tree/refactor and you should be able to install it with ember-cli-postcss: "jeffjewiss/ember-cli-postcss#refactor"
in your package.json.
My intent is to publish this refactored version as V3.0, but I'd like to see if it solves your use case first.
Thanks!
from ember-cli-postcss.
@jeffjewiss thanks for the update. I'll try out that branch soon. Regarding my use case, I ended up blogging here ... https://pixelhandler.com/posts/developing-ember-addons-next-generation-css-with-postcss
Also here are some example apps that share an addon with styles https://gitlab.com/u/pixelhandler/projects this is the styles addon https://gitlab.com/pixelhandler/xyz-styles
from ember-cli-postcss.
@jeffjewiss I have not been able to lend time to this effort lately, sorry about that. Perhaps try this repo out, https://gitlab.com/pixelhandler/xyz-styles its an addon, replace the custom use of broccoli-postcss with the ember-cli-postcss/tree/refactor features. Then try and use the xyz-styles addon in https://gitlab.com/pixelhandler/xyz-foundation that's what I plan to try.
from ember-cli-postcss.
Any updates on this? Trying to determine if/when I should move away from SASS.
from ember-cli-postcss.
@rwwagner90 for Addons I have been using broccoli-postcss
, autoprefixer
, postcss-cssnext
, postcss-import
in my build see https://gitlab.com/pixelhandler/xyz-styles/blob/master/index.js#L24-53
from ember-cli-postcss.
@rwwagner90 do you mind explaining your use case in a bit more detail?
My understanding is that add-on CSS gets added to the vendor styles tree, so if you use V3 of this add-on and specify some plugins for the filter option they should get applied to the styles in the vendor tree at the end of the build process.
Alternatively, if you're looking to organize your CSS files and import them you can do so using the postcss-import
plug-in and import files from within your project or from NPM modules and organize your styles that way.
from ember-cli-postcss.
@jeffjewiss it's been quite awhile since I first looked into this, so I am not sure exactly what didn't work. I have various use cases, but the base case is having an addon's css correctly useable. For example, I have a navbar addon, that needs styles to work. So, the styles need to end up in the vendor tree for sure.
from ember-cli-postcss.
@rwwagner90 thanks for replying. The version of ember-cli-postcss that supports a filter method for working with the vendor tree was published a week or two ago.
How do you currently support this with a Sass workflow? Do you need to do anything special in your addons or do they it work as is?
Thanks!
from ember-cli-postcss.
I'm going to close this issue since it should be resolved with the addition of the filter/compile methods and @ef4's work to ensure that the configuration is correct for scoping the settings to add-ons.
If the latest version doesn't work for your use case, please open a new issue or comment here and I'll re-open this one. Thanks!
from ember-cli-postcss.
Related Issues (20)
- Embroider and postcss-import can't find file in node_modules? HOT 1
- Does not work with postcss 8 HOT 4
- apps, addons, and tailwind specificity HOT 3
- Infinite loop with postcss-color-hex-alpha HOT 2
- Embroider compatibility issue (filter) HOT 2
- Cannot use SCSS in version 7 HOT 10
- How do you run css compilation when templates are updated? HOT 23
- Ember canary error - Uncaught ReferenceError: Ember is not defined HOT 3
- Vulnerability in merge package before 2.1.1 HOT 1
- Deprecation warnings with Ember 3.27 HOT 14
- Addon using @tailwindcss/jit: ENOENT: no such file or directory, stat 'assets/vendor.css' HOT 1
- `yarn outdated` is Confusing HOT 2
- Cannot use `cssnano` in version 7 HOT 6
- ember-cli-postcss v7.1.0 has a breaking change as it's requires Node.js 14 now HOT 5
- ChainAlert: npm package release (7.2.0) has no matching tag in this repo
- Node 12 dropped too early? HOT 1
- Filter deprecation warnings HOT 1
- How do I add postcss-nested to configuration? HOT 1
- [Bug]: Conflicting with ember-cli-sass HOT 2
- how to apply a specific postcss plugin to only a specific set of files
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from ember-cli-postcss.