Socket
Socket
Sign inDemoInstall

postcss-custom-properties

Package Overview
Dependencies
7
Maintainers
3
Versions
85
Alerts
File Explorer

Advanced tools

npm Scripts
License

Install Socket

Detect and block malicious and high-risk dependencies

Install

Comparing version 7.0.0 to 8.0.0

index.cjs.js
index.es.mjs
LICENSE.md

75

CHANGELOG.md

@@ -1,11 +0,28 @@

# 7.0.0 - 2018-02-16
# Changes to PostCSS Custom Properties
### 8.0.0 (September 16, 2018)
- Added: New `exportTo` function to specify where to export custom properties to.
- Added: New `importFrom` option to specify where to import custom properties from.
- Added: Support for variables written within `html`
- Added: Support for PostCSS v7.
- Added: Support for Node v6+.
- Removed: `strict` option, as using the fallback value isn’t necessarily more valid.
- Removed: `preserve: "computed"` option, as there seems to be little use in preserving custom property declarations while removing all usages of them.
- Removed: `warnings` and `noValueNotifications` options, as this should be the job of a linter tool.
- Removed: `variables` option, which is now replaced by `importFrom`
- Removed: `appendVariables` option, which is now replaced by `exportTo`
- Fixed: Custom Properties in `:root` are not also transformed.
- Fixed: Declarations that do not change are not duplicated during preserve.
### 7.0.0 (February 16, 2018)
- Changed: `preserve` option defaults as `true` to reflect the browser climate
- Changed: `warnings` option defaults to `false` to reflect the browser climate
# 6.3.1 - 2018-02-16
### 6.3.1 (February 16, 2018)
- Reverted: `preserve` and `warnings` option to be added in major release
# 6.3.0 - 2018-02-15
### 6.3.0 (February 15, 2018)

@@ -19,3 +36,3 @@ - Fixed: `var()` captures strictly `var()` functions and not `xvar()`, etc

# 6.2.0 - 2017-10-06
### 6.2.0 (October 6, 2017)

@@ -25,3 +42,3 @@ - Added: `noValueNotifications` option (#71)

# 6.1.0 - 2017-06-28
### 6.1.0 (June 28, 2017)

@@ -32,11 +49,11 @@ - Added: Let "warnings" option silence all warnings

# 6.0.1 - 2017-05-15
### 6.0.1 (May 15, 2017)
- Fixed: incorrect export ([#69](https://github.com/postcss/postcss-custom-properties/issues/69))
# 6.0.0 - 2017-05-12
### 6.0.0 (May 12, 2017)
- Added: compatibility with postcss v6.x
# 5.0.2 - 2017-02-01
### 5.0.2 (February 1, 2017)

@@ -46,3 +63,3 @@ - Minor dependency update

# 5.0.1 - 2016-04-22
### 5.0.1 (April 22, 2016)

@@ -53,3 +70,3 @@ - Fixed: trailing space after custom property name causes duplicate empty

# 5.0.0 - 2015-08-25
### 5.0.0 (August 25, 2015)

@@ -59,3 +76,3 @@ - Removed: compatibility with postcss v4.x

# 4.2.0 - 2015-07-21
### 4.2.0 (July 21, 2015)

@@ -65,3 +82,3 @@ - Added: `warnings` option allows you to disable warnings.

# 4.1.0 - 2015-07-14
### 4.1.0 (July 14, 2015)

@@ -72,7 +89,7 @@ - Added: plugin now returns itself in order to expose a `setVariables` function

# 4.0.0 - 2015-06-17
### 4.0.0 (June 17, 2015)
- Changed: messages and exceptions are now sent using postcss message API.
# 3.3.0 - 2015-04-08
### 3.3.0 (April 8, 2015)

@@ -83,7 +100,7 @@ - Added: `preserve` now support `"computed"` so only preserve resolved custom properties (see new option below)

# 3.2.0 - 2015-03-31
### 3.2.0 (03 31, 2015)
- Added: JS defined variables are now resolved too ([#22](https://github.com/postcss/postcss-custom-properties/issues/22))
# 3.1.0 - 2015-03-16
### 3.1.0 (03 16, 2015)

@@ -93,7 +110,7 @@ - Added: variables defined in JS are now automatically prefixed with `--`

# 3.0.1 - 2015-02-06
### 3.0.1 (February 6, 2015)
- Fixed: logs now have filename back ([#19](https://github.com/postcss/postcss-custom-properties/issues/19))
# 3.0.0 - 2015-01-20
### 3.0.0 (January 20, 2015)

@@ -103,23 +120,23 @@ - Changed: upgrade to postcss 4 ([#18](https://github.com/postcss/postcss-custom-properties/pull/18))

# 2.1.1 - 2014-12-02
### 2.1.1 (December 2, 2014)
- Fixed: issue when multiples undefined custom properties are referenced ([#16](https://github.com/postcss/postcss-custom-properties/issues/16))
# 2.1.0 - 2014-11-25
### 2.1.0 (November 25, 2014)
- Added: enhanced exceptions & messages
# 2.0.0 - 2014-11-12
### 2.0.0 (November 12, 2014)
- Changed: upgrade to postcss 3
# 1.0.2 - 2014-11-04
### 1.0.2 (November 4, 2014)
- Fixed: more clear message for warning about custom prop used in non top-level :root
# 1.0.1 - 2014-11-03
### 1.0.1 (November 3, 2014)
- Fixed: warning about custom prop used in non :root
# 1.0.0 - 2014-11-02
### 1.0.0 (November 2, 2014)

@@ -129,7 +146,7 @@ - Added: warning when a custom prop is used in another place than :root

# 0.4.0 - 2014-09-30
### 0.4.0 (September 30, 2014)
- Added: JS-defined properties override CSS-defined
# 0.3.1 - 2014-08-27
### 0.3.1 (August 27, 2014)

@@ -139,3 +156,3 @@ - Added: nested custom properties usages are now correctly resolved

# 0.3.0 - 2014-08-26
### 0.3.0 (August 26, 2014)

@@ -145,3 +162,3 @@ - Changed: fallback now are always added by default ([see why](http://www.w3.org/TR/css-variables/#invalid-variables))

# 0.2.0 - 2014-08-22
### 0.2.0 (August 22, 2014)

@@ -151,4 +168,4 @@ - Added: `map` option

# 0.1.0 - 2014-08-01
### 0.1.0 (August 1, 2014)
✨ First release based on [rework-vars](https://github.com/reworkcss/rework-vars) v3.1.1

81

package.json
{
"name": "postcss-custom-properties",
"version": "7.0.0",
"description": "PostCSS plugin to polyfill W3C CSS Custom Properties for cascading variables",
"keywords": [
"css",
"postcss",
"postcss-plugin",
"custom-properties",
"variables",
"vars"
"version": "8.0.0",
"description": "Use Custom Properties Queries in CSS",
"author": "Jonathan Neal <jonathantneal@hotmail.com>",
"contributors": [
"Maxime Thirouin"
],
"author": "Maxime Thirouin",
"license": "MIT",
"repository": "https://github.com/postcss/postcss-custom-properties.git",
"main": "dist/index.js",
"repository": "postcss/postcss-custom-properties",
"homepage": "https://github.com/postcss/postcss-custom-properties#readme",
"bugs": "https://github.com/postcss/postcss-custom-properties/issues",
"main": "index.cjs.js",
"module": "index.es.mjs",
"files": [
"dist"
"index.cjs.js",
"index.es.mjs"
],
"scripts": {
"prepublishOnly": "npm test",
"pretest": "rollup -c .rollup.js --silent",
"test": "echo 'Running tests...'; npm run test:js && npm run test:tape",
"test:js": "eslint *.js lib/*.js --cache --ignore-path .gitignore --quiet",
"test:tape": "postcss-tape"
},
"engines": {
"node": ">=6.0.0"
},
"dependencies": {
"balanced-match": "^1.0.0",
"postcss": "^6.0.18"
"postcss": "^7.0.2",
"postcss-values-parser": "^1.5.0"
},
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-plugin-add-module-exports": "^0.2.1",
"babel-preset-env": "^1.6.1",
"babel-register": "^6.26.0",
"eslint": "^4.17.0",
"npmpub": "^3.1.0",
"tape": "^4.8.0"
"@babel/core": "^7.0.1",
"@babel/plugin-syntax-dynamic-import": "^7.0.0",
"@babel/preset-env": "^7.0.0",
"babel-eslint": "^9.0.0",
"eslint": "^5.6.0",
"eslint-config-dev": "^2.0.0",
"postcss-tape": "^2.2.0",
"pre-commit": "^1.2.2",
"rollup": "^0.66.0",
"rollup-plugin-babel": "^4.0.3"
},
"scripts": {
"lint": "eslint *.js index.js ./test/",
"tape": "tape -r babel-register test/*.js",
"test": "npm run lint && npm run babelify && npm run tape",
"babelify": "babel index.js --out-dir dist",
"prepublish": "npm run babelify",
"release": "npmpub"
}
"eslintConfig": {
"extends": "dev",
"parser": "babel-eslint"
},
"keywords": [
"postcss",
"css",
"postcss-plugin",
"custom",
"properties",
"declarations",
"variables",
"vars",
"w3c",
"csswg",
"specification"
]
}

358

README.md

@@ -1,2 +0,2 @@

# PostCSS Custom Properties [<img src="https://postcss.github.io/postcss/logo.svg" alt="PostCSS Logo" width="90" height="90" align="right">][postcss]
# PostCSS Custom Properties [<img src="https://postcss.github.io/postcss/logo.svg" alt="PostCSS" width="90" height="90" align="right">][postcss]

@@ -6,8 +6,8 @@ [![NPM Version][npm-img]][npm-url]

[![Build Status][cli-img]][cli-url]
[![Gitter Chat][git-img]][git-url]
[![Support Chat][git-img]][git-url]
[PostCSS Custom Properties] lets you use CSS Custom Properties in CSS, following
the [CSS Custom Properties for Cascading Variables] specification.
[PostCSS Custom Properties] lets you use Custom Properties in CSS, following
the [CSS Custom Properties] specification.
```css
```pcss
:root {

@@ -27,3 +27,3 @@ --color: red;

div {
h1 {
color: red;

@@ -36,3 +36,3 @@ color: var(--color);

Add [PostCSS Custom Properties] to your build tool:
Add [PostCSS Custom Properties] to your project:

@@ -43,92 +43,41 @@ ```bash

#### Node
Use [PostCSS Custom Properties] to process your CSS:
```js
import postCSSCustomProperties from 'postcss-custom-properties';
const postcssCustomProperties = require('postcss-custom-properties');
postCSSCustomProperties.process(YOUR_CSS);
postcssCustomProperties.process(YOUR_CSS /*, processOptions, pluginOptions */);
```
#### PostCSS
Or use it as a [PostCSS] plugin:
Add [PostCSS] to your build tool:
```bash
npm install postcss --save-dev
```
Use [PostCSS Custom Properties] as a plugin:
```js
import postcss from 'gulp-postcss';
import postCSSCustomProperties from 'postcss-custom-properties';
const postcss = require('postcss');
const postcssCustomProperties = require('postcss-custom-properties');
postcss([
postCSSCustomProperties()
]).process(YOUR_CSS);
postcssCustomProperties(/* pluginOptions */)
]).process(YOUR_CSS /*, processOptions */);
```
#### Gulp
[PostCSS Custom Properties] runs in all Node environments, with special instructions for:
Add [Gulp PostCSS] to your build tool:
| [Node](INSTALL.md#node) | [PostCSS CLI](INSTALL.md#postcss-cli) | [Webpack](INSTALL.md#webpack) | [Create React App](INSTALL.md#create-react-app) | [Gulp](INSTALL.md#gulp) | [Grunt](INSTALL.md#grunt) |
| --- | --- | --- | --- | --- | --- |
```bash
npm install gulp-postcss --save-dev
```
## Options
Use [PostCSS Custom Properties] in your Gulpfile:
### preserve
```js
import postcss from 'gulp-postcss';
import postCSSCustomProperties from 'postcss-custom-properties';
The `preserve` option determines whether Custom Properties and properties using
custom properties should be preserved in their original form. By default, both
of these are preserved.
gulp.task('css', () => gulp.src('./src/*.css').pipe(
postcss([
postCSSCustomProperties()
])
).pipe(
gulp.dest('.')
));
```
#### Grunt
Add [Grunt PostCSS] to your build tool:
```bash
npm install grunt-postcss --save-dev
```
Use [PostCSS Custom Properties] in your Gruntfile:
```js
import postCSSCustomProperties from 'postcss-custom-properties';
grunt.loadNpmTasks('grunt-postcss');
grunt.initConfig({
postcss: {
options: {
use: [
postCSSCustomProperties()
]
},
dist: {
src: '*.css'
}
}
postcssCustomProperties({
preserve: false
});
```
## Options
### strict
The `strict` option determines whether a `var()` function should transform into
its specified fallback value. By default, the option is `true` because this
plugin can not verify if the computed `:root` value is valid or not.
```css
```pcss
:root {

@@ -138,28 +87,2 @@ --color: red;

div {
color: var(--color, blue);
}
/* becomes */
:root {
--color: red;
}
div {
color: blue;
color: var(--color, blue);
}
```
### preserve
The `preserve` option determines how Custom Properties should be preserved. By
default, this option is truthy and preserves declarations containing `var()`.
```css
:root {
--color: red;
}
h1 {

@@ -171,55 +94,20 @@ color: var(--color);

:root {
--color: red;
}
h1 {
color: red;
color: var(--color);
}
```
The option may also be set to `false`, where Custom Properties and declarations
containing `var()` will be removed:
### importFrom
```js
postCSSCustomProperties({
variables: {
preserve: false
}
})
```
The `importFrom` option specifies sources where Custom Properties can be imported
from, which might be CSS, JS, and JSON files, functions, and directly passed
objects.
```css
:root {
--color: red;
}
h1 {
color: var(--color);
}
/* becomes */
h1 {
color: red;
}
```
The option may also be set to `"preserve-computed"`, where Custom Properties
will remain, but declarations containing `var()` will be removed:
```js
postCSSCustomProperties({
variables: {
preserve: 'preserve-computed'
}
})
postcssCustomProperties({
importFrom: 'path/to/file.css' // => :root { --color: red }
});
```
```css
:root {
--color: red;
}
```pcss
h1 {

@@ -231,6 +119,2 @@ color: var(--color);

:root {
--color: red;
}
h1 {

@@ -241,146 +125,70 @@ color: red;

### variables
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 `customProperties` or
`custom-properties` key.
The `variables` option allows you to pass an object of variables into CSS, as if
they had been specified on `:root`.
```js
postCSSCustomProperties({
variables: {
color: 'red'
}
})
```
postcssCustomProperties({
importFrom: [
'path/to/file.css',
'and/then/this.js',
'and/then/that.json',
{
customProperties: { '--color': 'red' }
},
() => {
const customProperties = { '--color': 'red' };
```css
h1 {
color: var(--color);
}
/* becomes */
h1 {
color: red;
color: var(--color);
}
return { customProperties };
}
]
});
```
Note that these definitions will override any that exist in the CSS, and that
the keys will be automatically prefixed (`--`) to make it easier to share
variables in your codebase.
### exportTo
### appendVariables
The `exportTo` option specifies destinations where Custom Properties can be exported
to, which might be CSS, JS, and JSON files, functions, and directly passed
objects.
The `appendVariables` option determines whether Custom Properties will be
appended to your CSS file. By default, this option is `false`.
If enabled when `preserve` is set to `true` or `"computed"`, this option allows
you to append your variables at the end of your CSS:
```js
postCSSCustomProperties({
appendVariables: true,
variables: {
color: 'red'
}
})
postcssCustomProperties({
exportTo: 'path/to/file.css' // :root { --color: red; }
});
```
```css
h1 {
color: var(--color);
}
Multiple destinations can be passed into this option, and they will be parsed
in the order they are received. JavaScript files, JSON files, and objects will
need to namespace Custom Properties using the `customProperties` or
`custom-properties` key.
/* becomes */
h1 {
color: red;
color: var(--color);
}
:root {
--color: red;
}
```
### warnings
The `warnings` option determines whether Custom Property related warnings should
be logged by the plugin or not. By default, warnings are set to `false` and are
not logged.
If enabled, the plugin will enable all warnings:
```js
postCSSCustomProperties({
warnings: true
})
```
const cachedObject = { customProperties: {} };
```css
h1 {
color: var(--color);
}
postcssCustomProperties({
exportTo: [
'path/to/file.css', // :root { --color: red; }
'and/then/this.js', // module.exports = { customProperties: { '--color': 'red' } }
'and/then/this.mjs', // export const customProperties = { '--color': 'red' } }
'and/then/that.json', // { "custom-properties": { "--color": "red" } }
cachedObject,
customProperties => {
customProperties // { '--color': 'red' }
}
]
});
```
```
variable '--color' is undefined and used without a fallback
```
### noValueNotifications
When warnings are enabled, the `noValueNotifications` option determines whether
undefined variables will throw a warning or an error. By default, it is set to
`warning`.
---
## Notes
As written in the specification, usage of `var()` is limited to property values.
Do not expect the plugin to transform `var()` in media queries or in selectors.
The transformation of Custom Properties done by this plugin _is not complete_
and **cannot be** because dynamic *cascading* variables based on custom
properties relies on the DOM tree. Since we do not know the DOM in the context
of this plugin, we cannot produce safe output. This plugin currently aims to
provide a future-proof way of using a **limited subset** of the features
provided by native CSS custom properties.
There is a separate plugin, [PostCSS CSS Variables], that attempts to guess the
context of Custom Properties without access to the DOM tree. This does not
[reflecting the specifications](https://github.com/MadLittleMods/postcss-css-variables/issues/4),
so be sure you understand the risks before you decide to use it.
## Contributing
Fork, work on a branch, install dependencies & run tests before submitting a PR.
```bash
$ git clone https://github.com/YOU/postcss-custom-properties.git
$ git checkout -b patch-1
$ npm install
$ npm test
```
---
## [Changelog](CHANGELOG.md)
## [License](LICENSE)
[npm-url]: https://www.npmjs.com/package/postcss-custom-properties
[npm-img]: https://img.shields.io/npm/v/postcss-custom-properties.svg
[css-url]: https://jonathantneal.github.io/css-db/#css-variables
[css-img]: https://jonathantneal.github.io/css-db/badge/css-variables.svg
[cli-img]: https://img.shields.io/travis/postcss/postcss-custom-properties.svg
[cli-url]: https://travis-ci.org/postcss/postcss-custom-properties
[cli-img]: https://img.shields.io/travis/postcss/postcss-custom-properties.svg
[css-img]: https://cssdb.org/badge/custom-properties.svg
[css-url]: https://cssdb.org/#custom-properties
[git-img]: https://img.shields.io/badge/support-chat-blue.svg
[git-url]: https://gitter.im/postcss/postcss
[git-img]: https://img.shields.io/badge/chat-gitter-blue.svg
[npm-img]: https://img.shields.io/npm/v/postcss-custom-properties.svg
[npm-url]: https://www.npmjs.com/package/postcss-custom-properties
[CSS Custom Properties for Cascading Variables]: https://www.w3.org/TR/css-variables-1/
[PostCSS CSS Variables]: https://github.com/MadLittleMods/postcss-css-variables
[CSS Custom Properties]: https://www.w3.org/TR/css-variables-1/
[PostCSS]: https://github.com/postcss/postcss
[PostCSS Custom Properties]: https://github.com/postcss/postcss-custom-properties
[PostCSS]: https://github.com/postcss/postcss
[Gulp PostCSS]: https://github.com/postcss/gulp-postcss
[Grunt PostCSS]: https://github.com/nDmitry/grunt-postcss
dist/index.js
LICENSE
SocketSocket SOC 2 Logo

Product

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

About

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc