Package Exports

system-loader

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (system-loader) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

system-loader

webpack loader for creating styled-system components from JSON

npm i system-components system-loader

Usage

Add system-loader to your webpack config.

module.exports = {
  // partial webpack.config.js
  module: {
    rules: [
      {
        test: /\.system\.json$/,
        use: 'system-loader'
      }
    ]
  }
}

Create a system.json file for configuring UI components.

{
  "components": [
    {
      "name": "Box",
      "styles": [
        "space",
        "width",
        "color",
        "flex"
      ]
    },
    {
      "name": "Heading",
      "type": "h2",
      "props": {
        "m": 0,
        "fontSize": 32,
        "color": "tomato"
      },
      "styles": []
    },
    {
      "name": "Button",
      "type": "button",
      "props": {
        "fontFamily": "inherit",
        "fontSize": "inherit",
        "m": 0,
        "px": 3,
        "py": 2,
        "color": "white",
        "bg": "#07c",
        "borderRadius": 4,
        "border": 0
      },
      "css": "appearance:none;",
      "styles": []
    }
  ]
}

Import components from the system.json file in your app.

import React from 'react'
import {
  Box,
  Heading,
  Button
} from './system.json'

const App = props => (
  <Box p={3}>
    <Heading>Hello</Heading>
    <Button>Beep</Button>
  </Box>
)

export default App

Configuration

The system.json file should include a components array of objects that use the following fields:

name: (string) exported name of the component and its displayName
type: (string, optional) HTML tag name
props: (object, optional) default props and default styled-system props
styles: (array, optional) array of string function names to enable styled-system props
css: (string, optional) custom static CSS not handled with styled-system

MIT License