Socket
Socket
Sign inDemoInstall

postcss-env-function

Package Overview
Dependencies
8
Maintainers
1
Versions
15
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

Comparing version 3.0.0 to 4.0.0

141

dist/index.js
'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

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc