postcss-place - npm Package Compare versions

Comparing version 3.0.1 to 4.0.0

CHANGELOG.md

 # 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 @@

index.cjs.js

@@ -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

package.json

 {
   "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 <[e-mail]>",
   "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": {

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

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

19481

increased by26.34%

Number of package files

8

increased by33.33%

Worsened metrics

Lines of code

64

decreased by-5.88%

Number of lines in readme file

103

decreased by-47.72%

Dependency changes

• + 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