Add pseudo element support and rename pseudo classes plugin to pseudo

packages/stylishly-pseudo-classes/package.json → packages/stylishly-pseudo/package.json

@@ -1,12 +1,12 @@
 {
-  "name": "stylishly-pseudo-classes",
+  "name": "stylishly-pseudo",
   "version": "0.8.0",
   "description": "",
-  "main": "lib/pseudoClasses.js",
+  "main": "lib/pseudo.js",
   "author": "Nathan Marks <info@nathanmarks.io> (http://nathanmarks.io)",
   "license": "MIT",
   "repository": "https://github.com/nathanmarks/stylishly",
   "peerDependencies": {
     "stylishly": "^0.8.0"
   }
-}
+}

packages/stylishly-pseudo-classes/src/pseudoClasses.js → packages/stylishly-pseudo/src/pseudo.js

@@ -1,6 +1,6 @@
-const pseudoRegexp = /^([a-z0-9_-]+)?(:[a-z0-9_-]+)$/i;
+const pseudoRegexp = /^([a-z0-9_-]+)?(::?[a-z0-9_-]+)$/i;
 
-export default function pseudoClasses() {
+export default function pseudo() {
   function parseRuleHook(rule) {
     const matches = rule.name.match(pseudoRegexp);
     if (matches !== null) {

test/fixtures/styleSheets/kitchenSink.js

@@ -1,7 +1,7 @@
 import { createStyleSheet } from 'packages/stylishly/src/styleSheet';
 import { createPluginRegistry } from 'packages/stylishly/src/pluginRegistry';
 import vendorPrefixer from 'packages/stylishly-vendor-prefixer/src';
-import pseudoClasses from 'packages/stylishly-pseudo-classes/src/pseudoClasses';
+import pseudo from 'packages/stylishly-pseudo/src/pseudo';
 import units from 'packages/stylishly-units/src/units';
 import atRules from 'packages/stylishly-at-rules/src/atRules';
 import nested from 'packages/stylishly-nested/src/nested';
@@ -12,7 +12,7 @@ export function createKitchenSinkSheet(theme = { id: 'a', color: 'red', hoverCol
   pluginRegistry.registerPlugins(
     nested(),
     atRules(),
-    pseudoClasses(),
+    pseudo(),
     units(),
     vendorPrefixer()
   );
@@ -74,7 +74,7 @@ export function createSimple() {
   pluginRegistry.registerPlugins(
     nested(),
     atRules(),
-    pseudoClasses(),
+    pseudo(),
     units(),
     vendorPrefixer()
   );

test/integration/complexSelectors.test.js

@@ -3,12 +3,12 @@ import { assert } from 'chai';
 import { createStyleSheet, getClassNames } from 'packages/stylishly/src/styleSheet';
 import { createPluginRegistry } from 'packages/stylishly/src/pluginRegistry';
 import nested from 'packages/stylishly-nested/src/nested';
-import pseudoClasses from 'packages/stylishly-pseudo-classes/src/pseudoClasses';
+import pseudo from 'packages/stylishly-pseudo/src/pseudo';
 
 describe('complex selectors', () => {
   it('should create a rule with chained, descendant and pseudo selectors', () => {
     const pluginRegistry = createPluginRegistry();
-    pluginRegistry.registerPlugins(nested(), pseudoClasses());
+    pluginRegistry.registerPlugins(nested(), pseudo());
 
     const styleSheet = createStyleSheet('Foo', () => {
       return {
@@ -43,7 +43,7 @@ describe('complex selectors', () => {
 
   it('should create a rule with chained, reverse descendant and pseudo selectors', () => {
     const pluginRegistry = createPluginRegistry();
-    pluginRegistry.registerPlugins(nested(), pseudoClasses());
+    pluginRegistry.registerPlugins(nested(), pseudo());
 
     const styleSheet = createStyleSheet('Foo', () => {
       return {

test/integration/pseudoClasses.test.js

@@ -3,12 +3,12 @@ import { assert } from 'chai';
 import { createStyleSheet, getClassNames } from 'packages/stylishly/src/styleSheet';
 import { createPluginRegistry } from 'packages/stylishly/src/pluginRegistry';
 import nested from 'packages/stylishly-nested/src/nested';
-import pseudoClasses from 'packages/stylishly-pseudo-classes/src/pseudoClasses';
+import pseudo from 'packages/stylishly-pseudo/src/pseudo';
 
 describe('pseudo classes', () => {
   it('should create a rule with a pseudo class and expose the className', () => {
     const pluginRegistry = createPluginRegistry();
-    pluginRegistry.registerPlugins(nested(), pseudoClasses());
+    pluginRegistry.registerPlugins(nested(), pseudo());
 
     const styleSheet = createStyleSheet('Foo', () => {
       return {
@@ -33,7 +33,7 @@ describe('pseudo classes', () => {
 
   it('should add the pseudo class after the theme ID', () => {
     const pluginRegistry = createPluginRegistry();
-    pluginRegistry.registerPlugins(nested(), pseudoClasses());
+    pluginRegistry.registerPlugins(nested(), pseudo());
 
     const styleSheet = createStyleSheet('Foo', () => {
       return {

test/integration/pseudoElements.test.js

@@ -0,0 +1,33 @@
+/* eslint-env mocha */
+import { assert } from 'chai';
+import { createStyleSheet, getClassNames } from 'packages/stylishly/src/styleSheet';
+import { createPluginRegistry } from 'packages/stylishly/src/pluginRegistry';
+import nested from 'packages/stylishly-nested/src/nested';
+import pseudo from 'packages/stylishly-pseudo/src/pseudo';
+
+describe('pseudo elements', () => {
+  it('should create a rule with a pseudo element and expose the className', () => {
+    const pluginRegistry = createPluginRegistry();
+    pluginRegistry.registerPlugins(nested(), pseudo());
+
+    const styleSheet = createStyleSheet('Foo', () => {
+      return {
+        'container::after': {
+          color: 'red',
+        },
+      };
+    });
+
+    const rules = styleSheet.resolveStyles({}, pluginRegistry);
+
+    assert.strictEqual(rules.length, 1, 'has 1 rule');
+    assert.strictEqual(rules[0].type, 'style');
+    assert.strictEqual(rules[0].selectorText, '.foo__container::after');
+    assert.strictEqual(rules[0].declaration.color, 'red');
+
+    const classes = getClassNames(rules);
+
+    assert.strictEqual(Object.keys(classes).length, 1, 'should return 1 class name');
+    assert.strictEqual(classes.container, 'foo__container', 'should have the container className');
+  });
+});