postcss-env-function
Advanced tools
Comparing version 3.0.0 to 4.0.0
'use strict'; | ||
function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; } | ||
var postcssValuesParser = require('postcss-values-parser'); | ||
var fs = require('fs'); | ||
var path = require('path'); | ||
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; } | ||
function _interopNamespace(e) { | ||
if (e && e.__esModule) { return e; } else { | ||
var n = {}; | ||
if (e) { | ||
Object.keys(e).forEach(function (k) { | ||
if (e && e.__esModule) return e; | ||
var n = Object.create(null); | ||
if (e) { | ||
Object.keys(e).forEach(function (k) { | ||
if (k !== 'default') { | ||
var d = Object.getOwnPropertyDescriptor(e, k); | ||
@@ -17,13 +22,11 @@ Object.defineProperty(n, k, d.get ? d : { | ||
}); | ||
}); | ||
} | ||
n['default'] = e; | ||
return n; | ||
} | ||
}); | ||
} | ||
n['default'] = e; | ||
return Object.freeze(n); | ||
} | ||
var postcss = _interopDefault(require('postcss')); | ||
var postcssValuesParser = require('postcss-values-parser'); | ||
var fs = _interopDefault(require('fs')); | ||
var path = _interopDefault(require('path')); | ||
var fs__default = /*#__PURE__*/_interopDefaultLegacy(fs); | ||
var path__default = /*#__PURE__*/_interopDefaultLegacy(path); | ||
@@ -91,2 +94,8 @@ const dashedMatch = /^--/; // returns the value of a css function as a string | ||
/** | ||
* @param {string} originalValue | ||
* @param variables | ||
* @returns {string} returns a value replaced with environment variables | ||
*/ | ||
var getReplacedValue = ((originalValue, variables) => { | ||
@@ -104,23 +113,8 @@ // get the ast of the original value | ||
// returns whether a node is an at-rule | ||
var isAtrule = (node => node && node.type === 'atrule'); | ||
/** | ||
* Import Custom Properties from Object | ||
* @param {{environmentVariables: Record<string, string>, 'environment-variables': Record<string, string>}} object | ||
* @returns {Record<string, import('postcss-values-parser').Root>} | ||
*/ | ||
// returns whether a node is a declaration | ||
var isDecl = (node => node && node.type === 'decl'); | ||
var getSupportedValue = (node => isAtrule(node) ? node.params : isDecl(node) ? node.value : null); | ||
function setSupportedValue (node, value) { | ||
if (isAtrule(node)) { | ||
node.params = value; | ||
} | ||
if (isDecl(node)) { | ||
node.value = value; | ||
} | ||
} | ||
/* Import Custom Properties from Object | ||
/* ========================================================================== */ | ||
function importEnvironmentVariablesFromObject(object) { | ||
@@ -135,20 +129,29 @@ const environmentVariables = Object.assign({}, Object(object).environmentVariables || Object(object)['environment-variables']); | ||
} | ||
/* Import Custom Properties from JSON file | ||
/* ========================================================================== */ | ||
/** | ||
* Import Custom Properties from JSON file | ||
* @param {string} from | ||
* @returns {Promise<Record<string, import('postcss-values-parser').Root>>} | ||
*/ | ||
async function importEnvironmentVariablesFromJSONFile(from) { | ||
const object = await readJSON(path.resolve(from)); | ||
const object = await readJSON(path__default['default'].resolve(from)); | ||
return importEnvironmentVariablesFromObject(object); | ||
} | ||
/* Import Custom Properties from JS file | ||
/* ========================================================================== */ | ||
/** | ||
* Import Custom Properties from JS file | ||
* @param {string} from | ||
* @returns {Promise<Record<string, import('postcss-values-parser').Root>>} | ||
*/ | ||
async function importEnvironmentVariablesFromJSFile(from) { | ||
const object = await new Promise(function (resolve) { resolve(_interopNamespace(require(path.resolve(from)))); }); | ||
const object = await Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(path__default['default'].resolve(from))); }); | ||
return importEnvironmentVariablesFromObject(object); | ||
} | ||
/* Import Custom Properties from Sources | ||
/* ========================================================================== */ | ||
/** | ||
* Import Custom Properties from Sources | ||
* @param {(string|Function|Promise|{type:string,environmentVariables: Record<string, string>, 'environment-variables': Record<string, string>})[]} sources | ||
* @returns {Promise<Record<string, import('postcss-values-parser').Root>>} | ||
*/ | ||
@@ -176,3 +179,3 @@ | ||
const type = (opts.type || path.extname(from).slice(1)).toLowerCase(); | ||
const type = (opts.type || path__default['default'].extname(from).slice(1)).toLowerCase(); | ||
return { | ||
@@ -188,11 +191,11 @@ type, | ||
if (type === 'js') { | ||
return Object.assign(environmentVariables, (await importEnvironmentVariablesFromJSFile(from))); | ||
if (type === 'js' || type === 'cjs') { | ||
return Object.assign(environmentVariables, await importEnvironmentVariablesFromJSFile(from)); | ||
} | ||
if (type === 'json') { | ||
return Object.assign(environmentVariables, (await importEnvironmentVariablesFromJSONFile(from))); | ||
return Object.assign(environmentVariables, await importEnvironmentVariablesFromJSONFile(from)); | ||
} | ||
return Object.assign(environmentVariables, importEnvironmentVariablesFromObject((await source))); | ||
return Object.assign(environmentVariables, importEnvironmentVariablesFromObject(await source)); | ||
}, {}); | ||
@@ -203,4 +206,9 @@ } | ||
/** | ||
* @param {string} from | ||
* @returns {Promise<string>} | ||
*/ | ||
const readFile = from => new Promise((resolve, reject) => { | ||
fs.readFile(from, 'utf8', (error, result) => { | ||
fs__default['default'].readFile(from, 'utf8', (error, result) => { | ||
if (error) { | ||
@@ -214,5 +222,10 @@ reject(error); | ||
const readJSON = async from => JSON.parse((await readFile(from))); | ||
const readJSON = async from => JSON.parse(await readFile(from)); | ||
var index = postcss.plugin('postcss-env-fn', opts => { | ||
/** | ||
* @param {{importFrom?: string[]}} opts | ||
* @returns {import('postcss').Plugin} | ||
*/ | ||
module.exports = function creator(opts) { | ||
// sources to import environment variables from | ||
@@ -222,18 +235,24 @@ const importFrom = [].concat(Object(opts).importFrom || []); // promise any environment variables are imported | ||
const environmentVariablesPromise = importEnvironmentVariablesFromSources(importFrom); | ||
return async root => { | ||
const environmentVariables = await environmentVariablesPromise; | ||
root.walk(node => { | ||
const supportedValue = getSupportedValue(node); | ||
return { | ||
postcssPlugin: 'postcss-env-fn', | ||
if (supportedValue) { | ||
const replacedValue = getReplacedValue(supportedValue, environmentVariables); | ||
async AtRule(atRule) { | ||
const replacedValue = getReplacedValue(atRule.params, await environmentVariablesPromise); | ||
if (replacedValue !== supportedValue) { | ||
setSupportedValue(node, replacedValue); | ||
} | ||
if (replacedValue !== atRule.params) { | ||
atRule.params = replacedValue; | ||
} | ||
}); | ||
}, | ||
async Declaration(decl) { | ||
const replacedValue = getReplacedValue(decl.value, await environmentVariablesPromise); | ||
if (replacedValue !== decl.value) { | ||
decl.value = replacedValue; | ||
} | ||
} | ||
}; | ||
}); | ||
}; | ||
module.exports = index; | ||
module.exports.postcss = true; |
{ | ||
"name": "postcss-env-function", | ||
"version": "3.0.0", | ||
"version": "4.0.0", | ||
"description": "Use env() variables in CSS", | ||
@@ -20,23 +20,26 @@ "author": "Jonathan Neal <jonathantneal@hotmail.com>", | ||
"lint:fix": "npx eslint --cache --fix", | ||
"pretest": "npm install && npm run build", | ||
"pretest": "npm run build", | ||
"test": "npm run lint && npm run tape", | ||
"tape": "npx postcss-tape", | ||
"tape": "postcss-tape", | ||
"prepublishOnly": "npm test" | ||
}, | ||
"engines": { | ||
"node": ">=8.0.0" | ||
"node": ">=12" | ||
}, | ||
"dependencies": { | ||
"postcss": "^7.0.27", | ||
"postcss-values-parser": "^3.2.0" | ||
"postcss-values-parser": "6.0.0" | ||
}, | ||
"peerDependencies": { | ||
"postcss": "^8.3" | ||
}, | ||
"devDependencies": { | ||
"@babel/core": "^7.9.0", | ||
"@babel/preset-env": "^7.9.5", | ||
"babel-eslint": "^10.1.0", | ||
"eslint": "^6.8.0", | ||
"postcss-tape": "^5.0.2", | ||
"pre-commit": "^1.2.2", | ||
"rollup": "^2.7.2", | ||
"rollup-plugin-babel": "^4.4.0" | ||
"@babel/core": "7.15.5", | ||
"@babel/eslint-parser": "7.15.4", | ||
"@babel/preset-env": "7.15.6", | ||
"@rollup/plugin-babel": "5.3.0", | ||
"eslint": "7.32.0", | ||
"postcss": "8.3.6", | ||
"postcss-tape": "6.0.1", | ||
"pre-commit": "1.2.2", | ||
"rollup": "2.56.3" | ||
}, | ||
@@ -59,3 +62,3 @@ "babel": { | ||
"extends": "eslint:recommended", | ||
"parser": "babel-eslint" | ||
"parser": "@babel/eslint-parser" | ||
}, | ||
@@ -65,3 +68,3 @@ "rollup": { | ||
"plugins": [ | ||
"rollup-plugin-babel" | ||
"@rollup/plugin-babel" | ||
], | ||
@@ -68,0 +71,0 @@ "output": [ |
@@ -5,7 +5,6 @@ # PostCSS Environment Variables [<img src="https://postcss.github.io/postcss/logo.svg" alt="PostCSS Logo" width="90" height="90" align="right">][postcss] | ||
[<img alt="CSS Standard Status" src="https://cssdb.org/badge/environment-variables.svg" height="20">][css-url] | ||
[<img alt="Build Status" src="https://img.shields.io/travis/csstools/postcss-env-function/master.svg" height="20">][cli-url] | ||
[<img alt="Build Status" src="https://github.com/csstools/postcss-env-function/workflows/test/badge.svg" height="20">][cli-url] | ||
[<img alt="Support Chat" src="https://img.shields.io/badge/support-chat-blue.svg" height="20">][git-url] | ||
[PostCSS Environment Variables] lets you use `env()` variables in CSS, | ||
following the [CSS Environment Variables] specification. | ||
[PostCSS Environment Variables] lets you use `env()` variables in CSS, following the [CSS Environment Variables] specification. | ||
@@ -40,3 +39,3 @@ ```pcss | ||
```bash | ||
npm install postcss-env-function --save-dev | ||
npm install postcss postcss-env-function --save-dev | ||
``` | ||
@@ -47,5 +46,5 @@ | ||
```js | ||
const postcssEnvFunction = require('postcss-env-function'); | ||
const postcssEnvFunction = require('postcss-env-function') | ||
postcssEnvFunction.process(YOUR_CSS /*, processOptions, pluginOptions */); | ||
postcssEnvFunction.process(YOUR_CSS /*, processOptions, pluginOptions */) | ||
``` | ||
@@ -56,8 +55,8 @@ | ||
```js | ||
const postcss = require('postcss'); | ||
const postcssEnvFunction = require('postcss-env-function'); | ||
const postcss = require('postcss') | ||
const postcssEnvFunction = require('postcss-env-function') | ||
postcss([ | ||
postcssEnvFunction(/* pluginOptions */) | ||
]).process(YOUR_CSS /*, processOptions */); | ||
]).process(YOUR_CSS /*, processOptions */) | ||
``` | ||
@@ -74,8 +73,6 @@ | ||
The `importFrom` option specifies sources where Environment Variables can be | ||
imported from, which might be JS and JSON files, functions, and directly passed | ||
objects. | ||
The `importFrom` option specifies sources where Environment Variables can be imported from, which might be JS and JSON files, functions, and directly passed objects. | ||
```js | ||
postcssCustomProperties({ | ||
postcssEnvFunction({ | ||
importFrom: 'path/to/file.js' /* module.exports = { | ||
@@ -87,3 +84,3 @@ environmentVariables: { | ||
} */ | ||
}); | ||
}) | ||
``` | ||
@@ -107,28 +104,45 @@ | ||
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. | ||
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 `environment-variables` key. | ||
```js | ||
postcssCustomProperties({ | ||
postcssEnvFunction({ | ||
importFrom: [ | ||
'path/to/file.js', // module.exports = { environmentVariables: { '--branding-padding': '20px' } } | ||
'and/then/this.json', // { "environment-variables": { "--branding-padding": "20px" } } | ||
/* Import from a CommonJS file: | ||
module.exports = { | ||
environmentVariables: { | ||
'--branding-padding': '20px' | ||
} | ||
} */ | ||
'path/to/file.js', | ||
/* Import from a JSON file: | ||
{ | ||
"environment-variables": { | ||
"--branding-padding": "20px" | ||
} | ||
} */ | ||
'and/then/this.json', | ||
/* Import from an JavaScript Object: */ | ||
{ | ||
environmentVariables: { '--branding-padding': '20px' } | ||
}, | ||
/* Import from a JavaScript Function: */ | ||
() => { | ||
const environmentVariables = { '--branding-padding': '20px' }; | ||
const environmentVariables = { '--branding-padding': '20px' } | ||
return { environmentVariables }; | ||
return { environmentVariables } | ||
} | ||
] | ||
}); | ||
}) | ||
``` | ||
See example imports written in [JS](test/import-variables.js) and | ||
[JSON](test/import-variables.json). Currently only valid [custom property names] (beginning with `--`) are accepted. Not all valid [declaration value names] are accepted. | ||
See example imports written in [JS](test/import-variables.js) and [JSON](test/import-variables.json). | ||
Currently only valid [custom property names] (beginning with `--`) are accepted. | ||
Not all valid [declaration value names] are accepted. | ||
[cli-url]: https://travis-ci.org/csstools/postcss-env-function | ||
[cli-url]: https://github.com/csstools/postcss-env-function/actions/workflows/test.yml?query=workflow/test | ||
[css-url]: https://cssdb.org/#environment-variables | ||
@@ -135,0 +149,0 @@ [git-url]: https://gitter.im/postcss/postcss |
Sorry, the diff of this file is not supported yet
Dynamic require
Supply chain riskDynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Dynamic require
Supply chain riskDynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.
Found 1 instance in 1 package
26717
365
151
0
9
5
+ Addedis-url-superb@4.0.0(transitive)
+ Addednanoid@3.3.7(transitive)
+ Addedpicocolors@1.0.0(transitive)
+ Addedpostcss@8.4.38(transitive)
+ Addedpostcss-values-parser@6.0.0(transitive)
+ Addedquote-unquote@1.0.0(transitive)
+ Addedsource-map-js@1.2.0(transitive)
- Removedpostcss@^7.0.27
- Removedip-regex@4.3.0(transitive)
- Removedis-url-superb@3.0.0(transitive)
- Removedpicocolors@0.2.1(transitive)
- Removedpostcss@7.0.39(transitive)
- Removedpostcss-values-parser@3.2.1(transitive)
- Removedsource-map@0.6.1(transitive)
- Removedtlds@1.252.0(transitive)
- Removedurl-regex@5.0.0(transitive)
Updatedpostcss-values-parser@6.0.0