Giter VIP home page Giter VIP logo

propcss's Introduction

PropCSS

like styled-system, but without any css-in-js burden

Motivation

How it works

propcss webpack loader will extract atomic props from your base components, convert them to valid css and write to css file.

input:

Component.js

import React from 'react'

export default function Component() {
  return (
    <div pr={20} ml={40} w={200} className="customClassName" />
  )
}

output:

Component.js

import React from 'react'

export default function Component() {
  return (
    <div className="pr-20 ml-40 w-200 customClassName" />
  )
}

index.css

.pr-20 { padding-right: 20px }
.ml-40 { margin-left: 40px }
.w-200 { width: 200px }

Usage (NB: not yet published)

npm install propcss

Add propcss loader to your webpack config along with babel-loader

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          'babel-loader',
          {
            loader: 'propcss',
            options: {
              filepath: path.resolve(__dirname, 'src/atomic.css'),
            },
          },
        ],
      },
    ],
  },
};

Options

Name Type Default Description
filepath {string} Path to the file, where your atomic css classes will be written to
components {string[]=} Array of all html tags Which components should be processed by loader
CSSPropToClassNameMapping {object=} Check source Defines atomic classes for corresponding css properties.
componentPropToCSSPropMapping {object=} Check source Defines component properties for corresponding css properties.

filepath

Type: string Required: true

Path to the file, where your atomic css classes will be written to

components

Type: string[] Required: false Default: Array of all html tags

Defines, which components should be processed by loader.

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          'babel-loader',
          {
            loader: 'propcss',
            options: {
              filepath: path.resolve(__dirname, 'src/atomic.css'),
              components: ['Box', 'Text', 'div'] // only these three components will be processed by loader
            },
          },
        ],
      },
    ],
  },
};

CSSPropToClassNameMapping

Type: object Required: false Default: https://github.com/smashercosmo/propcss/blob/master/src/attributes.ts#L1

Defines atomic classes for corresponding css properties.

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          'babel-loader',
          {
            loader: 'propcss',
            options: {
              filepath: path.resolve(__dirname, 'src/atomic.css'),
              CSSPropToClassNameMapping: {
                'padding-left': 'customPaddingLeftCSSClass',
              }
            },
          },
        ],
      },
    ],
  },
};

input:

export default function Component() {
  return <div pl={20} />
}

output:

export default function Component() {
  return <div className="customPaddingLeftCSSClass-20" />
}

componentPropToCSSPropMapping

Type: object Required: false Default: https://github.com/smashercosmo/propcss/blob/master/src/attributes.ts#L28

Defines component properties for corresponding css properties.

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          'babel-loader',
          {
            loader: 'propcss',
            options: {
              filepath: path.resolve(__dirname, 'src/atomic.css'),
              componentPropToCSSPropMapping: {
                customPaddingLeftProp: 'padding-left',
              }
            },
          },
        ],
      },
    ],
  },
};

input:

export default function Component() {
  return <div customPaddingLeftProp={20} />
}

output:

export default function Component() {
  return <div className="pl-20" />
}

propcss's People

Contributors

smashercosmo avatar

Stargazers

avatar avatar avatar

Watchers

avatar avatar

propcss's Issues

Responsive styles

input:

<div m={[16, 32, 64]} />

output:

<div className="m-16 m-32-sm m-64-md" />

Source maps

With the current implementation, source maps don't make sense, because styles from different files are aggregated and deduplicated. Maybe it makes sense to not deduplicate styles in dev mode.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.