index.html usemin {.tmp,app} css hint causes duplicate styles in dist/styles/main.css

[notbrain]

In generator-angular / templates / common / index.html

<!-- build:css({.tmp,app}) styles/main.css -->
<link rel="stylesheet" href="styles/main.css">
<!-- endbuild -->

The {.tmp,app} part causes the resulting dist/styles/<hash>.main.css to be completely duplicated within itself. Works fine using

<!-- build:css styles/main.css -->

[cebor]

Oh thats right, same here.

<!-- build:css(.tmp) styles/main.css -->

This should fix it correctly.

[notbrain]

Does the (.tmp) need to be supplied explicitly? There is not one for the preceding vendor.css build hints and it seems to pick those up without specifying (.tmp). Am I not understanding something? Or by default does that pull from app/styles instead of .tmp/styles, since custom main.css might need further processing from .tmp and it doesn't matter for vendor side (and copying from app/styles is fine)?

[cebor]

Yes, by default it will pick up your styles from app/styles, when you want to use the autoprefixer you must specify the (.tmp).

[eddiemonge]

I don't see the styles being duplicated anywhere. Can you give an example?

[facundocabrera]

@eddiemonge you could easily reproduce the problem doing the following steps:

1. yo angular cssduplication

2. [?] Would you like to use Sass (with Compass)? No

3. [?] Would you like to include Bootstrap? Yes

4. [?] Which modules would you like to include? Just include all

5. Edit the file app/styles/main.css

   .searchme {
     width: 100px;
   }

6. grunt build

7. open dist/styles/<hash>.main.css and you should see something like:

   .searchme{width:100px}.searchme{width:100px}

Hope this help to merge the pull request with the fix 😄

[eddiemonge]

Please help to verify the fixes resolve the issues you have been having. You will need to test using the latest git code. Here are the instructions on how to do that:

• cd to a testing directory, preferable an empty one

  git clone [email protected]:yeoman/generator-angular.git
  cd generator-angular
  npm link
  cd ..
  mkdir testfonts && cd $_
  yo angular

• Test the generator with different prompts.

Let me know if you have any issues by replying here or opening a new issue.