chore(css): css preprocessors support enhancement

[jkuri]

This addon allows "global" CSS extension language files in public/ dir which are then merged to dist/app.css and that file can be included in index.html.

This webpack build runs concurrently with the main build compilation.

[sirajc]

no hash in output filename, hash will be required in prod build

[sirajc]

@jkuri CSS/SASS files are part of source for project and it would be good if we have that under src folder, something like src/assets

[Meligy]

+1 to @sirajc for not using public. I think, as per the ember-cli convention, the public folder should have no processors other than copying aso-is into the root of the website.

[clydin]

Instead of a fixed location, how about a configuration setting for global styles? Ideally the option would accept an array of files with glob support. This allows public, as well as src/assets, or just an individual file. It could also allow pulling in styles directly from a package as well.

Where to put the option is the question. Does it fit in angular-cli.json? Or would it be better to add a separate config file for project specific build options?

[jkuri]

I'll update this in the next hours, but it is not quite sure this will be merged.

[filipesilva]

We talked a bit more about this functionality, and this is the current plan:

• add the following property to config

{
// ...
"apps": [
{
// ...
styles: {
"src/style.css": { output: "style.css", autoImported: true }
}
}
],

• add file on sourceDir, maybe with a comment about css imports if the styleExt for the project is css
• add entry point on wepack config common using config to resolve
• add test that checks that global styles are included (see test for sass/etc for code you can copy paste)

[intellix]

We have component-name.css so why not index.css next to index.html?

[sirajc]

@jkuri public directory should be copied as is, in full. styles should be part of src

[jkuri]

thanks, reverted.

[jkuri]

@intellix you could change that in angular-cli.json, I'll write a documentation about it. Btw, just pushed to this.

[intellix]

shouldn't the file be: addon/ng2/blueprints/ng2/files/__path__/style.__styleext__ to support pre-processors as well?

[jkuri]

yes, thanks, was a long night.

[sirajc]

Great work @jkuri, Thanks..., with this we can define styles like

"apps": [
{
"main": "src/main.ts",
"tsconfig": "src/tsconfig.json",
"mobile": false,
"styles": [
"assets/vendor/paper.bootstrap.css",
"styles/index.scss"
]
}
]

👍

[jkuri]

@sirajc no problem. I still have some minor improvements to do with injecting styles and write tests but this, I think, would be it. Actually the config looks like:

"styles": {"src/style.css": {"output": "style.css","autoImported": true},"src/app.sass": {"output": "app.css","autoImported": true}}

but this will be noted in the readme for sure. In the meanwhile feel free to test this and report any bugs. Thanks.

[jkuri]

I managed to get mobile tests passing and working with app-shell prerender.
@filipesilva, @TheLarkInn please review.

[filipesilva]

Why is this removed?

[jkuri]

We have a custom plugin for that which injects .css files configured with autoImported: true into index.html. In this plugin we have also configuration for mobile support which generates content automactically (app-shell).

[jkuri]

this PR does not follow the proper design so I am closing it.

[sirajc]

@jkuri Should we discuss the design on #1459

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}