babel-plugin-transform-csstag

babel-plugin-transform-csstag

Kyrylo Yakovenko(@blia)

Styled-components

			import styled from 'styled-components';
			const RedText = styled.Text`
				color: red;
				font-size: 16;
			`;
			const BlueText = styled.Text`
				color: blue;
				font-size: 16;
			`;
			<RedText>just red</RedText>
			<BlueText>just blue</BlueText>
		

Sheet mode

			import css from 'my-css-lib';
			const { RedText, BlueText } = css`
				.red-text {
					color: red;
					font-size: 16;
				}
				.blue-text {
					color: blue;
					font-size: 16;
				}`;
			<RedText>just red</RedText>
			<BlueText>just blue</BlueText>
		

No selectors

			import css from 'my-css-lib';
			const { RedText, BlueText } = css`
				.red-text {
					color: red;
					font-size: 16;
				}
				.blue-text {
					color: blue;
					font-size: 16;
				}`;
			<RedText>just red</RedText>
			<BlueText>just blue</BlueText>
		

Specified tags

			import css from 'my-css-lib';
			const { RedText, BlueText } = css`
				div.red-text {
					color: red;
					font-size: 16;
				}
				p.blue-text {
					color: blue;
					font-size: 16;
				}`;
			<RedText>just red</RedText>
			<BlueText>just blue</BlueText>
		

Extending components

			import css from 'my-css-lib';
			import ActionButton from './action-button';
			const { LoginButton } = css`
				ActionButton.login-button {
					background-color: green;
					font-size: 16;
				}`;
			<LoginButton>Log in</LoginButton>
		

Pseudo-classes

			import css from 'my-css-lib';
			const { Link } = css`
				a.link {
					color: blue;
					text-decoration: underline;
					:hover {
						text-decoration: none;
					}
				}`;
			<Link href="/">Home</Link>
		

And statuses (special boolean props)

			import css from 'my-css-lib';
			const { Link } = css`
				a.link {
					color: blue;
					text-decoration: underline;
					:hover {
						text-decoration: none;
					}
					:is-active {
						color: red;
					}
				}`;
			<Link href="/" isActive={isHomePage}>Home</Link>
		

Context (props)

			import css from 'my-css-lib';
			const { Link } = css`
				a.link {
					color: ${props => props.isActive ? 'red' : 'blue'};
					text-decoration: underline;
					:hover {
						text-decoration: none;
					}
				}`;
			<Link href="/" isActive={isHomePage}>Home</Link>
		

Every declaration is a function

			import css from 'my-css-lib';
			const { MyButton } = css`
				.my-button {
					color: blue;
					display: block;
				}`;
		

Every declaration is a function

			import css from 'my-css-lib';
			const { MyButton } = css`
				.my-button {
					css.color('blue');
					css.display('block');
				}`;
		

Every function returns an object

			import css from 'my-css-lib';
			const { MyButton } = css`
				.my-button {
					...{color: 'blue'};
					...{display: 'block'};
				}`;

		

css.use

			import css from 'my-css-lib';
			css.use('box', size => ({width: size, height: size}));
			const { MyBox } = css`
				.my-box {
					background-color: green;
					box: 20px;
				}`;
		

css.use

			import css from 'my-css-lib';
			css.use('box', size => ({width: size, height: size}));
			const { MyBox } = css`
				.my-box {
					background-color: green;
					width: 20px;
					height: 20px;
				}`;
		

css.use

			import css from 'my-css-lib';
			const box = size => ({width: size, height: size});
			css.use({ box });
			const { MyBox } = css`
				.my-box {
					background-color: green;
					box: 20px;
				}`;
		

NameSpase

			import css from 'my-css-lib';
			import polished from 'polished';
			css.use('po', polished);
			const { MyCell } = css`
				.my-cell {
					display: table-cell;
					-po-ellipsis: 250px;
				}`;
		

Context (props) + css.use

			import css from 'my-css-lib';
			const activeColor =
				color => ctx => ({color: ctx.isActive ? color : 'blue'});
			css.use({ activeColor });
			const { Link } = css`
				a.link {
					active-color: red;
					text-decoration: underline;
				}`;
			<Link href="/" isActive={isHomePage}>Home</Link>
		

Local scope

			import css from 'my-css-lib';
			const activeColor =
				color => ctx => ({color: ctx.isActive ? color : 'blue'});
			const { Link } = css`
				a.link {
					-local-active-color: red;
					text-decoration: underline;
				}`;
			<Link href="/" isActive={isHomePage}>Home</Link>
		

Local scope

			import css from 'my-css-lib';
			const activeColor =
				color => ctx => ({color: ctx.isActive ? color : 'blue'});
			const { Link } = css`
				a.link {
					-active-color: red;
					text-decoration: underline;
				}`;
			<Link href="/" isActive={isHomePage}>Home</Link>
		

Thanks!