Added postProcessCssNamespace to define different strategy to wrap cl… (

#15)

* Added postProcessCssNamespace to define different strategy to wrap class definitions

* Renamed postProcessCssNamespace to rawCssNamespace

* Added comment explaining regex and renamed it

* Refactored tests descriptions  and added extra case for the bug mentioned

* Added documentation about new behaviour

* Bumped the version to 0.1.0 as minor release

README.md

@@ -2,10 +2,10 @@
 
 ## Getting Started
 
-1. Add the plugin with `yarn add @quickbaseoss/babel-plugin-styled-components-css-namespace` or `npm install @quickbaseoss/babel-plugin-styled-components-css-namespace`
-1. Include the plugin in your babel configuration.
+1.  Add the plugin with `yarn add @quickbaseoss/babel-plugin-styled-components-css-namespace` or `npm install @quickbaseoss/babel-plugin-styled-components-css-namespace`
+1.  Include the plugin in your babel configuration.
 
-``` json
+```json
 "babel": {
   "plugins": [
     "@quickbaseoss/babel-plugin-styled-components-css-namespace"
@@ -15,7 +15,7 @@
 
 If you are also using [babel-plugin-styled-components](https://github.com/styled-components/babel-plugin-styled-components), you must place `styled-components-css-namespace` **before** `styled-components`.
 
-``` json
+```json
 "babel": {
   "plugins": [
     "@quickbaseoss/babel-plugin-styled-components-css-namespace",
@@ -30,16 +30,18 @@ If you are also using [babel-plugin-styled-components](https://github.com/styled
 
 Without adding options, this plugin will duplicate the class name generated by `styled-components` as suggested in [this issue](https://github.com/styled-components/styled-components/issues/613).
 
-``` css
+```css
 // output
-.hzy34z.hzy34z {background-color: blue;}
+.hzy34z.hzy34z {
+  background-color: blue;
+}
 ```
 
-### Single Namespace
+### Simple Namespace
 
 You can provide a `cssNamespace` to use instead of duplicating the class name. Remember to include a DOM element with that class that wraps the styled-component.
 
-``` json
+```json
 "babel": {
   "plugins": [
     ["@quickbaseoss/babel-plugin-styled-components-css-namespace", {"cssNamespace": "moreSpecific"}],
@@ -48,29 +50,93 @@ You can provide a `cssNamespace` to use instead of duplicating the class name. R
 }
 ```
 
-``` css
+```css
 // output
-.moreSpecific .hzy34z {background-color: blue;}
+.moreSpecific .hzy34z {
+  background-color: blue;
+}
 ```
 
-### Multiple Namespaces
+### Cascade Namespaces
 
 You can provide an array `cssNamespace`s to use instead of duplicating the class name. Remember to include a DOM element with those classes that wraps the styled-component.
 
-``` json
+```json
 "babel": {
   "plugins": [
-    ["@quickbaseoss/babel-plugin-styled-components-css-namespace", {"cssNamespace": ["moreSpecific", "reallySpecific", "extraSpecific"]}],
+    ["@quickbaseoss/babel-plugin-styled-components-css-namespace", {
+      "cssNamespace": ["moreSpecific", "reallySpecific", "extraSpecific"]
+    }],
     "styled-components"
   ]
 }
 ```
 
-``` css
+```css
 // output
-.moreSpecific .reallySpecific .extraSpecific .hzy34z {background-color: blue;}
+.moreSpecific .reallySpecific .extraSpecific .hzy34z {
+  background-color: blue;
+}
+```
+
+### Multiple Namespaces
+
+The plugin contains an option to define an alternative strategy to apply the css namespace. This behaviour allow developers to define what type of namespace. Currently, if one or more namespaces are added to `cssNamespace` the items are transformed into classes and join them.
+e.g.
+
+```js
+cssNamespace: ["body", "something"];
+```
+
+This will generate the rule `.body .something & { ... }` as namespace if you don't have a self reference in your component.
+
+Using the alternative strategy allow defining the type of namespace wished and, also, allow multiple namespaces.
+e.g.
+
+```js
+rawCssNamespace: ["body #rootElementId .specificClass", "#altRootElement"];
 ```
 
+This will generate this rule for a component that does not start with a self-reference.
+
+```css
+body #rootElementId .specificClass,
+#altRootElement {
+  & {
+    /* css styled block here */
+  }
+}
+```
+
+But, it would generate the following rule for a component that starts with a self-reference.
+
+```css
+body #rootElementId .specificClass,
+#altRootElement {
+  /* css styled block here */
+}
+```
+
+**Note I:** The key `rawCssNamespace` should replace the `cssNamespace`. If both exists at the same level, the `cssNamespace` takes precedence.
+
+Using the `rawCssNamespace` correctly e.g.
+
+```json
+"babel": {
+  "plugins": [
+    ["@quickbaseoss/babel-plugin-styled-components-css-namespace", {
+      "rawCssNamespace": [
+        "body #rootElementId .specificClass",
+        "#altRootElement"
+      ]
+    }],
+    "styled-components"
+  ]
+}
+```
+
+**Note II:** This new alternative strategy is supposed to solve the issue below. It is intend to be experimental at the moment, then, after getting community feedback it might become official.
+
 ## Known Issues
 
 The plugin currently has fairly simple logic for applying a more specific selector. While this covers most use cases, you may see issues if you use sibling or child selectors with `&`. For example, `& + &` or `.invalid &` will place the more specific selector in the wrong place.
@@ -91,9 +157,9 @@ This plugin will automatically add additional css namespaces or duplicated class
 
 ## Developing
 
-1. Clone the repo with `git clone https://github.com/QuickBase/babel-plugin-styled-components-css-namespace.git`
-1. `yarn install` (prefer `yarn` although `npm` should work as well)
-1. `yarn test` to run the tests
+1.  Clone the repo with `git clone https://github.com/QuickBase/babel-plugin-styled-components-css-namespace.git`
+1.  `yarn install` (prefer `yarn` although `npm` should work as well)
+1.  `yarn test` to run the tests
 
 # Publishing
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quickbaseoss/babel-plugin-styled-components-css-namespace",
-  "version": "0.0.10",
+  "version": "0.1.0",
   "description": "A babel plugin to add css namespaces to all styled components.",
   "keywords": [
     "styled-components",

src/tests/__snapshots__/cssNamespace.test.js.snap

@@ -98,6 +98,62 @@ export default MyStyledComponent;
 "
 `;
 
+exports[`creates wrappers as part of the simple raw wrapper not affecting css rules applied in the styled components 1`] = `
+"
+const styled = { div() {} };
+
+const MyStyledComponent = styled.div\`
+  label + & {
+    background-color: 'yellow';
+  }
+\`;
+
+export default MyStyledComponent;
+
+      ↓ ↓ ↓ ↓ ↓ ↓
+
+const styled = { div() {} };
+
+const MyStyledComponent = styled.div\`
+body .specific .rule, #different-wrapper {
+  label + & {
+    background-color: 'yellow';
+  }
+}
+\`;
+
+export default MyStyledComponent;
+"
+`;
+
+exports[`creates wrappers as part of the simple raw wrapper not affecting css rules applied in the styled components 2`] = `
+"
+const styled = { div() {} };
+
+const MyStyledComponent = styled.div\`
+  & + & {
+    background-color: 'yellow';
+  }
+\`;
+
+export default MyStyledComponent;
+
+      ↓ ↓ ↓ ↓ ↓ ↓
+
+const styled = { div() {} };
+
+const MyStyledComponent = styled.div\`
+body .specific .rule, #different-wrapper {
+  & + & {
+    background-color: 'yellow';
+  }
+}
+\`;
+
+export default MyStyledComponent;
+"
+`;
+
 exports[`does not add extra selectors to child helper styles 1`] = `
 "
 const styled = { div() {} };
@@ -176,6 +232,48 @@ export default MyStyledComponent;
 "
 `;
 
+exports[`does not add namespace to keyframes as part of the simple raw wrapper 1`] = `
+"
+const styled = { div() {} };
+
+const mymove = styled.keyframes\`
+  0% {
+    color: transparent;
+  }
+  100% {
+    color: radboats;
+  }
+\`;
+
+const MyStyledComponent = styled.div\`
+  animation: \${mymove} 5s infinite;
+\`;
+
+export default MyStyledComponent;
+
+      ↓ ↓ ↓ ↓ ↓ ↓
+
+const styled = { div() {} };
+
+const mymove = styled.keyframes\`
+  0% {
+    color: transparent;
+  }
+  100% {
+    color: radboats;
+  }
+\`;
+
+const MyStyledComponent = styled.div\`
+body .specific .rule {&{
+  animation: \${mymove} 5s infinite;
+}}
+\`;
+
+export default MyStyledComponent;
+"
+`;
+
 exports[`uses a namespace specified in the options 1`] = `
 "
 const styled = { div() {} };
@@ -214,6 +312,44 @@ export default MyStyledComponent;
 "
 `;
 
+exports[`uses a namespace specified in the options as simple wrapper raw wrapper 1`] = `
+"
+const styled = { div() {} };
+
+const MyStyledComponent = styled.div\`
+  background-color: \${props => (props.isDark ? 'red' : 'yellow')};
+  color: \${props => (props.isDark ? 'white' : 'navy')};
+  font-size: 30px;
+  padding: 20px;
+
+  & {
+    border: 1px solid black;
+  }
+\`;
+
+export default MyStyledComponent;
+
+      ↓ ↓ ↓ ↓ ↓ ↓
+
+const styled = { div() {} };
+
+const MyStyledComponent = styled.div\`
+body .specific .rule {&{
+  background-color: \${props => props.isDark ? 'red' : 'yellow'};
+  color: \${props => props.isDark ? 'white' : 'navy'};
+  font-size: 30px;
+  padding: 20px;
+
+  & {
+    border: 1px solid black;
+  }
+}}
+\`;
+
+export default MyStyledComponent;
+"
+`;
+
 exports[`uses an array of namespaces specified in the options 1`] = `
 "
 const styled = { div() {} };
@@ -251,3 +387,41 @@ const MyStyledComponent = styled.div\`
 export default MyStyledComponent;
 "
 `;
+
+exports[`uses an array of namespaces specified in the options as simple wrapper raw wrapper 1`] = `
+"
+const styled = { div() {} };
+
+const MyStyledComponent = styled.div\`
+  background-color: \${props => (props.isDark ? 'red' : 'yellow')};
+  color: \${props => (props.isDark ? 'white' : 'navy')};
+  font-size: 30px;
+  padding: 20px;
+
+  & {
+    border: 1px solid black;
+  }
+\`;
+
+export default MyStyledComponent;
+
+      ↓ ↓ ↓ ↓ ↓ ↓
+
+const styled = { div() {} };
+
+const MyStyledComponent = styled.div\`
+body .specific .rule, body.roots .rules {&{
+  background-color: \${props => props.isDark ? 'red' : 'yellow'};
+  color: \${props => props.isDark ? 'white' : 'navy'};
+  font-size: 30px;
+  padding: 20px;
+
+  & {
+    border: 1px solid black;
+  }
+}}
+\`;
+
+export default MyStyledComponent;
+"
+`;