Permalink
Browse files

Add postcss-unicode-characters as a tip.

1 parent 355c6ec commit 1c6c36cb143e36c3f4634df1075cfbf501cee694 @ben-eb committed Jan 5, 2017
Showing with 57 additions and 0 deletions.
  1. +23 −0 docs/web_modules/layouts/Optimisations/show.js
  2. +34 −0 metadata.toml
@@ -3,6 +3,7 @@ import BasicPage from "../BasicPage";
import {content} from '../Page/index.css';
import CssExample from '../../CssExample';
import {example} from '../../CssExample/index.css';
+import DangerousMarkdown from '../../DangerousMarkdown';
export default class Optimisation extends Component {
static contextTypes = {
@@ -22,6 +23,9 @@ export default class Optimisation extends Component {
const {
inputExample,
outputExample,
+ tipDescription,
+ tipInput,
+ tipOutput,
source,
} = module;
@@ -33,13 +37,32 @@ export default class Optimisation extends Component {
</div>;
}
+ let tip = null;
+ if (tipDescription) {
+ let tipExample = null;
+ if (tipInput && tipOutput) {
+ tipExample = <div className={example}>
+ <CssExample key={`input`}>{tipInput}</CssExample>
+ <CssExample key={`output`}>{tipOutput}</CssExample>
+ </div>;
+ }
+ tip = (
+ <div className={content}>
+ <h2>Did you know...</h2>
+ <DangerousMarkdown>{tipDescription}</DangerousMarkdown>
+ {tipExample}
+ </div>
+ );
+ }
+
return (
<div>
<BasicPage className={content} { ...this.props} />
<div className={content}>
{demo}
<p><a href={source}>View on GitHub</a></p>
</div>
+ {tip}
</div>
);
}
View
@@ -121,6 +121,40 @@ body {
}
"""
source = "https://github.com/ben-eb/cssnano/blob/master/src/lib/normalizeUnicode.js"
+tipDescription = """
+The syntax for `unicode-range` can be confusing at times; it's not always clear
+from reading the value what the descriptor is actually doing. However, this can
+be remedied by using [postcss-unicode-characters][1], which allows you to write
+using a more descriptive syntax.
+
+The above example, using the [Latin Extended Additional][2] range, can be expressed
+using this plugin by the following:
+
+[1]: https://github.com/ben-eb/postcss-unicode-characters
+[2]: http://unicode.org/charts/PDF/U1E00.pdf
+"""
+tipInput = """
+@font-face {
+ font-family: "Latin Extended Additional";
+ unicode-characters: script("Latin Extended Additional");
+ src: local("Baskerville");
+}
+
+body {
+ font-family: "Latin Extended Additional", sans-serif;
+}
+"""
+tipOutput = """
+@font-face {
+ font-family: "Latin Extended Additional";
+ unicode-range: u+1e00-1eff;
+ src: local("Baskerville");
+}
+
+body {
+ font-family: "Latin Extended Additional", sans-serif;
+}
+"""
[[modules]]
name = "postcss-calc"

0 comments on commit 1c6c36c

Please sign in to comment.