css-modules-ui-lib-poc
POC - build UI library from create-react-app with CSS Modules
Last updated a year ago by basherkev .
MIT · Original npm · Tarball · package.json
$ cnpm install css-modules-ui-lib-poc 
SYNC missed versions from official npm registry.

React UI library POC with CSS Modules

This project was bootstrapped with create-react-app-css-modules.

  • It is a POC UI library. Not production ready.
  • The components are not fully formed.
  • It's essentially a "scaffold" to test CSS Modules + Sass.

View UI library components in browser

You have 2 choices:

1. View in "dev" environment (e.g. to test components)

  • Comment out the following sections in "config\webpack.config.dev.js"
libraryTarget: 'umd'
library: 'uiLibPOC'
externals: {
    'react': 'commonjs react'
}

2. Or build the app and browse with static server

  • Comment out the same sections as above in "config\webpack.config.prod.js"
  • npm run build.
  • Run static server serve -s build.
  • View app at http://localhost:5000

How does this all work as an installable library / NPM package?

The library has been published to NPM.

"package.json" configuration

  • Library has been exported with npm run lib.
  • Package name has been defined - e.g. "name": "css-modules-ui-lib-poc".
  • Library entry point has been defined - e.g. "main": "lib/index.js".

Component configuration

  • Each component in "src\lib\components" has an associated ".js", ".scss" and ".json" file.
  • Each component is exported as a module in "src\lib\index.js" - e.g. export { default as Button } from './components/Button';.

So how do I consume this library in another application?

  • The notes below are for consuming in another React app.
  • We still need to work out how to do the same (with minimal config changes) in other applications? And whether we can link directly to JS and CSS in \build folder? We have configured libraryTarget: 'umd' for this in Webpack config files, but the auto-generated CSS Modules class names may be a problem.

1. Install library in your consuming app

npm i css-modules-ui-lib-poc

2. Install other Node packages if not already installed

npm i --save babel-cli babel-preset-es2015 babel-preset-react babel-preset-stage-0 classnames node-sass sass-loader

3. Modify "webpack.config.js" (or "dev"/"prod" variants if using Create React App)

  1. Require 'ExtractTextPlugin' to generate stylesheet
const ExtractTextPlugin = require('extract-text-webpack-plugin');
  1. Add this plugin to plugins array
plugins: [
  // ... other plugins ...
  new ExtractTextPlugin({
    filename: 'static/css/[name].css', // Or whatever filepath/name you use in your app
    allChunks: true
  })
],
  1. Replaced default CSS Modules loader config with...
{
  test: /\.s|css$/,
  use: ExtractTextPlugin.extract({
    use: [
      {
        loader: 'css-loader',
        options: {
          minimize: true,
          sourceMap: true,
          modules: true,
          importLoaders: 2,
          localIdentName: '[name]___[local]___[hash:base64:5]'
        }
      },
      {
        loader: 'postcss-loader',
          options: {
          // Necessary for external CSS imports to work
          // https://github.com/facebookincubator/create-react-app/issues/2677
          ident: 'postcss',
          plugins: () => [
            require('postcss-flexbugs-fixes'),
            autoprefixer({
              browsers: [
                '>1%',
                'last 4 versions',
                'Firefox ESR',
                'not ie < 9', // React doesn't support IE8 anyway
              ],
              flexbox: 'no-2009',
            }),
          ],
        }
      },
      'sass-loader'
    ]
  })
},
  1. Add 'scss' to the exclude array
exclude: [/\.js$/, /\.html$/, /\.json$/, /\.scss$/],

4. Example <Button/> usage

import React, { Component } from 'react';
import { Button } from 'css-modules-ui-lib-poc';

export default class MyComponent extends Component {
  render() {
    return (
      <div className="App">
        <Button label="button" />

        <Button className="primary" disabled="disabled" label="disabled primary" />

        <Button className="secondary" label="secondary button" />

        <Button className="primary" size="small" label="small primary" />

        <Button className="icon" icon="info" label="with icon" />
      </div>
    );
  }
}

Current Tags

  • 0.1.10                                ...           latest (a year ago)

12 Versions

  • 0.1.10                                ...           a year ago
  • 0.1.9                                ...           a year ago
  • 0.1.8                                ...           a year ago
  • 0.1.7                                ...           a year ago
  • 0.1.6                                ...           a year ago
  • 0.1.5                                ...           a year ago
  • 0.1.4                                ...           a year ago
  • 0.1.3                                ...           a year ago
  • 0.1.2                                ...           a year ago
  • 0.1.1                                ...           a year ago
  • 0.1.0                                ...           a year ago
  • 0.0.1                                ...           a year ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 2
Last Day 0
Last Week 1
Last Month 0
Dev Dependencies (0)
None
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |