🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more
Socket
Book a DemoInstallSign in
Socket

github.com/naistran/css-in-js-loader

Package Overview
Dependencies
Alerts
File Explorer
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

github.com/naistran/css-in-js-loader

v0.1.2
Source
Go
Version published
Created
Source

css-in-js-loader

Use CSS in JS with postcss-js in webpack

Installation

npm i --save-dev css-in-js-loader

But postcss-loader already supports postcss-js as a parser?

If you're using babel to process your Javascript then postcss-loader only transforms .js files one level deep, i.e. it doesn't transform that file's imports.

Usage and Example

Put css-in-js between your CSS and JS loaders. css-in-js-loader detects if the file is a .js file and converts it to CSS using postcss-js so you can use your CSS loaders (e.g. postcss-loader) normally.

Example webpack configuration:

{
  loaders: [
    { test: /\.css$/, loader: 'css!postcss!css-in-js!babel' },
    { test: /\.css\.js$/, loader: 'css!postcss!css-in-js!babel' },
    { test: /\.js$/, loader: 'babel' },
  ],
}

Now you can write CSS in JS:

import { minWidth } from './utils/media';
import { lap } from './breakpoints';

export default {  
  '.root': {
    background: 'blue',

    [minWidth(lap)]: {
      background: 'red',
    },
  },
};

FAQs

Package last updated on 15 Jan 2017

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts