react-with-styles-interface-css

WebJar for react-with-styles-interface-css

License	MIT
Categories	React User Interface Web Frameworks
GroupId	org.webjars.npm
ArtifactId	react-with-styles-interface-css
Last Version	6.0.0
Release Date	Dec 3, 2019
Type	jar
Description	react-with-styles-interface-css WebJar for react-with-styles-interface-css
Project URL	http://webjars.org
Source Code Management	https://github.com/airbnb/react-with-styles-interface-css

Download react-with-styles-interface-css

Filename	Size
react-with-styles-interface-css-6.0.0.pom
react-with-styles-interface-css-6.0.0.jar	16 KB
react-with-styles-interface-css-6.0.0-sources.jar	22 bytes
react-with-styles-interface-css-6.0.0-javadoc.jar	22 bytes

How to add to project

Apache Maven

<!-- https://jarcasting.com/artifacts/org.webjars.npm/react-with-styles-interface-css/ -->
<dependency>
    <groupId>org.webjars.npm</groupId>
    <artifactId>react-with-styles-interface-css</artifactId>
    <version>6.0.0</version>
</dependency>

Gradle Groovy

// https://jarcasting.com/artifacts/org.webjars.npm/react-with-styles-interface-css/
implementation 'org.webjars.npm:react-with-styles-interface-css:6.0.0'

Gradle Kotlin

// https://jarcasting.com/artifacts/org.webjars.npm/react-with-styles-interface-css/
implementation ("org.webjars.npm:react-with-styles-interface-css:6.0.0")

Apache Buildr

'org.webjars.npm:react-with-styles-interface-css:jar:6.0.0'

Apache Ivy

<dependency org="org.webjars.npm" name="react-with-styles-interface-css" rev="6.0.0">
  <artifact name="react-with-styles-interface-css" type="jar" />
</dependency>

Groovy Grape

@Grapes(
@Grab(group='org.webjars.npm', module='react-with-styles-interface-css', version='6.0.0')
)

Scala SBT

libraryDependencies += "org.webjars.npm" % "react-with-styles-interface-css" % "6.0.0"

Leiningen

[org.webjars.npm/react-with-styles-interface-css "6.0.0"]

Dependencies

compile (2)

Group / Artifact	Type	Version
org.webjars.npm : array.prototype.flat	jar	[1.2.1,2)
org.webjars.npm : global-cache	jar	[1.2.1,2)

Project Modules

There are no modules declared in this project.

react-with-styles-interface-css

Interface for react-with-styles that compiles CSS-in-js styles to static CSS classes with deterministic and human-friendly class names whose styles can be easily overridden.

Usage

Interface

A react-with-styles interface which is to be used along with react-with-styles.

import ThemedStyleSheet from 'react-with-styles/lib/ThemedStyleSheet';
import CSSInterface, { registerCSSInterfaceNamespace } from 'react-with-styles-interface-css';

ThemedStyleSheet.registerInterface(CSSInterface);

// Optional: Prefix all class names in the output with 'MyPackageName__'
const namespace = 'MyPackageName';
registerCSSInterfaceNamespace(namespace);

Styles

When writing styles, all classes throughout a project should be given unique names. Otherwise, class name collisions may result in unexpected and unwanted behavior.

Overriding styles

The styles for a class can be overridden using the same name with which the class was defined. If the optional class name prefix was configured, the prefix should be used when overriding a class.

Note: In order to provide compatibility with aphrodite, the CSS output by this interface uses specifiers with varying levels of specificity. This allows for style resolution to be sensitive to the ordering of styles in calls to css(...). However, these extra specifiers should not be overridden.

Compile

The styles passed to withStyles in the source code are compiled to static CSS by the compileCSS function shown below. For convenience, a CLI wrapping compileCSS is provided.

Compile via CLI

Compile styles to CSS using the compile-css CLI.

• Expects a relative or absolute path to the entry point source file of a React application
• Automatically compiles the source file and its imported dependencies on the fly using the babel configuration present in the project if one exists
• Outputs a stylesheet.css file containing the compiled CSS in the current working directory

Run the CLI via npm script (preferred):

{
  "scripts": {
    "build:css": "compile-css src/App.jsx"
  }
}

npm run build:css

Run the CLI directly:

./node_modules/.bin/compile-css src/App.jsx

Compile via library function

import compileCSS from 'react-with-styles-interface-css/compile';

const entryPointFilePath = 'src/App.jsx';
// CSS is the minified CSS output
const CSS = compileCSS(entryPointFilePath);

Airbnb

Versions

Version
6.0.0 Dec 3, 2019
4.0.3 Nov 9, 2018