@css-system/use-css - npm Package Compare versions

Comparing version 0.3.0 to 0.4.0

dist/computeCssObject.d.ts

 import { SystemStyleObject, Theme, CSSObject } from "./types";
-export declare const computeCssObject: (systemObject: SystemStyleObject, mayBeTheme: Theme) => CSSObject;
+export declare const computeCssObject: (systemObject: SystemStyleObject, theme: Theme) => CSSObject;

dist/index.d.ts

 export { useCss } from "./useCss";
+export { ThemeContext } from "./themeContext";
 export { ServerStyleSheet, ClientStyleSheet, StyleSheetContext, } from "./stylesheet";

dist/index.es.js

@@ -1,2 +0,2 @@
-import React, { useContext, useMemo } from 'react';
+import { createContext, useContext, useMemo } from 'react';
 
@@ -105,86 +105,2 @@ /*! *****************************************************************************
 
-var ClientStyleSheet = /** @class */ (function () {
-    function ClientStyleSheet() {
-        this.createdClassNames = {};
-        var element = document.createElement("style");
-        document.head.appendChild(element);
-        this.sheet = element.sheet;
-    }
-    ClientStyleSheet.prototype.insertRule = function (rule) {
-        this.sheet.insertRule(rule, this.sheet.cssRules.length);
-    };
-    return ClientStyleSheet;
-}());
-var ServerStyleSheet = /** @class */ (function () {
-    function ServerStyleSheet() {
-        this.rules = [];
-        this.createdClassNames = {};
-    }
-    ServerStyleSheet.prototype.insertRule = function (rule) {
-        this.rules.push(rule);
-    };
-    return ServerStyleSheet;
-}());
-var isBrowser = typeof document !== "undefined";
-var StyleSheetContext = React.createContext(isBrowser ? new ClientStyleSheet() : new ServerStyleSheet());
-
-var unitlessCssProperties = {
-    animationIterationCount: 1,
-    borderImageOutset: 1,
-    borderImageSlice: 1,
-    borderImageWidth: 1,
-    boxFlex: 1,
-    boxFlexGroup: 1,
-    boxOrdinalGroup: 1,
-    columnCount: 1,
-    columns: 1,
-    flex: 1,
-    flexGrow: 1,
-    flexPositive: 1,
-    flexShrink: 1,
-    flexNegative: 1,
-    flexOrder: 1,
-    gridRow: 1,
-    gridRowEnd: 1,
-    gridRowSpan: 1,
-    gridRowStart: 1,
-    gridColumn: 1,
-    gridColumnEnd: 1,
-    gridColumnSpan: 1,
-    gridColumnStart: 1,
-    msGridRow: 1,
-    msGridRowSpan: 1,
-    msGridColumn: 1,
-    msGridColumnSpan: 1,
-    fontWeight: 1,
-    lineHeight: 1,
-    opacity: 1,
-    order: 1,
-    orphans: 1,
-    tabSize: 1,
-    widows: 1,
-    zIndex: 1,
-    zoom: 1,
-    WebkitLineClamp: 1,
-    // SVG-related properties
-    fillOpacity: 1,
-    floodOpacity: 1,
-    stopOpacity: 1,
-    strokeDasharray: 1,
-    strokeDashoffset: 1,
-    strokeMiterlimit: 1,
-    strokeOpacity: 1,
-    strokeWidth: 1,
-};
-
-var defaultTheme = {
-    breakpoints: {
-        s: "40em",
-        m: "52em",
-        l: "64em",
-    },
-    space: [0, 4, 8, 16, 32, 64, 128, 256, 512],
-    fontSizes: [12, 14, 16, 20, 24, 32, 48, 64, 72],
-};
-
 var get = function (obj, path, def) {
@@ -325,3 +241,3 @@ var result = obj;
     var next = {};
-    var breakpoints = get(theme, "breakpoints", defaultTheme.breakpoints);
+    var breakpoints = get(theme, "breakpoints");
     var mediaQueries = Object.keys(breakpoints).reduce(function (acc, breakpointKey) {
@@ -357,4 +273,3 @@ var _a;
 };
-var computeCssObject = function (systemObject, mayBeTheme) {
-    var theme = __assign(__assign({}, defaultTheme), mayBeTheme);
+var computeCssObject = function (systemObject, theme) {
     var result = {};
@@ -392,2 +307,86 @@ var styles = responsive(systemObject, theme);
 
+var ClientStyleSheet = /** @class */ (function () {
+    function ClientStyleSheet() {
+        this.createdClassNames = {};
+        var element = document.createElement("style");
+        document.head.appendChild(element);
+        this.sheet = element.sheet;
+    }
+    ClientStyleSheet.prototype.insertRule = function (rule) {
+        this.sheet.insertRule(rule, this.sheet.cssRules.length);
+    };
+    return ClientStyleSheet;
+}());
+var ServerStyleSheet = /** @class */ (function () {
+    function ServerStyleSheet() {
+        this.rules = [];
+        this.createdClassNames = {};
+    }
+    ServerStyleSheet.prototype.insertRule = function (rule) {
+        this.rules.push(rule);
+    };
+    return ServerStyleSheet;
+}());
+var isBrowser = typeof document !== "undefined";
+var StyleSheetContext = createContext(isBrowser ? new ClientStyleSheet() : new ServerStyleSheet());
+
+var ThemeContext = createContext({
+    breakpoints: {
+        s: "40em",
+        m: "52em",
+        l: "64em",
+    },
+    space: [0, 4, 8, 16, 32, 64, 128, 256, 512],
+    fontSizes: [12, 14, 16, 20, 24, 32, 48, 64, 72],
+});
+
+var unitlessCssProperties = {
+    animationIterationCount: 1,
+    borderImageOutset: 1,
+    borderImageSlice: 1,
+    borderImageWidth: 1,
+    boxFlex: 1,
+    boxFlexGroup: 1,
+    boxOrdinalGroup: 1,
+    columnCount: 1,
+    columns: 1,
+    flex: 1,
+    flexGrow: 1,
+    flexPositive: 1,
+    flexShrink: 1,
+    flexNegative: 1,
+    flexOrder: 1,
+    gridRow: 1,
+    gridRowEnd: 1,
+    gridRowSpan: 1,
+    gridRowStart: 1,
+    gridColumn: 1,
+    gridColumnEnd: 1,
+    gridColumnSpan: 1,
+    gridColumnStart: 1,
+    msGridRow: 1,
+    msGridRowSpan: 1,
+    msGridColumn: 1,
+    msGridColumnSpan: 1,
+    fontWeight: 1,
+    lineHeight: 1,
+    opacity: 1,
+    order: 1,
+    orphans: 1,
+    tabSize: 1,
+    widows: 1,
+    zIndex: 1,
+    zoom: 1,
+    WebkitLineClamp: 1,
+    // SVG-related properties
+    fillOpacity: 1,
+    floodOpacity: 1,
+    stopOpacity: 1,
+    strokeDasharray: 1,
+    strokeDashoffset: 1,
+    strokeMiterlimit: 1,
+    strokeOpacity: 1,
+    strokeWidth: 1,
+};
+
 var addUnitIfNeeded = function (name, value) {
@@ -436,5 +435,6 @@ if (value == null || typeof value === "boolean" || value === "") {
 var defaultDeps = [];
-var useCss = function (systemObject, theme, deps) {
+var useCss = function (systemObject, deps) {
     if (deps === void 0) { deps = defaultDeps; }
     var styleSheet = useContext(StyleSheetContext);
+    var theme = useContext(ThemeContext);
     var className = useMemo(function () {
@@ -477,3 +477,3 @@ var cssObject = computeCssObject(systemObject, theme);
 
-export { ClientStyleSheet, ServerStyleSheet, StyleSheetContext, useCss };
+export { ClientStyleSheet, ServerStyleSheet, StyleSheetContext, ThemeContext, useCss };
 //# sourceMappingURL=index.es.js.map

dist/index.js

@@ -5,7 +5,4 @@ 'use strict';
 
-function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
+var react = require('react');
 
-var React = require('react');
-var React__default = _interopDefault(React);
-
 /*! *****************************************************************************
@@ -113,86 +110,2 @@ Copyright (c) Microsoft Corporation. All rights reserved.
 
-var ClientStyleSheet = /** @class */ (function () {
-    function ClientStyleSheet() {
-        this.createdClassNames = {};
-        var element = document.createElement("style");
-        document.head.appendChild(element);
-        this.sheet = element.sheet;
-    }
-    ClientStyleSheet.prototype.insertRule = function (rule) {
-        this.sheet.insertRule(rule, this.sheet.cssRules.length);
-    };
-    return ClientStyleSheet;
-}());
-var ServerStyleSheet = /** @class */ (function () {
-    function ServerStyleSheet() {
-        this.rules = [];
-        this.createdClassNames = {};
-    }
-    ServerStyleSheet.prototype.insertRule = function (rule) {
-        this.rules.push(rule);
-    };
-    return ServerStyleSheet;
-}());
-var isBrowser = typeof document !== "undefined";
-var StyleSheetContext = React__default.createContext(isBrowser ? new ClientStyleSheet() : new ServerStyleSheet());
-
-var unitlessCssProperties = {
-    animationIterationCount: 1,
-    borderImageOutset: 1,
-    borderImageSlice: 1,
-    borderImageWidth: 1,
-    boxFlex: 1,
-    boxFlexGroup: 1,
-    boxOrdinalGroup: 1,
-    columnCount: 1,
-    columns: 1,
-    flex: 1,
-    flexGrow: 1,
-    flexPositive: 1,
-    flexShrink: 1,
-    flexNegative: 1,
-    flexOrder: 1,
-    gridRow: 1,
-    gridRowEnd: 1,
-    gridRowSpan: 1,
-    gridRowStart: 1,
-    gridColumn: 1,
-    gridColumnEnd: 1,
-    gridColumnSpan: 1,
-    gridColumnStart: 1,
-    msGridRow: 1,
-    msGridRowSpan: 1,
-    msGridColumn: 1,
-    msGridColumnSpan: 1,
-    fontWeight: 1,
-    lineHeight: 1,
-    opacity: 1,
-    order: 1,
-    orphans: 1,
-    tabSize: 1,
-    widows: 1,
-    zIndex: 1,
-    zoom: 1,
-    WebkitLineClamp: 1,
-    // SVG-related properties
-    fillOpacity: 1,
-    floodOpacity: 1,
-    stopOpacity: 1,
-    strokeDasharray: 1,
-    strokeDashoffset: 1,
-    strokeMiterlimit: 1,
-    strokeOpacity: 1,
-    strokeWidth: 1,
-};
-
-var defaultTheme = {
-    breakpoints: {
-        s: "40em",
-        m: "52em",
-        l: "64em",
-    },
-    space: [0, 4, 8, 16, 32, 64, 128, 256, 512],
-    fontSizes: [12, 14, 16, 20, 24, 32, 48, 64, 72],
-};
-
 var get = function (obj, path, def) {
@@ -333,3 +246,3 @@ var result = obj;
     var next = {};
-    var breakpoints = get(theme, "breakpoints", defaultTheme.breakpoints);
+    var breakpoints = get(theme, "breakpoints");
     var mediaQueries = Object.keys(breakpoints).reduce(function (acc, breakpointKey) {
@@ -365,4 +278,3 @@ var _a;
 };
-var computeCssObject = function (systemObject, mayBeTheme) {
-    var theme = __assign(__assign({}, defaultTheme), mayBeTheme);
+var computeCssObject = function (systemObject, theme) {
     var result = {};
@@ -400,2 +312,86 @@ var styles = responsive(systemObject, theme);
 
+var ClientStyleSheet = /** @class */ (function () {
+    function ClientStyleSheet() {
+        this.createdClassNames = {};
+        var element = document.createElement("style");
+        document.head.appendChild(element);
+        this.sheet = element.sheet;
+    }
+    ClientStyleSheet.prototype.insertRule = function (rule) {
+        this.sheet.insertRule(rule, this.sheet.cssRules.length);
+    };
+    return ClientStyleSheet;
+}());
+var ServerStyleSheet = /** @class */ (function () {
+    function ServerStyleSheet() {
+        this.rules = [];
+        this.createdClassNames = {};
+    }
+    ServerStyleSheet.prototype.insertRule = function (rule) {
+        this.rules.push(rule);
+    };
+    return ServerStyleSheet;
+}());
+var isBrowser = typeof document !== "undefined";
+var StyleSheetContext = react.createContext(isBrowser ? new ClientStyleSheet() : new ServerStyleSheet());
+
+var ThemeContext = react.createContext({
+    breakpoints: {
+        s: "40em",
+        m: "52em",
+        l: "64em",
+    },
+    space: [0, 4, 8, 16, 32, 64, 128, 256, 512],
+    fontSizes: [12, 14, 16, 20, 24, 32, 48, 64, 72],
+});
+
+var unitlessCssProperties = {
+    animationIterationCount: 1,
+    borderImageOutset: 1,
+    borderImageSlice: 1,
+    borderImageWidth: 1,
+    boxFlex: 1,
+    boxFlexGroup: 1,
+    boxOrdinalGroup: 1,
+    columnCount: 1,
+    columns: 1,
+    flex: 1,
+    flexGrow: 1,
+    flexPositive: 1,
+    flexShrink: 1,
+    flexNegative: 1,
+    flexOrder: 1,
+    gridRow: 1,
+    gridRowEnd: 1,
+    gridRowSpan: 1,
+    gridRowStart: 1,
+    gridColumn: 1,
+    gridColumnEnd: 1,
+    gridColumnSpan: 1,
+    gridColumnStart: 1,
+    msGridRow: 1,
+    msGridRowSpan: 1,
+    msGridColumn: 1,
+    msGridColumnSpan: 1,
+    fontWeight: 1,
+    lineHeight: 1,
+    opacity: 1,
+    order: 1,
+    orphans: 1,
+    tabSize: 1,
+    widows: 1,
+    zIndex: 1,
+    zoom: 1,
+    WebkitLineClamp: 1,
+    // SVG-related properties
+    fillOpacity: 1,
+    floodOpacity: 1,
+    stopOpacity: 1,
+    strokeDasharray: 1,
+    strokeDashoffset: 1,
+    strokeMiterlimit: 1,
+    strokeOpacity: 1,
+    strokeWidth: 1,
+};
+
 var addUnitIfNeeded = function (name, value) {
@@ -444,6 +440,7 @@ if (value == null || typeof value === "boolean" || value === "") {
 var defaultDeps = [];
-var useCss = function (systemObject, theme, deps) {
+var useCss = function (systemObject, deps) {
     if (deps === void 0) { deps = defaultDeps; }
-    var styleSheet = React.useContext(StyleSheetContext);
-    var className = React.useMemo(function () {
+    var styleSheet = react.useContext(StyleSheetContext);
+    var theme = react.useContext(ThemeContext);
+    var className = react.useMemo(function () {
         var cssObject = computeCssObject(systemObject, theme);
@@ -488,3 +485,4 @@ var hash = hashSum(cssObject);
 exports.StyleSheetContext = StyleSheetContext;
+exports.ThemeContext = ThemeContext;
 exports.useCss = useCss;
 //# sourceMappingURL=index.js.map

dist/stylesheet.d.ts

@@ -1,2 +0,2 @@
-import { Context } from "react";
+/// <reference types="react" />
 declare class ClientStyleSheet {
@@ -13,3 +13,3 @@ sheet: CSSStyleSheet;
 }
-declare const StyleSheetContext: Context<ServerStyleSheet | ClientStyleSheet>;
+declare const StyleSheetContext: import("react").Context<ClientStyleSheet | ServerStyleSheet>;
 export { ServerStyleSheet, ClientStyleSheet, StyleSheetContext };

dist/useCss.d.ts

@@ -1,2 +0,2 @@
-import { SystemStyleObject, Theme } from "./types";
-export declare const useCss: (systemObject: SystemStyleObject, theme: Theme, deps?: any[]) => string;
+import { SystemStyleObject } from "./types";
+export declare const useCss: (systemObject: SystemStyleObject, deps?: any[]) => string;

package.json

 {
   "name": "@css-system/use-css",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "license": "MIT",
@@ -5,0 +5,0 @@ "repository": "css-system/use-css",

README.md

@@ -11,3 +11,3 @@ # css-system/use-css
 import ReactDOM from "react-dom"
-import {useCss} from "@css-system/use-css"
+import {useCss, ThemeContext} from "@css-system/use-css"
 
@@ -25,19 +25,13 @@ const theme = {
 
-const ThemeContext = createContext(theme)
-
 const View = ({as: Component = "div", css, ...props}) => {
-  const theme = useContext(ThemeContext)
-  const className = useCss(
-    {
-      display: "flex",
-      minWidth: 0,
-      minHeight: 0,
-      flex: "none",
-      alignItems: "stretch",
-      flexDirection: "column",
-      justifyContent: "flex-start",
-      ...css,
-    },
-    theme
-  )
+  const className = useCss({
+    display: "flex",
+    minWidth: 0,
+    minHeight: 0,
+    flex: "none",
+    alignItems: "stretch",
+    flexDirection: "column",
+    justifyContent: "flex-start",
+    ...css,
+  })
 
@@ -48,13 +42,9 @@ return <Component className={className} {...props} />
 const Text = ({as: Component = "span", css, ...props}) => {
-  const theme = useContext(ThemeContext)
-  const className = useCss(
-    {
-      display: "inline",
-      minWidth: 0,
-      minHeight: 0,
-      flex: "none",
-      ...css,
-    },
-    theme
-  )
+  const className = useCss({
+    display: "inline",
+    minWidth: 0,
+    minHeight: 0,
+    flex: "none",
+    ...css,
+  })
 
@@ -66,15 +56,17 @@ return <Component className={className} {...props} />
   return (
-    <View
-      css={{
-        p: {_: 0, s: 1, m: 2, l: 3},
-        "&:hover": {
-          bg: "text",
-          color: "background",
-        },
-      }}
-    >
-      <Text css={{fontSize: {_: 1, m: 2}}>Hello world !</Text>
-    </View>
+    <ThemeContext.Provider value={theme}>
+      <View
+        css={{
+          p: {_: 0, s: 1, m: 2, l: 3},
+          "&:hover": {
+            bg: "text",
+            color: "background",
+          },
+        }}
+      >
+        <Text css={{fontSize: {_: 1, m: 2}}}>Hello world !</Text>
+      </View>
+    </ThemeContext.Provider>
   )
 }
 ```

Fixed 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

Improved metrics

Number of medium supply chain risk alerts

0

-100%

Worsened metrics

Total package byte prevSize

133265

-1.79%

Number of package files

15

-6.25%

Lines of code

1530

-2.55%

Number of lines in readme file

69

-10.39%

No dependency changes