postcss-place
Advanced tools
Comparing version 3.0.1 to 4.0.0
# Changes to PostCSS Place Properties | ||
### 4.0.0 (September 17, 2018) | ||
- Updated: Support for PostCSS v7+ | ||
- Updated: Support for Node v6+ | ||
### 3.0.1 (May 8, 2018) | ||
@@ -4,0 +9,0 @@ |
@@ -8,40 +8,34 @@ 'use strict'; | ||
var placeMatch = /^place-(content|items|self)/; | ||
const placeMatch = /^place-(content|items|self)/; | ||
var index = postcss.plugin('postcss-place', opts => { | ||
// prepare options | ||
const preserve = 'preserve' in Object(opts) ? Boolean(opts.prefix) : true; | ||
return root => { | ||
// walk each matching declaration | ||
root.walkDecls(placeMatch, decl => { | ||
// alignment | ||
const alignment = decl.prop.match(placeMatch)[1]; // value ast and child nodes | ||
var index = postcss.plugin('postcss-place', function (opts) { | ||
// prepare options | ||
var preserve = 'preserve' in Object(opts) ? Boolean(opts.prefix) : true; | ||
const value = parser(decl.value).parse(); | ||
const children = value.nodes[0].nodes; // new justify-[alignment] and align-[alignment] declarations | ||
return function (root) { | ||
// walk each matching declaration | ||
root.walkDecls(placeMatch, function (decl) { | ||
// alignment | ||
var alignment = decl.prop.match(placeMatch)[1]; | ||
const alignValue = children.length === 1 ? decl.value : String(children.slice(0, 1)).trim(); | ||
const justifyValue = children.length === 1 ? decl.value : String(children.slice(1)).trim(); | ||
decl.cloneBefore({ | ||
prop: `align-${alignment}`, | ||
value: alignValue | ||
}); | ||
decl.cloneBefore({ | ||
prop: `justify-${alignment}`, | ||
value: justifyValue | ||
}); // conditionally remove place-[alignment] | ||
// value ast and child nodes | ||
var value = parser(decl.value).parse(); | ||
var children = value.nodes[0].nodes; | ||
// new justify-[alignment] and align-[alignment] declarations | ||
var alignValue = children.length === 1 ? decl.value : String(children.slice(0, 1)).trim(); | ||
var justifyValue = children.length === 1 ? decl.value : String(children.slice(1)).trim(); | ||
decl.cloneBefore({ | ||
prop: `align-${alignment}`, | ||
value: alignValue | ||
}); | ||
decl.cloneBefore({ | ||
prop: `justify-${alignment}`, | ||
value: justifyValue | ||
}); | ||
// conditionally remove place-[alignment] | ||
if (!preserve) { | ||
decl.remove(); | ||
} | ||
}); | ||
}; | ||
if (!preserve) { | ||
decl.remove(); | ||
} | ||
}); | ||
}; | ||
}); | ||
module.exports = index; | ||
//# sourceMappingURL=index.cjs.js.map |
{ | ||
"name": "postcss-place", | ||
"version": "3.0.1", | ||
"version": "4.0.0", | ||
"description": "Use a place-* shorthand for align-* and justify-* in CSS", | ||
@@ -11,6 +11,8 @@ "author": "Jonathan Neal <jonathantneal@hotmail.com>", | ||
"main": "index.cjs.js", | ||
"module": "index.es.js", | ||
"module": "index.es.mjs", | ||
"files": [ | ||
"index.cjs.js", | ||
"index.es.js" | ||
"index.cjs.js.map", | ||
"index.es.mjs", | ||
"index.es.mjs.map" | ||
], | ||
@@ -26,18 +28,18 @@ "scripts": { | ||
"engines": { | ||
"node": ">=4.0.0" | ||
"node": ">=6.0.0" | ||
}, | ||
"dependencies": { | ||
"postcss": "^6.0.22", | ||
"postcss": "^7.0.2", | ||
"postcss-values-parser": "^1.5.0" | ||
}, | ||
"devDependencies": { | ||
"babel-core": "^6.26.3", | ||
"babel-eslint": "^8.2.3", | ||
"babel-preset-env": "^1.6.1", | ||
"eslint": "^4.19.1", | ||
"@babel/core": "^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.58.2", | ||
"rollup-plugin-babel": "^3.0.4" | ||
"rollup": "^0.66.0", | ||
"rollup-plugin-babel": "^4.0.1" | ||
}, | ||
@@ -44,0 +46,0 @@ "eslintConfig": { |
110
README.md
@@ -6,3 +6,2 @@ # PostCSS Place Properties [<img src="https://postcss.github.io/postcss/logo.svg" alt="PostCSS Logo" width="90" height="90" align="right">][postcss] | ||
[![Build Status][cli-img]][cli-url] | ||
[![Windows Build Status][win-img]][win-url] | ||
[![Support Chat][git-img]][git-url] | ||
@@ -33,3 +32,3 @@ | ||
Add [PostCSS Place Properties] to your build tool: | ||
Add [PostCSS Place Properties] to your project: | ||
@@ -40,4 +39,2 @@ ```bash | ||
#### Node | ||
Use [PostCSS Place Properties] to process your CSS: | ||
@@ -48,17 +45,9 @@ | ||
postcssPlace.process(YOUR_CSS, /* processOptions */, /* pluginOptions */); | ||
postcssPlace.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 Place Properties] as a plugin: | ||
```js | ||
import postcss from 'gulp-postcss'; | ||
import postcss from 'postcss'; | ||
import postcssPlace from 'postcss-place'; | ||
@@ -68,91 +57,10 @@ | ||
postcssPlace(/* pluginOptions */) | ||
]).process(YOUR_CSS); | ||
]).process(YOUR_CSS /*, processOptions */); | ||
``` | ||
#### Webpack | ||
[PostCSS Place Properties] runs in all Node environments, with special instructions for: | ||
Add [PostCSS Loader] to your build tool: | ||
| [Node](INSTALL.md#node) | [Webpack](INSTALL.md#webpack) | [Create React App](INSTALL.md#create-react-app) | [Gulp](INSTALL.md#gulp) | [Grunt](INSTALL.md#grunt) | | ||
| --- | --- | --- | --- | --- | | ||
```bash | ||
npm install postcss-loader --save-dev | ||
``` | ||
Use [PostCSS Place Properties] in your Webpack configuration: | ||
```js | ||
import postcssPlace from 'postcss-place'; | ||
module.exports = { | ||
module: { | ||
rules: [ | ||
{ | ||
test: /\.css$/, | ||
use: [ | ||
'style-loader', | ||
{ loader: 'css-loader', options: { importLoaders: 1 } }, | ||
{ loader: 'postcss-loader', options: { | ||
ident: 'postcss', | ||
plugins: () => [ | ||
postcssPlace(/* pluginOptions */) | ||
] | ||
} } | ||
] | ||
} | ||
] | ||
} | ||
} | ||
``` | ||
#### Gulp | ||
Add [Gulp PostCSS] to your build tool: | ||
```bash | ||
npm install gulp-postcss --save-dev | ||
``` | ||
Use [PostCSS Place Properties] in your Gulpfile: | ||
```js | ||
import postcss from 'gulp-postcss'; | ||
import postcssPlace from 'postcss-place'; | ||
gulp.task('css', () => gulp.src('./src/*.css').pipe( | ||
postcss([ | ||
postcssPlace(/* pluginOptions */) | ||
]) | ||
).pipe( | ||
gulp.dest('.') | ||
)); | ||
``` | ||
#### Grunt | ||
Add [Grunt PostCSS] to your build tool: | ||
```bash | ||
npm install grunt-postcss --save-dev | ||
``` | ||
Use [PostCSS Place Properties] in your Gruntfile: | ||
```js | ||
import postcssPlace from 'postcss-place'; | ||
grunt.loadNpmTasks('grunt-postcss'); | ||
grunt.initConfig({ | ||
postcss: { | ||
options: { | ||
use: [ | ||
postcssPlace(/* pluginOptions */) | ||
] | ||
}, | ||
dist: { | ||
src: '*.css' | ||
} | ||
} | ||
}); | ||
``` | ||
## Options | ||
@@ -193,4 +101,2 @@ | ||
[npm-url]: https://www.npmjs.com/package/postcss-place | ||
[win-img]: https://img.shields.io/appveyor/ci/jonathantneal/postcss-place.svg | ||
[win-url]: https://ci.appveyor.com/project/jonathantneal/postcss-place | ||
@@ -197,0 +103,0 @@ [CSS Box Alignment]: https://www.w3.org/TR/css-align-3/#place-content |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
19481
8
64
103
+ Addedpicocolors@0.2.1(transitive)
+ Addedpostcss@7.0.39(transitive)
- Removedansi-styles@3.2.1(transitive)
- Removedchalk@2.4.2(transitive)
- Removedcolor-convert@1.9.3(transitive)
- Removedcolor-name@1.1.3(transitive)
- Removedescape-string-regexp@1.0.5(transitive)
- Removedhas-flag@3.0.0(transitive)
- Removedpostcss@6.0.23(transitive)
- Removedsupports-color@5.5.0(transitive)
Updatedpostcss@^7.0.2