@bbon/css-to-jss
    TypeScript icon, indicating that this package has built-in type declarations

    1.2.2 • Public • Published

    CSS to JSS

    Build and tag publish NPM

    Make JSS component (jsx|tsx) file from CSS file in your project.

    Run this nodejs cli app in your terminal.

    CSS file looks below.

    .sample-css {
        color: #ffffff;
    }

    Then (jsx|tsx) looks like.

    /**
     * Auto-generated JSS file by css-to-jss
     *
     * [@bbon/css-to-jss](https://www.npmjs.com/package/@bbon/css-to-jss)
     *
     * usage:
     * ```
     * import { otherStyle } from './other.style'
     *
     * <style jsx>{otherStyle}</style>
     * ```
     */
    import React from 'react';
    import css from 'styled-jsx/css';
    
    export const otherStyle = css`
        .sample-css {
            color: #ffffff;
        }
    `;
    
    /**
     * Not working currently
     */
    const OtherStyle = () => {
        return <style jsx>{otherStyle}</style>;
    };
    
    export default OtherStyle;

    Installation

    $ npm i --save-dev @bbon/css-to-jss

    or

    $ yarn add --save-dev @bbon/css-to-jss

    Specification

    $ css-to-jss help
    Usage: css-to-jss [options] [command]
    
    Make JSS React Component from CSS files.
    
    Options:
      -v, --version                      Display version
    
    Commands:
      list [options] <source> [prefix]   Check the list of files to be processing.
      write [options] <source> [prefix]  Make JSS component file from CSS file.
      help                               Display help for css-to-jss

    list command

    Check the list of files to be processed.

    $ css-to-jss list --help
    Usage: css-to-jss list [options] <source> [prefix]
    
    Check the list of files to be processing.
    
    Arguments:
      source            [Required] Set to start location where css files search.
      prefix            [Optional] Set react component file name postfix when files search. default: "style"
    
    Options:
      -f, --force       Overwrite file
      -t, --typescript  Use Typescript (tsx)
      -r, --recursive   Explore recursive from current directory.
      --verbose         Display detailed information.
      --debug           Display debug information
      -h, --help        display help for command

    Usage: Display list of task information that will create JSS file from CSS file in current directory. And the task will overwrite created TSX files on exists TSX files.

    $ css-to-jss list . style --typescript --recursive --force

    write command

    Make JSS file from CSS file.

    $ css-to-jss write --help
    Usage: css-to-jss write [options] <source> [prefix]
    
    Make JSS component file from CSS file.
    
    Arguments:
      source            [Required] Set to start location where css files search.
      prefix            [Optional] Set react component file name postfix when files create. default: "style"
    
    Options:
      -f, --force       Overwrite file
      -t, --typescript  Use Typescript (tsx)
      -r, --recursive   Explore recursive from current directory.
      --verbose         Display detailed information.
      --debug           Display debug information
      -h, --help        display help for command

    Usage: Make JSS file from CSS file in current directory. And overwrite created TSX files on exists TSX files.

    $ css-to-jss write . style --typescript --recursive --force

    Execute css-to-jss

    Install globally

    Install like this.

    $ npm i -g @bbon/css-to-jss

    Execute like this.

    $ css-to-jss list src style -t -r

    Install locally

    Install like this.

    $ npm i @bbon/css-to-jss --save-dev

    Execute like this.

    $ npx css-to-jss list src style -t -r

    Usage

    import created style.(tsx|jsx) in your component.

    May requires styled-jsx or next.js

    Please install @types/styled-jsx package if use typescript with next.js or styled-jsx.

    import { otherStyle } from './other.style';
    
    const MyComponent = () => {
        return (
            <div className="hello-world">
                <h1>Hello world!</h1>
                <style jsx>{otherStyle}</style>
            </div>
        );
    };

    Install

    npm i @bbon/css-to-jss

    DownloadsWeekly Downloads

    8

    Version

    1.2.2

    License

    MIT

    Unpacked Size

    360 kB

    Total Files

    23

    Last publish

    Collaborators

    • bbon