How to use @stylable/node - 9 common examples

To help you get started, we’ve selected a few @stylable/node examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github wix / wix-ui-tpa / webpack.config.storybook.js View on Github external
function reconfigureStylable(config) {
  const stylablePlugin = new StylableWebpackPlugin({
    outputCSS: false,
    filename: '[name].stylable.bundle.css',
    includeCSSInJS: true,
    optimize: { classNameOptimizations: false, shortNamespaces: false },
    runtimeMode: 'shared',
    globalRuntimeId: '__stylable_yoshi__',
    generate: {
      runtimeStylesheetId: 'namespace',
    },
    resolveNamespace: resolveNamespaceFactory(project.name),
    // resolveNamespace: (namespace) => namespace + 'TPA',
    transformHooks: {
      postProcessor: stylableResult => {
        autoprefixProcessor.process(stylableResult.meta.outputAst).sync();
        return stylableResult;
      },
    },
  });

  //remove previous stylable config and attach new one
  config.plugins.pop();
  config.plugins.push(stylablePlugin);

  return config;
}
github wix / wix-ui-tpa / .autotools / node-require-hooks.js View on Github external
const { resolveNamespaceFactory } = require('@stylable/node');
const project = require('yoshi-config');
require('yoshi-helpers/require-hooks').setupRequireHooks();
require('@stylable/node').attachHook({
  stylableConfig: {
    resolveNamespace: resolveNamespaceFactory(project.name),
  },
});
const path = require('path');
const fs = require('fs');
const svgr = require('@svgr/core');
const babelCore = require('@babel/core');

require.extensions['.svg'] = mockSvg;
require.extensions['.scss'] = mockScss;

function mockScss(module) {
  module.exports = {
    default: '',
  };
}
github wix / stylable / packages / cli / src / build.ts View on Github external
outputCSSNameTemplate,
    outputSources,
    injectCSSRequest,
    optimize,
    minify,
    compat,
    manifest
}: BuildOptions) {
    const generatorModule = generatorPath
        ? require(resolve(generatorPath))
        : require('./default-generator');
    const generator: Generator = new generatorModule.Generator();
    const blacklist = new Set(['node_modules']);
    const fullSrcDir = join(rootDir, srcDir);
    const fullOutDir = join(rootDir, outDir);
    const { result: filesToBuild } = findFiles(fs, fullSrcDir, extension, blacklist);
    const assets: string[] = [];
    const diagnosticsMsg: string[] = [];
    const indexFileOutput: Array<{ from: string; name: string }> = [];
    const nameMapping: { [key: string]: string } = {};

    if (filesToBuild.length === 0) {
        log('[Build]', 'No stylable files found. build skipped.');
    } else {
        log('[Build]', `Building ${filesToBuild.length} stylable files.`);
    }
    filesToBuild.forEach(filePath => {
        indexFile
            ? generateFileIndexEntry(
                  filePath,
                  nameMapping,
                  log,
github wix / stylable / packages / webpack-extensions / src / stylable-metadata-plugin.ts View on Github external
private handleVariants(
        componentConfig: ComponentConfig,
        componentDir: string,
        compilation: webpack.compilation.Compilation,
        builder: ComponentMetadataBuilder,
        namespace: any,
        depth: any
    ) {
        if (componentConfig.variantsPath) {
            const variantsDir = join(componentDir, componentConfig.variantsPath);

            const { result: variants, errors } = findFiles(
                compilation.inputFileSystem,
                variantsDir,
                '.st.css',
                new Set(),
                true
            );
            if (errors.length) {
                throw new Error(
                    `Error while reading variants for: ${componentConfig.id} in ${variantsDir}\nOriginal Errors:\n${errors}`
                );
            }

            variants.forEach((name: string) => {
                if (!name.match(/\.st\.css/)) {
                    return;
                }
github wix / wix-ui-tpa / .autotools / node-require-hooks.js View on Github external
const { resolveNamespaceFactory } = require('@stylable/node');
const project = require('yoshi-config');
require('yoshi-helpers/require-hooks').setupRequireHooks();
require('@stylable/node').attachHook({
  stylableConfig: {
    resolveNamespace: resolveNamespaceFactory(project.name),
  },
});
const path = require('path');
const fs = require('fs');
const svgr = require('@svgr/core');
const babelCore = require('@babel/core');

require.extensions['.svg'] = mockSvg;
require.extensions['.scss'] = mockScss;

function mockScss(module) {
  module.exports = {
    default: '',
  };

@stylable/node

Integrate Stylable into your node application

MIT
Latest version published 6 days ago

Package Health Score

69 / 100
Full package analysis

Similar packages