# stylesheet-loader

> Stylesheet loader.

Latest version **0.9.1** (published 2021-12-15) · BSD-3-Clause license · 0 weekly downloads

## Install

```sh
npm install stylesheet-loader
pnpm add stylesheet-loader
yarn add stylesheet-loader
bun add stylesheet-loader
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.9.1 |
| Published | 2021-12-15 |
| First published | 2016-05-01 |
| Weekly downloads | 0 |
| License | BSD-3-Clause |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 70.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 112 |
| Maintainers | zeroling, wintercn, yuanyan, boiawang, yacheng, rax-publisher |

## Links

- npm: https://www.npmjs.com/package/stylesheet-loader
- Repository: https://github.com/raxjs/rax-app
- Homepage: https://github.com/raxjs/rax-app#readme
- Issues: https://github.com/raxjs/rax-app/issues
- npm.io page: https://npm.io/package/stylesheet-loader

## Dependencies (4)

- [css](https://npm.io/package/css.md) ^2.2.1
- [chalk](https://npm.io/package/chalk.md) ^1.1.3
- [camelcase](https://npm.io/package/camelcase.md) ^3.0.0
- [loader-utils](https://npm.io/package/loader-utils.md) ^1.2.3

## Recent versions

- 0.9.1 (latest) — 2021-12-15
- 0.9.1-beta.9 (beta) — 2022-05-11
- 0.9.1-rc.4 (rc) — 2021-12-06
- 0.9.1-beta.8 — 2022-02-16
- 0.9.1-beta.7 — 2021-12-23
- 0.9.1-beta.6 — 2021-12-22
- 0.9.1-beta.5 — 2021-12-22
- 0.9.1-beta.4 — 2021-12-22
- 0.9.1-beta.3 — 2021-12-22
- 0.9.1-beta.2 — 2021-12-22
- 0.9.1-beta.1 — 2021-12-13
- 0.9.1-rc.3 — 2021-12-03
- 0.9.1-rc.2 — 2021-12-02
- 0.9.1-rc.1 — 2021-12-02
- 0.9.0 — 2021-03-11
- … 102 more at https://npm.io/package/stylesheet-loader/versions

## README

# stylesheet-loader

> A webpack loader that imports a css file and converts it to be used as an inline style

## Install

```sh
npm install --save-dev stylesheet-loader
```

## Usage

[Documentation: Using loaders](http://webpack.github.io/docs/using-loaders.html)

Config stylesheet loader in `webpack.config.js`:
```js
// webpack.config.js

module.export = {
  module: {
    loaders: [
      {
        test: /\.css$/,
        loader: 'stylesheet'
      }
    ]
  }
};
```

```css
/* foo.css */
.container {
  background-color: blue;
}

.container_title {
  font-size: 20px;
}
```

```js
// foo.js
import styles from './foo.css';

function Foo() {
  return <div style={styles.container}>
    <span style={styles.container_title>hello world</span>
  </div>;
}
export default Foo;
```

### tag/id selector

```css
div {
  color: red;
}

#main {
  width: 100%;
}
```

```js
{
  '@div': {
    color: 'red'
  },
  '#main': {
    width: '100%'
  }
}
```



### Write less

`webpack.config.js`:
```
{
  test: /\.less$/,
  loader: 'stylesheet!less'
}
```

```less
// foo.less
@contaner-bg: #5B83AD;
@title-size: 20px;

.container {
  background-color: @contaner-bg;
}

.container_title {
  font-size: @title-size;
}
```

```js
// foo.less
import styles from './foo.less';

function Foo() {
  return <div style={styles.container}>
    <span style={styles.container_title>hello world</span>
  </div>;
}
export default Foo;
```

### Options

#### `transformDescendantCombinator`

Default does not support nested, but you can also choose to avoid this constraint when set `transformDescendantCombinator` to true.

### Support font-face

```css
@font-face {
  font-family: icon;
  src: url(http://at.alicdn.com/t/font_pkm0oq8is8fo5hfr.ttf);
}
```

### Support media query

Media type support `screen` and `all`. Media features only support `width` and `height`. Look [@media](https://developer.mozilla.org/en-US/docs/Web/CSS/@media).

```css
@media screen and (min-width: 480px) {
  .title {
    font-size: 25rem;
  }
}
```

### Support pseudo class

Pseudo class only in weex. Index of support pseudo classes

* `:active`
* `:focus`
* `:disabled`
* `:enabled`

Example
```css
.container:active {
  background-color: red;
}
```

### Support gradient

You can use gradient in Weex 0.10.0+.

```css
background-image: linear-gradient(to right, blue, white);
```

### Support global css variables

You can write `var()` in css. Variables need to be defined in `:root`

```css
:root {
  --color-error-1: red;
}
.text {
  color: var(--color-error-1);
}
```

### Support light or dark color theme.

**Web:**

```css
body { background-color: #ffffff; }
@media (prefers-color-scheme: dark) {
  body { background-color: #000000; }
}
@media (prefers-color-scheme: light) {
  body { background-color: #ffffff; }
}
```
**Weex:**

Compile to -weex-dark-scheme-xxx and -weex-light-scheme-xxx

```css
body {
  background-color: #ffffff;
  -weex-dark-scheme-background-color: #000000;
  -weex-light-scheme-background-color: #ffffff;
}
```

## Validation

We followed the [css-layout](https://github.com/facebook/yoga) style standard. There will be a friendly reminder on the console when your code is not standardized.

<p align="center">
  <img alt="stylesheet validation" src="https://gw.alicdn.com/tfs/TB1EHgXPXXXXXc3XVXXXXXXXXXX-1324-208.png" width="400">
</p>

---
_Source: https://npm.io/package/stylesheet-loader · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._