Home

Awesome

Styled Import

Extreme lightweight CSS parser for stealing rules from stylesheets (without adding the stylesheet to your bundle), to compose into Styled Components or anywhere else you might be doing CSS in JS.

npm package Babel Macro contributions welcome

Motivation

Working with global or 3rd party CSS creates constant challenges when implementing other CSS solutions. styled-import is meant to ease some of the pain by letting you steal styles from those stylesheets without needing to link or bundle or otherwise include the stylesheets themselves.

Note that this library currently operates as a Babel macro, replacing all references to styled-import calls at compile-time with the actual style declarations from the referenced stylesheets.

Installation

$ npm install -D styled-import

Dependencies

Styled Import currently runs only as a Babel macro, so be sure you have configured Babel to use babel-plugin-macros.

Here is one example of how to do that:

.babelrc

{
  "plugins": ["macros"]
}

NOTE: Macros are included in create-react-app 2 by default.

Use

./stylesheets/global.css

.button {
  color: blue;
}

./component.js

const styledImport = require('styled-import/macro')

const btnStyle = styledImport('./stylesheets/global.css', '.button')

console.log(btnStyle) // 'color: blue;'

Use with Styled Components

const styled = require('styled-components')
const styledImport = require('styled-import/macro')

const btnStyle = styledImport('./stylesheets/global.css', '.button')

const Button = styled.button`
  padding: 10px;
  ${btnStyle}
`

String composition works like inheritance/cascade:

const btnBlue = styledImport('./stylesheets/global.css', '.button-blue')

const Button = styled.button`
  color: green;
  padding: 10px;
  ${btnBlue}
`

// color: green is overridden by color: blue in btnBlue

Use with React or other CSS-in-JS

const btnStyle = styledImport.react('./stylesheets/global.css', '.button')

// btnStyle is now an object {'color': 'blue'} with camelCased properties, instead of a CSS string

Import from node_modules stylesheet

const btnStyle = styledImport('@org/stylesheets/global.css', '.button')

Import multiple styles

const [btnStyle, headerStyle] = styledImport('@org/styles/global.css', ['.button', '.header'])

const {button, header} = styledImport('@org/styles/global.css', {button: '.button', header: '.header'})

Import nested styles

const cardBtnStyle = styledImport('./stylesheets/global.css', '.card .button')

Search selectors with regular expressions

const cardBtnStyle = styledImport('./stylesheets/global.css', /\.button/gi)

// returns an array of declarations from selectors that matched the regex (omit
g flag to return just the first match)

Test

Make sure you're on the development branch and then:

$ npm test

NOTE: Tests will only run in a git cloned repo. They are disabled in the published npm module.

Restrictions