Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/alekseykulikov/injected-css
{:;} CSS in JS
https://github.com/alekseykulikov/injected-css
cssinjs postcss
Last synced: about 1 month ago
JSON representation
{:;} CSS in JS
- Host: GitHub
- URL: https://github.com/alekseykulikov/injected-css
- Owner: alekseykulikov
- License: mit
- Created: 2017-03-20T14:57:41.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2022-12-07T09:49:01.000Z (about 2 years ago)
- Last Synced: 2024-04-14T19:57:14.991Z (9 months ago)
- Topics: cssinjs, postcss
- Language: JavaScript
- Homepage:
- Size: 249 KB
- Stars: 17
- Watchers: 4
- Forks: 0
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://circleci.com/gh/alekseykulikov/injected-css)
[](https://npmjs.com/package/injected-css)
[](https://standardjs.com)
> Structured way to write CSS in JS file.
## Usage
Install the package:
```bash
$ npm install injected-css
```
Add `injected-css/babel` to plugins section in your babel config:
```json
{
"plugins": [
"injected-css/babel"
]
}
```
Define real CSS in your JS file using *css`{}`* template expression,
and refer to resulted classes using `style` object.
```js
import { css } from 'injected-css'
import { red, white, mobile } from '../my-theme' // use js variables
const style = css`
text-align: center;
&-button {
background-color: ${red};
width: 32rem;
padding: 2rem;
border-radius: 0.5rem;
border: none;
&:hover {
background-color: ${white};
}
@media ${mobile} {
width: 16rem;
}
}
`
document.innerHTML = `
Click me!
`
```
It transforms to:
```js
import { css } from 'injected-css';
import { red, white, mobile } from '../my-theme';
const style = css.inject({
toString() { return 'c3423985940'; },
button: 'c3423985940-button',
_css: `.c3423985940 { text-align: center } .c3423985940-button { background-color: ${red}; width: 32rem; padding: 2rem; border-radius: 0.5rem; border: none
} .c3423985940-button:hover { background-color: ${white} } @media ${mobile} { .c3423985940-button { width: 16rem } }`
});
document.innerHTML = `
Click me!
`;
```
## Benefits
- Write **real CSS** and use JS for import/export, variables and dynamic strings
- Use powerful tools of JS world
- ES modules to manage dependencies between styles and JS components
- Eslint to ensure, it's hard to write bad CSS
- Variables and functions
- Webpack 2, Hot Module Replacement, code splitting, and server side render
- Built-in naming convention for component world
- Postcss integration ([100s of plugins](https://github.com/postcss/postcss/blob/master/docs/plugins.md) and custom syntaxes like SASS)
- Minimal overhead (no parsing cost, 400 byte runtime)
## Custom postcss config
Just create `.postcssrc.js` file with content similar to ([read more about postcss config](https://github.com/michael-ciniawsky/postcss-load-config)):
```js
module.exports = (ctx) => ({
plugins: [
require('postcss-cssnext')({ 'features': { 'rem': false } }),
ctx.env === 'production' ? require('cssnano')({ autoprefixer: false }) : false
]
})
```
## Inject global styles
Use `inject()` method to insert global `css` string.
Everything tagged literal with _css``_ will be preparsed with postcss.
```js
import { inject, css } from 'injected-css'
import normalizeCss from 'normalize.css'
import { mobile } from '../my-theme';
// insert regular css, like normalize.css
inject(normalize)
// setup global typography
inject(css`
html {
font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: normal;
font-size: 62.5%; /* 1rem ~ 10px */
@media ${mobile} {
font-size: 56.25%; /* 1rem ~ 9px */
}
}
`)
```
## Server side render
Use `flush()` method to get all css calls.
```js
import { flush } from 'injected-css'
import { App } from './App'
const body = renderToStaticMarkup()
const css = reset._css + flush().join('')
const html = `
My App
${css}
${body}
`
const reset = inject(css`
html {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body {
margin: 0;
}
`)
```
## Syntax highlight
**Atom** with [language-babel](https://github.com/gandm/language-babel) plugin supports syntax highlight and autocompletion by default.
## Credits
- [BEM](https://css-tricks.com/bem-101/) and [SUIT CSS](https://github.com/suitcss/suit/blob/master/doc/naming-conventions.md) - for name convention, [that works](https://gist.github.com/alekseykulikov/68a5d6ddae569f6d0456b0e9d603e892)
- [CSS modules](https://github.com/css-modules/css-modules) - for embracing CSS syntax and adding the way to reference on classes from JS code
- [style-loader](https://github.com/webpack-contrib/style-loader) - for concept of loading styles with js
- [styled-jsx](https://github.com/zeit/styled-jsx) - for idea of babel plugin and this credits section
- [@rtsao](https://github.com/rtsao) - for his open-source work on many css-in-js libraries
- [styling](https://github.com/andreypopp/styling) - for embracing ES modules to export CSS
- [react](https://facebook.github.io/react/) - for component approach and development philosophy
- [CSS: The Definitive Guide](http://shop.oreilly.com/product/0636920012726.do) - for explaining me details of CSS
- [styled-components](https://github.com/styled-components/styled-components) - for showing how to highlight CSS in tagged template literal
## License
[MIT]('./LICENSE')