Foundation-sites: [Abide] CSS from npm build does not work correctly for errors

[colinmackinlay]

How can we reproduce this bug?

1. create new Zurb template with "foundation new"
2. npm run start
3. change index.html in pages to be:
   <div class="row">
<div class="large-12 columns">
<form id="test" action="/" method="post" data-abide>
<label>Address line 1:
<input id="childaddress1" type="text" required
name="childaddress1" value="Test" size="25" />
<span class="form-error">Please complete this field</span>
</label>
</form>
</div>
</div>
4. view index.html from dist in browser. Abide correctly colours label, input field and error text with error colour
5. npm run build
6. view index.html from dist in browser i.e. with minimised css file. Only the input field is now coloured although error text does display

What did you expect to happen?
label and error text to still be coloured using production build

What happened instead?
they weren't coloured
Test case:
sorry - the error doesn't show in the min.css used in codepen. Attached are two copies of the dist folder which illustrate the effect with the two different css files. One from npm run start, the other from npm run build
dist.zip

[ncoden]

Hi @colinmackinlay,

Can you provide an online diff of the two CSS files using https://www.diffchecker.com/ ? It would be simpler.

[colinmackinlay]

https://www.diffchecker.com/79BbUxcO
Don't think that helps much!

[ncoden]

The error comes from a merge made by cssnano of the .is-invalid-label declaration with an invalid ...::placeholder declaration (::placeholder is not standard yet), making the whole final declaration ignored. I reported it at https://github.com/ben-eb/cssnano/issues/297#issuecomment-269845562.

The only other fixes I see for now are only dirty workarounds:

• Moving scss/forms/_error.scss:69 away to prevent the others declarations to be merged.
• Manually using the placeholder vendors without ::placeholder in scss/forms/_error.scss:48.

[ben-eb]

@ncoden Now that [email protected] has been released, you should be able to run a new build where ::placeholder won't be merged, using the default browserslist configuration. That will change as and when the browser support is much stronger for this. 😄

[ncoden]

@ben-eb Thank you :D

[ncoden]

@colinmackinlay Because foundation-zurb-template and css-nano use caret ranges, you only have to update to the latest version with:

$ npm update cssnano

I tested and the rules with ::placeholder are not merged. I close this issue, please re-open if it is not resolved.

[colinmackinlay]

@ben-eb @ncoden it doesn't change things but I perhaps that's because the zurb template uses gulp-cssnano? Update doesn't change the version which is showing 2.1.2. I've run npm update cssnano with and without -g and also update gulp-cssnano with and without g. Everything reports version 3.10.0. I'll try again with a fresh download of the zurb template

[ncoden]

@colinmackinlay

[email protected]
└─┬ [email protected] (^2.1.0)
  └─┬ [email protected] (^3.0.0)
    └── [email protected] (^2.0.3) 

All these package use caret ranges for these dependencies' versions, so until you are using yarn, it should be updated automatically (look at the version of the package itself, not the the version of the dependency).

[colinmackinlay]

@ben-eb @ncoden My bad - didn't drill down to the local cssnano properly and only updated my global one. All works fine.