kremling - npm Package Compare versions

Comparing version 1.2.5 to 2.0.0

lib/scoped.component.js

@@ -12,3 +12,3 @@ "use strict";
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
+var _propTypes = require("prop-types");
 
@@ -78,5 +78,4 @@ var _styleElementUtils = require("./style-element-utils.js");
     _this.state = {};
-    if (!props.css && !props.postcss) throw Error("Kremling's <Scoped /> component requires either the 'css' or 'postcss' props.");
-    if (props.css && props.postcss) throw Error("Kremling's <Scoped /> component requires either the 'css' or 'postcss' props. Cannot use both.");
-    if (props.postcss && !(typeof props.postcss.styles === 'string' && props.postcss.id)) throw Error("Kremling's <Scoped /> component 'postcss' prop requires an object containing 'styles' and 'id' properties. Try using the kremling-loader.");
+    if (!props.css) throw Error("Kremling's <Scoped /> component requires the 'css' prop.");
+    if (_typeof(props.css) === 'object' && (typeof props.css.id !== 'string' || typeof props.css.styles !== 'string')) throw Error("Kremling's <Scoped /> component requires either a string or an object with \"id\" and \"styles\" properties.");
     _this.state = _this.newCssState(props);
@@ -186,5 +185,5 @@ return _this;
 _defineProperty(Scoped, "propTypes", {
-  css: _propTypes.default.string,
-  postcss: _propTypes.default.object,
-  namespace: _propTypes.default.string
+  css: (0, _propTypes.oneOfType)([_propTypes.string, _propTypes.object]),
+  postcss: _propTypes.object,
+  namespace: _propTypes.string
 });
@@ -191,0 +190,0 @@

lib/scoped.postcss.test.js

@@ -23,3 +23,3 @@ "use strict";
     var css = {
-      id: 1,
+      id: '1',
       styles: "[kremling=\"1\"] .someRule, [kremling=\"1\"].someRule {background-color: red;}"
@@ -30,3 +30,3 @@ };
     _reactDom.default.render(_react.default.createElement(_scopedComponent.Scoped, {
-      postcss: css
+      css: css
     }, _react.default.createElement("div", {
@@ -44,3 +44,3 @@ className: "crazy"
     var css = {
-      id: 1,
+      id: '1',
       styles: "[kremling=\"1\"] .someRule, [kremling=\"1\"].someRule {background-color: red;}"
@@ -51,3 +51,3 @@ };
     _reactDom.default.render(_react.default.createElement("div", null, _react.default.createElement(_scopedComponent.Scoped, {
-      postcss: css
+      css: css
     }, _react.default.createElement("div", null, "Hello"))), el);
@@ -66,3 +66,3 @@
       return _react.default.createElement("div", null, _react.default.createElement(_scopedComponent.Scoped, {
-        postcss: style
+        css: style
       }, _react.default.createElement("div", null, "Hello")));
@@ -94,3 +94,3 @@ };
       return _react.default.createElement("div", null, _react.default.createElement(_scopedComponent.Scoped, {
-        postcss: style
+        css: style
       }, _react.default.createElement("div", null, "Hello")));
@@ -124,3 +124,3 @@ };
     _reactDom.default.render(_react.default.createElement("div", null, _react.default.createElement(_scopedComponent.Scoped, {
-      postcss: css
+      css: css
     }, _react.default.createElement("div", null, "Hello"))), el1);
@@ -132,3 +132,3 @@
     _reactDom.default.render(_react.default.createElement("div", null, _react.default.createElement(_scopedComponent.Scoped, {
-      postcss: css
+      css: css
     }, _react.default.createElement("div", null, "Hello"))), el2);
@@ -155,3 +155,3 @@
       return _react.default.createElement("div", null, _react.default.createElement(_scopedComponent.Scoped, {
-        postcss: style
+        css: style
       }, _react.default.createElement("div", null, "Hello")));
@@ -158,0 +158,0 @@ };

package.json

 {
   "name": "kremling",
-  "version": "1.2.5",
+  "version": "2.0.0",
   "description": "Embarrassingly simple css for React",
@@ -5,0 +5,0 @@ "main": "lib/kremling.js",

src/scoped.component.js

 import React from 'react';
 import ReactDOM from 'react-dom';
-import PropTypes from 'prop-types';
+import { string, object, oneOfType } from 'prop-types';
 import {styleTags, incrementCounter, transformCss} from './style-element-utils.js'
@@ -10,5 +10,5 @@
   static propTypes = {
-    css: PropTypes.string,
-    postcss: PropTypes.object,
-    namespace: PropTypes.string,
+    css: oneOfType([string, object]),
+    postcss: object,
+    namespace: string,
   }
@@ -21,6 +21,7 @@
     this.state = {};
-    if (!props.css && !props.postcss) throw Error(`Kremling's <Scoped /> component requires either the 'css' or 'postcss' props.`);
-    if (props.css && props.postcss) throw Error(`Kremling's <Scoped /> component requires either the 'css' or 'postcss' props. Cannot use both.`);
-    if (props.postcss && !(typeof props.postcss.styles === 'string' && props.postcss.id)) throw Error(`Kremling's <Scoped /> component 'postcss' prop requires an object containing 'styles' and 'id' properties. Try using the kremling-loader.`);
-
+    if (!props.css) throw Error(`Kremling's <Scoped /> component requires the 'css' prop.`);
+    if (typeof props.css === 'object' && (
+      typeof props.css.id !== 'string' ||
+      typeof props.css.styles !== 'string')
+    ) throw Error(`Kremling's <Scoped /> component requires either a string or an object with "id" and "styles" properties.`);
     this.state = this.newCssState(props)
@@ -27,0 +28,0 @@ }

src/scoped.postcss.test.js

 import React from "react";
 import ReactDOM from "react-dom";
 import {Scoped} from "./scoped.component.js";
-import {styleTags} from './style-element-utils.js'
 import {resetState} from './style-element-utils.js'
@@ -18,3 +17,3 @@
     const css = {
-      id: 1,
+      id: '1',
       styles: `[kremling="1"] .someRule, [kremling="1"].someRule {background-color: red;}`,
@@ -24,3 +23,3 @@ }
     ReactDOM.render(
-      <Scoped postcss={css}>
+      <Scoped css={css}>
         <div className="crazy">Okay</div>
@@ -37,3 +36,3 @@ </Scoped>,
     const css = {
-      id: 1,
+      id: '1',
       styles: `[kremling="1"] .someRule, [kremling="1"].someRule {background-color: red;}`,
@@ -44,3 +43,3 @@ }
       <div>
-        <Scoped postcss={css}>
+        <Scoped css={css}>
           <div>Hello</div>
@@ -58,3 +57,3 @@ </Scoped>
     let css = { id: '1', styles: `[kremling-1] .someRule, [kremling-1].someRule {background-color: red;}` };
-    const component = (style) => <div><Scoped postcss={style}><div>Hello</div></Scoped></div>;
+    const component = (style) => <div><Scoped css={style}><div>Hello</div></Scoped></div>;
 
@@ -73,3 +72,3 @@ const el = document.createElement('div');
     let css = { id: '1', styles: `[kremling-1] .someRule, [kremling-1].someRule {background-color: red;}` };
-    const component = (style) => <div><Scoped postcss={style}><div>Hello</div></Scoped></div>;
+    const component = (style) => <div><Scoped css={style}><div>Hello</div></Scoped></div>;
 
@@ -97,3 +96,3 @@ const el = document.createElement('div');
       <div>
-        <Scoped postcss={css}>
+        <Scoped css={css}>
           <div>Hello</div>
@@ -109,3 +108,3 @@ </Scoped>
       <div>
-        <Scoped postcss={css}>
+        <Scoped css={css}>
           <div>Hello</div>
@@ -126,3 +125,3 @@ </Scoped>
     const css = { id: '1', styles: '' };
-    const component = (style) => <div><Scoped postcss={style}><div>Hello</div></Scoped></div>;
+    const component = (style) => <div><Scoped css={style}><div>Hello</div></Scoped></div>;
     const el = document.createElement('div');
@@ -129,0 +128,0 @@ ReactDOM.render(component(css), el);

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

197069

decreased by-0.75%

No dependency changes