❤
npm
Sign UpSign In

injected-css

0.4.2 • Public • Published
{:;} injected-css

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. atom-language-babel

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

Readme

Keywords

none

Package Sidebar

Install

npm i injected-css

Repository

github.com/alekseykulikov/injected-css

Homepage

github.com/alekseykulikov/injected-css#readme

Weekly Downloads

68

Version

0.4.2

License

MIT

Unpacked Size

18.4 kB

Total Files

6

Last publish

Collaborators

  • alekseykulikov
Try on RunKit
Report malware