pss-loader
v1.0.0
Published
Webpack Loader for PSS files
Downloads
4
Maintainers
Readme
pss-loader
Webpack loader for pss-lang
.
Compatible css-in-js librairies:
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 (soon added)
Configure Webpack
// Inside webpack.config.js
module.exports = {
// ...
module: {
rules: [
{
test: /\.pss$/,
use: {
loader: 'pss-loader',
options: {
stylingLibrary: 'styled-components',
},
},
},
// ...
]
}
};
Use it
// 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;
}
}
import React from 'react';
import ReactDOM from 'react-dom';
import Button from './Button.pss';
ReactDOM.render(
<Button>Hello World</Button>,
document.getElementById('root')
);
License
eveningkid @ MIT