fela-monolithic - npm Package Compare versions

Comparing version 4.3.5 to 5.0.0

package.json

 {
   "name": "fela-monolithic",
-  "version": "4.3.5",
+  "version": "5.0.0",
   "description": "Fela enhancer for having monolithic classnames",
-  "module": "index.es2015.js",
-  "main": "index.js",
+  "main": "lib/index.js",
+  "module": "es/index.js",
+  "jsnext:main": "es/index.js",
   "files": [
     "LICENSE",
     "README.md",
-    "index.js",
+    "lib/**",
     "dist/**"
@@ -24,8 +25,9 @@ ],
   "license": "MIT",
-  "peerDependencies": {
-    "fela": "4.3.5"
+  "dependencies": {
+    "css-in-js-utils": "^1.0.3",
+    "fela-utils": "^5.0.0"
   },
-  "dependencies": {
-    "css-in-js-utils": "^1.0.3"
+  "devDependencies": {
+    "fela": "^5.0.0"
   }
-}
+}

README.md

 # fela-monolithic
 
-<img alt="npm downloads" src="https://img.shields.io/npm/dm/fela-monolithic.svg">
-<img alt="gzipped size" src="https://img.shields.io/badge/gzipped-1.22kb-brightgreen.svg">
+<img alt="npm downloads" src="https://img.shields.io/npm/dm/fela-monolithic.svg"> <img alt="gzipped size" src="https://img.shields.io/badge/gzipped-1.22kb-brightgreen.svg">
 
@@ -24,2 +23,3 @@ The monolithic enhancer will use unique class names instead of atomic ones.
 ## Usage
+
 ```javascript
@@ -44,3 +44,3 @@ import { createRenderer } from 'fela'
 ```css
-.fela-custom {
+.custom {
   color: red
@@ -53,3 +53,3 @@ }
 ```css
-.fela-137u7ef {
+.137u7ef {
   color: red
@@ -59,4 +59,59 @@ }
 
-`137u7ef` is a hash based on rule properties (`color: red` in this case). The prefix `fela` can be configured in createRenderer.
+`137u7ef` is a hash based on rule properties (`color: red` in this case).
 
+### Configuration
+##### Options
+| Option | Value | Default | Description |
+| --- | --- | --- | --- |
+| `prettySelectors` | *(boolean)* | `false` | use pretty selectors in development |
+
+If you are using `prettySelectors` with plain Fela rules it will add the `rule.name` to the className e.g.
+
+> Note: anonymous functions will still only use the hash!
+
+```javascript
+import { createRenderer } from 'fela'
+import monolithic from 'fela-monolithic'
+
+const renderer = createRenderer({
+  enhancers: [ monolithic({ prettySelectors: true }) ]
+})
+
+const redText = () => ({
+  color: 'red'
+})
+
+renderer.renderRule(redText) // => redText_137u7ef
+```
+```css
+.redText_137u7ef {
+  color: red
+}
+```
+
+If you use it together with `createComponent` from `react-fela`, `preact-fela` or `inferno-fela`, it will also add the component type or displayName to the rule. e.g.
+
+```javascript
+import { createComponent } from 'react-fela'
+
+const Button = () => ({
+  color: 'red'
+})
+
+const Comp = createComponent(Button)
+
+<Button />
+// => <div class="Button_div__137u7ef"></div>
+
+const ExtendedButton = () => ({
+  backgroundColor: 'blue'
+})
+
+const Comp2 = createComponent(ExtendedButton, Button)
+
+<Comp2 />
+// => <div class="ExtendedButton_Button__xxxxx"></div>
+```
+
+
 ## License
@@ -63,0 +118,0 @@ Fela is licensed under the [MIT License](http://opensource.org/licenses/MIT).<br>

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Fixed alerts

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Number of low quality alerts

1

decreased by-50%

Number of lines in readme file

117

increased by88.71%

Worsened metrics

Total package byte prevSize

8540

decreased by-67.75%

Dev dependency count

1

increased byInfinity%

Number of package files

4

decreased by-42.86%

Lines of code

75

decreased by-60.32%

Number of low supply chain risk alerts

2

increased by100%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedfela-utils@^5.0.0

• + Addedfela-utils@5.0.5(transitive)

• - Removedfela@4.3.5(transitive)