postcss-custom-properties : fix types and some small bugs (#139)

* postcss-custom-properties: fix types

* cleanup

* update change log

* more fixes

* add overrideImportFromWithRoot option

* cleanup

Author: romainmenke

plugin-packs/postcss-preset-env/.tape.js

@@ -235,6 +235,27 @@ module.exports = {
 			stage: 0
 		}
 	},
+	'import:ch88': {
+		message: 'supports { browsers: "chrome >= 88", importFrom: { customMedia, customProperties, customSelectors, environmentVariables } } usage',
+		options: {
+			browsers: 'chrome >= 88',
+			importFrom: {
+				customMedia: {
+					'--narrow-window': '(max-width: env(--sm))'
+				},
+				customProperties: {
+					'--order': '1'
+				},
+				customSelectors: {
+					':--heading': 'h1, h2, h3, h4, h5, h6'
+				},
+				environmentVariables: {
+					'--sm': '40rem'
+				}
+			},
+			stage: 0
+		}
+	},
 	'basic:export': {
 		message: 'supports { stage: 0 } usage',
 		options: {

plugin-packs/postcss-preset-env/test/import.ch88.expect.css

@@ -0,0 +1,14 @@
+.test-custom-properties {
+	order: var(--order);
+}
+
+@media (max-width: 40rem) {
+	.test-custom-media-queries {
+		order: 2;
+	}
+}
+
+h1.test-custom-selectors,h2.test-custom-selectors,h3.test-custom-selectors,h4.test-custom-selectors,h5.test-custom-selectors,h6.test-custom-selectors {
+		order: 3;
+	}
+

plugins/postcss-custom-properties/.tape.js

@@ -1,4 +1,5 @@
 const importWithProps = require('./test/import');
+const assert = require('assert').strict;
 
 module.exports = {
 	'basic': {
@@ -80,6 +81,17 @@ module.exports = {
 		expect: 'basic.import.expect.css',
 		result: 'basic.import.result.css'
 	},
+	'basic:import-cjs': {
+		message: 'supports { importFrom: "test/import-properties{-2}?.cjs" } usage',
+		options: {
+			importFrom: [
+				'test/import-properties.cjs',
+				'test/import-properties-2.cjs'
+			]
+		},
+		expect: 'basic.import.expect.css',
+		result: 'basic.import.result.css'
+	},
 	'basic:import-css': {
 		message: 'supports { importFrom: "test/import-properties{-2}?.css" } usage',
 		options: {
@@ -153,6 +165,25 @@ module.exports = {
 		expect: 'basic.import-override.expect.css',
 		result: 'basic.import-override.result.css'
 	},
+	'basic:import-override:inverse': {
+		message: 'importFrom with { preserve: false, overrideImportFromWithRoot: true  } should override importFrom properties',
+		options: {
+			preserve: false,
+			overrideImportFromWithRoot: true,
+			importFrom: {
+				customProperties: {
+					'--color': 'rgb(0, 0, 0)',
+					'--color-2': 'yellow',
+					'--ref-color': 'var(--color)',
+					'--margin': '0 10px 20px 30px',
+					'--shadow-color': 'rgb(0,0,0)',
+					'--z-index': 10
+				}
+			}
+		},
+		expect: 'basic.import-override.inverse.expect.css',
+		result: 'basic.import-override.inverse.result.css'
+	},
 	'basic:export': {
 		message: 'supports { exportTo: { customProperties: { ... } } } usage',
 		options: {
@@ -207,9 +238,7 @@ module.exports = {
 			global.__exportPropertiesString = require('fs').readFileSync('test/export-properties.scss', 'utf8');
 		},
 		after() {
-			if (global.__exportPropertiesString !== require('fs').readFileSync('test/export-properties.scss', 'utf8')) {
-				throw new Error('The original file did not match the freshly exported copy');
-			}
+			assert.strictEqual(global.__exportPropertiesString, require('fs').readFileSync('test/export-properties.scss', 'utf8'));
 		}
 	},
 	'basic:export-json': {
@@ -223,9 +252,7 @@ module.exports = {
 			global.__exportPropertiesString = require('fs').readFileSync('test/export-properties.json', 'utf8');
 		},
 		after() {
-			if (global.__exportPropertiesString !== require('fs').readFileSync('test/export-properties.json', 'utf8')) {
-				throw new Error('The original file did not match the freshly exported copy');
-			}
+			assert.strictEqual(global.__exportPropertiesString, require('fs').readFileSync('test/export-properties.json', 'utf8'));
 		}
 	},
 	'basic:export-js': {
@@ -239,9 +266,7 @@ module.exports = {
 			global.__exportPropertiesString = require('fs').readFileSync('test/export-properties.js', 'utf8');
 		},
 		after() {
-			if (global.__exportPropertiesString !== require('fs').readFileSync('test/export-properties.js', 'utf8')) {
-				throw new Error('The original file did not match the freshly exported copy');
-			}
+			assert.strictEqual(global.__exportPropertiesString, require('fs').readFileSync('test/export-properties.js', 'utf8'));
 		}
 	},
 	'basic:export-mjs': {
@@ -255,9 +280,7 @@ module.exports = {
 			global.__exportPropertiesString = require('fs').readFileSync('test/export-properties.mjs', 'utf8');
 		},
 		after() {
-			if (global.__exportPropertiesString !== require('fs').readFileSync('test/export-properties.mjs', 'utf8')) {
-				throw new Error('The original file did not match the freshly exported copy');
-			}
+			assert.strictEqual(global.__exportPropertiesString, require('fs').readFileSync('test/export-properties.mjs', 'utf8'));
 		}
 	},
 	'basic:export-css': {
@@ -271,9 +294,7 @@ module.exports = {
 			global.__exportPropertiesString = require('fs').readFileSync('test/export-properties.css', 'utf8');
 		},
 		after() {
-			if (global.__exportPropertiesString !== require('fs').readFileSync('test/export-properties.css', 'utf8')) {
-				throw new Error('The original file did not match the freshly exported copy');
-			}
+			assert.strictEqual(global.__exportPropertiesString, require('fs').readFileSync('test/export-properties.css', 'utf8'));
 		}
 	},
 	'basic:export-css-to': {
@@ -287,9 +308,7 @@ module.exports = {
 			global.__exportPropertiesString = require('fs').readFileSync('test/export-properties.css', 'utf8');
 		},
 		after() {
-			if (global.__exportPropertiesString !== require('fs').readFileSync('test/export-properties.css', 'utf8')) {
-				throw new Error('The original file did not match the freshly exported copy');
-			}
+			assert.strictEqual(global.__exportPropertiesString, require('fs').readFileSync('test/export-properties.css', 'utf8'));
 		}
 	},
 	'basic:export-css-to-type': {
@@ -303,9 +322,7 @@ module.exports = {
 			global.__exportPropertiesString = require('fs').readFileSync('test/export-properties.css', 'utf8');
 		},
 		after() {
-			if (global.__exportPropertiesString !== require('fs').readFileSync('test/export-properties.css', 'utf8')) {
-				throw new Error('The original file did not match the freshly exported copy');
-			}
+			assert.strictEqual(global.__exportPropertiesString, require('fs').readFileSync('test/export-properties.css', 'utf8'));
 		}
 	},
 	'basic:import-is-empty': {

plugins/postcss-custom-properties/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changes to PostCSS Custom Properties
 
+### Unreleased
+
+- Add `overrideImportFromWithRoot` option
+- Allow `.mjs` in `importFrom`
+- Converted to typescript
+- Correct typings for plugin options
+- Fix unicode support in custom property names
+
 ### 12.0.4 (January 7, 2022)
 
 - Fixed an issue that was causing synchronous mode to not being able to pick and transform properties that were added as part of the PostCSS flow. ([#132](https://github.com/csstools/postcss-plugins/issues/132))

plugins/postcss-custom-properties/README.md

@@ -137,6 +137,17 @@ postcssCustomProperties({
 See example imports written in [CSS](test/import-properties.css),
 [JS](test/import-properties.js), and [JSON](test/import-properties.json).
 
+### overrideImportFromWithRoot
+
+The `overrideImportFromWithRoot` option determines if properties added via `importFrom` are overridden by properties that exist in `:root`.
+Defaults to `false`.
+
+```js
+postcssCustomProperties({
+  overrideImportFromWithRoot: true
+});
+```
+
 ### exportTo
 
 The `exportTo` option specifies destinations where Custom Properties can be exported

plugins/postcss-custom-properties/index.d.ts

@@ -11,7 +11,14 @@
   "bugs": "https://github.com/csstools/postcss-plugins/issues",
   "main": "dist/index.cjs",
   "module": "dist/index.mjs",
-  "types": "index.d.ts",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs",
+      "default": "./dist/index.mjs"
+    }
+  },
   "files": [
     "CHANGELOG.md",
     "LICENSE.md",