1- # @phntms /css-components
1+ # @phantomstudios /css-components
22
33[ ![ NPM version] [ npm-image ]] [ npm-url ]
44[ ![ Actions Status] [ ci-image ]] [ ci-url ]
@@ -13,7 +13,7 @@ At its core, css-components is a simple wrapper around standard CSS. It allows y
1313Here is a minimal example of a button component with an optional variant:
1414
1515``` ts
16- import { styled } from " @phntms /css-components" ;
16+ import { styled } from " @phantomstudios /css-components" ;
1717import css from " ./styles.module.css" ;
1818
1919export const Button = styled (" button" , {
@@ -44,7 +44,7 @@ export const App = () => (
4444Install this package with ` npm ` .
4545
4646``` bash
47- npm i @phntms /css-components
47+ npm i @phantomstudios /css-components
4848```
4949
5050## Usage
@@ -67,7 +67,7 @@ components/Button/styles.module.css
6767components/Button/styles.ts
6868
6969``` ts
70- import { styled } from " @phntms /css-components" ;
70+ import { styled } from " @phantomstudios /css-components" ;
7171import css from " ./styles.module.css" ;
7272
7373export const StyledButton = styled (" button" , {
@@ -181,7 +181,7 @@ const StyledButton = styled("button", {
181181Wherever you specify a css selector, you can also pass in an array of classes to help composing and reusing styles.
182182
183183``` tsx
184- import { styled } from " @phntms /css-components" ;
184+ import { styled } from " @phantomstudios /css-components" ;
185185import shared from " ../sharedstyles.module.css" ;
186186import css from " ./styles.module.css" ;
187187
@@ -202,7 +202,7 @@ You can also style other components from other ecosystems. As long as the compon
202202Example extending the standard Next.js ` Link ` component:
203203
204204``` tsx
205- import { styled } from " @phntms /css-components" ;
205+ import { styled } from " @phantomstudios /css-components" ;
206206import NextLink from " next/link" ;
207207import css from " ./styles.module.css" ;
208208
@@ -223,7 +223,7 @@ By default variant values do not end up propagating to the element it is extendi
223223In the following example, ` readOnly ` is an intrinsic HTML attribute that we both want to style, but also continue to pass through to the DOM element.
224224
225225``` tsx
226- import { styled } from " @phntms /css-components" ;
226+ import { styled } from " @phantomstudios /css-components" ;
227227import css from " ./styles.module.css" ;
228228
229229const Input = styled (" input" , {
@@ -242,7 +242,7 @@ const Input = styled("input", {
242242We have included a helper that allows you to access the types of the variants you have defined.
243243
244244``` tsx
245- import { VariantProps } from " @phntms /css-components" ;
245+ import { VariantProps } from " @phantomstudios /css-components" ;
246246import css from " ./styles.module.css" ;
247247
248248const Button = styled (" button" , {
@@ -298,10 +298,10 @@ You can generate a component from this files with the following command:
298298
299299``` bash
300300# For CSS
301- npx @phntms /css-components --css styles.module.css
301+ npx @phantomstudios /css-components --css styles.module.css
302302
303303# For SCSS
304- npx @phntms /css-components --css styles.module.scss
304+ npx @phantomstudios /css-components --css styles.module.scss
305305
306306# or if you have the package installed
307307npx css-components --css styles.module.css
@@ -311,7 +311,7 @@ npx css-components --css styles.module.scss
311311This will output a file called ` styles.ts ` that looks like this:
312312
313313``` ts
314- import { styled } from " @phntms /css-components" ;
314+ import { styled } from " @phantomstudios /css-components" ;
315315
316316import css from " ./test.css" ;
317317
@@ -342,18 +342,18 @@ Example to generate components from all CSS and SCSS files in the components dir
342342
343343``` bash
344344# From CSS
345- npx @phntms /css-components --css ./src/components/** /* .css --output styles.ts
345+ npx @phantomstudios /css-components --css ./src/components/** /* .css --output styles.ts
346346
347347# Or from SCSS
348- npx @phntms /css-components --css ./src/components/** /* .scss --output styles.ts
348+ npx @phantomstudios /css-components --css ./src/components/** /* .scss --output styles.ts
349349
350350# Or from both CSS and SCSS
351- npx @phntms /css-components --css ./src/components/** /* .{css,scss} --output styles.ts
351+ npx @phantomstudios /css-components --css ./src/components/** /* .{css,scss} --output styles.ts
352352```
353353
354- [ npm-image ] : https://img.shields.io/npm/v/@phntms /css-components.svg?style=flat-square&logo=react
355- [ npm-url ] : https://npmjs.org/package/@phntms /css-components
356- [ npm-downloads-image ] : https://img.shields.io/npm/dm/@phntms /css-components.svg
357- [ npm-downloads-url ] : https://npmcharts.com/compare/@phntms /css-components?minimal=true
354+ [ npm-image ] : https://img.shields.io/npm/v/@phantomstudios /css-components.svg?style=flat-square&logo=react
355+ [ npm-url ] : https://npmjs.org/package/@phantomstudios /css-components
356+ [ npm-downloads-image ] : https://img.shields.io/npm/dm/@phantomstudios /css-components.svg
357+ [ npm-downloads-url ] : https://npmcharts.com/compare/@phantomstudios /css-components?minimal=true
358358[ ci-image ] : https://github.com/phantomstudios/css-components/workflows/test/badge.svg
359359[ ci-url ] : https://github.com/phantomstudios/css-components/actions
0 commit comments