improve background, border, and shadow rendering

Author: drinking-code

README.md

@@ -1,7 +1,9 @@
 # Better rounded corners
+
 *for HTML divs in React.js*
 
-`react-round-div` makes your rounded rectangles look smoother for a more pleasant feel. With a simple and easy integration into your code you have to do almost nothing to up the style of your project.
+`react-round-div` makes your rounded rectangles look smoother for a more pleasant feel. With a simple and easy
+integration into your code you have to do almost nothing to up the style of your project.
 
 Here is a very clear demonstration of these smooth corners:
 
@@ -14,7 +16,10 @@ npm i react-round-div
 ```
 
 ## Usage
-Simply import the package and replace any divs with rounded corners (`border-radius`) that you want to improve. `react-round-div` will handle the rest.  
+
+Simply import the package and replace any divs with rounded corners (`border-radius`) that you want to
+improve. `react-round-div` will handle the rest.
+
 ```jsx  
 import RoundDiv from 'react-round-div';
 
@@ -29,8 +34,33 @@ const App = () => {
 export default App;
 ```
 
+### Options
+
+#### `dontConvertShadow`
+
+If you have set a `box-shadow` in your CSS, `react-round-div` will convert it to
+a [`drop-shadow()`](https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/drop-shadow()). This happens
+because otherwise, the old rounded corners may shine through. If you want `react-round-div` to not convert
+your `box-shadow`s, add the `dontConvertShadow` option:
+
+```jsx  
+<RoundDiv dontConvertShadow>
+    <p>Content</p>
+</RoundDiv>
+```
+
+## Things to note & caveats
+
+This package is still in the starting blocks, so for now borders are only supported in the `solid` style and transitions
+and animations on the div may not work properly.
+
+There are a couple of css properties, that you can't reliably set with `RoundDiv`:
 
-## Caveats
-This package is still in the starting blocks, so for now borders are only supported in the `solid` style and some transitions on the div may not work properly.
+- the `background` property and all the properties it is a shorthand for
+- `border-color`
+- `box-shadow`
+- `filter`, if you haven't set [`dontConvertShadow`](#dontconvertshadow)
 
-Moreover, children inside `RoundDiv` get cut off when are placed (partly) outside the div due to `clip-path` being used to make the smooth corners. There will probably an option in later versions to use a pseudo-element for the shape, so that children can be rendered outside.
+You shouldn't set these properties inline. Instead, set them in a stylesheet. This may change in future versions.  
+The `filter` property in particular will not work at all, if you have set a `box-shadow` AND have not
+set [`dontConvertShadow`](#dontconvertshadow). This may also change in future versions.

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "react-round-div",
-    "version": "1.2.1",
+    "version": "1.2.2",
     "description": "Make your rounded corners look phenomenal with g2 continuity.",
     "main": "dist/main.js",
     "scripts": {
@@ -23,7 +23,11 @@
     },
     "homepage": "https://github.com/drinking-code/react-round-div#readme",
     "dependencies": {
-        "prop-types": "^15.7.2",
+        "css": "^3.0.0",
+        "react-shadow-root": "^6.1.1",
+        "specificity": "^0.4.1"
+    },
+    "peerDependencies": {
         "react": "^17.0.2",
         "react-dom": "^17.0.2"
     },