{"_id":"@applaud/glamor","name":"@applaud/glamor","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@applaud/glamor","version":"1.0.0","description":"inline css for component systems","main":"lib/index.js","typings":"index.d.ts","scripts":{"start":"webpack-dev-server --config webpack/dev.js","parser":"pegjs src/css/spec.pegjs","clean":"rimraf lib umd","build":"npm-run-all -s clean -s parser -p build:** -s size","build:lib":"babel src -d lib --presets env,stage-0,react","build:umd":"mkdirp umd && webpack --config webpack/umd.js","build:umd-prod":"cross-env NODE_ENV=production npm run build:umd","size":"cat umd/index.min.js | gzip | wc -c","test":"karma start tests/karma.conf.js","test:server":"cross-env NODE_ENV=test babel-node tests/server.js --presets env,stage-0,react","test:watch":"npm test -- --no-single-run","coverage":"rm -rf tests/coverage && COVERAGE=1 npm test && open tests/coverage/*/index.html","prepublish":"npm run build"},"devDependencies":{"babel-cli":"^6.24.1","babel-core":"^6.25.0","babel-eslint":"^7.2.3","babel-loader":"^7.1.1","babel-plugin-istanbul":"^4.1.4","babel-plugin-react-require":"^3.0.0","babel-plugin-transform-decorators-legacy":"^1.3.4","babel-preset-env":"^1.6.0","babel-preset-react":"^6.24.1","babel-preset-stage-0":"^6.24.1","classnames":"^2.2.5","cross-env":"^5.0.1","eslint":"^4.2.0","eslint-config-rackt":"^1.1.1","eslint-plugin-react":"^7.1.0","expect":"^1.20.2","expect-jsx":"^3.0.0","karma":"^1.7.0","karma-browserstack-launcher":"^1.3.0","karma-chrome-launcher":"^2.2.0","karma-coverage":"^1.1.1","karma-firefox-launcher":"^1.0.1","karma-mocha":"^1.3.0","karma-mocha-reporter":"^2.2.3","karma-safari-launcher":"^1.0.0","karma-webpack":"^2.0.4","mkdirp":"^0.5.1","mocha":"^3.4.2","npm-run-all":"^4.0.2","pegjs":"^0.10.0","react":"^16.0.0-beta.1","react-addons-css-transition-group":"^15.6.0","react-dom":"^16.0.0-beta.1","rimraf":"^2.6.1","stylelint":"^8.0.0","stylelint-config-standard":"^17.0.0","stylelint-processor-styled-components":"^0.2.1","webpack":"^3.3.0","webpack-dev-server":"^2.5.1"},"author":{"name":"Applaud"},"homepage":"https://github.com/Applaud-devpack/glamor","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Applaud-devpack/glamor.git"},"keywords":["css","inline","applaud"],"eslintConfig":{"extends":["rackt"],"plugins":["react"],"rules":{"react/jsx-uses-vars":"error","react/jsx-uses-react":"error","jsx-quotes":0}},"dependencies":{"@applaud/fbjs":"^1.0.1","inline-style-prefixer":"^3.0.6","object-assign":"^4.1.1","prop-types":"^15.5.10","through":"^2.3.8"},"gitHead":"60a81e63c87eae33a6f796612de3d74bbcf04753","bugs":{"url":"https://github.com/Applaud-devpack/glamor/issues"},"_id":"@applaud/glamor@1.0.0","_npmVersion":"6.2.0","_nodeVersion":"10.9.0","_npmUser":{"name":"mahesh_reddy","email":"applaud.devpack@gmail.com"},"dist":{"integrity":"sha512-dOSaxxMTXJbcVVn7b+Qcl3IYhjZUivDdjm9TjXhjJqOraEXbKxNpsQRPZToXnOKZyMza8jUc3SAMmp0qQ3VEzw==","shasum":"2ce5353ac807418508aabcd4e2b8c1403d6b0079","tarball":"https://registry.npmjs.org/@applaud/glamor/-/glamor-1.0.0.tgz","fileCount":47,"unpackedSize":885500,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDiPgxq36ZWxAQeQ5C6vwb8HqdSP+apxXeLSHVS4yw9EAIhAJqMNPDDvPGSrlJsxno3q9x8oomfiBr8bEPHp3lE0nrn"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJipsCyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoJ/Q/9FFE9zbVtrry0sHPc35A2UDokcrGD7xNxuuHLasjAq+oraLCJ\r\ny7HCCcJbULCS5I8esz3d8IPXNWNDtGYStUmFX8o859fQ9PzMG5klydUvNKiU\r\nWX5EhsR5gCVRq8uIveG75rZobLGZx+ITRSLYUOtXtDttMSehm5jU2h+VXXGm\r\ngE/gp4t5vRXM+926yggyiG4aGgtQAMWxHXyPZq7JPRH+gZKgcNTlwVuWfHII\r\nF3R7f1u0wte3DZEsJc1yY3wKhAfTsZh8X0I7YLqEN7OGguibpZSp2cXFc1QN\r\nuSYOQjptx1zWthzb61C9/56cCVARE8ZXluevi0O9ZT3XeYXmVP4S1D274zcO\r\nupPptGoynzICVXT4KfVZ5tjXaRGMgpsKEyA+GrAPAsDqpH/8E5dzJyNsMIMr\r\nyvtyELC3v7sLHmO4kg8afpmRz49dByDH/Mw2E2sknEzc7/0oIpEJnh2ozOLK\r\nLwpGmUmxx9MW5GixY5w6gdwyW7CeGEo8E+x9wlB05poDyy9Dnny+HuJXqWjX\r\nQizrrjW90DWmzTREunFxwEGTg42NZYuCtQfifhbz+NRXOYz1fq+3Y7zrpD5w\r\niiLtyAHTAKPOro0LoB1juthi6HUz71OlecrMiO//aKEyOf7SgaGVYl0zY6gx\r\ns1oMZaq/x4JyuuESQQ/+QQFO+XEbxNUt+jE=\r\n=CLWT\r\n-----END PGP SIGNATURE-----\r\n"},"directories":{},"maintainers":[{"name":"mahesh_reddy","email":"applaud.devpack@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/glamor_1.0.0_1655095474778_0.8748202613710923"},"_hasShrinkwrap":false}},"time":{"created":"2022-06-13T04:44:34.719Z","1.0.0":"2022-06-13T04:44:34.904Z","modified":"2022-06-13T04:44:35.086Z"},"maintainers":[{"name":"mahesh_reddy","email":"applaud.devpack@gmail.com"}],"description":"inline css for component systems","homepage":"https://github.com/Applaud-devpack/glamor","keywords":["css","inline","applaud"],"repository":{"type":"git","url":"git+https://github.com/Applaud-devpack/glamor.git"},"author":{"name":"Applaud"},"bugs":{"url":"https://github.com/Applaud-devpack/glamor/issues"},"license":"MIT","readme":"# @applaud/glamor\n\n\ncss in your javascript\n\n`npm install @applaud/glamor --save`\n\nusage\n```jsx\nimport { css } from '@applaud/glamor'\n\n// make css rules\nlet rule = css({\n  color: 'red',\n  ':hover': {\n    color: 'pink'\n  },\n  '@media(min-width: 300px)': {\n    color: 'green',\n    ':hover': {\n      color: 'yellow'\n    }\n  }\n})\n\n// add as data attributes\n<div {...rule} {...another}>\n  zomg\n</div>\n\n// or as classes\n<div className={`${rule} ${another}`}>\n  zomg\n</div>\n\n// merge rules for great justice\nlet mono = css({\n  fontFamily: 'monospace'\n})\n\nlet bolder = css({\n  fontWeight: 'bolder'\n})\n\n<div {...css(mono, bolder)}>\n  bold code!\n</div>\n\n```\n\nmotivation\n---\n\nThis expands on ideas from @vjeux's [2014 css-in-js talk](https://speakerdeck.com/vjeux/react-css-in-js).\nWe introduce an api to annotate arbitrary dom nodes with style definitions (\"rules\") for, um, the greater good.\n\nfeatures\n---\n\n- fast / efficient, with a fluent api\n- framework independent\n- adds vendor prefixes / fallback values\n- supports all the pseudo :classes/::elements\n- `@media` queries\n- `@supports` statements\n- `@font-face` / `@keyframes`\n- escape hatches for parent / child / contextual selectors\n- dev helper to simulate pseudo classes like `:hover`, etc\n- server side / static rendering\n- tests / coverage\n- experimental - [write real css](https://github.com/Applaud-devpack/glamor/blob/master/docs/css.md), with syntax highlighting and linting\n\n\n(thanks to [BrowserStack](https://www.browserstack.com/) for providing the infrastructure that allows us to run our build in real browsers.)\n\ndocs\n---\n- [api documentation](https://github.com/Applaud-devpack/glamor/blob/master/docs/api.md)\n- [howto](https://github.com/Applaud-devpack/glamor/blob/master/docs/howto.md) - a comparison of css techniques in glamor\n- [plugins](https://github.com/Applaud-devpack/glamor/blob/master/docs/plugins.md)\n- [server side rendering](https://github.com/Applaud-devpack/glamor/blob/master/docs/server.md)\n- [performance tips](https://github.com/Applaud-devpack/glamor/blob/master/docs/performance.md)\n- [what happens when I call css(...rules)?](https://github.com/Applaud-devpack/glamor/blob/master/docs/implementation.md)\n\nextras\n---\n\n- `glamor/reset` - include a css reset\n- [use a `css` prop on *all* your react elements](https://github.com/Applaud-devpack/glamor/blob/master/docs/createElement.md)\n- `glamor/react` - helpers for [themes](https://github.com/Applaud-devpack/glamor/blob/master/docs/themes.md), [`@vars`](https://github.com/Applaud-devpack/glamor/blob/master/docs/vars.md)\n- `glamor/jsxstyle` - [react integration](https://github.com/Applaud-devpack/glamor/blob/master/docs/jsxstyle.md), à la [jsxstyle](https://github.com/petehunt/jsxstyle/)\n- `glamor/aphrodite` - [shim](https://github.com/Applaud-devpack/glamor/blob/master/docs/aphrodite.md) for [aphrodite](https://github.com/Khan/aphrodite) stylesheets\n- `glamor/utils` - a port of [postcss-utilities](https://github.com/ismamz/postcss-utilities)\n- `glamor/ous` - a port of [the skeleton css framework](http://getskeleton.com)\n- [`glamor/styled`](https://github.com/Applaud-devpack/glamor/blob/master/docs/styled.md) - an experimental port of [styled-components](https://styled-components.com/)\n\n\nspeedy mode\n---\n\nthere are two methods by which the library adds styles to the document -\n- by appending css 'rules' to a browser backed stylesheet. This is really fast, but has the disadvantage of making the styles uneditable in the devtools sidebar.\n- by appending text nodes to a style tag. This is fairly slow, but doesn't have the editing drawback.\n\nas a compromise, we enable the former 'speedy' mode `NODE_ENV=production`, and disable it otherwise. You can manually toggle this with the `speedy()` function.\n\ncharacteristics\n---\n\nwhile glamor shares most common attributes of other inline style / css-in-js systems,\nhere are some key differences -\n\n- uses 'real' stylesheets, so you can use all css features.\n- rules can be used as data-attributes or classNames.\n- simulate pseudo-classes with the `simulate` helper. very useful, especially when combined when hot-loading and/or editing directly in devtools.\n- really fast, by way of deduping rules, and using [insertRule](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet/insertRule) in production.\n\n\ntodo\n---\n\n- redo all the docs\n- [planned enhancements](https://github.com/Applaud-devpack/glamor/issues?q=is%3Aopen+is%3Aissue+label%3Aenhancement)\n- notes on composition\n\nprofit, profit\n---\n\nI get it\n","readmeFilename":"README.md"}