add support for self referencing pseudo element

azukaar · Oct 19, 2018 · a1c796c · a1c796c
1 parent aa966b6
commit a1c796c
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 2 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "electron-css",
-  "version": "0.12.1",
+  "version": "0.13.0",
   "description": "Proper, framework agnostic Style in JS library, without any of the fuss of CSS",
   "main": "dist/index.js",
   "files": [

diff --git a/src/index.js b/src/index.js
@@ -164,6 +164,8 @@ const jsonToCss = function (_css, className, refresh = () => {}) {
       const eventKey = caseConvert(key.replace(/^on[A-Z]/, match => match.substr(-1).toLowerCase()));
 
       master += jsonToCss(_css[key], className + ':' + eventKey);
+    }  else if (key.match(/^:/)) {
+      master += jsonToCss(_css[key], className + key);
     } else if (typeof _css[key] !== null && typeof _css[key] === 'object' && !Array.isArray(_css[key]) && key.match(/^>/)) {
       master += jsonToCss(_css[key], className + ' ' + key.substr(2));
     } else if (typeof _css[key] !== null && typeof _css[key] === 'object' && !Array.isArray(_css[key])) {
@@ -421,6 +423,10 @@ function createTargetStyle() {
   }
 }
 
+const is = {};
+
+pseudoFunctionsList.forEach((name) => is[name] = (arg) => `:${caseConvert(name)}(${arg})`.replace('(:', '('));
+
 export {
   CSS,
   calc,
@@ -432,6 +438,7 @@ export {
   setDocumentElement,
   color,
   units,
+  is,
   constants,
   DynamicCSS
 };
diff --git a/tests/index.spec.js b/tests/index.spec.js
@@ -1,7 +1,7 @@
 import * as CONSTANTS from '../src/config';
 CONSTANTS.GC_COLLECT_TIME = 1000;
 
-import {CSS, calc, classes, resetCSS, Keyframes, MediaQuery, DynamicCSS} from '../src/index';
+import {CSS, calc, classes, resetCSS, Keyframes, MediaQuery, DynamicCSS, is} from '../src/index';
 import color from '../src/color';
 import {borderStyle, transform} from '../src/constants';
 import units from '../src/units';
@@ -242,6 +242,19 @@ describe('', () => {
       expect(getSheet().cssRules[2].style.color).toBe('blue');
       expect(getSheet().cssRules[2].selectorText).toBe('.class0:hover:focus .class1');
     });
+
+    it('use self referencing pseudo-elements function', () => {
+      CSS({
+        color: 'red',
+        [is.not(is.nthChild(1))]: {
+          color: 'blue'
+        }
+      });
+
+      expect(is.not(is.nthChild(1))).toBe(':not(nth-child(1))');
+      expect(getSheet().cssRules[0].style.color).toBe('red');
+      expect(getSheet().cssRules[1].selectorText).toBe('.class0:not(nth-child(1))');
+    });
   });
 
   describe('Keyframes Creation', () => {