phantomstudios / css-components

CSS Components
https://css-components.net
MIT License
123 stars 3 forks source link

Add support for scss files in cli #29

Closed thewebartisan7 closed 1 year ago

thewebartisan7 commented 1 year ago

First of all thanks for this utility, it's exactly what I was looking! Simple but powerful.

I found also very useful the cli to generate components.

With this PR which I hope you will integrate, I have just added the support for generate components via cli from SASS files.

I added onetest.scss file and one new npm run test:cli-sass for testing with this file.

The test.scss is the same as test.css but with nested css, and the result is below:

import { styled } from "@phntms/css-components";

import css from "./test.scss";

export const AlmostEmpty = styled("div", {
  css: css.almostEmpty,
});
export const Footer = styled("footer", {
  css: css.footer,
  variants: {
    fixed: {
      true: css.footer_fixed_true,
    },
    theme: {
      light: css.footer_theme_light_default,
      dark: css.footer_theme_dark,
    },
  },
  compoundVariants: [
    {
      fixed: css.true,
      theme: css.light,
      css: css.footer_fixed_true_theme_light,
    },
    {
      fixed: css.false,
      theme: css.light,
      css: css.footer_fixed_false_theme_light,
    },
  ],
  defaultVariants: {
    theme: "light",
  },
});
export const Link = styled("a", {
  css: css.link,
  variants: {
    primary: {
      true: css.link_primary_true,
    },
  },
  defaultVariants: {
  },
});

Let me know if you need any adjustment.

Thanks!

thewebartisan7 commented 1 year ago

@digitaljohn I have updated README and also added the css and scss in separated folder, so that we can test generating from css and scss files together, using:

npm run test:cli # test css and scss together
npm run test:cli-css # test only css 
npm run test:cli-scss # test only scss