https://github.com/eveningkid/pss-loader
Use PSS syntax with Webpack
https://github.com/eveningkid/pss-loader
Last synced: about 1 month ago
JSON representation
Use PSS syntax with Webpack
- Host: GitHub
- URL: https://github.com/eveningkid/pss-loader
- Owner: eveningkid
- License: mit
- Created: 2018-06-20T07:29:41.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2018-06-21T01:56:35.000Z (over 7 years ago)
- Last Synced: 2025-08-17T14:46:07.345Z (about 2 months ago)
- Language: JavaScript
- Size: 10.7 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# pss-loader
Webpack loader for [`pss-lang`](https://github.com/eveningkid/pss-lang).
Compatible css-in-js librairies:
- [styled-components](https://www.styled-components.com)
## Install
**Depending on the styling library you're using e.g. styled-components, we assume that it is already installed.**
```
npm install pss-loader
```
or
```
yarn add pss-loader
```
👨💻👩💻 [Read the tutorial on Medium](https://medium.com/@eveningkid/prop-based-styling-with-styled-components-in-react-js-b7d14a3877e4)
## Configure Webpack
```js
// Inside webpack.config.js
module.exports = {
// ...
module: {
rules: [
{
test: /\.pss$/,
use: {
loader: 'pss-loader',
options: {
stylingLibrary: 'styled-components',
},
},
},
// ...
]
}
};
```
## Use it
```sass
// Button.pss
button.Button {
// `props.theme.white`
color: $theme.white;
&:hover {
color: red;
}
&:isSelected {
// `color` set to `props.isSelectedColor` when `props.isSelected` is true
color: $isSelectedColor;
}
}
```
```js
import React from 'react';
import ReactDOM from 'react-dom';
import Button from './Button.pss';
ReactDOM.render(
Hello World,
document.getElementById('root')
);
```
## License
[eveningkid](https://twitter.com/eveningkid) @ MIT