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.}