{"_id":"@mxenabled/cssinjs","_rev":"40-5b949b7365ad4d42a4b2ac1a1edd1712","name":"@mxenabled/cssinjs","dist-tags":{"latest":"0.6.0"},"versions":{"0.6.0":{"name":"@mxenabled/cssinjs","version":"0.6.0","keywords":["library","css","css-in-js"],"author":{"name":"MX"},"license":"MIT","_id":"@mxenabled/cssinjs@0.6.0","maintainers":[{"name":"sambev","email":"sam.bev87@gmail.com"},{"name":"cerinman","email":"tommy.dugger@mx.com"},{"name":"whiteinge","email":"seth@eseth.com"}],"homepage":"","dist":{"shasum":"4aaf8257daeb6b23bf3445bdb594104c85a1effb","tarball":"https://registry.npmjs.org/@mxenabled/cssinjs/-/cssinjs-0.6.0.tgz","fileCount":8,"integrity":"sha512-pj4/+iqyEGS1zg4i7jo7jLX+tS9h1YA5W1vLfUipuLWbxzEmoI6K2JvfhP1jT3eKTOJE3MTH+K53/t9KDyUu3Q==","signatures":[{"sig":"MEQCIBZcOFW71dS1hwAknQXqd5e++pM9X6wRPwDX9D1ya7moAiAnTDq0FXJ6lf6O6K0H7j/f1zbpRbk550DusmCs+xt0gQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":31743,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh2SdmCRA9TVsSAnZWagAADmAP/AtpNajsZY/1IOoXdPky\nRrUkCo5u4yummP1CYN7k0f9gkJ09JsYpGECsf87BrVwwmbxeYCp28EcCLdkm\nYCGjZWpuRws+OD9VnDb4kHXzckTvEHkQvJqtskOXLqhdGygGnciA9u9P+TUd\n9tO+P+KBqNrJm6CZh31qiqrzUoP3tgv7sT39w/JLd9G+sfA9lBYEw4//hjdm\nw3p1mhrZfVAHaTL0vS0PuSXAHN3vNDyBKLykzwKl2l1DGbB4bEgRfBiYv9ho\nctsyQop17GrlEv3qSClYZhdnsb6ByUjN4md6H7laCrEWssPrLM3dypCnoT+1\nUj6T2SVZqfMy+IRae+UX//tB1G54Qg17ILPubdiT7Rd2ffWQfqtWFGH/8J0A\nI8fdPll83IkrB/9siyUvuCqTl7g5taxkFSgnsi1cX3F+rA3U0ip9xUMMQhvg\nDBilACyt/EDI0wGI8sQkhoAGS0aVf/5RMfSRyh0z4QpCWEpxV4K6IqdU+OvA\nJ7hrLe+TnDlT00ALLhsu1ob/IKENylAG7sl/VdFy88POIWSyiACTjuSACMC5\nJwn7rimN1xfRyjuwCL2ovWqlJcXBXLG0Ytonw9t5KfsKpBR9eZBnJaWboJCF\nC2BF+2i6qSwn7flxkYRPxSSNTJtyVm0pQrBWNjEjhc8sTJIe0r/UitHV92Tb\n9Dib\r\n=/rNg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","gitHead":"ab8900db6cc3ec158414c38e8ea41aba3f487ca2","scripts":{"test":"npm run -s test:uvu || exit=$?; npm run -s test:prettier|| exit=$?; exit $exit","start":"npm run -s watch:dev","watch":"npm test; npm run -s watch:test","test:uvu":"uvu dist","build:dev":"tsc --allowJs --outDir dist --jsx react --module commonjs --target es5 src/**/*","watch:dev":"npm run -s build:dev -- --watch","build:prod":"NODE_ENV=production npm run -s build:dev","preversion":"npm run -s build:prod; npm test","watch:test":"watchlist dist -- npm test","test:prettier":"prettier -l src","test:benchmarks":"node benchmarks/index.js"},"_npmUser":{"name":"whiteinge","email":"seth@eseth.com"},"prettier":{"semi":false,"printWidth":100,"singleQuote":true,"trailingComma":"all"},"_npmVersion":"7.6.0","description":"Write CSS in JS notation; get a className back.","directories":{},"_nodeVersion":"14.16.0","dependencies":{"free-style":"^4.1.0","insert-css":"^2.0.0"},"_hasShrinkwrap":false,"devDependencies":{"uvu":"^0.5.1","prettier":"^2.2.1","watchlist":"^0.2.3","typescript":"^4.2.2"},"_npmOperationalInternal":{"tmp":"tmp/cssinjs_0.6.0_1615331235645_0.7335991863623934","host":"s3://npm-registry-packages"}}},"time":{"created":"2021-03-09T23:07:15.403Z","modified":"2026-03-11T17:59:19.838Z","0.6.0":"2021-03-09T23:07:15.810Z"},"author":{"name":"MX"},"license":"MIT","keywords":["library","css","css-in-js"],"description":"Write CSS in JS notation; get a className back.","maintainers":[{"email":"seth.skousen@mx.com","name":"sskousen"},{"email":"collin.ballou@mx.com","name":"blueeagle500"},{"email":"josh.davis@mx.com","name":"jrexdavis"},{"email":"nathan.nash@mx.com","name":"nathan.nash"},{"email":"cristian.chirinos@mx.com","name":"thechirinos"},{"email":"inphomercial@gmail.com","name":"inphomercial"},{"email":"js.fowles@gmail.com","name":"jsfowles"},{"email":"ethanwolz@icloud.com","name":"wolzey"},{"email":"ashly.lamarr@mx.com","name":"ashlylamarr"},{"email":"devexperience@mx.com","name":"mxdevexperience"},{"email":"mwimoclement@gmail.com","name":"mwclemy"},{"email":"sprout-goshawk.0g@icloud.com","name":"jameson13"},{"email":"tingeycraig@gmail.com","name":"craigtingey"},{"email":"ashley.wright@mx.com","name":"ashley.wright"},{"email":"jameson.brown@mx.com","name":"jamesonmx"},{"email":"shalynhuetter@gmail.com","name":"shalyn.huetter"},{"email":"amy.jeppson@mx.com","name":"amyjeppson.mx"},{"email":"william.bridegroom@mx.com","name":"william.bridegroom"},{"email":"dev@mx.com","name":"mx.dev"},{"email":"logan.razclan1@gmail.com","name":"codinglogan"},{"email":"wes.risenmay@mx.com","name":"wesrisenmay-mx"},{"email":"sabarigiri.balakris@mx.com","name":"mx-sabarigiri"},{"email":"stephanie.stamm@mx.com","name":"stephanie.stamm"},{"email":"mohamed.asan@mx.com","name":"hassyyy_mx"},{"email":"jordan.boudreau@mx.com","name":"jordanboudreau"}],"readme":"# CSS-in-JS\n\nWrite CSS as nested JS object notation; get a unique className back. That's it.\n\nA thin, declarative, no-frills, \"only one way to do it\" wrapper around the\nexcellent and lightweight\n[free-style](https://github.com/blakeembrey/free-style) library.\n\n## Documentation\n\nThere are three export functions:\n\n```js\nimport { css, global, keyframes } from '@mxenabled/cssinjs'\n```\n\nWrite regular, vanilla CSS in JavaScript object notation:\n\n```js\nconst className = css({\n  color: 'white',\n  backgroundColor: 'black',\n})\n```\n\nCSS added to the document:\n```css\n.f6e2hlp {\n  background-color: black;\n  color: white;\n}\n```\n\nThe generated `className` is a unique string that can be added to any HTML\nelement to style it and its children using regular CSS semantics.\n\n*Caveat*: CSS specficity rules apply as usual with the exception of _order_.\nThis is because JavaScript objects are unordered. Do not rely on order.\n\n### Nesting and parent references\n\nThe CSS object may include nested objects. The keys of those nested objects may\ncontain any valid CSS selector. The `&` symbol references the parent style.\n\nJavaScript:\n```js\ncss({\n  backgroundColor: 'black',\n\n  '& .foo': { color: 'white' },\n\n  '& #myid ~ ul > li:last-child': { color: 'green' },\n\n  '& .foo.bar': {\n    '& span.baz': {\n      color: 'red',\n    },\n  },\n})\n```\n\nCSS:\n```css\n.f1wuspsr {\n  background-color: black;\n}\n.f1wuspsr .foo {\n  color: white;\n}\n.f1wuspsr #myid ~ ul > li:last-child {\n  color: green;\n}\n.f1wuspsr .foo.bar span.baz {\n  color: red;\n}\n```\n\n### Pseudo-selectors\n\nJavaScript:\n```js\ncss({\n  '& > ul': {\n    listStyleType: 'none',\n    paddingLeft: '0',\n\n    '& li': {\n      cursor: 'pointer',\n\n      '&:hover': {\n        backgroundColor: 'yellow',\n      },\n    },\n  },\n})\n```\n\nCSS:\n```css\n.fodl7pe > ul {\n  list-style-type: none;\n  padding-left: 0;\n}\n.fodl7pe > ul li {\n  cursor: pointer;\n}\n.fodl7pe > ul li:hover {\n  background-color: yellow;\n}\n```\n\n### Media queries\n\nJavaScript:\n```js\ncss({\n  '@media(min-width: 300px)': {\n    '& h2': { fontSize: '30px' },\n  },\n})\n```\n\nCSS:\n```css\n@media (min-width: 300px) {\n  .fdnu0l2 h2 {\n    font-size: 30px;\n  }\n}\n```\n\n### Keyframes\n\nThe special `keyframes` function takes key/value pairs used for a CSS\n`@keyframes` rule and returns a string identifier that can be used in an\n`animation-name` rule.\n\nIt can be called in two ways:\n\n1.  If you wish to manually specify the animation name pass a string you wish\n    to use as the first argument and the CSS object as the second argument:\n\n    JavaScript:\n    ```js\n    const colorAnimation = keyframes('custom-name-here', {\n      from: { color: 'red' },\n      to: { color: 'blue' },\n    })\n\n    const className = css({\n      animationName: colorAnimation,\n      animationDuration: '1s',\n    })\n    ```\n\n    CSS:\n    ```css\n    @keyframes custom-name-here {\n      from {\n        color: red;\n      }\n      to {\n        color: blue;\n      }\n    }\n\n    .f17e5e93 {\n      animation-duration: 1s;\n      animation-name: custom-name-here;\n      animation-name: @keyframes custom-name-here {\n        from {\n          color: red;\n        }\n        to {\n          color: blue;\n        }\n      }\n    }\n    ```\n\n2.  If you prefer an automatically generated animation name then simply pass\n    the CSS object as a single argument.\n\n    JavaScript:\n    ```js\n    const colorAnimation = keyframes({\n      '0%': { color: 'red' },\n      '60%': { color: 'purple' },\n      '100%': { color: 'blue' },\n    })\n\n    const className = css({\n      animationName: colorAnimation,\n      animationDuration: '1s',\n    })\n    ```\n\n    ```css\n    @keyframes f167zcak {\n      0% {\n        color: red;\n      }\n      100% {\n        color: blue;\n      }\n      60% {\n        color: purple;\n      }\n    }\n\n    .f1inlm1z {\n      animation-duration: 1s;\n      animation-name: f167zcak;\n      animation-name: @keyframes f167zcak {\n        0% {\n          color: red;\n        }\n        100% {\n          color: blue;\n        }\n        60% {\n          color: purple;\n        }\n      }\n    }\n    ```\n\nIf you do not plan to reference an animation-name in more than one place, you\nmay simply specify it inline:\n\n```js\nconst className = css({\n  animationName: keyframes({\n    '0%': { color: 'red' },\n    '60%': { color: 'purple' },\n    '100%': { color: 'blue' },\n  }),\n\n  animationDuration: '1s',\n})\n\n```\n\n## Global styles\n\nGlobal CSS styles, without a namespace, may be created with the `global()`\nfunction. It does not return a value.\n\nJavaScript:\n```js\nglobal({\n  a: {\n    textDecoration: 'underline',\n    color: 'blue',\n\n    '&:hover': { color: 'green' },\n  },\n})\n```\n\nCSS:\n```css\nfont-family: 'Comic Sans MS', 'Comic Sans', cursive;\n```\n\n### Implementation notes\n\nThe contents of the JavaScript object will be inspected to produce\na deterministic `className` that can be reused in multiple places. Multiple\ninvocations of `css()` with the same value are idempotent and will only add the\ngenerated CSS to the page once.\n\n## Suggestions\n\n### Do: reference values and variables\n\nThe syntax is JavaScript. Use it!\n\n```js\ncss({\n  '& h1': {\n    ...mixins.headers.h1,\n  },\n\n  '& .someEl': {\n    backgroundColor: theme.colors.gray100,\n  },\n\n  [`@media (max-width: ${theme.BreakPoints.medium}px)`]: { /* ... */ },\n})\n```\n\n### Do: make use of multiple classes\n\n### Do: pretend you're writing regular CSS\n\nCreate CSS classes as you would if you were writing CSS in a regular .css file\nand use JavaScript to toggle classes on and off. This works great for\nCSS animations too.\n\n```js\nconst MyComponent = () => {\n  const [focusedSection, setFocus] = useState('foo')\n\n  <div className={className}>\n      <div className={focusedSection === 'foo' ? 'foreground' : 'background'}>Foo</div>\n      <div className={focusedSection === 'bar' ? 'foreground' : 'background'}>Bar</div>\n  </div>\n}\n\nconst className = css({\n  '& .foreground': { backgroundColor: 'white' },\n  '& .background': { backgroundColor: 'gray' },\n})\n```\n\n### Don't: programmatically generate CSS\n\nThis system will not de-duplicate any CSS styles. If the contents of the CSS\nobject produce a unique combination style then that will be added to the page.\n\nIn general be wary of calling `css()` programmatically or wrapping it in\na function that accepts parameters and generates CSS depending on those\nparameters. That pattern is fine if done sparingly -- for example, once as the\napp is first loading to initialize CSS values for a site-wide theme. But if\ndone frequently it can lead to memory concerns.\n\n```js\nconst genRandomColor = () => '#' + (0x1000000 + Math.random() * 0xffffff)\n  .toString(16)\n  .substr(1, 6)\n\nconst MyComponent = () => {\n  const [className, setClassName] = useState('#ffffff')\n\n  useEffect(() => {\n    setInterval(() => {\n      const newClassName = css({\n        width: '100px',\n        height: '100px',\n        backgroundColor: genRandomColor(),\n      })\n\n      setClassName(newClassName)\n    }, 100)\n  }, [])\n\n  return (\n    <div className={className} />\n  )\n}\n```\n\n## Development\n\n1.  The source files live in the `src` directory and the build files will be\n    written to `dist`.\n\n    These are written as ES5 and should be consumable by a bundler directly. We\n    can relax this requirement and simplify the build process once all our\n    frontend projects no longer need to support IE11.\n\n2.  Run `npm start` to start a watcher that will rebuild files as they change.\n\n3.  Run `npm run watch` to start a watcher that will run the test suite as\n    build files change. (Note, you will also need the build watcher running.)\n\n### Benchmarks\n\n1.  Manually run `npm install --no-save benchmark glamor`.\n\n    These are not in `optionalDependencies` to not install them, and associated\n    dependencies, with a default install.\n\n2.  Run `npm run test:benchmarks`.\n\n## Release\n\n1.  Run `npm version [major|minor|patch]` to build the project and tag a new\n    version.\n2.  Push the new Git commit and new tag to the repository (referenced as the\n    'origin' remote in this example):\n    ```\n    git push origin master\n    git push origin <new-tag-here>\n    ```\n3.  Run `npm publish` to deploy the source and build artifacts to npm.\n","readmeFilename":"README.md"}