Current collected state Current
Observed since 20 Oct, 21:49 UTC
No superseded metadata states collected. Unchanged observations do not create new revisions.
@-ui/styles
Yet another CSS-in-JS library. Based on Facebook's internal styling library as seen at React Conf 2019.
npm i @-ui/styles
// React example
import React from 'react'
import styles from '@-ui/styles'
styles.variables({
colors: {
red: '#c12',
blue: '#09a',
purple: '#800080',
},
})
const style = styles({
red: `
color: var(--colors-red);
`,
blue: ({colors}) => `
color: ${colors.blue};
.${style('red')} {
color: ${colors.purple};
}
`,
})
const Component = (props) => (
<div className={style({blue: props.blue, red: props.red})}>
Hello world
<span className={style(props.blue && 'blue', props.red && 'red')}>
Hello world
</span>
<span className={style('blue')}>I'm always blue</span>
<span className={style('red')}>I'm purple when my parent is blue</span>
</div>
)
Coming soon. Until then play with this React example on CodeSandbox
MIT
Download counts and popularity will appear here as the collector receives them.
| Package / target | Requirement | Relationship |
|---|---|---|
@emotion/stylisEnvironment{
"local_name": "@emotion/stylis",
"alias": false,
"peer_metadata": null
} | ^0.8.4 | runtime |
@emotion/unitlessEnvironment{
"local_name": "@emotion/unitless",
"alias": false,
"peer_metadata": null
} | ^0.7.4 | runtime |
trie-memoizeEnvironment{
"local_name": "trie-memoize",
"alias": false,
"peer_metadata": null
} | ^1.0.15 | runtime |
@babel/nodeEnvironment{
"local_name": "@babel/node",
"alias": false,
"peer_metadata": null
} | ^7.7.0 | development |
@essentials/benchmarkEnvironment{
"local_name": "@essentials/benchmark",
"alias": false,
"peer_metadata": null
} | ^1.0.5 | development |
@lunde/babel-preset-esEnvironment{
"local_name": "@lunde/babel-preset-es",
"alias": false,
"peer_metadata": null
} | latest | development |
@types/jestEnvironment{
"local_name": "@types/jest",
"alias": false,
"peer_metadata": null
} | latest | development |
@typescript-eslint/eslint-pluginEnvironment{
"local_name": "@typescript-eslint/eslint-plugin",
"alias": false,
"peer_metadata": null
} | latest | development |
@typescript-eslint/parserEnvironment{
"local_name": "@typescript-eslint/parser",
"alias": false,
"peer_metadata": null
} | latest | development |
crcEnvironment{
"local_name": "crc",
"alias": false,
"peer_metadata": null
} | ^3.8.0 | development |
cross-envEnvironment{
"local_name": "cross-env",
"alias": false,
"peer_metadata": null
} | latest | development |
eslintEnvironment{
"local_name": "eslint",
"alias": false,
"peer_metadata": null
} | latest | development |
eslint-import-resolver-jestEnvironment{
"local_name": "eslint-import-resolver-jest",
"alias": false,
"peer_metadata": null
} | latest | development |
eslint-plugin-jestEnvironment{
"local_name": "eslint-plugin-jest",
"alias": false,
"peer_metadata": null
} | latest | development |
huskyEnvironment{
"local_name": "husky",
"alias": false,
"peer_metadata": null
} | latest | development |
jestEnvironment{
"local_name": "jest",
"alias": false,
"peer_metadata": null
} | latest | development |
lint-stagedEnvironment{
"local_name": "lint-staged",
"alias": false,
"peer_metadata": null
} | latest | development |
prettierEnvironment{
"local_name": "prettier",
"alias": false,
"peer_metadata": null
} | latest | development |
rimrafEnvironment{
"local_name": "rimraf",
"alias": false,
"peer_metadata": null
} | ^2.6.3 | development |
rollupEnvironment{
"local_name": "rollup",
"alias": false,
"peer_metadata": null
} | ^1.27.3 | development |
rollup-plugin-babelEnvironment{
"local_name": "rollup-plugin-babel",
"alias": false,
"peer_metadata": null
} | ^4.3.3 | development |
rollup-plugin-commonjsEnvironment{
"local_name": "rollup-plugin-commonjs",
"alias": false,
"peer_metadata": null
} | ^10.1.0 | development |
rollup-plugin-node-resolveEnvironment{
"local_name": "rollup-plugin-node-resolve",
"alias": false,
"peer_metadata": null
} | ^5.2.0 | development |
rollup-plugin-replaceEnvironment{
"local_name": "rollup-plugin-replace",
"alias": false,
"peer_metadata": null
} | ^2.2.0 | development |
rollup-plugin-terserEnvironment{
"local_name": "rollup-plugin-terser",
"alias": false,
"peer_metadata": null
} | ^5.1.2 | development |
ts-jestEnvironment{
"local_name": "ts-jest",
"alias": false,
"peer_metadata": null
} | latest | development |
typescriptEnvironment{
"local_name": "typescript",
"alias": false,
"peer_metadata": null
} | latest | development |
Source distribution
{
"shasum": "8434bddaff7a3eb1b9843a7f04891db9ad50f48c",
"integrity": "sha512-Fy9c1sjgEF6e66emHRzPk7oYMMij6mdHa0Lowncfvda5muZkcayvCGK6cRFSTDiLw9/XtUrhAdnhlluoKtgQqQ==",
"tarball": "https://registry.npmjs.org/@-ui/styles/-/styles-1.0.46.tgz",
"fileCount": 17,
"unpackedSize": 116514,
"npm-signature": "-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd12WZCRA9TVsSAnZWagAAul8P/2k1SWUmGS30PvL37g5v\nEUDvqLYallEoGfbbtub3t6UZgmqVVS2mUTpa6YCwye2sZGRuQm/QSbrOsCua\nhRk2+vou7ViR9P7ePbKFxrVA8WhN9FoQRaJ6sXDr3P6FfZkjZo7ACP1B42u/\nGumT2kACbPGapGDagCSzPLZmHRYXlT9+OD4VOfnLvl/d9Tw30RCHFbH4MJvW\nycFXbSioepepEHWGdw4ZESR6JOFqhRAKwMVI9k9DLRon8MHt997HWOQ+JBku\nQQTkFsLtVBXR8+w94SqRpB3+4sm1G3deLnIy9fNQtEN0ag4drgs2Q7ll6jIL\n1pLeAsKIRE1rwUxcj62USzmFvn2PYV/cUpP8JfRuhboSCRLUxWTpG7AK5cz/\nliAJ2ylzrNNAooJhDyOKp8N3GwnBHFWm4oPIfUkNSaFQrdmdc66w5Oy2RhCO\nZv/51kahDTmPKLBIAE9eHjQwIxXXQ7vmrAmJErT+JLZ8s6RXW394nxaQegj3\n38LxTDosQ6TRaNX2qkfXEzzoDh/dKNPkhz9N3MEcrmqPAcRJBbbWLZWLh5xz\nBOVwp3nf7CfNHtVzJ6guv5BL1fyNmnV2oTcz/n34SSPSyZF04mZXky7Iqmjw\nBtYO04Wyt7Zi1MlXkN7aLyYMopp6uU4KVsjN7xSNRe48FLHHOgc4ndoP6ugY\nqVI5\r\n=nx24\r\n-----END PGP SIGNATURE-----\r\n",
"signatures": [
{
"keyid": "SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA",
"sig": "MEYCIQCHmSfCxslzgAgkxtjkpepsT5tToWT0WsOzc6xZ3U1fjwIhAImPgYO/rPE6UgQZfRdzD2BWDDsaJhGEsRBKbmpI1w7E"
}
]
}Observed since 20 Oct, 21:49 UTC
No superseded metadata states collected. Unchanged observations do not create new revisions.
package_version:8d2e044f9f3c106a0f1ee708b821fbdc8dc4b97e5a37445feecbf08b9ec5a35b