injected-css

v0.4.2

Published

2 years ago

Structured way to write CSS in JS file

Downloads

302

0High
0Medium
0Low

alekseykulikov

Structured way to write CSS in JS file.

Usage

Install the package:

$ npm install injected-css

Add injected-css/babel to plugins section in your babel config:

{
  "plugins": [
    "injected-css/babel"
  ]
}

Define real CSS in your JS file using css{} template expression, and refer to resulted classes using style object.

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 = `
  <div class="${style}">
    <button class="${style.button}">Click me!</button>
  </div>
`

It transforms to:

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 = `
  <div class="${style}">
    <button class="${style.button}">Click me!</button>
  </div>
`;

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

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.

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.

import { flush } from 'injected-css'
import { App } from './App'

const body = renderToStaticMarkup(<App />)
const css = reset._css + flush().join('')

const html = `
  <!doctype html>
  <html lang='en-US'>
    <head>      
      <title>My App</title>
      <style>${css}</style>
    </head>
    <body>
      ${body}
    </body>
  </html>
`

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 plugin supports syntax highlight and autocompletion by default.

Credits

BEM and SUIT CSS - for name convention, that works
CSS modules - for embracing CSS syntax and adding the way to reference on classes from JS code
style-loader - for concept of loading styles with js
styled-jsx - for idea of babel plugin and this credits section
@rtsao - for his open-source work on many css-in-js libraries
styling - for embracing ES modules to export CSS
react - for component approach and development philosophy
CSS: The Definitive Guide - for explaining me details of CSS
styled-components - for showing how to highlight CSS in tagged template literal

License

MIT

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme