Build

Learn how to configure and compile the Rotala resources.

File structure of the source#

As a Monorepo project, Rotala locate all the resources together with official packages in the same Github repository.

As for each official package under the source folder, all the source files are comipled into dist folder.

Postcss#

Rotala core only uses PostCSS and its plugins to compile the source.

plugins#

The following PostCSS plugins are already dependencies by default. By installing Rotala via a package manager yarn or npm, you'll have them in your project.

@import "rotala";

.tab {
  .tab-item {
    ...
  }
}

$my-component: a-beautiful-component;

configurations#

Here is the default PostCSS configuration for Rotala core styles sets.

// postcss.config.js

module.exports = {
  map: false,
  plugins: [
    require('postcss-import'),
    require('postcss-nested'),
    require('postcss-simple-vars')({
      variables: {
        prefix: ''
      }
    }),
    require('tailwindcss'),
    require('autoprefixer'),
    ...process.env.NODE_ENV === 'production'
      ? [
          require('postcss-banner')({
            important: true,
            inline: true,
            banner: 'Rotala.css v0.1 @copyright 2020 by Daiyanze'
          }),
          require('cssnano')
        ]
      : []
  ]
}

Import#

It's recommended to customize your own build by introduing the source files into your project. In this way, you can easily extend the styles with the Rotala "blank design" components for theming purposes.

default#

Extend the class easily with Tailwindcss utilities.

defaulthover me

/* import the rotala core */
@import "rotala";

/* style up component */
/* you can also write pure css within the block */
.button {
  @apply text-gray-700;
  @apply hover:bg-gray-300;
  @apply rounded-full;
}

on demand#

Only need what you want for the project? Simply import the required components to minimize the import size of the package.

• one
• two
• three

/* required styles */
@import "rotala/style/components/tab.pcss";

.tab {
  @apply inline-flex;
  @apply text-gray-700;
  @apply border border-solid border-gray-300;
  @apply rounded-full;

  &-item {
    @apply px-4;
    @apply rounded-full;

    &.active {
      @apply bg-gray-300;
    }
  }
}

Prefix#

Rotala keeps all of its classes without prefixes by default. To Avoid class name collisions while introducing Rotala to your project, it is preferable to add a custom prefix to the existing classes. Prefix is enabled by a PostCSS plugin postcss-simple-vars.

/* Prefix */
$link: $(prefix)link;
$button: $(prefix)button;
$checkbox: $(prefix)checkbox;
$form-group: $(prefix)form-group;
$hr: $(prefix)hr;
$input: $(prefix)input;
$radio: $(prefix)radio;
$select: $(prefix)select;
...

Utilize the postcss-simple-vars plugin to add your prefix.

// postcss.config.js

module.exports = {
  plugins: [
    ...,
    require('postcss-simple-vars')({
      variables: {
        prefix: 'rotala-'
      }
    }),
    ...
  ]
}

Then your component classes will turn into the following output after compiling.

/* Before */
.button {
  ...
}

.input {
  ...
}

/* After */
.rotala-button {
  ...
}

.rotala-input {
  ...
}