2.0.0

Author: jonathantneal

plugins/postcss-env-function/.appveyor.yml

@@ -1,10 +1,9 @@
 node_modules
-index.*.js
+index.*.*
 package-lock.json
 *.log*
 *.result.css
 .*
-!.appveyor.yml
 !.editorconfig
 !.gitignore
 !.rollup.js

plugins/postcss-env-function/.gitignore

@@ -3,13 +3,16 @@ import babel from 'rollup-plugin-babel';
 export default {
 	input: 'index.js',
 	output: [
-		{ file: 'index.cjs.js', format: 'cjs' },
-		{ file: 'index.es.js', format: 'es' }
+		{ file: 'index.cjs.js', format: 'cjs', sourcemap: true },
+		{ file: 'index.es.mjs', format: 'es', sourcemap: true }
 	],
 	plugins: [
 		babel({
+			plugins: [
+				'@babel/plugin-syntax-dynamic-import'
+			],
 			presets: [
-				['env', { modules: false, targets: { node: 4 } }]
+				['@babel/env', { modules: false, targets: { node: 6 } }]
 			]
 		})
 	]

plugins/postcss-env-function/.rollup.js

@@ -1,13 +1,82 @@
 module.exports = {
 	'postcss-env-function': {
 		'basic': {
-			message: 'supports basic usage',
+			message: 'supports basic usage'
+		},
+		'basic:import': {
+			message: 'supports { importFrom: { environmentVariables: { ... } } } usage',
 			options: {
-				variables: {
-					'--some-custom-padding': '20px',
-					'--another-custom-width': '600px'
+				importFrom: {
+					environmentVariables: {
+						'--some-custom-padding': '20px',
+						'--another-custom-width': '600px'
+					}
 				}
 			}
+		},
+		'basic:import-fn': {
+			message: 'supports { importFrom() } usage',
+			options: {
+				importFrom() {
+					return {
+						environmentVariables: {
+							'--some-custom-padding': '20px',
+							'--another-custom-width': '600px'
+						}
+					};
+				}
+			},
+			expect: 'basic.import.expect.css',
+			result: 'basic.import.result.css'
+		},
+		'basic:import-fn-promise': {
+			message: 'supports { async importFrom() } usage',
+			options: {
+				importFrom() {
+					return new Promise(resolve => {
+						resolve({
+							environmentVariables: {
+								'--some-custom-padding': '20px',
+								'--another-custom-width': '600px'
+							}
+						})
+					});
+				}
+			},
+			expect: 'basic.import.expect.css',
+			result: 'basic.import.result.css'
+		},
+		'basic:import-json': {
+			message: 'supports { importFrom: "test/import-variables.json" } usage',
+			options: {
+				importFrom: 'test/import-variables.json'
+			},
+			expect: 'basic.import.expect.css',
+			result: 'basic.import.result.css'
+		},
+		'basic:import-js': {
+			message: 'supports { importFrom: "test/import-variables.js" } usage',
+			options: {
+				importFrom: 'test/import-variables.js'
+			},
+			expect: 'basic.import.expect.css',
+			result: 'basic.import.result.css'
+		},
+		'basic:import-js-from': {
+			message: 'supports { importFrom: { from: "test/import-variables.js" } } usage',
+			options: {
+				importFrom: { from: 'test/import-variables.js' }
+			},
+			expect: 'basic.import.expect.css',
+			result: 'basic.import.result.css'
+		},
+		'basic:import-js-from-type': {
+			message: 'supports { importFrom: [ { from: "test/import-variables.js", type: "js" } ] } usage',
+			options: {
+				importFrom: [ { from: 'test/import-variables.js', type: 'js' } ]
+			},
+			expect: 'basic.import.expect.css',
+			result: 'basic.import.result.css'
 		}
 	}
 };

plugins/postcss-env-function/.tape.js

@@ -3,7 +3,7 @@
 language: node_js
 
 node_js:
-  - 4
+  - 6
 
 install:
   - npm install --ignore-scripts

plugins/postcss-env-function/.travis.yml

@@ -1,5 +1,11 @@
 # Changes to PostCSS Environment Variables
 
+### 2.0.0 (September 17, 2018)
+
+- Updated: Support for PostCSS v7+
+- Updated: Support for Node v6+
+- Updated: Changed `variables` option to `importFrom` option
+
 ### 1.0.0 (April 28, 2018)
 
 - Initial version

plugins/postcss-env-function/CHANGELOG.md

@@ -0,0 +1,170 @@
+# Installing PostCSS Environment Variables
+
+[PostCSS Environment Variables] runs in all Node environments, with special instructions for:
+
+| [Node](#node) | [PostCSS CLI](#postcss-cli) | [Webpack](#webpack) | [Create React App](#create-react-app) | [Gulp](#gulp) | [Grunt](#grunt) |
+| --- | --- | --- | --- | --- | --- |
+
+## Node
+
+Add [PostCSS Environment Variables] to your project:
+
+```bash
+npm install postcss-env-function --save-dev
+```
+
+Use [PostCSS Environment Variables] to process your CSS:
+
+```js
+const postcssEnvFunction = require('postcss-env-function');
+
+postcssEnvFunction.process(YOUR_CSS /*, processOptions, pluginOptions */);
+```
+
+Or use it as a [PostCSS] plugin:
+
+```js
+const postcss = require('postcss');
+const postcssEnvFunction = require('postcss-env-function');
+
+postcss([
+  postcssEnvFunction(/* pluginOptions */)
+]).process(YOUR_CSS /*, processOptions */);
+```
+
+## PostCSS CLI
+
+Add [PostCSS CLI] to your project:
+
+```bash
+npm install postcss-cli --save-dev
+```
+
+Use [PostCSS Environment Variables] in your `postcss.config.js` configuration file:
+
+```js
+const postcssEnvFunction = require('postcss-env-function');
+
+module.exports = {
+  plugins: [
+    postcssEnvFunction(/* pluginOptions */)
+  ]
+}
+```
+
+## Webpack
+
+Add [PostCSS Loader] to your project:
+
+```bash
+npm install postcss-loader --save-dev
+```
+
+Use [PostCSS Environment Variables] in your Webpack configuration:
+
+```js
+const postcssEnvFunction = require('postcss-env-function');
+
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        use: [
+          'style-loader',
+          { loader: 'css-loader', options: { importLoaders: 1 } },
+          { loader: 'postcss-loader', options: {
+            ident: 'postcss',
+            plugins: () => [
+              postcssEnvFunction(/* pluginOptions */)
+            ]
+          } }
+        ]
+      }
+    ]
+  }
+}
+```
+
+## Create React App
+
+Add [React App Rewired] and [React App Rewire PostCSS] to your project:
+
+```bash
+npm install react-app-rewired react-app-rewire-postcss --save-dev
+```
+
+Use [React App Rewire PostCSS] and [PostCSS Environment Variables] in your
+`config-overrides.js` file:
+
+```js
+const reactAppRewirePostcss = require('react-app-rewire-postcss');
+const postcssEnvFunction = require('postcss-env-function');
+
+module.exports = config => reactAppRewirePostcss(config, {
+  plugins: () => [
+    postcssEnvFunction(/* pluginOptions */)
+  ]
+});
+```
+
+## Gulp
+
+Add [Gulp PostCSS] to your project:
+
+```bash
+npm install gulp-postcss --save-dev
+```
+
+Use [PostCSS Environment Variables] in your Gulpfile:
+
+```js
+const postcss = require('gulp-postcss');
+const postcssEnvFunction = require('postcss-env-function');
+
+gulp.task('css', () => gulp.src('./src/*.css').pipe(
+  postcss([
+    postcssEnvFunction(/* pluginOptions */)
+  ])
+).pipe(
+  gulp.dest('.')
+));
+```
+
+## Grunt
+
+Add [Grunt PostCSS] to your project:
+
+```bash
+npm install grunt-postcss --save-dev
+```
+
+Use [PostCSS Environment Variables] in your Gruntfile:
+
+```js
+const postcssEnvFunction = require('postcss-env-function');
+
+grunt.loadNpmTasks('grunt-postcss');
+
+grunt.initConfig({
+  postcss: {
+    options: {
+      use: [
+       postcssEnvFunction(/* pluginOptions */)
+      ]
+    },
+    dist: {
+      src: '*.css'
+    }
+  }
+});
+```
+
+[Gulp PostCSS]: https://github.com/postcss/gulp-postcss
+[Grunt PostCSS]: https://github.com/nDmitry/grunt-postcss
+[PostCSS]: https://github.com/postcss/postcss
+[PostCSS CLI]: https://github.com/postcss/postcss-cli
+[PostCSS Loader]: https://github.com/postcss/postcss-loader
+[PostCSS Environment Variables]: https://github.com/jonathantneal/postcss-env-function
+[React App Rewire PostCSS]: https://github.com/csstools/react-app-rewire-postcss
+[React App Rewired]: https://github.com/timarney/react-app-rewired