You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 4-6.RSVP →
Socket
Book a DemoInstallSign in
Socket
Book a DemoInstallSign in

@css-system/use-css

Package Overview
Dependencies
Maintainers
2
Versions
5
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

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

Comparing version

0.1.0
to
0.2.0

dist/index.es.js
dist/index.es.js.map
dist/sheet.d.ts
dist/stylesheet.d.ts
dist/test.d.ts
dist/useCss.d.ts

4

dist/index.d.ts

@@ -1,2 +0,2 @@

import { SystemStyleObject, Theme } from "@styled-system/css";
export declare const useCss: (systemObject: SystemStyleObject, theme: Theme, deps?: any[] | undefined) => string;
export { useCss } from "./useCss";
export { ServerStyleSheet, ClientStyleSheet, StyleSheetContext, } from "./stylesheet";

478

dist/index.js

@@ -1,11 +0,391 @@

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
var React = require('react');
var React__default = _interopDefault(React);
/*! *****************************************************************************
Copyright (c) Microsoft Corporation. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
this file except in compliance with the License. You may obtain a copy of the
License at http://www.apache.org/licenses/LICENSE-2.0
THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
MERCHANTABLITY OR NON-INFRINGEMENT.
See the Apache Version 2.0 License for specific language governing permissions
and limitations under the License.
***************************************************************************** */
function __spreadArrays() {
for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
for (var r = Array(s), k = 0, i = 0; i < il; i++)
for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
r[k] = a[j];
return r;
}
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
// based on https://github.com/developit/dlv
var get = function get(obj, key, def, p, undef) {
key = key && key.split ? key.split('.') : [key];
for (p = 0; p < key.length; p++) {
obj = obj ? obj[key[p]] : undef;
}
return obj === undef ? def : obj;
};
Object.defineProperty(exports, "__esModule", { value: true });
const css_1 = __importDefault(require("@styled-system/css"));
const hash_sum_1 = __importDefault(require("hash-sum"));
const react_1 = require("react");
const unitlessCssProperties_1 = __importDefault(require("./unitlessCssProperties"));
const addUnitIfNeeded = (name, value) => {
var defaultBreakpoints = [40, 52, 64].map(function (n) {
return n + 'em';
});
var defaultTheme = {
space: [0, 4, 8, 16, 32, 64, 128, 256, 512],
fontSizes: [12, 14, 16, 20, 24, 32, 48, 64, 72]
};
var aliases = {
bg: 'backgroundColor',
m: 'margin',
mt: 'marginTop',
mr: 'marginRight',
mb: 'marginBottom',
ml: 'marginLeft',
mx: 'marginX',
my: 'marginY',
p: 'padding',
pt: 'paddingTop',
pr: 'paddingRight',
pb: 'paddingBottom',
pl: 'paddingLeft',
px: 'paddingX',
py: 'paddingY'
};
var multiples = {
marginX: ['marginLeft', 'marginRight'],
marginY: ['marginTop', 'marginBottom'],
paddingX: ['paddingLeft', 'paddingRight'],
paddingY: ['paddingTop', 'paddingBottom'],
size: ['width', 'height']
};
var scales = {
color: 'colors',
backgroundColor: 'colors',
borderColor: 'colors',
margin: 'space',
marginTop: 'space',
marginRight: 'space',
marginBottom: 'space',
marginLeft: 'space',
marginX: 'space',
marginY: 'space',
padding: 'space',
paddingTop: 'space',
paddingRight: 'space',
paddingBottom: 'space',
paddingLeft: 'space',
paddingX: 'space',
paddingY: 'space',
top: 'space',
right: 'space',
bottom: 'space',
left: 'space',
gridGap: 'space',
gridColumnGap: 'space',
gridRowGap: 'space',
gap: 'space',
columnGap: 'space',
rowGap: 'space',
fontFamily: 'fonts',
fontSize: 'fontSizes',
fontWeight: 'fontWeights',
lineHeight: 'lineHeights',
letterSpacing: 'letterSpacings',
border: 'borders',
borderTop: 'borders',
borderRight: 'borders',
borderBottom: 'borders',
borderLeft: 'borders',
borderWidth: 'borderWidths',
borderStyle: 'borderStyles',
borderRadius: 'radii',
borderTopRightRadius: 'radii',
borderTopLeftRadius: 'radii',
borderBottomRightRadius: 'radii',
borderBottomLeftRadius: 'radii',
borderTopWidth: 'borderWidths',
borderTopColor: 'colors',
borderTopStyle: 'borderStyles',
borderBottomWidth: 'borderWidths',
borderBottomColor: 'colors',
borderBottomStyle: 'borderStyles',
borderLeftWidth: 'borderWidths',
borderLeftColor: 'colors',
borderLeftStyle: 'borderStyles',
borderRightWidth: 'borderWidths',
borderRightColor: 'colors',
borderRightStyle: 'borderStyles',
outlineColor: 'colors',
boxShadow: 'shadows',
textShadow: 'shadows',
zIndex: 'zIndices',
width: 'sizes',
minWidth: 'sizes',
maxWidth: 'sizes',
height: 'sizes',
minHeight: 'sizes',
maxHeight: 'sizes',
flexBasis: 'sizes',
size: 'sizes',
// svg
fill: 'colors',
stroke: 'colors'
};
var positiveOrNegative = function positiveOrNegative(scale, value) {
if (typeof value !== 'number' || value >= 0) {
return get(scale, value, value);
}
var absolute = Math.abs(value);
var n = get(scale, absolute, absolute);
if (typeof n === 'string') return '-' + n;
return n * -1;
};
var transforms = ['margin', 'marginTop', 'marginRight', 'marginBottom', 'marginLeft', 'marginX', 'marginY', 'top', 'bottom', 'left', 'right'].reduce(function (acc, curr) {
var _extends2;
return _extends({}, acc, (_extends2 = {}, _extends2[curr] = positiveOrNegative, _extends2));
}, {});
var responsive = function responsive(styles) {
return function (theme) {
var next = {};
var breakpoints = get(theme, 'breakpoints', defaultBreakpoints);
var mediaQueries = [null].concat(breakpoints.map(function (n) {
return "@media screen and (min-width: " + n + ")";
}));
for (var key in styles) {
var value = typeof styles[key] === 'function' ? styles[key](theme) : styles[key];
if (value == null) continue;
if (!Array.isArray(value)) {
next[key] = value;
continue;
}
for (var i = 0; i < value.slice(0, mediaQueries.length).length; i++) {
var media = mediaQueries[i];
if (!media) {
next[key] = value[i];
continue;
}
next[media] = next[media] || {};
if (value[i] == null) continue;
next[media][key] = value[i];
}
}
return next;
};
};
var css = function css(args) {
return function (props) {
if (props === void 0) {
props = {};
}
var theme = _extends({}, defaultTheme, {}, props.theme || props);
var result = {};
var obj = typeof args === 'function' ? args(theme) : args;
var styles = responsive(obj)(theme);
for (var key in styles) {
var x = styles[key];
var val = typeof x === 'function' ? x(theme) : x;
if (key === 'variant') {
var variant = css(get(theme, val))(theme);
result = _extends({}, result, {}, variant);
continue;
}
if (val && typeof val === 'object') {
result[key] = css(val)(theme);
continue;
}
var prop = get(aliases, key, key);
var scaleName = get(scales, prop);
var scale = get(theme, scaleName, get(theme, prop, {}));
var transform = get(transforms, prop, get);
var value = transform(scale, val, val);
if (multiples[prop]) {
var dirs = multiples[prop];
for (var i = 0; i < dirs.length; i++) {
result[dirs[i]] = value;
}
} else {
result[prop] = value;
}
}
return result;
};
};
function pad (hash, len) {
while (hash.length < len) {
hash = '0' + hash;
}
return hash;
}
function fold (hash, text) {
var i;
var chr;
var len;
if (text.length === 0) {
return hash;
}
for (i = 0, len = text.length; i < len; i++) {
chr = text.charCodeAt(i);
hash = ((hash << 5) - hash) + chr;
hash |= 0;
}
return hash < 0 ? hash * -2 : hash;
}
function foldObject (hash, o, seen) {
return Object.keys(o).sort().reduce(foldKey, hash);
function foldKey (hash, key) {
return foldValue(hash, o[key], key, seen);
}
}
function foldValue (input, value, key, seen) {
var hash = fold(fold(fold(input, key), toString(value)), typeof value);
if (value === null) {
return fold(hash, 'null');
}
if (value === undefined) {
return fold(hash, 'undefined');
}
if (typeof value === 'object' || typeof value === 'function') {
if (seen.indexOf(value) !== -1) {
return fold(hash, '[Circular]' + key);
}
seen.push(value);
var objHash = foldObject(hash, value, seen);
if (!('valueOf' in value) || typeof value.valueOf !== 'function') {
return objHash;
}
try {
return fold(objHash, String(value.valueOf()))
} catch (err) {
return fold(objHash, '[valueOf exception]' + (err.stack || err.message))
}
}
return fold(hash, value.toString());
}
function toString (o) {
return Object.prototype.toString.call(o);
}
function sum (o) {
return pad(foldValue(0, o, '', []).toString(16), 8);
}
var hashSum = sum;
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 addUnitIfNeeded = function (name, value) {
if (value == null || typeof value === "boolean" || value === "") {

@@ -16,11 +396,13 @@ return "";

value !== 0 &&
!(name in unitlessCssProperties_1.default)) {
return `${value}px`; // Presumes implicit 'px' suffix for unitless numbers
!(name in unitlessCssProperties)) {
return value + "px"; // Presumes implicit 'px' suffix for unitless numbers
}
return String(value).trim();
};
const camelCaseToSnakeCase = (prop) => prop.replace(/[A-Z]/g, match => `-${match.toLowerCase()}`);
const populateRulesObject = (className, cssObject, acc) => {
Object.keys(cssObject).forEach(key => {
const value = cssObject[key];
var camelCaseToSnakeCase = function (prop) {
return prop.replace(/[A-Z]/g, function (match) { return "-" + match.toLowerCase(); });
};
var populateRulesObject = function (className, cssObject, acc) {
Object.keys(cssObject).forEach(function (key) {
var value = cssObject[key];
if (typeof value === "string" || typeof value === "number") {

@@ -46,41 +428,38 @@ if (!acc[className]) {

};
const stylesObjectToRulesObjects = (cssObject) => {
const rulesObjects = {};
var stylesObjectToRulesObjects = function (cssObject) {
var rulesObjects = {};
populateRulesObject("&", cssObject, rulesObjects);
return rulesObjects;
};
let styleElement;
const alreadyCreatedClassNames = {};
exports.useCss = (systemObject, theme, deps) => {
const className = react_1.useMemo(() => {
const styleObject = css_1.default(systemObject)(theme);
const hash = hash_sum_1.default(styleObject);
const className = `style-${hash}`;
if (!alreadyCreatedClassNames[className]) {
if (!styleElement) {
styleElement = document.createElement("style");
document.head.appendChild(styleElement);
}
const sheet = styleElement.sheet;
const styleRulesObject = stylesObjectToRulesObjects(styleObject);
const rulesKeys = Object.keys(styleRulesObject).sort((a, b) => a < b ? -1 : a > b ? 1 : 0);
for (const ruleKey of rulesKeys) {
var useCss = function (systemObject, theme, deps) {
var styleSheet = React.useContext(StyleSheetContext);
var className = React.useMemo(function () {
var styleObject = css(systemObject)(theme);
var hash = hashSum(styleObject);
var className = "style-" + hash;
if (!styleSheet.createdClassNames[className]) {
var styleRulesObject = stylesObjectToRulesObjects(styleObject);
var rulesKeys = Object.keys(styleRulesObject).sort(function (a, b) {
return a < b ? -1 : a > b ? 1 : 0;
});
for (var _i = 0, rulesKeys_1 = rulesKeys; _i < rulesKeys_1.length; _i++) {
var ruleKey = rulesKeys_1[_i];
if (typeof styleRulesObject[ruleKey] === "string") {
const selector = ruleKey.replace(/&/g, "." + className);
const declaration = styleRulesObject[ruleKey];
sheet.insertRule(`${selector}{${declaration}}`, sheet.cssRules.length);
var selector = ruleKey.replace(/&/g, "." + className);
var declaration = styleRulesObject[ruleKey];
styleSheet.insertRule(selector + "{" + declaration + "}");
}
else {
const identifier = ruleKey;
const ruleObject = styleRulesObject[identifier];
let ruleContent = "";
for (const ruleObjectKey in ruleObject) {
const selector = ruleObjectKey.replace(/&/g, "." + className);
let declaration = ruleObject[ruleObjectKey];
ruleContent += `${selector}{${declaration}}`;
var identifier = ruleKey;
var ruleObject = styleRulesObject[identifier];
var ruleContent = "";
for (var ruleObjectKey in ruleObject) {
var selector = ruleObjectKey.replace(/&/g, "." + className);
var declaration = ruleObject[ruleObjectKey];
ruleContent += selector + "{" + declaration + "}";
}
sheet.insertRule(`${identifier}{${ruleContent}}`, sheet.cssRules.length);
styleSheet.insertRule(identifier + "{" + ruleContent + "}");
}
}
alreadyCreatedClassNames[className] = true;
styleSheet.createdClassNames[className] = true;
}

@@ -90,5 +469,10 @@ return className;

// eslint-disable-next-line react-hooks/exhaustive-deps
}, [theme, ...(deps ? deps : [])]);
}, __spreadArrays([theme], (deps ? deps : [])));
return className;
};
//# sourceMappingURL=index.js.map
exports.ClientStyleSheet = ClientStyleSheet;
exports.ServerStyleSheet = ServerStyleSheet;
exports.StyleSheetContext = StyleSheetContext;
exports.useCss = useCss;
//# sourceMappingURL=index.js.map

0

dist/unitlessCssProperties.d.ts

@@ -0,0 +0,0 @@ declare const _default: {

49

package.json
{
"name": "@css-system/use-css",
"version": "0.2.0",
"license": "MIT",
"version": "0.1.0",
"repository": "css-system/use-css",
"homepage": "https://css-system.github.io/use-css",
"main": "dist/index.js",
"module": "dist/index.es.js",
"jsnext:main": "dist/index.es.js",
"typings": "dist/index.d.ts",
"engines": {
"node": ">=8",
"npm": ">=5"
},
"files": [
"dist"
],
"scripts": {
"build": "rollup -c",
"start": "rollup -c -w",
"prepare": "yarn run build",
"predeploy": "cd example && yarn install && yarn run build",
"deploy": "gh-pages -d example/build"
},
"dependencies": {
"hash-sum": "^2.0.0",
"styled-system": "^5.1.4"
"@styled-system/css": "^5.1.4"
},
"peerDependencies": {
"react": "^15.0.0 || ^16.0.0",
"react-dom": "^15.0.0 || ^16.0.0"
},
"devDependencies": {
"@babel/core": "^7.8.4",
"@babel/runtime": "^7.8.4",
"@types/hash-sum": "^1.0.0",
"@types/react": "^16.9.19",
"@types/react-dom": "^16.0.5",
"@types/styled-system__css": "^5.0.4",
"react": "^16.8.0",
"cross-env": "^7.0.0",
"gh-pages": "^2.2.0",
"react": "^16.4.1",
"react-dom": "^16.4.1",
"rollup": "^1.31.1",
"rollup-plugin-babel": "^4.3.3",
"rollup-plugin-commonjs": "^10.1.0",
"rollup-plugin-node-resolve": "^5.2.0",
"rollup-plugin-peer-deps-external": "^2.2.0",
"rollup-plugin-typescript2": "^0.26.0",
"typescript": "^3.7.5"
},
"peerDependencies": {
"react": "^16.8.0",
"react-dom": "^16.8.0"
},
"scripts": {
"prepublish": "tsc"
"eslintConfig": {
"extends": "react-app"
}
}

128

README.md

@@ -1,68 +0,80 @@

This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
# css-system/use-css
## Available Scripts
A react hook for building versatile design primitives.
In the project directory, you can run:
## Example
### `yarn start`
```jsx
import React, {createContext, useContext} from "react"
import ReactDOM from "react-dom"
import {useCss} from "@css-system/use-css"
Runs the app in the development mode.<br />
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
const theme = {
breakpoints: ["40em", "52em", "64em"],
colors: {
background: "#ffffff",
text: "#000000",
primary: "#ff0000",
},
space: [0, 4, 8, 16, 32],
fontSizes: [0, 12, 14, 16, 20, 24, 32, 48, 64, 72],
}
The page will reload if you make edits.<br />
You will also see any lint errors in the console.
const ThemeContext = createContext(theme)
### `yarn test`
const View = ({as: Component = "div", css, ...props}) => {
const theme = useContext(ThemeContext)
const className = useCss(
{
display: "flex",
minWidth: 0,
minHeight: 0,
flex: "none",
alignSelf: "auto",
alignItems: "stretch",
flexDirection: "column",
justifyContent: "flex-start",
...css,
},
theme
)
Launches the test runner in the interactive watch mode.<br />
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
return <Component className={className} {...props} />
}
### `yarn build`
const Text = ({as: Component = "span", css, ...props}) => {
const theme = useContext(ThemeContext)
const className = useCss(
{
display: "inline-flex",
minWidth: 0,
minHeight: 0,
flex: "none",
alignSelf: "auto",
alignItems: "stretch",
flexDirection: "row",
justifyContent: "flex-start",
...css,
},
theme
)
Builds the app for production to the `build` folder.<br />
It correctly bundles React in production mode and optimizes the build for the best performance.
return <Component className={className} {...props} />
}
The build is minified and the filenames include the hashes.<br />
Your app is ready to be deployed!
See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
### `yarn eject`
**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
## Learn More
You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
To learn React, check out the [React documentation](https://reactjs.org/).
### Code Splitting
This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting
### Analyzing the Bundle Size
This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size
### Making a Progressive Web App
This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app
### Advanced Configuration
This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration
### Deployment
This section has moved here: https://facebook.github.io/create-react-app/docs/deployment
### `yarn build` fails to minify
This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify
const App = () => {
return (
<View
css={{
p: [1, 2, 3],
"&:hover": {
bg: "text",
color: "background",
},
}}
>
<Text css={{fontSize: [1, 2, 3]}}>Hello world !</Text>
</View>
)
}
```
dist/unitlessCssProperties.js
dist/unitlessCssProperties.js.map
dist/index.js.map

Sorry, the diff of this file is not supported yet