pss-loader

Webpack loader for pss-lang.

Compatible css-in-js librairies:

• styled-components

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

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