<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I have searched the <a href="https://github.com/mui-org/material-ui/issues">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<h2 dir="auto">Expected Behavior</h2>
<p dir="auto">Generated sizes include the type of unit, so it's not up to the interpreter to add missing information.</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="padding: {
    paddingTop: {theme.spacing.unit}px,
    paddingBottom: {theme.spacing.unit}px,
  },
 "><pre class="notranslate"><code class="notranslate">padding: {
    paddingTop: {theme.spacing.unit}px,
    paddingBottom: {theme.spacing.unit}px,
  },
 
</code></pre></div>
<h2 dir="auto">Current Behavior</h2>
<p dir="auto">Currently, a few calculated sizes in the code base are missing the type of unit. For example in <a href="https://github.com/mui-org/material-ui/blob/v1-beta/src/List/List.js">https://github.com/mui-org/material-ui/blob/v1-beta/src/List/List.js</a></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="padding: {
    paddingTop: theme.spacing.unit,
    paddingBottom: theme.spacing.unit,
  },
"><pre class="notranslate"><code class="notranslate">padding: {
    paddingTop: theme.spacing.unit,
    paddingBottom: theme.spacing.unit,
  },

</code></pre></div>
<p dir="auto">It might be our setup, but at production Firefox and Chrome are complaining about the missing unit type. This is correct as the inspector shows:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content=".c56 {
    padding-top: 8;
    padding-bottom: 8;
}"><pre class="notranslate"><code class="notranslate">.c56 {
    padding-top: 8;
    padding-bottom: 8;
}
</code></pre></div>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>
<p dir="auto">The issue is hard to track down as I am not a developer; however it does not occur at our development environments. This leads me to believe it's going wrong during <code class="notranslate">npm build</code> somewhere in our webpack stack.</p>
<p dir="auto">Adding the unit types would however bypass the issue all together imho.</p>
<p dir="auto">Might be related:<br>
<a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="231092710" data-permission-text="Title is private" data-url="https://github.com/styled-components/styled-components/issues/825" data-hovercard-type="issue" data-hovercard-url="/styled-components/styled-components/issues/825/hovercard" href="https://github.com/styled-components/styled-components/issues/825">styled-components/styled-components#825</a><br>
<a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="230690588" data-permission-text="Title is private" data-url="https://github.com/cssinjs/istf-spec/issues/3" data-hovercard-type="issue" data-hovercard-url="/cssinjs/istf-spec/issues/3/hovercard" href="https://github.com/cssinjs/istf-spec/issues/3">cssinjs/istf-spec#3</a></p>
<h2 dir="auto">Context</h2>
<p dir="auto">Currently we encounter the issue (and found the culprit code) in a List, but there are <a href="https://github.com/mui-org/material-ui/search?utf8=%E2%9C%93&amp;q=theme.spacing.unit&amp;type=">more</a></p>
<p dir="auto"><strong>Multiple development environments</strong><br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/32360456/34214954-37b6784e-e5a4-11e7-910f-a9949a0511ae.png"><img src="https://user-images.githubusercontent.com/32360456/34214954-37b6784e-e5a4-11e7-910f-a9949a0511ae.png" alt="image" style="max-width: 100%;"></a></p>
<p dir="auto"><strong>Multiple prod environments</strong><br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/32360456/34214912-1dcd4a66-e5a4-11e7-8510-83c9f8135676.png"><img src="https://user-images.githubusercontent.com/32360456/34214912-1dcd4a66-e5a4-11e7-8510-83c9f8135676.png" alt="image" style="max-width: 100%;"></a></p>
<h2 dir="auto">Your Environment</h2>
<p dir="auto">Latest Chrome and Firefox, zillion npm packages</p>
<p dir="auto">├─┬ material-ui@1.0.0-beta.24<br>
├─┬ material-ui-icons@1.0.0-beta.17<br>
│ ├─┬ jss@9.4.0<br>
│ ├─┬ jss-preset-default@4.0.1<br>
│ │ ├── jss-camel-case@6.0.0<br>
│ │ ├─┬ jss-compose@5.0.0<br>
│ │ ├── jss-default-unit@8.0.2<br>
│ │ ├── jss-expand@5.1.0<br>
│ │ ├─┬ jss-extend@6.1.0<br>
│ │ ├── jss-global@3.0.0<br>
│ │ ├─┬ jss-nested@6.0.1<br>
│ │ ├── jss-props-sort@6.0.0<br>
│ │ ├─┬ jss-template@1.0.0<br>
│ │ └─┬ jss-vendor-prefixer@7.0.0<br>
│ ├─┬ react-jss@8.2.0<br>
│ │ ├── jss@9.4.0 deduped<br>
│ │ ├── jss-preset-default@4.0.1 deduped</p>
<p dir="auto">I noticed some text fields and components implemented using 'FormControl' were no longer in horizontal alignment after a recent package update to beta33.</p>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I have searched the <a href="https://github.com/mui-org/material-ui/issues">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<h2 dir="auto">Expected Behavior</h2>
<p dir="auto">Some of these controls are aligned using  and on other pages they are aligned with a vanilla flex box row. All have margin set to 'none' and were previously in perfect horizontal alignment.</p>
<h2 dir="auto">Current Behavior</h2>
<p dir="auto">Now, text fields are slightly higher whose type was set to 'tel'. Removing the <code class="notranslate">type="tel"</code> property fixes the alignment issue. There seems to be a '1.1875em' modification to the height that is calculated when type="tel". This appears to be linked to a change made in input.js involving class '.inputType'.</p>
<p dir="auto">It may be linked to this commit: <a class="commit-link" href="https://github.com/mui/material-ui/commit/b706b42b70c606ef1ac3170198e7038c6ce67416#diff-deaeb5c7e253bfa4f497fa8ace0b3607"><tt>b706b42</tt>#diff-deaeb5c7e253bfa4f497fa8ace0b3607</a></p>
<p dir="auto">This occurred on Chrome 64.0.3282.140 and the latest version of Safari ios.</p>