This package has been deprecated

    Author message:

    no longer maintained as of v6.0

    @instructure/ui-presets

    5.52.3 • Public • Published

    category: packages

    @instructure/ui-presets

    Shared config for building and testing UI code.

    npm build-status MIT License Code of Conduct

    Installation

    yarn add --dev @instructure/ui-presets

    Babel

    In your .babelrc file:

    {
      "presets": ["@instructure/ui-presets/babel"]
    }

    To pass in more options, you can make your own preset:

    /* babelrc.js */
    module.exports = {
      presets: [[ require('@instructure/ui-presets/babel'), {
        themeable: true,
        coverage: Boolean(process.env.COVERAGE)
      }]]
    }

    Webpack

    In your Webpack config file:

    /* webpack.config.js */
    {
      plugins: require('@instructure/ui-presets/webpack/plugins'),
      module: {
        rules: require('@instructure/ui-presets/webpack/module/rules')
      },
      resolveLoader: require('@instructure/ui-presets/webpack/resolveLoader')
    }

    Karma

    In your Karma config file:

    /* karma.config.js */
    const path = require('path')
    module.exports = require('@instructure/ui-presets/karma')({
      bundle: './tests.bundle.js',
      coverageThreshold: {
        global: {
          lines: 91
        },
        each: {
          lines: 50
        }
      },
      coverageDirectory: path.join(__dirname, '../../coverage/ui-core')
    })

    PostCSS

    In your PostCSS config file:

    /* postcss.config.js */
    module.exports = require('@instructure/ui-presets/postcss')({
      before: {
        plugin: 'postcss-nested',
        insert: [
          [require.resolve('postcss-input-range')]
        ]
      },
      nesting: false // Set to true to use postcss-nesting instead of postcss-nested, defaults to false
    })

    Eslint

    /* .eslintrc.js */
    module.exports = require('@instructure/ui-presets/eslint')

    StyleLint

    /* stylelint.config.js */
    module.exports = require('@instructure/ui-presets/stylelint')

    Themeable Components

    If your application already has a babel config and webpack config, and it is costly to convert fully to the ui-presets, you can introduce themeable components incrementally by adding the appropriate loader and resolve loader to your existing webpack config.

    /* webpack.config.js */
    {
      module: {
        rules: [
          {
            test: /\.css$/,
            exclude: [/node_modules/],
            use: [ 'babel-loader', 'themeable-css-loader' ]
          }
        ]
      },
      resolveLoader: require('@instructure/ui-presets/webpack/resolveLoader')
    }

    Keywords

    none

    Install

    npm i @instructure/ui-presets

    DownloadsWeekly Downloads

    30

    Version

    5.52.3

    License

    MIT

    Unpacked Size

    40.7 kB

    Total Files

    20

    Last publish

    Collaborators

    • kyler-instructure
    • jonscheiding
    • instuici
    • codequistador
    • natearmstrong
    • eschiebel
    • maths22
    • hyan
    • jcrystal
    • skacsmark
    • itadmins
    • quizzesuici
    • instructure-toolsmiths-service-user
    • prenner
    • aogata-inst
    • acallejas
    • viktor.ohad
    • eszter.szabo
    • amireh-inst
    • daniel.hatas.instructure
    • brianlwatson
    • instout