Extract css from *.style.js files

 

install

yarn add @ds-tools/styled.css --dev

 

usage

Add it to your package.json

{
  "scripts": {
    "css": "styled.css --theme src/theme/theme.js"
  }
}

 

input:

*.styles.js authored for a system-ui theme spec.

/* form.styles.js */
export const styles = {
  Form: {
    margin: "auto",
    boxShadow: "shallow",
    paddingY: 4
  },
  FormLabel: {
    color: "grays.800",
    fontSize: 2,
    marginBottom: 1
  }
};

output:

/* styles.css */

.form {
  margin: auto;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
  padding-top: 32px;
  padding-bottom: 32px;
}
.form--label {
  color: #404b5a;
  font-size: 16px;
  margin-bottom: 4px;
}

See /example folder for full example

 

license

MIT © siddharthkp