CSS to JSS
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>
);
};