https://github.com/stackr23/cssobjects-loader

Load Style-Definitions as JS-Objects
https://github.com/stackr23/cssobjects-loader

cssmodules style webpack webpack-loader

Last synced: 3 months ago
JSON representation

Load Style-Definitions as JS-Objects

• Host: GitHub
• URL: https://github.com/stackr23/cssobjects-loader
• Owner: stackr23
• License: gpl-3.0
• Created: 2016-02-01T14:40:01.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2020-03-30T01:22:00.000Z (almost 5 years ago)
• Last Synced: 2024-10-12T01:08:03.226Z (3 months ago)
• Topics: cssmodules, style, webpack, webpack-loader
• Language: JavaScript
• Size: 114 KB
• Stars: 7
• Watchers: 2
• Forks: 1
• Open Issues: 6
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# cssobjects-loader (deprecated)

> **load StyleSheets as JS-Objects**

[![Build Status](https://travis-ci.com/stackr23/cssobjects-loader.svg?branch=master)](https://travis-ci.com/stackr23/cssobjects-loader)

[![npm version](https://badge.fury.io/js/cssobjects-loader.svg?v060)](https://badge.fury.io/js/cssobjects-loader)

[![devDependencies Status](https://david-dm.org/doubleu23/cssobjects-loader/dev-status.svg)](https://david-dm.org/doubleu23/cssobjects-loader?type=dev)

[![Known Vulnerabilities](https://snyk.io/test/github/doubleu23/cssobjects-loader/badge.svg)](https://snyk.io/test/github/doubleu23/cssobjects-loader)

## DEPRECATED - use [`@stackr23/styleobjects-loader`](https://github.com/stackr23/styleobjects-loader)!

> cssobjecs-loader maintenance is closed!  

v1.0.0 will be released as scoped package [`@stackr23/styleobjects-loader`](https://github.com/stackr23/styleobjects-loader)



#### v0.5.0 released  

> __stable version with webpack 4 compatibility__  

### what is it?

* webpack loader

* per [nativeCss](https://github.com/raphamorim/native-css)

* transforms css-properties to camelCase

* very handy for react style injections

### how to use it? 

```npm install cssobjects-loader --save-dev```

__your.so__

```Stylus

.test

	font-size 20px

#anotherTest

	padding-top 5px

.test23

	font-size 23px

    .testInner

        font-decoration none

```

__your.js__

```Javascript

let style 	= require('cssobjects-loader!stylus-loader!./your.so');

console.log(style);

// {

// 	test: {

// 		'fontSize': '20px'

// 	},

// 	anotherTest: {

// 		'paddingTop': '5px'

// 	},

// 	test23: {

// 		'fontSize': '23px'

//      testInner: { // atm: only 1 lvl deep

//          'fontDecoration': 'none'

//      }

// 	}

// }

```

__what else to know?__

> to __keep the style properties__ as they are, pass the query 'transform=false' to the loader  

```Javascript

let style = require('cssobjects-loader?transform=false!stylus-loader!./your.so');

```

> for __pure css__ just use

```Javascript

let style = require('cssobjects-loader!./your.css');

```

> for __other style preprocessor__ syntax (less, sass, scss, ...)

> just add the realated loader (the loader has to output css!)

```Javascript

let style = require('cssobjects-loader!sass-loader!./your.sass');

```

> for ES6/7 usage, __define loaders in the webpack config__  

```Javascript

{

    test: /\.(so)$/, // .so = custom file extension

    loader: 'cssobjects-loader?transform=true!stylus-loader'

}

// so you can just

// import yourStyleObject from '/styles/your.so'

```

### issues

* for objectformat and enhanced usage go to [nativeCss](https://github.com/raphamorim/native-css)

* loader related issues or PR's are welcome

* __known issues__: 

    * native-css not found (issue #18)