How to use known-css-properties - 10 common examples

import Adapter from "enzyme-adapter-react-16";
import { flow, camelCase, omit } from "lodash";
import sinon from "sinon";
import voidElements from "void-elements";
import { all as cssProps } from "known-css-properties";
import htmlProps from "react-known-props";
import ariaProps from "aria-attributes/index.json";
// $FlowFixMe
import safeHtmlProps from "react-html-attributes";
import { findHTMLTags, getHTMLTag, findHTMLTag } from "./utils";

type TestFn = (Element: ComponentType) => ComponentType;

configure({ adapter: new Adapter() });

const styleProps = cssProps
  .filter(prop => !/^-/.test(prop))
  .map(camelCase)
  .reduce(
    (acc, prop) => ({
      ...acc,
      [prop]: prop
    }),
    {}
  );

const reactProps = [...safeHtmlProps["*"], ...ariaProps]
  .filter(
    prop =>
      !/^style|className|allowTransparency|srcLang|suppressContentEditableWarning|capture|marginWidth|marginHeight|classID|is|keyType|keyParams|charSet|dangerouslySetInnerHTML|on[A-Z].+$/.test(
        prop
      )

block.forEach('declaration', function (dec) {
          var prop = dec.first('property'),
              name = prop.first('ident');

          if (name) {
            if (parser.options['ignore-custom-properties']) {
              // lazy load our css property list
              const propertyList = require('known-css-properties').all;
              if (propertyList.indexOf(name.content) !== -1) {
                properties[name.content] = prop;
              }
            }
            else {
              properties[name.content] = prop;
            }
          }
        });

'use strict';

var helpers = require('../helpers');
var properties = require('known-css-properties').all;
// Keep track of our properties we need to skip from the gonzales loop
var skipProps = 0;
/**
 * Combine the valid property array and the array of extras into a new array
 *
 * @param {Array} props - The list of default valid properties
 * @param {Array} extras - The user specified list of valid properties
 * @returns {Array} Combined list
 */
var getCombinedList = function (props, extras) {
  return props.concat(extras);
};

/**
 * Combines the base property name with the current property name to correct a full property name
 *

block.forEach('declaration', function (dec) {
          var prop = dec.first('property'),
              name = prop.first('ident');

          if (name) {
            if (parser.options['ignore-custom-properties']) {
              // lazy load our css property list
              const propertyList = require('known-css-properties').all;
              if (propertyList.indexOf(name.content) !== -1) {
                properties[name.content] = prop;
              }
            }
            else {
              properties[name.content] = prop;
            }
          }
        });

export const getStyleProps = (): Object =>
  cssProps
    .filter(prop => !/^-/.test(prop))
    .map(camelCase)
    .reduce(reducer, {});

export const OokConfig = ({
  breakpoints = {},
  cssProperties = knownCssProperties.all,
  children,
}) => (
  
    
      {ctx => {
        return children
      }}
    
  
)

"use strict";

const _ = require("lodash");
const isCustomProperty = require("../../utils/isCustomProperty");
const isStandardSyntaxDeclaration = require("../../utils/isStandardSyntaxDeclaration");
const isStandardSyntaxProperty = require("../../utils/isStandardSyntaxProperty");
const optionsMatches = require("../../utils/optionsMatches");
const postcss = require("postcss");
const properties = require("known-css-properties").all;
const report = require("../../utils/report");
const ruleMessages = require("../../utils/ruleMessages");
const validateOptions = require("../../utils/validateOptions");

const ruleName = "property-no-unknown";

const messages = ruleMessages(ruleName, {
  rejected: property => `Unexpected unknown property "${property}"`
});

const rule = function(actual, options) {
  return (root, result) => {
    const validOptions = validateOptions(
      result,
      ruleName,
      { actual },

root.walkDecls(decl => {
      const { prop } = decl

      if (!isStandardSyntaxProperty(prop)) { return }
      if (!isStandardSyntaxDeclaration(decl)) { return }
      if (isCustomProperty(prop)) { return }

      if (!shouldCheckPrefixed && vendor.prefix(prop)) { return }

      if (optionsMatches(options, "ignoreProperties", prop)) { return }

      if (properties.indexOf(prop.toLowerCase()) !== -1) { return }

      report({
        message: messages.rejected(prop),
        node: decl,
        result,
        ruleName,
      })
    })
  }

return;
      }

      if (isCustomProperty(prop)) {
        return;
      }

      if (!shouldCheckPrefixed && postcss.vendor.prefix(prop)) {
        return;
      }

      if (optionsMatches(options, "ignoreProperties", prop)) {
        return;
      }

      if (properties.indexOf(prop.toLowerCase()) !== -1) {
        return;
      }

      report({
        message: messages.rejected(prop),
        node: decl,
        result,
        ruleName
      });
    });
  };