vue-inbrowser-compiler-utils - npm Package Compare versions

Comparing version 4.42.0 to 4.43.0

CHANGELOG.md

@@ -6,2 +6,13 @@ # Change Log
 
+# [4.43.0](https://github.com/vue-styleguidist/vue-styleguidist/compare/v4.42.0...v4.43.0) (2021-11-21)
+
+
+### Features
+
+* **utils:** add selector combinators support for styleScoper ([283f805](https://github.com/vue-styleguidist/vue-styleguidist/commit/283f805c12a9b24358ed9cfe9ff36a349fd4e00e))
+
+
+
+
+
 # [4.42.0](https://github.com/vue-styleguidist/vue-styleguidist/compare/v4.41.3...v4.42.0) (2021-11-18)
@@ -8,0 +19,0 @@

lib/vue-inbrowser-compiler-utils.cjs.js

@@ -26,3 +26,3 @@ 'use strict';
             selector = beforeVDeep;
-            after = afterVDeep + after;
+            after = (afterVDeep + after).trim();
         }
@@ -38,12 +38,13 @@ // deal with :scope pseudo selectors
         }
-        // deal with other pseudo selectors
-        var pseudo = '';
-        if (selector && selector.match(/:/)) {
-            var parts = selector.split(/:/);
-            selector = parts[0];
-            pseudo = ':' + parts[1];
-        }
-        selector = selector.trim() + ' ';
-        selector = selector.replace(/ /g, suffix + pseudo + ' ');
-        return selector + after;
+        selector = selector.split(/\s+/).filter(function (part) { return !!part; }).map(function (part) {
+            // combinators
+            if (/^[>~+]$/.test(part)) {
+                return part;
+            }
+            // deal with other pseudo selectors
+            var _a = part.split(/:{1,2}/), main = _a[0], rest = _a.slice(1);
+            var pseudo = rest.map(function (piece) { return ":" + piece; }).join('');
+            return main + suffix + pseudo;
+        }).join(' ');
+        return selector + ' ' + after;
     });
@@ -50,0 +51,0 @@ return css;

lib/vue-inbrowser-compiler-utils.esm.js

@@ -18,3 +18,3 @@ import camelCase from 'camelcase';
             selector = beforeVDeep;
-            after = afterVDeep + after;
+            after = (afterVDeep + after).trim();
         }
@@ -30,12 +30,13 @@ // deal with :scope pseudo selectors
         }
-        // deal with other pseudo selectors
-        var pseudo = '';
-        if (selector && selector.match(/:/)) {
-            var parts = selector.split(/:/);
-            selector = parts[0];
-            pseudo = ':' + parts[1];
-        }
-        selector = selector.trim() + ' ';
-        selector = selector.replace(/ /g, suffix + pseudo + ' ');
-        return selector + after;
+        selector = selector.split(/\s+/).filter(function (part) { return !!part; }).map(function (part) {
+            // combinators
+            if (/^[>~+]$/.test(part)) {
+                return part;
+            }
+            // deal with other pseudo selectors
+            var _a = part.split(/:{1,2}/), main = _a[0], rest = _a.slice(1);
+            var pseudo = rest.map(function (piece) { return ":" + piece; }).join('');
+            return main + suffix + pseudo;
+        }).join(' ');
+        return selector + ' ' + after;
     });
@@ -42,0 +43,0 @@ return css;

package.json

 {
 	"name": "vue-inbrowser-compiler-utils",
-	"version": "4.42.0",
+	"version": "4.43.0",
 	"description": "use this with vue-inbrowser-compiler to allow jsx compilation",
 	"module": "lib/vue-inbrowser-compiler-utils.esm.js",
 	"main": "lib/vue-inbrowser-compiler-utils.cjs.js",
-	"types": "lib/index.d.ts",
+	"types": "lib/types/index.d.ts",
 	"scripts": {
-		"compile": "tsc --emitDeclarationOnly -p ./tsconfig.build.json && rollup -c",
-		"compile:watch": "rollup -c --watch && tsc --emitDeclarationOnly -p ./tsconfig.build.json --watch"
+		"compile": "rollup -c",
+		"compile:watch": "rollup -c --watch"
 	},
@@ -26,5 +26,5 @@ "keywords": [
 		"@rollup/plugin-node-resolve": "9.0.0",
+		"@rollup/plugin-typescript": "8.3.0",
 		"@types/domhandler": "2.4.2",
 		"rollup": "2.56.3",
-		"rollup-plugin-typescript2": "0.30.0",
 		"vue": "2.6.14"
@@ -40,3 +40,3 @@ },
 	},
-	"gitHead": "8ba9d774ec311350937ba1d33d1aa5580c13eb2a"
+	"gitHead": "8cc3f87b40979e539f1b44bcf7e2bd268b6548ae"
 }

rollup.config.js

 import * as path from 'path'
 import nodeResolve from '@rollup/plugin-node-resolve'
 import commonjs from '@rollup/plugin-commonjs'
-import typescript from 'rollup-plugin-typescript2'
+import typescript from '@rollup/plugin-typescript'
 import pkg from './package.json'
@@ -25,6 +25,6 @@
 		typescript({
-			check: false,
-			useTsconfigDeclarationDir: true,
 			tsconfig: './tsconfig.build.json',
-			cacheRoot: '../../node_modules/.rpt2_cache'
+			cacheDir: '../../node_modules/.rpt2_cache',
+			declarationDir: 'types',
+			rootDir: 'src'
 		}),
@@ -31,0 +31,0 @@ // Allow bundling cjs modules (unlike webpack, rollup doesn't understand cjs)

src/__tests__/styleScoper.ts

@@ -10,4 +10,4 @@ import scoper from '../styleScoper'
 	it('should scope css pseudo selectors', () => {
-		const scopedCSS = scoper(`.bonjour:before{color:blue;}`, '[test]')
-		expect(scopedCSS).toBe('.bonjour[test]:before {color:blue;}')
+		const scopedCSS = scoper(`.bonjour:before, .hello:hover::after{color:blue;}`, '[test]')
+		expect(scopedCSS).toBe('.bonjour[test]:before ,.hello[test]:hover:after {color:blue;}')
 	})
@@ -31,5 +31,10 @@
 		expect(scopedCSS).toBe(
-			'.bonjour[test] .hello[test]  .deepClass,.salut[test] .goodbye[test]  .deepClass{color:blue;}'
+			'.bonjour[test] .hello[test] .deepClass,.salut[test] .goodbye[test] .deepClass{color:blue;}'
 		)
 	})
+
+	it('should scope css with selector combinators', () => {
+		const scopedCSS = scoper(`.bonjour > .hello + .salut ~ .goodbye {color:blue;}`, '[test]')
+		expect(scopedCSS).toBe('.bonjour[test] > .hello[test] + .salut[test] ~ .goodbye[test] {color:blue;}')
+	})
 })

src/styleScoper.ts

@@ -8,3 +8,3 @@ /* eslint-disable no-control-regex */
 	// `after` is going to contain eithe a comma or an opening curly bracket
-	css = css.replace(re, function (full, selector, after) {
+	css = css.replace(re, function (full: string, selector: string, after: string) {
 		// if non-rule delimiter
@@ -20,3 +20,3 @@ if (selector.match(/^\s*(@media|@keyframes|to|from|@font-face)/)) {
 			selector = beforeVDeep
-			after = afterVDeep + after
+			after = (afterVDeep + after).trim()
 		}
@@ -34,14 +34,15 @@
 
-		// deal with other pseudo selectors
-		let pseudo = ''
-		if (selector && selector.match(/:/)) {
-			const parts = selector.split(/:/)
-			selector = parts[0]
-			pseudo = ':' + parts[1]
-		}
+		selector = selector.split(/\s+/).filter(part => !!part).map(part => {
+			// combinators
+			if (/^[>~+]$/.test(part)) {
+				return part
+			}
 
-		selector = selector.trim() + ' '
-		selector = selector.replace(/ /g, suffix + pseudo + ' ')
+			// deal with other pseudo selectors
+			const [main, ...rest] = part.split(/:{1,2}/)
+			let pseudo = rest.map(piece => `:${piece}`).join('')
+			return main + suffix + pseudo
+		}).join(' ')
 
-		return selector + after
+		return selector + ' ' + after
 	})
@@ -48,0 +49,0 @@

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

61391

increased by0.38%

Lines of code

1617

increased by0.43%

No dependency changes