PkgFoundry
Catalog npm
Back to packageRELEASE DETAILS

1.1.1

npm

@-ui/styles

Yet another CSS-in-JS library. Based on Facebook's internal styling library as seen at React Conf 2019.

csscss-in-jsreactssrstylesstylesheetstylesheetssveltethemesthemingvue
Published20 Apr 2020
Direct dependencies28
Transitive dependenciesNot calculated

README

Current package documentation

@-ui/styles

Bundlephobia Types Code coverage Build status NPM Version MIT License 

npm i @-ui/styles

Quick Start

// 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>
)

API

Coming soon. Until then play with this React example on CodeSandbox

LICENSE

MIT

Downloads & popularity

Awaiting observations

No metric observations yet

Download counts and popularity will appear here as the collector receives them.

Declared dependencies 28

Native requirements
28 direct targetsNot calculated transitive count
Package / targetRequirementRelationship
@emotion/stylis
Environment
{
  "local_name": "@emotion/stylis",
  "alias": false,
  "peer_metadata": null
}
^0.8.5runtime
@emotion/unitless
Environment
{
  "local_name": "@emotion/unitless",
  "alias": false,
  "peer_metadata": null
}
^0.7.5runtime
trie-memoize
Environment
{
  "local_name": "trie-memoize",
  "alias": false,
  "peer_metadata": null
}
^1.1.2runtime
@babel/node
Environment
{
  "local_name": "@babel/node",
  "alias": false,
  "peer_metadata": null
}
^7.7.0development
@essentials/benchmark
Environment
{
  "local_name": "@essentials/benchmark",
  "alias": false,
  "peer_metadata": null
}
^1.0.5development
@lunde/babel-preset-es
Environment
{
  "local_name": "@lunde/babel-preset-es",
  "alias": false,
  "peer_metadata": null
}
latestdevelopment
@rollup/plugin-replace
Environment
{
  "local_name": "@rollup/plugin-replace",
  "alias": false,
  "peer_metadata": null
}
^2.2.1development
@types/crc
Environment
{
  "local_name": "@types/crc",
  "alias": false,
  "peer_metadata": null
}
^3.4.0development
@types/jest
Environment
{
  "local_name": "@types/jest",
  "alias": false,
  "peer_metadata": null
}
^24.0.23development
@typescript-eslint/eslint-plugin
Environment
{
  "local_name": "@typescript-eslint/eslint-plugin",
  "alias": false,
  "peer_metadata": null
}
^2.28.0development
@typescript-eslint/parser
Environment
{
  "local_name": "@typescript-eslint/parser",
  "alias": false,
  "peer_metadata": null
}
^2.28.0development
babel-plugin-search-and-replace
Environment
{
  "local_name": "babel-plugin-search-and-replace",
  "alias": false,
  "peer_metadata": null
}
^1.0.1development
crc
Environment
{
  "local_name": "crc",
  "alias": false,
  "peer_metadata": null
}
^3.8.0development
cross-env
Environment
{
  "local_name": "cross-env",
  "alias": false,
  "peer_metadata": null
}
^7.0.2development
eslint
Environment
{
  "local_name": "eslint",
  "alias": false,
  "peer_metadata": null
}
^6.8.0development
eslint-import-resolver-jest
Environment
{
  "local_name": "eslint-import-resolver-jest",
  "alias": false,
  "peer_metadata": null
}
latestdevelopment
eslint-plugin-jest
Environment
{
  "local_name": "eslint-plugin-jest",
  "alias": false,
  "peer_metadata": null
}
^23.8.2development
husky
Environment
{
  "local_name": "husky",
  "alias": false,
  "peer_metadata": null
}
^4.2.5development
jest
Environment
{
  "local_name": "jest",
  "alias": false,
  "peer_metadata": null
}
^25.4.0development
lint-staged
Environment
{
  "local_name": "lint-staged",
  "alias": false,
  "peer_metadata": null
}
^10.1.6development
prettier
Environment
{
  "local_name": "prettier",
  "alias": false,
  "peer_metadata": null
}
^2.0.4development
rimraf
Environment
{
  "local_name": "rimraf",
  "alias": false,
  "peer_metadata": null
}
^2.6.3development
rollup
Environment
{
  "local_name": "rollup",
  "alias": false,
  "peer_metadata": null
}
^1.27.3development
rollup-plugin-babel
Environment
{
  "local_name": "rollup-plugin-babel",
  "alias": false,
  "peer_metadata": null
}
^4.3.3development
rollup-plugin-commonjs
Environment
{
  "local_name": "rollup-plugin-commonjs",
  "alias": false,
  "peer_metadata": null
}
^10.1.0development
rollup-plugin-node-resolve
Environment
{
  "local_name": "rollup-plugin-node-resolve",
  "alias": false,
  "peer_metadata": null
}
^5.2.0development
rollup-plugin-terser
Environment
{
  "local_name": "rollup-plugin-terser",
  "alias": false,
  "peer_metadata": null
}
^5.1.2development
typescript
Environment
{
  "local_name": "typescript",
  "alias": false,
  "peer_metadata": null
}
^3.8.3development

Distribution files

1 collected
Distribution 1

Source distribution

Source file
Checksums from source
{
  "shasum": "03f86e7040d3f46dd61243aef766768eb53ad108",
  "integrity": "sha512-EzLqI2PyuOQ5ZiP8kdVDcfv7haE9CO9HC6iMtWWjDX+4ic6gLD8bUS4WcxfD0q8GO/kOVDWGnsXoDlJvQRK5iw==",
  "tarball": "https://registry.npmjs.org/@-ui/styles/-/styles-1.1.1.tgz",
  "fileCount": 31,
  "unpackedSize": 192053,
  "npm-signature": "-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenR1BCRA9TVsSAnZWagAApnUP/1lrIeUV1Ms3uY2aNXSX\nu2C0Ptg3iHEf/D7cIidlN1CM868SAf1HWz5ESFb7CDdJTySyUT8duiHLZ/z5\nBFfm2kKAKr2tzqEV3bTGRB/gIkq7ySjKDfP2Q0EFATPK6KQR6bnXLHMOG4W+\nPpiPVa9M8zC7C4c0uM3XrIIJFSbMQx8fc5d0TJQduc8g4p4CM7FgYeIH/gs6\nTBr129uEY1VXMHTvqME1Z0SEWzkvVn61ilseZe/DOr7EErXs1suFC1WOGtP5\nfkjxwI4jFwOsqUubg6zCSLs1K42BJsMlGuanQIF7ktROdLotRo92w9R5+134\n0VP7ylORYzb6h4T8iJdvR5jC6bpu1RSKF7Eylex1GLxfGDJdswpcBHTpPfN3\nhjT1XBeKRIUjz153VRSlfyDkYGpwR5bigrtRmAvo/0pxNIUZT+CeNftu+cNg\nerJA5qPe5InndDYUdvx/MGL3jURF0a3LB6gM5OErWtW8RD2IukFqnygYnAHF\nflovxRalcp0ejAO3rN5c8pywntj5cU94ob4x4vAjyxQaYT4WvZAvSyfxmRJ7\nZBH3LozdfVIaYMsMvbdh0bfuc7UUKTTYkIANUtMuPZYWWXkvV8SBse2LL+OE\n8uJ6PKsFDLSAZ43+BPSWPiRKyMIExpkuJ6v5JPsiYbKJYfPBVqvNQnnIpK5W\nJe6q\r\n=rE1H\r\n-----END PGP SIGNATURE-----\r\n",
  "signatures": [
    {
      "keyid": "SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA",
      "sig": "MEYCIQCULlJNbnV5pIdgmhBNsB7dK/xJkxL40FPbq9QNCwSt9wIhAIHTWZqrsXRUj3/lftPdzlil9lal7kBg4wWJjA52JFGZ"
    }
  ]
}

Repository

PENDING
dash-ui/styles

Shared repository data · GitHub

License detected in repository
Not collected

Metadata history

Meaningful changes
Current collected state Current

Observed since 20 Oct, 21:49 UTC

No superseded metadata states collected. Unchanged observations do not create new revisions.

Record identity

package_version:b9dfe970e98c7f9047b54e645a00529bcf3359d4087d3cb43ae22f17a9f9fe08

Other collected versions

1.2.42 May1.2.321 Apr1.2.221 Apr1.2.121 Apr1.2.021 Apr1.1.621 AprView all collected versions →