postcss-custom-selectors - npm Package Compare versions

Comparing version 7.1.2 to 7.1.3

CHANGELOG.md

 # Changes to PostCSS Custom Selectors
 
+### 7.1.3 (April 10, 2023)
+
+- Updated `@csstools/css-tokenizer` to `2.1.1` (patch)
+- Updated `@csstools/css-parser-algorithms` to `2.1.1` (patch)
+- Updated `@csstools/cascade-layer-name-parser` to `1.0.2` (patch)
+
 ### 7.1.2 (February 8, 2023)
@@ -4,0 +10,0 @@

dist/transform-rule.d.ts

@@ -1,3 +0,3 @@
-import { Result, Rule } from 'postcss';
+import type { Result, Rule } from 'postcss';
 import type { Root } from 'postcss-selector-parser';
 export declare function transformRule(rule: Rule, result: Result, customSelectors: Map<string, Root>): null | string;

package.json

 {
 	"name": "postcss-custom-selectors",
 	"description": "Use Custom Selectors in CSS",
-	"version": "7.1.2",
+	"version": "7.1.3",
 	"contributors": [
@@ -52,5 +52,5 @@ {
 	"dependencies": {
-		"@csstools/cascade-layer-name-parser": "^1.0.0",
-		"@csstools/css-parser-algorithms": "^2.0.0",
-		"@csstools/css-tokenizer": "^2.0.0",
+		"@csstools/cascade-layer-name-parser": "^1.0.2",
+		"@csstools/css-parser-algorithms": "^2.1.1",
+		"@csstools/css-tokenizer": "^2.1.1",
 		"postcss-selector-parser": "^6.0.4"
@@ -61,13 +61,11 @@ },
 	},
+	"devDependencies": {
+		"@csstools/postcss-tape": "*"
+	},
 	"scripts": {
-		"prebuild": "npm run clean",
 		"build": "rollup -c ../../rollup/default.mjs",
-		"clean": "node -e \"fs.rmSync('./dist', { recursive: true, force: true }); fs.mkdirSync('./dist');\"",
 		"docs": "node ../../.github/bin/generate-docs/install.mjs && node ../../.github/bin/generate-docs/readme.mjs",
-		"lint": "npm run lint:eslint && npm run lint:package-json",
-		"lint:eslint": "eslint ./src --ext .js --ext .ts --ext .mjs --no-error-on-unmatched-pattern",
-		"lint:package-json": "node ../../.github/bin/format-package-json.mjs",
-		"prepublishOnly": "npm run clean && npm run build && npm run test",
-		"test": "node .tape.mjs && npm run test:exports",
-		"test:exports": "node ./test/_import.mjs && node ./test/_require.cjs",
+		"lint": "node ../../.github/bin/format-package-json.mjs",
+		"prepublishOnly": "npm run build && npm run test",
+		"test": "node .tape.mjs && node ./test/_import.mjs && node ./test/_require.cjs",
 		"test:rewrite-expects": "REWRITE_EXPECTS=true node .tape.mjs"
@@ -74,0 +72,0 @@ },

README.md

@@ -82,2 +82,29 @@ # PostCSS Custom Selectors [<img src="https://postcss.github.io/postcss/logo.svg" alt="PostCSS Logo" width="90" height="90" align="right">][PostCSS]
 
+## Modular CSS Processing
+
+If you're using Modular CSS such as, CSS Modules, `postcss-loader` or `vanilla-extract` to name a few, you'll probably
+notice that custom selectors are not being resolved. This happens because each file is processed separately so
+unless you import the custom selector definitions in each file, they won't be resolved.
+
+To overcome this, we recommend using the [PostCSS Global Data](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-global-data#readme)
+plugin which allows you to pass a list of files that will be globally available. The plugin won't inject any extra code
+in the output but will provide the context needed to resolve custom selectors.
+
+For it to run it needs to be placed before the [PostCSS Custom Selectors] plugin.
+
+```js
+const postcss = require('postcss');
+const postcssCustomSelectors = require('postcss-custom-selectors');
+const postcssGlobalData = require('@csstools/postcss-global-data');
+
+postcss([
+	postcssGlobalData({
+		files: [
+			'path/to/your/custom-selectors.css'
+		]
+	}),
+	postcssCustomSelectors(/* pluginOptions */)
+]).process(YOUR_CSS /*, processOptions */);
+```
+
 [cli-url]: https://github.com/csstools/postcss-plugins/actions/workflows/test.yml?query=workflow/test
@@ -84,0 +111,0 @@ [css-url]: https://cssdb.org/#custom-selectors

No alert changes

Improved metrics

Total package byte prevSize

18955

increased by5.96%

Number of lines in readme file

117

increased by30%

Worsened metrics

Dev dependency count

1

increased byInfinity%

Dependency changes

• Updated@csstools/cascade-layer-name-parser@^1.0.2

• Updated@csstools/css-parser-algorithms@^2.1.1

• Updated@csstools/css-tokenizer@^2.1.1