postcss-custom-selectors - npm Package Compare versions

Comparing version 6.0.3 to 7.0.0

CHANGELOG.md

 # Changes to PostCSS Custom Selectors
 
+### 7.0.0 (November 14, 2022)
+
+- Updated: Support for Node v14+ (major).
+- Removed: `importFrom` feature (breaking).
+- Removed: `exportTo` feature (breaking).
+- Fixed: follow the specification and use `:is()` in transformed selectors (breaking).
+- Added: Support for `@scope` and `@container` as parent rules of `@custom-selector`.
+- Fixed: Do not throw when a selector is invalid, show a warning instead.
+
+```diff
+@custom-selector :--heading h1, h2, h3;
+
+article :--heading + p {
+	margin-top: 0;
+}
+
+/* becomes */
+
+- article h1 + p,article h2 + p,article h3 + p {
++ article :is(h1, h2, h3) + p {
+	margin-top: 0;
+}
+```
+
 ### 6.0.3 (June 4, 2022)
 
-- Fixed: allow any valid ident in custom media (`@custom-selector :--🧑🏾‍🎤 .singer`)
+- Fixed: allow any valid ident in custom selectors (`@custom-selector :--🧑🏾‍🎤 .singer`)
 
@@ -7,0 +31,0 @@ ### 6.0.2 (June 3, 2022)

package.json

 {
 	"name": "postcss-custom-selectors",
 	"description": "Use Custom Selectors in CSS",
-	"version": "6.0.3",
+	"version": "7.0.0",
 	"contributors": [
@@ -32,6 +32,7 @@ {
 	"engines": {
-		"node": "^12 || ^14 || >=16"
+		"node": "^14 || ^16 || >=18"
 	},
 	"main": "dist/index.cjs",
 	"module": "dist/index.mjs",
+	"types": "dist/index.d.ts",
 	"exports": {
@@ -54,6 +55,6 @@ ".": {
 	"peerDependencies": {
-		"postcss": "^8.3"
+		"postcss": "^8.4"
 	},
 	"scripts": {
-		"build": "rollup -c ../../rollup/default.js",
+		"build": "rollup -c ../../rollup/default.mjs",
 		"clean": "node -e \"fs.rmSync('./dist', { recursive: true, force: true });\"",
@@ -65,5 +66,5 @@ "docs": "node ../../.github/bin/generate-docs/install.mjs && node ../../.github/bin/generate-docs/readme.mjs",
 		"prepublishOnly": "npm run clean && npm run build && npm run test",
-		"test": "node .tape.cjs && node .tape.mjs && npm run test:exports",
+		"test": "node .tape.mjs && npm run test:exports",
 		"test:exports": "node ./test/_import.mjs && node ./test/_require.cjs",
-		"test:rewrite-expects": "REWRITE_EXPECTS=true node .tape.mjs && REWRITE_EXPECTS=true node .tape.cjs"
+		"test:rewrite-expects": "REWRITE_EXPECTS=true node .tape.mjs"
 	},
@@ -70,0 +71,0 @@ "homepage": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-custom-selectors#readme",

README.md

@@ -16,3 +16,3 @@ # PostCSS Custom Selectors [<img src="https://postcss.github.io/postcss/logo.svg" alt="PostCSS Logo" width="90" height="90" align="right">][postcss]
 
-article h1 + p,article h2 + p,article h3 + p {
+article :is(h1, h2, h3) + p {
 	margin-top: 0;
@@ -69,3 +69,3 @@ }
 
-article h1 + p,article h2 + p,article h3 + p {
+article :is(h1, h2, h3) + p {
 	margin-top: 0;
@@ -79,81 +79,2 @@ }
 
-### importFrom
-
-The `importFrom` option specifies sources where custom selectors can be
-imported from, which might be CSS, JS, and JSON files, functions, and directly
-passed objects.
-
-```js
-postcssCustomSelectors({
-	importFrom: 'path/to/file.css' // => @custom-selector :--heading h1, h2, h3;
-});
-```
-
-```pcss
-article :--heading + p {
-	margin-top: 0;
-}
-
-/* becomes */
-
-article h1 + p, article h2 + p, article h3 + p {}
-```
-
-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 selectors using the `customProperties` or
-`custom-properties` key.
-
-```js
-postcssCustomSelectors({
-	importFrom: [
-		'path/to/file.css',
-		'and/then/this.js',
-		'and/then/that.json',
-		{
-			customSelectors: { ':--heading': 'h1, h2, h3' }
-		},
-		() => {
-			const customProperties = { ':--heading': 'h1, h2, h3' };
-
-			return { customProperties };
-		}
-	]
-});
-```
-
-### exportTo
-
-The `exportTo` option specifies destinations where custom selectors can be
-exported to, which might be CSS, JS, and JSON files, functions, and directly
-passed objects.
-
-```js
-postcssCustomSelectors({
-	exportTo: 'path/to/file.css' // @custom-selector :--heading h1, h2, h3;
-});
-```
-
-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 selectors using the `customProperties` or
-`custom-properties` key.
-
-```js
-const cachedObject = { customSelectors: {} };
-
-postcssCustomSelectors({
-	exportTo: [
-		'path/to/file.css',   // @custom-selector :--heading h1, h2, h3;
-		'and/then/this.js',   // module.exports = { customSelectors: { ':--heading': 'h1, h2, h3' } }
-		'and/then/this.mjs',  // export const customSelectors = { ':--heading': 'h1, h2, h3' } }
-		'and/then/that.json', // { "custom-selectors": { ":--heading": "h1, h2, h3" } }
-		cachedObject,
-		customProperties => {
-			customProperties    // { ':--heading': 'h1, h2, h3' }
-		}
-	]
-});
-```
-
 [cli-url]: https://github.com/csstools/postcss-plugins/actions/workflows/test.yml?query=workflow/test
@@ -160,0 +81,0 @@ [css-url]: https://cssdb.org/#custom-selectors

Fixed alerts

Dynamic require

Supply chain risk

Dynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.

Found 1 instance in 1 package

Filesystem access

Supply chain risk

Accesses the file system, and could potentially read sensitive data.

Found 1 instance in 1 package

Improved metrics

Number of package files

10

increased by66.67%

Number of low supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

14975

decreased by-27.31%

Number of lines in readme file

88

decreased by-47.31%

No dependency changes