react-style-editor - npm Package Compare versions

Comparing version 0.2.1 to 0.2.2

lib/components/Alert.js

@@ -0,0 +0,0 @@ "use strict";

lib/components/Area.js

@@ -0,0 +0,0 @@ "use strict";

lib/components/Checkbox.js

@@ -0,0 +0,0 @@ "use strict";

lib/components/Comment.js

@@ -0,0 +0,0 @@ "use strict";

lib/components/Declaration.js

@@ -0,0 +0,0 @@ "use strict";

lib/components/Rule.js

@@ -0,0 +0,0 @@ "use strict";

lib/components/StyleEditor.js

@@ -18,8 +18,2 @@ "use strict";
 
-var _parse = _interopRequireDefault(require("../utils/parse"));
-
-var _validate = _interopRequireDefault(require("../utils/validate"));
-
-var _identify = _interopRequireDefault(require("../utils/identify"));
-
 var _modify2 = _interopRequireDefault(require("../utils/modify"));
@@ -37,2 +31,4 @@
 
+var _analyze = _interopRequireDefault(require("../utils/analyze"));
+
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
@@ -139,5 +135,3 @@
 
-      var rules = (0, _parse.default)(css);
-      (0, _validate.default)(rules);
-      (0, _identify.default)(rules);
+      var rules = (0, _analyze.default)(css);
       _this.memoCSS = css;
@@ -326,3 +320,3 @@ _this.memoRules = rules;
       var usedValue = this.isControlled ? value : internalValue;
-      this.currentRules = this.computeRules(usedValue);
+      this.currentRules = typeof usedValue === 'string' ? this.computeRules(usedValue) : usedValue;
       var isEmpty = !this.currentRules.length;
@@ -329,0 +323,0 @@ return _react.default.createElement("div", _extends({

lib/index.js

@@ -6,2 +6,26 @@ "use strict";
 });
+Object.defineProperty(exports, "analyze", {
+  enumerable: true,
+  get: function get() {
+    return _analyze.default;
+  }
+});
+Object.defineProperty(exports, "parse", {
+  enumerable: true,
+  get: function get() {
+    return _parse.default;
+  }
+});
+Object.defineProperty(exports, "stringify", {
+  enumerable: true,
+  get: function get() {
+    return _stringify.default;
+  }
+});
+Object.defineProperty(exports, "prettify", {
+  enumerable: true,
+  get: function get() {
+    return _prettify.default;
+  }
+});
 exports.default = void 0;
@@ -11,2 +35,10 @@
 
+var _analyze = _interopRequireDefault(require("./utils/analyze"));
+
+var _parse = _interopRequireDefault(require("./utils/parse"));
+
+var _stringify = _interopRequireDefault(require("./utils/stringify"));
+
+var _prettify = _interopRequireDefault(require("./utils/prettify"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -13,0 +45,0 @@

lib/utils/clean.js

@@ -0,0 +0,0 @@ "use strict";

lib/utils/cls.js

@@ -0,0 +0,0 @@ "use strict";

lib/utils/COMMON.js

@@ -0,0 +0,0 @@ "use strict";

lib/utils/identify.js

@@ -0,0 +0,0 @@ "use strict";

lib/utils/ignore.js

@@ -0,0 +0,0 @@ "use strict";

lib/utils/modify.js

@@ -0,0 +0,0 @@ "use strict";

lib/utils/parse.js

@@ -0,0 +0,0 @@ "use strict";

lib/utils/prettify.js

@@ -0,0 +0,0 @@ "use strict";

lib/utils/stringify.js

@@ -0,0 +0,0 @@ "use strict";

lib/utils/stylize.js

@@ -0,0 +0,0 @@ "use strict";

lib/utils/unignore.js

@@ -0,0 +0,0 @@ "use strict";

lib/utils/validate.js

@@ -0,0 +0,0 @@ "use strict";

package.json

 {
     "name": "react-style-editor",
-    "version": "0.2.1",
+    "version": "0.2.2",
     "description": "A React component that displays and edits CSS, similar to the browser's DevTools.",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

README.md

@@ -79,5 +79,12 @@ # React Style Editor
 
+## Exports
+Besides the default export (`StyleEditor`), there are also a few utility functions exported:
+- `analyze()`: ouputs the `machine` format
+- `parse()`: a lighter version of `analyze()`
+- `stringify()`: outputs the `preserved` format
+- `prettify()`: outputs the `pretty` format
 
+They all expect a CSS string as parameter and are useful if you don't want to use the React component and wait for its `onChange`.
 
-## Ideas for the future
+## Wishlist
 - Color swatches (similar to the browser)
@@ -87,3 +94,2 @@ - Dropdown suggestions for properties/values (similar to the browser)
 - Keyboard support for `TAB`, `:` and `UP`/`DOWN` increments of numeric values
-- Prop for automatically mutating the code *after* validation
 - Theme support (similar to the browser)
@@ -90,0 +96,0 @@ - Toggle view mode: tree/original

src/components/Checkbox.js

@@ -0,0 +0,0 @@ import React from 'react';

src/components/StyleEditor.js

@@ -7,5 +7,2 @@ import React from 'react';
 import stylize, {prepareStyling, releaseStyling} from '../utils/stylize';
-import parse from '../utils/parse';
-import validate from '../utils/validate';
-import identify from '../utils/identify';
 import modify from '../utils/modify';
@@ -17,2 +14,3 @@ import stringify from '../utils/stringify';
 import cls from '../utils/cls';
+import analyze from "../utils/analyze";
 
@@ -89,3 +87,3 @@ // =====================================================================================================================
 
-        this.currentRules = this.computeRules(usedValue);
+        this.currentRules = typeof usedValue === 'string'? this.computeRules(usedValue) : usedValue;
         const isEmpty = !this.currentRules.length;
@@ -176,5 +174,3 @@
         }
-        const rules = parse(css);
-        validate(rules);
-        identify(rules);
+        const rules = analyze(css);
         this.memoCSS = css;
@@ -181,0 +177,0 @@ this.memoRules = rules;

src/index.js

 import StyleEditor from './components/StyleEditor';
+import analyze from './utils/analyze';
+import parse from './utils/parse';
+import stringify from './utils/stringify';
+import prettify from './utils/prettify';
 
 export default StyleEditor;
+export {analyze, parse, stringify, prettify};

src/utils/COMMON.js

@@ -0,0 +0,0 @@ export const RULE = 'rule';

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

Improved metrics

Total package byte prevSize

184299

increased by2.55%

Number of package files

45

increased by4.65%

Lines of code

4767

increased by1.17%

Number of lines in readme file

105

increased by6.06%

No dependency changes