Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/stackr23/styleobjects-loader
load stylesheets as js-objects (webpack loader for styleobjects)
https://github.com/stackr23/styleobjects-loader
cssmodules react-style styleobjects webpack-loader webpack4
Last synced: 16 days ago
JSON representation
load stylesheets as js-objects (webpack loader for styleobjects)
- Host: GitHub
- URL: https://github.com/stackr23/styleobjects-loader
- Owner: stackr23
- License: gpl-3.0
- Created: 2018-11-08T08:32:34.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2023-03-02T12:22:20.000Z (almost 2 years ago)
- Last Synced: 2024-04-25T19:02:17.912Z (8 months ago)
- Topics: cssmodules, react-style, styleobjects, webpack-loader, webpack4
- Language: JavaScript
- Homepage: http://npm.im/@stackr23/styleobjects-loader
- Size: 270 KB
- Stars: 1
- Watchers: 2
- Forks: 1
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# @stackr23/styleobjects-loader
> **load StyleSheets as JS-Objects** (webpack-loader)[![Build Status](https://travis-ci.com/stackr23/styleobjects-loader.svg?branch=master)](https://travis-ci.com/stackr23/styleobjects-loader)
[![npm version](https://badge.fury.io/js/%40stackr23%2Fstyleobjects-loader.svg?v081)](https://badge.fury.io/js/%40stackr23%2Fstyleobjects-loader)
[![devDependencies Status](https://david-dm.org/stackr23/styleobjects-loader/dev-status.svg)](https://david-dm.org/stackr23/styleobjects-loader?type=dev)
[![Known Vulnerabilities](https://snyk.io/test/github/stackr23/styleobjects-loader/badge.svg)](https://snyk.io/test/github/stackr23/styleobjects-loader) [![Greenkeeper badge](https://badges.greenkeeper.io/stackr23/styleobjects-loader.svg)](https://greenkeeper.io/)
[![Maintenance][maintenance-img]][maintenance-url]
[![PRs Welcome][pr-welcome]](http://makeapullrequest.com)[maintenance-img]: https://img.shields.io/badge/Maintained%3F-yes-green.svg
[maintenance-url]: https://GitHub.com/stackR23/styleobjects-loader/graphs/commit-activity
[pr-welcome]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square## v0.7.0 released
> __stable version with webpack 4 compatibility__### usage
```npm install @stackr23/styleobjects-loader --save-dev```__your.csso__
```Stylus
.test23
font-size 23px
.testInner
font-decoration none
```__your.js__
```Javascript
import styleobject from '@stackr23/styleobjects-loader!stylus-loader!./your.csso'
```__styleobject__
```Javascript
{
test23: {
'fontSize': '23px',
testInner: {'fontDecoration': 'none'}
}
```### advanced usage
> for __ES6/7 usage__, define loaders in the webpack config
```Javascript
// webpack.config.js
module: {rules: [...yourLoaders, {
test: /\.(csso)$/,
use: ['@stackr23/styleobjects-loader', 'stylus-loader']
}]}
// yourComponent.js
import yourStyleObject from '/styles/your.csso'
```> for __other style preprocessor__ syntax (less, sass, scss, ...)
> just add the realated loader (the loader has to output css!)
```Javascript
let style = require('@stackr23/styleobjects-loader!sass-loader!./your.sass');
```> for __pure css__ just use
```Javascript
let style = require('@stackr23/styleobjects-loader!./your.css');
```### v1 roadmap
* [ ] stackr23/styleobjects#3
* [ ] handle loader options
* [ ] ES6 (/dist + buildScript)### issues
* for objectformat and enhanced usage go to [styleobjects](https://github.com/stackr23/styleobjects)
* webpack/loader related issues or PR's are welcome