Skip to content

Commit

Permalink
build(library): Build for release
Browse files Browse the repository at this point in the history
  • Loading branch information
@bhough
bhough committed Mar 23, 2019
1 parent 7675380 commit 9b483b9
Show file tree
Hide file tree
Showing 4 changed files with 1,053 additions and 495 deletions.
44 changes: 35 additions & 9 deletions docs/assets/polished.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1216,9 +1216,33 @@
}
}

function generateFileReferences(fontFilePath, fileFormats) {
var dataURIRegex = /^\s*data:([a-z]+\/[a-z-]+(;[a-z-]+=[a-z-]+)?)?(;charset=[a-z0-9-]+)?(;base64)?,[a-z0-9!$&',()*+,;=\-._~:@/?%\s]*\s*$/i;
var formatHintMap = {
woff: 'woff',
woff2: 'woff2',
ttf: 'truetype',
otf: 'opentype',
eot: 'embedded-opentype',
svg: 'svg',
svgz: 'svg'
};

function generateFormatHint(format, formatHint) {
if (!formatHint) return '';
return " format(\"" + formatHintMap[format] + "\")";
}

function isDataURI(fontFilePath) {
return !!fontFilePath.match(dataURIRegex);
}

function generateFileReferences(fontFilePath, fileFormats, formatHint) {
if (isDataURI(fontFilePath)) {
return "url(\"" + fontFilePath + "\")" + generateFormatHint(fileFormats[0], formatHint);
}

var fileFontReferences = fileFormats.map(function (format) {
return "url(\"" + fontFilePath + "." + format + "\")";
return "url(\"" + fontFilePath + "." + format + "\")" + generateFormatHint(format, formatHint);
});
return fileFontReferences.join(', ');
}
Expand All @@ -1230,12 +1254,12 @@
return localFontReferences.join(', ');
}

function generateSources(fontFilePath, localFonts, fileFormats) {
function generateSources(fontFilePath, localFonts, fileFormats, formatHint) {
var fontReferences = [];
if (localFonts) fontReferences.push(generateLocalReferences(localFonts));

if (fontFilePath) {
fontReferences.push(generateFileReferences(fontFilePath, fileFormats));
fontReferences.push(generateFileReferences(fontFilePath, fileFormats, formatHint));
}

return fontReferences.join(', ');
Expand Down Expand Up @@ -1278,6 +1302,8 @@
fontWeight = _ref.fontWeight,
_ref$fileFormats = _ref.fileFormats,
fileFormats = _ref$fileFormats === void 0 ? ['eot', 'woff2', 'woff', 'ttf', 'svg'] : _ref$fileFormats,
_ref$formatHint = _ref.formatHint,
formatHint = _ref$formatHint === void 0 ? false : _ref$formatHint,
localFonts = _ref.localFonts,
unicodeRange = _ref.unicodeRange,
fontDisplay = _ref.fontDisplay,
Expand All @@ -1301,7 +1327,7 @@
var fontFaceDeclaration = {
'@font-face': {
fontFamily: fontFamily,
src: generateSources(fontFilePath, localFonts, fileFormats),
src: generateSources(fontFilePath, localFonts, fileFormats, formatHint),
unicodeRange: unicodeRange,
fontStretch: fontStretch,
fontStyle: fontStyle,
Expand Down Expand Up @@ -4092,13 +4118,13 @@
exports.getLuminance = getLuminance;
exports.getValueAndUnit = getValueAndUnit;
exports.grayscale = grayscale;
exports.invert = invert;
exports.hiDPI = hiDPI;
exports.hideText = hideText;
exports.hideVisually = hideVisually;
exports.hiDPI = hiDPI;
exports.hsl = hsl;
exports.hsla = hsla;
exports.hslToColorString = hslToColorString;
exports.hsla = hsla;
exports.invert = invert;
exports.lighten = curriedLighten;
exports.linearGradient = linearGradient;
exports.margin = margin;
Expand All @@ -4116,8 +4142,8 @@
exports.rem = rem;
exports.retinaImage = retinaImage;
exports.rgb = rgb;
exports.rgba = rgba;
exports.rgbToColorString = rgbToColorString;
exports.rgba = rgba;
exports.saturate = curriedSaturate;
exports.setHue = curriedSetHue;
exports.setLightness = curriedSetLightness;
Expand Down
88 changes: 51 additions & 37 deletions docs/docs/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1525,8 +1525,8 @@ <h3 class='fl m0' id='fluidrange'>
<div class='py1 quiet mt1 prose-big'>Example</div>


<pre class='p1 overflow-auto round fill-light'>// Styles <span class="hljs-keyword">as</span> object usage
const styles = {
<pre class='p1 overflow-auto round fill-light'><span class="hljs-comment">// Styles as object usage</span>
<span class="hljs-keyword">const</span> styles = {
...fluidRange(
{
prop: <span class="hljs-string">'padding'</span>,
Expand All @@ -1538,8 +1538,8 @@ <h3 class='fl m0' id='fluidrange'>
)
}

// styled-components usage
const div = styled.div`
<span class="hljs-comment">// styled-components usage</span>
<span class="hljs-keyword">const</span> div = styled.div`
${fluidRange(
{
prop: <span class="hljs-string">'padding'</span>,
Expand All @@ -1551,13 +1551,13 @@ <h3 class='fl m0' id='fluidrange'>
)}
`

// CSS <span class="hljs-keyword">as</span> JS Output
<span class="hljs-comment">// CSS as JS Output</span>

div: {
<span class="hljs-string">"@media (min-width: 1000px)"</span>: Object {
<span class="hljs-string">"@media (min-width: 1000px)"</span>: <span class="hljs-built_in">Object</span> {
<span class="hljs-string">"padding"</span>: <span class="hljs-string">"100px"</span>,
},
<span class="hljs-string">"@media (min-width: 400px)"</span>: Object {
<span class="hljs-string">"@media (min-width: 400px)"</span>: <span class="hljs-built_in">Object</span> {
<span class="hljs-string">"padding"</span>: <span class="hljs-string">"calc(-33.33333333333334px + 13.333333333333334vw)"</span>,
},
<span class="hljs-string">"padding"</span>: <span class="hljs-string">"20px"</span>,
Expand Down Expand Up @@ -1679,6 +1679,14 @@ <h3 class='fl m0' id='fontface'>
<td class='break-word'><span></span></td>
</tr>

<tr>
<td class='break-word'><span class='code bold'>$0.formatHint</span> <code class='quiet'>any</code>

(default <code>false</code>)
</td>
<td class='break-word'><span></span></td>
</tr>

<tr>
<td class='break-word'><span class='code bold'>$0.localFonts</span> <code class='quiet'>any</code>
</td>
Expand Down Expand Up @@ -2320,12 +2328,12 @@ <h3 class='fl m0' id='normalize'>


<pre class='p1 overflow-auto round fill-light'><span class="hljs-comment">// Styles as object usage</span>
const styles = {
<span class="hljs-keyword">const</span> styles = {
...normalize(),
}

<span class="hljs-comment">// styled-components usage</span>
const GlobalStyle = createGlobalStyle`${normalize()}`
<span class="hljs-keyword">const</span> GlobalStyle = createGlobalStyle`${normalize()}`

<span class="hljs-comment">// CSS as JS Output</span>

Expand Down Expand Up @@ -3819,21 +3827,21 @@ <h3 class='fl m0' id='hsl'>

<pre class='p1 overflow-auto round fill-light'><span class="hljs-comment">// Styles as object usage</span>
<span class="hljs-keyword">const</span> styles = {
<span class="hljs-built_in">background</span>: hsl(<span class="hljs-number">359</span>, <span class="hljs-number">0.75</span>, <span class="hljs-number">0.4</span>),
<span class="hljs-built_in">background</span>: hsl({ <span class="hljs-built_in">hue</span>: <span class="hljs-number">360</span>, <span class="hljs-built_in">saturation</span>: <span class="hljs-number">0.75</span>, lightness: <span class="hljs-number">0.4</span> }),
background: hsl(<span class="hljs-number">359</span>, <span class="hljs-number">0.75</span>, <span class="hljs-number">0.4</span>),
background: hsl({ hue: <span class="hljs-number">360</span>, saturation: <span class="hljs-number">0.75</span>, lightness: <span class="hljs-number">0.4</span> }),
}

<span class="hljs-comment">// styled-components usage</span>
<span class="hljs-keyword">const</span> div = styled.div`
<span class="hljs-built_in">background</span>: ${hsl(<span class="hljs-number">359</span>, <span class="hljs-number">0.75</span>, <span class="hljs-number">0.4</span>)};
<span class="hljs-built_in">background</span>: ${hsl({ <span class="hljs-built_in">hue</span>: <span class="hljs-number">360</span>, <span class="hljs-built_in">saturation</span>: <span class="hljs-number">0.75</span>, lightness: <span class="hljs-number">0.4</span> })};
background: ${hsl(<span class="hljs-number">359</span>, <span class="hljs-number">0.75</span>, <span class="hljs-number">0.4</span>)};
background: ${hsl({ hue: <span class="hljs-number">360</span>, saturation: <span class="hljs-number">0.75</span>, lightness: <span class="hljs-number">0.4</span> })};
`

<span class="hljs-comment">// CSS in JS Output</span>

element {
<span class="hljs-built_in">background</span>: <span class="hljs-string">"#b3191c"</span>;
<span class="hljs-built_in">background</span>: <span class="hljs-string">"#b3191c"</span>;
background: <span class="hljs-string">"#b3191c"</span>;
background: <span class="hljs-string">"#b3191c"</span>;
}</pre>


Expand Down Expand Up @@ -3951,24 +3959,24 @@ <h3 class='fl m0' id='hsla'>

<pre class='p1 overflow-auto round fill-light'><span class="hljs-comment">// Styles as object usage</span>
<span class="hljs-keyword">const</span> styles = {
<span class="hljs-built_in">background</span>: hsla(<span class="hljs-number">359</span>, <span class="hljs-number">0.75</span>, <span class="hljs-number">0.4</span>, <span class="hljs-number">0.7</span>),
<span class="hljs-built_in">background</span>: hsla({ <span class="hljs-built_in">hue</span>: <span class="hljs-number">360</span>, <span class="hljs-built_in">saturation</span>: <span class="hljs-number">0.75</span>, lightness: <span class="hljs-number">0.4</span>, <span class="hljs-built_in">alpha</span>: <span class="hljs-number">0</span>,<span class="hljs-number">7</span> }),
<span class="hljs-built_in">background</span>: hsla(<span class="hljs-number">359</span>, <span class="hljs-number">0.75</span>, <span class="hljs-number">0.4</span>, <span class="hljs-number">1</span>),
background: hsla(<span class="hljs-number">359</span>, <span class="hljs-number">0.75</span>, <span class="hljs-number">0.4</span>, <span class="hljs-number">0.7</span>),
background: hsla({ hue: <span class="hljs-number">360</span>, saturation: <span class="hljs-number">0.75</span>, lightness: <span class="hljs-number">0.4</span>, alpha: <span class="hljs-number">0</span>,<span class="hljs-number">7</span> }),
background: hsla(<span class="hljs-number">359</span>, <span class="hljs-number">0.75</span>, <span class="hljs-number">0.4</span>, <span class="hljs-number">1</span>),
}

<span class="hljs-comment">// styled-components usage</span>
<span class="hljs-keyword">const</span> div = styled.div`
<span class="hljs-built_in">background</span>: ${hsla(<span class="hljs-number">359</span>, <span class="hljs-number">0.75</span>, <span class="hljs-number">0.4</span>, <span class="hljs-number">0.7</span>)};
<span class="hljs-built_in">background</span>: ${hsla({ <span class="hljs-built_in">hue</span>: <span class="hljs-number">360</span>, <span class="hljs-built_in">saturation</span>: <span class="hljs-number">0.75</span>, lightness: <span class="hljs-number">0.4</span>, <span class="hljs-built_in">alpha</span>: <span class="hljs-number">0</span>,<span class="hljs-number">7</span> })};
<span class="hljs-built_in">background</span>: ${hsla(<span class="hljs-number">359</span>, <span class="hljs-number">0.75</span>, <span class="hljs-number">0.4</span>, <span class="hljs-number">1</span>)};
background: ${hsla(<span class="hljs-number">359</span>, <span class="hljs-number">0.75</span>, <span class="hljs-number">0.4</span>, <span class="hljs-number">0.7</span>)};
background: ${hsla({ hue: <span class="hljs-number">360</span>, saturation: <span class="hljs-number">0.75</span>, lightness: <span class="hljs-number">0.4</span>, alpha: <span class="hljs-number">0</span>,<span class="hljs-number">7</span> })};
background: ${hsla(<span class="hljs-number">359</span>, <span class="hljs-number">0.75</span>, <span class="hljs-number">0.4</span>, <span class="hljs-number">1</span>)};
`

<span class="hljs-comment">// CSS in JS Output</span>

element {
<span class="hljs-built_in">background</span>: <span class="hljs-string">"rgba(179,25,28,0.7)"</span>;
<span class="hljs-built_in">background</span>: <span class="hljs-string">"rgba(179,25,28,0.7)"</span>;
<span class="hljs-built_in">background</span>: <span class="hljs-string">"#b3191c"</span>;
background: <span class="hljs-string">"rgba(179,25,28,0.7)"</span>;
background: <span class="hljs-string">"rgba(179,25,28,0.7)"</span>;
background: <span class="hljs-string">"#b3191c"</span>;
}</pre>


Expand Down Expand Up @@ -7321,27 +7329,27 @@ <h3 class='fl m0' id='buttons'>
<div class='py1 quiet mt1 prose-big'>Example</div>


<pre class='p1 overflow-auto round fill-light'><span class="hljs-comment">// Styles as object usage</span>
<pre class='p1 overflow-auto round fill-light'>// Styles <span class="hljs-keyword">as</span> <span class="hljs-keyword">object</span> <span class="hljs-keyword">usage</span>
const styles = {
[buttons(<span class="hljs-symbol">'activ</span>e')]: {
<span class="hljs-symbol">'borde</span>r': <span class="hljs-symbol">'non</span>e'
[buttons(<span class="hljs-string">'active'</span>)]: {
<span class="hljs-string">'border'</span>: <span class="hljs-string">'none'</span>
}
}

<span class="hljs-comment">// styled-components usage</span>
// styled-components <span class="hljs-keyword">usage</span>
const div = styled.div`
&gt; ${buttons(<span class="hljs-symbol">'activ</span>e')} {
border: none;
&gt; ${buttons(<span class="hljs-string">'active'</span>)} {
border: <span class="hljs-keyword">none</span>;
}
`

<span class="hljs-comment">// CSS in JS Output</span>
// CSS <span class="hljs-keyword">in</span> JS Output

<span class="hljs-symbol">'button</span>:active,
<span class="hljs-symbol">'input</span>[<span class="hljs-class"><span class="hljs-keyword">type</span></span>=<span class="hljs-string">"button"</span>]:active,
<span class="hljs-symbol">'input</span>[<span class="hljs-class"><span class="hljs-keyword">type</span><span class="hljs-title">=\</span>"<span class="hljs-title">reset\</span>"]</span>:active,
<span class="hljs-symbol">'input</span>[<span class="hljs-class"><span class="hljs-keyword">type</span><span class="hljs-title">=\</span>"<span class="hljs-title">submit\</span>"]</span>:active: {
<span class="hljs-symbol">'borde</span>r': <span class="hljs-symbol">'non</span>e'
<span class="hljs-string">'button:active,
'</span><span class="hljs-keyword">input</span>[<span class="hljs-keyword">type</span>="button"]:active,
<span class="hljs-string">'input[type=\"reset\"]:active,
'</span><span class="hljs-keyword">input</span>[<span class="hljs-keyword">type</span>=\"submit\"]:active: {
<span class="hljs-string">'border'</span>: <span class="hljs-string">'none'</span>
}</pre>


Expand Down Expand Up @@ -8906,7 +8914,7 @@ <h3 class='fl m0' id='fontfaceconfiguration'>

<p>
Type:
{fontFamily: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>, fontFilePath: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>?, fontStretch: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>?, fontStyle: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>?, fontVariant: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>?, fontWeight: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>?, fileFormats: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a>&#x3C;<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>>?, localFonts: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a>&#x3C;<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>>?, unicodeRange: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>?, fontDisplay: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>?, fontVariationSettings: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>?, fontFeatureSettings: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>?}
{fontFamily: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>, fontFilePath: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>?, fontStretch: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>?, fontStyle: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>?, fontVariant: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>?, fontWeight: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>?, fileFormats: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a>&#x3C;<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>>?, formatHint: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean">boolean</a>?, localFonts: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a>&#x3C;<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>>?, unicodeRange: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>?, fontDisplay: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>?, fontVariationSettings: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>?, fontFeatureSettings: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>?}
</p>


Expand Down Expand Up @@ -8975,6 +8983,12 @@ <h3 class='fl m0' id='fontfaceconfiguration'>
<span class='code bold'>fileFormats</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a>&#x3C;<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>>?)</code>


</div>

<div class='space-bottom0'>
<span class='code bold'>formatHint</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean">boolean</a>?)</code>


</div>

<div class='space-bottom0'>
Expand Down

0 comments on commit 9b483b9

Please sign in to comment.