postcss-preset-env - npm Package Compare versions

Comparing version 3.5.0 to 4.0.0

CHANGELOG.md

 # Changes to PostCSS Preset Env
 
+### 4.0.0 (April 7, 2018)
+
+- Added: `postcss-focus-within`
+- Updated: `postcss-focus-visible` to v3.0.0 (major update)
+- Updated: `caniuse-lite` to v1.0.30000824 (patch update)
+- Updated: `cssdb` to v2.0.0 (major update)
+- Changed: All `specificationId` names to new `id` names for the `cssdb` update.
+
 ### 3.5.0 (April 5, 2018)
@@ -4,0 +12,0 @@

index.cjs.js

@@ -6,23 +6,24 @@ 'use strict';
 var postcssApply = _interopDefault(require('postcss-apply'));
-var postcssInitial = _interopDefault(require('postcss-initial'));
+var postcssAttributeCaseInsensitive = _interopDefault(require('postcss-attribute-case-insensitive'));
 var postcssColorHexAlpha = _interopDefault(require('postcss-color-hex-alpha'));
 var postcssColorModFunction = _interopDefault(require('postcss-color-mod-function'));
 var postcssColorRebeccapurple = _interopDefault(require('postcss-color-rebeccapurple'));
+var postcssCustomMedia = _interopDefault(require('postcss-custom-media'));
+var postcssCustomProperties = _interopDefault(require('postcss-custom-properties'));
 var postcssCustomSelectors = _interopDefault(require('postcss-custom-selectors'));
+var postcssDirPseudoClass = _interopDefault(require('postcss-dir-pseudo-class'));
 var postcssFocusVisible = _interopDefault(require('postcss-focus-visible'));
+var postcssFocusWithin = _interopDefault(require('postcss-focus-within'));
 var postcssFontVariant = _interopDefault(require('postcss-font-variant'));
 var postcssFontFamilySystemUi = _interopDefault(require('postcss-font-family-system-ui'));
 var postcssImageSetPolyfill = _interopDefault(require('@csstools/postcss-image-set-function'));
+var postcssInitial = _interopDefault(require('postcss-initial'));
 var postcssLogical = _interopDefault(require('postcss-logical'));
+var postcssMediaMinmax = _interopDefault(require('postcss-media-minmax'));
 var postcssNesting = _interopDefault(require('postcss-nesting'));
-var postcssReplaceOverflowWrap = _interopDefault(require('postcss-replace-overflow-wrap'));
-var postcssCustomProperties = _interopDefault(require('postcss-custom-properties'));
-var postcssCustomMedia = _interopDefault(require('postcss-custom-media'));
-var postcssMediaMinmax = _interopDefault(require('postcss-media-minmax'));
 var postcssPageBreak = _interopDefault(require('postcss-page-break'));
 var postcssPseudoClassAnyLink = _interopDefault(require('postcss-pseudo-class-any-link'));
-var postcssAttributeCaseInsensitive = _interopDefault(require('postcss-attribute-case-insensitive'));
+var postcssReplaceOverflowWrap = _interopDefault(require('postcss-replace-overflow-wrap'));
 var postcssSelectorMatches = _interopDefault(require('postcss-selector-matches'));
 var postcssSelectorNot = _interopDefault(require('postcss-selector-not'));
-var postcssDirPseudoClass = _interopDefault(require('postcss-dir-pseudo-class'));
 var caniuse = require('caniuse-lite');
@@ -35,26 +36,27 @@ var browserslist = _interopDefault(require('browserslist'));
 
-// postcss plugins ordered by specification id
+// postcss plugins ordered by id
 var plugins = {
+	'all-property': postcssInitial,
+	'any-link-pseudo-class': postcssPseudoClassAnyLink,
 	'break-properties': postcssPageBreak,
-	'css-apply-rule': postcssApply,
-	'css-cascade-all-shorthand': postcssInitial,
-	'css-color-hex-notation': postcssColorHexAlpha,
-	'css-color-modifying-colors': postcssColorModFunction,
-	'css-color-valdef-color-rebeccapurple': postcssColorRebeccapurple,
-	'css-extensions-custom-selectors': postcssCustomSelectors,
-	'css-fonts-propdef-font-variant': postcssFontVariant,
-	'css-fonts-system-ui-def': postcssFontFamilySystemUi,
-	'css-images-image-set-notation': postcssImageSetPolyfill,
-	'css-logical': postcssLogical,
-	'css-nesting': postcssNesting,
-	'css-text-overflow-wrap-property': postcssReplaceOverflowWrap,
-	'css-variables': postcssCustomProperties,
-	'mediaqueries-custom-mq': postcssCustomMedia,
-	'mediaqueries-mq-ranges': postcssMediaMinmax,
-	'selectors-any-link-pseudo': postcssPseudoClassAnyLink,
-	'selectors-attribute-case': postcssAttributeCaseInsensitive,
-	'selectors-dir-pseudo': postcssDirPseudoClass,
-	'selectors-focus-visible-pseudo': postcssFocusVisible,
-	'selectors-matches-pseudo': postcssSelectorMatches,
-	'selectors-negation': postcssSelectorNot
+	'case-insensitive-attributes': postcssAttributeCaseInsensitive,
+	'color-mod-function': postcssColorModFunction,
+	'custom-media-queries': postcssCustomMedia,
+	'custom-properties': postcssCustomProperties,
+	'custom-property-sets': postcssApply,
+	'custom-selectors': postcssCustomSelectors,
+	'dir-pseudo-class': postcssDirPseudoClass,
+	'font-variant-property': postcssFontVariant,
+	'hexadecimal-alpha-notation': postcssColorHexAlpha,
+	'image-set-function': postcssImageSetPolyfill,
+	'logical-properties-and-values': postcssLogical,
+	'matches-pseudo-class': postcssSelectorMatches,
+	'media-query-ranges': postcssMediaMinmax,
+	'nesting-rules': postcssNesting,
+	'not-pseudo-class': postcssSelectorNot,
+	'overflow-wrap-property': postcssReplaceOverflowWrap,
+	'rebeccapurple-color': postcssColorRebeccapurple,
+	'focus-visible-pseudo-class': postcssFocusVisible,
+	'focus-within-pseudo-class': postcssFocusWithin,
+	'system-ui-font-family': postcssFontFamilySystemUi
 };
@@ -64,8 +66,8 @@
 function getTransformedInsertions(insertions, placement) {
-	return Object.keys(insertions).map(function (specificationId) {
-		return [].concat(insertions[specificationId]).map(function (plugin) {
+	return Object.keys(insertions).map(function (id) {
+		return [].concat(insertions[id]).map(function (plugin) {
 			return {
 				[placement]: true,
 				plugin,
-				specificationId
+				id
 			};
@@ -104,4 +106,4 @@ });
 
-// specification ids ordered by execution
-var specificationIdsByExecutionOrder = ['css-variables', 'postcss-apply', 'css-images-image-set-notation', 'css-logical', 'css-nesting', 'mediaqueries-5-custom-mq', 'mediaqueries-mq-ranges', 'css-extensions-custom-selectors', 'selectors-attribute-case', 'css-color-valdef-color-rebeccapurple', 'css-color-hex-notation', 'css-color-modifying-colors', 'css-fonts-system-ui-def', 'css-fonts-propdef-font-variant', 'css-cascade-all-shorthand', 'selectors-matches', 'selectors-negation', 'selectors-any-link-pseudo', 'selectors-dir-pseudo', 'css-text-overflow-wrap-property'];
+// ids ordered by execution
+var idsByExecutionOrder = ['custom-properties', 'custom-property-sets', 'image-set-function', 'logical-properties-and-values', 'nesting-rules', 'custom-media-queries', 'media-query-ranges', 'custom-selectors', 'case-insensitive-attributes', 'rebeccapurple-color', 'hexadecimal-alpha-notation', 'color-mod-function', 'system-ui-font-family', 'font-variant-property', 'all-property', 'matches-pseudo-class', 'not-pseudo-class', 'any-link-pseudo-class', 'dir-pseudo-class', 'overflow-wrap-property', 'focus-visible-pseudo-class', 'focus-within-pseudo-class'];
 
@@ -127,7 +129,7 @@ // tooling
 	function (feature) {
-		return feature.insertBefore || feature.specificationId in plugins;
+		return feature.insertBefore || feature.id in plugins;
 	}).sort(
 	// features sorted by execution order and then insertion order
 	function (a, b) {
-		return specificationIdsByExecutionOrder.indexOf(a.specificationId) - specificationIdsByExecutionOrder.indexOf(b.specificationId) || (a.insertBefore ? -1 : b.insertBefore ? 1 : 0) || (a.insertAfter ? 1 : b.insertAfter ? -1 : 0);
+		return idsByExecutionOrder.indexOf(a.id) - idsByExecutionOrder.indexOf(b.id) || (a.insertBefore ? -1 : b.insertBefore ? 1 : 0) || (a.insertAfter ? 1 : b.insertAfter ? -1 : 0);
 	}).map(
@@ -142,8 +144,8 @@ // polyfillable features as an object
 			plugin: feature.plugin,
-			specificationId: `${feature.insertBefore ? 'before' : 'after'}-${feature.specificationId}`,
+			id: `${feature.insertBefore ? 'before' : 'after'}-${feature.id}`,
 			stage: 6
 		} : {
 			browsers: unsupportedBrowsers,
-			plugin: plugins[feature.specificationId],
-			specificationId: feature.specificationId,
+			plugin: plugins[feature.id],
+			id: feature.id,
 			stage: feature.stage
@@ -155,8 +157,8 @@ };
 	var stagedFeatures = polyfillableFeatures.filter(function (feature) {
-		return feature.specificationId in features ? features[feature.specificationId] : feature.stage >= stage;
+		return feature.id in features ? features[feature.id] : feature.stage >= stage;
 	}).map(function (feature) {
 		return {
 			browsers: feature.browsers,
-			plugin: typeof feature.plugin.process === 'function' ? features[feature.specificationId] === true ? feature.plugin() : feature.plugin(features[feature.specificationId]) : feature.plugin,
-			specificationId: feature.specificationId
+			plugin: typeof feature.plugin.process === 'function' ? features[feature.id] === true ? feature.plugin() : feature.plugin(features[feature.id]) : feature.plugin,
+			id: feature.id
 		};
@@ -163,0 +165,0 @@ });

index.es.js

 import postcssApply from 'postcss-apply';
-import postcssInitial from 'postcss-initial';
+import postcssAttributeCaseInsensitive from 'postcss-attribute-case-insensitive';
 import postcssColorHexAlpha from 'postcss-color-hex-alpha';
 import postcssColorModFunction from 'postcss-color-mod-function';
 import postcssColorRebeccapurple from 'postcss-color-rebeccapurple';
+import postcssCustomMedia from 'postcss-custom-media';
+import postcssCustomProperties from 'postcss-custom-properties';
 import postcssCustomSelectors from 'postcss-custom-selectors';
+import postcssDirPseudoClass from 'postcss-dir-pseudo-class';
 import postcssFocusVisible from 'postcss-focus-visible';
+import postcssFocusWithin from 'postcss-focus-within';
 import postcssFontVariant from 'postcss-font-variant';
 import postcssFontFamilySystemUi from 'postcss-font-family-system-ui';
 import postcssImageSetPolyfill from '@csstools/postcss-image-set-function';
+import postcssInitial from 'postcss-initial';
 import postcssLogical from 'postcss-logical';
+import postcssMediaMinmax from 'postcss-media-minmax';
 import postcssNesting from 'postcss-nesting';
-import postcssReplaceOverflowWrap from 'postcss-replace-overflow-wrap';
-import postcssCustomProperties from 'postcss-custom-properties';
-import postcssCustomMedia from 'postcss-custom-media';
-import postcssMediaMinmax from 'postcss-media-minmax';
 import postcssPageBreak from 'postcss-page-break';
 import postcssPseudoClassAnyLink from 'postcss-pseudo-class-any-link';
-import postcssAttributeCaseInsensitive from 'postcss-attribute-case-insensitive';
+import postcssReplaceOverflowWrap from 'postcss-replace-overflow-wrap';
 import postcssSelectorMatches from 'postcss-selector-matches';
 import postcssSelectorNot from 'postcss-selector-not';
-import postcssDirPseudoClass from 'postcss-dir-pseudo-class';
 import { features, feature } from 'caniuse-lite';
@@ -30,26 +31,27 @@ import browserslist from 'browserslist';
 
-// postcss plugins ordered by specification id
+// postcss plugins ordered by id
 var plugins = {
+	'all-property': postcssInitial,
+	'any-link-pseudo-class': postcssPseudoClassAnyLink,
 	'break-properties': postcssPageBreak,
-	'css-apply-rule': postcssApply,
-	'css-cascade-all-shorthand': postcssInitial,
-	'css-color-hex-notation': postcssColorHexAlpha,
-	'css-color-modifying-colors': postcssColorModFunction,
-	'css-color-valdef-color-rebeccapurple': postcssColorRebeccapurple,
-	'css-extensions-custom-selectors': postcssCustomSelectors,
-	'css-fonts-propdef-font-variant': postcssFontVariant,
-	'css-fonts-system-ui-def': postcssFontFamilySystemUi,
-	'css-images-image-set-notation': postcssImageSetPolyfill,
-	'css-logical': postcssLogical,
-	'css-nesting': postcssNesting,
-	'css-text-overflow-wrap-property': postcssReplaceOverflowWrap,
-	'css-variables': postcssCustomProperties,
-	'mediaqueries-custom-mq': postcssCustomMedia,
-	'mediaqueries-mq-ranges': postcssMediaMinmax,
-	'selectors-any-link-pseudo': postcssPseudoClassAnyLink,
-	'selectors-attribute-case': postcssAttributeCaseInsensitive,
-	'selectors-dir-pseudo': postcssDirPseudoClass,
-	'selectors-focus-visible-pseudo': postcssFocusVisible,
-	'selectors-matches-pseudo': postcssSelectorMatches,
-	'selectors-negation': postcssSelectorNot
+	'case-insensitive-attributes': postcssAttributeCaseInsensitive,
+	'color-mod-function': postcssColorModFunction,
+	'custom-media-queries': postcssCustomMedia,
+	'custom-properties': postcssCustomProperties,
+	'custom-property-sets': postcssApply,
+	'custom-selectors': postcssCustomSelectors,
+	'dir-pseudo-class': postcssDirPseudoClass,
+	'font-variant-property': postcssFontVariant,
+	'hexadecimal-alpha-notation': postcssColorHexAlpha,
+	'image-set-function': postcssImageSetPolyfill,
+	'logical-properties-and-values': postcssLogical,
+	'matches-pseudo-class': postcssSelectorMatches,
+	'media-query-ranges': postcssMediaMinmax,
+	'nesting-rules': postcssNesting,
+	'not-pseudo-class': postcssSelectorNot,
+	'overflow-wrap-property': postcssReplaceOverflowWrap,
+	'rebeccapurple-color': postcssColorRebeccapurple,
+	'focus-visible-pseudo-class': postcssFocusVisible,
+	'focus-within-pseudo-class': postcssFocusWithin,
+	'system-ui-font-family': postcssFontFamilySystemUi
 };
@@ -59,8 +61,8 @@
 function getTransformedInsertions(insertions, placement) {
-	return Object.keys(insertions).map(function (specificationId) {
-		return [].concat(insertions[specificationId]).map(function (plugin) {
+	return Object.keys(insertions).map(function (id) {
+		return [].concat(insertions[id]).map(function (plugin) {
 			return {
 				[placement]: true,
 				plugin,
-				specificationId
+				id
 			};
@@ -99,4 +101,4 @@ });
 
-// specification ids ordered by execution
-var specificationIdsByExecutionOrder = ['css-variables', 'postcss-apply', 'css-images-image-set-notation', 'css-logical', 'css-nesting', 'mediaqueries-5-custom-mq', 'mediaqueries-mq-ranges', 'css-extensions-custom-selectors', 'selectors-attribute-case', 'css-color-valdef-color-rebeccapurple', 'css-color-hex-notation', 'css-color-modifying-colors', 'css-fonts-system-ui-def', 'css-fonts-propdef-font-variant', 'css-cascade-all-shorthand', 'selectors-matches', 'selectors-negation', 'selectors-any-link-pseudo', 'selectors-dir-pseudo', 'css-text-overflow-wrap-property'];
+// ids ordered by execution
+var idsByExecutionOrder = ['custom-properties', 'custom-property-sets', 'image-set-function', 'logical-properties-and-values', 'nesting-rules', 'custom-media-queries', 'media-query-ranges', 'custom-selectors', 'case-insensitive-attributes', 'rebeccapurple-color', 'hexadecimal-alpha-notation', 'color-mod-function', 'system-ui-font-family', 'font-variant-property', 'all-property', 'matches-pseudo-class', 'not-pseudo-class', 'any-link-pseudo-class', 'dir-pseudo-class', 'overflow-wrap-property', 'focus-visible-pseudo-class', 'focus-within-pseudo-class'];
 
@@ -122,7 +124,7 @@ // tooling
 	function (feature$$1) {
-		return feature$$1.insertBefore || feature$$1.specificationId in plugins;
+		return feature$$1.insertBefore || feature$$1.id in plugins;
 	}).sort(
 	// features sorted by execution order and then insertion order
 	function (a, b) {
-		return specificationIdsByExecutionOrder.indexOf(a.specificationId) - specificationIdsByExecutionOrder.indexOf(b.specificationId) || (a.insertBefore ? -1 : b.insertBefore ? 1 : 0) || (a.insertAfter ? 1 : b.insertAfter ? -1 : 0);
+		return idsByExecutionOrder.indexOf(a.id) - idsByExecutionOrder.indexOf(b.id) || (a.insertBefore ? -1 : b.insertBefore ? 1 : 0) || (a.insertAfter ? 1 : b.insertAfter ? -1 : 0);
 	}).map(
@@ -137,8 +139,8 @@ // polyfillable features as an object
 			plugin: feature$$1.plugin,
-			specificationId: `${feature$$1.insertBefore ? 'before' : 'after'}-${feature$$1.specificationId}`,
+			id: `${feature$$1.insertBefore ? 'before' : 'after'}-${feature$$1.id}`,
 			stage: 6
 		} : {
 			browsers: unsupportedBrowsers,
-			plugin: plugins[feature$$1.specificationId],
-			specificationId: feature$$1.specificationId,
+			plugin: plugins[feature$$1.id],
+			id: feature$$1.id,
 			stage: feature$$1.stage
@@ -150,8 +152,8 @@ };
 	var stagedFeatures = polyfillableFeatures.filter(function (feature$$1) {
-		return feature$$1.specificationId in features$$1 ? features$$1[feature$$1.specificationId] : feature$$1.stage >= stage;
+		return feature$$1.id in features$$1 ? features$$1[feature$$1.id] : feature$$1.stage >= stage;
 	}).map(function (feature$$1) {
 		return {
 			browsers: feature$$1.browsers,
-			plugin: typeof feature$$1.plugin.process === 'function' ? features$$1[feature$$1.specificationId] === true ? feature$$1.plugin() : feature$$1.plugin(features$$1[feature$$1.specificationId]) : feature$$1.plugin,
-			specificationId: feature$$1.specificationId
+			plugin: typeof feature$$1.plugin.process === 'function' ? features$$1[feature$$1.id] === true ? feature$$1.plugin() : feature$$1.plugin(features$$1[feature$$1.id]) : feature$$1.plugin,
+			id: feature$$1.id
 		};
@@ -158,0 +160,0 @@ });

lib/get-transformed-insertions.js

 // return a list of features to be inserted before or after cssdb features
 export default function getTransformedInsertions(insertions, placement) {
 	return Object.keys(insertions).map(
-		specificationId => [].concat(insertions[specificationId]).map(
+		id => [].concat(insertions[id]).map(
 			plugin => ({
 				[placement]: true,
 				plugin,
-				specificationId
+				id
 			})
@@ -10,0 +10,0 @@ )

package.json

 {
   "name": "postcss-preset-env",
-  "version": "3.5.0",
+  "version": "4.0.0",
   "description": "Convert modern CSS into something browsers understand",
@@ -31,4 +31,4 @@ "author": "Jonathan Neal <[e-mail]>",
     "browserslist": "^3.2.4",
-    "caniuse-lite": "^1.0.30000823",
-    "cssdb": "^1.6.0",
+    "caniuse-lite": "^1.0.30000824",
+    "cssdb": "^2.0.0",
     "postcss": "^6.0.21",
@@ -45,3 +45,4 @@ "postcss-apply": "^0.9.0",
     "postcss-dir-pseudo-class": "^3.0.0",
-    "postcss-focus-visible": "^2.0.0",
+    "postcss-focus-visible": "^3.0.0",
+    "postcss-focus-within": "^2.0.0",
     "postcss-font-family-system-ui": "^3.0.0",
@@ -48,0 +49,0 @@ "postcss-font-variant": "^3.0.0",

README.md

@@ -189,6 +189,6 @@ # PostCSS Preset Env [<img src="https://postcss.github.io/postcss/logo.svg" alt="PostCSS Logo" width="90" height="90" align="right">][postcss]
 The `features` key determines which CSS features to polyfill based upon their
-unique specification id found at [cssdb]. Pass `true` to enable a feature, and
-pass `false` to disable a feature. Pass an object `{}` to configure options of
-an individual polyfill. Any features not explicitly toggled here will be
-determined by [stage](#stage).
+unique id found at [cssdb]. Pass `true` to enable a feature, and pass `false`
+to disable a feature. Pass an object `{}` to configure options of an individual
+polyfill. Any features not explicitly toggled here will be determined by
+[stage](#stage).
 
@@ -195,0 +195,0 @@ ```js

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

Lines of code

452

increased by1.8%

Worsened metrics

Total package byte prevSize

37444

decreased by-0.53%

Dependency count

28

increased by3.7%

Dependency changes

• + Addedpostcss-focus-within@^2.0.0

• + Addedcssdb@2.2.0(transitive)

• + Addedpostcss-focus-visible@3.0.0(transitive)

• + Addedpostcss-focus-within@2.0.0(transitive)

• - Removedcssdb@1.6.0(transitive)

• - Removedpostcss-focus-visible@2.0.0(transitive)

• Updatedcaniuse-lite@^1.0.30000824

• Updatedcssdb@^2.0.0

• Updatedpostcss-focus-visible@^3.0.0