Skip to content

Commit f8a8893

Browse files
jonathantnealromainmenke
authored andcommitted
Fix README.md documentation
1 parent b7a6b9c commit f8a8893

File tree

1 file changed

+38
-24
lines changed

1 file changed

+38
-24
lines changed

plugins/postcss-env-function/README.md

+38-24
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,7 @@
55
[<img alt="Build Status" src="https://img.shields.io/travis/csstools/postcss-env-function/master.svg" height="20">][cli-url]
66
[<img alt="Support Chat" src="https://img.shields.io/badge/support-chat-blue.svg" height="20">][git-url]
77

8-
[PostCSS Environment Variables] lets you use `env()` variables in CSS,
9-
following the [CSS Environment Variables] specification.
8+
[PostCSS Environment Variables] lets you use `env()` variables in CSS, following the [CSS Environment Variables] specification.
109

1110
```pcss
1211
@media (max-width: env(--branding-small)) {
@@ -42,20 +41,20 @@ npm install postcss-env-function --save-dev
4241
Use [PostCSS Environment Variables] to process your CSS:
4342

4443
```js
45-
const postcssEnvFunction = require('postcss-env-function');
44+
const postcssEnvFunction = require('postcss-env-function')
4645

47-
postcssEnvFunction.process(YOUR_CSS /*, processOptions, pluginOptions */);
46+
postcssEnvFunction.process(YOUR_CSS /*, processOptions, pluginOptions */)
4847
```
4948

5049
Or use it as a [PostCSS] plugin:
5150

5251
```js
53-
const postcss = require('postcss');
54-
const postcssEnvFunction = require('postcss-env-function');
52+
const postcss = require('postcss')
53+
const postcssEnvFunction = require('postcss-env-function')
5554

5655
postcss([
5756
postcssEnvFunction(/* pluginOptions */)
58-
]).process(YOUR_CSS /*, processOptions */);
57+
]).process(YOUR_CSS /*, processOptions */)
5958
```
6059

6160
[PostCSS Environment Variables] runs in all Node environments, with special instructions for:
@@ -67,19 +66,17 @@ postcss([
6766

6867
### importFrom
6968

70-
The `importFrom` option specifies sources where Environment Variables can be
71-
imported from, which might be JS and JSON files, functions, and directly passed
72-
objects.
69+
The `importFrom` option specifies sources where Environment Variables can be imported from, which might be JS and JSON files, functions, and directly passed objects.
7370

7471
```js
75-
postcssCustomProperties({
72+
postcssEnvFunction({
7673
importFrom: 'path/to/file.js' /* module.exports = {
7774
environmentVariables: {
7875
'--branding-padding': '20px',
7976
'--branding-small': '600px'
8077
}
8178
} */
82-
});
79+
})
8380
```
8481

8582
```pcss
@@ -98,30 +95,47 @@ postcssCustomProperties({
9895
}
9996
```
10097

101-
Multiple sources can be passed into this option, and they will be parsed in the
102-
order they are received. JavaScript files, JSON files, functions, and objects
103-
will need to namespace Custom Properties using the `environmentVariables` or
104-
`variables-variables` key.
98+
Multiple sources can be passed into this option, and they will be parsed in the order they are received. JavaScript files, JSON files, functions, and objects will need to namespace Custom Properties using the `environmentVariables` or `variables-variables` key.
10599

106100
```js
107-
postcssCustomProperties({
101+
postcssEnvFunction({
108102
importFrom: [
109-
'path/to/file.js', // module.exports = { environmentVariables: { '--branding-padding': '20px' } }
110-
'and/then/this.json', // { "environment-variables": { "--branding-padding": "20px" } }
103+
/* Import from a CommonJS file:
104+
105+
module.exports = {
106+
environmentVariables: {
107+
'--branding-padding': '20px'
108+
}
109+
} */
110+
'path/to/file.js',
111+
112+
/* Import from a JSON file:
113+
114+
{
115+
"environment-variables": {
116+
"--branding-padding": "20px"
117+
}
118+
} */
119+
'and/then/this.json',
120+
121+
/* Import from an JavaScript Object: */
111122
{
112123
environmentVariables: { '--branding-padding': '20px' }
113124
},
125+
126+
/* Import from a JavaScript Function: */
114127
() => {
115-
const environmentVariables = { '--branding-padding': '20px' };
128+
const environmentVariables = { '--branding-padding': '20px' }
116129

117-
return { environmentVariables };
130+
return { environmentVariables }
118131
}
119132
]
120-
});
133+
})
121134
```
122135

123-
See example imports written in [JS](test/import-variables.js) and
124-
[JSON](test/import-variables.json). Currently only valid [custom property names] (beginning with `--`) are accepted. Not all valid [declaration value names] are accepted.
136+
See example imports written in [JS](test/import-variables.js) and [JSON](test/import-variables.json).
137+
Currently only valid [custom property names] (beginning with `--`) are accepted.
138+
Not all valid [declaration value names] are accepted.
125139

126140
[cli-url]: https://travis-ci.org/csstools/postcss-env-function
127141
[css-url]: https://cssdb.org/#environment-variables

0 commit comments

Comments
 (0)