@jswork/craco-plugin-styled-extension v1.0.8

craco-plugin-styled-extension

Some extensions for styled-components in cra.

installation

1. installed packages

npm i styled-components
npm i @jswork/color-rgba @jswork/color-lighten @jswork/color-darken
npm install @jswork/craco-plugin-styled-extension

2. .eslintrc

  "globals": {
    "styled": true,
    "rgba": true,
  }

3. src/global.d.ts

import { StyledInterface } from 'styled-components';

declare global {
  const rgba: any;
  const styled: StyledInterface;
}

usage

import cracoPluginStyledExtension from '@jswork/craco-plugin-styled-extension';

// usage goes here.

export const MyFooter = styled.footer`
  font-size: 14px;
  color: ${rgba('#fff', 0.8)};
  position: absolute;
  bottom: 24px;
  width: 100%;
  text-align: center;
`;

license

Code released under the MIT license.